jQuery Forum

Setting value of jQuery UI slider to db value
[15Replies]
- 20-Mar-2013 05:33 PM
- Forum: Using jQuery UI
I'm having some difficulty figuring out how to dynamically set the value of a jQuery UI slider to the value fetched from a db. I've tried setting it with a variable equal to the db value, setting the value option directly (value:"<?php echo $rows['simple_lines'];?>"), as well as setting the value inline.

The problem is specific to the jQuery UI slider because I'm able to use the db value to set the value of any other form element, including a slider created with the jQuery Slider plugin.

I'm not sure if this helps or complicates things, but there aren't any values assigned to any of the jQuery UI sliders in the html source (even when the value is set in the usual manner - i.e. value: 3). When I print var_dump($row), the result is: ["slider1"]=> string(1) "5" [7]=> string(1) "5", however the html source code shows: var value_slider_dynamic = "";
1. <?php
2. try {
3. $stmt = $conn->prepare("SELECT * FROM table1 WHERE user_id = :user_id");
4. $stmt->bindValue(':user_id', $user_id);
5. $stmt->execute();
6. } catch(PDOException $e) {
7. echo $e->getMessage();
8. }
9. $row = $stmt->fetch();
10. ?>
11. <div id="slider1" name="slider1"></div>
13. <script>
14. $(function () {
15. var value_slider_dynamic = <?php echo $row['slider1']; ?>;
16. $("#slider1").slider({
17. min: 1,
18. max: 5,
19. value: value_slider_dynamic
20. });
21. });
22. </script>

Position Method - collision: “fit” is moving table elements to top of page instead of shifting them away from bottom of iframe
[2Replies]
- 03-Mar-2013 02:15 PM
- Forum: Using jQuery
I'm trying to use the Position Method on table elements within an iframe in order to shift the elements away from the edge of the iframe if they're too close. I'm using this for faux Select elements that are near the bottom of the page, but instead of shifting the elements with collision: "fit", they're moving to the top of the page.

I tested collision: "flip" just to be sure, and was surprised to discover that it didn't position anything and allowed the element to be cut off. I've also tried adding an option for 'within' (using the div for the page content) but that didn't help either.
JS
1. $("#dropdown_container1").position({
2. my: "left top",
3. at: "left bottom",
4. of: "#dropdown_box1",
5. collision: "fit"
6. });
7. $(function () {
8. $("#dropdown_box1").click(function () {
9. $("#select1").show();
10. });
11. });
12. $(function () {
13. $("#select1").menu();
14. });
HTML
1. <table>
2. <tr>
3. <td>
4. <div id="dropdown_box1" class="dropdown_box"><span>1st Priority</span>/div>
5. <div class="dropdown_container" id="dropdown_container1">
6. <ul id="select1">
7. <!-- Several List items --!>
8. </ul>
9. </div>
10. </td>
11. </tr>
12. </table>
CSS
1. .dropdown_box {display:block; border: 1px solid #d3d3d3;}
2. .dropdown_container {position:relative;}
3. .dropdown_container ul {display:none; position:absolute; top:0px; left:0px; list-style:none; border:1px solid #d3d3d3;}
4. .dropdown_container ul li ul { display:none; position:absolute; top:0px; left:0px; list-style:none; border:1px solid #d3d3d3;}

Trouble using change() function with checkboxes
[4Replies]
- 15-Jan-2013 04:09 AM
- Forum: Using jQuery
I'm having trouble getting this change function to work with checkboxes. What I'm trying to do is initially show "startTrendy" to all users, and then once they answer the question "personal_styles", "startTrendy" is hidden and "startClassic" is displayed unless they've picked either 'Trendy' or 'Modern'.

A standard show/hide function isn't working here because they can select up to 3 values (there are 10 choices), and if any of their choices are 'Trendy' or 'Modern' then "startTrendy" needs to be displayed.

JS
1. $(document).ready(function(){
2. $(".img_change").change(function(){
3. if( $('input[name=personal_styles[]][value=trendy]').is(':checked') ) {
4. $("#startTrendy").show();
5. $("#startClassic").hide();
6. } else {
7. $("#startClassic").show();
8. $("#startTrendy").hide();
9. }
10. });
11. });
HTML
1. <form method="post" action="#">
2. <div id="startTrendy" >Trendy Pics</div>
3. <div id="startClassic" style="display:none">Classic Pics</div>
5. <input type=checkbox name="personal_styles[]" value="trendy" class="img_change">Trendy
6. <input type=checkbox name="personal_styles[]" value="modern" class="img_change">Modern
7. <input type=checkbox name="personal_styles[]" value="feminine" class="img_change" >Feminine
8. <input type=checkbox name="personal_styles[]" value="antique" class="img_change">Antique
9. <input type=checkbox name="personal_styles[]" value="classic" class="img_change" >Classic
10. </form>
This is a simplified version of my code (since I can't get it to work for one value I couldn't be sure of the correct syntax to use for an OR statement, although I know it would be similar to this:
1. $("[name=personal_styles[]]").val() === "trendy" || $("[name=personal_styles[]]").val() === "modern")

Correct syntax for Definition List (<dl>) in jQuery UI's Nested Menu?
[0Replies]
- 02-Jan-2013 08:38 PM
- Forum: Using jQuery UI
I’m trying to combine jQuery UI’s nested menu with definition list (<dl>) elements, but I'm having trouble figuring out the correct syntax because a nested menu starts with <ul> and a definition list starts with <dl>.

My reason for doing this is to create nested dropdown boxes, and I'm using the script and css in this fiddle to have the DL elements look and act like dropdown boxes.

This code is the closest I've gotten, but it's not quite right because when the <dl> element is clicked, instead of only showing the dt elements (Coffee, Soft Drinks, Water), it quickly shows all of the list items before collapsing the way it should to only show the dt elements.

    <dl class="dropdown">
    <dt><a href="#"><span>Drinks</span></a></dt>
    <dd>
    <ul id="drinks">
        <li>
        <a href="#">Coffee</a>
            <ul>
            ...
            </ul>
        </li>
        <li><a href="#">Soft Drinks</a></li>
        <li><a href="#">Water</a></li>
    </ul>
    </dd>
    </dl>

Adding background colors to multiselect options
[0Replies]
- 23-Dec-2012 07:23 PM
- Forum: Using jQuery Plugins
I have a multiselect element where the user select colors and I'd like to add a visual representation of each color - (preferably dynamically, but I'd be happy to hard-code it if that's significantly easier).

I'm using the jQuery UI MultiSelect widget Any suggestions?

Difficulty using revamped position utility with multiselect widget
[14Replies]
- 22-Dec-2012 07:27 PM
- Forum: Using jQuery
I'm using Eric Hynds Multiselect Widget, but I'm having trouble getting the position option in the widget to work with jquery-1.8.2 and/or jquery-ui-1.9.1.

I believe that recent changes to the position utility are preventing it from currently working and I would love some help figuring out how to fix this issue. The working demo of the widget's position option is located here, but that uses jQuery 1.4.4, and more recent versions of jQuery prevent the multiselect elements from opening.

How can I prevent an element with the show() function on a parent page from closing when an iframe is opened?
[4Replies]
- 16-Dec-2012 12:35 PM
- Forum: Using jQuery
How can I prevent an element with the show() function on a parent page from closing when an iframe is opened? I'm not sure why a change would be triggered, but it's only allowing it to either open with the parent and close when the iframe is opened or vice versa.

I need to keep the element 'notice' visible until a user has created an account (or specifically closed it), and the following code works to show the element to the correct user's open it

I've also tried addClass(), adding another show() function to the iframe and adding an onclick function to the link, but the element still closes when an iframe is opened.

PHP
1. $logged_in = (isset($_SESSION['SESS_USER_ID']));
Javascript
1. <?php if ($logged_in) : ?>
2. parent.$('#notice').hide();
3. <?php else : ?>
4. parent.$('#notice').show();
5. <?php endif; ?>

How can I easily change the options used or a function called in specific instances in this function which replaces alert() messages with jQuery modal messages?
[1Reply]
- 13-Dec-2012 05:10 PM
- Forum: Using jQuery
The following function replaces alert() messages with jQuery modal messages. How can I easily change the width and dialogClass or not call parent.$.fancybox.close(); in specific instances?
1. window.old_alert = window.alert;
2. window.alert = function(message, fallback){
3. if(fallback)
4. {
5. old_alert(message);
6. return;
7. }
8. $(document.createElement('div'))
9. .attr({title: 'Alert', 'class': 'alert'})
10. .html(message)
11. .dialog({
12. buttons: {OK: function(){$(this).dialog('close');}},
13. close: function(){$(this).remove();
14. parent.$.fancybox.close();},
15. draggable: false,
16. modal: true,
17. resizable: false,
18. dialogClass: "alert_message",
19. width: '400'
20. });
21. $(".ui-dialog-titlebar").hide();
22. };

How can I use jQuery's .before() function to trigger an alert?
[14Replies]
- 13-Dec-2012 03:10 PM
- Forum: Using jQuery
How can I use jQuery's .before() function to trigger an alert? I know how to use $(this).before(); to change an iframe's content, but I can't figure out how to use it to trigger an alert before doing something.In the function below, I want to have an alert instead of this line:
```
$(this).before("Thank you for creating an account");
```
1. success: function () { $("#customer_info").fadeOut("fast", function(){ $(this).before("Thank you for creating an account"); setTimeout("$.fancybox.close()", 1000); }); }

How can I remove the horizontal line at the bottom of a Modal Message box?
[9Replies]
- 13-Dec-2012 12:31 AM
- Forum: Using jQuery UI
How can I remove the horizontal line at the bottom of a Modal Message box (that appears above the 'ok' button)?

I'm using jQuery UI 1.9

jQuery special event hoverintent isn’t working properly with `mouseleave` functions
[6Replies]
- 08-Dec-2012 09:10 PM
- Forum: Using jQuery
I'm having difficulty getting the `jQuery` special event `hoverintent` to work with `mouseleave` functions. *(I’ve also tried substituting `mouseout` for `mouseleave`)*

I need to utilize the same functionality so that the `mouseleave` event is only fired when the user's mouse has slowed down beneath the sensitivity threshold.

I’ve included the script below, and have also uploaded a working example to http://click2fit.com/test_files/accordion_hoverintent.html
1. $(function () {
2. $(".accordion_close_leave").accordion({
3. event: "click hoverintent",
4. collapsible: true,
5. active: false,
6. autoHeight: false,
7. }).mouseleave(function() {
8. $(this).accordion({ active: false});
9. });
11. var cfg = ($.hoverintent = {
12. sensitivity: 100,
13. interval: 500
14. });
15. $.event.special.hoverintent = {
16. setup: function() {
17. $( this ).bind( "mouseover", jQuery.event.special.hoverintent.handler );
18. },
19. teardown: function() {
20. $( this ).unbind( "mouseover", jQuery.event.special.hoverintent.handler );
21. },
22. handler: function( event ) {
23. var that = this,
24. args = arguments,
25. target = $( event.target ),
26. cX, cY, pX, pY;
27. function track( event ) {
28. cX = event.pageX;
29. cY = event.pageY;
30. };
31. pX = event.pageX;
32. pY = event.pageY;
33. function clear() {
34. target
35. .unbind( "mousemove", track )
36. .unbind( "mouseout", arguments.callee );
37. clearTimeout( timeout );
38. }
39. function handler() {
40. if ( ( Math.abs( pX - cX ) + Math.abs( pY - cY ) ) < cfg.sensitivity ) {
41. clear();
42. event.type = "hoverintent";
43. event.originalEvent = {};
44. jQuery.event.handle.apply( that, args );
45. } else {
46. pX = cX;
47. pY = cY;
48. timeout = setTimeout( handler, cfg.interval );
49. }
50. }
51. var timeout = setTimeout( handler, cfg.interval );
52. target.mousemove( track ).mouseout( clear );
53. return true;
54. }
55. };

How can I get this Show() function to view selected=selected as a value so that it will work with values fetched from a database?
[2Replies]
- 06-Dec-2012 07:16 PM
- Forum: Using jQuery
This show() function works correctly if values are hard coded and/or selected on the page, but isn't working if the values have been retrieved from the database.

This script doesn't seem to be recognizing the values even though they're echo'd properly and are being utilized by in 2 different ways on the page - to display the values as text, and to set the values of the relevant input elements (the user toggles between these depending if they're in View or Edit), and the HTML source code shows those values as well as setting input elements as selected="selected" or checked=checked.
1. $(document).ready(function () {
2. $("#style_row1, #style_row2").hide();
3. if( $("[name=style_ranking_1]").val() === "Null" || $("[name=style_ranking_1]").val() === "")
4. {$("#style_row1").show();}
5. else {$("#style_row2").show()};
6. });
This function is being used on the customer's account page to show or hide information *(typically an entire row or div)* if particular questions haven't been answered. The initial form consists primarily of Select elements, so the values indicating that a question is unanswered may be either Null or "" (if it's empty). A fiddle of the script is available here: http://jsfiddle.net/chayacooper/u2eyM/70/

I also created a 2nd fiddle with the relevant HTML (seen in source) which doesn't work correctly. http://jsfiddle.net/chayacooper/8Mut9/9/. The php causes 'Chic' to be displayed when it echo's $row['style_ranking_1'] *(represented in the HTML in 2 places: `<span class="customer_data_field textbox_toggle">Chic</span>` and `<option selected="selected" value="Chic">Chic</option>`,* but the user is shown row 1 instead of row 2.

Automatically set every option in a multi-select element as selected=selected when the options are being added dynamically
[13Replies]
- 05-Dec-2012 05:22 PM
- Forum: Using jQuery
How can I automatically set every option in a multi-select element as selected=selected when the options are being added dynamically?

The script below adds options to the multi-select target elements based on what the user's selected in the elements which trigger the function. The options aren't added to the HTML source code, but when the elements are visible you see them, and if manually selected they are correctly inserted into the database. You can see a functional example of it in this fiddle: http://jsfiddle.net/chayacooper/vWLEn/229/

These are hidden form fields, so for my purposes I need anything added with this script to be set as `selected = selected`so that it will be submitted to the database.
1. $('.complaint .complaintOpt').change(function() {
    var $container = $(this).parent(),
    $item = $container.find('.complaintItem'),
    itemId = $item.attr('id'),
    itemVal = $item.val(),
    itemText = $item.find('input[value=' + itemVal + ']').html(),
    rank = $container.find('.complaintRanking').val();
    // Ignore if not a complete complaint
    if((itemVal == 'Null') || (rank == 'Null')) {
    return;
    }
    // Remove any existing complaint
    $('select.priorityIssue option.' + itemId).remove();
    var $selectedOption = $item.find('option:selected');
    var $checkedInput = $item.find('input:checked');
    var targetBase = '';
    if($selectedOption.hasClass('goal-increase')) {
    targetBase = '#priorityIncrease';
    }
    if(targetBase != '') {
    // Add new complaint
    $(targetBase + rank + 'Issues')
    .append($('<option>' + $item.attr('id') + '</option>').addClass(itemId));
    }
  });

Calling jQuery function in php (or modifying javascript so php runs the remaining code)
[6Replies]
- 30-Nov-2012 07:42 PM
- Forum: Using jQuery
I was having difficulty calling the necessary jQuery functions in php so I added them to the javascript, but the method I’m familiar with (the success function) prevents the php from performing anything other than the INSERT INTO and SELECT queries. How would I change this script so that it completes the php, and/or how would I combine the code so that the following can be accomplished?

Validates form (with separate rules for Men and Women)

If validation is successful:

Both Genders:
parent.close_field('notice'); (currently only works in javascript)

If Gender is Female:
If Gender is Male:
1. Generates email notifying me of the request
2. INSERT information into invite_requests table
3. Echo message to Men (currently in both; Preferred method is in php)
4. Close Fancybox iframe (currently only works in javascript)
I'm using this jQuery validation plugin and fancybox2
Javascript
1. var $custInfo = $("#customer_info");
2. $(document).ready(function () {
3. var validator = $custInfo.validate({
4. rules: {...},
5. messages: {...},
6. errorLabelContainer: "#messageBox",
7. submitHandler: function () {
8. $custInfo.ajaxSubmit({
9. // Beginning of Temporary Script (This portion of the script was temporarily inserted because I didn't know how to call the close functions from the php
10. success: function () {
11. if ($('input[name=gender][value=female]').is(':checked')) {
12. parent.close_field('notice');
13. window.location.href = "page1.html";
14. } else if ($('input[name=gender][value=male]').is(':checked')) {
15. parent.close_field('notice');
16. parent.$.fancybox.close();
17. alert("This isn’t available yet for men, but we’ll send you an invitation as soon as it is");
18. }
19. }
20. // End of Temporary Script
21. });
22. }
23. });
24. $custInfo.find("input[name=gender]").change(function () {
25. if ($(this).val() == "male") {$custInfo.submit();}
26. });
27. });
PHP
1. <?php
2. //Start session and connection to database goes here
3. //Function to sanitize values received from the form goes here
4. $gender = $_POST['gender'];
5. if ($gender==="female" ) {
6. // INSERT information into customer_info table
7. $qry = "INSERT INTO customer_info(fname, lname, gender, zip, email, phone, terms, security_question, security_answer, participating_retailers, notify_new_items, notify_promotions, priority1, priority2, priority3, priority4, priority5, gift_privacy, user_name, password, Quickfill) VALUES('$_POST[fname]','$_POST[lname]','$_POST[gender]','$_POST[zip]','$_POST[email]','$_POST[phone]','$_POST[terms]','$_POST[security_question]','$_POST[security_answer]','$_POST[participating_retailers]','$_POST[notify_new_items]','$_POST[notify_promotions]','$_POST[priority1]','$_POST[priority2]','$_POST[priority3]','$_POST[priority4]','$_POST[priority5]','$_POST[gift_privacy]','$user_name','".md5($_POST['password'])."','$_POST[Quickfill]')";
8. $result = @mysql_query($qry);
9. if($result) {
10. // Identifies user_id assigned to this account
11. $qry="SELECT * FROM customer_info WHERE user_name='$user_name' AND password='".md5($_POST['password'])."'";
12. $result=mysql_query($qry);
13. if($result) {
14. if(mysql_num_rows($result) == 1) {
15. session_regenerate_id();
16. $member = mysql_fetch_assoc($result);
17. $_SESSION['SESS_USER_ID'] = $member['user_id'];
18. $_SESSION['SESS_USER_NAME'] = $member['user_name'];
19. session_write_close();
20. // Redirects user to the next page
21. header("location: page1.html");
22. exit();
23. }else { //user_name failed
24. header("location: login_failed.html");
25. exit(); }
26. }else { die("Unable to access your account (Error Message 1)"); }
27. }else { die("Unable to access your account (Error Message 2)"); }
28. }
30. // If Gender is Male
31. else {
32. // Notify us of request via email
33. $sendto = "info@click2fit.com";$userfname = $_POST['fname'];$userlname = $_POST['lname'];$usermail = $_POST['email'];$gender = $_POST['gender'];$subject = "Invite Request - " . ($gender) . " ";
34. // INSERT information into invite_requests table
35. $qry = "INSERT INTO invite_requests(fname, lname, gender, zip, email, phone, terms, participating_retailers, notify_new_items, notify_promotions, priority1, priority2, priority3, priority4, priority5, gift_privacy, user_name, password, Quickfill) VALUES('$_POST[fname]','$_POST[lname]','$_POST[gender]','$_POST[zip]','$_POST[email]','$_POST[phone]','$_POST[terms]','$_POST[participating_retailers]','$_POST[notify_new_items]','$_POST[notify_promotions]','$_POST[priority1]','$_POST[priority2]','$_POST[priority3]','$_POST[priority4]','$_POST[priority5]','$_POST[gift_privacy]','$user_name','".md5($_POST['password'])."','$_POST[Quickfill]')";
36. $result = @mysql_query($qry);
37. // Echo message to Men
38. echo "<p><strong>Click2Fit is not yet available for men, but we'll be sure to send an invitation as soon as it is</strong></p>";
39. // Redirects user - This should be replaced with the function which closes the fancybox iframe
40. header("location: home.html");
41. exit();
42. }
43. ?>

Tooltip arrow isn't displaying properly when moved to left side of tooltip (jQuery UI 1.9)
[0Replies]
- 30-Nov-2012 05:54 PM
- Forum: Using jQuery UI
I'm using a speech bubble style tooltip based on the jquery ui tooltip widget 'Custom Styling' demo, but I'm having trouble properly displaying the arrow when I need it on the left side of the tooltip instead of on the top or bottom.

Can someone help me fix this code (it cuts off the tip and displays too large a section of the arrow)?
1. <style type="text/css">
3. .ui-tooltip.menu_info {
4. max-width: 200px;
5. }
6. * html .ui-tooltip {
7. background-image: none;
8. }
9. body .ui-tooltip { border-width: 1px; }
10. .ui-tooltip, .arrow:after, .arrow_left_side:after {
11. background: white;
12. border: 1px solid #999;
14. }
15. .ui-tooltip {
16. padding: 10px 12px;
17. color: Black;
18. font: 8pt "Helvetica Neue", Sans-Serif;
19. max-width: 150px;
20. border: 1px solid #999;
21. position: absolute;
22. }
23. .arrow_left_side {
24. height: 70px;
25. width: 8px;
26. overflow: hidden;
27. position: absolute;
28. top: 0px;
29. margin-top: 5px;
30. left: -8px;
31. }
32. .arrow_left_side:after {
33. content: "";
34. position: absolute;
35. width: 25px; height: 25px;
36. -webkit-transform: rotate(45deg);
37. -moz-transform: rotate(45deg);
38. -ms-transform: rotate(45deg);
39. -o-transform: rotate(45deg);
40. tranform: rotate(45deg);
41. }
42. </style>
43. <script>
44. $(function() {
45. $('.menu_info').tooltip({
46. position: {
47. my: "left+20 center",
48. at: "right center",
49. using: function (position, feedback) {
50. $(this).css(position);
51. $("<div>")
52. .addClass("arrow_left_side")
53. .addClass(feedback.vertical)
54. .addClass(feedback.horizontal)
55. .appendTo(this);
56. }
57. }
58. });
59. });
60. </script>

toggleClass() isn't working properly when I combine it with hide() in this function.
[16Replies]
- 28-Nov-2012 05:00 PM
- Forum: Using jQuery
I'm trying to combine these toggleClass() and hide() functions, but when they are combined the toggle function only works properly with slideDown() and isn't toggling back as it should with slideUp()

I'm trying to combine this toggleClass() function:
1. $("#fauxAccordion").click(function () {
2. $(this).toggleClass("accordion_arrow_south");
3. });
With this hide() function:
1. $(function () {
                  $(".accordionInner").hide();
                  $(".accordionTrigger").hoverIntent(function () {
                      $(".accordionInner").slideDown();
                  }, function () {
                      $(".accordionInner").slideUp("slow");
                  });
                  $(".accordion_reclose").hoverIntent(cfg);
  });
2. var cfg = ($.hoverintent = {
3. sensitivity: 100,
4. interval: 500
5. });
The combined function
1. $(function () {
2. $(".accordionInner").hide();
3. $(".accordionTrigger").hoverIntent(function () {
4. $(".accordionInner").slideDown();
5. $("#fauxAccordion").toggleClass("accordion_arrow_south");
6. }, function () {
7. $(".accordionInner").slideUp("slow");
8. $("#fauxAccordion").toggleClass("accordion_arrow_east");
9. });
10. $(".accordion_reclose").hoverIntent(cfg);
11. });
13. var cfg = ($.hoverintent = {
14. sensitivity: 100,
15. interval: 500
16. });
HTML
1. <div class="accordionTrigger">
2. <div class="header_10"><b>Header Goes Here<span style="padding-left:2em" class="accordion_arrow_east" id="fauxAccordion"></span></b></div>
3. <div class=" accordionInner">
4. Content Goes Here
5. </div>
6. </div>
7. <div class="accordion_reclose">
  Next Section
  </div>
The div following accordionInner is assigned a class of accordion_reclose, so that the accordionInner content slides up and the icon class changes.

I'm essentially trying to replicate an accordion because I haven't been able to get hoverIntent to work with jQuery UI's accordion (I have a row of dropdowns in an accordion, and without hoverIntent the accordion closes as soon as the user moves off the first Select element).

Need help creating a function to add an Object to a nested menu
[4Replies]
- 24-Nov-2012 03:50 PM
- Forum: Using jQuery
I wasn't able to find any plugins for creating nested Select elements (where a 2nd dropdown flies out when you mouseover an option in the parent element), so I'd like to create a function which would modify a nested menu from jQuery UI's menu widget to act as a nested dropdown. I'm using this in a form, and I need to capture the users input the way a dropdown box does in a form.

I'm trying to create a shortcut so the user can either select a value from "Drink" or from "Coffee" without requiring extra steps on the part of the user or taking up more screen space. If I were just creating regular dropdowns these would be set up as 5 Select element named Drinks, Coffee, Tea, Soft Drinks and Water, but in this situation I want to display <select name="Drinks"> and when you mouseover <select name="Drinks"><option value="Coffee"> then <select name="Coffee"> flies out of <select name="Drinks">, <select name="Tea"> flies out when you mouseover <select name="Drinks"><option value="Tea">, etc.

I understand that this can be done by calling an object's innerHTML to create a value for the object, but I haven't been able to figure out how to do it. Something along the lines of:
1. <li onclick="drink(this)">Coffee</li>
2. function drink(obj) {
  value = obj.innerHTML();
  }
This is an example of what I would like to convert, but instead of this being displayed as a nested menu (which you can see at http://click2fit.com/flyout_menu2.html) I would like to create a dropdown with 4 selectable options (Coffee, Tea, Soft Drinks, Water), and each of those options has a nested Select element (the options for Coffee are Americano, Latte, etc.).

<ul id="drinks">
    <li>
        <a href="#">Drinks</a>
        <ul>
            <li>
            <a href="#">Coffee</a>
                <ul>
                    <li><a href="#">Americano</a></li>
                    <li><a href="#">Latte</a></li>
                    <li><a href="#">Cappuchino</a></li>
                    <li><a href="#">Espresso</a></li>
                    <li><a href="#">Iced</a></li>
                </ul>
            </li>
            <li><a href="#">Tea</a>
            <!-- Nested Tea Menu --!>
            </li>
            <li><a href="#">Soft Drinks</a>
              <!-- Nested Soft Drinks Menu --!>
            </li>
             <li><a href="#">Water</a>
            <!-- Nested Water Menu --!>
            </li>
        </ul>
    </li>

Calling a function if checkbox is checked instead of onClick
[49Replies]
- 19-Nov-2012 07:01 PM
- Forum: Using jQuery
I need to call this function if a checkbox is checked instead of being triggered by onClick:
1. onclick="toggle_colorbox(this);"
How can I insert it into the following function?
1. $('.Colorbox').change(function() {
  if ($('input:checkbox[name=colors_love[]]:checked')) {
  }
  });
Function toggle_colorbox(td) changes a boxes opacity and displays a check mark to indicate that a color has been selected, but because I am pre-selecting the values matching a user's account information, I need to initiate the function if that particular checkbox is checked.

If you'd like to see it in context http://jsfiddle.net/chayanyc/KdcJY/104/

Modify this Switch function to use with checkboxes or radio buttons instead of Select elements
[7Replies]
- 16-Nov-2012 04:53 PM
- Forum: Using jQuery
This Switch function sets a checkbox to checked based on the value of Select elements, but I haven't been successful at modifying it to use with checkboxes or radio buttons.

I created this fiddle with both a Select element (which works properly) as well as the code I'm using instead for radio buttons and checkboxes (which doesn't do everything I need) http://jsfiddle.net/Cfcq6/118/

Switch function which works for Select Elements
1. $('.complaint1').change(function () { $('input[name="modify_increase"]').removeAttr("checked"); $('input[name="modify_decrease"]').removeAttr("checked"); switch($('[name=complaint1]').val()){ case "Too_small": $('input[name="modify_increase"]')[0].checked = true; break; case "Too_big": $('input[name="modify_decrease"]')[0].checked = true; break; } });

Set a checkbox to unchecked if a Checkbox or Radio button isn't checked, when specifying by name and value
[2Replies]
- 16-Nov-2012 03:55 PM
- Forum: Using jQuery
I need to set a checkbox to be either checked or unchecked based on whether specific Checkboxes or Radio button are selected.

I know how how to do this for checkboxes when I specify an id # for each element and use if ($(this).attr('checked'), but I can't get it to uncheck when I specify the names and values of the checkboxes instead.

I also haven't been able to get it to uncheck when a radio button is unchecked, even when I specify an id # for each element and use if ($(this).attr('checked'). Ideally, I'd like to specify the names and values of the radio buttons instead of using ($(this).attr('checked'), but help with either method (or another one if there's a better way to go) would be appreciated. I also included below a switch function which I'm using for Select elements, but which I've been successful at modifying to use with checkboxes or radio buttons.

I created a working fiddle of this at http://jsfiddle.net/Cfcq6/116/

Checkbox Code 2 - This code both Checks & Unchecks the element
1. $('#complaint1').change(function() {
    if ($(this).attr('checked')) {
    $('input[name="modify_increase"]')[0].checked = true;
    }
    else {
    $('input[name="modify_increase"]')[0].checked = false;
    }
  });
Checkbox Code 2 - These Check but don't uncheck the element when unselected
1. $('.complaint2').change(function() {
    if ($('input:checkbox[name=complaint2]:checked').val("Too_small")) {
    $('input[name="modify_increase"]')[0].checked = true;
    }
    else {
    $('input[name="modify_increase"]')[0].checked = false;
    }
  });
Radio Button - These check but don't uncheck the element when unselected
1. $('#complaint3').change(function() {
    if ($(this).attr('checked')) {
    $('input[name="modify_increase"]')[0].checked = true;
    }
    else {
    $('input[name="modify_increase"]')[0].checked = false;
    }
  });
Switch function which works for Select Elements
1. $('.complaint1').change(function () {
    $('input[name="modify_increase"]').removeAttr("checked");
    $('input[name="modify_decrease"]').removeAttr("checked");
    switch($('[name=complaint1]').val()){
    case "Too_small":
    $('input[name="modify_increase"]')[0].checked = true;
    break;
    case "Too_big":
    $('input[name="modify_decrease"]')[0].checked = true;
    break;
    }
  });

How do I set the value of <select multiple="multiple"> without deselecting the other elements?
[14Replies]
- 16-Nov-2012 01:09 PM
- Forum: Using jQuery
How do I set the value of <select multiple="multiple"> without deselecting the other elements? I'm trying to set it from more than one source, but this code is deselecting anything already selected when a new element is selected.
1. $('.features_rank').change(function () {
2. switch ($('[name=vehicle]').val()) {
3. case "1":
4. $('[name=multiple]').val(["Multiple"]);
5. break;
6. case "2":
7. $('[name=multiple]').val(["Multiple2"]);
8. break;
9. case "3":
10. $('[name=multiple]').val(["Multiple3"]);
11. break;
12. }

Get value of Select element and then set a checkbox to checked using IF statement
[4Replies]
- 15-Nov-2012 03:48 AM
- Forum: Using jQuery
I need to set a checkbox to checked based on the value of a Select element. I know how to do this from a checkbox or radio button, but I can't seem get it to work from a Select element.

This code works if triggered by a checkbox or radio button:
1. $('#complaint').change(function () {
2. if ($(this).attr('checked')) {
3. $('input[name="modify_increase"]')[0].checked = true;
4. }
5. else {
6. $('input[name="modify_increase"]')[0].checked = false;
7. }
8. });
I've tried these IF statements with the code below:
1. if ($('select[name="complaint"]').val("Too_small") {...}
2. if ($('#complaint :selected'').val("Too_Small") {...}
3. if ($(this).attr('checked')) {...}
1. <select name="complaint" id="complaint">
2. <option value="Too_small">Too Small</option>
3. <option value="Too_big" >Too big</option>
4. <option value="Too_expensive">Too expensive</option>
5. </select>
6. $('#complaint).change(function () {
7. if ($('select[name="complaint"]').val("Too_small") {
8. $('[name="modify_increase"]')[0].checked = true;
9. }
10. if ($('select[name="complaint"]').val("Too_big") {
11. $('[name="modify_decrease"]')[0].checked = true;
12. }
13. if ($('select[name="complaint"]').val("Too_expensive") {
14. $('[name="modify_price"]')[0].checked = true;
15. }
16. else {
17. $('input[name="modify_increase"]')[0].checked = false;
18. }
19. });
I've also tried assigning id's to each option value and the following code:
1. $('#complaint1').change(function () {
2. if ($(this).attr('checked')) {
3. $('[name="modify_increase"]')[0].checked = true;
4. }
5. else {
6. $('input[name="modify_increase"]')[0].checked = false;
7. }
8. });
9. $('#complaint2').change(function () {
10. if ($(this).attr('checked')) {
11. $('[name="modify_decrease"]')[1].checked = true;
12. }
13. else {
14. $('input[name="modify_decrease"]')[1].checked = false;
15. }
16. });
17. $('#complaint3').change(function () {
18. if ($(this).attr('checked')) {
19. $('[name="modify_price"]')[2].checked = true;
20. }
21. else {
22. $('input[name="modify_price"]')[2].checked = false;
23. }
24. });

Does the new jQuery UI Tooltip widget display properly when triggered in modal and/or iframe elements?
[6Replies]
- 24-Oct-2012 02:32 PM
- Forum: Using jQuery UI
Does anyone know if the new jQuery UI 1.9 tooltip widget displays properly when triggered in modal and/or iframe elements?

I'm crossing my fingers because I've run into a problem with most tooltip plugins either not displaying properly in either modals or iframes or require complicated fixes to do so. Tooltips inside iframes are confined within the iframe region and can be cut off unless initialized from the parent document (which I've had trouble figuring out how to actually do), and tooltips within modals are both dimmed by the overlay and partially obscured by the modal (and the z-index and opacity can be difficult to reset).

How do I validate an invitation code?
[0Replies]
- 23-Oct-2012 04:55 PM
- Forum: Using jQuery Plugins
How would I validate an invitation code? I've tried modifying the code which I use to check if a username is available, but it is validating the user regardless of whether or not a valid code has been entered.

I'm using this jQuery Validation plugin
1. $('#loginForm').validate({
       rules: {user_name: "required", password: "required",
        invitation_code: {
                  required: true,
                  remote: {
                      //check if invitation_code exists or not
                      url: "check_invitation_code.php",
                      type: "post",
                      data: {
                          invitation_code: function() {
                              return $("#invitation_code").val();
                          }
                      }
                  }
              }
  
       },
                 messages: {user_name: "", password: "", invitation_code: "",},
         });
        });
  ?php
      //Start session
      session_start();
  
      //Include database connection details
      require_once('config.php');
  
        $invitation_code = $_REQUEST['invitation_code'];
  
      //Check if invitation code is registered
      if($invitation_code != '') {
          $qry = "SELECT * FROM invite_codes WHERE invitation_code='$invitation_code'";
          $result = mysql_query($qry);
          if($result) {
              if(mysql_num_rows($result) > 0) {
                  $valid="true";
              } else {
                  $valid="false";
              }
             echo $valid;
          }
      }
  
  ?>

Adding an if/else statement to a $(this).before function
[23Replies]
- 16-Oct-2012 09:38 PM
- Forum: Using jQuery
What would be the correct way to add an if/else statement to a $(this).before function? I need the message to change based on the gender they've selected.

This shows the correct message, but doesn't display it correctly (it's displayed on a new page, instead of the same page before the fancybox modal closes).
1. if ($("input[name='gender']:checked").val() == 'female') {
2. $(this).before("Message Women...");
3. }
4. else {
5. $(this).before("Message Men...");
6. }
And this didn't work:
1. if(gender==="female" {
2. $(this).before("Message Women...");
3. }
4. else {
5. $(this).before("Message Men...");
6. }
This is how I was doing it previously in the php file, but I needed to change it when I switched to using a fancybox modal:
1. if ( $gender==="female" ) {
2. echo ("Message Women...");
3. }
4. else{ echo ("Message Men...");
5. }
6. }
7. else {
8. echo "Unable to submit message";
9. }
The full script is:
1. submitHandler: function (form) {
2. $.ajax({
3. type: 'POST',
4. url: 'invite-exec.php',
5. data: $("#invite").serialize(),
6. success: function(data) {
7. if(data == "true") {
8. $("#invite").fadeOut("fast", function(){
9. $(this).before("Message for either gender is currently displayed");
10. setTimeout("$.fancybox.close()", 5000);
11. });
12. }
13. else $("#invite").fadeOut("fast", function(){
14. $(this).before("Unable to submit message");
15. setTimeout("$.fancybox.close()", 5000);
16. });
17. }
18. });
19. }

Response title

Attachments

jQuery Forum

Activity Trend

Radio Button - These check but don't uncheck the element when unselected