New Media Elements
Tag Description
<audio> Defines sound or music
content
<video> Defines video or movie
content
<source> Defines sources for
<video> and <audio>
<track> Defines tracks for
<video> and <audio>
<embed> Defines containers for
external applications (like plug-ins)
New Form Elements
Tag Description
<datalist> Defines pre-defined
options for input controls
<keygen> Defines a key-pair
generator field (for forms)
<output> Defines the result of a
calculation
reference
link:http://www.w3schools.com/html/html5_new_elements.asp
what is localstorage with example ?
application cache with example ?
What is parseint in javascript ?
JavaScript parseInt() Function. The
parseInt() function parses a string and returns an integer.
what are draw backs of jquery mobile?
var a = true && help;
alert ('a'); what is the output?
var a = true ^^ help;
alert ('a'); what is the output?
if (i=0, i<5, i++;){
var = 20;
}
alert ();
What are css3 selectors?
:first-of-type p:first-of-type Selects
every <p> element that is the first <p> element of its
parent 3
:last-of-type p:last-of-type Selects
every <p> element that is the last <p> element of its
parent 3
:only-of-type p:only-of-type Selects
every <p> element that is the only <p> element of its
parent 3
:only-child p:only-child Selects every
<p> element that is the only child of its parent 3
:nth-child(n) p:nth-child(2) Selects
every <p> element that is the second child of its parent 3
:nth-last-child(n) p:nth-last-child(2) Selects
every <p> element that is the second child of its parent,
counting from the last child 3
:nth-of-type(n) p:nth-of-type(2) Selects
every <p> element that is the second <p> element of its
parent 3
:nth-last-of-type(n) p:nth-last-of-type(2) Selects
every <p> element that is the second <p> element of its
parent, counting from the last child 3
:last-child p:last-child Selects every
<p> element that is the last child of its parent 3
:root :root Selects the document's root
element 3
:empty p:empty Selects every <p>
element that has no children (including text nodes) 3
:target #news:target Selects the
current active #news element (clicked on a URL containing that anchor
name) 3
:enabled input:enabled Selects every
enabled <input> element 3
:disabled input:disabled Selects every
disabled <input> element 3
:checked input:checked Selects every
checked <input> element 3
:not(selector) :not(p) Selects every
element that is not a <p> element 3
::selection ::selection Selects the
portion of an element that is selected by a user
What are pseudo classes for p tag?
:first-letter p:first-letter Selects
the first letter of every <p> element 1
:first-line p:first-line Selects the
first line of every <p> element 1
:first-child p:first-child Selects
every <p> element that is the first child of its parent 2
:before p:before Insert content before
the content of every <p> element 2
:after p:after Insert content after
every <p> element 2
:lang(language) p:lang(it) Selects
every <p> element with a lang attribute equal to "it"
(Italian) 2
element1~element2 p~ul Selects every
<ul> element that are preceded by a <p> element 3
Quicker mode in html?
If we are not specify the doctype in
our htmlpage, we may not get the same output in all pages I.e the
browser moves to quicker mode.
Css3 gradients?
Web workers?
Diff between undefined and null?
Many a times we often get confused on
whats the difference between UNDEFINED and NULL.
undefined means a variable has been
declared but has not yet been assigned a value. On the other hand,
null is an assignment value. It can be assigned to a variable as a
representation of no value.
Also, undefined and null are two
distinct types: undefined is a type itself (undefined) while null is
an object.
Unassigned variables are initialized by
JavaScript with a default value of undefined. JavaScript never sets a
value to null. That must be done programmatically.
Datatypes in javascript?
Numerical, string, boolean, undefined,
null
how to draw a line in canvas ?
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas"
width="300" height="150" style="border:1px
solid #d3d3d3;">
Your browser does not support the HTML5
canvas tag.</canvas>
<script>
var
c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
</script>
</body>
</html>
How to show the second page as the
default page in a jQuery mobile Multi-page template structure?
This part will prevent normal page
load. Don't forget, like in my example mobileinit MUST be initialized
before jQuery Mobile is initialized. Below code is used to stop
showing the first page in the jqm spa application.
$(document).on("mobileinit",function()
{
$.mobile.autoInitializePage =
false;
});
to show the second page by hiding the
first page we have to use the below code
$(document).ready(function() {
window.location.hash = 'home';
$.mobile.initializePage();
});
In the above home
is the id of the second page in the application.
What is flex model in html5?
What is
flexibility?
The box-flex style
property defines if a child of a flexbox should be flexible or
inflexible, and helps to define its flexibility ratio relative to its
siblings. Let's demonstrate what that actually means. First, let's
start with three boxes.
<div
id="flexbox">
<p>child
1</p>
<p>child
2</p>
<p>child
3</p>
</div>
Now, we want them
to lay out horizontally next to each other, and their heights should
always match, regardless of the content in each. How would you
currently tackle this? Most, without thinking, would simply float
these paragraphs, perhaps adding overflow:hidden; to the parent in
order to clear the floats. Nothing very special. But we could also do
it quite easily with flexbox:
#flexbox {
display: box;
box-orient:
horizontal;
}
In the above code,
we’re simply telling the parent to behave according to this flexbox
model, and to lay out all its children along the horizontal axis. No
floats. Yay.
The widths of the
children remain as specified (or their inherent width if not
specified). This means that if the total widths of all the children
is less than the total width of the parent, we’ll get something
like this:
By default,
children of a flexbox remain inflexible. That might seem a little
odd, but it's it gives a chance for the children to opt into the
flexible experience. But what if you wanted children one and two to
have specific widths and child three to adjust itself depending on
the available space within the parent? Flexbox to the rescue:
#flexbox {
display: box;
box-orient:
horizontal;
}
#flexbox >
p:nth-child(3) {
box-flex: 1;
}
Here, we’re
telling the last child to become flexible, and to take up available
space. Since we’ve only allocated space to one element, it will
take up all of the available space:
The 3rd child
element, having flex, takes up the available space.
Note that the
element only becomes flexible along the orientation axis of the box;
in this case the element becomes flexible horizontally.
The value for
box-flex is relative. So if we were to make the second and third
children flexible:
#flexbox {
display: box;
box-orient:
horizontal;
}
#flexbox >
p:nth-child(2),
#flexbox >
p:nth-child(3) {
box-flex: 1;
}
These would each
take up the same amount of available space, in fact dividing the
available space equally between them.
2 of the 3 child
elements share the available space in the parent element.
Now we could also
play with setting the box-flex of children 1, 2, and 3 to be 1, 2, 3
respectively and they would then absorb the extra space of their
parent in that ratio. But instead, lets put this into action.
document.ready function replacing in
jquery mobile or what is eualent to $(document).ready in jqm?
$(document).on('pageinit', function(){
});
$(document).on('pageinit') vs
$(document).ready()
The first thing you learn in jQuery is
to call code inside the $(document).ready() function so everything
will execute as soon as the DOM is loaded. However, in jQuery Mobile,
Ajax is used to load the contents of each page into the DOM as you
navigate. Because of this $(document).ready() will trigger before
your first page is loaded and every code intended for page
manipulation will be executed after a page refresh. This can be a
very subtle bug. On some systems it may appear that it works fine,
but on others it may cause erratic, difficult to repeat weirdness to
occur.
Classic jQuery syntax:
$(document).ready(function() {
});
To solve this problem (and trust me
this is a problem) jQuery Mobile developers created page events. In a
nutshell page events are events triggered in a particular point of
page execution. One of those page events is a pageinit event and we
can use it like this:
$(document).on('pageinit', function() {
});
We can go even further and use a page
id instead of document selector. Lets say we have jQuery Mobile page
with an id index:
<div data-role="page"
id="index">
<div data-theme="a"
data-role="header">
<h3>
First Page
</h3>
<a href="#second"
class="ui-btn-right">Next</a>
</div>
<div data-role="content">
<a href="#"
data-role="button" id="test-button">Test
button</a>
</div>
<div data-theme="a"
data-role="footer" data-position="fixed">
</div>
</div>
To execute a code that will only
available to the index page we could use this syntax:
$('#index').on('pageinit', function() {
});
Pageinit event will be executed every
time page is about be be loaded and shown for the first time. It will
not trigger again unless page is manually refreshed or ajax page
loading is turned off. In case you want code to execute every time
you visit a page it is better to use pagebeforeshow event.
Here's a working example :
http://jsfiddle.net/Gajotres/Q3Usv/ to demonstrate this problem.
Few more notes on this question. No
matter if you are using 1 html multiple pages or multiple html files
paradigm it is advised to separate all of your custom javascript page
handling into a single separate js file. This will note make your
code any better but you will have much better code overview,
especially while creating a jQuery Mobile application.
There's also another special jQuery
Mobile event and it is called mobileinit.When jQuery Mobile starts,
it triggers a mobileinit event on the document object. To override
default settings, bind them to mobileinit. One of a good examples of
mobileinit usage is turning off ajax page loading, or changing
default ajax loader behavior.
$(document).on("mobileinit",
function(){
//apply overrides here
});
Page events transition order
First all events can be found here:
http://api.jquerymobile.com/category/events/
Lets say we have a page A and a page B,
this is a unload/load order:
page B - event pagebeforecreate
page B - event pagecreate
page B - event pageinit
page A - event pagebeforehide
page B - event pagebeforeshow
page A - event pageremove
page A - event pagehide
page B - event pagebeforeshow
page B - event pageshow
For better page events understanding
read this:
pagebeforeload, pageload and
pageloadfailed are fired when an external page is loaded
pagebeforechange, pagechange and
pagechangefailed are page change events. These events are fired when
a user is navigating between pages in the applications.
pagebeforeshow, pagebeforehide,
pageshow and pagehide are page transition events. These events are
fired before, during and after a transition and are named.
pagebeforecreate, pagecreate and
pageinit are for page initialization.
pageremove can be fired and then
handled when a page is removed from the DOM
Page loading jsFiddle example:
http://jsfiddle.net/Gajotres/QGnft/
If AJAX is not enabled, some events may
not fire.
Prevent page transition
If for some reason page transition
needs to be prevented on some condition it can be done with this
code:
$(document).on('pagebeforechange',
function(e, data){
var to = data.toPage,
from = data.options.fromPage;
if (typeof to === 'string') {
var u =
$.mobile.path.parseUrl(to);
to = u.hash || '#' +
u.pathname.substring(1);
if (from) from = '#' +
from.attr('id');
if (from === '#index' &&
to === '#second') {
alert('Can not transition
from #index to #second!');
e.preventDefault();
e.stopPropagation();
// remove active status on
a button, if transition was triggered with a button
$.mobile.activePage.find('.ui-btn-active').removeClass('ui-btn-active
ui-focus ui-btn');;
}
}
});
This example will work in any case
because it will trigger at a begging of every page transition and
what is most important it will prevent page change before page
transition can occur.
Here's a working example:
Prevent multiple event
binding/triggering
jQuery Mobile works in a different way
then classic web applications. Depending on how you managed to bind
your events each time you visit some page it will bind events over
and over. This is not an error, it is simply how jQuery Mobile
handles its pages. For example, take a look at this code snipet:
$(document).on('pagebeforeshow','#index'
,function(e,data){
$(document).on('click',
'#test-button',function(e) {
alert('Button click');
});
});
Working jsFiddle example:
http://jsfiddle.net/Gajotres/CCfL4/
Each time you visit page #index click
event will is going to be bound to button #test-button. Test it by
moving from page 1 to page 2 and back several times. There are few
ways to prevent this problem:
Solution 1
Best solution would be to use pageinit
to bind events. If you take a look at an official documentation you
will find out that pageinit will trigger ONLY once, just like
document ready, so there's no way events will be bound again. This is
best solution because you don't have processing overhead like when
removing events with off method.
Working jsFiddle example:
http://jsfiddle.net/Gajotres/AAFH8/
This working solution is made on a
basis of a previous problematic example.
Solution 2
Remove event before you bind it:
$(document).on('pagebeforeshow',
'#index', function(){
$(document).off('click',
'#test-button').on('click', '#test-button',function(e) {
alert('Button click');
});
});
Working jsFiddle example:
http://jsfiddle.net/Gajotres/K8YmG/
Solution 3
Use a jQuery Filter selector, like
this:
$('#carousel
div:Event(!click)').each(function(){
//If click is not bind to #carousel
div do something
});
Because event filter is not a part of
official jQuery framework it can be found here:
http://www.codenothing.com/archives/2009/event-filter/
In a nutshell, if speed is your main
concern then Solution 2 is much better then Solution 1.
Solution 4
A new one, probably an easiest of them
all.
$(document).on('pagebeforeshow',
'#index', function(){
$(document).on('click',
'#test-button',function(e) {
if(e.handled !== true) // This
will prevent event triggering more then once
{
alert('Clicked');
e.handled = true;
}
});
});
Working jsFiddle example:
http://jsfiddle.net/Gajotres/Yerv9/
No comments:
Post a Comment