Search Results

Search found 27771 results on 1111 pages for 'jquery forms plugin'.

Page 235/1111 | < Previous Page | 231 232 233 234 235 236 237 238 239 240 241 242  | Next Page >

  • jQuery / jqGrids / Submitting form data troubles...

    - by Kelso
    Ive been messing with jqgrids alot of the last couple days, and I have nearly everything the way I want it from the display, tabs with different grids, etc. Im wanting to make use of Modal for adding and editing elements on my grid. My problem that Im running into is this. I have my editurl:"editsu.php" set, if that file is renamed, on edit, i get a 404 in the modal.. great! However, with that file in place, nothing at all seems to happen. I even put a die("testing"); line at the top, so it sees the file, it just doesnt do anything with it. Below is the content. ........ the index page jQuery("#landings").jqGrid({ url:'server.php?tid=1', datatype: "json", colNames:['ID','Tower','Sector', 'Client', 'VLAN','IP','DLink','ULink','Service','Lines','Freq','Radio','Serial','Mac'], colModel:[ {name:'id', index:'id', width : 50, align: 'center', sortable:true,editable:true,editoptions:{size:10}}, {name:'tower', index:'tower', width : 85, align: 'center', sortable:true,editable:false,editoptions:{readonly:true,size:30}}, {name:'sector', index:'sector', width : 50, align: 'center',sortable:true,editable:true,editoptions:{readonly:true,size:20}}, {name:'customer',index:'customer', width : 175, align: 'left', editable:true,editoptions:{readonly:true,size:35}}, {name:'vlan', index:'vlan', width : 35, align: 'left',editable:true,editoptions:{size:10}}, {name:'suip', index:'suip', width : 65, align: 'left',editable:true,editoptions:{size:20}}, {name:'datadl',index:'datadl', width:55, editable: true,edittype:"select",editoptions:{value:"<? $qr = qquery("select * from datatypes"); while ($q = ffetch($qr)) {echo "$q[id]:$q[name];";}?>"}}, {name:'dataul', index:'dataul', width : 55, editable: true,edittype:"select",editoptions:{value:"<? $qr = qquery("select * from datatypes"); while ($q = ffetch($qr)) {echo "$q[id]:$q[name];";}?>"}}, {name:'servicetype', index:'servicetype', width : 85, editable: true,edittype:"select",editoptions:{value:"<? $qr = qquery("select * from servicetype"); while ($q = ffetch($qr)) {echo "$q[id]:$q[name];";}?>"}}, {name:'voicelines', index:'voicelines', width : 35, align: 'center',editable:true,editoptions:{size:30}}, {name:'freqname', index:'freqname', width : 35, editable: true,edittype:"select",editoptions:{value:"<? $qr = qquery("select * from freqband"); while ($q = ffetch($qr)) {echo "$q[id]:$q[name];";}?>"}}, {name:'radioname', index:'radioname', width : 120, editable: true,edittype:"select",editoptions:{value:"<? $qr = qquery("select * from radiotype"); while ($q = ffetch($qr)) {echo "$q[id]:$q[name];";}?>"}}, {name:'serial', index:'serial', width : 100, align: 'right',editable:true,editoptions:{size:20}}, {name:'mac', index:'mac', width : 120, align: 'right',editable:true,editoptions:{size:20}} ], rowNum:20, rowList:[30,50,70], pager: '#pagerl', sortname: 'sid', mtype: "GET", viewrecords: true, sortorder: "asc", altRows: true, caption:"Landings", editurl:"editsu.php", height:420 }); jQuery("#landings").jqGrid('navGrid','#pagerl',{edit:true,add:true,del:false,search:false},{height:400,reloadAfterSubmit:false},{height:400,reloadAfterSubmit:false},{reloadAfterSubmit:false},{}); now for the editsu.php file.. $operation = $_REQUEST['oper']; if ($operation == "edit") { qquery("UPDATE customers SET vlan = '".$_POST['vlan']."', datadl = '".$_POST['datadl']."', dataul = '".$_POST['dataul']."', servicetype = '".$_POST['servicetype']."', voicelines = '".$_POST['voicelines']."', freqname = '".$_POST['freqname']."', radioname = '".$_POST['radioname']."', serial = '".$_POST['serial']."', mac = '".$_POST['mac']."' WHERE id = '".$_POST['id']."'") or die(mysql_error()); } Im just having a hard time troubleshooting this to figure out where its getting hung up at. My next question after this would be to see if its possible to make it so when you click "add", that it auto inserts a row into the db with a couple variable predtermined and then bring up the modal window, but ill work on the first problem first. thanks!

    Read the article

  • jQuery::Scrollable Div does not work

    - by Legend
    I am trying to create a scrollable DIV using the following: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script> <style type="text/css"> div.container { overflow:hidden; width:200px; height:200px; } div.content { position:relative; top:0; } </style> <script type="text/javascript"> $(function(){ $(".container a.up").bind("click", function(){ var topVal = $(this).parents(".container").find(".content").css("top"); $(this).parents(".container").find(".content").css("top", topVal-10); }); $(".container a.dn").bind("click", function(){ var topVal = $(this).parents(".container").find(".content").css("top"); $(this).parents(".container").find(".content").css("top", topVal+10); }); }); </script> </head> <body> <div class="container"> <p> <a href="#" class="up">Up</a> / <a href="#" class="dn">Down</a> </p> <div class="content"> <p>Hello World 1</p> <p>Hello World 2</p> <p>Hello World 3</p> <p>Hello World 4</p> <p>Hello World 5</p> <p>Hello World 6</p> <p>Hello World 7</p> <p>Hello World 8</p> <p>Hello World 9</p> <p>Hello World 10</p> <p>Hello World 10</p> <p>Hello World 11</p> <p>Hello World 12</p> <p>Hello World 13</p> <p>Hello World 14</p> <p>Hello World 15</p> <p>Hello World 16</p> <p>Hello World 17</p> <p>Hello World 18</p> <p>Hello World 19</p> <p>Hello World 20</p> <p>Hello World 21</p> <p>Hello World 22</p> <p>Hello World 23</p> <p>Hello World 24</p> <p>Hello World 25</p> <p>Hello World 26</p> <p>Hello World 27</p> </div> </div> </body> </html> I don't know where I am messing up, but it simply refuses to work. Any suggestions?

    Read the article

  • How to drill down with jQuery?

    - by Timothy Reed
    I'm new to jQuery so sorry if this sounds stupid but I'm having truble drilling down to other elemnts. Paticularly I want to fade in the .menu li a:hover class with jquery. .menu { padding:0; margin:0; list-style:none; } .menu li { float:left; margin-left:1px; } .menu li a { display:block; height:44px; line-height:40px; padding:0 5px; float:right; color:#fff; text-decoration:none; font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; font-size:12px; font-weight:bold; } .menu li a b { text-transform:uppercase; } .menu li a:hover { color:#E4FFC5; background: url(../images/arrow.png) no-repeat center bottom; } .current { background: url(../images/arrow.png) no-repeat center bottom; font-size:16px; font-weight:bold; } .spacer p { display:block; height:44px; line-height:40px; padding:0 5px; float:right; color:#fff; text-decoration:none; font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; font-size:12px; font-weight:bold; } <ul class="menu"> <li class="current"><a href="index.html">Home</a></li> <li class="spacer"> <p>|</p> </li> <li><a href="#">Mission &amp; Values </a></li> <li class="spacer"> <p>|</p> </li> <li><a href="#">Caregivers</a></li> <li class="spacer"> <p>|</p> </li> <li><a href="#">Special Programs </a></li> <li class="spacer"> <p>|</p> </li> <li><a href="#">Enployment</a></li> <li class="spacer"> <p>|</p> </li> <li><a href="#">Contact</a></li> </ul> <script type="text/javascript"> $(function() { $('a').mouseover(function() { $('.logo').animate ({opacity:'0.6'}, 'normal'); }); $('a').mouseout (function() { $('.logo').animate ({opacity:'1'}, 'normal'); $('.menu li a:hover').fadeIn ('slow'); }); </script>

    Read the article

  • jQuery .append() not working in IE, Safari, and Chrome

    - by mkmcdonald
    So I'm using jQuery's AJAX function to read some XML for me and it's worked just fine. But now I'm trying to manipulate the display property of 4 different dynamically generated divs. The size and x/y of the divs are determined by the XML and are parsed through. My problem lies in the face that these divs either aren't being generated or just don't show up in IE, Safari, and Chrome. In Firefox and Opera, they do work. I'm using jQuery's .append() to create the divs and then the .css() functino to manipulate them. Looking in Chrome's developer tools, I am seeing that the css property being changed in the script is being overridden by the property in the stylesheet. Any fixes? $(document).ready(function(){ $.ajax({ type: "GET", url: "generate?test", dataType: "xml", success: function(xml) { $(xml).find('template').each(function(){ var portion = $(this).attr('portion'); var select; var name = $(this).find('$(this):first').text(); var mutability = $(this).attr('mutability'); var x = (parseInt($(this).find('x:first').text())*96)/72; var y = (parseInt($(this).find('y:first').text())*96)/72; switch(portion){ case "stub": select = $('#StubTemplates'); select.append(""+name+""); break; case "body": select = $('#BodyTemplates'); select.append(""+name+""); y = y + 90; break; } switch(mutability){ case "dynamic": var width = (parseInt($(this).find('width:first').text())*96)/72; var height = (parseInt($(this).find('height:first').text())*96)/72; var n = name; switch(portion){ case "stub": $('.ticket').append("") break; case "body": $('.ticket').append(""); break; } var top = $('#'+n).position().top; var left = parseInt($('#'+n).css('margin-left')); $('#'+n).css('top', (y+top)+"px"); $('#'+n).css('margin-left', (x+left)+"px"); $('#'+n).css('width', width+"px"); $('#'+n).css('height', height+"px"); break; case "static": var n = name; switch(portion){ case "stub": $('.ticket').append(""); break; case "body": $('.ticket').append(""); break; } break; } }); var stubActive = false; var bodyActive = false; $('#StubTemplates').find('.ddindent').mouseup(function(){ var tVal = $(this).val(); var tTitle = $(this).attr('title'); if(!stubActive){ $('.stubEditable').css('display', 'none'); $('#'+tVal).css('display', 'block'); stubActive = true; }else{ $('.stubEditable').css('display', 'none'); $('#'+tVal).css('display', 'block'); stubActive = false; } }); $('#StubTemplates').find('#stubTempNone').mouseup(function(){ $('.stubEditable').css('display', 'none'); }); $('#BodyTemplates').find('.ddindent').mouseup(function(){ var tVal = $(this).val(); var tTitle = $(this).attr('title'); if(!bodyActive){ $('.bodyEditable').css('display', 'none'); $('#'+tVal).css('display', 'block'); bodyActive = true; }else{ $('.bodyEditable').css('display', 'none'); $('#'+tVal).css('display', 'block'); bodyActive = false; } }); $('#BodyTemplates').find('#bodyTempNone').mouseup(function(){ $('.bodyEditable').css('display', 'none'); }); } }); });

    Read the article

  • JQuery Help: slidetoggle() is not working properly

    - by John Smith
    Hi all, I'm trying to use JQuery Slidetoggle functionality, but not able to use properly. The problem I'm currently facing is my div is sliding down on the click of slide image icon, but after that suddenly data div (in which data is loading) disappears. Means sliding down is perfect but div (in which data is loading , here #divMain) is not visible after that. I want to achieve sliding effect in my code, like this has (Please see Website Design, Redesign Services slider): Here is my code: HTML: <div> <div class="jquery_inner_mid"> <div class="main_heading"> <a href="#"> <img src="features.jpg" alt="" title="" border="0" /></a> </div> <div class="plus_sign"> <img id="imgFeaturesEx" src="images/plus.jpg" alt="" title="" border="0" /> <img id="imgFeaturesCol" src="images/minus.jpg" alt="" title="" border="0" /></div> <div class="toggle_container"> <div id="divMain" > </div> </div> </div> <div class="jquery_inner_mid"> <div class="main_heading"> <img src="About.jpg" alt="" title="" /></div> <div class="plus_sign"> <img id="imgTechnoEx" src="images/plus.jpg" alt="" title="" border="0" /> <img id="imgTechnoCol" src="images/minus.jpg" alt="" title="" border="0" /></div> <div class="toggle_container"> <div id="divTechnossus" > </div> </div> </div> </div> JQuery: $(function() { $('#imgFeaturesCol').hide(); $('#imgTechnoCol').hide(); $('#imgFeaturesEx').click(function() { $.getJSON("/Visitor/GetFeatureInfo", null, function(strInfo) { $('#divMain').html(strInfo).slideToggle("slow"); LoadDiv(); }); $('#imgFeaturesEx').hide(); $('#imgFeaturesCol').show(); }); $('#imgFeaturesCol').click(function() { $('#divMain').html("").slideToggle("slow"); $('#imgFeaturesCol').hide(); $('#imgFeaturesEx').show(); }); $('#imgTechnoEx').click(function() { $.getJSON("/Visitor/GetTechnossusInfo", null, function(strInfo) { $('#divTechnossus').html(strInfo).slideToggle("slow"); }); $('#imgTechnoEx').hide(); $('#imgTechnoCol').show(); }); $('#imgTechnoCol').click(function() { $('#divTechnossus').html("").slideToggle("slow"); $('#imgTechnoCol').hide(); $('#imgTechnoEx').show(); }); })(); function LoadDiv() { $('#s4').cycle({ speed: 200, timeout: 0, pager: '#nav' }); }

    Read the article

  • Smooth Div Scroll jquery not scrolling

    - by Razor
    The Smooth Div Scroll is great but for some reason the area no longer scrolls when I edit or remove the #makeMeScrollable or #makeMeScrollable div.scrollableArea * When I leave it as is it works. Which is a problem for customization. and it won't work after I take the "*" out of div.scrollableArea * If I edit the part with the It's been frustrating figuring out why that part which is supposed to be editable not work at all. Any help with this jquery would be helpful! Thanks in advance! /* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */ /* Invisible left hotspot */ div.scrollingHotSpotLeft { /* The hotspots have a minimum width of 75 pixels and if there is room the will grow and occupy 10% of the scrollable area (20% combined). Adjust it to your own taste. */ min-width: 75px; width: 10%; height: 100%; /* There is a big background image and it's used to solve some problems I experienced in Internet Explorer 6. */ background-image: url(../images/big_transparent.gif); background-repeat: repeat; background-position: center center; position: absolute; z-index: 200; left: 0; /* The first cursor url is for Firefox and other browsers, the second is for Internet Explorer */ cursor: url(../images/cursors/cursor_arrow_left.cur), url(images/cursors/cursor_arrow_left.cur),w-resize; } /* Visible left hotspot */ div.scrollingHotSpotLeftVisible { background-image: url(../images/arrow_left.gif); background-color: #fff; background-repeat: no-repeat; /* Standard CSS3 opacity setting */ opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */ -moz-opacity: 0.35; /* Opacity for Internet Explorer. */ filter: alpha(opacity = 35); /* Use zoom to Trigger "hasLayout" in Internet Explorer 6 or older versions */ zoom: 1; } /* Invisible right hotspot */ div.scrollingHotSpotRight { min-width: 75px; width: 10%; height: 100%; background-image: url(../images/big_transparent.gif); background-repeat: repeat; background-position: center center; position: absolute; z-index: 200; right: 0; cursor: url(../images/cursors/cursor_arrow_right.cur), url(images/cursors/cursor_arrow_right.cur),e-resize; } /* Visible right hotspot */ div.scrollingHotSpotRightVisible { background-image: url(../images/arrow_right.gif); background-color: #fff; background-repeat: no-repeat; opacity: 0.35; filter: alpha(opacity = 35); -moz-opacity: 0.35; zoom: 1; } /* The scroll wrapper is always the same width and height as the containing element (div). Overflow is hidden because you don't want to show all of the scrollable area. */ div.scrollWrapper { position: relative; overflow: hidden; width: 100%; height: 100%; } div.scrollableArea { position: relative; width: auto; height: 100%; } #makeMeScrollable { width:100%; height: 330px; position: relative; } #makeMeScrollable div.scrollableArea * { position: relative; float: left; margin: 0; padding: 0; } http://www.smoothdivscroll.com/ //^above link to the jquery I am talking about

    Read the article

  • Change form field options dynamically (and restore previously selected options) using jQuery

    - by Martin
    I'm fairly new to both jQuery and JavaScript so can anyone please point out what I'm missing here? I have a form with multiple pairs of select fields, where the content of the second field relies on the selection of the first one. Once a value is chosen from the first one then a piece of jQuery code empties the corresponding second select options, gets new values as JSON and inserts them as new select values. All of this works with the code I've written. However if a user has chosen a second value, I'd like to restore it if possible (meaning if the new values also include the one previously selected). I tried to do this by first saving the second value and then trying to set it once the new options have been inserted. This did not work. However when trying to debug I inserted an alert() just before restoring the second value and with that in there it does work... Am I missing something very basic here? Any help would be appreciated. HTML: <select name="party-0-first" id="id_party-0-first"> <option value="" selected="selected">---------</option> <option value="1">first_value1</option> <option value="2">first_value2</option> <option value="3">first_value3</option> <option value="4">first_value4</option> </select> <select name="party-0-second" id="id_party-0-second"> <option value="" selected="selected">---------</option> <option value="1">second_value1</option> <option value="2">second_value2</option> <option value="3">second_value3</option> <option value="4">second_value4</option> </select> <select name="party-1-first" id="id_party-1-first"> ... JavaScript: $.fn.setSecond = function() { var divName = $(this).attr("name"); divName = divName.replace('-first', ''); divName = divName.replace('party-', ''); // Save the currently selected value of the "second" select box // This seems to work properly setValue = $('#id_party-' + divName + '-second').val(); // Get the new values $.getJSON("/json_opsys/", { client: $(this).val() }, function(data){ $('#id_party-' + divName + '-second').empty(); $('#id_party-' + divName + '-second').append('<option value="" selected="selected">---------</option>'); $.each(data, function(i, item){ $('#id_party-' + divName + '-second').append('<option value="' + item.pk + '">' + item.fields.name + '</option>'); }); }); // Here I try to restore the selected value // This does not work normally, however if I place a javascript alert() before // this for some reason it does work $('#id_party-' + divName + '-second').val(setValue); $(document).ready(function(){ $('[id*=first]').change(function() { $(this).setSecond(); }); });

    Read the article

  • JQuery get attr value from ajax loaded page

    - by Paolo Rossi
    In my index.php I've a ajax pager that load a content page (paginator.php). index.php <script type='text/javascript' src='js/jquery-1.11.1.min.js'></script> <script type='text/javascript' src='js/paginator.js'></script> <script type='text/javascript' src='js/functions.js'></script> <!-- Add fancyBox --> <script type="text/javascript" src="js/jquery.fancybox.pack.js?v=2.1.5"></script> <html> <div id="content"></div> paginator.js $(function() { var pageurl = 'paginator.php'; //Initialise the table at the first run $( '#content' ).load( pageurl, { pag: 1 }, function() { //animation(); }); //Page navigation click $( document ).on( 'click', 'li.goto', function() { //Get the id of clicked li var pageNum = $( this ).attr( 'id' ); $( '#content' ).load( pageurl, { pag: pageNum }, function() { //animation(); }); }); }); /* END */ paginator.php <ul><li>..etc </ul> ... ... <a id='test' vid='123'>get the id</a> <a id='test2' url='somepage.php'>open fancybox</a> I would like to take a variable of the loaded page (paginator.php) in this way but unfortunately I can not. functions.js $(function() { $('#test' ).click(function(e) { var id = $('#test').attr('vid'); alert ("vid is " + vid); }); }); /* END */ In this case popup not appear. I tried with add fancybox in my functions.js. Dialog box appear but the url attr is not taken. var url = $('#test2').attr('url'); $('#test').fancybox({ 'href' : url, 'width' : 100, 'height' : 100, 'autoScale' : false, 'transitionIn' : 'none', 'transitionOut' : 'none', 'type' : 'iframe', 'fitToView' : true, 'autoSize' : false }); In other scenarios, without having the page loaded, I can do it, but in this case the behavior is different. How could I do this? thanks EDIT my goal is to open a dialog (fancybox) taking a variable from the loaded page EDIT2 I tried in this way paginator.php <a id="test" vid="1234">click me</a> paginator.js //Initialise the table at the first run $( '#content' ).load( pageurl, { pag: 1 }, function() { hide_anim(); popup(); }); //Page navigation click $( document ).on( 'click', 'li.goto', function() { //Get the id of clicked li var pageNum = $( this ).attr( 'id' ); $( '#content' ).load( pageurl, { pag: pageNum }, function() { hide_anim(); popup(); }); }) function.js function popup() { $('#test' ).click(function(e) { e.preventDefault(); var vid = $('#test').attr('vid'); alert ("vid is " + vid); }); } But popup not appear...

    Read the article

  • jQuery - animating 'left' position of absolutely positioned div when sliding panel is revealed

    - by trickymatt
    Hello, I have a hidden panel off the left side of the screen which slides into view on the click of a 'tab' positioned on the left side of the screen. I need the panel to slide over the top of the existing page content, and I need the tab to move with it. and so both are absolutely positioned in css. Everything works fine, apart from I need the tab (and thus the tab-container) to move left with the panel when it is revealed, so it appears to be stuck to the right-hand-side of the panel. Its relatively simple when using floats, but of course this affects the layout of the existing content, hence absolute positioning. I have tried animating the left position of the panel-container (see the documented jquery function), but I cant get it to work. My HTML <div><!--sample page content--> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et </p> </div> <div id="panel" class="height"> <!--the hidden panel --> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p> </div> </div> <!--if javascript is disabled use this link--> <div id="tab-container" class="height"> <a href="#" onclick="return()"> <div id="tab"><!-- this will activate the panel. --></div> </a> </div> My jQuery $(document).ready(function(){ $("#panel, .content").hide(); //hides the panel and content from the user $('#tab').toggle(function(){ //adding a toggle function to the #tab $('#panel').stop().animate({width:"400px", opacity:0.8}, 100, //sliding the #panel to 400px // THIS NEXT FUNCTION DOES NOT WORK --> function() { $('#tab-container').animate({left:"400px"} //400px to match the panel width }); function() { $('.content').fadeIn('slow'); //slides the content into view. }); }, function(){ //when the #tab is next cliked $('.content').fadeOut('slow', function() { //fade out the content $('#panel').stop().animate({width:"0", opacity:0.1}, 500); //slide the #panel back to a width of 0 }); }); }); and this is the css #panel { position:absolute; left:0px; top:50px; background-color:#999999; height:500px; display:none;/*hide the panel if Javascript is not running*/ } #panel .content { width:290px; margin-left:30px; } #tab-container{ position:absolute; top:20px; width:50px; height:620px; background:#161616; } #tab { width:50px; height:150px; margin-top:100px; display:block; cursor:pointer; background:#DDD; } Many thanks

    Read the article

  • Using resize to getScript if above x pixels (jQuery)

    - by user1065573
    So I have an issue with this script. It basically is loading the script on any resize event. I have it working if lets say... - User has window size above 768 (getScipt() and content by .load() in that script) - Script will load (and content) - User for some reason window size goes below 768 (css hides #div) - User re-sizes again above 768, And does not load the script again! (css displays the div) Great. Works right. Now.. (for some cray reason) - User has window size below 768 (Does NOT getScript() or nothing) - User re-sizes above 768 and stops at any px (getScript and content) - User re-sizes again anything above 768 (It getScript AGAIN) I need it to only get script once. Ive used some code from here jQuery: How to detect window width on the fly? (edit - i found this, which he has the same issue of loading a script once.) Problem with function within $(window).resize - using jQuery And others i lost the links to :/ When i first found this problem I was using something like this, then i added the allcheckWidth() to solve problem. But it does not. var $window = $(window); function checkWidth() { var windowsize = $window.width(); ////// LETS GET SOME THINGS IF IS DESKTOP var $desktop_load = 0; if (windowsize >= 768) { if (!$desktop_load) { // GET DESKTOP SCRIPT TO KEEP THINGS QUICK $.getScript("js/desktop.js", function() { $desktop_load = 1; }); } else { } } ////// LETS GET SOME THINGS IF IS MOBILE if (windowsize < 768) { } } checkWidth(); function allcheckWidth () { var windowsize = $window.width(); //// IF WINDOW SIZE LOADS < 768 THEN CHANGES >= 768 LOAD ONCE var $desktop_load = 0; if (!$desktop_load) { if (windowsize < 768) { if ( $(window).width() >= 768) { $.getScript("js/desktop.js", function() { $desktop_load = 1; }); } } } } $(window).resize(allcheckWidth); Now im using something like this which makes more sense? $(function() { $(window).resize(function() { var $desktop_load = 0; //Dekstop if (window.innerWidth >= 768) { if (!$desktop_load) { // GET DESKTOP SCRIPT TO KEEP THINGS QUICK $.getScript("js/desktop.js", function() { $desktop_load + 1; }); } else { } } if (window.innerWidth < 768) { if (window.innerWidth >= 768) { if (!$desktop_load) { // GET DESKTOP SCRIPT TO KEEP THINGS QUICK $.getScript("js/desktop.js", function() { $desktop_load + 1; }); } else { } } } }) .resize(); // trigger resize event }) Ty for future response. Edit - To give an example, in desktop.js i have a gif that loads before "abc" content, that gets inserted by .load(). On resize this gif will show up and the .load() in desktop.js will fire again. So if getScript was only being called once, it should not be doing anything again in desktop.js. Confusing?

    Read the article

  • how to change php functions send result to jquery ajax

    - by OpenCode
    I have many codes for user notifications, it do many mysql works, so it needs waiting times. jquery ajax works for php files. how can i use jquery for send php result to web page? current code : <? echo db_cache("main_top_naver_cache", 300, "naver_popular('naver_popular', 4)"))?> wanted code : but it shows errors... <div id='a'> <div id='b'> <script type="text/javascript"> $("#test1").html( " <? echo htmlspecialchars(db_cache("main_top_naver_cache", 300, "naver_popular('naver_popular', 4)"))?> " ); </script> IE debuger shows error ... SCRIPT1015:... <script type="text/javascript"> $("#test1").html( " &lt;style&gt; /* http://html.nhncorp.com/uio_factory/ui_pattern/list/3 */ .section_ol3{position:relative;border:1px solid #ddd;background:#fff;font-size:12px;font-family:Tahoma, Geneva, sans-serif;line-height:normal;*zoom:1} .section_ol3 a{color:#666;text-decoration:none} .section_ol3 a:hover, .section_ol3 a:active, .section_ol3 a:focus{text-decoration:underline} .section_ol3 em{font-style:normal} .section_ol3 h2{margin:0;padding:10px 0 8px 13px;border-bottom:1px solid #ddd;font-size:12px;color:#333} .section_ol3 h2 em{color:#cf3292} .section_ol3 ol{margin:13px;padding:0;list-style:none} .section_ol3 li{position:relative;margin:0 0 10px 0;*zoom:1} .section_ol3 li:after{display:block;clear:both;content:&quot;&quot;} .section_ol3 li .ranking{display:inline-block;width:14px;height:11px;margin:0 5px 0 0;border-top:1px solid #fff;border-bottom:1px solid #d1d1d1;background:#d1d1d1;text-align:center;vertical-align:top;font:bold 10px Tahoma;color:#fff} .section_ol3 li.best .ranking{border-bottom:1px solid #6e87a5;background:#6e87a5} .section_ol3 li.best a{color:#7189a7} .section_ol3 li .num{position:absolute;top:0;right:0;font-size:11px;color:#a8a8a8;white-space:nowrap} .section_ol3 li.best .num{font-weight:bold;color:#7189a7} .section_ol3 .more{position:absolute;top:10px;right:13px;font:11px Dotum, ??;text-decoration:none !important} .section_ol3 .more span{margin:0 2px 0 0;font-weight:bold;font-size:16px;color:#d76ea9;vertical-align:middle} &lt;/style&gt; &lt;div class=&quot;section_ol3&quot;&gt; &lt;ol style='text-align:left;'&gt; &lt;li class='best'&gt;&lt;span class='ranking'&gt;1&lt;/span&gt;&lt;a href='http://search.naver.com/search.naver?where=nexearch&amp;query=%B9%AB%C7%D1%B5%B5%C0%FC&amp;sm=top_lve' onfocus='this.blur()' title='????' target=new&gt;????&lt;/a&gt;&lt;span class='num'&gt;+42&lt;/span&gt;&lt;/li&gt;&lt;li class='best'&gt;&lt;span class='ranking'&gt;2&lt;/span&gt;&lt;a href='http://search.naver.com/search.naver?where=nexearch&amp;query=%B1%E8%C0%E7%BF%AC&amp;sm=top_lve' onfocus='this.blur()' title='???' target=new&gt;???&lt;/a&gt;&lt;span class='num'&gt;+123&lt;/span&gt;&lt;/li&gt;&lt;li class='best'&gt;&lt;span class='ranking'&gt;3&lt;/span&gt;&lt;a href='http://search.naver.com/search.naver?where=nexearch&amp;query=%C0%CC%C7%CF%C0%CC&amp;sm=top_lve' onfocus='this.blur()' title='???' target=new&gt;???&lt;/a&gt;&lt;span class='num'&gt;+90&lt;/span&gt;&lt;/li&gt;&lt;li &gt;&lt;span class='ranking'&gt;4&lt;/span&gt;&lt;a href='http://search.naver.com/search.naver?where=nexearch&amp;query=%BA%D2%C8%C4%C0%C7%B8%ED%B0%EE2&amp;sm=top_lve' onfocus='this.blur()' title='?????2' target=new&gt;?????2&lt;/a&gt;&lt;span class='num'&gt;+87&lt;/span&gt;&lt;/li&gt; &lt;/ol&gt; </div> " );

    Read the article

  • Jquery, XML and Google Map

    - by EXPennD
    Hi, I'm integrating a Google Map in my website that user could add some thumbnails and details of their own house. Here's a code preview of what I want to happen. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Jquery and Google Map // var locations = {}; function load() { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(47.614495, -122.341861), 13); GDownloadUrl("markerdata.xml", function(data) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute("name"); var address = markers[i].getAttribute("address"); var type = markers[i].getAttribute("type"); var latlng = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var store = {latlng: latlng, name: name, address: address, type: type}; var latlngHash = (latlng.lat().toFixed(6) + "" + latlng.lng().toFixed(6)); latlngHash = latlngHash.replace(".","").replace(".", "").replace("-",""); if (locations[latlngHash] == null) { locations[latlngHash] = [] } locations[latlngHash].push(store); } for (var latlngHash in locations) { var stores = locations[latlngHash]; if (stores.length > 1) { map.addOverlay(createClusteredMarker(stores)); } else { map.addOverlay(createMarker(stores)); } } }); } function createMarker(stores) { var store = stores[0]; var newIcon = MapIconMaker.createMarkerIcon({width: 32, height: 32, primaryColor: "#00ff00"}); var marker = new GMarker(store.latlng, {icon: newIcon}); var html = "<b>" + store.name + "</b> <br/>" + store.address; GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); }); return marker; } function createClusteredMarker(stores) { var newIcon = MapIconMaker.createMarkerIcon({width: 44, height: 44, primaryColor: "#00ff00"}); var marker = new GMarker(stores[0].latlng, {icon: newIcon}); var html = ""; for (var i = 0; i < stores.length; i++) { html += "<b>" + stores[i].name + "</b> <br/>" + stores[i].address + "<br/>"; } GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); }); return marker; } //]]> description I want this feature to be fully interactive. If possible user can drag and drop a marker to the location on the Google map and the description field would be enabled after adding the marker so user could add details and submit it. Also here's my current situation. The reason why I want it to be done in XML is the Content Management System that I currently use for this project don't allow me to add Database and Php scripts. The only thing that I have access is I could add new HTML on the BODY section and also External Javascript on the HEAD section. Sorry about the way I write it, it sounds like demanding. Its because I'm still learning Jquery. Thanks everyone!

    Read the article

  • Jquery validation in asp.net mvc

    - by Suja
    I have a view to create a DocumentTemplate <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" % <%@ Import Namespace="HexsolveMVC.Helpers" % Create <script type="text/javascript"> $(document).ready(function() { $("#reset").click(function(event) { $("#Part").get(0).selectedIndex = 0; $("#txtDocTitle").val(""); $("#txtarDocDesc").val(""); }); }); }); </script> <div class="container"> <div class="outer"> <div class="main_content"> <div> <%=Html.BreadCrumb(Model.BreadCrumbs)%> </div> <div class="form_container"> <h1> Document Template</h1> <ul> <li> <label> <span class="mandatory">*</span>Engine model:</label> <%=Html.DropDownList("Part", (SelectList)ViewData["Part"])%> <span class="tagline">Please select the engine model <%--<a href="#">Need Help</a>--%></span> </li> <li> <label> <span class="mandatory">*</span>Document Title:</label> <input id="txtDocTitle" name="docTitle" type="text" class="formstyle" /> </li> <li> <label> Discription:</label> <textarea name="docDesc" id="txtarDocDesc" cols="45" rows="5"></textarea> </li> <li> <div class="button_panel"> <input name="button" type="submit" class="btn_create_doc_big" id="button" value="Create" /> <span class="reset_field"><a href="#" id="reset">Reset the form</a></span><span class="mandatory_tag">[ <span class="mandatory">*</span> Mandatory fields ]</span> <div class="clear"> </div> </div> <span class="tagline">By clicking on '<span class="tagline_highlight">Create</span>' button your document will be created.<br /> And after you can add new instructions and subsections easily.</span></li> </ul> <div> <h2> Example of how to work a document </h2> <img alt="" src="../../html/images/diagram.jpg" width="738" height="172" /></div> </div> </div> <div class="clear"> </div> </div> </div> I need to validate the txtDocTitle since its a required field. How can i do this using jQuery. I cannot use Model validation coz this same model is used for other views also and it have properties from other tables. I need something to do with jQuery.

    Read the article

  • jquery accordion - keeps hiding parent element?

    - by PopRocks4344
    Well, I fixed my original question by including after the closing tags, but now, those links won't open? So, basically, in the html below, I'm trying so that only the services section slides open, but I want the h3 tags to open those links... <div id="sp-accordion"> <h3><a href="/?page_id=3">Home</a></h3><div></div> <h3><a href="/?page_id=2">About Us</a></h3><div></div> <h3><a href="#"> Services</a></h3> <div> <p><a href="/?page_id=16">S1</a></p> <p><a href="/?page_id=14">S2</a></p> <p><a href="/?page_id=20">S3</a></p> </div> <h3><a href="/?page_id=9">Contact Us</a></h3><div></div> <h3><a href="/?page_id=5">Tips</a></h3><div></div> <h3><a href="/?page_id=108">Jobs</a></h3><div></div> <h3><a href="/?page_id=131">Newsletter</a></h3><div></div> </div> The accordion works, insomuch that when you click on the h3 tag, the container slides open, however, when it slides open, it hides the h3 before it. So, in the html below, when I click on "Services" the div beneath it slides open, but the About Us h3 disappears... This is the html: <div id="sp-accordion"> <h3><a href="/?page_id=3">Home</a></h3> <h3><a href="/?page_id=2">About Us</a></h3> <h3><a href="#"> Services</a></h3> <div> <p><a href="/?page_id=16">S1</a></p> <p><a href="/?page_id=14">S2</a></p> <p><a href="/?page_id=20">S3</a></p> </div> <h3><a href="/?page_id=9">Contact Us</a></h3> <h3><a href="/?page_id=5">Tips</a></h3> <h3><a href="/?page_id=108">Jobs</a></h3> <h3><a href="/?page_id=131">Newsletter</a></h3> </div> I'm using jquery ui, so the jquery is just this: $(document).ready(function() { $("#sp-accordion").accordion({autoHeight:false}); });

    Read the article

  • jQuery code not working in Google Chrome...

    - by Jonathan
    Hi, I have writen a simple jQuery code to control ajax tabs navigation.. Its working in good on FireFox but in Chrome it working in one page but not in the home page I don't know why... Its really simple code just a lot of animations and callbacks and stuff like that.. here's the code: jQuery.fn.tabs = function({movieID, movieTitle}) { var tabsWrap = '#movie_details_wrap'; var tabsContent = '#tab_content'; var firstTab = '#tab_detalles'; var postPHP = 'index.php?controlador=pelicula'; //When page loads... first tab actions $('ul.tabs_nav a:first').addClass('active'); //Activate first tab nav $.get(postPHP, {"activeTab": firstTab, "movieID": movieID}, function(response){ $(tabsContent).html(response); // insert response into the faded out div $(tabsWrap).animate({ // animate the wrap div using the new container div height height: $(tabsContent).height() + "px" }, function() { $(tabsContent).fadeIn(); // fade in the div with all the info }); }); //On Click Event $('ul.tabs_nav li').click(function() { $('ul.tabs_nav a').removeClass('active'); //Remove any 'active' class $(this).find('a').addClass('active'); //Add 'active' class to selected tab var activeTab = $(this).find('a').attr('href'); //Find the href attribute value to identify the active tab + content var orgHeight = $(tabsContent).height() + 'px'; // get original height $(tabsWrap).css('height', orgHeight); // set height with css to freeze the wrap div when we hide the inner div $(tabsContent).fadeOut(200, function() { // fade out the inner div // send data by ajax (post) $.get(postPHP, {"activeTab": activeTab, "movieID": movieID , "movieTitle": movieTitle}, function(response){ $(tabsContent).html(response); // insert response into the faded out div $(tabsWrap).animate({ // animate the wrap div using the new container div height height: $(tabsContent).height() + "px" }, function() { $(tabsContent).fadeIn(); // fade in the div with all the info }); }); }); return false; }); }; Here's the HTML: <script type="text/javascript"> $(document).ready(function(){ $('.tabs_nav').tabs({movieID:'135353', movieTitle: 'Some Title'}); }); </script> <!--Navigation--> <ul id="details_nav" class="tabs_nav"> <li><a href="#tab_detalles">Detalles</a></li> <li><a href="#tab_criticas">Criticas</a></li> <li><a href="#tab_posters">Posters</a></li> <li><a href="#tab_trailers">Trailers</a></li> </ul> <div class="border_wrap"> <div id="movie_details_wrap"> <div id="tab_content"> <!--Tabs content here--> </div> </div> </div>

    Read the article

  • Jquery only works the first time

    - by Tripping
    I am trying to teach myself general web development skills. I am trying to create a image upload with preview functionality using HTML5 FileAPI. Till now, I have created a file input which shows the preview of image when selected. Html mark up is below: <div> <!-- Photos --> <fieldset> <legend>PropertyPhotos</legend> <div class="upload-box" id="upload-box-1"> <div class="preview-box"> <img alt="Field for image cutting" id="preview_1" src="@Url.Content("~/Content/empty.png")" /> </div> <div> @Html.FileFor(model => model.File1) @Html.ValidationMessageFor(model => model.File1) </div> </div> <div class="upload-box" id="upload-box-2"> <div class="preview-box"> <img alt="Field for image cutting" id="preview_2" src="@Url.Content("~/Content/empty.png")" /> </div> <div> @Html.FileFor(model => model.File2) @Html.ValidationMessageFor(model => model.File2) </div> </div> <div class="upload-box" id="upload-box-3"> <div class="preview-box"> <img alt="Field for image cutting" id="preview_3" src="@Url.Content("~/Content/empty.png")" /> </div> <div> @Html.FileFor(model => model.File3) @Html.ValidationMessageFor(model => model.File3) </div> </div> </fieldset> </div> The Jquery to show preview and then display the next "upload-box" is as follows: <script type="text/javascript"> $(document).ready(function () { // show first box $("#upload-box-1").fadeIn(); //Get current & next step index var stepNum = $('div.upload-box').attr('id').replace(/[^\d]/g, ''); var nextNum = parseInt(stepNum)+1; //Get the preview image tag var preview = $('#preview_'+stepNum); //Load preview on file tag change and display second upload-box $('#File'+stepNum).change(function (evt) { var f = evt.target.files[0]; var reader = new FileReader(); if (!f.type.match('image.*')) { alert("The selected file does not appear to be an image."); return; } reader.onload = function (e) { preview.attr('src', e.target.result); }; reader.readAsDataURL(f); //Show next upload-box $("#upload-box-" + nextNum).fadeIn(); }); }); </script> However, this code only first for the first time ... i.e. on selecting a file - It shows a preview and then shows the next "upload-box". However, when I browse using the second file it doesn't show any preview. From what I have ready, I need to close the Jquery function so that it can be initialised again but I am not sure how to do that. Any help will be grateful.

    Read the article

  • posting array of text fields using jquery and ajax

    - by tabia
    i dont want to use serialize() function please help me with this. I am a beginner html <input type='button' value='Add Tier Flavor' id='Add'> <input type='button' value='Remove Tier Flavor' id='Remove'> <div id='batch'> <div id="BatchDiv1"> <h4>Batch #1 :</h4> <label>Flavor<input class="textbox" type='text' id="fl1" name="fl[]" value=""/></label></br> <label>Filling<input class="textbox" type='text' id="fi1" name="fi[]" value="" /></label></br> <label>Frosting<input class="textbox" type='text' id="fr1" name="fr[]" value=""/></label></br> </div> </div> <br> </div> this is a dynamically added fields using javascript the code is: javascript <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var counter = 2; $("#Add").click(function () { if(counter>5){ alert("Only 5 Tiers allow"); return false; } var newBatchBoxDiv = $(document.createElement('div')).attr("id", 'BatchDiv' + counter); newBatchBoxDiv.html('<h4>Batch #'+ counter + ' : </h4>' + '<label> Flavor<input type="text" name="fl[]" id="fl' + counter + '" value=""></label><br>'+ '<label> Filling<input type="text" name="fi[]" id="fi' + counter + '" value=""></label><br>'+ '<label> Frosting<input type="text" name="fr[]" id="fr' + counter + '" value=""></label><br>' ); newBatchBoxDiv.appendTo("#batch"); counter++; }); $("#Remove").click(function () { if(counter==1){ alert("No more tier to remove"); return false; } counter--; $("#BatchDiv" + counter).remove(); }); }); </script> i am trying to post the values in an array to post it onto next .php page i am using this var user_cupfl = $('input[name^="fl"]').serialize(); var user_cupfi = $('input[name^="fi"]').serialize(); var user_cupfr = $('input[name^="fr"]').serialize(); serialize is not passing the values. :( on second page i am trying to mail it using $message .= "<tr><td><strong>Cake Flavors(according to batches):</strong> </td><td><pre>" .implode("\n", $user_cupfl). "</pre></td></tr>"; $message .= "<tr><td><strong>Filling type (Inside the cake):</strong> </td><td><pre>" .implode("\n", $user_cupfi). "</pre></td></tr>"; $message .= "<tr><td><strong>Frosting type (top of the cake):</strong> </td><td><pre>" .implode("\n", $user_cupfr). "</pre></td></tr>"; i m posting array like this $user_cupfl=filter_var($_POST["userCupfl"], FILTER_SANITIZE_STRING); $user_cupfi=filter_var($_POST["userCupfi"], FILTER_SANITIZE_STRING); $user_cupfr=filter_var($_POST["userCupfr"], FILTER_SANITIZE_STRING); your replies will be highly appreciated

    Read the article

  • Replacing ASP.NET Forms Authentication with WIF Session Authentication (for the better)

    - by Your DisplayName here!
    ASP.NET Forms Authentication and WIF Session Authentication (which has *nothing* to do with ASP.NET sessions) are very similar. Both inspect incoming requests for a special cookie that contains identity information, if that cookie is present it gets validated and if that is successful, the identity information is made available to the application via HttpContext.User/Thread.CurrentPrincipal. The main difference between the two is the identity to cookie serialization engine that sits below. Whereas ForsmAuth can only store the name of the user and an additional UserData string. It is limited to a single cookie and hardcoded to protection via the machine key. WIF session authentication in turn has these additional features: Can serialize a complete ClaimsPrincipal (including claims) to the cookie(s). Has a cookie overflow mechanism when data gets too big. In total it can create up to 8 cookies (á 4 KB) per domain (not that I would recommend round tripping that much data). Supports server side caching (which is an extensible mechanism). Has an extensible mechanism for protection (DPAPI by default, RSA as an option for web farms, and machine key based protection is coming in .NET 4.5) So in other words – session authentication is the superior technology, and if done cleverly enough you can replace FormsAuth without any changes to your application code. The only features missing is the redirect mechanism to a login page and an easy to use API to set authentication cookies. But that’s easy to add ;) FormsSessionAuthenticationModule This module is a sub class of the standard WIF session module, adding the following features: Handling EndRequest to do the redirect on 401s to the login page configured for FormsAuth. Reads the FormsAuth cookie name, cookie domain, timeout and require SSL settings to configure the module accordingly. Implements sliding expiration if configured for FormsAuth. It also uses the same algorithm as FormsAuth to calculate when the cookie needs renewal. Implements caching of the principal on the server side (aka session mode) if configured in an AppSetting. Supports claims transformation via a ClaimsAuthenticationManager. As you can see, the whole module is designed to easily replace the FormsAuth mechanism. Simply set the authentication mode to None and register the module. In the spirit of the FormsAuthentication class, there is also now a SessionAuthentication class with the same methods and signatures (e.g. SetAuthCookie and SignOut). The rest of your application code should not be affected. In addition the session module looks for a HttpContext item called “NoRedirect”. If that exists, the redirect to the login page will *not* happen, instead the 401 is passed back to the client. Very useful if you are implementing services or web APIs where you want the actual status code to be preserved. A corresponding UnauthorizedResult is provided that gives you easy access to the context item. The download contains a sample app, the module and an inspector for session cookies and tokens. Let’s hope that in .NET 4.5 such a module comes out of the box. HTH

    Read the article

  • Where Have All the Ugly Forms Gone? Users and ADF Took Care Of It

    - by ultan o'broin
    Sometimes I hear that our application demos are a bit too "cutsey" and that we never talk about with any user roles that have lots of data entry as a requirement. Some (no names) consider those old clunker forms, with the myriad rows of fields, to be super-productive for data clerks. We do have such roles covered in Oracle Fusion Applications for sure. But consider what is really the issue here: productivity. Check out how the Oracle Fusion Financials Applications User Experience team went about designing for productivity when receiving and entering invoice data, for example. See how Fusion Financials caters so well for input and control of data? Central to all this is knowing the users and how they work: what tasks do they need to perform, and when. Read more about Fusion Financials productivity in the white paper, Get It Done Fast, Get It Done Right: The Oracle Fusion Financials User Experience. Now and then, I see forms that weren't designed for end user activity at all. Instead, they were designed by developers or by the IT department around the database schema. Forms with literally dozens of fields on the same page, sometimes. Forms that give the impression there was only task involved, when there may have been several. At times, completing one of these huge forms accurately became so tedious that, under pressure, it made more sense for the user to complete it quickly as possible and then let somebody else check it for accuracy and fill in the gaps from data emailed along in spreadsheet form. Data accuracy is critical in our business. Not good. Not efficient. Not productive. So here are a few basics on forms design for data entry-type user roles. A great place for developers to start exploring what is possible with forms layout is the Rich Client User Experience (RCUX) guidance on Form Layout, using ADF components. User-Centered Forms Design Considerations The starting point--something you must always keep in mind with your own design--is design for the end user. Find a representative end user, and keep that user engaged throughout the design, deployment, and test process. Consider these points in user testing those forms: Are there automated or technical solutions to entering the data that avoid manual input in the first place? For example, imports, uploads, OCR, whatever. Some day we will be able to tell Siri to do it, but leave that for now. Design your form to reflect the task involved (i.e., the business process) and not the database schema. On the form, group like fields together, logically. Eliminate duplicate data entry or prepopulate from previous data entry. Allow users to complete fields in the order they wish (i.e., no interdependency). Allow for tabbing between fields (keyboard is faster than mouse), so know how the browser supports this (see that RCUX guideline). Allow for final validation at the page level not at field-level entry. Way better for heads-down users. For example, ADF messages allow you to see a list of all validation errors on a page on a final submit or navigation action and to easily navigate to the point of error. Better still, be error tolerant. Allow users to enter data in formats they comfortable with. Bind any relevant user preference setting to the input format allowed (for example, the locale date format). Explore what data entry conversion can do for you automatically too (see the ADF converter demos, convenience patterns can also be written). Only ask for data input when it's needed. Get rid of, or hide optional fields. Cut down on the number of mandatory fields, and mark them clearly (use a *). Clearly label the fields in plain language. I am sure you may have a few more tips on forms design for data entry users. Remember the user before finding the comments.

    Read the article

  • How to attach to the jQuery Autocomplete plugin's mouse events?

    - by Tommy B
    My problem is this: I need to update some text in a div with the value of what the mouse pointer is hovering over in the autocomplete drop down list. Can it be done easily, or do I have to make fundamental changes to the Autocomplete plugin? I am using the jQuery Autocomplete plugin version 1.1 by Jörn Zaefferer. Any and all help will be greatly appreciated!

    Read the article

  • What's a good jQuery ligthbox plugin that cycles through images? (like a carousel)

    - by Greg
    I'm looking for a jQuery lightbox plugin that has the ability to, with it's next and previous buttons, cycle through images repeatedly. Like a carousel effect. I've been using jQuery Lightbox Plugin (balupton edition) but that doesn't have the option to continue cycling through images. It reaches the last image in the array and then disables the 'next' button. So to save me some time coding, what are some plugins you can recommend?

    Read the article

  • Detecting HTML5/CSS3 Features using Modernizr

    - by dwahlin
    HTML5, CSS3, and related technologies such as canvas and web sockets bring a lot of useful new features to the table that can take Web applications to the next level. These new technologies allow applications to be built using only HTML, CSS, and JavaScript allowing them to be viewed on a variety of form factors including tablets and phones. Although HTML5 features offer a lot of promise, it’s not realistic to develop applications using the latest technologies without worrying about supporting older browsers in the process. If history has taught us anything it’s that old browsers stick around for years and years which means developers have to deal with backward compatibility issues. This is especially true when deploying applications to the Internet that target the general public. This begs the question, “How do you move forward with HTML5 and CSS3 technologies while gracefully handling unsupported features in older browsers?” Although you can write code by hand to detect different HTML5 and CSS3 features, it’s not always straightforward. For example, to check for canvas support you need to write code similar to the following:   <script> window.onload = function () { if (canvasSupported()) { alert('canvas supported'); } }; function canvasSupported() { var canvas = document.createElement('canvas'); return (canvas.getContext && canvas.getContext('2d')); } </script> If you want to check for local storage support the following check can be made. It’s more involved than it should be due to a bug in older versions of Firefox. <script> window.onload = function () { if (localStorageSupported()) { alert('local storage supported'); } }; function localStorageSupported() { try { return ('localStorage' in window && window['localStorage'] != null); } catch(e) {} return false; } </script> Looking through the previous examples you can see that there’s more than meets the eye when it comes to checking browsers for HTML5 and CSS3 features. It takes a lot of work to test every possible scenario and every version of a given browser. Fortunately, you don’t have to resort to writing custom code to test what HTML5/CSS3 features a given browser supports. By using a script library called Modernizr you can add checks for different HTML5/CSS3 features into your pages with a minimal amount of code on your part. Let’s take a look at some of the key features Modernizr offers.   Getting Started with Modernizr The first time I heard the name “Modernizr” I thought it “modernized” older browsers by added missing functionality. In reality, Modernizr doesn’t actually handle adding missing features or “modernizing” older browsers. The Modernizr website states, “The name Modernizr actually stems from the goal of modernizing our development practices (and ourselves)”. Because it relies on feature detection rather than browser sniffing (a common technique used in the past – that never worked that great), Modernizr definitely provides a more modern way to test features that a browser supports and can even handle loading additional scripts called shims or polyfills that fill in holes that older browsers may have. It’s a great tool to have in your arsenal if you’re a web developer. Modernizr is available at http://modernizr.com. Two different types of scripts are available including a development script and custom production script. To generate a production script, the site provides a custom script generation tool rather than providing a single script that has everything under the sun for HTML5/CSS3 feature detection. Using the script generation tool you can pick the specific test functionality that you need and ignore everything that you don’t need. That way the script is kept as small as possible. An example of the custom script download screen is shown next. Notice that specific CSS3, HTML5, and related feature tests can be selected. Once you’ve downloaded your custom script you can add it into your web page using the standard <script> element and you’re ready to start using Modernizr. <script src="Scripts/Modernizr.js" type="text/javascript"></script>   Modernizr and the HTML Element Once you’ve add a script reference to Modernizr in a page it’ll go to work for you immediately. In fact, by adding the script several different CSS classes will be added to the page’s <html> element at runtime. These classes define what features the browser supports and what features it doesn’t support. Features that aren’t supported get a class name of “no-FeatureName”, for example “no-flexbox”. Features that are supported get a CSS class name based on the feature such as “canvas” or “websockets”. An example of classes added when running a page in Chrome is shown next:   <html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"> Here’s an example of what the <html> element looks like at runtime with Internet Explorer 9:   <html class=" js no-flexbox canvas canvastext no-webgl no-touch geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow no-textshadow opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions fontface generatedcontent video audio localstorage sessionstorage no-webworkers no-applicationcache svg inlinesvg smil svgclippaths">   When using Modernizr it’s a common practice to define an <html> element in your page with a no-js class added as shown next:   <html class="no-js">   You’ll see starter projects such as HTML5 Boilerplate (http://html5boilerplate.com) or Initializr (http://initializr.com) follow this approach (see my previous post for more information on HTML5 Boilerplate). By adding the no-js class it’s easy to tell if a browser has JavaScript enabled or not. If JavaScript is disabled then no-js will stay on the <html> element. If JavaScript is enabled, no-js will be removed by Modernizr and a js class will be added along with other classes that define supported/unsupported features. Working with HTML5 and CSS3 Features You can use the CSS classes added to the <html> element directly in your CSS files to determine what style properties to use based upon the features supported by a given browser. For example, the following CSS can be used to render a box shadow for browsers that support that feature and a simple border for browsers that don’t support the feature: .boxshadow #MyContainer { border: none; -webkit-box-shadow: #666 1px 1px 1px; -moz-box-shadow: #666 1px 1px 1px; } .no-boxshadow #MyContainer { border: 2px solid black; }   If a browser supports box-shadows the boxshadow CSS class will be added to the <html> element by Modernizr. It can then be associated with a given element. This example associates the boxshadow class with a div with an id of MyContainer. If the browser doesn’t support box shadows then the no-boxshadow class will be added to the <html> element and it can be used to render a standard border around the div. This provides a great way to leverage new CSS3 features in supported browsers while providing a graceful fallback for older browsers. In addition to using the CSS classes that Modernizr provides on the <html> element, you also use a global Modernizr object that’s created. This object exposes different properties that can be used to detect the availability of specific HTML5 or CSS3 features. For example, the following code can be used to detect canvas and local storage support. You can see that the code is much simpler than the code shown at the beginning of this post. It also has the added benefit of being tested by a large community of web developers around the world running a variety of browsers.   $(document).ready(function () { if (Modernizr.canvas) { //Add canvas code } if (Modernizr.localstorage) { //Add local storage code } }); The global Modernizr object can also be used to test for the presence of CSS3 features. The following code shows how to test support for border-radius and CSS transforms:   $(document).ready(function () { if (Modernizr.borderradius) { $('#MyDiv').addClass('borderRadiusStyle'); } if (Modernizr.csstransforms) { $('#MyDiv').addClass('transformsStyle'); } });   Several other CSS3 feature tests can be performed such as support for opacity, rgba, text-shadow, CSS animations, CSS transitions, multiple backgrounds, and more. A complete list of supported HTML5 and CSS3 tests that Modernizr supports can be found at http://www.modernizr.com/docs.   Loading Scripts using Modernizr In cases where a browser doesn’t support a specific feature you can either provide a graceful fallback or load a shim/polyfill script to fill in missing functionality where appropriate (more information about shims/polyfills can be found at https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills). Modernizr has a built-in script loader that can be used to test for a feature and then load a script if the feature isn’t available. The script loader is built-into Modernizr and is also available as a standalone yepnope script (http://yepnopejs.com). It’s extremely easy to get started using the script loader and it can really simplify the process of loading scripts based on the availability of a particular browser feature. To load scripts dynamically you can use Modernizr’s load() function which accepts properties defining the feature to test (test property), the script to load if the test succeeds (yep property), the script to load if the test fails (nope property), and a script to load regardless of if the test succeeds or fails (both property). An example of using load() with these properties is show next: Modernizr.load({ test: Modernizr.canvas, yep: 'html5CanvasAvailable.js’, nope: 'excanvas.js’, both: 'myCustomScript.js' }); In this example Modernizr is used to not only load scripts but also to test for the presence of the canvas feature. If the target browser supports the HTML5 canvas then the html5CanvasAvailable.js script will be loaded along with the myCustomScript.js script (use of the yep property in this example is a bit contrived – it was added simply to demonstrate how the property can be used in the load() function). Otherwise, a polyfill script named excanvas.js will be loaded to add missing canvas functionality for Internet Explorer versions prior to 9. Once excanvas.js is loaded the myCustomScript.js script will be loaded. Because Modernizr handles loading scripts, you can also use it in creative ways. For example, you can use it to load local scripts when a 3rd party Content Delivery Network (CDN) such as one provided by Google or Microsoft is unavailable for whatever reason. The Modernizr documentation provides the following example that demonstrates the process for providing a local fallback for jQuery when a CDN is down:   Modernizr.load([ { load: '//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js', complete: function () { if (!window.jQuery) { Modernizr.load('js/libs/jquery-1.6.4.min.js'); } } }, { // This will wait for the fallback to load and // execute if it needs to. load: 'needs-jQuery.js' } ]); This code attempts to load jQuery from the Google CDN first. Once the script is downloaded (or if it fails) the function associated with complete will be called. The function checks to make sure that the jQuery object is available and if it’s not Modernizr is used to load a local jQuery script. After all of that occurs a script named needs-jQuery.js will be loaded. Conclusion If you’re building applications that use some of the latest and greatest features available in HTML5 and CSS3 then Modernizr is an essential tool. By using it you can reduce the amount of custom code required to test for browser features and provide graceful fallbacks or even load shim/polyfill scripts for older browsers to help fill in missing functionality. 

    Read the article

< Previous Page | 231 232 233 234 235 236 237 238 239 240 241 242  | Next Page >