A Few More HTML5 Coding Tips

A Few More HTML5 Coding Tips

HTML5 datepicker prevent past dates

My recent venture is a website for booking movie tickets. I am having issues with datapicker. I am not sure about the minimum attribute preventing past dates in the HTML5 datapicker. Is there any pure HTML5 code for this issue?

–>     Ensure that the date input is disabled when the document loads. Run the onload function inserting today’s date in the field in the necessary format.

function onLoad() {

var input = document.getElementById(“dateField”);

var today = new Date();

// Set month and day to string to add leading 0

var day = new String(today.getDate());

var mon = new String(today.getMonth()+1); //January is 0!

var yr = today.getFullYear();

if(day.length < 2) { day = “0″ + day; }

if(mon.length < 2) { mon = “0″ + mon; }

var date = new String( yr + ‘-’ + mon + ‘-’ + day );

input.disabled = false;

input.setAttribute(‘min’, date);

}

document.addEventListener(‘load’, onLoad, false);

<body>

<input id=”dateField” type=”date” disabled  />

</body>

Adding attributes to custom elements

 

  1. I have been trying to add attributes to my custom elements and trying to use the same within my new element. The problem is with the syntax. How can accomplish this task by custom labeling attribute in my created callback to render it?

Þ     Try this;

<body>

<current-date label=”Today is: “></current-date>

<script>

document.registerElement(‘current-date’, {

prototype: {

createdCallback: function() {

this.foo = {value: function() {

return this.attributes.getNamedItem(“label”).value;

}},

this.innerHTML = this.foo.value.call(this) + new Date();

}

}

});

</script>

</body>

Toggle Onclick Issue in Javascript

  1. I am struggling to toggle a button to make a line bold. What code should I implement to get the desired results?

Þ     HTML:

<canvas id=”DrawLineCanvas” width=”578″ height=”200″></canvas>

<button id=”BoldLineButton”>Line size: <b>1</b></button>

JS:

var doc = document,

canvas  = doc.querySelector(‘#DrawLineCanvas’),

boldBtn = doc.querySelector(‘#BoldLineButton’),

ctx = canvas.getContext(’2d’),

size =  [1, 3, 5, 10, 15],      // use only [1, 15] if you want

currSize = 0; // size[0] = 1    // Index pointer to get the value out of the

// size Array

function draw(){

canvas.width = canvas.width;

ctx.beginPath();

ctx.moveTo(100, 150);

ctx.lineTo(450,50);

ctx.lineWidth = size[currSize];  // Use currSize Array index

ctx.stroke();

}

draw();

 

function toggleLineBold() {

++currSize;                      // Increase size and

currSize %= size.length;         // loop if needed.

boldBtn.getElementsByTagName(‘b’)[0].innerHTML =  size[currSize];

draw();

}

boldBtn.addEventListener(“click”, toggleLineBold);

 

Object Not Responsive With Position: Relative

  1. I am working on a responsive design. In that, I want a square button supporting the design when the display is reduced. How do I make the button responsive?

Þ     I guess you are trying to use pixel-based positioning, go for percentage instead.

.menuBox {

position: relative;

margin-left: 20%;

margin-top: 200px;

width: 35px;

height: 35px;

border-style: solid;

border-width: 1px;

border-radius: 2px;

}

 

  1. Loop to draw many canvases?

I am trying to draw multiple canvases, but I am repeatedly getting the error. How do I approach this problem?

Þ     An alternative is to draw the arcs and use math to hit-test when the mouse is on a particular arc.

<!doctype html>

<html>

<head>

<link rel=”stylesheet” type=”text/css” media=”all” href=”css/reset.css” /> <!– reset css –>

<script type=”text/javascript” src=”http://code.jquery.com/jquery.min.js”></script>

<style>

body{ background-color: ivory; }

#canvas{border:1px solid red;}

</style>

 

<script>

$(function(){

var canvas=document.getElementById(“canvas”);

var ctx=canvas.getContext(“2d”);

// variables to calculate mouse position

var $canvas=$(“#canvas”);

var canvasOffset=$canvas.offset();

var offsetX=canvasOffset.left;

var offsetY=canvasOffset.top;

var scrollX=$canvas.scrollLeft();

var scrollY=$canvas.scrollTop();

// define our arcs

var colors=["red","green","blue","purple","gold"];

var arcCount=colors.length;

var arcAngle=Math.PI*2/arcCount;

var cx=150;

var cy=150;

var radius=75;

var lineWidth=25;

// set the context properties

ctx.lineWidth=lineWidth;

ctx.shadowBlur = 20;

ctx.shadowOffsetX = 5;

ctx.shadowOffsetY = 5;

// initially draw the arcs without a highlight

draw(-1);

// draw all arcs with shadowIndex hightlighted

function draw(shadowIndex){

ctx.clearRect(0,0,canvas.width,canvas.height);

for(var i=0;i<arcCount;i++){

ctx.shadowColor = (i==shadowIndex) ? ‘#7FD4FF’ : “#FFFFFF”;

ctx.beginPath();

ctx.arc(cx,cy,radius,arcAngle*i,arcAngle*(i+1));

ctx.strokeStyle=colors[i];

ctx.stroke();

}

}

// highlight any arc that the mouse moves over

function handleMouseMove(e){

e.preventDefault();

// get the mouse position

mouseX=parseInt(e.clientX-offsetX);

mouseY=parseInt(e.clientY-offsetY);

// calc the deltaX/deltaY of mouse to centerpoint

// (needed for our distance and angle calculations)

var dx=mouseX-cx;

var dy=mouseY-cy;

// calc the distance from mouse to centerpoint

var mouseDistance=Math.sqrt(dx*dx+dy*dy);

// leave if the mouse is not between

// the inside and outside of the stroke

if(mouseDistance<radius-lineWidth/2 || mouseDistance>radius+lineWidth/2){return;};

// calc the angle of the mouse vs centerpoint

var mouseAngle=(Math.atan2(dy,dx)+Math.PI*2)%(Math.PI*2);

// determine which arc that angle is inside

var shadowArc=parseInt(mouseAngle/arcAngle);

// redraw all arcs with shadowArc shadowed

draw(shadowArc);

}

// listen for mousemove events on the canvas

$(“#canvas”).mousemove(function(e){handleMouseMove(e);});

}); // end $(function(){});

</script>

</head>

<body>

<h4>Move the mouse to highlight an arc</h4>

<canvas id=”canvas” width=300 height=300></canvas>

</body>

</html>

 

  1. Bootstrap space between columns

I want to minimize the space between the input + and = symbols. How do I do it?

There are two different ways to do this, but their difficulty level varies. The code mentioned below is easy to get it done without disturbing the responsive attributes.

.form-group span {

margin-left: 0.75em;

}

<form class=”form-inline” role=”form”>

<div>

<input id=”num1″ type=”text” name=”num1″ value=” {$unique_id}” readonly=”readonly” /> <span>+</span>

</div>

<div>

<input id=”num2″ type=”text” name=”num2″ value=” {$unique_id2}” readonly=”readonly” /> <span>=</span>

</div>

<div>

<input id=”input” class=”col-xs-10 input-sm” type=”text” name=”” />

</div>

</form>

Responsive full screen image with scroll

  1. I want to create a full screen image on the webpage. When users visit the site, they must be able to see a single image having 100% width and on scrolling should be able to see the remaining site. I also want 4-5 sections with content after the image. Is there a way to make it by keeping the webpage responsive?

 

Þ     There is no need to use position. If you set a div’s size along with the screen size, the remaining sections will come below the image.

Example

The image div will contain your image, and you set it to width: 100% and height: 100%

then, just add your content below this div.

HTML:

<div class=’image’>

<img src=”image.jpg” />

</div>

<div class=’content’>Content</div>

CSS:

html, body{

margin: 0;

height: 100%;

}

.image{

width:100%;

height:100%;

background: green;

}

.image img{

width:100%;

height:100%;

}

.content {

width:100%; height: 100px;

}

 

 

 

 

iOS Coding Tips →

About the author´s Group

Free Bees

They have extra-large community and love free stuff open to all. Utterly non-poisonous, these bees at MoWeble are very cooperative and solve the problem as a team. They produce sweet products that the whole world likes.


	

3 Comments

  1. small
    February 13, 2014 at 10:12 am

    hi
    That’s a nice idea post


  2. nike mercurial vapor
    February 26, 2014 at 8:33 am

    I am sսre this post has touched all the internet visitors,
    its really reallү nice post on building up new web site.


  3. chanel
    February 28, 2014 at 9:20 am

    I’m really imрressed toɡetheг with yߋur wгіting abilіties as smartly as with the format in your blog.
    Is that this ɑ paid subjеct matter or did you cսstomize
    it yourself? Either way stay upρ the excellent quality writing,
    it is rare to look a nicе ƅloɡ likе this
    one these days..


Leave A Reply

You must be logged in to post a comment.