Solved Objective Questions on jQuery Library set-1

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">1) Which of the following statements about the features of jQuery are True.<br /><br />i) jQuery has an expressive syntax for referring to elements in the document.<br /><br />ii) jQuery has an efficient query method for finding the set of document elements that match a CSS selector.<br /><br />iii) jQuery has a useful set of methods for manipulating selected elements. <br /><br />A. i, ii and iii only<br /><br />B. i, ii and iv only<br /><br />C. i, iii and iv only<br /><br />D. All i, ii, iii and iv<br /><br /><br />2) If you are using $ in your own code, or are using another library, such as prototype, that uses $, you can call .......... to restore $ to its original value.<br /><br />A. jQuery.noConflict()<br /><br />B. jQuery.removeConflict()<br /><br />C. jQuery.restoreDefault()<br /><br />D. jQuery.restoreFunction()<br /><br /><br />3) Which of the following is/are the sources of Content Distribution Network(CDN) for jQuery.<br /><br />A. jQuery CDN<br /><br />B. Microsoft CDN<br /><br />C. Google CDN<br /><br />D. All of the above<br /><br /><br />4) Which of the following are the different ways of invoking jQuery() function.<br /><br />i) invoke $() is to pass a CSS selector to it<br /><br />ii) invoke $() is to pass an element or document or window object<br /><br />iii) invoke $() is to pass a string of JavaScript code<br /><br />iv) invoke $() is to pass a function to it<br /><br />A. i, ii and iii only<br /><br />B. i, ii and iv only<br /><br />C. i, iii and iv only<br /><br />D. All i, ii, iii and iv<br /><br /><br />5) The jQuery library defines a number of utility functions, one of them is ............ function for general purpose iteration and another is ............ function for parsing JSON text.<br /><br />A. jQuery.each(), jQuery.JSONtext()<br /><br />B. jQuery.iterate(), jQuery.parseJSON()<br /><br />C. jQuery.each(), jQuery.parseJSON()<br /><br />D. jQuery.general(), jQuery.parseJSON()<br /><br /><br />6) The value returned by $() are ......... ,they are array like, they have a length property and have numeric properties from o to length -1.<br /><br />A. jQuery result<br /><br />B. jQuery objects<br /><br />C. jQuery array<br /><br />D. jQuery length<br /><br /><br />7) In order to loop over all elements in a jQuery object, you can call the .......... method instead of writing a for loop.<br /><br />A. array.map()<br /><br />B. index()<br /><br />C. each()<br /><br />D. map()<br /><br /><br />8) ......... method expects a callback function as its sole argument, and it invokes that callback function once for each element in the jQuery object in document order.<br /><br />A. array.map()<br /><br />B. index()<br /><br />C. each()<br /><br />D. map()<br /><br /><br />9) ........... accepts a callback function as its argument and invokes that function once for each element of the jQuery object.<br /><br />A. is()<br /><br />B. index()<br /><br />C. each()<br /><br />D. map()<br /><br /><br />10) ........ takes a selector as its argument and returns true if at least one of the selected elements also matches the specified selector.<br /><br />A. is()<br /><br />B. index()<br /><br />C. each()<br /><br />D. map() <br /><br /><a name="more"></a><br /><br />11) ........ handles browser incompatibilities and special cases and allows you to use either HTML attribute names of their JavaScript property equivalents.<br /><br />A. attr()<br /><br />B. removeattr()<br /><br />C. handleattr()<br /><br />D. useattr()<br /><br /><br />12) Match the following methods for working with the class attribute defined by jQuery with their definitions.<br /><br />i) addClass()           a) tests for the presence of specified class<br /><br />ii) toggleClass()      b) adds classes to elements that don't already have<br /><br />iii) hasClass()          c) remove classes from selected elements<br /><br />iv) removeClass()   d) adds classes from selected elements<br /><br />A. i-b, ii-c, iii-d, iv-a<br /><br />B. i-c, ii-d, iii-a, iv-b<br /><br />C. i-d, ii-c, iii-b, iv-a<br /><br />D. i-d, ii-b, iii-a, iv-c<br /><br /><br />13) ........ is a method for setting and querying the value attribute of HTML form elements and also for querying and setting the selection state of check boxes, radio buttons and <select> elements.<br /><br />A. set()<br /><br />B. val()<br /><br />C. query()<br /><br />D. attr()<br /><br /><br />14) In jQuery, .......... method measures positions relative to the document and returns them in the form of an object with left and top properties that hold the X and Y coordinates.<br /><br />A. offset()<br /><br />B. position()<br /><br />C. offsetparent()<br /><br />D. setparent()<br /><br /><br />15) The .......... method is like offset(), except that it is a getter only and it returns element positions relative to their offset parent, rather to the document as a whole.<br /><br />A. width()<br /><br />B. position()<br /><br />C. offsetparent()<br /><br />D. setparent()</div><br /><br /><h4 style="text-align: left;">Answers</h4>1) D. All i, ii, iii and iv<br />2) A. jQuery.noConflict()<br />3) D. All of the above<br />4) B. i, ii and iv only<br />5) C. jQuery.each(), jQuery.parseJSON()<br />6) B. jQuery objects<br />7) C. each()<br />8) C. each()<br />9) D. map()<br />10) A. is()<br />11) A. attr()<br />12) D. i-d, ii-b, iii-a, iv-c<br />13) B. val()<br />14) A. offset()<br />15) B. position()<br /><br /><h3 style="text-align: left;">Related Posts:</h3><ul style="text-align: left;"><li><h3> <span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/08/solved-mcq-of-javascript-set-1.html">Solved MCQ of JavaScript set-1</a></span> </h3></li><li><h3> <span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/08/mcq-of-javascript-with-answer-set-2.html">MCQ of JavaScript with Answer set-2</a></span> </h3></li><li><h3> <span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2015/06/solved-mcq-client-side-javascript.html">Solved MCQ on Basic Client Side JavaScript set-3</a></span> </h3></li><li><h3> <span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2015/06/solved-mcq-on-javascript-window-object.html">Solved MCQ on JavaScript Window Object set-4</a></span></h3></li><li><h3><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2015/06/solved-mcq-on-scripting-documents-javascript.html">Solved MCQ on Scripting Documents in JavaScript set-5 </a></span> </h3></li><li><h3> <span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2015/06/mcq-on-scripting-documents-in-client-side-javascript.html">MCQ on Scripting Documents in Client Side JavaScript set-6</a></span> </h3></li><li><h3> <span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2015/06/mcq-on-scripting-documents-in-client-javascript.html">MCQ on Scripting Documents in Client Side JavaScript set-7</a></span> </h3></li><li><h3> <span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2015/06/solved-mcq-handling-events-client-side-javascript.html">Solved MCQ on Handling Events in Client Side JavaScript set-8</a></span> </h3></li></ul><h3 style="text-align: left;"></h3><h3 style="text-align: left;"></h3><h3 style="text-align: left;"></h3><h3 style="text-align: left;"><u> For more Multiple Choice Questions (MCQs): <a href="http://www.siteforinfotech.com/p/mcqs.html">Click Here</a></u></h3></div>

Solved Objective Questions on jQuery Library set-1

1) Which of the following statements about the features of jQuery are True. i) jQuery has an expressive syntax for referring to elements in ...

Read more »

Solved MCQ on Handling Events in Client Side JavaScript set-8

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">1) ........... include legacy event types such as "mousedown", "mousemove", "mouseup", "keydown", "keypress","keyup","touchmove" and "gesturechange" events.<br /><br />A. Device dependent input events<br /><br />B. Device independent input events<br /><br />C. User interface events<br /><br />D. State change events<br /><br /><br />2) ............ are not triggered directly by user activity, but by network or browser activity, and indicate some kind of lifecycle.<br /><br />A. Device dependent input events<br /><br />B. Device independent input events<br /><br />C. User interface events<br /><br />D. State change events<br /><br /><br />3) ............ include the focus event, the change event when the user changes the value and the submit event when the user clicks a submit button.<br /><br />A. Device dependent input events<br /><br />B. Device independent input events<br /><br />C. User interface events<br /><br />D. State change events<br /><br /><br />4) ........... allows the same event handler function to be registered more than once. When an event of the specified type occurs, the registered function will be invoked as many times as it was registered.<br /><br />A. addEvent()<br /><br />B. addMultipltEvent()<br /><br />C. attachEvent()<br /><br />D. reattachEvent()<br /><br /><br />5) Which of the following statements about the arguments of addEventListener() is/are True.<br /><br />i) The first argument to addEventListener() is the event type for which the handler is being registered. <br /><br />ii) The second argument to addEventListener() is the function that should be invoked when the specified type of event occurs.<br /><br />iii) The third argument to addEventListener() is a numerical value.<br /><br />A. i and ii only<br /><br />B. i and iii only<br /><br />C. ii and iii only<br /><br />D. All i, ii and iii<br /><br /><a name="more"></a><br /><br />6) When an event occurs on an object, all of the handlers registered for that type of event are invoked, in the order in which they were ......... <br /><br />A. occurred<br /><br />B. registered<br /><br />C. invoked<br /><br />D. initialized<br /><br /><br />7) Invoking .......... more than once on the same object with the same arguments has no effect, the handler function remains registered only once, and repeated invocation does not alter the order in which handlers are invoked. <br /><br />A. addEvent()<br /><br />B. addMultipltEvent()<br /><br />C. attachEvent()<br /><br />D. addEventListener()<br /><br /><br />8) State which of the following statements are True or False about the rules of invocation order for event handler in JavaScript.<br /><br />i) Handlers registered by setting an object property of HTML attribute, if any are always invoked first. <br /><br />ii) Handlers registered with addEventListner() are invoked in the order in which they were registered.<br /><br />iii) Handlers registered with attachEvent() may be invoked in any order and the code should not depend on sequential invocation.<br /><br />A. i-True, ii-True, iii-False<br /><br />B. i-True, ii-False, iii-False<br /><br />C. i-True, ii-True, iii-True<br /><br />D. i-False, ii-False, iii-True<br /><br /><br />9) .......... is universally supported also it works in all browsers including IE, and works for all handlers, regardless of how they are registered.<br /><br />A. Event bubbling<br /><br />B. Event handling<br /><br />C. Event capturing<br /><br />D. Event registering<br /><br /><br />10) ............, only works with event handlers registered with addEventListner() when the third argument is True.<br /><br />A. Event bubbling<br /><br />B. Event handling<br /><br />C. Event capturing<br /><br />D. Event registering<br /><br /><br /><br />11) In browsers that support addEventListner(), we can also cancel the default action for an event by invoking the ........... method of the event object. <br /><br />A. preventBrowsers()<br /><br />B. preventDefault()<br /><br />C. preventPropagation()<br /><br />D. preventEvent()<br /><br /><br />12) The .............. event is fired when the document has been loaded and parsed and any deferred scripts have been executed.<br /><br />A. DOMContent()<br /><br />B. DOMContentLoad()<br /><br />C. DOMLoaded()<br /><br />D. DOMContentLoaded()<br /><br /><br />13) .......... is a user interface for transferring data between a "drag source" and "drop target" that may be in the same application or in different applications.<br /><br />A. Drag-and-drop<br /><br />B. User-drag-and-drop<br /><br />C. Drag source-and-drop target<br /><br />D. Source-drag-and-drop-target<br /><br /><br />14) Which of the following statements are True about the APIs for Implementing Drag-and-drop.<br /><br />i) They have to tie into the underlying OS so that they can work between unrelated applications.<br /><br />ii) They must provide a way for a drag source to specify the icon or image to be dragged.<br /><br />iii) They must provide event-based notification to both the drag source and drop target of the progress of the Drag-and-drop interaction.<br /><br />A. i and ii only<br /><br />B. i and iii only<br /><br />C. ii and iii only<br /><br />D. All i, ii and iii<br /><br /><br />15) ......... objects have altKey, ctrlKey, metaKey and shiftKey properties, which are set to True if the corresponding modifier key is held down when the event occurs.<br /><br />A. Key down<br /><br />B. Key event<br /><br />C. Key up<br /><br />D. Key press</div><h4 style="text-align: left;"></h4><h4 style="text-align: left;">Answers</h4><br />1) A. Device dependent input events<br />2) D. State change events<br />3) C. User interface events<br />4) C. attachEvent()<br />5) A. i and ii only<br />6) B. registered<br />7) D. addEventListener()<br />8) C. i-True, ii-True, iii-True<br />9) A. Event bubbling<br />10) C. Event capturing<br />11) B. preventDefault()<br />12) D. DOMContentLoaded()<br />13) A. Drag-and-drop<br />14) D. All i, ii and iii<br />15) B. Key event<br /><br /><h3 style="text-align: left;">Related Posts:</h3><ul style="text-align: left;"><li><h3 style="text-align: left;"> <span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/08/solved-mcq-of-javascript-set-1.html">Solved MCQ of JavaScript set-1</a> </span></h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/08/mcq-of-javascript-with-answer-set-2.html">MCQ of JavaScript with Answer set-2</a></span></h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2015/06/solved-mcq-client-side-javascript.html">Solved MCQ on Basic Client Side JavaScript set-3</a></span> </h3></li><li><h3 style="text-align: left;"> <span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2015/06/solved-mcq-on-javascript-window-object.html">Solved MCQ on JavaScript Window Object set-4</a></span> </h3></li><li><h3 style="text-align: left;"></h3><h3> </h3><div id="home-menu"><h3></h3><div class="left-col"><h3> </h3></div><h3></h3><div class="right-col"><h3></h3></div><h3></h3></div><h3></h3><div class="widget HTML" id="HTML3"><h3></h3><div class="widget-content"><h3> </h3></div><h3> <span class="widget-item-control"><span class="item-control blog-admin"> </span></span> </h3></div><h3> <a href="https://www.blogger.com/null" name="5256831802901067979"></a><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2015/06/solved-mcq-on-scripting-documents-javascript.html">Solved MCQ on Scripting Documents in JavaScript set-5 </a></span></h3><h3 style="text-align: left;"> </h3><h3></h3></li><li><h3 style="text-align: left;"></h3><div class="widget HTML" id="HTML3"><span class="widget-item-control"><span class="item-control blog-admin"> </span></span> </div><a href="https://www.blogger.com/null" name="2602969697617430351"></a><h3 class="post-title entry-title" itemprop="name"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2015/06/mcq-on-scripting-documents-in-client-side-javascript.html">MCQ on Scripting Documents in Client Side JavaScript set-6</a></span></h3><h3 style="text-align: left;"> </h3></li><li><h3 style="text-align: left;"></h3><div id="home-menu"><div class="left-col"></div><div class="right-col"></div></div><div class="widget HTML" id="HTML3"><div class="widget-content"></div><span class="widget-item-control"><span class="item-control blog-admin"> </span></span> </div><a href="https://www.blogger.com/null" name="5579794017264334410"></a><h3 class="post-title entry-title" itemprop="name"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2015/06/mcq-on-scripting-documents-in-client-javascript.html">MCQ on Scripting Documents in Client Side JavaScript set-7</a></span></h3><h3 style="text-align: left;"> </h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/08/solved-objective-questions-of-css-set-4.html">Solved Objective Questions of CSS set-4</a></span> </h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2012/12/solved-mcq-of-java-set-1.html">Solved MCQ of Java Set-1</a></span> </h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/07/solved-mcq-of-java-beans-set-1.html">Solved MCQ of Java Beans set-1</a></span> </h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/07/solved-mcq-of-internet-and-html-set-3.html">Solved MCQ of Internet and HTML set-3</a></span></h3></li></ul><h3 style="text-align: left;"></h3><h3 style="text-align: left;"></h3><h3 style="text-align: left;"><u> For more Multiple Choice Questions (MCQs): <a href="http://www.siteforinfotech.com/p/mcqs.html">Click Here</a></u></h3></div>

Solved MCQ on Handling Events in Client Side JavaScript set-8

1) ........... include legacy event types such as "mousedown", "mousemove", "mouseup", "keydown", ...

Read more »

MCQ on Scripting Documents in Client Side JavaScript set-7

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">1) .......... method of the window object takes the X and Y coordinates of a point in document coordinates and sets these as the scroll bar offsets.<br /><br />A. scrollTo()<br /><br />B. scrollLeft()<br /><br />C. scrollTop()<br /><br />D. scrollFor()<br /><br /><br />2) We can compute the position of the element with ..........., converts that position to document coordinates and then use the scrollTo() method.<br /><br />A. getBoundingClient()<br /><br />B. getBounding()<br /><br />C. getBoundingClientRect()<br /><br />D. getBoundingRect()<br /><br /><br />3) The read-only .......... properties of any HTML element return its on screen size, in CSS pixels.<br /><br />A. offsetWidth()<br /><br />B. offsetHeight()<br /><br />C. Both A and B<br /><br />D. None of the above<br /><br /><br />4) ......... are like offesetWidth and offesetHeight except that they do not include the border size, only content area and its padding.<br /><br />A. offesetLeft and offesetTop<br /><br />B. clientWidth and clientHeight<br /><br />C. clientLeft and clientTop<br /><br />D. scrollWidth and scrollHeight<br /><br /><br />5) ............. properties return the horizontal and vertical distance between the outside of an element's padding and the outside of its border.<br /><br />A. offesetLeft and offesetTop<br /><br />B. clientWidth and clientHeight<br /><br />C. clientLeft and clientTop<br /><br />D. scrollWidth and scrollHeight<br /><br /><a name="more"></a><br /><br />6) ........... are the size of an element's content area plus its padding plus any overflowing content. <br /><br />A. offesetLeft and offesetTop<br /><br />B. clientWidth and clientHeight<br /><br />C. clientLeft and clientTop<br /><br />D. scrollWidth and scrollHeight<br /><br /><br />7) Which of the following expressions in JavaScript is/are True, if we have to select a form name "address" has a first element with name "street".<br /><br />A. document.forms.address[0]<br /><br />B. document.forms.address.street<br /><br />C. document.address.street<br /><br />D. All of the above<br /><br /><br />8) Which of the following is/are the valid expressions, if we have to select a <form> with a name="address" attribute.<br /><br />i) window.address<br /><br />ii) document.address<br /><br />iii) document.forms.address<br /><br />iv) document.forms[n]<br /><br />A. i, ii and iii only<br /><br />B. ii, iii and iv only<br /><br />C. i, ii and iv only<br /><br />D. All i, ii, iii and iv<br /><br /><br />9) .......... method returns a selection object that describes the current selection as a sequence of one or more range objects.<br /><br />A. window.objectSelection()<br /><br />B. window.getSelection()<br /><br />C. document.getSelection()<br /><br />D. document.currentSelection()<br /><br /><br />10) State whether the following statements are True or False for the document.write() method in client side JavaScript.<br /><br />i) The document.write() method was one of the very first scriptable APIs implemented by Netscape2 web browser.<br /><br />ii) document.write() concatenates its string arguments and inserts the resulting string into the document at the location of the script element that invoked it.<br /><br />iii) The document.write() method is commonly used in modern code i.e. innerHTML property and other DOM techniques.<br /><br />A. i-True, ii-True, iii-False<br /><br />B. i-True, ii-False, iii-False<br /><br />C. i-True, ii-True, iii-True<br /><br />D. i-False, ii-False, iii-True<br /><br /><br /><br />11) When a document contains scrollable elements with overflowing content, the ............ method doesn't work correctly because it does not take scroll bar position into account. <br /><br />A. getElementPosition()<br /><br />B. getScrollPosition()<br /><br />C. getScrollOffsets()<br /><br />D. getBoundingClientRect()<br /><br /><br />12) .......... method is used in the case of passing the coordinates of the mouse pointer to determine which element the mouse is over.<br /><br />A. getBoundingClientRect()<br /><br />B. getElementFromPoint()<br /><br />C. elementFromPoint()<br /><br />D. getElementCoordinates()<br /><br /><br />13) The .......... method of the window is similar to scroll() and scrollTo(), but its arguments are relative and are added to the current scroll bar offsets.<br /><br />A. scrollTop()<br /><br />B. scrollBy()<br /><br />C. scrollLeft()<br /><br />D. scrollIntoView()<br /><br /><br />14) The ......... method ensures that the element on which it is invoked is visible in the view-port.<br /><br />A. scrollTop()<br /><br />B. scrollBy()<br /><br />C. scrollLeft()<br /><br />D. scrollIntoView()<br /><br /><br />15) The .......... property specifies which element the properties are relative to and if it is null, the properties are document object. <br /><br />A. offsetLeft<br /><br />B. offsetTop<br /><br />C. offsetParent<br /><br />D. offsetRelative</div><br /><br /><h4 style="text-align: left;">Answers:</h4><br />1) A. scrollTo()<br />2) C. getBoundingClientRect()<br />3) C. Both A and B<br />4) B. clientWidth and clientHeight<br />5) C. clientLeft and clientTop<br />6) D. scrollWidth and scrollHeight<br />7) D. All of the above<br />8) D. All i, ii, iii and iv<br />9) B. window.getSelection()<br />10) A. i-True, ii-True, iii-False<br />11) A. getElementPosition()<br />12) C. elementFromPoint()<br />13) B. scrollBy()<br />14) D. scrollIntoView()<br />15) C. offsetParent<br /><br /><br /><h3 style="text-align: left;">Related Posts:</h3><ul style="text-align: left;"><li><h3 style="text-align: left;"> <span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/08/solved-mcq-of-javascript-set-1.html">Solved MCQ of JavaScript set-1</a> </span></h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/08/mcq-of-javascript-with-answer-set-2.html">MCQ of JavaScript with Answer set-2</a></span></h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2015/06/solved-mcq-client-side-javascript.html">Solved MCQ on Basic Client Side JavaScript set-3</a></span> </h3></li><li><h3 style="text-align: left;"> <span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2015/06/solved-mcq-on-javascript-window-object.html">Solved MCQ on JavaScript Window Object set-4</a></span> </h3></li><li><h3 style="text-align: left;"></h3><h3> </h3><div id="home-menu"><h3></h3><div class="left-col"><h3> </h3></div><h3></h3><div class="right-col"><h3></h3></div><h3></h3></div><h3></h3><div class="widget HTML" id="HTML3"><h3></h3><div class="widget-content"><h3> </h3></div><h3> <span class="widget-item-control"><span class="item-control blog-admin"> </span></span> </h3></div><h3> <a href="https://www.blogger.com/null" name="5256831802901067979"></a><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2015/06/solved-mcq-on-scripting-documents-javascript.html">Solved MCQ on Scripting Documents in JavaScript set-5 </a></span></h3><h3 style="text-align: left;"> </h3><h3></h3></li><li><h3 style="text-align: left;"></h3><div id="home-menu"><div class="left-col"></div><div class="right-col"></div></div><div class="widget HTML" id="HTML3"><div class="widget-content"></div><span class="widget-item-control"><span class="item-control blog-admin"> </span></span> </div><a href="https://www.blogger.com/null" name="2602969697617430351"></a><h3 class="post-title entry-title" itemprop="name"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2015/06/mcq-on-scripting-documents-in-client-side-javascript.html">MCQ on Scripting Documents in Client Side JavaScript set-6</a></span></h3><h3 style="text-align: left;"> </h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/08/objective-questions-of-css-with-answer.html">Objective Questions of CSS with Answer set-3</a></span> </h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/08/solved-objective-questions-of-css-set-4.html">Solved Objective Questions of CSS set-4</a></span> </h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2012/12/solved-mcq-of-java-set-1.html">Solved MCQ of Java Set-1</a></span> </h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/07/solved-mcq-of-java-beans-set-1.html">Solved MCQ of Java Beans set-1</a></span> </h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/07/solved-mcq-of-internet-and-html-set-3.html">Solved MCQ of Internet and HTML set-3</a></span></h3></li></ul><h3 style="text-align: left;"></h3><h3 style="text-align: left;"></h3><h3 style="text-align: left;"><u> For more Multiple Choice Questions (MCQs): <a href="http://www.siteforinfotech.com/p/mcqs.html">Click Here</a></u></h3></div>

MCQ on Scripting Documents in Client Side JavaScript set-7

1) .......... method of the window object takes the X and Y coordinates of a point in document coordinates and sets these as the scroll bar ...

Read more »

MCQ on Scripting Documents in Client Side JavaScript set-6

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">1) ........ method allows you to insert a string of arbitrary HTML markup "adjacent" to the specified element.<br /><br />A. insertAdjacentHTML()<br /><br />B. insertBeforeHTML()<br /><br />C. insertAfterHTML()<br /><br />D. insertAfterendHTML()<br /><br /><br />2) ..........property is used to insert plain text into a document without having to escape the angle brackets and ampersands used in HTML markup.<br /><br />A. insertText<br /><br />B. plainContent<br /><br />C. textContent<br /><br />D. plainText<br /><br /><br />3) ........... is similar to textContent property introduced by Microsoft for Internet Explorer browser.<br /><br />A. insertText<br /><br />B. plainContent<br /><br />C. textContent<br /><br />D. innerText<br /><br /><br />4) ........ does not return the content of <script> elements, also omits extraneous white-space and attempts to preserve table formatting. <br /><br />A. insertText<br /><br />B. innerText<br /><br />C. textContent<br /><br />D. plainContent<br /><br /><br />5) State whether the following statements about inserting element content as plain text are True or False. <br /><br />i) The textContent and innerText properties are similar enough that we can usually use them interchangeably.<br /><br />ii) innerText is treated as a read-only property for certain table elements such as <table>, <tbody> and <tr><br /><br />iii) The textContent property is a straightforward concatenation of all Text node descendants of the specified element.<br /><br />A. i-True, ii-True, iii-False<br /><br />B. i-True, ii-False, iii-False<br /><br />C. i-True, ii-True, iii-True<br /><br />D. i-False, ii-False, iii-True<br /><br /><a name="more"></a><br /><br />6) To insert element content as Text Nodes, .......... property is read/write and you can set it to change the content displayed by a Text or CDATASection node.<br /><br />A. nodeContent<br /><br />B. nodeType<br /><br />C. nodeText<br /><br />D. nodeValue<br /><br /><br />7) We can create new element nodes with the ........ method of the document object which can pass the tag name of the element as the method argument.<br /><br />A. createElement<br /><br />B. createNode<br /><br />C. createDocumentNode<br /><br />D. createElementNode<br /><br /><br />8) Every node has ........... method that returns a new copy of the node and passes true to recursively copy all descendants as well, or false to only make a shallow copy.<br /><br />A. importNode()<br /><br />B. cloneNode()<br /><br />C. copyNode()<br /><br />D. passNode()<br /><br /><br />9) ........... returns a copy suitable for insertion into the document and passes true as the second argument to recursively import all descendants.<br /><br />A. importNode()<br /><br />B. cloneNode()<br /><br />C. copyNode()<br /><br />D. passNode()<br /><br /><br />10) ........ is invoked on the element node that you want to insert into, and it inserts the specified node so that it becomes the last child of that node.<br /><br />A. insertBefore()<br /><br />B. appendChild()<br /><br />C. insertAfter()<br /><br />D. appendNode()<br /><br /><br /><br />11) .......... takes two arguments, the first argument is the node to be inserted and the second argument is the node before which that node is to be inserted.<br /><br />A. insertBefore()<br /><br />B. appendChild()<br /><br />C. insertAfter()<br /><br />D. appendNode()<br /><br /><br />12) State whether the following statements are True or False for inserting nodes.<br /><br />i) If you pass null in the second argument, the insertBefore() behaves like appendChild() and inserts at the end.<br /><br />ii) If you call appendChild() or insertBefore() to insert a node that is already in the document, that node will automatically be removed from its current position and reinserted at its new position.<br /><br />A. i-True, ii-False<br /><br />B. i-False, ii-True<br /><br />C. i-False, ii-False<br /><br />D. i-True, ii-True<br /><br /><br />13) A .......... is a special kind of node that serves as a temporary container for other nodes.<br /><br />A. Document Node<br /><br />B. Document Partial<br /><br />C. Document Fragment<br /><br />D. Document Temporary<br /><br /><br />14) .......... can have any number of children, which we can manipulate with appendChild(), insertBefore() and so on.<br /><br />A. Document Node<br /><br />B. Document Partial<br /><br />C. Document Fragment<br /><br />D. Document Temporary<br /><br /><br />15) The ........... method allows us to determine the current position of an element in a view-port.<br /><br />A. getBoundingClientRect()<br /><br />B. elementFromPoint()<br /><br />C. getElementByTagName()<br /><br />D. pageXoffset()</div><br /><br /><h4 style="text-align: left;">Answers:</h4>1) A. insertAdjacentHTML()<br />2) C. textContent<br />3) D. innerText<br />4) B. innerText<br />5) C. i-True, ii-True, iii-True<br />6) D. nodeValue<br />7) A. createElement<br />8) B. cloneNode()<br />9) A. importNode()<br />10) B. appendChild()<br />11) A. insertBefore()<br />12) D. i-True, ii-True<br />13) C. Document Fragment<br />14) C. Document Fragment<br />15) A. getBoundingClientRect()<br /><br /><br /><h3 style="text-align: left;">Related Posts:</h3><ul style="text-align: left;"><li><h3 style="text-align: left;"> <span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/08/solved-mcq-of-javascript-set-1.html">Solved MCQ of JavaScript set-1</a> </span></h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/08/mcq-of-javascript-with-answer-set-2.html">MCQ of JavaScript with Answer set-2</a></span></h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2015/06/solved-mcq-client-side-javascript.html">Solved MCQ on Basic Client Side JavaScript set-3</a></span> </h3></li><li><h3 style="text-align: left;"> <span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2015/06/solved-mcq-on-javascript-window-object.html">Solved MCQ on JavaScript Window Object set-4</a></span> </h3></li><li><h3 style="text-align: left;"></h3><h3> </h3><div id="home-menu"><h3></h3><div class="left-col"><h3> </h3></div><h3></h3><div class="right-col"><h3></h3></div><h3></h3></div><h3></h3><div class="widget HTML" id="HTML3"><h3></h3><div class="widget-content"><h3> </h3></div><h3> <span class="widget-item-control"><span class="item-control blog-admin"> </span></span> </h3></div><h3> <a href="https://www.blogger.com/null" name="5256831802901067979"></a><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2015/06/solved-mcq-on-scripting-documents-javascript.html">Solved MCQ on Scripting Documents in JavaScript set-5 </a></span></h3><h3 style="text-align: left;"> </h3><h3></h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/08/mcq-of-css-with-answer-set-2.html">MCQ of CSS With Answer set-2</a></span> </h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/08/objective-questions-of-css-with-answer.html">Objective Questions of CSS with Answer set-3</a></span> </h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/08/solved-objective-questions-of-css-set-4.html">Solved Objective Questions of CSS set-4</a></span> </h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2012/12/solved-mcq-of-java-set-1.html">Solved MCQ of Java Set-1</a></span> </h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/07/solved-mcq-of-java-beans-set-1.html">Solved MCQ of Java Beans set-1</a></span> </h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/07/solved-mcq-of-internet-and-html-set-3.html">Solved MCQ of Internet and HTML set-3</a></span></h3></li></ul><h3 style="text-align: left;"></h3><h3 style="text-align: left;"></h3><h3 style="text-align: left;"><u> For more Multiple Choice Questions (MCQs): <a href="http://www.siteforinfotech.com/p/mcqs.html">Click Here</a></u></h3></div>

MCQ on Scripting Documents in Client Side JavaScript set-6

1) ........ method allows you to insert a string of arbitrary HTML markup "adjacent" to the specified element. A. insertAdjacentHT...

Read more »

Solved MCQ on Scripting Documents in JavaScript set-5

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">1) The DOM defines a number of ways to select elements, by using which of the following methods we can query a document for an element or elements.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">i) with a specified id attribute</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">ii) with a specified name attribute</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">iii) with the specified tag name</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">iv) with the specified CSS class or classes</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">A. i, ii and iii only</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">B. i, ii and iv only</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">C. i, iii and iv only</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">D. All i, ii, iii and iv</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">2) We can select an element based on unique ID with the ........... method of the document object.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">A. getElementById()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">B. getElementsById()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">C. selectElementById()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">D. selectElementsById()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">3) The ......... attribute is only valid on a handful or HTML elements, including forms, form elements, <iframe> and <img> elements.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">A. id</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">B. name</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">C. tag</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">D. class</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">4) .......... return NodeList objects and properties like document.images and document.forms are HTML Collection objects.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">A. getElementsByName() and getElementsById()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">B. getElementsById() and getElementsByTagName()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">C. getElementsByName() and getElementsByTagName()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">D. getElementsByClassName() and getElementsByTagName()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">5) Like getElementsByTagName(), .......... can be invoked on both HTML documents and HTML elements, and it returns a live NodeList containing all matching descendants of the document or element. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">A. getElementsById()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">B. getElementsByName()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">C. getElementsByClassName()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">D. All of the above</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /><a name="more"></a></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">6) .......... takes a single string argument containing a CSS selector and returns a Nodelist that represents all elements in the document that match the selector.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">A. getElementsById()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">B. getElementsByName()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">C. getElementsByClassName()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">D. querySelectorAll()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">7) ........... is the ultimate element selection method and very powerful technique by which client side JavaScript programs can select the document elements that they are going to manipulate.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">A. querySelectAll()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">B. querySelector()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">C. querySelectorAll()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">D. querySelect()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">8) The CSS selector ............ selects any <span> descendant of the element with id="log".</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">A. #log span</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">B. #log>span</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">C. #log=span</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">D. #log:span</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">9) The CSS selector ............ selects any <span> child of the element with id="log".</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">A. #log span</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">B. #log>span</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">C. #log=span</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">D. #log:span</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">10) The CSS selector .......... selects all <div> elements plus the element with id="log".</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">A. div #log</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">B. div.#log</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">C. div>#log</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">D. div, #log</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">11) ........... defines properties for the universal HTTP attributes such as id, title lang, and dir and event handler properties like onClick.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">A. Element properties</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">B. HTMLElement</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">C. HTMLProperty</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">D. HTMLAttribute</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">12) ......... are not case sensitive, but JavaScript property names are.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">A. Element properties</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">B. HTML element</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">C. HTML property</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">D. HTML attributes</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">13) .............. methods can be used to query and set non standard HTML attributes and to query and set attributes on elements of an XML document.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">A. getAttribute() and setAttribute()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">B. getElement() and setElement()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">C. getDocument() and setDocument()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">D. getHTML() and setHTML()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">14) HTML elements defines two methods ............ to check for the presence of named attribute and remove an attribute entirely.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">A. getAttribute() and setAttribute()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">B. hasAttribute() and removeAttribute()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">C. hasDocument() and removeDocument()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">D. hasElement() and removeElement()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">15) For XML documents the include attributes from other namespaces, can use the namespace variants of which of the following method(s).</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">A. getAttributeNS()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">B. setAttributeNS()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">C. hasAttributeNS()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">D. All of the above</div><br /><br /><h4 style="text-align: left;">Answers:</h4>1) D. All i, ii, iii and iv<br />2) A. getElementById()<br />3) B. name<br />4) C. getElementsByName() and getElementsByTagName()<br />5) C. getElementsByClassName()<br />6) D. querySelectorAll()<br />7) C. querySelectorAll()<br />8) A. #log span<br />9) B. #log>span<br />10) D. div, #log<br />11) B. HTMLElement<br />12) D. HTML attributes<br />13) A. getAttribute() and setAttribute()<br />14) B. hasAttribute() and removeAttribute()<br />15) D. All of the above<br /><br /><br /><h3 style="text-align: left;">Related Posts:</h3><ul style="text-align: left;"><li><h3 style="text-align: left;"> <span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/08/solved-mcq-of-javascript-set-1.html">Solved MCQ of JavaScript set-1</a> </span></h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/08/mcq-of-javascript-with-answer-set-2.html">MCQ of JavaScript with Answer set-2</a></span></h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2015/06/solved-mcq-client-side-javascript.html">Solved MCQ on Basic Client Side JavaScript set-3</a></span> </h3></li><li><h3 style="text-align: left;"> <span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2015/06/solved-mcq-on-javascript-window-object.html">Solved MCQ on JavaScript Window Object set-4</a></span> </h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/08/solved-mcq-of-css-set-1.html">Solved MCQ of CSS set-1</a></span> </h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/08/mcq-of-css-with-answer-set-2.html">MCQ of CSS With Answer set-2</a></span> </h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/08/objective-questions-of-css-with-answer.html">Objective Questions of CSS with Answer set-3</a></span> </h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/08/solved-objective-questions-of-css-set-4.html">Solved Objective Questions of CSS set-4</a></span> </h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2012/12/solved-mcq-of-java-set-1.html">Solved MCQ of Java Set-1</a></span> </h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/07/solved-mcq-of-java-beans-set-1.html">Solved MCQ of Java Beans set-1</a></span> </h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/07/solved-mcq-of-internet-and-html-set-3.html">Solved MCQ of Internet and HTML set-3</a></span></h3></li></ul><h3 style="text-align: left;"></h3><h3 style="text-align: left;"></h3><h3 style="text-align: left;"><u> For more Multiple Choice Questions (MCQs): <a href="http://www.siteforinfotech.com/p/mcqs.html">Click Here</a></u></h3><br /></div>

Solved MCQ on Scripting Documents in JavaScript set-5

1) The DOM defines a number of ways to select elements, by using which of the following methods we can query a document for an element or el...

Read more »

Solved MCQ on JavaScript Window Object set-4

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">1. State whether the following statement are True or False for timers.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">i) Like setTimeout(), setInterval() returns a value that can be passed to clearInterval() to cancel any future invocations of the scheduled function.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">ii) If you call setTimeout() with a time of 0ms, the function you specify is not invoked right way.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">A. i-True, ii-False</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">B. i-False,ii-True</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">C. i-True, ii-True</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">D. i-False, ii-False</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">2. The href property of the .......... object is a string that contains the complete text of the URL.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">A. location </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">B. pathname</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">C. port</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">D. search</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">3. The .......... method of the Location object makes the window load and display the document at the URL you specify.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">A. search()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">B. load()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">C. replace()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">D. assign()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">4) The ......... method removes the current document from the browsing history before loading a new document. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">A. search()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">B. remove()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">C. replace()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">D. assign()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">5) Which of the following statements are True or False for Location object.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">i) When a script unconditionally loads a new document, the replace() method is often a better choice than assign().</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">ii) In addition to the assign() and replace() methods, the Location object also defines reload(), which makes the browser reload the document. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">iii) A only way to make the browser navigate to a new page is to simply assign the new full URL directly to the location property.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">A. i-True, ii-True, iii-False</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">B. i-True, ii-False, iii-False</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">C. i-False, ii-True, iii-True</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">D. i-False, ii-False, iii-True</div><div style="text-align: justify;"><br /><a name="more"></a></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">6) The .......... properties of the location object are writable, and setting them changes the location URL and also causes the browser to load a new document.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">A. URL composition</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">B. URL decomposition</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">C. URL parsing</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">D. URL component</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">7) The properties like protocol, host, hostname, port, pathname, search and hash of Location object specify the various individual parts of the URL, they are known as ............ properties. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">A. URL composition</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">B. URL decomposition</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">C. URL parsing</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">D. URL component</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">8) Which of the following statements are True for history property of the window object.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">i) The length property of the history object specifies the number of elements in the browsing history list. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">ii) The history object has back() and forward() methods that behave like the browsers back and forward buttons do.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">A. i only</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">B. ii only</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">C. Both i and ii</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">D. None of the above</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">9) ......... method of the history object, takes an integer argument and can skip any number of pages forward for positive arguments or backward for negative arguments in the history list.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">A. back()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">B. backward()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">C. forward()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">D. go()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">10) ........ method brings webpage back like clicking the back button twice.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">A. history.go(-2)</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">B. history.back.back()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">C. history.back(2)</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">D. history.go(2)</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">11) Match the following properties of Navigator object to their description.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">i) appName            a) that identifies the operating system</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">ii) appVersion        b) all the information along with appVersion</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">iii) UserAgent        c) browser vender and version information</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">iv) platform           d) full name of the web browser</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">A. i-b, ii-c, iii-d, iv-a</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">B. i-c, ii-d, iii-a, iv-b</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">C. i-d, ii-c, iii-b, iv-a</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">D. i-a, ii-d, iii-c, iv-b</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">12) The .......... property specifies whether the browser is currently connected to the network. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">A. navigator.online</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">B. geolocation</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">C. javaEnabled()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">D. cookiesEnabled()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">13) A ........... object that defines an API for determining the user's geographical location.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">A. navigator.online</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">B. geolocation</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">C. javaEnabled()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">D. cookiesEnabled()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">14) .......... displays a model dialog box containing HTML formatted content and allows arguments to be passed to, and a value returned from, the dialog.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">A.alert()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">B. conform()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">C. prompt()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">D. showModelDialog()</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">15) State whether the following statements are True or False for methods for displaying simple dialog box on window object.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">i) alert() displays a message to the user and waits for the user to dismiss the dialog.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">ii) conform() displays a message, waits for the user to click an OK or Cancel button and returns positive or negative value.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">iii) prompt() displays a message, waits for the user to enter a string, and returns that string.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">A. i-True, ii-False, iii-True</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">B. i-True, ii-True, iii-False</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">C. i-False, ii-True, iii-True</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">D. i-False, ii-False, iii-False</div><br /><br /><br /><h4 style="text-align: left;">Answers:</h4>1) C. i-True, ii-True<br />2) A. location <br />3) D. assign()<br />4) C. replace()<br />5) A. i-True, ii-True, iii-False<br />6) B. URL decomposition<br />7) B. URL decomposition<br />8) C. Both i and ii<br />9) D. go()<br />10) A. history.go(-2)<br />11) C. i-d, ii-c, iii-b, iv-a<br />12) A. navigator.online<br />13) B. geolocation<br />14) D. showModelDialog()<br />15) A. i-True, ii-False, iii-True<br /><br /><br /><h3 style="text-align: left;">Related Posts:</h3><ul style="text-align: left;"><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/08/solved-mcq-of-javascript-set-1.html">Solved MCQ of JavaScript set-1</a></span> </h3></li><li><h3> <span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/08/mcq-of-javascript-with-answer-set-2.html">MCQ of JavaScript with Answer set-2</a></span></h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/08/solved-mcq-of-css-set-1.html">Solved MCQ of CSS set-1</a></span></h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/08/mcq-of-css-with-answer-set-2.html">MCQ of CSS With Answer set-2</a></span></h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/08/objective-questions-of-css-with-answer.html">Objective Questions of CSS with Answer set-3</a></span></h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/08/solved-objective-questions-of-css-set-4.html">Solved Objective Questions of CSS set-4</a> </span></h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2012/12/solved-mcq-of-java-set-1.html">Solved MCQ of Java Set-1</a></span></h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/07/solved-mcq-of-java-beans-set-1.html">Solved MCQ of Java Beans set-1</a></span></h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/07/solved-mcq-of-internet-and-html-set-3.html">Solved MCQ of Internet and HTML set-3</a></span></h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/03/solved-mcq-of-database-management-system-dbms.html">Solved MCQ of Database Management System Set - 8</a></span></h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2012/11/solved-mcq-of-system-analysis-and_28.html">Solved MCQ of System Analysis and Design Set-3</a></span></h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2012/12/solved-mcq-of-data-structure-set-2.html">Solved MCQ of Data Structure Set - 2</a></span></h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/01/mcq-of-computer-networking-with-answer_17.html">MCQ of Computer Networking with answer set-4</a></span></h3></li></ul><h3 style="text-align: left;"></h3><h3 style="text-align: left;"><u> For more Multiple Choice Questions (MCQs): <a href="http://www.siteforinfotech.com/p/mcqs.html">Click Here</a></u></h3></div>

Solved MCQ on JavaScript Window Object set-4

1. State whether the following statement are True or False for timers. i) Like setTimeout(), setInterval() returns a value that can be passe...

Read more »

Solved MCQ on Basic Client Side JavaScript set-3

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><div style="text-align: justify;">1. JavaScript can help to increase the user experience with which of the following method for a web page.<br /><br />A. By creating animation and other effects to guide a user and help with page navigation.<br /><br />B. By sorting the columns of a table to make it easier for searching on table.<br /><br />C. By hiding certain content and revealing details progressively as the user "drills down" into that content.<br /><br />D. All of the above.<br /><br /><br /><br />2. Which of the following are the ways to embed Client side JavaScript code within HTML documents.<br /><br />i) Inline, between a pair of <script> and </script> tags.<br /><br />ii) From an external file specified by the src attribute of a <script> tag <br /><br />iii) In an HTML event handler attribute, such as on-click or mouse over.<br /><br />iv) In a URL that uses the special JavaScript protocol.<br /><br />A. i, ii and iii only<br /><br />B. ii, iii and iv only<br /><br />C. i, ii and iv only<br /><br />D. All i, ii, iii and iv<br /><br /><br /><br />3. State Whether the following Statement about src attribute on JavaScript.<br /><br />i) It simplifies the HTML files by allowing you to remove large blocks of JavaScript code from them.<br /><br />ii) If a file of JavaScript code is shared by more than one page, it only needs to be downloaded once, by the first page that uses it. <br /><br />iii) Linking to JavaScript code on Google servers can decrease the start-up time for the web pages, since the code already existed on all of the user's browser.<br /><br />A. i-True, ii-False, iii-True<br /><br />B. i-True, ii-True, iii-False<br /><br />C. i-False, ii-True, iii-False<br /><br />D. i-False, ii-False, iii-True<br /><br /><br /><br />4) JavaScript code can register a/an ............. by assigning a function to a property of an element object that represents an HTML document in the document. <br /><br />A. event handler<br /><br />B. function handler<br /><br />C. document handler<br /><br />D. HTML handler<br /><br /><br /><br />5) .......... specifies that the body of the URL is an arbitrary string of JavaScript code to be run by the JavaScript interpreter.<br /><br />A. Javascript:web<br /><br />B. JavaScript:code<br /><br />C. JavaScript:protocol<br /><br />D. JavaScript:interpreter<br /><br /><a name="more"></a><br /><br /><br />6) The ...... attribute causes the browser to defer execution of the script until after the document has been loaded and parsed and is ready to be manipulated.<br /><br />A. sync<br /><br />B. async<br /><br />C. defer<br /><br />D. All<br /><br /><br /><br />7) The .......... attribute causes the browser to run the script as soon as possible but not to block document parsing while the script is being downloaded.<br /><br />A. sync<br /><br />B. async<br /><br />C. defer<br /><br />D. All<br /><br /><br /><br />8) When the parser encounters a <script> element that has the ...... attribute set, it begins downloading the script text and continues parsing the document.<br /><br />A. async<br /><br />B. sync<br /><br />C. parse<br /><br />D. load<br /><br /><br /><br />9) When the document is completely parsed, the document.readystate property changes to ......<br /><br />A. ready<br /><br />B. parsed<br /><br />C. interactive<br /><br />D. activated<br /><br /><br /><br />10) Which of the following statements for restricted features of JavaScript is/are True.<br /><br />A) A JavaScript program can open new browser windows, but must of the browsers restrict this feature.<br /><br />B. A JavaScript program can close browser windows that it opened itself, but it is not allowed to close other windows without user conformation.<br /><br />C. A script can read the content of documents loaded from different servers than the document that contains the script.<br /><br />D. All of the above<br /><br /><br /><br /><br />11) ........... libraries are "frameworks" in the sense that they build a new higher-level API for client side programming on top of the standard and proprietary APIs offered by web browsers.<br /><br />A. client-side framework<br /><br />B. server-side framework<br /><br />C. higher-level framework<br /><br />D. web framework<br /><br /><br /><br />12) The .......... library focuses on DOM and Ajax utilities, like jQuery does, and adds quite a few core-language utilities as well.<br /><br />A. Dojo<br /><br />B. Prototype<br /><br />C. YUI<br /><br />D. Closure<br /><br /><br /><br />13) The ...... library is the client side library that Google uses for Gmail, Google Docs and other web applications.<br /><br />A. Dojo<br /><br />B. Prototype<br /><br />C. GWT<br /><br />D. Closure<br /><br /><br /><br />14) ........ allow you to register a function to be invoked once or repeatedly after a specified amount of time has elapsed. <br /><br />A. setTimeout()<br /><br />B. setInterval()<br /><br />C. Both A and B<br /><br />D. None of the above<br /><br /><br /><br />15) State True or False for the following Statements.<br /><br />i) The setTimeout() method of the window object schedules a function to run after a specified number of milliseconds elapses. <br /><br />ii) setTimeout() returns a value that can be passed to clearTimeout() to cancel the execution of the scheduled function.<br /><br />iii) setTimeout() is like setInterval() except taht the specified function is invoked repeatedly at intervals of the specified number of milliseconds.<br /><br />A. i-True, ii-False, iii-True<br /><br />B. i-True, ii-True, iii-False<br /><br />C. i-False, ii-True, iii-False<br /><br />D. i-False, ii-False, iii-True</div><br /><br /><br /><br /><h4>Answers:</h4><br />1) D. All of the above.<br />2) D. All i, ii, iii and iv<br />3) B. i-True, ii-True, iii-False<br />4) A. event handler<br />5) C. JavaScript:protocol<br />6) C. defer<br />7) B. async<br />8) A. async<br />9) C. interactive<br />10) D. All of the above<br />11) A. client-side framework<br />12) B. Prototype<br />13) D. Closure<br />14) C. Both A and B<br />15) B. i-True, ii-True, iii-False<br /><br /><br /><h3 style="text-align: left;">Related Posts:</h3><ul style="text-align: left;"><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/08/solved-mcq-of-javascript-set-1.html">Solved MCQ of JavaScript set-1</a></span> </h3></li><li><h3> <span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/08/mcq-of-javascript-with-answer-set-2.html">MCQ of JavaScript with Answer set-2</a></span></h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/08/solved-mcq-of-css-set-1.html">Solved MCQ of CSS set-1</a></span></h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/08/mcq-of-css-with-answer-set-2.html">MCQ of CSS With Answer set-2</a></span></h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/08/objective-questions-of-css-with-answer.html">Objective Questions of CSS with Answer set-3</a></span></h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/08/solved-objective-questions-of-css-set-4.html">Solved Objective Questions of CSS set-4</a> </span></h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2012/12/solved-mcq-of-java-set-1.html">Solved MCQ of Java Set-1</a></span></h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/07/solved-mcq-of-java-beans-set-1.html">Solved MCQ of Java Beans set-1</a></span></h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/07/solved-mcq-of-internet-and-html-set-3.html">Solved MCQ of Internet and HTML set-3</a></span></h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/03/solved-mcq-of-database-management-system-dbms.html">Solved MCQ of Database Management System Set - 8</a></span></h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2012/11/solved-mcq-of-system-analysis-and_28.html">Solved MCQ of System Analysis and Design Set-3</a></span></h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2012/12/solved-mcq-of-data-structure-set-2.html">Solved MCQ of Data Structure Set - 2</a></span></h3></li><li><h3 style="text-align: left;"><span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2013/01/mcq-of-computer-networking-with-answer_17.html">MCQ of Computer Networking with answer set-4</a></span></h3></li></ul><h3 style="text-align: left;"></h3><h3 style="text-align: left;"><u> For more Multiple Choice Questions (MCQs): <a href="http://www.siteforinfotech.com/p/mcqs.html">Click Here</a></u></h3></div>

Solved MCQ on Basic Client Side JavaScript set-3

1. JavaScript can help to increase the user experience with which of the following method for a web page. A. By creating animation and other...

Read more »

How to Create Show/Hide Effect in Image SlideShow Using JQuery

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">The fadeOut() effect presented on the post "How to create Fade Effect in Image Slideshow using JQuery" which I have already posted, makes elements invisible but retains space for them in the document layout. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">The hide() method, by contrast, removes the elements from the layouts as if the CSS display property was set to none. When invoked with no arguments, hide() and show() simply hide or show the selected elements immediately. With a duration argument, however, they animate the hiding or showing process. hide() shrinks an element's width and height to 0 at the same time that it reduces the element's opacity to 0. show() reverses the process.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">toggle() changes the visibility state of the elements, it is invoked on, if they are hidden, it calls show(), and it they are visible, it calls hide(). As with show() and hide(), you must pass a toggle() to get an animated effect. Passing true to toggle() is the same as calling show() with no arguments. Note also that if you pass two or more function arguments to toggle() it registers event handlers.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Here is an example that invokes methods for show/hide effect animation. The first image has show() effect animation, second image has hide() effect animation and the third animation has toggle() effect animation.<br /><br /><pre class="prettyprint">$("#img1").show(2000);<br />$("#img2").hide(3000);<br />$("#img3").toggle(1000);</pre><br />Here are some examples to show show(), hide() and toggle() effects using jQuery.<br /><br /><h4>Example of show() Effect </h4><br /><pre class="prettyprint"><script><br /> $(document).ready(function(){<br /> $(#btn1).click(function () {<br /> $("#img1").show(2000);<br /> });<br /> });<br /> </script><br /><br /><input type=button id="btn1" value="Start Show"/><br /><img id="img1" src="img1.jpg"> </pre><br /><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><script>$(document).ready(function(){ $("#btn1").click(function(){ $("#img1").show(3000); }); }); </script> <input id="btn1" type="button" value="Start Show" /><img id="img1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_RsF_i7AGa1oiYncuhETclBkav3BMmnNy5Imh0LPd5Mc2H9LkX9QL0ds-ychdl24NY5CZn56btgLk0CnnvpYW8cTENWpCF57dcpcjQp5cFJh5ZAaaQ-bgdm6S7mnhPSTwjfs0fnupMgTO/s1600/img1.JPG" style="display: none;" /> <br /><br /><h4>Example of hide() Effect</h4><br /><pre class="prettyprint"><script><br /> $(document).ready(function(){<br /> $(#btn2).click(function () {<br /> $("#img2").hide(3000);<br /> });<br /> });<br /> </script><br /><br /><input type=button id="btn2" value="Start Hide"/><br /><img id="img2" src="img2.jpg"> </pre><br /><script>$(document).ready(function(){ $("#btn2").click(function(){ $("#img2").hide(3000); }); }); </script><input id="btn2" type="button" value="Start Hide" /><img id="img2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqXeNd9nDtlLgx4OYATEY7nAmm9TwUxk_bCzjb0wvIpS79hxff7pVLXdBatF6uKrvA98dKXZIPBiKbaLJpp4zVSPWdoeFA7q3BtI2-iagKv_d6vREbVLYTYQNNNDzy-51TMJw2AFSlT6GM/s1600/img2.JPG" /> <br /><br /><h4>Example of toggle() Effect </h4><br /><a name="more"></a><pre class="prettyprint"><script><br /> $(document).ready(function(){<br /> $(#btn3).click(function () {<br /> $("#img3").toggle(1000);<br /> });<br /> });<br /> </script><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><input type=button id="btn3" value="Start Toggle"/><br /><img id="img3" src="img3.jpg"></pre><br /><script>$(document).ready(function(){ $("#btn3").click(function(){ $("#img3").toggle(3000); }); }); </script> <input id="btn3" type="button" value="Start Toggle" /><img id="img3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPlcg7gpv22uTS6gYK162X2Sb1ojivDrMBCmjdc3fGEnOB7RMcbrBr47zJf5vwU_EG2234eGwadjmHJ62ipS4VtYieVt7DkB9bbzwaHFaaDVxbIAQ1Zy6Lf85KAgVwldDl3pP14ufCXNu-/s1600/img3.JPG" /> </div><br /><h3 style="text-align: left;">Full jQuery code for Show/Hide effect image animation</h3><br /><pre class="prettyprint"><script <br /><br />src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><br /></script><br /><br /><style><br />.show_hide<br />{<br /> box-shadow:1px 1px 5px 2px #6DC83C;<br /> position:relative;<br /> width:448px;<br /> height: 336px;<br /> border-radius:19px;<br />}<br /><br />.show_hide img<br />{<br /> border-radius:19px;<br /> position:absolute;<br /> left:0;<br /> top:0;<br />}<br /><br /></style><br /><br /><script><br />$(function(){<br /> $('.show_hide img:gt(0)').hide();<br /> setInterval(function(){$('.show_hide :first-child').hide(3000).next('img').show(3000).end<br /><br />().appendTo('.show_hide');}, 6000);<br />});<br /></script><br /><br /><div class="show_hide"><br /><img src="img1.JPG" /><br /> <img src="img2.JPG" /><br /> <img src="img3.JPG" /><br /></div><br /></pre><br /><br /><h3 style="text-align: left;">Preview of Show/Hide effect image animation</h3><br /></div><style> .show_hide { box-shadow:1px 1px 5px 2px #6DC83C; position:relative; width:448px; height: 338px; max-width:100%; border-radius:19px; } .show_hide img { border-radius:19px; position:absolute; left:0; top:0; } </style> <script> $(function(){ $('.show_hide img:gt(0)').hide(); setInterval(function(){$('.show_hide :first-child').hide(3000).next('img').show(3000).end().appendTo('.show_hide');}, 6000); }); </script> <br /><div class="show_hide"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_RsF_i7AGa1oiYncuhETclBkav3BMmnNy5Imh0LPd5Mc2H9LkX9QL0ds-ychdl24NY5CZn56btgLk0CnnvpYW8cTENWpCF57dcpcjQp5cFJh5ZAaaQ-bgdm6S7mnhPSTwjfs0fnupMgTO/s1600/img1.JPG" /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqXeNd9nDtlLgx4OYATEY7nAmm9TwUxk_bCzjb0wvIpS79hxff7pVLXdBatF6uKrvA98dKXZIPBiKbaLJpp4zVSPWdoeFA7q3BtI2-iagKv_d6vREbVLYTYQNNNDzy-51TMJw2AFSlT6GM/s1600/img2.JPG" /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPlcg7gpv22uTS6gYK162X2Sb1ojivDrMBCmjdc3fGEnOB7RMcbrBr47zJf5vwU_EG2234eGwadjmHJ62ipS4VtYieVt7DkB9bbzwaHFaaDVxbIAQ1Zy6Lf85KAgVwldDl3pP14ufCXNu-/s1600/img3.JPG" /></div><br /><br /><br /><br /><h3> Related Posts:</h3><ul><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-scroll-top-or-bottom-of-document.html">How to Scroll Top or Bottom of Document Using JavaScript</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-create-table-of-contents-using-javascript.html">How to Create Table of Contents Using JavaScript</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-select-document-elements-using-javascript.html">How to Select Document Elements Using JavaScript?</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-show-pop-up-window-using-javascript.html">How to Show Pop Up Window Using JavaScript</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-go-back-browsing-history-using.html">How to go Back Browsing History Using JavaScript</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-click-button-using-javascript.html">How to Click Button Using JavaScript?</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-function-url-hyperlink.html">How to Write JavaScript Function as URL in Hyperlink?</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-use-round-random-min-and-max-in-javascript.html">How to use Round, Random, Min and Max in JavaScript</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-concatenate-join-and-sort-array-javascript.html">How to Concatenate, Join and Sort Array in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-through-javascript-array.html">How to Loop Through JavaScript Array?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-using-javascript.html">How to Loop using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-show-pop-up-boxes-using-javascript.html">How to Show Pop Up Boxes Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-conditional-statements-in-javascript.html">How to Write Conditional Statements in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-with-html.html">How to Write JavaScript With HTML?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/create-changable-date-and-time-javascript.html">How to create Changeable Date and Time Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2013/11/javascript-image-slideshow-with-links.html">How to Create JavaScript Image Sideshow with Links</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/03/how-to-display-date-format-in-javascript.html">How to Display Date Format in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/02/different-ways-to-redirect-page-in-javascript.html">What are the Different Ways to Redirect Page in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-timer-using-javascript.html">How to create Timer Using JavaScript?</a> </h3></li></ul></div>

How to Create Show/Hide Effect in Image SlideShow Using JQuery

The fadeOut() effect presented on the post "How to create Fade Effect in Image Slideshow using JQuery" which I have already posted...

Read more »

How to Reveal the Contents using JavaScript?

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">If you wanted to show/hide(reveal) the contents in HTML document by using simple methods, it is possible by using a simple javascript code running in it. This feature not only helps to make your webpage more stylist and attractive, also helps to present main contents or headings for the first look. It also helps to minimize the space for webpage which have very long content.<br /><br />In this post, I am going to describe "<a href="http://www.siteforinfotech.com/2015/02/how-to-reveal-contents-using-javascript.html" target="_blank">How to Reveal the Contents using simple JavaScrpt code</a>". Here I am using simple CSS code to set the CSS property of HTML element show or hidden and executed a JavaScript function on window.onload event handler. <br /><br />You can use the following simple CSS code to set the CSS property of HTML element show or hidden.<br /><br /><blockquote class="tr_bq">.reveal * {display:none;}<br /><br /> // This code specifies the display property of HTML element having class name "reveal" to none<br /><br />.reveal *.handle{display:block;} <br /><br />// This code specifies the display property of HTML element having class name "handle" for child of "reveal" class to block.</blockquote><br /><br />You can use the following simple JavaScript function to Reveal the Contents.<br /><br /><blockquote class="tr_bq">window.onload=function(){<br /><br />var elements=document.getElementsByClassName("reveal");<br />for(var i=0; i<elements.length; i++) {<br />var elt=elements[i];<br />//find the "handle" element with the container<br />var title=elt.getElementsByClassName("handle")[0];<br />//when that element is clicked, reveal the rest of the content <br />title.onclick=function(){<br />if(elt.className=="reveal") {elt.className="revealed"; title.innerHTML="Hide Contents";}<br />else if (elt.className=="revealed") {elt.className="reveal"; title.innerHTML="Show Contents";}<br />}<br />}<br />};</blockquote><br />Here document.getElementsByClassName("reveal"); finds all container elements with class "reveal" and uses a simple for loop to assign each elements of "reveal" class to elt and assign first element of "handle" to title variable. At last CSS property of the elements are changed by assigning a function on onclick event. <br /><br /><br /><h3>Full HTML Code with JavaScript to Reveal the Contents</h3><br /><pre class="prettyprint"><html><br /><head><br /><title>How to Reveal the Contents Using JavaScript</title><br /><style><br />.reveal * {display:none;}<br />.reveal *.handle{display:block;} /*Except for the class "handle" child */<br /></style><br /><script><br />window.onload=function(){<br />//find all container elements with class "reveal".<br /><br />var elements=document.getElementsByClassName("reveal");<br />for(var i=0; i<elements.length; i++) {<br />var elt=elements[i];<br />//find the "handle" element with the container<br />var title=elt.getElementsByClassName("handle")[0];<br />//when that element is clicked, reveal the rest of the content <br />title.onclick=function(){<br />if(elt.className=="reveal") {elt.className="revealed"; title.innerHTML="Hide Contents";}<br />else if (elt.className=="revealed") {elt.className="reveal"; title.innerHTML="Show Contents";}<br />}<br />}<br />};<br /></script><br /></head><br /><body><br /><div class="reveal"><br /><h3 class="handle">Show Contents</h3><br /><h4 class="handle">Click Here to Reveal Hidden text</h4><br /><p> This paragraph is hidden. It appears when you click on the title.</p><br /><h4 class="handle">Click Here to Reveal Hidden text</h4><br /><p> This paragraph is hidden. It appears when you click on the title.</p><br /><p> This paragraph is hidden. It appears when you click on the title.</p><br /><h4 class="handle">Click Here to Reveal Hidden text</h4><br /><p> This paragraph is hidden. It appears when you click on the title.</p><br /><p> This paragraph is hidden. It appears when you click on the title.</p><br /><p> This paragraph is hidden. It appears when you click on the title.</p><br /><p> This paragraph is hidden. It appears when you click on the title.</p><br /></div><br /></body><br /></html><br /></pre></div><div style="text-align: justify;"><br /><a name="more"></a><br /></div><div style="text-align: justify;"><h3>Preview of Above HTML Code to Reveal the Contents</h3><style>.reveal * {display:none;} .reveal *.handle{display:block;} /*Except for the class "handle" child */ </style><script>window.onload=function(){ //find all container elements with class "reveal". var elements=document.getElementsByClassName("reveal"); for(var i=0; i<elements.length; i++) { var elt=elements[i]; //find the "handle" element with the container var title=elt.getElementsByClassName("handle")[0]; //when that element is clicked, reveal the rest of the content title.onclick=function(){ if(elt.className=="reveal") {elt.className="revealed"; title.innerHTML="Hide Contents";} else if (elt.className=="revealed") {elt.className="reveal"; title.innerHTML="Show Contents";} } } }; </script> <br /><div class="reveal"><h3 class="handle">Show Contents</h3><h4 class="handle">Click Here to Reveal Hidden text</h4>This paragraph is hidden. It appears when you click on the title.<br /><h4 class="handle">Click Here to Reveal Hidden text</h4>This paragraph is hidden. It appears when you click on the title.<br />This paragraph is hidden. It appears when you click on the title.<br /><h4 class="handle">Click Here to Reveal Hidden text</h4>This paragraph is hidden. It appears when you click on the title.<br />This paragraph is hidden. It appears when you click on the title.<br />This paragraph is hidden. It appears when you click on the title.<br />This paragraph is hidden. It appears when you click on the title.</div><br />You can also use Mouse over and Mouse out event to generate instant preview of the contents for the given headings for the above function as follows. <br /><br />title.onmouseover=function()<br />{elt.className="revealed";}<br /><br />title.onmouseout=function()<br />{elt.className="reveal";}<br /><br />Here is a full HTML code for the above JavaScript code. <br /><br /><pre class="prettyprint"><html><br /><head><br /><title>How to Reveal the Contents Using JavaScript</title><br /><style><br />.reveal * {display:none;}<br />.reveal *.handle{display:block;} <br /></style><br /><script><br />window.onload=function(){<br />var elements=document.getElementsByClassName("reveal");<br />for(var i=0; i<elements.length; i++) {<br />var elt=elements[i];<br />//find the "handle" element with the container<br />var title=elt.getElementsByClassName("handle")[0];<br />//when that element is clicked, reveal the rest of the content <br />title.onmouseover=function()<br />{elt.className="revealed";}<br />title.onmouseout=function()<br />{elt.className="reveal";}<br />}<br />};<br /></script><br /></head><br /><body><br /><div class="reveal"><br /><h4 class="handle">Mouse over to Reveal Hidden text</h4><br /><p> This paragraph is hidden. It appears when you mouse over on the title.</p><br /><p> This paragraph is hidden. It appears when you mouse over on the title.</p><br /><p> This paragraph is hidden. It appears when you mouse over on the title.</p><br /><p> This paragraph is hidden. It appears when you mouse over on the title.</p><br /></div><br /></body><br /></html><br /><br /></pre><br /><h3>Preview of Above HTML Code to Reveal the Contents</h3><style>.reveal * {display:none;} .reveal *.handle{display:block;} </style><script>window.onload=function(){ var elements=document.getElementsByClassName("reveal"); for(var i=0; i<elements.length; i++) { var elt=elements[i]; var title=elt.getElementsByClassName("handle")[0]; title.onmouseover=function() {elt.className="revealed";} title.onmouseout=function() {elt.className="reveal";} } }; </script> <br /><div class="reveal"><h4 class="handle">Mouse Over Here to Reveal Hidden text</h4>This paragraph is hidden. It appears when you mouse over on the title.<br />This paragraph is hidden. It appears when you mouse over on the title.<br />This paragraph is hidden. It appears when you mouse over on the title.<br />This paragraph is hidden. It appears when you mouse over on the title.<br /><br /><br /><h3 style="text-align: left;">Related Posts: </h3><ul style="text-align: left;"><li><h3 style="text-align: left;"><a href="http://www.siteforinfotech.com/2013/07/create-simple-image-slideshow-using-javascript.html">How To Create Simple Image Slideshow Using JavaScript ?</a> </h3></li><li><h3 style="text-align: left;"><a href="http://www.siteforinfotech.com/2013/11/image-slideshow-with-navigation-buttons.html">Image Slideshow with Navigation Buttons Using JavaScript</a> </h3></li><li><h3 style="text-align: left;"><a href="http://www.siteforinfotech.com/2013/11/javascript-image-slideshow-with-links.html">How to Create JavaScript Image Slideshow with LInks</a> </h3></li><li><h3 style="text-align: left;"><a href="http://www.siteforinfotech.com/2014/03/how-to-display-date-format-in-javascript.html">How to Display Date Format in JavaScript?</a> </h3></li><li><h3 style="text-align: left;"></h3><h3 class="post-title entry-title"><a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a></h3><h3 style="text-align: left;"> </h3></li><li><h3 style="text-align: left;"><a href="http://www.siteforinfotech.com/2014/02/different-ways-to-redirect-page-in-javascript.html">What are the Different Ways to Redirect Page in JavaScript?</a> </h3></li><li><h3 style="text-align: left;"><a href="http://www.siteforinfotech.com/2014/02/detecting-visitors-browser-using-javascript.html">How to Detect Visitor's Browser Using JavaScript?</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2014/11/make-rounded-corners-border-using-css.html">How to make rounded corners border using CSS</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2014/09/create-custom-css-template-for-printing.html">How to Create Custom CSS Template for Printing</a></h3></li><li><h3 style="text-align: left;"></h3><h3 class="post-title entry-title"><a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a></h3></li></ul></div></div></div>

How to Reveal the Contents using JavaScript?

If you wanted to show/hide(reveal) the contents in HTML document by using simple methods, it is possible by using a simple javascript code r...

Read more »

How to Create Animated Visual Effects Using jQuery

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">You can create animated visual effects by setting the CSS visibility property, i.e. making elements appearing and disappearing. Along with making an element appear and disappear, we might reduce the value of its opacity property over the certain period. This king of animated visual effect creates a more pleasing experience for user and jQuery makes them easy.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">jQuery defines simple methods such as fadeIn() and fadeOut() for basic visual effects. You can also use an animate() method for producing more complex custom animations. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Every animation has a duration that specifies how long the effect should last for. You can specify this as a number of milliseconds or by using a string. The string "fast" means 200ms and the sting "slow" means 600ms. If you specify a duration string that jQuery does not recognize, you will get a default duration of 400ms. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint">$("#animation").fadeIn(); <br />// It fades an element in over 400ms<br />$("#animation").fadeOut("fast"); <br />// It fade outs over 200ms<br />$("#animation").fadeIn(5000);<br />//It fades an element in over 5000ms<br /></pre></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">You can also define new duration names by adding new string-to-number mappings to jQuery.fx.speeds as given below. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint">jQuery.fx.speeds["medium-fast"]=3000;<br />jQuery.fx.speeds["medium-slow"]=5000;<br /></pre></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Here is an example to create animated visual effects using methods fadeIn() and fadeOut() in jQuery </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><br /><script><br />jQuery.fx.speeds["medium-slow"]=3000;<br />jQuery.fx.speeds["very-slow"]=5000;<br />$(document).ready(function(){<br /> $("#btn1").click(function(){<br />$("#animation1").fadeIn(); <br />$("#animation3").fadeIn(5000);<br />$("#animation5").fadeIn("medium-slow");<br />});<br /> $("#btn2").click(function(){<br />$("#animation2").fadeOut("fast");<br />$("#animation4").fadeOut("very-slow");<br />});<br /> });<br /></script><br /><input type=button id="btn1" value="Start FadeIn"/><br/><br /><div id="animation1" style="display:none;background:pink;">It fades an element in over 400ms</div><br/><br /><div id="animation3" style="display:none;background:red">It fades an element in over 5000ms</div><br/><br /><div id="animation5" style="display:none;background:yellow">It fades an element in over 3000ms</div><br/><br /><br /><input type=button id="btn2" value="Start FadeOut"/><br/><br /><div id="animation2" style="background:red">It fade outs over 200ms</div><br/><br /><div id="animation4" style="background:pink">It fade outs over 5000ms</div><br/><br /></pre></div><div style="text-align: justify;"><br /></div><h4 style="text-align: justify;">Preview:</h4><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><script>jQuery.fx.speeds["medium-slow"]=3000; jQuery.fx.speeds["very-slow"]=5000; $(document).ready(function(){ $("#btn1").click(function(){ $("#animation1").fadeIn(); $("#animation3").fadeIn(5000); $("#animation5").fadeIn("medium-slow"); }); $("#btn2").click(function(){ $("#animation2").fadeOut("fast"); $("#animation4").fadeOut("very-slow"); }); }); </script><input id="btn1" type="button" value="Start FadeIn" /></div><div id="animation1" style="background: pink; display: none;">It fades an element in over 400ms</div><div style="text-align: justify;"><br /></div><div id="animation3" style="background: red; display: none;">It fades an element in over 5000ms</div><div style="text-align: justify;"><br /></div><div id="animation5" style="background: yellow; display: none;">It fades an element in over 3000ms</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><input id="btn2" type="button" value="Start FadeOut" /><br /></div><br /><div id="animation2" style="background: none repeat scroll 0% 0% red; text-align: justify;">It fade outs over 200ms</div><div style="text-align: justify;"><br /></div><div id="animation4" style="background: none repeat scroll 0% 0% pink; text-align: justify;">It fade outs over 5000ms</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">You can also set the value of the document that was animated using a function as argument. Here is a jQuery code which quickly fade in an element and when it is visible, display some text in it. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint"><script><br />$(document).ready(function(){<br />$("#btn4").click(function(){<br />$("#message").fadeIn("fast", function() {$("#message").text("Hello this is animation");});<br />});});<br /></script><br /><input type=button id="btn4" value="Start Animation"/><br/><br /><div id="message" style="color:red"></div><br /></pre></div><div style="text-align: justify;"><br /></div><h4 style="text-align: justify;">Preview:</h4><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><script>$(document).ready(function(){ $("#btn4").click(function(){ $("#message").fadeIn("fast", function() {$("#message").text("Hello this is animation");}); });}); </script><input id="btn4" type="button" value="Start Animation" /></div><br /><div id="message" style="color: red;"></div><br /><a name="more"></a><br /><br /><div style="text-align: justify;">Passing a callback function to an effect method allows you to perform actions at the end of an effect. However, that is is not necessary when you simply want to perform multiple effects in sequence. If you call an animation method on an element that is already being animated, the new animation does not begin right away but is deferred until the current animation ends. For example, you can make an element blink before fading in permanently. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint"><script><br />$(document).ready(function(){<br />$("#blinker").mouseover(function(){<br />$("#blinker").fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn();});<br />});<br /></script><br /><div id="blinker" style="color:red"><h3>It blinks before fading in permanently</h3></div><br /></pre></div><div style="text-align: justify;"><br /></div><h4 style="text-align: justify;">Preview:</h4><div style="text-align: justify;"><script>$(document).ready(function(){ $("#blinker").mouseover(function(){ $("#blinker").fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn();}); }); </script></div><div id="blinker" style="color: red; text-align: justify;"><h3>It blinks before fading in permanently</h3></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">jQuery's effect methods are declared to accept optional duration and callback arguments. It is also possible to invoke these methods with an object whose properties specify animation options. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint"><script><br />$(document).ready(function(){<br /> $("#btn3").click(function(){<br />$("#effect").fadeIn({<br />duration: "slow",<br />complete: function(){$(this).text("Animation was completed");}<br />});});});<br /></script><br /><input type=button id="btn3" value="Start Animation"/><br /><div id="effect" style="background:yellow">This is sample animation effect</div><br /></pre></div><div style="text-align: justify;"><br /></div><h4 style="text-align: justify;">Preview:</h4><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><script>$(document).ready(function(){ $("#btn3").click(function(){ $("#effect").fadeIn({ duration: "slow", complete: function(){$(this).text("Animation was completed");} });});}); </script><input id="btn3" type="button" value="Start Animation" /></div><br /><div id="effect" style="background: none repeat scroll 0% 0% yellow; text-align: justify;">This is sample animation effect</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><div style="text-align: justify;"><br /></div><h3> Related Posts:</h3><ul><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-scroll-top-or-bottom-of-document.html">How to Scroll Top or Bottom of Document Using JavaScript</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-create-table-of-contents-using-javascript.html">How to Create Table of Contents Using JavaScript</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-select-document-elements-using-javascript.html">How to Select Document Elements Using JavaScript?</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-show-pop-up-window-using-javascript.html">How to Show Pop Up Window Using JavaScript</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-go-back-browsing-history-using.html">How to go Back Browsing History Using JavaScript</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-click-button-using-javascript.html">How to Click Button Using JavaScript?</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-function-url-hyperlink.html">How to Write JavaScript Function as URL in Hyperlink?</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-use-round-random-min-and-max-in-javascript.html">How to use Round, Random, Min and Max in JavaScript</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-concatenate-join-and-sort-array-javascript.html">How to Concatenate, Join and Sort Array in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-through-javascript-array.html">How to Loop Through JavaScript Array?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-using-javascript.html">How to Loop using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-show-pop-up-boxes-using-javascript.html">How to Show Pop Up Boxes Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-conditional-statements-in-javascript.html">How to Write Conditional Statements in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-with-html.html">How to Write JavaScript With HTML?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/create-changable-date-and-time-javascript.html">How to create Changeable Date and Time Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2013/11/javascript-image-slideshow-with-links.html">How to Create JavaScript Image Sideshow with Links</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/03/how-to-display-date-format-in-javascript.html">How to Display Date Format in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/02/different-ways-to-redirect-page-in-javascript.html">What are the Different Ways to Redirect Page in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-timer-using-javascript.html">How to create Timer Using JavaScript?</a> </h3></li></ul></div></div>

How to Create Animated Visual Effects Using jQuery

You can create animated visual effects by setting the CSS visibility property, i.e. making elements appearing and disappearing. Along with m...

Read more »