CCNA, CCNP, MCSA, CCNA Final Exam, All Answer Test Module With 100/100

I am using this code to only run this js on certain pages. $("body#action_new").ready(function() { console.log($("body#action_new")); console.log($("body#action_new").length); console.log("code is running"); } Even though body#action_new does not exist, the code is running. the two console.logs print out: [] 0 code is running What gives?

I have got many dropdowns in my site and i want to make a reusable function with jquery so i can save a lot of code just by a single function. Can any one help me out in this regard... For an example <div id="clickMe"> <div id="showMe"> <div>I am dropdown item</div> </div> </div> right now i am using it like this way... $(document).ready(function() { $("#clickMe").click(function(e) { e.preventDefault(); $("#showMe").toggle(); $("#clickMe").toggleClass("menu-open"); }); $("#showMe").mouseup(function() { return false }); $(document).mouseup(function(e) { if($(e.target).parent("#clickMe").length==0) { $("#clickMe").removeClass("menu-open"); $("#showMe").hide(); } }); }); but now i want to make it more reusable... Thanks in advance..

Using jQuery, one can easily find out whether a particular element is visible using $(element).is(':visible') While having some limitations (doesn't cover css visibility hidden or the actual visibility in the viewport, i.e. whether it's covered by other elements or scrolled away), I find it being useful for my scenario. The catch is, it only works within one iframe. If the element has any parent within its document with display:none; , it returns false. If the whole document is included in an iframe which has display:none , it returns true. Is it possible to somehow detect this in another way ?

I am using some jquery events in droid gap class but it will block default long press for selecting text and copy and paste .can anybody tell How to avoid this ? Thanks

i have this situation: <a href="#" onClick="submitNotification(1);">click1</a> <a href="#" onClick="submitNotification(2);">click2</a> <a href="#" onClick="submitNotification(3);">click3</a> function submitNotification(cdata){ navigator.notification.confirm( 'do you like '+cdata+' option ', submit, 'notice', 'Yes,No' ); function submit(button){ if (button == 1){ alert(id); //or alert(cdata); } else if (button == 2){ ... } } so, i click on a link, 1 or 2 ... gets send to submitNotification where i get a message: do you like 1 option or do you like 2 option or ... depending on what link i click. this function calls submitVote and sends button var to it somehow. yes means 1 and no means 2 . the problem is that i cant get id or cdata from the original link.

Using jQuery, one can easily find out whether a particular element is visible using $(element).is(':visible') While having some limitations (doesn't cover css visibility hidden or the actual visibility in the viewport, i.e. whether it's covered by other elements or scrolled away), I find it being useful for my scenario. The catch is, it only works within one iframe. If the element has any parent within its document with display:none; , it returns false. If the whole document is included in an iframe which has display:none , it returns true. Is it possible to somehow detect this in another way ?

I am using this code to only run this js on certain pages. $("body#action_new").ready(function() { console.log($("body#action_new")); console.log($("body#action_new").length); console.log("code is running"); } Even though body#action_new does not exist, the code is running. the two console.logs print out: [] 0 code is running What gives?

i have this situation: <a href="#" onClick="submitNotification(1);">click1</a> <a href="#" onClick="submitNotification(2);">click2</a> <a href="#" onClick="submitNotification(3);">click3</a> function submitNotification(cdata){ navigator.notification.confirm( 'do you like '+cdata+' option ', submit, 'notice', 'Yes,No' ); function submit(button){ if (button == 1){ alert(id); //or alert(cdata); } else if (button == 2){ ... } } so, i click on a link, 1 or 2 ... gets send to submitNotification where i get a message: do you like 1 option or do you like 2 option or ... depending on what link i click. this function calls submitVote and sends button var to it somehow. yes means 1 and no means 2 . the problem is that i cant get id or cdata from the original link.

It's hard to describe what exactly i was looking for and sorry for my english. What i want to do is, while user scroll down slowly, when user reached a specific point, starting to scroll down page like 1000px and then stop scrolling at the second specific point. Here is an example: http://comic.naver.com/webtoon/detail.nhn?titleId=350217&no=31&weekday=tu It should be cross browser compatible.

I had a problem, was going to ask how to fix it, but then the answer popped up in a related question. Seeing I have little experience with jQuery, I would like to understand exactly "what" happens with what I'm doing. FYI: jQuery (latest) + jCarousel + Lightbox. jCarousel creates a few links for me, and Lightbox captures these links and shows a nice frame around the picture I linked. The code that did the trick was $('a.gallery').live("click", function(e) { $(this).lightBox({ imageLoading : 'img/lightbox-ico-loading.gif', imageBtnClose : 'img/lightbox-btn-close.gif', imageBtnPrev : 'img/lightbox-btn-prev.gif', imageBtnNext : 'img/lightbox-btn-next.gif' }); $(this).triggerHandler('click'); e.preventDefault(); }); ..instead of $('a.gallery').lightBox({ imageLoading : 'img/lightbox-ico-loading.gif', imageBtnClose : 'img/lightbox-btn-

I had a problem, was going to ask how to fix it, but then the answer popped up in a related question. Seeing I have little experience with jQuery, I would like to understand exactly "what" happens with what I'm doing. FYI: jQuery (latest) + jCarousel + Lightbox. jCarousel creates a few links for me, and Lightbox captures these links and shows a nice frame around the picture I linked. The code that did the trick was $('a.gallery').live("click", function(e) { $(this).lightBox({ imageLoading : 'img/lightbox-ico-loading.gif', imageBtnClose : 'img/lightbox-btn-close.gif', imageBtnPrev : 'img/lightbox-btn-prev.gif', imageBtnNext : 'img/lightbox-btn-next.gif' }); $(this).triggerHandler('click'); e.preventDefault(); }); ..instead of $('a.gallery').lightBox({ imageLoading : 'img/lightbox-ico-loading.gif', imageBtnClose : 'img/lightbox-btn-

I have this code: <p><label for="mobtel">Enter mobile no.:</label><br /> <input id="mobtel" type="text" name="mobtel"/></p> I hide it using jquery with this: $("label[for=mobtel],#mobtel").hide(); And now I want now is to display a new label and new input that will look like this: <p><label for="mobtel">Enter verification no.:</label><br /> <input id="verification_no" type="text" name="verification_no"/></p> How can I do this in jquery style?

I have this code: <p><label for="mobtel">Enter mobile no.:</label><br /> <input id="mobtel" type="text" name="mobtel"/></p> I hide it using jquery with this: $("label[for=mobtel],#mobtel").hide(); And now I want now is to display a new label and new input that will look like this: <p><label for="mobtel">Enter verification no.:</label><br /> <input id="verification_no" type="text" name="verification_no"/></p> How can I do this in jquery style?

I am working on MVC Razor. I face an issue to validate URL validation. I need to do URL validation before inserting in temp DB. I got a reference of http://www.regxlib.com/Search.aspx?k=&c=2&m=-1&ps=20 and found one nice validation pattern, (http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])? While i work in MVC view, it gives me error so i have change it to (http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@@?^=%&amp;:/~\+#]*[\w\-\@@?^=%&amp;/~\+#])? i.e. @@ instead of @ when it runs and if i see the console, i got the original one, so i think it is okay for me to do @@ instead of @ But in console i got an error can anyone tell me what is wrong with this, so got the error, "invalid range in character class"

I am working on MVC Razor. I face an issue to validate URL validation. I need to do URL validation before inserting in temp DB. I got a reference of http://www.regxlib.com/Search.aspx?k=&c=2&m=-1&ps=20 and found one nice validation pattern, (http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])? While i work in MVC view, it gives me error so i have change it to (http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@@?^=%&amp;:/~\+#]*[\w\-\@@?^=%&amp;/~\+#])? i.e. @@ instead of @ when it runs and if i see the console, i got the original one, so i think it is okay for me to do @@ instead of @ But in console i got an error can anyone tell me what is wrong with this, so got the error, "invalid range in character class"

So I have a javascript library setup on http://www.topholidayrecipes.com/crockpot-chicken-recipes.html and this page uses fancy box (located in the recipe box named "iframe" ). The problem is that everytime the scroll function is used inside and outside the fancybox...the play and pause buttons from the javascript slideshow are overlapping the fancybox and its content. How would I go on to solve this problem. Thank you for helping.

I am using some jquery events in droid gap class but it will block default long press for selecting text and copy and paste .can anybody tell How to avoid this ? Thanks

So I have a javascript library setup on http://www.topholidayrecipes.com/crockpot-chicken-recipes.html and this page uses fancy box (located in the recipe box named "iframe" ). The problem is that everytime the scroll function is used inside and outside the fancybox...the play and pause buttons from the javascript slideshow are overlapping the fancybox and its content. How would I go on to solve this problem. Thank you for helping.

I would want to allow user to draw semi-transparent basic shapes (rectangle, circle) with user defined text over an image. The basic idea is to have a map underneath and users could mark certain areas of from it. It has been a while since doing web development and I'm quite uncertain which approach would be the best. It should work even on older browsers. Any help would be appreciated!

I have a following code: <div class="block review_block wrap"><ul class="comments_list"> <li class="comment"> <div class="poster"> <img width="60px" height="75px" src="/Image/GetImage?imageName=3c52a0f1-92ee-45ee-bd25-bdd5bfc0954f.jpg"> </div> <!-- .poster--> <div class="comment_content"> <div class="date"> 29.01.2012 9:36:59</div> <div class="nickname"> <a href="#"> Ослик Иа</a></div> <div class="review_text"> <a> Рецензия 3</a> </div> <p class="text"> Нельзя сказать, что сюжетная линия предсказуема (только в паре моментов), и поэтому с наслаждением зал наблюдал, как Холмс снова и снова поражал нас сво

I have a following code: <div class="block review_block wrap"><ul class="comments_list"> <li class="comment"> <div class="poster"> <img width="60px" height="75px" src="/Image/GetImage?imageName=3c52a0f1-92ee-45ee-bd25-bdd5bfc0954f.jpg"> </div> <!-- .poster--> <div class="comment_content"> <div class="date"> 29.01.2012 9:36:59</div> <div class="nickname"> <a href="#"> Ослик Иа</a></div> <div class="review_text"> <a> Рецензия 3</a> </div> <p class="text"> Нельзя сказать, что сюжетная линия предсказуема (только в паре моментов), и поэтому с наслаждением зал наблюдал, как Холмс снова и снова поражал нас сво

It's quite difficult to find id's in page. F.e. it's much easier to work with picture and then get id from popup. I use Chrome but feel it can be much better and easier. My question is. Which browser is better for work with javascript? Any other tools?

I just downloaded netbeans 7.1 (PHP) to develop javascript. Autocompletion is working across the javascript files in the project, and jQuery is supported - somewhat. If I type "$.is" I get the following options: Note the missing "isArray", "isNumeric", etc, etc... The javascript settings in Netbeans: Question: "What am I missing?"

I just downloaded netbeans 7.1 (PHP) to develop javascript. Autocompletion is working across the javascript files in the project, and jQuery is supported - somewhat. If I type "$.is" I get the following options: Note the missing "isArray", "isNumeric", etc, etc... The javascript settings in Netbeans: Question: "What am I missing?"

It's a miracle to me why the scale transform does behave in such a strange way. The two elements shown below in the image have exactly the same html behind, but the scale transform does pixelate some elements... this strange behaviour just appears after a completed drag & drop on the dragged element, and the elements around the dragged element. click to see the Image css is the following: div.KE_coverflowContainer { vertical-align:top; height:122px; width:90px; padding:5px; text-align:center; display:inline-block; margin:10px 5px 5px 0px; background:#e4e4e4; position:relative; cursor:default; -moz-border-radius: 5px; border-radius: 5px; border: 1px solid #bababa; } div.KE_coverflowContainerHover { -moz-transform: scale(2) translate(0px,29px); -o-transform: scale(2) translate(0px,29px); -webkit-transform: scale(2) translate(0px,29px); transform: scale(2) translate(0px,29px); z-index:1000; c

It's a miracle to me why the scale transform does behave in such a strange way. The two elements shown below in the image have exactly the same html behind, but the scale transform does pixelate some elements... this strange behaviour just appears after a completed drag & drop on the dragged element, and the elements around the dragged element. click to see the Image css is the following: div.KE_coverflowContainer { vertical-align:top; height:122px; width:90px; padding:5px; text-align:center; display:inline-block; margin:10px 5px 5px 0px; background:#e4e4e4; position:relative; cursor:default; -moz-border-radius: 5px; border-radius: 5px; border: 1px solid #bababa; } div.KE_coverflowContainerHover { -moz-transform: scale(2) translate(0px,29px); -o-transform: scale(2) translate(0px,29px); -webkit-transform: scale(2) translate(0px,29px); transform: scale(2) translate(0px,29px); z-index:1000; c

I have a script which allows to display Google suggestions: JsFiddle I want to do a function with the first li item rendered by the ui autocomplete, so I did this: $("input#term").keyup(function() { DoMyFunction($('.ui-autocomplete li:first-child a').text(), true); }); The problem however is that there is a period of time between the keyup---> request--->xml cache and html rendering by the ui autocomplete. Which means the my function (DoMyFunction) is being triggered when there is no html list, hence it doesnt work. So my question is: How do I do my function right after the reqeust is cached and processed. Setting a timer wont work because there are to many variables to account for (ea user bandwidth).

i am using jqgrid and have simple searching enabled. i am wondering if there is a way to add an additional item in the select list of fields that does not exist as a column in the grid. i would call it something like 'Any Field' so i could search on any of the fields and then handle that outcome server side. thanks grant.

i am using jqgrid and have simple searching enabled. i am wondering if there is a way to add an additional item in the select list of fields that does not exist as a column in the grid. i would call it something like 'Any Field' so i could search on any of the fields and then handle that outcome server side. thanks grant.

My complete code: jQuery.extend({ combinationCheck: function (p1position) { var Combination = [1, 2, 3, 4, 5, 6, 7, 8]; Combination[0] = [1, 2, 3]; Combination[1] = [4, 5, 6]; Combination[2] = [7, 8, 9]; Combination[3] = [1, 4, 7]; Combination[4] = [2, 5, 8]; Combination[5] = [4, 6, 8]; Combination[6] = [1, 5, 9]; Combination[7] = [3, 5, 7]; $.each(p1position, function (index, value) { var num = value; if ($.inArray(String(value), Combination[1]) != '-1') { alert("there"); } else { alert("not there"); } }); }); so it works. If I were to set num to 5, it alerts "is there", and for 8 --> "not there". but the problem is I have another array. p1position = [1,5]; and go through the array.. $.each(p1position,function(index,value){ var num = value; //then call the jQuery.inArray function as written above, it always return not

My complete code: jQuery.extend({ combinationCheck: function (p1position) { var Combination = [1, 2, 3, 4, 5, 6, 7, 8]; Combination[0] = [1, 2, 3]; Combination[1] = [4, 5, 6]; Combination[2] = [7, 8, 9]; Combination[3] = [1, 4, 7]; Combination[4] = [2, 5, 8]; Combination[5] = [4, 6, 8]; Combination[6] = [1, 5, 9]; Combination[7] = [3, 5, 7]; $.each(p1position, function (index, value) { var num = value; if ($.inArray(String(value), Combination[1]) != '-1') { alert("there"); } else { alert("not there"); } }); }); so it works. If I were to set num to 5, it alerts "is there", and for 8 --> "not there". but the problem is I have another array. p1position = [1,5]; and go through the array.. $.each(p1position,function(index,value){ var num = value; //then call the jQuery.inArray function as written above, it always return not

I am developing web app that will be accessed by smart-phone integrated browser. In my application I need to calculate the distance between the mobile phone actual (current) location and some other address. Beside that I should be able to find the specific location (shop location for example) that is closest to the user actual location. Can you give me a clue which js framework can I use? Is there maybe some jQuery plugin that can be helpful? Thank you

I am developing web app that will be accessed by smart-phone integrated browser. In my application I need to calculate the distance between the mobile phone actual (current) location and some other address. Beside that I should be able to find the specific location (shop location for example) that is closest to the user actual location. Can you give me a clue which js framework can I use? Is there maybe some jQuery plugin that can be helpful? Thank you

I have a menu built this way: ul li a li a li a The problem I am having is this: When a user clicks li a the li-function fires as well. The li -function should only fire if someone clicks just the li (misses on the a-tag). $('#stromSkjemaTabs li').children().mousedown(function () { $('#console').append('debug1 <br />'); }); $('#stromSkjemaTabs li').mousedown.(function () { $('#console').append('debug2 <br />'); }); Is there any way of writing this so only one of the functions fires? When clicking the li a the function containing "debug1" should fire (NOT debug2 too). When clicking li the debug2 should fire. I've tried every combination of children() but I can't get this to work. Any cleaver heads out there?

I have a menu built this way: ul li a li a li a The problem I am having is this: When a user clicks li a the li-function fires as well. The li -function should only fire if someone clicks just the li (misses on the a-tag). $('#stromSkjemaTabs li').children().mousedown(function () { $('#console').append('debug1 <br />'); }); $('#stromSkjemaTabs li').mousedown.(function () { $('#console').append('debug2 <br />'); }); Is there any way of writing this so only one of the functions fires? When clicking the li a the function containing "debug1" should fire (NOT debug2 too). When clicking li the debug2 should fire. I've tried every combination of children() but I can't get this to work. Any cleaver heads out there?

I would want to allow user to draw semi-transparent basic shapes (rectangle, circle) with user defined text over an image. The basic idea is to have a map underneath and users could mark certain areas of from it. It has been a while since doing web development and I'm quite uncertain which approach would be the best. It should work even on older browsers. Any help would be appreciated!

Start to use qtip2 in my site. I think it is best jquery tooltip. But have one problem. The page has 5 tooltips. $('.cloud').each(function() { var content = $($(this).children('.bubble')); $(this).qtip({ content: content, show: { ready: true }, hide: { fixed: true}, position: { adjust: { x: 5 }, my: 'top center', at: 'bottom center' }, style: { tip: { width: 15, height: 8 }, width: '120' } }); }); I need to show them dynamically. One after one. When you hover over tooltip - stop animation. After losing focus - resume animation. Maybe you have a good solution. I tried to find it. But nothing like this didn't find. If you have a time and solution - please help me...

I am using jqgrid 4.3.1 and I am using form editing with local data. The problem is the form does not close after adding or editing. Here is my code. $('#studentset').jqGrid({ data: mydata, datatype: "local", colNames:['id','First Name', 'Last Name'], colModel:[ {name:'id',index:'id', width:60}, {name:'firstName',index:'fName', width:300, editable:true}, {name:'lastName',index:'lastName', width:300, editable:true} ], pager: '#pager', rowNum: 10, rowList: [5, 10, 20], sortname: 'id', sortorder: 'asc', viewrecords: true,

I have developed a mobile application using jQuery mobile, and deployed it on the server. When I access the file on the server, from the Android Browser, it loads fine and all the styles and scripts are applied. However, when I take the jQuery Mobile folder along with my html file and put it on the SD card on the Android phone, and then refer to the HTML file on the SD card (using file:///sdcard/myFolder/myFile.html), using the Android Browser, it does not pickup any of the styles (and jQuery does not run fine) and shows only an HTML page without formatting. When I did the same thing (accessing the HTML file on a file system like C://myFolder/myFile.html) from Google Chrome on my computer, it worked fine. What could be the problem with the local file (placed in the SD card) not showing correctly on the Android Browser?

I have a radio button that I would like to be able to enable and disable through jQuery Mobile. Radio button code: <input type="radio" disabled="disabled" value="option1" /> tried: $('input[type="radio"]').removeAttr('disabled'); and $('input[type="radio"]').attr('disabled', ''); Neither of which seem to be able to toggle the button to enabled.

I have developed a mobile application using jQuery mobile, and deployed it on the server. When I access the file on the server, from the Android Browser, it loads fine and all the styles and scripts are applied. However, when I take the jQuery Mobile folder along with my html file and put it on the SD card on the Android phone, and then refer to the HTML file on the SD card (using file:///sdcard/myFolder/myFile.html), using the Android Browser, it does not pickup any of the styles (and jQuery does not run fine) and shows only an HTML page without formatting. When I did the same thing (accessing the HTML file on a file system like C://myFolder/myFile.html) from Google Chrome on my computer, it worked fine. What could be the problem with the local file (placed in the SD card) not showing correctly on the Android Browser?

I created a page to play around with the 960 Grid System, learn about div placement. There are up to four divs on the page. When a new grid size, pull or push value is selected from a dropdown, I need to remove the current class, i.e. grid_8 , pull_5 or push_4 , and add the newly selected class. function alter_grid1(new_class_name){ var old = document.getElementById('grid1'); var classes = old.className.split(' '); var old_class_name = 'cessna'; $.each(classes, function(){ if(old_class_name == 'cessna' || old_class_name == null){ old_class_name = this.match('/grid_1|grid_2|grid_3|grid_4|grid_5|grid_6|grid_7|grid_8|grid_9|grid_10|grid_11|grid_12|grid_13|grid_14|grid_15|grid_16|grid_17/'); } }); $(old).removeClass('grid_1 grid_2 grid_3 grid_4 grid_5 grid_6 grid_7 grid_8 grid_9 grid_10 grid_11 grid_12 grid_13 grid_14 grid_15 grid_16').addClass(new_class_name); console.log('Old grid1 clas

I have a radio button that I would like to be able to enable and disable through jQuery Mobile. Radio button code: <input type="radio" disabled="disabled" value="option1" /> tried: $('input[type="radio"]').removeAttr('disabled'); and $('input[type="radio"]').attr('disabled', ''); Neither of which seem to be able to toggle the button to enabled.

I created a page to play around with the 960 Grid System, learn about div placement. There are up to four divs on the page. When a new grid size, pull or push value is selected from a dropdown, I need to remove the current class, i.e. grid_8 , pull_5 or push_4 , and add the newly selected class. function alter_grid1(new_class_name){ var old = document.getElementById('grid1'); var classes = old.className.split(' '); var old_class_name = 'cessna'; $.each(classes, function(){ if(old_class_name == 'cessna' || old_class_name == null){ old_class_name = this.match('/grid_1|grid_2|grid_3|grid_4|grid_5|grid_6|grid_7|grid_8|grid_9|grid_10|grid_11|grid_12|grid_13|grid_14|grid_15|grid_16|grid_17/'); } }); $(old).removeClass('grid_1 grid_2 grid_3 grid_4 grid_5 grid_6 grid_7 grid_8 grid_9 grid_10 grid_11 grid_12 grid_13 grid_14 grid_15 grid_16').addClass(new_class_name); console.log('Old grid1 clas

I have a script which allows to display Google suggestions: JsFiddle I want to do a function with the first li item rendered by the ui autocomplete, so I did this: $("input#term").keyup(function() { DoMyFunction($('.ui-autocomplete li:first-child a').text(), true); }); The problem however is that there is a period of time between the keyup---> request--->xml cache and html rendering by the ui autocomplete. Which means the my function (DoMyFunction) is being triggered when there is no html list, hence it doesnt work. So my question is: How do I do my function right after the reqeust is cached and processed. Setting a timer wont work because there are to many variables to account for (ea user bandwidth).

I put CSS of jQuery UI 1.8.4 downto my site source code, with its images folder along. In the default page (wrapping page), jQuery CSS is initialized by declaration: <link href="//Css/App.SrsWPSite/jquery-ui-1.8.4.custom.css" rel="stylesheet" type="text/css" /> My jQuery accordion is set up as usual: $('SomeId').accordion({ header: '.menuItem', icons: { 'header': 'ui-icon-circle-plus', 'headerSelected': 'ui-icon-circle-minus' } }); It works normally in HTTP mode (CSS loaded successfully). But, in HTTPS mode, all jQuery accordion icons (and some other css formats) were unable to be loaded. Taking examination, I found out that they had image url the same to HTTP mode's: url("http://mypath//Css/Site/images/ui-icons_0078ae_256x240.png") If I let my site run binded under both HTTP (with default port 80) and HTTPS, then it's OK ! But for sure, I just want to force my site to ru

I have an image thumbnail with a light colored border which, on mouseover, I want to crossfade to a dark colored border. I'm thinking that the easiest way to achieve this would be to fade in a second div with a darker border over the existing one. Is there a better or different way to fade in a border color change? Thanks.

Could you tell me which type of scroll function in jquery is used to create a website of www.benthebodyguard.com ? It would be really appreciated if you could explain the working of the website. its quite complicated. Im confused if they are using Scroll event or parallax to create the website.

I am using phonegap to build my app.I am using flot to create charts. here is my javascript code <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="flot/jquery.js"></script> <script type="text/javascript" src="flot/jquery.flot.js"></script> <script type="text/javascript" src="flot/jquery.flot.stack.js"></script> <script type="text/javascript" src="flot/jquery.flot.pie.js"></script> </head> <body> <div id="pie-example" style="width:300px;height:200px;"></div> <script type="text/javascript" src="pie_chart.js"></script> </body> </html> In this code i am giving the width and height of the bar graph.I want to give device height and width.How to do that?

I have read some topic regarding with my question but there code doesn't work for me. Honestly, I'm not good in jQuery. I have this working views and controller, but it has a lot disadvantages that is why I switch to using jQuery grid. Working code (not using jQuery grid): @using Custom.Helpers @model IEnumerable<Models.DeviceMVC> @{ ViewBag.Title = "List"; } <div id="page-title"> <h2>Device list</h2> <div id="Optiontab"> @Html.ActionLink("Create New", "Create") </div> </div> <table id="table-list"> <tr> <th> Branch </th> <th> Name </th> <th> Login id </th> <th> Serial number </th> <th> Brand </th> <th> Model