jquery chaining - Page 250

jQuery center multiple dynamic images in different sized containers

- by JVK Design

So I've found similar questions but none that answer all the questions I have and I know there must be a simple jQuery answer to this. I've got multiple images that are being dynamically placed in their own containing div that have overflow:hidden, they need to fill their containing divs and be centered(horizontally and vertically) also. The containing divs will be different sizes as well. So in short: multiple different sized images fill and center in containing div. containing divs will be different sizes. will be used multiple times on a page. Hopefully this image helps explain what I'm after. Click here to view the image. HTML I'm using but can be changed <div class="imageHolder"> <div class="first SlideImage"> <img src="..." alt="..."/> </div> <div class="second SlideImage"> <img src="..." alt="..."/> </div> <div class="third SlideImage"> <img src="..." alt="..."/> </div> </div> And the CSS .imageHandler{ float:left; width:764px; height:70px; margin:1px 0px 0px; } .imageHolder .SlideImage{ float:left; position:relative; overflow:hidden; } .imageHolder .SlideImage img{ position:absolute; } .imageHolder .first.SlideImage{ width:381px; height:339px; margin-right:1px; } .imageHolder .second.SlideImage{margin-bottom:1px;} .imageHolder .second.SlideImage, .imageHolder .third.SlideImage { width: 382px; height: 169px; } Ask me anything if this doesn't make sense, thanks in advance

Read the article

Inserting THEAD element into embedded HTML using jQuery

- by robalot

I'm trying to use jQuery to insert HTML into a table element. I've been messing variations of the selector (below) with no luck. Can someone help me? My Selector: $j('#ctl00_body_gridData_dom').children('table:first').append("<thead><tr><td colspan='6'> </td><td align='center' colspan='7'>EM SPECS</td><td align='center' colspan='7'>FISH</td><td colspan='11'> </td></tr></thead>"); Here's what I am trying to do... I want to insert this: <thead> <tr> <td colspan="6">   </td> <td align="center" colspan="7"> EM SPECS </td> <td align="center" colspan="7"> FISH </td> <td colspan="11">   </td> </tr> </thead> The sample below is what I want the end result to look like... So It Looks Like This: Jquery Event Pool <table id="ctl00_body_gridData" style="width: 2000px; -moz-user-select: none;" border="1" cellpadding="0" cellspacing="0"> <tbody> <tr> <td id="ctl00_body_gridData_dom" class="GridData" style="vertical-align: top; height: 245px;" valign="top"> <table style="width: 100%;" border="0" cellpadding="0" cellspacing="0"> <thead> <tr> <td colspan="6">   </td> <td align="center" colspan="7"> EM SPECS </td> <td align="center" colspan="7"> FISH </td> <td colspan="11">   </td> </tr> </thead> <tbody> <tr id="ctl00_body_gridData_top_head" class="headerlineGrid"> <td width="16"> <div style="width: 16px;"></div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,4,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,4,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,0,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,4,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,4,0)" style="width: 89px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 89px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center"> Work<br>Package</td> </tr> </tbody> </table> </div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,6,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,6,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,1,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,6,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,6,0)" style="width: 62px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 62px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center"> Work<br>Order</td> </tr> </tbody> </table> </div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,9,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,9,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,2,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,9,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,9,0)" style="width: 66px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 66px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center"> FCR<br>Group</td> </tr> </tbody> </table> </div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,12,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,12,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,3,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,12,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,12,0)" style="width: 105px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 105px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center">Contractor</td> </tr> </tbody> </table> </div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,15,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,15,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,4,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,15,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,15,0)" style="width: 159px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 159px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center"> Capital/Expense<br>Group</td> </tr> </tbody> </table> </div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,19,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,19,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,5,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,19,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,19,0)" style="width: 99px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 99px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center">Cost Type</td> </tr> </tbody> </table> </div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,20,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,20,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,6,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,20,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,20,0)" style="width: 81px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 81px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center"> Commit<br>Dollars</td> </tr> </tbody> </table> </div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,21,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,21,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,7,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,21,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,21,0)" style="width: 81px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 81px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center"> Commit<br>Hours</td> </tr> </tbody> </table> </div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,22,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,22,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,8,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,22,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,22,0)" style="width: 86px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 86px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center"> Commit<br>Quantity</td> </tr> </tbody> </table> </div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,23,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,23,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,9,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,23,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,23,0)" style="width: 76px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 76px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center"> Control<br>Budget</td> </tr> </tbody> </table> </div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,24,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,24,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,10,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,24,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,24,0)" style="width: 46px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 46px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center">FTC</td> </tr> </tbody> </table> </div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,25,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,25,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,11,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,25,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,25,0)" style="width: 88px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 88px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center"> Total<br>Forecast</td> </tr> </tbody> </table> </div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,26,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,26,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,12,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,26,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,26,0)" style="width: 50px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 50px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center"> Ctr<br>COB</td> </tr> </tbody> </table> </div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,27,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,27,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,13,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,27,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,27,0)" style="width: 49px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 49px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center"> Ctr<br>CCB</td> </tr> </tbody> </table> </div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,28,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,28,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,14,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,28,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,28,0)" style="width: 81px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 81px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center"> Ctr<br> Commit<br>$</td> </tr> </tbody> </table> </div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,29,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,29,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,15,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,29,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,29,0)" style="width: 81px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 81px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center"> Ctr<br> Commit<br>Hours</td> </tr> </tbody> </table> </div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,30,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,30,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,16,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,30,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,30,0)" style="width: 86px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 86px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center"> Ctr<br> Commit<br>Quantity</td> </tr> </tbody> </table> </div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,31,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,31,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,17,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,31,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,31,0)" style="width: 95px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 95px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center"> Ctr<br>% Compl.</td> </tr> </tbody> </table> </div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,32,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,32,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,18,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,32,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,32,0)" style="width: 105px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 105px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center"> Contractor<br>CFTC</td> </tr> </tbody> </table> </div> </td> </tr> <tr> <td id="ctl00_body_gridData_expcolgrp_0" width="16" align="center"></td> <td class="GroupHeading" colspan="20"> FCR<br>Group: Engineering</td> </tr> <tr> <td id="ctl00_body_gridData_expcolgrp_1" width="16" align="center"></td> <td class="GroupHeading" colspan="20"> FCR<br>Group: Pipe</td> </tr> <tr> <td id="ctl00_body_gridData_expcolgrp_2" width="16" align="center"></td> <td class="GroupHeading" colspan="20"> FCR<br>Group: Concrete</td> </tr> <tr> <td id="ctl00_body_gridData_expcolgrp_3" width="16" align="center"></td> <td class="GroupHeading" colspan="20"> FCR<br>Group: Insulation</td> </tr> <tr> <td id="ctl00_body_gridData_expcolgrp_4" width="16" align="center"></td> <td class="GroupHeading" colspan="20"> FCR<br>Group: Buildings</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </body> </html>

Read the article

jquery ui autocomplete positioning wrong

- by mattRo55

using jquery ui 1.8 trying autocomplete Everything works apart from that the ui-menu isn't positioned under my input element, but rather in the top left corner. Has anyone come across this problem? Here's my html: <div id="search"> <div id="searchFormWrapper"> <form method="post" name="searchForm" id="searchForm" action="/searchresults"> <label for="searchPhrase" id="searchFor"> Search for</label> <input name="searchPhrase" id="searchPhrase" type="text" /> <label for="searchScope" id="searchIn"> in</label> <select name="searchScope" id="searchScope"> <option value="">All Shops</option> ... </select> <input type="image" name="submitSearch" id="submitSearch" src="/images/buttons/search.gif" alt="Search ..." /> </form> <br class="clear" /> </div> </div> and here's my css: #search { width:100%; margin:0; padding:0; text-align:center; height:36px; line-height:36px; background:#666 url(/images/interface/info_bar_bg.gif) repeat-x top left; overflow:hidden; font-size:12px; } #searchFormWrapper { width:520px; height:36px; overflow:hidden; margin:auto; padding:0; } label#searchFor { display:block; float:left; width:80px; padding:0 5px 0 0; margin:0 0 0 0; text-align:right; } label#searchIn { display:block; float:left; width:20px; padding:0 5px 0 0; margin:0 0 0 0; text-align:right; } #searchPhrase { display:block; float:left; width:120px; margin:7px 0 0 0; padding:0; } #searchScope { display:block; float:left; width:120px; margin:7px 0 0 0; padding:0; } #submitSearch { display:block; float:left; margin:7px 0 0 10px; padding:0; } and here's my javascript: $(document).ready(function() { $("#searchPhrase").autocomplete( { source: "/search?json", minLength: 2 }); });

Read the article

jQuery DatePicker - 'fake' click on page load

- by Danny

Hey! I've got a quick question about the jQuery UI DatePicker. When I load the page, defaultDate: 0 will work fine with selecting the current day's date. I would like to create a 'fake' click on the date so it will execute my JavaScript function and retrieve information from the database. I tried calling the function when the page loads but that doesn't work. $(document).ready(function(){ $("#datepicker").datepicker({ gotoCurrent: false, onSelect: function(date, inst) { ajaxFunction(date); }, dateFormat: 'dd-mm-yy', defaultDate: 0, changeMonth: true, changeYear: true }); }); //Browser Support Code function ajaxFunction(date){ var ajaxRequest; // The variable that makes Ajax possible! try{ // Opera 8.0+, Firefox, Safari ajaxRequest = new XMLHttpRequest(); } catch (e){ // Internet Explorer Browsers try{ ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ // Something went wrong alert("Your browser broke!"); return false; } } } // Create a function that will receive data sent from the server ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){ var ajaxDisplay = document.getElementById('ajaxDiv'); ajaxDisplay.innerHTML = ajaxRequest.responseText; } } var queryString = "?date=" + date; ajaxRequest.open("GET", "getDiary.php" + queryString, true); ajaxRequest.send(null); } function ajaxAdd(){ var ajaxRequest; // The variable that makes Ajax possible! try{ // Opera 8.0+, Firefox, Safari ajaxRequest = new XMLHttpRequest(); } catch (e){ // Internet Explorer Browsers try{ ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ // Something went wrong alert("Your browser broke!"); return false; } } } var day1 = $("#datepicker").datepicker('getDate').getDate(); var day2 = (day1 < 10) ? '0' + day1 : day1; var month1 = $("#datepicker").datepicker('getDate').getMonth() + 1; var month2 = (month1 < 10) ? '0' + month1 : month1; var year1 = $("#datepicker").datepicker('getDate').getFullYear(); var year2 = (year1 < 1000) ? year1 + 1900 : year1; var fullDate = day2 + "-" + month2 + "-" + year2; var queryString = "?breakfast=" + diary1.breakfast.value; queryString = queryString + "&lunch=" + diary1.lunch.value; queryString = queryString + "&dinner=" + diary1.dinner.value; queryString = queryString + "&date=" + fullDate; ajaxRequest.open("GET", "addDiary.php" + queryString, true); ajaxRequest.send(null); alert("Added value to database!"); diary1.breakfast.value = ""; diary1.lunch.value = ""; diary1.dinner.value = ""; ajaxFunction(fullDate); } I have pasted my DatePicker class, and the two functions that are used (one to retrieve information from the database, and one to store). Basically I want to mirror the onSelect: function on the DatePicker, but when the page first loads. Thanks!

Read the article

Jquery fadeOut looking different in FF than in Chrome/Safari

- by StealthRT

Hey all, i have a page that when a user desides to delete a company, it fades out using the jquery fadeOut() command. This works great and does as it should in FireFox but for some reason it doesn't do the same in Chrome/Safari browsers. The problem is that i have a png image overlay on top of the company logo image that also fades out with the company logo. But if there are more than one company logo on the page, it moves the others in the place where the one got deleted. Like i said, it works fine (and as it should) in Firefox and even IE (SHOCK!) but not in Chrome or Safari. This is the code i use to delete (fade out) the section: $('#moreInfoM' + theNum).fadeOut("slow"); $('#moreInfo' + theNum).fadeOut("slow"); $('#liNum' + theNum).fadeOut("slow"); Where moreInfoM, moreInfo & liNum are all within the code for each logo image. TheNum is just a unique number for each logo just for reference. And the ASP code: For iLoop = LBound(compNames) to UBound(compNames) theWidth = (iwidth / 2) ImgDimension(Server.MapPath("img/company/" & compNames(iLoop) & ".jpg")) theWidth = (iwidth / 2) response.write "<li onClick=""$('#moreInfo" & y & "').slideToggle('slow');"" id=""liNum" & y & """>" & vbcr if theBrowser = "chrome" or theBrowser = "safari" then response.write "<img src=""img/clickMI.png"" width=""97"" height=""33"" style=""position:absolute;width:97px;height:33px;z-index:12;padding-top: 54px; padding-left:" & theWidth & "px;"">" & vbcr else response.write "<img src=""img/clickMI.png"" width=""97"" height=""33"" style=""position:absolute;width:97px;height:33px;z-index:12;padding-top: 50px; padding-left:" & theWidth & "px;"">" & vbcr end if response.write "<img src=""img/company/" & compNames(iLoop) & ".jpg"" height=""60"" style=""border: 1px solid #4C3C1B;padding: 2px;background-color: #CCC; margin-left: 10px; margin-right: 10px; margin-bottom: 5px; margin-top: 5px;"" id=""moreInfoM" & y & """ />" & vbcr response.write "</li>" & vbcr y = y + 1 Next I have made a video of FF and Chrome to give you a better understanding. http://www.youtube.com/watch?v=ZQaRvosvRKE Thanks! David

Read the article

iPad: Mobile Safari, HTML5 <video>, and jquery transitions

- by justinbach

I'm building a simple proof-of-concept for an iPad-specific website that would use video transitions to bring users from section to section. For purposes of the proof of concept, each "section" is just an image with a semitransparent content text box positioned above it. There are just 2 sections, "home" and "contact", and they've got a transition video sandwiched between them via z-indexing. The idea for the proof of concept is that clicking on the "home" section causes it to disappear, followed by playback of the transition video, which (upon completion) disappears to reveal the "contact" section. Everything is working fine with this version of the demo on the iPad and on Safari for Windows and OS X. Here's the JS: var myVideo = document.getElementsByTagName('video')[0]; $('document').ready(function() { $('#home').click(function() { $(this).css('display','none'); myVideo.play(); myVideo.addEventListener('ended', function() { $('#transition').css('display','none'); }); }); }); What I'd like to do is use a jQuery fadeOut() effect to fade out the text box prior to starting the video when the "home" section is clicked. The code seems simple enough: $('document').ready(function() { $('#home').click(function() { $('#home-copy').fadeOut('slow', function() { $('#home').css('display','none'); myVideo.play(); myVideo.addEventListener('ended', function() { $('#transition').css('display','none'); $('#home-copy').fadeIn('slow'); }); }); }); }); and it's working exactly as desired on desktop versions of Safari. On the iPad, however, the text box fades out as expected and the home section disappears as well, but the video stubbornly refuses to start playing. I really don't know why this would be the case, but that's what's happening. I'd appreciate any advice you might have! Incidentally, here's the markup: <div id="main-container"> <div id="home-copy"> <h1>Lorem Ipsum Dolor Sit Amet</h1> <p>Donec blandit pharetra luctus. Nam at porttitor odio. Nullam sem orci, venenatis sed pharetra eget, commodo rhoncus quam. Ut euismod vehicula bibendum. Curabitur in magna ante, id fringilla lacus. Nullam id elit eget lacus feugiat porta. Nulla vitae orci vehicula risus sagittis egestas quis sed justo.</p> </div> <div id="home"> <img src="images/home.jpg" width="1152" height="720" /> </div> <video id="transition" src="video/home_to_contact_lo_res.mp4" preload width="1152" height="720"></video> <div id="contact"> <img src="images/contact.jpg" width="1152" height="720" /> </div> </div>

Read the article

Problems with show hid jquery

- by Michael

I am someone can help... This should be easy but I am lost. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Show Hide Sample</title> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $('#content1').hide(); $('a').click(function(){ $('#content1').show('slow'); }); $('a#close').click(function(){ $('#content1').hide('slow'); }) }); </script> <style> body{font-size:12px; font-family:"Trebuchet MS"; background: #CCF} #content1{ border:1px solid #DDDDDD; padding:10px; margin-top:5px; width:300px; } </style> </head> <body> <a href="#" id="click">Test 1</a> <div class="box"> <div id="content1"> <h1 align="center">Hide 1</h1> <P> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pulvinar, enim ac hendrerit mattis, lorem mauris vestibulum tellus, nec porttitor diam nunc tempor dui. Aenean orci. Sed tempor diam eget tortor. Maecenas quis lorem. Nullam semper. Fusce adipiscing tellus non enim volutpat malesuada. Cras urna. Vivamus massa metus, tempus et, fermentum et, aliquet accumsan, lectus. Maecenas iaculis elit eget ipsum cursus lacinia. Mauris pulvinar.</p> <p><a href="#" id="close">Close</a></p> </div> </div> <a href="#" id="click">Test 2</a> <div class="box"> <div id="content1"> <h1 align="center">Hide 2</h1> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pulvinar, enim ac hendrerit mattis, lorem mauris vestibulum tellus, nec porttitor diam nunc tempor dui. Aenean orci. Sed tempor diam eget tortor. Maecenas quis lorem. Nullam semper. Fusce adipiscing tellus non enim volutpat malesuada. Cras urna. Vivamus massa metus, tempus et, fermentum et, aliquet accumsan, lectus. Maecenas iaculis elit eget ipsum cursus lacinia. Mauris pulvinar.</p> <p><a href="#" id="close">Close</a></p> </div> </div> </body> </html>

Read the article

jquery small refactoring , json call

- by Alexander Corotchi

Hi everybody, I need you suggestion to make some refactoring in jquery code because now it looks terrible for me. I have 4 json calls but the difference it is just the URL call. EX: var userId = MyuserID; var perPage = '45'; var showOnPage = '45'; var tag = 'tag1'; var tag1 = 'tag2'; var tag2 = 'tagn'; $.getJSON('http://api.flickr.com/services/rest/?format=json&method='+ 'flickr.photos.search&api_key=' + apiKey + '&user_id=' + userId + '&tags=' + tag + '&per_page=' + perPage + '&jsoncallback=?', function(data){ var classShown = 'class="lightbox"'; var classHidden = 'class="lightbox hidden"'; $.each(data.photos.photo, function(i, rPhoto){ var basePhotoURL = 'http://farm' + rPhoto.farm + '.static.flickr.com/' + rPhoto.server + '/' + rPhoto.id + '_' + rPhoto.secret; var thumbPhotoURL = basePhotoURL + '_s.jpg'; var mediumPhotoURL = basePhotoURL + '.jpg'; var photoStringStart = '<li><a '; var photoStringEnd = 'title="' + rPhoto.title + '" href="'+ mediumPhotoURL +'"><img src="' + thumbPhotoURL + '" alt="' + rPhoto.title + '"/></a><span>'+rPhoto.title+'</span></li>;' var photoString = (i < showOnPage) ? photoStringStart + classShown + photoStringEnd : photoStringStart + classHidden + photoStringEnd; $(photoString).appendTo("#flickr ul"); }); $("#flickr a").fancybox(); }); $.getJSON('http://api.flickr.com/services/rest/?format=json&method='+ 'flickr.photos.search&api_key=' + apiKey + '&user_id=' + userId + '&tags=' + tag1 + '&per_page=' + perPage + '&jsoncallback=?', function(data){ var classShown = 'class="lightbox"'; var classHidden = 'class="lightbox hidden"'; $.each(data.photos.photo, function(i, rPhoto){ var basePhotoURL = 'http://farm' + rPhoto.farm + '.static.flickr.com/' + rPhoto.server + '/' + rPhoto.id + '_' + rPhoto.secret; var thumbPhotoURL = basePhotoURL + '_s.jpg'; var mediumPhotoURL = basePhotoURL + '.jpg'; var photoStringStart = '<li><a '; var photoStringEnd = 'title="' + rPhoto.title + '" href="'+ mediumPhotoURL +'"><img src="' + thumbPhotoURL + '" alt="' + rPhoto.title + '"/></a><span>'+rPhoto.title+'</span></li>;' var photoString = (i < showOnPage) ? photoStringStart + classShown + photoStringEnd : photoStringStart + classHidden + photoStringEnd; $(photoString).appendTo(".SetPinos1 ul"); }); $(".Sets a").fancybox(); }); $.getJSON('http://api.flickr.com/services/rest/?format=json&method='+ 'flickr.photos.search&api_key=' + apiKey + '&user_id=' + userId + '&tags=' + tagn + '&per_page=' + perPage + '&jsoncallback=?', function(data){ var classShown = 'class="lightbox"'; var classHidden = 'class="lightbox hidden"'; $.each(data.photos.photo, function(i, rPhoto){ var basePhotoURL = 'http://farm' + rPhoto.farm + '.static.flickr.com/' + rPhoto.server + '/' + rPhoto.id + '_' + rPhoto.secret; var thumbPhotoURL = basePhotoURL + '_s.jpg'; var mediumPhotoURL = basePhotoURL + '.jpg'; var photoStringStart = '<li><a '; var photoStringEnd = 'title="' + rPhoto.title + '" href="'+ mediumPhotoURL +'"><img src="' + thumbPhotoURL + '" alt="' + rPhoto.title + '"/></a><span>'+rPhoto.title+'</span></li>;' var photoString = (i < showOnPage) ? photoStringStart + classShown + photoStringEnd : photoStringStart + classHidden + photoStringEnd; $(photoString).appendTo(".SetPinos ul"); }); $(".Sets a").fancybox(); }); var tag is only one difference in this url : Can somebody help me not to repeat all this stuff ?? Sorry by so long garbage :(

Read the article

JQuery - Adding Cells to Dynamic Tree Table

- by BPotocki

I can't quite wrap my head around this one... A table like the one below is spit out by a renderer from some XML. The XML it comes from has a variable depth. (Please point out if I'm using the rowspans in a horrific manner as well, I just came to this table with some experimentation). <table border="1"> <tr> <td rowspan="12">> 1</td> </tr> <tr> <td rowspan="3">1 > 2</td> </tr> <tr> <td>1 > 2 > 5</td> </tr> <tr> <td>1 > 2 > 6</td> </tr> <tr> <td rowspan="3">1 > 3</td> </tr> <tr> <td>1 > 3 > 7</td> </tr> <tr> <td>1 > 3 > 8</td> </tr> <tr> <td rowspan="3">1 > 4</td> </tr> <tr> <td>1 > 4 > 9</td> </tr> <tr> <td>1 > 4 > 10</td> </tr> </table> What I'm trying to accomplish in JQuery is this... User clicks cell "1 2" (which will have an ID). An item is dynamically added to the third level, but UNDER "1 2 6". What I could do is just add another row underneath "1 2" and increase the rowspan from "1 2", but the new cell would then appear out of order amongst "1 2 5" and "1 2 6". I don't really need the exact code to do this, just something to stop my head from spinning around this...Thanks!

Read the article

Problems with show hide jquery

- by Michael

I am trying to get show hide to work on multiple objects but I am unable to get it to work. Any help would be nice an much appreciated... I am lost on how to do this. If I only do one show hide it works fine but more than one it does not work properly. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Show Hide Sample</title> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $('#content1').hide(); $('a').click(function(){ $('#content1').show('slow'); }); $('a#close').click(function(){ $('#content1').hide('slow'); }) }); </script> <style> body{font-size:12px; font-family:"Trebuchet MS"; background: #CCF} #content1{ border:1px solid #DDDDDD; padding:10px; margin-top:5px; width:300px; } </style> </head> <body> <a href="#" id="click">Test 1</a> <div class="box"> <div id="content1"> <h1 align="center">Hide 1</h1> <P> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pulvinar, enim ac hendrerit mattis, lorem mauris vestibulum tellus, nec porttitor diam nunc tempor dui. Aenean orci. Sed tempor diam eget tortor. Maecenas quis lorem. Nullam semper. Fusce adipiscing tellus non enim volutpat malesuada. Cras urna. Vivamus massa metus, tempus et, fermentum et, aliquet accumsan, lectus. Maecenas iaculis elit eget ipsum cursus lacinia. Mauris pulvinar.</p> <p><a href="#" id="close">Close</a></p> </div> </div> <a href="#" id="click">Test 2</a> <div class="box"> <div id="content1"> <h1 align="center">Hide 2</h1> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pulvinar, enim ac hendrerit mattis, lorem mauris vestibulum tellus, nec porttitor diam nunc tempor dui. Aenean orci. Sed tempor diam eget tortor. Maecenas quis lorem. Nullam semper. Fusce adipiscing tellus non enim volutpat malesuada. Cras urna. Vivamus massa metus, tempus et, fermentum et, aliquet accumsan, lectus. Maecenas iaculis elit eget ipsum cursus lacinia. Mauris pulvinar.</p> <p><a href="#" id="close">Close</a></p> </div> </div> </body> </html>

Read the article

Slow Jquery Animation

- by Pyronaut

I have this webpage : http://miloarc.pyrogenicmedia.com/ Which atm is nothing special. It has a few effects but none that break the bank. If you mouse over a tile, it should change it's opacity to give it a fade effect. This is done through the Jquery Animation, not through CSS (I do this so it can fade, instead of being a straight change). Everything looks nice when the page loads, and the fades look perfect. Infact if you drag your mouse all over the place, if gives you a "trail" almost like a snake. Anyway, My next problem is that you will see there is a box in the top left, which is going to tell you information about the tile you are hovering over. This seems to work fine. When you mouse over that information box, it switches it's position (So that you can reach the tiles that were previously hidden underneath it). From my understanding, this is all working fine, and to the letter. However, After one move of the info box (One hover). Viewing the page in Firefox turns slugish. As in, after a successful move of the info box, the fade effects become very stuttered, and it doesn't pick up events as fast meaning you can't draw a "trail" on the screen. Chrome doesn't have this issue. It seems to work fine no matter what. Safari also seems ok. Although I do notice if I move my mouse really fast, it does jump a bit but not as much as firefox. Internet explorer doesn't work at all. Seems to crash the browser... And there is an error with the rounded corner plugin im using (Not sure why...). All in all, I think whatever I'm doing inside my code must be heavily sluggish. But I don't know where it is happening. Here is the full code, but I would advise go to the link to view everything. <script type="text/javascript"> $(document).ready(function() { var WindowWidth = $(window).width(); var WindowMod = WindowWidth % 20; var WindowWidth = WindowWidth - WindowMod; var BoxDimension = WindowWidth / 20; var BoxDimensionFixed = BoxDimension - 12; var dimensions = BoxDimensionFixed + 'px'; $('.gamebutton').each(function(i) { $(this).css('width', dimensions); $(this).css('height', dimensions); }); var OuterDivHeight = BoxDimension * 10; var TopMargin = ($(window).height() - OuterDivHeight) / 2; var OuterDivWidth = BoxDimension * 20; var LeftMargin = ($(window).width() - OuterDivWidth) / 2; $('#gamePort').css('margin-top', TopMargin).css('margin-left', LeftMargin).css('margin-right', LeftMargin); $('.gamebutton img').each(function(i) { $(this).hover( function () { $(this).animate({'opacity': 0.65}); }, function () { $(this).animate({'opacity': 1}); } ); }); $('.rounded').corners(); $('.gamebutton').each(function(i) { $(this).hover(function() { $('.gameTitlePopup').html($(this).attr('title')); FadeActive(); }); }); function FadeActive() { $('.activeInfo').fadeIn('slow'); } $('#gameInfoLeft').hover(function() { $(this).removeClass('activeInfo'); $(this).fadeOut('slow', function() { $('#gameInfoRight').addClass('activeInfo'); FadeActive(); }); }); $('#gameInfoRight').hover(function() { $(this).removeClass('activeInfo'); $(this).fadeOut('slow', function() { $('#gameInfoLeft').addClass('activeInfo'); FadeActive(); }); }); }); </script> Thanks for any help :).

Read the article

Jquery getJSON cross domain problems

- by Charlie

I cant seem to get my JSON file to work when pulling it in from another domain using JQuerys getJSON. I have placed the callback part at the end of the url but still have no joy. Firebug tells me its a cross domain issue, which seems to make sense as if I place the json file locally the below code (excluding the ?jsoncallback=? works fine) Heres the Jquery part $.getJSON("http://anotherdomain/js/morearticles.js?jsoncallback=?", function(json){ if (show5More.nextSetCount ' + this.titletext + '' + this.paratext + '').appendTo("#lineupswitch"); } else { $('' + this.titletext + '' + this.paratext + '').appendTo("#lineupswitch"); } }); return false; } }); } }); } And the JSON, which I have validated. { "items": [ [ { "href": "/edinburgh/video/news-090415-s2-squalor-edinburgh/", "thumbimg": "http://brightcove.vo.llnwd.net/d7/unsecured/media/1486976045/1486976045_19721015001_asset-1239819553334.jpg?pubId=1486976045", "titletext": "Cannabis plants found in house with neglected children", "paratext": "A court has heard four young children lived in", "cname": "" }, { "href": "/edinburgh/video/news-090414-s2-waverley-station-edinburgh/", "thumbimg": "http://brightcove.vo.llnwd.net/d7/unsecured/media/1486976045/1486976045_19537855001_asset-1239732920496.jpg?pubId=1486976045", "titletext": "Multi-million pound revamp for Waverley Station", "paratext": "Edinburgh's Waverley Station is set for a", "cname": "" }, { "href": "/edinburgh/video/news-s2-natal-20090408/", "thumbimg":"http://brightcove.vo.llnwd.net/d7/unsecured/media/1486976045/1486976045_18948154001_asset-1239206353135.jpg?pubId=1486976045", "titletext": "Stillbirth charity on the road to raise awareness", "paratext": "SANDS Lothian are hoping to highlight their", "cname": "" }, { "href": "/edinburgh/video/news-090407-l2-rbs/", "thumbimg":"http://brightcove.vo.llnwd.net/d7/unsecured/media/1486976045/1486976045_18827378001_asset-1239110600777.jpg?pubId=1486976045", "titletext": "Thousands of jobs to go at Royal Bank of Scotland", "paratext": "Edinburgh-based bank to cut 4,500 positions in the", "cname": "" }, { "href": "/edinburgh/video/news-090415-s2-squalor-edinburgh/", "thumbimg": "http://brightcove.vo.llnwd.net/d7/unsecured/media/1486976045/1486976045_19721015001_asset-1239819553334.jpg?pubId=1486976045", "titletext": "1", "paratext": "A court has heard four young children lived in", "cname": "lastlineup" } ], [ { "href": "/edinburgh/video/news-090415-s2-squalor-edinburgh/", "thumbimg": "http://brightcove.vo.llnwd.net/d7/unsecured/media/1486976045/1486976045_19721015001_asset-1239819553334.jpg?pubId=1486976045", "titletext": "1", "paratext": "A court has heard four young children lived in", "cname": "" }, { "href": "/edinburgh/video/news-090414-s2-waverley-station-edinburgh/", "thumbimg": "http://brightcove.vo.llnwd.net/d7/unsecured/media/1486976045/1486976045_19537855001_asset-1239732920496.jpg?pubId=1486976045", "titletext": "2", "paratext": "Edinburgh's Waverley Station is set for a", "cname": "" }, { "href": "/edinburgh/video/news-s2-natal-20090408/", "thumbimg":"http://brightcove.vo.llnwd.net/d7/unsecured/media/1486976045/1486976045_18948154001_asset-1239206353135.jpg?pubId=1486976045", "titletext": "Stillbirth charity on the road to raise awareness", "paratext": "3", "cname": "" }, { "href": "/edinburgh/video/news-090407-l2-rbs/", "thumbimg":"http://brightcove.vo.llnwd.net/d7/unsecured/media/1486976045/1486976045_18827378001_asset-1239110600777.jpg?pubId=1486976045", "titletext": "Thousands of jobs to go at Royal Bank of Scotland", "paratext": "4", "cname": "" }, { "href": "/edinburgh/video/news-090407-l2-rbs/", "thumbimg":"http://brightcove.vo.llnwd.net/d7/unsecured/media/1486976045/1486976045_18827378001_asset-1239110600777.jpg?pubId=1486976045", "titletext": "Thousands of jobs to go at Royal Bank of Scotland", "paratext": "Edinburgh-based bank to cut 4,500 positions in the", "cname": "lastlineup" } ] ] } { "items": [ [ { "href": "/edinburgh/video/news-090415-s2-squalor-edinburgh/", "thumbimg": "http://brightcove.vo.llnwd.net/d7/unsecured/media/1486976045/1486976045_19721015001_asset-1239819553334.jpg?pubId=1486976045", "titletext": "Cannabis plants found in house with neglected children", "paratext": "A court has heard four young children lived in", "cname": "" }, { "href": "/edinburgh/video/news-090414-s2-waverley-station-edinburgh/", "thumbimg": "http://brightcove.vo.llnwd.net/d7/unsecured/media/1486976045/1486976045_19537855001_asset-1239732920496.jpg?pubId=1486976045", "titletext": "Multi-million pound revamp for Waverley Station", "paratext": "Edinburgh's Waverley Station is set for a", "cname": "" }, { "href": "/edinburgh/video/news-s2-natal-20090408/", "thumbimg":"http://brightcove.vo.llnwd.net/d7/unsecured/media/1486976045/1486976045_18948154001_asset-1239206353135.jpg?pubId=1486976045", "titletext": "Stillbirth charity on the road to raise awareness", "paratext": "SANDS Lothian are hoping to highlight their", "cname": "" }, { "href": "/edinburgh/video/news-090407-l2-rbs/", "thumbimg":"http://brightcove.vo.llnwd.net/d7/unsecured/media/1486976045/1486976045_18827378001_asset-1239110600777.jpg?pubId=1486976045", "titletext": "Thousands of jobs to go at Royal Bank of Scotland", "paratext": "Edinburgh-based bank to cut 4,500 positions in the", "cname": "" }, { "href": "/edinburgh/video/news-090415-s2-squalor-edinburgh/", "thumbimg": "http://brightcove.vo.llnwd.net/d7/unsecured/media/1486976045/1486976045_19721015001_asset-1239819553334.jpg?pubId=1486976045", "titletext": "1", "paratext": "A court has heard four young children lived in", "cname": "lastlineup" } ], [ { "href": "/edinburgh/video/news-090415-s2-squalor-edinburgh/", "thumbimg": "http://brightcove.vo.llnwd.net/d7/unsecured/media/1486976045/1486976045_19721015001_asset-1239819553334.jpg?pubId=1486976045", "titletext": "1", "paratext": "A court has heard four young children lived in", "cname": "" }, { "href": "/edinburgh/video/news-090414-s2-waverley-station-edinburgh/", "thumbimg": "http://brightcove.vo.llnwd.net/d7/unsecured/media/1486976045/1486976045_19537855001_asset-1239732920496.jpg?pubId=1486976045", "titletext": "2", "paratext": "Edinburgh's Waverley Station is set for a", "cname": "" }, { "href": "/edinburgh/video/news-s2-natal-20090408/", "thumbimg":"http://brightcove.vo.llnwd.net/d7/unsecured/media/1486976045/1486976045_18948154001_asset-1239206353135.jpg?pubId=1486976045", "titletext": "Stillbirth charity on the road to raise awareness", "paratext": "3", "cname": "" }, { "href": "/edinburgh/video/news-090407-l2-rbs/", "thumbimg":"http://brightcove.vo.llnwd.net/d7/unsecured/media/1486976045/1486976045_18827378001_asset-1239110600777.jpg?pubId=1486976045", "titletext": "Thousands of jobs to go at Royal Bank of Scotland", "paratext": "4", "cname": "" }, { "href": "/edinburgh/video/news-090407-l2-rbs/", "thumbimg":"http://brightcove.vo.llnwd.net/d7/unsecured/media/1486976045/1486976045_18827378001_asset-1239110600777.jpg?pubId=1486976045", "titletext": "Thousands of jobs to go at Royal Bank of Scotland", "paratext": "Edinburgh-based bank to cut 4,500 positions in the", "cname": "lastlineup" } ] ] }

Read the article

jQuery .live fireing multiple times!

- by cstrzelc

Greetings Guru's, This is a little hard to explain, but I'll give it a shot. I have a quick question regarding to the .live() function in JQuery. I'm going to simplify the example here. I have a page "index.php" that has a container "#display_files_container" which is populated with anchor links that are generated dynamically by a different page "process.php". The links are loaded into that same <div> when those links are selected based on the attributes of that link. See Examples: INDEX.PHP <html> <head><title>index.php</title>  <script language="text/javascript"> $('.directory').live("click", function() { $('#display_files_container').load('plugins/project_files/process.php', {dirid: $(this).attr('dirid')}); }); </script> </head> <?php /*This code initial populates the link array so we have the first links populated before the users clicks for the first time*/ some code to fetch the $current_directory_list array from the database initially.... >? <body> <div id='display_files_container'> <?php /*Cycle through the array and echo out all the links which have been pulled from DB*/ for($i=0;$i<$current_directory_count;$i++) { echo "<a href='#' class='directory' dirid='".$current_directory_list[$i]['id']." '>".$current_directory_list[$i]['directory_name']. "</a> "; } ?> </div> </body> </html> PROCESS.PHP this file includes code to populate the $current_directory_list[] array from the database based on the post variable "$_POST['dirid']" that was sent from the .click() method in index.php. It then echo's the results out and we display them in the #display_files_container container. When you click on those links the process repeats. This works..... you can click though the directory tree and it loads the new links every time. However, it seems to want to .load() the process.php file many times over for one click. The number of times process.php is loaded seems to increase the more the links are clicked. So for example you can click on a link and firebug reports that process.php was loaded 23 times..... Eventually I would imagine I would record a stackoverflow. Please let me know if you have any ideas. Are there any ways that I can assure that .live() loads the process.php file only once? Thanks, -cs

Read the article

Jquery validation does not stop execution of "code behind" code of asp.net button

- by shahk26

Hi, I have a asp.net button which has click event which basically adds data into datbase. I also have a radiobuttonlist(i.e Approve / Decline) and a textbox. If user selects decline, the textbox becomes visible. I want to run validation that when user clicks on submit button, if the decline is selected then the textbox can not blank. I have used jquery validation for that. when I click button, the message apppears next to textbox that the field is required but it does not stop the execution of code behind. i.e.It adds data into database. Here is my code. <script type="text/javascript" language="javascript"> $(function() { $('#declinediv').hide(); //////// var $radBtn = $("table.rblist input:radio"); $radBtn.click(function() { var $radChecked = $(':radio:checked'); var value = $radChecked.val(); if (value == 'Decline' || value == 'Approve') { if (value == 'Decline') $('#declinediv').show(); else $('#declinediv').hide(); } else { $('#declinediv').hide(); } }); ////////////////////////// $("#aspnetForm").validate({ rules: { <%=txtdeclinereason.UniqueID %>: { minlength: 2, required: true } }, messages: { <%=txtdeclinereason.UniqueID %>:{ required: "* Required Field *", minlength: "* Please enter atleast 2 characters *" } }, onsubmit: true }); ////////////////////////////////// $('#btnsubmit').click(function(evt){ var isValid = $("#aspnetForm").valid(); if (!isValid) { evt.preventDefault(); } }); }); function myredirect(v, m, f) { window.location.href = v; } </script> <table style="border: 1px black solid; text-align: center; vertical-align: middle" width="100%"> <tr> <td> <asp:RadioButtonList ID="rbtnlstapprover" runat="server" RepeatDirection="Horizontal" CssClass="rblist" DataTextField="username" DataValueField="emailaddress"> <asp:ListItem Text="Approve" Value="Approve" /> <asp:ListItem Text="Decline" Value="Decline" /> </asp:RadioButtonList> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="rbtnlstapprover" Text="*" ErrorMessage="Please select atleast one Approver" ValidationGroup="approvalgroup" Display="Dynamic" /> </td> </tr> <tr> <td> <div id="declinediv"> <asp:TextBox ID="txtdeclinereason" runat="server" TextMode="MultiLine" Columns="80" Rows="5" /> </div> </td> </tr> <tr> <td> <asp:Button ID="btnsubmit" runat="server" Text="Submit" CssClass="RegularButton" CausesValidation="true" ValidationGroup="approvalgroup" OnClick="btnsubmit_Click" /> </td> </tr> </table> How do I stop the execution of code behind? Thanks for your help.

Read the article

jQuery navigation with childs and grandchilds

- by Ayrton

Hello I'm trying to create a little menu for navigation. Some of the menu items (level 0) have possibly children (level 1) and grandchildren (level 2). (see the html code below). All I would like to make the level 1 elements visible with a click event on the level 0 elements. When hovering on level 1 elements the level 2 elements (children from the hovered level 1 element) should become visible but with a little delay (like 1 sec.) and then if you 'unhover' on that one it will take 1 second to disappear the level 2 elements that way if you accidently unhover the level 1 element it won't punish you for it because you have 1 sec to hover it again. so if you slide across all of them, it will only pop up the one you kept your mouse on initially. I would be pleased if something could help me out ps: I preferably have a solution with jQuery. <ul> <li> <a href="#">menu item</a> <ul> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a> <ul> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> </ul> </li> <li> <a href="#">menu item</a> <ul> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> </ul> </li> <li class=""> <a href="#">menu item</a> <ul> <li class="first"><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> </ul> </li> </ul> </li> <li> <a href="#">menu item</a> </li> <li> <a href="#">menu item</a> </li> </ul>

Read the article

Selecting and inserting text at cursor location in textfield with JS/jQuery

- by IceCreamYou

Hello. I have developed a system in PHP which processes #hashtags like on Twitter. Now I'm trying to build a system that will suggest tags as I type. When a user starts writing a tag, a drop-down list should appear beneath the textarea with other tags that begin with the same string. Right now, I have it working where if a user types the hash key (#) the list will show up with the most popular #hashtags. When a tag is clicked, it is inserted at the end of the text in the textarea. I need the tag to be inserted at the cursor location instead. Here's my code; it operates on a textarea with class "facebook_status_text" and a div with class "fbssts_floating_suggestions" that contains an unordered list of links. (Also note that the syntax [#my tag] is used to handle tags with spaces.) maxlength = 140; var dest = $('.facebook_status_text:first'); var fbssts_box = $('.fbssts_floating_suggestions'); var fbssts_box_orig = fbssts_box.html(); dest.keyup(function(fbss_key) { if (fbss_key.which == 51) { fbssts_box.html(fbssts_box_orig); $('.fbssts_floating_suggestions .fbssts_suggestions a').click(function() { var tag = $(this).html(); //This part is not well-optimized. if (tag.match(/W/)) { tag = '[#'+ tag +']'; } else { tag = '#'+ tag; } var orig = dest.val(); orig = orig.substring(0, orig.length - 1); var last = orig.substring(orig.length - 1); if (last == '[') { orig = orig.substring(0, orig.length - 1); } //End of particularly poorly optimized code. dest.val(orig + tag); fbssts_box.hide(); dest.focus(); return false; }); fbssts_box.show(); fbssts_box.css('left', dest.offset().left); fbssts_box.css('top', dest.offset().top + dest.outerHeight() + 1); } else if (fbss_key.which != 16) { fbssts_box.hide(); } }); dest.blur(function() { var t = setTimeout(function() { fbssts_box.hide(); }, 250); }); When the user types, I also need get the 100 characters in the textarea before the cursor, and pass it (presumably via POST) to /fbssts/load/tags. The PHP back-end will process this, figure out what tags to suggest, and print the relevant HTML. Then I need to load that HTML into the .fbssts_floating_suggestions div at the cursor location. Ideally, I'd like to be able to do this: var newSuggestions = load('/fbssts/load/tags', {text: dest.getTextBeforeCursor()}); fbssts_box.html(fbssts_box_orig); $('.fbssts_floating_suggestions .fbssts_suggestions a').click(function() { var tag = $(this).html(); if (tag.match(/W/)) { tag = tag +']'; } dest.insertAtCursor(tag); fbssts_box.hide(); dest.focus(); return false; }); And here's the regex I'm using to identify tags (and @mentions) in the PHP back-end, FWIW. %(\A(#|@)(\w|(\p{L}\p{M}?))+\b)|((?<=\s)(#|@)(\w|(\p{L}\p{M}?))+\b)|(\[(#|@).+?\])%u Right now, my main hold-up is dealing with the cursor location. I've researched for the last two hours, and just ended up more confused. I would prefer a jQuery solution, but beggars can't be choosers. Thanks!

Read the article

Jquery .Animate Width Problem.

- by smoop

Thanks in advance for any-help with this, I'll try and explain it well. I have a container of 1000px width and 220px height, in this I will have three columns 220px in height but with different widths (77px, 200px and 300px). When you click one div it will open to a fixed size (the same for each, say 400px) and the others which are not clicked will shrink back to their original sizes (77px, 200px and 300px). Like an accordian with different widths.. My jquery is getting there but not quite, I know how to create an Event on click, I know from there I need to shrink everything but the one I clicked back to their orignal size. I finish but making the one clicked expand to the size it needs to be. jsfiddle here! $(document).ready(function(){ // Your code here $('.section').click(function() { $('.section').not(this).animate({width:"77px"},400); //alert('clicked!'); $(this).animate({width:"400px"},400); }); }); <div id="pictureNavContainer"> <div class="section pictureSectionOne" id="1"></div> <div class="section pictureSectionTwo" id="2"></div> <div class="section pictureSectionThree" id="3"></div> </div> <style> #pictureNavContainer{background-color:#262626; width:1000px; height:220px; overflow:hidden;} .pictureSectionOne{float:left; background:yellow; height:220px; width:77px;} .pictureSectionTwo{float:left; background:red; height:220px; width:177px;} .pictureSectionThree{float:left; background:blue; height:220px; width:400px;} </style> I figured a kind of solution: <script> $(document).ready(function(){ // Your code here $('.section').click(function() { $('#1').animate({width:"50px"},400); $('#2').animate({width:"100px"},400); $('#3').animate({width:"200px"},400); //alert('clicked!'); $(this).animate({width:"400px"},400); }); }); </script> But the code isnt very good.. but it works This: $(function(){ var $sections = $('.section'); var orgWidth = []; var animate = function() { var $this = $(this); $sections.not($this).each(function(){ var $section = $(this), org = orgWidth[$section.index()]; $section.animate({ width: org }, 400); }); $this.animate({ width: 400 }, 400); }; $sections.each(function(){ var $this = $(this); orgWidth.push($this.width()); $this.click(animate); }); });

Read the article

jQuery: Div elements are not showing up

- by Legend

I am adapting the Coverflow technique to work with a div. Following is the html: <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <style type="text/css" media="screen"> body,html { margin: 0; padding: 0; background: #000; height: 100%; color: #eee; font-family: Arial; font-size: 10px; } div.magnifyme { height: 80px; padding: 80px; position: absolute; top: 0px; left: 0px; width: 8000px; } div.wrapper { margin: 0px; height: 470px; /*border: 2px solid #999;*/ overflow: hidden; padding-left: 40px; right: 1px; width: 824px; position: relative; } div.container {position: relative; width: 854px; height: 480px; background: #000; margin: auto;} div.nav {position: absolute; top: 10px; width: 20%; height: 10%; right: 1px; } div.magnifyme div { position: absolute; width: 300px; height: 280px; float: left; margin: 5px; position: relative; border: 2px solid #999; background: #500; } </style> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="ui.coverflow.js"></script> <script type="text/javascript"> $(function() { $("div.magnifyme").coverflow(); $("#add").click(function() { location.reload(); $(".magnifyme").append("<div id=\"div5\">hello world</div>"); $("div.magnifyme").coverflow(); }); }); </script> </head> <body> <div class="container"> <div class="wrapper"> <div class="magnifyme"> <div id="div0">This is div 0</div> <div id="div1">This is div 1</div> <div id="div2">This is div 2</div> <div id="div3">This is div 3</div> <div id="div4">This is div 4</div> </div> </div> <div class="nav"> <button type="button" id="add">Add to Deck</button> </div> </div> </body> </html> The coverflow function (included as a js file in the head section) is here. When I click the button, I was expecting it to add a DIV to the already present deck. For some reason, it doesn't show the newly added DIV. I tried calling the coverflow() function after I added the new element but that didn't work either. Is there any way I can make this work?

Read the article

jQuery hide/show with select tag

- by Ozzy

I'm relative new to jQuery and I've been asked to create a hide/show function with a select tag. The function pretty much would be when you click on one of the options in the select tag it will open a div associate with the div of course. To be honest I have no idea how approach this function. I need help urgently, I have already tried many online but none have seem to work. Find below the html code. Thanks. <div class="adwizard"> <select id="selectdrop" name="selectdrop" class="adwizard-bullet"> <option value="adwizard">AdWizard</option> <option value="collateral">Collateral Ordering Tool</option> <option value="ebrochure">eBrochures</option> <option value="brand">Brand Center</option> <option value="funtees">FunTees</option> </select> </div> <div class="panels"> <div id="adwizard" class="sub-box showhide"> <img src="../images/bookccl/img-adwizard.gif" width="95" height="24" alt="AdWizard" /> <p>Let Carnival help you grow your business with our great tools! Lor ipsum dolor sit amet. <a href="https://www.carnivaladwizard.com/home.asp">Learn More</a></p> </div> <div id="collateral" class="sub-box showhide"> <p>The Collateral Ordering Tool makes it easy for you to order destination brochures and the sales DVD for that upcoming event. <a href="http://carnival.litorders.com/workplace.asp">Learn More</a></p> </div> <div id="ebrochure" class="sub-box showhide"> <img src="../images/bookccl/img-ebrochure.gif" width="164" height="39" alt="Brochures" /> <p>Show your clients that you're listening to their specific vacation needs by delivering relevant planning info quickly. <a href="http://productiontrade.carnivalbrochures.com/start.aspx">Learn More</a></p> </div> <div id="brand" class="sub-box showhide"> <p>Carnival Brand Center is where you'll find information on our strategy, guidlines, templates and artwork. <a href="https://carnival.monigle2.net/user_info.asp?login_type=agent">Learn More</a></p> </div> <div id="funtees" class="sub-box showhide"> <img src="../images/bookccl/img-funtees.gif" width="164" height="39" alt="Funtees" /> <p>Create your very own Fun Design shirts to commemorate that special occasion aboard a Carnival "Fun Ship!" <a href="http://carnival.victorydyo.com/">Learn More</a></p> </div> </div> <a class="view" href="#">See All Marketing Tools</a> </div>

Read the article

find style attribute using jquery

- by Rubans

HI, I want to find all input elements in a HTML string that has display not set to none. I have tried with JQuery and it doesn't seem to like looking for in the style attribute. Any ideas? I have the following HTML: <SPAN style="DISPLAY: none">4B holdings AG</SPAN><SPAN dropdownCell="onShowInvestorDropDown(ele, currentText)"></SPAN><INPUT style="DISPLAY: none" value="4B holdings AG" name=potbookgrid$ctl00$ctl08$ctl02> <DIV id=investorComboBoxPC> <DIV class="RadComboBox RadComboBox_Default" id=ctl02 style="DISPLAY: inline; WIDTH: 416px; ZOOM: 1" value="4B holdings AG"> <TABLE style="BORDER-TOP-WIDTH: 0px; TABLE-LAYOUT: fixed; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 100%; BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px" cellSpacing=0 cellPadding=0 summary=combobox border=0> <TBODY> <TR> <TD class="rcbInputCell rcbInputCellLeft" style="MARGIN-TOP: -1px; MARGIN-BOTTOM: -1px; WIDTH: 100%"><INPUT class=rcbInput id=ctl02_Input style="DISPLAY: block" value="4B holdings AG" name=ctl02 autocomplete="off" jQuery1276253231647="1"></TD> <TD class="rcbArrowCell rcbArrowCellRight rcbArrowCellHidden" style="MARGIN-TOP: -1px; MARGIN-BOTTOM: -1px"><A id=ctl02_Arrow style="DISPLAY: block; OVERFLOW: hidden; POSITION: relative; outline: none">select</A></TD></TR></TBODY></TABLE> <DIV class=rcbSlide style="Z-INDEX: 6000"><IFRAME style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; FILTER: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0); LEFT: 0px; BORDER-LEFT: 0px; WIDTH: 0px; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 0px; HEIGHT: 0px" tabIndex=-1 src="javascript:'';" frameBorder=0>Your browser does not support inline frames or is currently configured not to display inline frames.</IFRAME> <DIV class="RadComboBoxDropDown RadComboBoxDropDown_Default " id=ctl02_DropDown style="DISPLAY: none; FLOAT: left; WIDTH: 416px"> <DIV class=rcbHeader id=ctl02_Header> <TABLE style="TABLE-LAYOUT: fixed"> <TBODY> <TR> <TD width=60>Investor Code</TD> <TD width=150>Investor Name</TD> <TD width=90>City</TD> <TD width=100>Country</TD></TR></TBODY></TABLE></DIV> <DIV class="rcbScroll rcbWidth" style="WIDTH: 100%" jQuery1276253231647="2"></DIV></DIV></DIV><INPUT id=ctl02_ClientState type=hidden value='{"logEntries":[],"value":"","text":"4B holdings AG","enabled":true}' name=ctl02_ClientState autocomplete="off"> </DIV></DIV>

Read the article

jquery dynamic select doesn't submit values

- by n00b0101

I have a form that includes three select boxes. The first one is categories, and selecting a category from it will populate the variables multi-select box with values specific to the selected category. Selecting variables and then clicking "add selected" will populate the target select box will those variables. The problem is, print_r shows that the values in the target select box aren't passed upon submit, and I don't understand why... Below is the code, and help is really appreciated Here's the html markup: <select multiple="" id="categories" name="categories[]"> <option class="category" value="Income">Income</option> <option class="category" value="Gender">Gender</option> <option class="category" value="Age">Age</option> </select> //note that i'm only showing variables for a presumably select category <select multiple="multiple" id="variables" name="variables[]"> <option value="2">Less Than $15,000</option> <option value="3">$15,000 - $19,999</option> <option value="4">$20,000 - $29,999</option> <option value="5">$30,000 - $39,999</option> <option value="6">$40,000 - $49,999</option> <option value="11">$90,000 - $99,999</option> <option value="12">$100,000 - $124,999</option> <option value="13">$125,000 - $149,999</option> <option value="14">Greater than $149,999</option> </select> <select name="target[]" id="target" multiple="multiple" height="60"> </select> And here's the jquery code: $(function(){ var opts = {}, $cats = $("#categories"), $target = $("#target"), $vars = $("#variables"); $vars.find("option").each(function(){ var $opt = $(this), cat = this.className, value = this.value, label = $opt.text(); if(!opts[cat]) { opts[cat] = []; } opts[cat].push({label: label, value: value}); $opt.remove(); }); function update_variables(){ var cat = $cats.val(), new_opts = []; $vars.empty(); $.each(opts[cat], function(){ if( $target.find('[value=' + this.value + ']').length === 0 ){ new_opts.push(option(this.value, this.label)); } }); $vars.html(new_opts.join('')); } function option(value, label){ return "<option value='" + value + "'>" + label + "</option>"; } $("#add").click(function(e){ e.preventDefault(); $vars.find(':selected').appendTo($target).attr('selected',false); update_variables(); }); $("#remove").click(function(e){ e.preventDefault(); $target.find(':selected').remove(); update_variables(); }); $cats.change(function(){ update_variables(); }).change(); })

Read the article

BB Code Parser (in formatting phase) with jQuery jammed due to messed up loops most likely

- by Oskar

Greetings everyone, I'm making a BB Code Parser but I'm stuck on the JavaScript front. I'm using jQuery and the caret library for noting selections in a text field. When someone selects a piece of text a div with formatting options will appear. I have two issues. Issue 1. How can I make this work for multiple textfields? I'm drawing a blank as it currently will detect the textfield correctly until it enters the $("#BBtoolBox a").mousedown(function() { } loop. After entering it will start listing one field after another in a random pattern in my eyes. !!! MAIN Issue 2. I'm guessing this is the main reason for issue 1 as well. When I press a formatting option it will work on the first action but not the ones afterwards. It keeps duplicating the variable parsed. (if I only keep to one field it will never print in the second) Issue 3 If you find anything especially ugly in the code, please tell me how to improve myself. I appriciate all help I can get. Thanks in advance $(document).ready(function() { BBCP(); }); function BBCP(el) { if(!el) { el = "textarea"; } // Stores the cursor position of selection start $(el).mousedown(function(e) { coordX = e.pageX; coordY = e.pageY; // Event of selection finish by using keyboard }).keyup(function() { BBtoolBox(this, coordX, coordY); // Event of selection finish by using mouse }).mouseup(function() { BBtoolBox(this, coordX, coordY); // Event of field unfocus }).blur(function() { $("#BBtoolBox").hide(); }); } function BBtoolBox(el, coordX, coordY) { // Variable containing the selected text by Caret selection = $(el).caret().text; // Ignore the request if no text is selected if(selection.length == 0) { $("#BBtoolBox").hide(); return; } // Print the toolbox if(!document.getElementById("BBtoolBox")) { $(el).before("<div id=\"BBtoolBox\" style=\"left: "+ ( coordX + 5 ) +"px; top: "+ ( coordY - 30 ) +"px;\"></div>"); // List of actions $("#BBtoolBox").append("<a href=\"#\" onclick=\"return false\"><img src=\"./icons/text_bold.png\" alt=\"B\" title=\"Bold\" /></a>"); $("#BBtoolBox").append("<a href=\"#\" onclick=\"return false\"><img src=\"./icons/text_italic.png\" alt=\"I\" title=\"Italic\" /></a>"); } else { $("#BBtoolBox").css({'left': (coordX + 3) +'px', 'top': (coordY - 30) +'px'}).show(); } // Parse the text according to the action requsted $("#BBtoolBox a").mousedown(function() { switch($(this).children(":first").attr("alt")) { case "B": // bold parsed = "[b]"+ selection +"[/b]"; break; case "I": // italic parsed = "[i]"+ selection +"[/i]"; break; } // Changes the field value by replacing the selection with the variable parsed $(el).val($(el).caret().replace(parsed)); $("#BBtoolBox").hide(); return false; }); }

Read the article

Why is parsing a jSON response to a jQUERY ajax request not working

- by Ankur

I know there are several similar questions on SO, I have used some of them to get this far. I am trying to list a set of urls that match my input values. I have a servlet which takes some input e.g. "aus" in the example below and returns some output using out.print() e.g. the two urls I have shown below. EXAMPLE Input: "aus" Output: [{"url":"http://dbpedia.org/resource/Stifel_Nicolaus"},{"url":"http://sempedia.org/ontology/object/Australia"}] Which is exactly what I want. I have seen that firebug doesn't seem to have anything in the response section despite having called out.print(jsonString); and it seems that out.print(jsonString); is working as expected which suggests that the variable 'jsonString' contains the expected values. However I am not exactly sure what is wrong. -------- The jQuery --------- $(document).ready(function() { $("#input").keyup(function() { var input = $("#input").val(); //$("#output").html(input); ajaxCall(input); }); }); function ajaxCall(input) { // alert(input); $.ajax({ url: "InstantSearchServlet", data: "property="+input, beforeSend: function(x) { if(x && x.overrideMimeType) { x.overrideMimeType("application/j-son;charset=UTF-8"); } }, dataType: "json", success: function(data) { for (var i = 0, len = datalength; i < len; ++i) { var urlData = data[i]; $("#output").html(urlData.url); } } }); } ------ The Servlet that calls the DAO class - and returns the results ------- public class InstantSearchServlet extends HttpServlet{ private static final long serialVersionUID = 1L; public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException { System.out.println("You called?"); response.setContentType("application/json"); PrintWriter out = response.getWriter(); InstantSearch is = new InstantSearch(); String input = (String)request.getParameter("property"); System.out.println(input); try { ArrayList<String> urllist; urllist = is.getUrls(input); String jsonString = convertToJSON(urllist); out.print(jsonString); System.out.println(jsonString); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } } private String convertToJSON(ArrayList<String> urllist) { Iterator<String> itr = urllist.iterator(); JSONArray jArray = new JSONArray(); int i = 0; while (itr.hasNext()) { i++; JSONObject json = new JSONObject(); String url = itr.next(); try { json.put("url",url); } catch (JSONException e) { // TODO Auto-generated catch block e.printStackTrace(); } jArray.put(json); } String results = jArray.toString(); return results; } }

Read the article

jquery get radiobuttonlist by name dynamically

- by Cindy

I have two radiobuttonlist and one checkboxlist on the page. Ideally based on the checkbox selected value, I want to enable/disable corresponding radibuttonlist with jquery function. But some how $("input[name*=" + columnName + "]") always return null. It can not find the radiobuttonlist by its name? $(function() { function checkBoxClicked() { var isChecked = $(this).is(":checked"); var columnName = "rblColumn" + $(this).parent().attr("alt"); if (isChecked) { $("input[name*=" + columnName + "]").removeAttr("disabled"); } else { $("input[name*=" + columnName + "]").attr("disabled", "disabled"); $("input[name*=" + columnName + "] input").each(function() { $(this).attr("checked", "") }); } } //intercept any check box click event inside the #list Div $(":checkbox").click(checkBoxClicked); }); <asp:Panel ID="TestPanel" runat="server"> <asp:CheckBoxList ID = "chkColumn" runat="server" RepeatDirection="Horizontal"> <asp:ListItem id = "Column1" runat="server" Text="Column 1" Value="1" alt="1" class="HeadColumn" /> <asp:ListItem id = "Column2" runat="server" Text="Column 2" Value="2" alt="2" class="HeadColumn"/> </asp:CheckBoxList> <table> <tr> <td> <asp:RadioButtonList ID = "rblColumn1" runat="server" RepeatDirection="Vertical" disabled="disabled"> <asp:ListItem id="liColumn1p" runat="server" /> <asp:ListItem id="liColumn1n" runat="server" /> </asp:RadioButtonList> </td> <td> <asp:RadioButtonList ID = "rblColumn2" runat="server" RepeatDirection="Vertical" disabled="disabled"> <asp:ListItem id="liColumn2p" runat="server" /> <asp:ListItem id="liColumn2n" runat="server" /> </asp:RadioButtonList> </td> </tr> </table> </asp:Panel> source: <div id="TestPanel"> <table id="chkColumn" border="0"> <tr> <td><span id="Column1" alt="1" class="HeadColumn"><input id="chkColumn_0" type="checkbox" name="chkColumn$0" /><label for="chkColumn_0">Column 1</label></span></td><td><span id="Column2" alt="2" class="HeadColumn"><input id="chkColumn_1" type="checkbox" name="chkColumn$1" /><label for="chkColumn_1">Column 2</label></span></td> </tr> </table> <table> <tr> <td> <table id="rblColumn1" class="myRadioButtonList" disabled="disabled" border="0"> <tr> <td><span id="liColumn1p"><input id="rblColumn1_0" type="radio" name="rblColumn1" value="" /></span></td> </tr><tr> <td><span id="liColumn1n"><input id="rblColumn1_1" type="radio" name="rblColumn1" value="" /></span></td> </tr> </table> </td> <td> <table id="rblColumn2" class="myRadioButtonList" disabled="disabled" border="0"> <tr> <td><span id="liColumn2p"><input id="rblColumn2_0" type="radio" name="rblColumn2" value="" /></span></td> </tr><tr> <td><span id="liColumn2n"><input id="rblColumn2_1" type="radio" name="rblColumn2" value="" /></span></td> </tr> </table> </td> </tr> </table> </div>

Read the article

Problem with the output of Jquery function .offset in IE

- by vandalk

Hello! I'm new to jquery and javascript, and to web site developing overall, and I'm having a problem with the .offset function. I have the following code working fine on chrome and FF but not working on IE: $(document).keydown(function(k){ var keycode=k.which; var posk=$('html').offset(); var centeryk=screen.availHeight*0.4; var centerxk=screen.availWidth*0.4; $("span").text(k.which+","+posk.top+","+posk.left); if (keycode==37){ k.preventDefault(); $("html,body").stop().animate({scrollLeft:-1*posk.left-centerxk}) }; if (keycode==38){ k.preventDefault(); $("html,body").stop().animate({scrollTop:-1*posk.top-centeryk}) }; if (keycode==39){ k.preventDefault(); $("html,body").stop().animate({scrollLeft:-1*posk.left+centerxk}) }; if (keycode==40){ k.preventDefault(); $("html,body").stop().animate({scrollTop:-1*posk.top+centeryk}) }; }); hat I want it to do is to scroll the window a set percentage using the arrow keys, so my thought was to find the current coordinates of the top left corner of the document and add a percentage relative to the user screen to it and animate the scroll so that the content don't jump and the user looses focus from where he was. The $("span").text are just so I know what's happening and will be turned into comments when the code is complete. So here is what happens, on Chrome and Firefox the output of the $("span").text for the position variables is correct, starting at 0,0 and always showing how much of the content was scrolled in coordinates, but on IE it starts on -2,-2 and never gets out of it, even if I manually scroll the window until the end of it and try using the right arrow key it will still return the initial value of -2,-2 and scroll back to the beggining. I tried substituting the offset for document.body.scrollLetf and scrollTop but the result is the same, only this time the coordinates are 0,0. Am I doing something wrong? Or is this some IE bug? Is there a way around it or some other function I can use and achieve the same results? On another note, I did other two navigating options for the user in this section of the site, one is to click and drag anywhere on the screen to move it: $("html").mousedown(function(e) { var initx=e.pageX var inity=e.pageY $(document).mousemove(function(n) { var x_inc= initx-n.pageX; var y_inc= inity-n.pageY; window.scrollBy(x_inc*0.7,y_inc*0.7); initx=n.pageX; inity=n.pageY //$("span").text(initx+ "," +inity+ "," +x_inc+ "," +y_inc+ "," +e.pageX+ "," +e.pageY+ "," +n.pageX+ "," +n.pageY); // cancel out any text selections document.body.focus(); // prevent text selection in IE document.onselectstart = function () { return false; }; // prevent IE from trying to drag an image document.ondragstart = function() { return false; }; // prevent text selection (except IE) return false; }); }); $("html").mouseup(function() { $(document).unbind('mousemove'); }); The only part of this code I didn't write was the preventing text selection lines, these ones I found in a tutorial about clicking and draging objects, anyway, this code works fine on Chrome, FireFox and IE, though on Firefox and IE it's more often to happen some moviment glitches while you drag, sometimes it seems the "scrolling" is a litlle jagged, it's only a visual thing and not that much significant but if there's a way to prevent it I would like to know.

Search Results

Search found 17311 results on 693 pages for 'jquery chaining'.

Page 250/693 | < Previous Page | 246 247 248 249 250 251 252 253 254 255 256 257 | Next Page >

- by JVK Design

- by robalot

- by mattRo55

- by Danny

- by StealthRT

- by justinbach

- by Michael

- by Alexander Corotchi

- by BPotocki

- by Michael

- by Pyronaut

- by Charlie

- by cstrzelc

- by shahk26

- by Ayrton

- by IceCreamYou

- by smoop

- by Legend

- by Ozzy

- by Rubans

- by n00b0101

- by Oskar

- by Ankur

- by Cindy

- by vandalk

< Previous Page | 246 247 248 249 250 251 252 253 254 255 256 257 | Next Page >