Search Results

Search found 17407 results on 697 pages for 'jquery wysiwyg'.

Page 253/697 | < Previous Page | 249 250 251 252 253 254 255 256 257 258 259 260  | Next Page >

• 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><!-- ends .panel --> <a class="view" href="#">See All Marketing Tools</a> </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.

  Read the article

• z-index not working in IE8 with the sortable jQuery plugin

  - by Ojtwist

  I'm working with the jQuery Sortable plugin to drag and drop images from one box to another box. This works fine in ff,chrome and safari but it fails in IE8. It seems that when you start dragging that the image is send to the back. I've tried to solve this by adding the z-index option to the sortable plugin, i've tried appending it to a node higher in the hierarchy (body). It appears that setting a z-index on every other item in the page would fix this, haven't tried it yet and i'm not planning on doing this because this would mess up alot. So the user can drag an image from 1 gallery to the next gallery screenshot of how it should work: http://img69.imageshack.us/i/draganddrop.jpg/ Some html: <!--SECOND ARROCRDION ITEM --> <a class="flickr_accordeon_header" id="flickr_second_header" href="javascript:;">__MSG__SEARCH_FOR_PHOTOS__</a> <div> <p class ="flickr_text" > __MSG__SEARCH_FOR_PHOTOS__</p> <form method="GET" action="javascript:;"> <p> <input type="text" value="__MSG__SEARCH__" id="flickr_key_input" class="flickr_changeColorNormal" /> <button class="s3d-button flickr_search" id="flickr_seach_button"> <span class="s3d-button-inner" >__MSG__SEARCH__</span> </button> <img src="/devwidgets/flickr/images/ajax-loader-gray.gif" alt="__MSG__LOADING_IMAGE__" id="flickr_loading_img" /> <a href="javascript:;" id="flickr_refresh_key_button"><img src="/dev/_images/recent_activity_icon.png" alt="refresh" title='refresh' /></a> </p> </form> <div id="flickr_input_error">__MSG__INPUT_ERROR__</div> <div id="flickr_input_same_error">__MSG__INPUT_SAME_ERROR__</div> **<div id="flickr_key_gallery" ><ul class="flickr_key_ul"><li></li></ul></div>** <div id="flickr_key_pagging" ></div> </div> </div> <!--SLIDING SIDEBAR --> <div id="flickr_sidebar" class="jcarousel-skin-tango"> <div id="flickr_side_paging"></div> **<ul> <li><img src="/devwidgets/flickr/images/drop-image.png" alt="__MSG__DROP_HERE__" class="flick_drop_here"></li> </ul>** </div> The images get rendered into the ul, so basically it's just an ul with li's with images javascript for sortable: horizontal: { helper: "clone", // Instead of dragging the real image a copy will be dragged connectWith: ["#flickr_sidebar ul"], // To be able to drag and drop an image to another image gallery they need to be connected cursor: 'pointer', //change the cursor when dragging opacity: 0.50, //Change the opacity while dragging appendTo: 'body', //When dropped the images need to be appended to the image gallery where they are dropped containment: 'body', //Make sure the user can't drag the images outside the widget revert: true, // if the user releases the image ouside the dropbox it'll return to it's original position zIndex: 9999 } I've tried it with setting the dragged image to absolute and the container on relative... doesn't work Anyone know how to solve this in IE8 ?

  Read the article

• using JQuery and Ajax to post a form

  - by hopes

  Hi there, I want to use ajax to post my form I want radiobuttons to do this(there is no submit buton) so clicking a radiobutton will cause a form to be submitted or be post my php page needs to know the name of the radio button clicked is my code correct? cuz it doesn't work and I don't know why? <div id="Q1"> <form id="Question1" method='post'> <br /> <P> The sky color is.. </P><img border="0" src="images/wonder.png" width="94" height="134"/><br /><br /><br /> <input type="radio" id="option1" name="answer[1]" value="correct!"/> blue <br /> <input type="radio" id="option1" name="answer[1]" value="false!"/> red <br /> <input type="radio" id="option1" name="answer[1]" value="false!"/> green <br /> <input type="radio" id="option1" name="answer[1]" value="false!"/> white <br /> <br /> </Form> <!-- <p id="greatp" style="display: none;"> GREAT !!<br /><br /><br /><br /><br /><br /><br /></p> --> <img border="0" src="images/welldone3.png" width="230" height="182" id="greatp" style="display: none;"/> <!-- <p id="sorryp" style="display: none;"> Sorry !!<br /><br /><br /><br /><br /><br /><br /></p> --> <img border="0" src="images/failed3.png" width="230" height="182" id="sorryp" style="display: none;"/> <img src="images/false2.png"id="myImage1"style="display: none;"/> <img src="images/correct2.png"id="myImage2"style="display: none;"/> <!-- <input type= "submit" onclick="Next1()" value="Next"/> --> <input type="image" src="images/next.png" name="image" width="80" height="30" onclick="Next1()"> </div> jquery cod: <script> $(document).ready(function(){ $("#option1").click(function() { var answer= $("#option1").value; var fff= $("#option1").name; $.ajax({ type: "POST", url: "page2.php", data: fff, success: function(){ if(answer=='correct!') { $('#greatp').show(); $('#myImage2').show(); $('#Question1').hide(); } else { $('#sorryp').show(); $('#myImage1').show(); $('#Question1').hide(); } } }); return false; }); }); </script>

  Read the article

• input field placeholder in jQuery

  - by Hristo

  I'm trying to create a Login page, not worrying about actually logging in yet, but I'm trying to achieve the effect where there is some faded text inside the input field and when you click on it, the text disappears or if you click away the text reappears. I have this working for my "Username" input field, but the "Password" field is giving me problems because I can't just do $("#password").attr("type","password"). Here's my code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <!-- Links --> <link rel="stylesheet" type="text/css" href="style.css" /> <!-- Scripts --> <script type="text/javascript" src="jQuery.js"></script> <script> // document script $(document).ready(function(){ // login box event handler $('#login').click(function(){ $('.loginBox').animate({ height: '150px' }, '1000' ); $('#username').show(); // add pw placeholder field $('#password').after('<input type="text" id="placeHolder" value="Password" class="placeHolder" />'); $('#password').hide(); }); // username field focus and blur event handlers $('#username').focus(function() { if($(this).hasClass('placeHolder')){ $(this).val(''); $(this).removeClass('placeHolder'); } }); $('#username').blur(function() { if($(this).val() == '') { $(this).val('Username'); $(this).addClass('placeHolder'); } }); // password field focus and blur event handlers $('#placeHolder').focus(function() { $('#placeHolder').hide(); $('#password').show(); $('#password').focus(); }); $('#password').blur(function() { if($('#password').val() == '') { $('#placeHolder').show(); $('#password').hide(); } }); }); </script> </head> <body> <div id="loginBox" class="loginBox"> <a id="login">Proceed to Login</a><br /> <div id="loginForm"> <form> <input type="text" id="username" class="placeHolder" value="Username" /> <input type="password" id="password" class="placeHolder" value="" /> </form> </div> </div> </body> </html> Right now, I can click on the password input box and type in it, but the text is not disappearing and the "type" doesn't get set to "password"... the new input field I create isn't being hidden, it just stays visible, and I'm not sure where the problem is. Any ideas? Thanks, Hristo

  Read the article

• piecing together a jquery form mailer

  - by Joel

  Hi guys, My newbieness is shining through here...I managed to piece together a form mailer that works great, but now I need to add two more fields, and I'm at a loss as to how to do it. Over the months, I have commented out some things I didn't need, but now I'm stuck. I borrowed from this tutorial to make the original form: http://trevordavis.net/blog/tutorial/ajax-forms-with-jquery/ But then I cannibalized it to make an email signup form for a newsletter, so the fields I need are: recipient email (me-hard coded in) senders email address subject (hardcoded in) first name and city in the body of the message For my form, I have this: <div> <?php include('verify.php'); ?> <form action="index_success.php" method="post" id="sendEmail" class="email"> <h3 class="register2">Newsletter Signup:</h3> <ul class="forms email"> <li class="name"><label for="yourName">Name: </label> <input type="text" name="yourName" class="info" id="yourName" value=" " /><br> </li> <li class="city"><label for="yourCity">City: </label> <input type="text" name="yourCity" class="info" id="yourCity" value=" " /><br> </li> <li class="email"><label for="emailFrom">Email: </label> <input type="text" name="emailFrom" class="info" id="emailFrom" value="<?= $_POST['emailFrom']; ?>" /> <?php if(isset($emailFromError)) echo '<span class="error">'.$emailFromError.'</span>'; ?> </li> <li class="buttons email"> <button type="submit" id="submit">Send</button> <input type="hidden" name="submitted" id="submitted" value="true" /> </li> </ul> </form> </div> emailcontact.js: $(document).ready(function(){ $("#submit").click(function(){ $(".error").hide(); var hasError = false; var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; var emailFromVal = $("#emailFrom").val(); if(emailFromVal == '') { $("#emailFrom").after('<span class="error">You forgot to enter the email address to send from.</span>'); hasError = true; } else if(!emailReg.test(emailFromVal)) { $("#emailFrom").after('<span class="error">Enter a valid email address to send from.</span>'); hasError = true; } var subjectVal = $("#subject").val(); if(subjectVal == '') { $("#subject").after('<span class="error">You forgot to enter your name.</span>'); hasError = true; } var messageVal = $("#message").val(); if(messageVal == '') { $("#message").after('<span class="error">You forgot to enter your city.</span>'); hasError = true; } if(hasError == false) { $(this).hide(); $("#sendEmail li.buttons").append('<img src="/wp-content/themes/default/images/template/loading.gif" alt="Loading" id="loading" />'); $.post("/includes/sendemail.php", //emailTo: emailToVal, { emailFrom: emailFromVal, subject: subjectVal, message: messageVal }, function(data){ $("#sendEmail").slideUp("normal", function() { $("#sendEmail").before('<h3 class="register2">Success!</h3><p class="emailbox">You are on the Newsletter email list.</p>'); }); } ); } return false; }); }); sendmail.php: <?php $mailTo = $_POST['emailTo']; $mailFrom = $_POST['emailFrom']; $subject = $_POST['yourName']; $message = $_POST['yourCity']; mail('[email protected]','Rattletree Newsletter', 'Name='.$subject. ' City='.$message, "From: ".$mailFrom); ?> Thanks for any help! I'm going crosseyed trying to figure this one out.

  Read the article

• jquery drag and drop script and problem in reading json array

  - by Mac Taylor

  i made a script , exactly like wordpress widgets page and u can drag and drop objects this is my jquery script : <script type="text/javascript" >$(function(){ $('.widget') .each(function(){ $(this).hover(function(){ $(this).find('h4').addClass('collapse'); }, function(){ $(this).find('h4').removeClass('collapse'); }) .find('h4').hover(function(){ $(this).find('.in-widget-title').css('visibility', 'visible'); }, function(){ $(this).find('.in-widget-title').css('visibility', 'hidden'); }) .click(function(){ $(this).siblings('.widget-inside').toggle(); //Save state on change of collapse state of panel updateWidgetData(); }) .end() .find('.in-widget-title').css('visibility', 'hidden'); }); $('.column').sortable({ connectWith: '.column', handle: 'h4', cursor: 'move', placeholder: 'placeholder', forcePlaceholderSize: true, opacity: 0.4, start: function(event, ui){ //Firefox, Safari/Chrome fire click event after drag is complete, fix for that if($.browser.mozilla || $.browser.safari) $(ui.item).find('.widget-inside').toggle(); }, stop: function(event, ui){ ui.item.css({'top':'0','left':'0'}); //Opera fix if(!$.browser.mozilla && !$.browser.safari) updateWidgetData(); } }) .disableSelection(); }); function updateWidgetData(){ var items=[]; $('.column').each(function(){ var columnId=$(this).attr('id'); $('.widget', this).each(function(i){ var collapsed=0; if($(this).find('.widget-inside').css('display')=="none") collapsed=1; //Create Item object for current panel var item={ id: $(this).attr('id'), collapsed: collapsed, order : i, column: columnId }; //Push item object into items array items.push(item); }); }); //Assign items array to sortorder JSON variable var sortorder={ items: items }; //Pass sortorder variable to server using ajax to save state $.post("blocks.php"+"&order="+$.toJSON(sortorder), function(data){ $('#console').html(data).fadeIn("slow"); }); } </script> main part is saving object orders in table and this is my php part : function stripslashes_deep($value) { $value = is_array($value) ? array_map('stripslashes_deep', $value) : stripslashes($value); return $value; } $order = $_GET['order']; $order = sql_quote($order); if(empty($order)){ echo "Invalid data"; exit; } global $db,$prefix; if (get_magic_quotes_gpc()) { $_POST = array_map('stripslashes_deep', $_POST); $_GET = array_map('stripslashes_deep', $_GET); $_COOKIE = array_map('stripslashes_deep', $_COOKIE); $_REQUEST = array_map('stripslashes_deep', $_REQUEST); } $data=json_decode($order); foreach($newdata->items as $item) { //Extract column number for panel $col_id=preg_replace('/[^\d\s]/', '', $item->column); //Extract id of the panel $widget_id=preg_replace('/[^\d\s]/', '', $item->id); $sql="UPDATE blocks_tbl SET bposition='$col_id', weight='".$item->order."' WHERE id='".$widget_id."'"; mysql_query($sql) or die('Error updating widget DB'); } print_r($order); now forexample the output is this : items\":[{\"id\":\"item26\",\"collapsed\":1,\"order\":0,\"column\":\"c\"},{\"id\":\"item0\",\"collapsed\":1,\"order\":0,\"column\":\"i\"},{\"id\":\"item0\",\"collapsed\":1,\"order\":1,\"column\":\"i\"},{\"id\":\"item1\",\"collapsed\":1,\"order\":2,\"column\":\"i\"},{\"id\":\"item3\",\"collapsed\":1,\"order\":3,\"column\":\"i\"},{\"id\":\"item16\",\"collapsed\":1,\"order\":4,\"column\":\"i\"},{\"id\":\"item0\",\"collapsed\":1,\"order\":5,\"column\":\"i\"},{\"id\":\"item6\",\"collapsed\":1,\"order\":6,\"column\":\"i\"},{\"id\":\"item17\",\"collapsed\":1,\"order\":7,\"column\":\"i\"},{\"id\":\"item19\",\"collapsed\":1,\"order\":8,\"column\":\"i\"},{\"id\":\"item10\",\"collapsed\":1,\"order\":9,\"column\":\"i\"},{\"id\":\"item11\",\"collapsed\":1,\"order\":10,\"column\":\"i\"},{\"id\":\"item0\",\"collapsed\":1,\"order\":0,\"column\":\"l\"},{\"id\":\"item5\",\"collapsed\":1,\"order\":1,\"column\":\"l\"},{\"id\":\"item8\",\"collapsed\":1,\"order\":2,\"column\":\"l\"},{\"id\":\"item13\",\"collapsed\":1,\"order\":3,\"column\":\"l\"},{\"id\":\"item21\",\"collapsed\":1,\"order\":4,\"column\":\"l\"},{\"id\":\"item28\",\"collapsed\":1,\"order\":5,\"column\":\"l\"},{\"id\":\"item7\",\"collapsed\":1,\"order\":0,\"column\":\"r\"},{\"id\":\"item20\",\"collapsed\":1,\"order\":1,\"column\":\"r\"},{\"id\":\"item15\",\"collapsed\":1,\"order\":2,\"column\":\"r\"},{\"id\":\"item18\",\"collapsed\":1,\"order\":3,\"column\":\"r\"},{\"id\":\"item14\",\"collapsed\":1,\"order\":4,\"column\":\"r\"}]} question is how can i find out column_id or order im a little bit confused

  Read the article

• Image change on mouseover with jQuery..

  - by playahabana

  Hi, I am a comlete beginner to pretty much all things web design and am trying to construct my first website. I am attempting to hand code it without the ue of a CMS in order to learn as much as possible as quickly as possible. I am trying to make an imge change on mouseover for my top nav menu, and have the following jQuery functions: $(document).ready(function(){ $(".navlist img").each(function) { rollsrc = $(this).attr("src"); rollON = rollsrc.replace(/.jpg$/ig,"_link.png"); $("<img>").attr("src",rollON); $(".navlist a").mouseover(function(){ }); imgsrc= $(this).children("img").attr("src"); matches = imgsrc.match(/_link.png); if (!matches) { imgsrcON = imgsrc.replace(/.jpg$/ig,"_link.png"); $(this).children("img").attr("src", imagesrcON); } $(".navlist a").mouseout(function(){ $(this).children("img").attr("src", imgsrc); }); }); my html is as follows: <div id="nav"> <ul class="navmenu"> <li><a href="index.html"><img class="swap" src="images/links/home.jpg" alt="Home" border="none"></a></li> <li><a href="#"><img class="swap" src="images/links/ourbar.jpg" alt="Our Bar" border="none"></a> <ul class="navdrop"> <li ><a href="#"><img class="swap" src="images/links/cockteles.jpg" alt="Our Cocktails" border="none"></a></li> <li ><a href="#"><img class="swap" src="images/links/celebrate.jpg" alt="Celebrate in Style" border="none"></a></li> </ul> </li> <li><a href="#"><img class="swap" src="images/links/ourcigars.jpg" alt="Our Cigars" border="none"></a> <ul class="navdrop"> <li><a href="#"><img class="swap" src="images/links/edicionlimitadas.jpg" alt="Edition Limitadas" border="none"></a></li> <li><a href="our_cigars.html"><img class="swap" src="images/links/cigartasting.jpg" alt="Cigar Tastings" border="none"></a></li> </ul> </li> <li><a href="#"><img class="swap" src="images/links/personalcigar.jpg" alt="Personal Cigar Roller" border="none"></a></li> <li><a href="our_cigars.html"><img class="swap" src="images/links/photogallery.jpg" alt="Photo Gallery" border="none"></a></li> <li><a href="#"><img class="swap" src="images/links/contactus.jpg" alt="Contact Us" border="none"></a></li> </ul></div></div><!--end banner--> the image src for the alt image is in the form eg."images/links/home_link.png" and is the same for every image. I have checked this and checked this, could some body please give me a pointer as to where I am going wrong? Or a pointer to a tutorial for this effect? I have looked at a few and this seems to be the best for what I am attempting, but as I said I don't really know what I'm doing so any advice gratefully received.....

  Read the article

• Adding Another Parameter to my Custom jQuery Gallery

  - by steve

  My website currently uses a custom jQuery gallery system that I've developed... it works well, but I want to add one capability that I can't seem to figure out. I want the user to, instead of having to click each thumbnail, also be able to click the full image itself to advance in the gallery. Working gallery is here: http://www.studioimbrue.com The code is as follows: $('.thumbscontainer ul li a').click(function() { var li_index = $(this).parents('ul').children('li').index($(this).parent("li"));    $(this).parents('.thumbscontainer').parent().find('.captions ul li').fadeOut(); $(this).parents('.thumbscontainer').parent().find('.captions ul li:eq('+li_index+')').fadeIn(); }); }); and the gallery HTML markup is as follows: <div class="container"> <div class="captions" id="usbdrive"> <ul> <li style="display:block"> <img src="images/portfolio/usbdrive/1.jpg" /> <div class="caption"> <span class='projecttitle'>Super Talent USB Drive Package.</span> A fancy, lavish package designed for Super Talent's specialty USB drive. It was known as the world's smallest flash drive <span class="amp">&amp;</span> it is dipped in gold! </div> </li> <li> <img src="images/portfolio/usbdrive/2.jpg" /> </li> <li> <img src="images/portfolio/usbdrive/3.jpg" /> </li> <li> <img src="images/portfolio/usbdrive/4.jpg" /> </li> <li> <img src="images/portfolio/usbdrive/5.jpg" /> </li> </ul> </div> <div class="thumbscontainer verticalthumbs"> <ul> <li><a href="javascript:void(0);" name="usbdrive1"><img src="images/portfolio/usbdrive/1.jpg" /></a></li> <li><a href="javascript:void(0);" name="usbdrive2"><img src="images/portfolio/usbdrive/2.jpg" /></a></li> <li><a href="javascript:void(0);" name="usbdrive3"><img src="images/portfolio/usbdrive/3.jpg" /></a></li> <li><a href="javascript:void(0);" name="usbdrive4"><img src="images/portfolio/usbdrive/4.jpg" /></a></li> <li><a href="javascript:void(0);" name="usbdrive5"><img src="images/portfolio/usbdrive/5.jpg" /></a></li> </ul> </div> </div>

  Read the article

• expanding/collapsing div using jQuery

  - by Hristo

  I'm trying to expand and collapse a <div> by clicking some text inside the <div>. The behavior right now is very odd. For example, if I click the text after the <div> is expanded... the <div> will collapse and then expand again. Also, if I click somewhere inside the div after it is expanded, it will collapse again, and I think that is because I'm triggering the animation since the <div> being animated is inside the wrapper <div>. Here's the code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <!-- Links --> <link rel="stylesheet" type="text/css" href="style.css" /> <!-- Scripts --> <script type="text/javascript" src="jQuery.js"></script> <script> // document script $(function(){ // login box event handler $('#login').click(function() { $('#loginBox').toggle( function() { $('.loginBox').animate({ height: '150px' }, '1000' ); $('#username').show(); $('#password').hide(); $('#placeHolder').show(); }, function() { $('.loginBox').animate({ height: '50px' }, '1000' ); $('#username').hide(); $('#password').hide(); $('#placeHolder').hide(); } ); }); // username field focus and blur event handlers $('#username').focus(function() { if($(this).hasClass('placeHolder')){ $(this).val(''); $(this).removeClass('placeHolder'); } }); $('#username').blur(function() { if($(this).val() == '') { $(this).val('Username'); $(this).addClass('placeHolder'); } }); // password field focus and blur event handlers $('#placeHolder').focus(function() { $(this).hide(); $('#password').show(); $('#password').focus(); $('#password').removeClass('placeHolder'); }); $('#password').blur(function() { if($(this).val() == '') { $('#placeHolder').show(); $(this).hide(); } }); }); </script> </head> <body> <div id="loginBox" class="loginBox"> <a id="login" class="login">Proceed to Login</a><br /> <div> <form> <input type="text" id="username" class="placeHolder" value="Username" /> <input type="password" id="password" class="placeHolder" value="" /> <input type="text" id="placeHolder" class="placeHolder" value="Password" /> </form> </div> </div> </body> </html> Any ideas? Thanks, Hristo

  Read the article

• JQuery works on JsFiddle but not in project

  - by DanielNova

  Here is the JsFiddle I created: http://jsfiddle.net/ShHVy/ Everything works fine - different data is displayed in the column row to the right as I wish.. However, even having this exact code in my Project won't make it work The page in question is a popup view and it looks like this: <style type="text/css"> .highlighted { background-color: Orange; color: White; } </style> <script> var chosen = []; $("td").click(function () { var idx = $(this).index() + 1; $("td:nth-child(" + idx + ")").removeClass("highlighted"); $(this).addClass("highlighted"); chosen[idx] = $(this).parent("tr").index(); }); var data = { "Differdange": ["Differdange 1", "Differdange 2", "Differdange 3", "Differdange 4"], "Dippach": ["Dippach 1", "Dippach 2", "Dippach 3", "Dippach 4", ] }; function pushData(id, col) { $("#datachange table td:nth-child(" + 2 + ")").each(function (i, v) { $(this).html(data[id][i]) }); } $(function () { $("#datachange td").click(function () { var idx = $(this).index() + 1; $("td:nth-child(" + idx + ")").removeClass("highlighted"); $(this).addClass("highlighted"); pushData($(".highlighted").html(), 2); }); }); </script> <html> <head><title>Table Data Change</title></head> <body id="datachange" class="demo"> <table> <thead> <tr> <th>ID</th> <th>DATA</th> </tr> </thead> <tbody> <tr> <td>Differdange</td> <td></td> </tr> <tr> <td>Dippach</td> <td></td> </tr> <tr> <td>Dippach</td> <td></td> </tr> <tr> <td>Differdange</td> <td></td> </tr> </tbody> </table> </body> </html> Can anyone tell me why this small piece of JQuery doesn't work on mine (it's nothing to do with libraries as the top "td" function works 100% fine)

  Read the article

• jQuery embedding youtube IE issue

  - by webmonkey237

  I have been working on a custom image slider featured here: JQuery $(function(){ $('.cont:gt(0)').hide(); $("#parent").on("mouseenter", ".extraContent div", function(){ var ind = $(this).index(); $("#parent").find(".cont").stop().fadeTo(600,0,function(){ $('#parent').find('.cont').eq(ind).stop().fadeTo(300,1); }); }); $('#parent .extraContent').on('click',function(){ window.location=$(this).find("a").attr("href"); return false; }); }); CSS ?#parent { width:400px; margin:auto} .mainContent { width:430px; height:300px; border:1px solid #000;padding:5px; } .extraContent {overflow:auto; width:450px;} .extraContent div{float:left; width:90px; height:90px; border:1px solid #00F; margin:5px; padding:5px } .extraContent div:hover { border:1px solid #0F0;cursor:pointer } .cont{ position:absolute; } HTML <div id="parent"> <div class="mainContent"> <div class="cont"> Content 1....</div> <div class="cont"> Content 2....</div> <div class="cont">Content 3...<br /><iframe width="267" height="200" src="http://www.youtube.com/embed/6tlQn7iePV4?rel=0" frameborder="0" allowfullscreen></iframe></div> <div class="cont"> Content 4....</div> </div> <div class="extraContent"> <div><p>1 Custom content here <br /> <a href="">Some link</a></p></div> <div><p>2 Custom content here <br /> <a href="">Some link</a></p></div> <div><p>3 Custom content here <br /> <a href="">Some link</a></p></div> <div><p>4 Custom content here <br /> <a href="">Some link</a></p></div> </div> </div>? My problem is if I embed YouTube video straight from the site using there iframe it transitions fine in Chrome but Firefox & IE just display the video straight away and each slide/div appears under the video, is this a known problem and doesn't anyone know a way I can get IE & FF to behave. p.s. because this is going to be in a content management system the only way the user can embed the video is using the default code from youtube. FIDDLE HERE

  Read the article

• jQuery - Stucked Animation

  - by v1n_vampire

  I'm kind of tired with Javascript long script for animation and decide to try jQuery, but it seems I'm stuck even at the simplest code. CSS: #menu {float: right; font: italic 16px/16px Verdana, Geneva, sans-serif;} ul#nav {list-style: none;} ul#nav li {float: left; padding-right: 10px;} ul#nav li a {color: white;} ul#subnav {float: right; list-style: none; padding: 0; display: none;} ul#subnav li {float: left; padding: 10px 5px; white-space: nowrap;} ul#subnav li a {color: white;} Script: $(document).ready(function() { $('.nav').hover(function() { $(this).find('#subnav').stop().animate({width:'toggle'},350); }); }); HTML: <div id="menu"> <ul id="nav"> <li class="nav"> <a href="#"><img src="images/icon-home.png" width="36" height="36"/></a> <ul id="subnav"> <li><a href="#">Home</a></li> </ul> </li> <li class="nav"> <a href="#"><img src="images/icon-signin.png" width="36" height="36"/></a> <ul id="subnav"> <li><a href="#">Sign In</a></li> </ul> </li> <li class="nav"> <a href="#"><img src="images/icon-register.png" width="36" height="36"/></a> <ul id="subnav"> <li><a href="#">Create Account</a></li> </ul> </li> <li class="nav" style="padding-right: 0;"> <a href="#"><img src="images/icon-mail.png" width="36" height="36"/></a> <ul id="subnav"> <li style="padding-right: 0;"><a href="#">Contact Us</a></li> </ul> </li> </ul> </div> Here's the sample page: http://v1n-vampire.com/dev/jq-animation-stuck If you continue to hover on the nav from left to right then back to left, eventually the animation will stuck. How to solve this? Thank you in advance.

  Read the article

• move element li into ul with jquery

  - by ron

  Hi everybody i'm looking for a solution to move an element that i need to move into a .... im using jquery and i leave here the code i tried with different things but wasn't working it. this is the big menu <ul class="sf-menu"> <li><a href="">Student Centre</a> <ul> <li><a href="9">STUDENT CENTRAL WEBSITE</a></li> <li><a href="10">STUDENT CENTRAL EMAIL</a></li> <li><a href="11">CCM STUDENT SURVIAL TIPS</a></li> <li><a href="12">VET TUTTTION ASSURANSE</a></li> <li><a href="13">WHAT GOING ON AT CCM</a></li> <li><a href="14">IMPORTANT STUDENTS NOTICE</a></li> </ul> </li> <li><a href="">Research</a> <ul> <li><a href="_16">WHAT IS HOLISTIC KINESIOLOGY ?</a></li> <li><a href="_17">TRANF. CHILDREN W/ LEARNING DIFFICULTIES</a></li> <li><a href="_18">HEALING WITH HOLISTIC KINESIOLOGY</a></li> <li><a href="_19">UNDERSTANDING ASPERGER'S SYNDROME</a></li> <li><a href="_20">DAVID CORBY THE DIRECTOR OF CCM</a></li> <li><a href="_21">HELPING PEOPLE CREATE THEIR OWN MIRACLES</a></li> <li><a href="_22">MAGNESIUM AND COLLOIDAL MINERALS</a></li> <li><a href="_23">BRAIN ENERGETICS CHAKRAS AND NADIS</a></li> <li><a href="_24">KINESIOLOGY FAQ'S</a></li>' </ul> </li> <li><a href="25">Contact Us</a></li> <li><a href="26">A - Z</a></li> </ul> and i need to add this li to ul but i need to put in the second place after the first not nested <li id="faculty"> <a href="#">Faculty Courses </a> <ul> <li><a href="">INTENSE SHORT COURSES</a><ul> <li><a href="_59">CRYSTAL KINESIOLOGY ONE</a></li> <li><a href="_60">APPLIED PHYSIOLOGY</a></li> <li><a href="_61">VIBRATIONAL HEALING SYSTEMS 1</a></li> <li><a href="_62">VIBRATIONAL HEALING SYSTEMS 2</a></li> <li><a href="_63">VIBRATIONAL HEALING SYSTEMS 3</a></li> <li><a href="_64">VIBRATIONAL HEALING SYSTEMS 6</a></li> <li><a href="_65">NUTRITIONAL KINESIOLOGY</a></li> <li><a href="_66">QUANTUM HARMONICS</a></li><li><a href="_67">CHAKRA HOLOGRAM</a></li> <li><a href="_68">CLINICAL APPLICATIONS OF KINESIOLOGY</a></li> <li><a href="_69">COUNSELLING KINESIOLOGY</a></li> <li><a href="_70">HARMONISING CHI FLOW</a></li> </ul> </li> <li><a href="=53">FREE INTRUCTION COURSE DAYS</a> <ul> <li><a href="=53_56">HOLISTIC KINESIOLOGY</a></li> <li><a href="=53_57">TRANSPERSONAL COUNSELLING</a></li> <li><a href="=53_58">SHAMMANISM &amp; TRANSFORMATIONAL MASK</a></li> </ul> </li> <li><a href="=50">DIPLOMA MASK AND TRADITIONAL HEALING</a></li> <li><a href="=43">DIPLOMA TRANSPERSONAL ART THERAPY</a></li> <li><a href="=42">DIPLOMA HOLISTIC KINESIOLOGY</a></li> <li><a href="=47">ADVANCE DIPLOMA HOLISTIC KINESIOLOGY</a></li> <li><a href="=48">DIPLOMA DINAMIC AND FUNCTIONAL</a></li> <li><a href="=49">CERTIFICATE MASK AND TRADITIONAL HEALING</a></li> <li><a href="=51">DIPLOMA TRANSPERSONAL COUNSELLING</a></li> <li><a href="=52">STUDENT CLINICS</a></li> </ul> </li> please i need you help Thanks in advance

  Read the article

• need to align part of list item to right of li - using CSS3 Jquery column-layout

  - by Brad

  Using this jquery script to acheive CSS3 3-columns, to display a list of members alphabetically. I need it to display this way, which is does: A D B E C F Here is what I am using http://www.csscripting.com/css-multi-column/example6.php? (using this js file http://www.csscripting.com/js/v1.0beta/css3-multi-column.js) To the right of each member, it has their phone extension, which I want to float to the right, so it easy to read. I tried putting the phone extension within a div and span and when I do that, it tends to screw up at the last item in each column, by placing the person's name correctly, but their extension is the very first item in the next column. Screenshot: http://cl.ly/fq4 of what it is doing HTML Code: <div class="Article3Col"> <ul> <li>Doe, John <div style="float:right;"> 8317 </div> </li> <li>Doe, Sally <div style="float:right;"> 8729 </div> </li> <li>Doe, John <div style="float:right;"> 8317 </div> </li> <li>Doe, Sally <div style="float:right;"> 8729 </div> </li> <li>Doe, John <div style="float:right;"> 8317 </div> </li> <li>Doe, Sally <div style="float:right;"> 8729 </div> </li> <li>Doe, John <div style="float:right;"> 8317 </div> </li> <li>Doe, Sally <div style="float:right;"> 8729 </div> </li> <li>Doe, John <div style="float:right;"> 8317 </div> </li> <li>Doe, Sally <div style="float:right;"> 8729 </div> </li> <li>Doe, John <div style="float:right;"> 8317 </div> </li> <li>Doe, Sally <div style="float:right;"> 8729 </div> </li> <li>Doe, John <div style="float:right;"> 8317 </div> </li> <li>Doe, Sally <div style="float:right;"> 8729 </div> </li> <li>Doe, John <div style="float:right;"> 8317 </div> </li> <li>Doe, Sally <div style="float:right;"> 8729 </div> </li> <li>Doe, John <div style="float:right;"> 8317 </div> </li> <li>Doe, Sally <div style="float:right;"> 8729 </div> </li> </ul> </div> CSS: .Article3Col { column-count:3; } Any help is appreciated.

  Read the article

• jQuery show hide divs on radio buttons

  - by RyanP13

  I have got a group of radio buttons that when clicked need to display a corresponding unordered list. I have got as far as showing the correct list according to which radio button is clicked but cannot figure out how to hide the other lists that need to be hidden. So if i click the second benefits radion then the second 'spend' ul will display and the other 'spend' uls will hide. This is my jQuery: // hide all except first ul $('div.chevron ul').not(':first').hide(); // $('div.chevron > ul > li > input[name=benefits]').live('click',function() { // work out which radio has been clicked var $radioClick = $(this).index('div.chevron > ul > li > input[name=benefits]'); var $radioClick = $radioClick + 1; $('div.chevron > ul').eq($radioClick).show(); }); // trigger click event to show spend list var $defaultRadio = $('div.chevron > ul > li > input:first[name=benefits]') $defaultRadio.trigger('click'); And this is my HTML: <div class="divider chevron"> <ul> <li><strong>What benefit are you most interested in?</strong></li> <li> <input type="radio" class="inlineSpace" name="benefits" id="firstBenefit" value="Dental" checked="checked" /> <label for="firstBenefit">Dental</label> </li> <li> <input type="radio" class="inlineSpace" name="benefits" id="secondBenefit" value="Optical" /> <label for="secondBenefit">Optical</label> </li> <li> <input type="radio" class="inlineSpace" name="benefits" id="thirdBenefit" value="Physiotherapy" /> <label for="thirdBenefit">Physiotherapy, osteopathy, chiropractic, acupuncture</label> </li> </ul> <ul> <li><strong>How much do you spend a year on Dental?</strong></li> <li> <input type="radio" class="inlineSpace" name="spend" id="rate1a" value="£50" /> <label for="rate1a">&pound;50</label> </li> <li> <input type="radio" class="inlineSpace" name="spend" id="rate2a" value="£100" /> <label for="rate2a">&pound;100</label> </li> <li> <input type="radio" class="inlineSpace" name="spend" id="rate3a" value="£150" /> <label for="rate3a">&pound;150</label> </li> </ul> <ul> <li><strong>How much do you spend a year on Optical?</strong></li> <li> <input type="radio" class="inlineSpace" name="spend" id="rate1b" value="£50" /> <label for="rate1a">&pound;50</label> </li> <li> <input type="radio" class="inlineSpace" name="spend" id="rate2b" value="£100" /> <label for="rate2a">&pound;100</label> </li> <li> <input type="radio" class="inlineSpace" name="spend" id="rate3b" value="£150" /> <label for="rate3a">&pound;150</label> </li> </ul> <ul> <li><strong>How much do you spend a year on Physiotherapy, osteopathy, chiropractic, acupuncture?</strong></li> <li> <input type="radio" class="inlineSpace" name="spend" id="rate1c" value="£50" /> <label for="rate1a">&pound;50</label> </li> <li> <input type="radio" class="inlineSpace" name="spend" id="rate2c" value="£100" /> <label for="rate2a">&pound;100</label> </li> <li> <input type="radio" class="inlineSpace" name="spend" id="rate3c" value="£150" /> <label for="rate3a">&pound;150</label> </li> </ul> <label class="button"><input type="submit" value="View your quote" class="submit" /></label> </div> I tried using: $('div.chevron > ul').not($radioClick).hide(); But that yielded a bad result where all the lists where hidden. Thanks in advance.

  Read the article

• jQuery: Highlight element under mouse cursor?

  - by Ralph

  I'm trying to create an "element picker" in jQuery, like Firebug has. Basically, I want to highlight the element underneath the user's mouse. Here's what I've got so far, but it isn't working very well: $('*').mouseover(function (event) { var $this = $(this); $div.offset($this.offset()).width($this.width()).height($this.height()); return false; }); var $div = $('<div>') .css({ 'background-color': 'rgba(255,0,0,.5)', 'position': 'absolute', 'z-index': '65535' }) .appendTo('body'); Basically, I'm injecting a div into the DOM that has a semi-transparent background. Then I listen for the mouseover event on every element, then move the div so that it covers that element. Right now, this just makes the whole page go red as soon as you move your mouse over the page. How can I get this to work nicer? Edit: Pretty sure the problem is that as soon as my mouse touches the page, the body gets selected, and then as I move my mouse around, none of the moments get passed through the highligher because its overtop of everything. Firebug Digging through Firebug source code, I found this: drawBoxModel: function(el) { // avoid error when the element is not attached a document if (!el || !el.parentNode) return; var box = Firebug.browser.getElementBox(el); var windowSize = Firebug.browser.getWindowSize(); var scrollPosition = Firebug.browser.getWindowScrollPosition(); // element may be occluded by the chrome, when in frame mode var offsetHeight = Firebug.chrome.type == "frame" ? FirebugChrome.height : 0; // if element box is not inside the viewport, don't draw the box model if (box.top > scrollPosition.top + windowSize.height - offsetHeight || box.left > scrollPosition.left + windowSize.width || scrollPosition.top > box.top + box.height || scrollPosition.left > box.left + box.width ) return; var top = box.top; var left = box.left; var height = box.height; var width = box.width; var margin = Firebug.browser.getMeasurementBox(el, "margin"); var padding = Firebug.browser.getMeasurementBox(el, "padding"); var border = Firebug.browser.getMeasurementBox(el, "border"); boxModelStyle.top = top - margin.top + "px"; boxModelStyle.left = left - margin.left + "px"; boxModelStyle.height = height + margin.top + margin.bottom + "px"; boxModelStyle.width = width + margin.left + margin.right + "px"; boxBorderStyle.top = margin.top + "px"; boxBorderStyle.left = margin.left + "px"; boxBorderStyle.height = height + "px"; boxBorderStyle.width = width + "px"; boxPaddingStyle.top = margin.top + border.top + "px"; boxPaddingStyle.left = margin.left + border.left + "px"; boxPaddingStyle.height = height - border.top - border.bottom + "px"; boxPaddingStyle.width = width - border.left - border.right + "px"; boxContentStyle.top = margin.top + border.top + padding.top + "px"; boxContentStyle.left = margin.left + border.left + padding.left + "px"; boxContentStyle.height = height - border.top - padding.top - padding.bottom - border.bottom + "px"; boxContentStyle.width = width - border.left - padding.left - padding.right - border.right + "px"; if (!boxModelVisible) this.showBoxModel(); }, hideBoxModel: function() { if (!boxModelVisible) return; offlineFragment.appendChild(boxModel); boxModelVisible = false; }, showBoxModel: function() { if (boxModelVisible) return; if (outlineVisible) this.hideOutline(); Firebug.browser.document.getElementsByTagName("body")[0].appendChild(boxModel); boxModelVisible = true; } Looks like they're using a standard div + css to draw it..... just have to figure out how they're handling the events now... (this file is 28K lines long) There's also this snippet, which I guess retrieves the appropriate object.... although I can't figure out how. They're looking for a class "objectLink-element"... and I have no idea what this "repObject" is. onMouseMove: function(event) { var target = event.srcElement || event.target; var object = getAncestorByClass(target, "objectLink-element"); object = object ? object.repObject : null; if(object && instanceOf(object, "Element") && object.nodeType == 1) { if(object != lastHighlightedObject) { Firebug.Inspector.drawBoxModel(object); object = lastHighlightedObject; } } else Firebug.Inspector.hideBoxModel(); }, I'm thinking that maybe when the mousemove or mouseover event fires for the highlighter node I can somehow pass it along instead? Maybe to node it's covering...?

  Read the article

• Conditional Validation using JQuery Validation Plugin

  - by Steve Kemp

  I have a simple html form that I've added validation to using the JQuery Validation plugin. I have it working for single fields that require a value. I now need to extend that so that if a user answers Yes to a question they must enter something in the Details field, otherwise the Details field can be left blank. I'm using radio buttons to display the Yes/No. Here's my complete html form - I'm not sure where to go from here: <script type="text/javascript" charset="utf-8"> $.metadata.setType("attr", "validate"); $(document).ready(function() { $("#editRecord").validate(); }); </script> <style type="text/css"> .block { display: block; } form.cmxform label.error { display: none; } </style> </head> <body> <div id="header"> <h1> Questions</h1> </div> <div id="content"> <h1> Questions Page 1 </h1> </div> <div id="content"> <h1> </h1> <form class="cmxform" method="post" action="editrecord.php" id="editRecord"> <input type="hidden" name="-action" value="edit"> <h1> Questions </h1> <table width="46%" class="record"> <tr> <td width="21%" valign="top" class="field_name_left"><p>Question 1</p></td> <td width="15%" valign="top" class="field_data"> <label for="Yes"> <input type="radio" name="Question1" value="Yes" validate = "required:true" /> Yes </label> <label for="No"> <input type="radio" name="Question1" value="No" /> No </label> <label for="Question1" class="error">You must answer this question to proceed</label> </td> <td width="64%" valign="top" class="field_data"><strong>Details:</strong> <textarea id = "Details1" class="where" name="Details1" cols="25" rows="2"></textarea></td> </tr> <tr> <td valign="top" class="field_name_left">Question 2</td> <td valign="top" class="field_data"> <label for="Yes"> <input type="radio" name="Question2" value="Yes" validate = "required:true" /> Yes </label> <label for="No"> <input type="radio" name="Question2" value="No" /> No </label> <label for="Question2" class="error">You must answer this question to proceed</label> </td> <td valign="top" class="field_data"><strong>Details:</strong> <textarea id = "Details2" class="where" name="Details2" cols="25" rows="2"></textarea> </td> </tr> <tr class="submit_btn"> <td colspan="3"> <input type="submit" name="-edit" value="Finish"> <input type="reset" name="reset" value="Reset"> </td> </tr> </table> </form> </div> </body> </html>

  Read the article

• Copying one form's values to another form using JQuery

  - by rsturim

  I have a "shipping" form that I want to offer users the ability to copy their input values over to their "billing" form by simply checking a checkbox. I've coded up a solution that works -- but, I'm sort of new to jQuery and wanted some criticism on how I went about achieving this. Is this well done -- any refactorings you'd recommend? Any advice would be much appreciated! The Script <script type="text/javascript"> $(function() { $("#copy").click(function() { if($(this).is(":checked")){ var $allShippingInputs = $(":input:not(input[type=submit])", "form#shipping"); $allShippingInputs.each(function() { var billingInput = "#" + this.name.replace("ship", "bill"); $(billingInput).val($(this).val()); }) //console.log("checked"); } else { $(':input','#billing') .not(':button, :submit, :reset, :hidden') .val('') .removeAttr('checked') .removeAttr('selected'); //console.log("not checked") } }); }); </script> The Form <div> <form action="" method="get" name="shipping" id="shipping"> <fieldset> <legend>Shipping</legend> <ul> <li> <label for="ship_first_name">First Name:</label> <input type="text" name="ship_first_name" id="ship_first_name" value="John" size="" /> </li> <li> <label for="ship_last_name">Last Name:</label> <input type="text" name="ship_last_name" id="ship_last_name" value="Smith" size="" /> </li> <li> <label for="ship_state">State:</label> <select name="ship_state" id="ship_state"> <option value="RI">Rhode Island</option> <option value="VT" selected="selected">Vermont</option> <option value="CT">Connecticut</option> </select> </li> <li> <label for="ship_zip_code">Zip Code</label> <input type="text" name="ship_zip_code" id="ship_zip_code" value="05401" size="8" /> </li> <li> <input type="submit" name="" /> </li> </ul> </fieldset> </form> </div> <div> <form action="" method="get" name="billing" id="billing"> <fieldset> <legend>Billing</legend> <ul> <li> <input type="checkbox" name="copy" id="copy" /> <label for="copy">Same of my shipping</label> </li> <li> <label for="bill_first_name">First Name:</label> <input type="text" name="bill_first_name" id="bill_first_name" value="" size="" /> </li> <li> <label for="bill_last_name">Last Name:</label> <input type="text" name="bill_last_name" id="bill_last_name" value="" size="" /> </li> <li> <label for="bill_state">State:</label> <select name="bill_state" id="bill_state"> <option>-- Choose State --</option> <option value="RI">Rhode Island</option> <option value="VT">Vermont</option> <option value="CT">Connecticut</option> </select> </li> <li> <label for="bill_zip_code">Zip Code</label> <input type="text" name="bill_zip_code" id="bill_zip_code" value="" size="8" /> </li> <li> <input type="submit" name="" /> </li> </ul> </fieldset> </form> </div>

  Read the article

• Setting marker title in Google Maps API 3 using jQuery

  - by bateman_ap

  Hi, I am having a couple of problems with Google Maps and jQuery. Wondered if anyone can help with the smaller of the two problems and hopefully it will help me to fixing the bigger one. I am using the below code to populate a google map, basically it uses generated HTML to populate the maps in the form: <div class="item mapSearch" id="map52.48228_-1.9026:800"> <div class="box-prise"><p>(0.62km away)</p><div class="btn-book-now"> <a href="/venue/800.htm">BOOK NOW</a> </div> </div><img src="http://media.toptable.com/images/thumb/13152.jpg" alt="Metro Bar and Grill" width="60" height="60" /> <div class="info"> <h2><a href="/venue/800.htm">Metro Bar and Grill</a></h2> <p class="address">73 Cornwall Street, Birmingham, B3 2DF</p><strong class="proposal">2 courses £14.50</strong> <dl> <dt>Diner Rating: </dt> <dd>7.8</dd> </dl></div></div> <div class="item mapSearch" id="map52.4754_-1.8999:3195"> <div class="box-prise"><p>(0.97km away)</p><div class="btn-book-now"> <a href="/venue/3195.htm">BOOK NOW</a> </div> </div><img src="http://media.toptable.com/images/thumb/34998.jpg" alt="Filini Restaurant - Birmingham" width="60" height="60" /> <div class="info"> <h2><a href="/venue/3195.htm">Filini Restaurant - Birmingham</a></h2> <p class="address">Radisson Blu Hotel, 12 Holloway Circus, Queensway, Birmingham, B1 1BT</p><strong class="proposal">2 for 1: main courses </strong> <dl> <dt>Diner Rating: </dt> <dd>7.8</dd> </dl></div></div> <div class="item mapSearch" id="map52.47775_-1.90619:10657"> <div class="box-prise"><p>(1.05km away)</p><div class="btn-book-now"> <a href="/venue/10657.htm">BOOK NOW</a> </div> </div><img src="http://media.toptable.com/images/thumb/34963.jpg" alt="B1 " width="60" height="60" /> <div class="info"> <h2><a href="/venue/10657.htm">B1 </a></h2> <p class="address">Central Square , Birmingham, B1 1HH</p><strong class="proposal">25% off food</strong> <dl> <dt>Diner Rating: </dt> <dd>7.9</dd> </dl></div></div> The JavaScript loops though all the divs with class mapSearch and uses this to plot markers using the div ID to get the lat/lon and ID of the venue: var locations = $(".mapSearch"); for (var i=0;i<locations.length;i++) { var id = locations[i].id; if (id) { var jsLonLat = id.substring(3).split(":")[0]; var jsId = id.substring(3).split(":")[1]; var jsLat = jsLonLat.split("_")[0]; var jsLon = jsLonLat.split("_")[1]; var jsName = $("h2").text(); var jsAddress = $("p.address").text(); var latlng = new google.maps.LatLng(jsLat,jsLon); var marker = new google.maps.Marker({ position: latlng, map:map, icon: greenRestaurantImage, title: jsName }); google.maps.event.addListener(marker, 'click', function() { //Check to see if info window already exists if (!infowindow) { //if doesn't exist then create a empty InfoWindow object infowindow = new google.maps.InfoWindow(); } //Set the content of InfoWindow infowindow.setContent(jsAddress); //Tie the InfoWindow to the market infowindow.open(map,marker); }); bounds.extend(latlng); map.fitBounds(bounds); } } The markers all plot OK on the map, however I am having probs with the infoWindow bit. I want to display info about each venue when clicked, however using my code above it just puts all info in one box when clicked, not individually. Hoping it is a simple fix! Hoping once I fix this I can work out a way to get the info window displaying if I hover over the div in the html.

  Read the article

• CSS Menu loses focus when part of jquery hover()

  - by Steve Syfuhs

  I have the following html (viewable at www.communityftw.com) <table width="100%"> <tr> <td style="text-align: left"> <!-- 2008.3.1314.35 --><span id="headerSearch1_sb_form_q_wrapper" class="RadInput_Default" style="white-space:nowrap;"><input value="language..." type="text" size="20" id="headerSearch1_sb_form_q_text" name="headerSearch1_sb_form_q_text" class="riTextBox riEmpty sw_qboxTop" name="q" style="width:140px;" /><input id="headerSearch1_sb_form_q" name="ctl00$headerSearch1$sb_form_q" class="rdfd_" style="visibility:hidden;margin:-18px 0 0 0;width:1px;height:1px;overflow:hidden;border:0;padding:0;" type="text" value="" /><input id="headerSearch1_sb_form_q_ClientState" name="headerSearch1_sb_form_q_ClientState" type="hidden" /></span> <input type="submit" name="ctl00$headerSearch1$sb_form_go" value="" id="headerSearch1_sb_form_go" class="sw_qbtnTop" /> </td> <td style="text-align: left"> <ul id="menu"> <li class="languageContainer"> <div> <a href="#" id="languageField"> <img src="/images/flags/ca.png" alt="Canada" /> Canada (English)</a> </div> <ul id="language"> <li><a href="#" id="A1"> <img src="/images/flags/ca.png" alt="Canada" /> Canada (French)</a> </li> <li><a href="#" id="A2"> <img src="/images/flags/us.png" alt="United States" /> United States</a> </li> <li><a href="#" id="A3"> <img src="/images/flags/de.png" alt="Germany" /> Germany</a> </li> <li><a href="#" id="A4"> <img src="/images/flags/fr.png" alt="France" /> France</a> </li> <li><a href="#" id="A5"> <img src="/images/flags/ru.png" alt="Russia" /> Russia</a> </li> <li class="last"> <img alt="" src="images/langLocDrop_r4_c1.png" /> </li> </ul> </li> </ul> </td> </tr> </table> Javascript/jquery $('#slide').animate({ top: '-=34' }, 1000); $("#slide").hover(function () { $(this).animate({ top: '+=34' }); }, function () { $(this).animate({ top: '-=34' }); }); menu { margin: 0px; padding: 0px; list-style: none; display: inline-block; float: left; z-index: 1000; } menu a { color: #dc2525; text-decoration: none; } menu li { background: none repeat scroll 0 0; cursor: pointer; float: left; position: relative; } menu li a:hover { color: orange; } menu ul { padding: 0px; margin: 0px; display: block; display: inline; } menu li ul { position: absolute; left: -15px; top: 0px; margin-top: 20px; width: 170px; line-height: 16px; background-image: url(/images/langLocDrop_r2_c1.png); display: none; } menu li:hover ul { display: block; } menu li ul li { display: block; margin: 5px 20px; padding: 5px 0px; border-top: dotted 1px #606060; list-style-type: none; } menu li ul li:first-child { border-top: none; } menu li ul li a { display: block; } menu li ul li a:hover { color: orange; } .languageContainer div { display: inline; padding: 5px; } languageField img { display: inline; vertical-align: middle; } language img { display: inline; } menu .last { background: transparent none repeat scroll 0% 0%; margin: 0px; padding: 0px; border: none; position: relative; border: none; height: 0px; } What I'm trying to do is have a menu mostly hidden at the top except when you mouse over it, and then have a submenu (just css driven) pop out when you mouse over the language. What is happening though is that when I move onto the language list, and I go past Germany (~50% down the list?), the hover() loses focus and closes the original menu, which closes the language menu. Any idea's what is causing the issue? Any ideas how to fix the issue? I have tried the hoverIntent() plugin as well to no avail.

  Read the article

< Previous Page | 249 250 251 252 253 254 255 256 257 258 259 260  | Next Page >