Response title
This is preview!
- Screen name: Chaya Cooper
Chaya Cooper's Profile
46 Posts
190 Responses
0
Followers
Activity Trend
Last 30 days
Loading Chart...
Show:
- Expanded view
- List view
- 26-Apr-2015 09:42 PM
- Forum: About the jQuery Forum
Logging in from the menu with a Google account works just fine, but everywhere else on on the site seems to use an API that Google no longer supports because you're redirected this page on google's site which displays the following message:
OpenID 2.0 for Google Accounts has gone away
If you've been redirected to this page, it means that you're using a website that doesn't support the latest sign-in standards from Google. We no longer provide this legacy sign-in service for Google accounts, and recommend using an alternative method to sign in on that website. If you previously used your Google account to sign in, you may be able to recover your account using a “forgot password” feature, or by contacting that websites’ support team.
Some websites use OpenID 2.0 for authentication when you're signing in, and to access data that you've given them permission to access. OpenID 2.0 was replaced by OpenID Connect, and since April 20, 2015, no longer works for Google Accounts. OpenID 2.0 support was shut down in order to focus on the newer open standard OpenID Connect, which provides greater security for your account.
If you're a developer of an application that uses OpenID 2.0, you should migrate to OpenID Connect. Learn how to migrate to OpenID Connect.
- 22-Apr-2015 11:55 PM
- Forum: Using jQuery UI
I'm fixing up some jQuery functions that I wrote eons ago, and I can't seem to get the syntax right for inserting a simple function that should be called when the event is triggered.
It was nice and easy to insert the show() to the mouseleave function, but I've run into a wall on how to insert a simple hide() function into the event: "click hoverintent".-
$(".accordion_closed").accordion({
event: "click hoverintent",
collapsible: true,
active: false,
autoHeight: false,
Height: 20,
}).mouseleave(function () {
$(this).accordion({ active: false });
$("#HideThis").show();
});
- For some reason, the background color of the jQuery UI Accordion seems to be transparent. This is a bit of an issue because some of accordions expand over existing fixed content, but I'm having some trouble setting it to opaque with the usual suspects.
- background-color:
white;
opacity: 1;
z-index: 0;
I've tried setting these in both the CSS .ui-accordion .ui-accordion-content as well as directly in the HTML.
Any suggestions?
- 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 printvar_dump($row),the result is:["slider1"]=> string(1) "5" [7]=> string(1) "5"var value_slider_dynamic = "";<?phptry {$stmt = $conn->prepare("SELECT * FROM table1 WHERE user_id = :user_id");$stmt->bindValue(':user_id', $user_id);$stmt->execute();} catch(PDOException $e) {echo $e->getMessage();}$row = $stmt->fetch();?><div id="slider1" name="slider1"></div><script>$(function () {var value_slider_dynamic = <?php echo $row['slider1']; ?>;$("#slider1").slider({min: 1,max: 5,value: value_slider_dynamic});});</script>
- 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
- $("#dropdown_container1").position({
- my: "left top",
- at: "left bottom",
- of: "#dropdown_box1",
- collision: "fit"
- });
- $(function () {
- $("#dropdown_box1").click(function () {
- $("#select1").show();
- });
- });
- $(function () {
- $("#select1").menu();
- });
HTML
- <table>
- <tr>
- <td>
- <div id="dropdown_box1" class="dropdown_box"><span>1st Priority</span>/div>
- <div class="dropdown_container" id="dropdown_container1">
- <ul id="select1">
- <!-- Several List items --!>
- </ul>
- </div>
- </td>
- </tr>
- </table>
CSS
- .dropdown_box {display:block; border: 1px solid #d3d3d3;}
- .dropdown_container {position:relative;}
- .dropdown_container ul {display:none; position:absolute; top:0px; left:0px; list-style:none; border:1px solid #d3d3d3;}
- .dropdown_container ul li ul { display:none; position:absolute; top:0px; left:0px; list-style:none; border:1px solid #d3d3d3;}
- 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- $(document).ready(function(){
- $(".img_change").change(function(){
- if( $('input[name=personal_styles[]][value=trendy]').is(':checked') ) {
- $("#startTrendy").show();
- $("#startClassic").hide();
- } else {
- $("#startClassic").show();
- $("#startTrendy").hide();
- }
- });
- });
- <form method="post" action="#">
- <div id="startTrendy" >Trendy Pics</div>
- <div id="startClassic" style="display:none">Classic Pics</div>
- <input type=checkbox name="personal_styles[]" value="trendy" class="img_change">Trendy
- <input type=checkbox name="personal_styles[]" value="modern" class="img_change">Modern
- <input type=checkbox name="personal_styles[]" value="feminine" class="img_change" >Feminine
- <input type=checkbox name="personal_styles[]" value="antique" class="img_change">Antique
- <input type=checkbox name="personal_styles[]" value="classic" class="img_change" >Classic
- </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:- $("[name=personal_styles[]]").val() === "trendy" || $("[name=personal_styles[]]").val() === "modern")
- 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>- 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?
- 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.- 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- $logged_in = (isset($_SESSION['SESS_USER_ID']));
- <?php if ($logged_in) : ?>
- parent.$('#notice').hide();
- <?php else : ?>
- parent.$('#notice').show();
- <?php endif; ?>
- 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?- window.old_alert = window.alert;
- window.alert = function(message, fallback){
- if(fallback)
- {
- old_alert(message);
- return;
- }
- $(document.createElement('div'))
- .attr({title: 'Alert', 'class': 'alert'})
- .html(message)
- .dialog({
- buttons: {OK: function(){$(this).dialog('close');}},
- close: function(){$(this).remove();
- parent.$.fancybox.close();},
- draggable: false,
- modal: true,
- resizable: false,
- dialogClass: "alert_message",
- width: '400'
- });
- $(".ui-dialog-titlebar").hide();
- };
- 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 Ican't figure out how to use it to trigger an alert before doing something.$(this).before("Thank you for creating an account");success: function () { $("#customer_info").fadeOut("fast", function(){ $(this).before("Thank you for creating an account"); setTimeout("$.fancybox.close()", 1000); }); }
- 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- 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- $(function () {
- $(".accordion_close_leave").accordion({
- event: "click hoverintent",
- collapsible: true,
- active: false,
- autoHeight: false,
- }).mouseleave(function() {
- $(this).accordion({ active: false});
- });
- var cfg = ($.hoverintent = {
- sensitivity: 100,
- interval: 500
- });
- $.event.special.hoverintent = {
- setup: function() {
- $( this ).bind( "mouseover", jQuery.event.special.hoverintent.handler );
- },
- teardown: function() {
- $( this ).unbind( "mouseover", jQuery.event.special.hoverintent.handler );
- },
- handler: function( event ) {
- var that = this,
- args = arguments,
- target = $( event.target ),
- cX, cY, pX, pY;
- function track( event ) {
- cX = event.pageX;
- cY = event.pageY;
- };
- pX = event.pageX;
- pY = event.pageY;
- function clear() {
- target
- .unbind( "mousemove", track )
- .unbind( "mouseout", arguments.callee );
- clearTimeout( timeout );
- }
- function handler() {
- if ( ( Math.abs( pX - cX ) + Math.abs( pY - cY ) ) < cfg.sensitivity ) {
- clear();
- event.type = "hoverintent";
- event.originalEvent = {};
- jQuery.event.handle.apply( that, args );
- } else {
- pX = cX;
- pY = cY;
- timeout = setTimeout( handler, cfg.interval );
- }
- }
- var timeout = setTimeout( handler, cfg.interval );
- target.mousemove( track ).mouseout( clear );
- return true;
- }
- };
- 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.- $(document).ready(function () {
- $("#style_row1, #style_row2").hide();
- if( $("[name=style_ranking_1]").val() === "Null" || $("[name=style_ranking_1]").val() === "")
- {$("#style_row1").show();}
- else {$("#style_row2").show()};
- });
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.- 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.- $('.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));
}
});
- 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:INSERT information into customer_info table
Identifies user_id assigned to this account
- Redirects user to the next page (currently in both php & javascript)
If Gender is Male:
I'm using this jQuery validation plugin and fancybox2Generates email notifying me of the request
- INSERT information into invite_requests table
- Echo message to Men (currently in both; Preferred method is in php)
- Close Fancybox iframe (currently only works in javascript)
Javascript- var $custInfo = $("#customer_info");
- $(document).ready(function () {
- var validator = $custInfo.validate({
- rules: {...},
- messages: {...},
- errorLabelContainer: "#messageBox",
- submitHandler: function () {
- $custInfo.ajaxSubmit({
- // 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
- success: function () {
- if ($('input[name=gender][value=female]').is(':checked')) {
- parent.close_field('notice');
- window.location.href = "page1.html";
- } else if ($('input[name=gender][value=male]').is(':checked')) {
- parent.close_field('notice');
- parent.$.fancybox.close();
- alert("This isn’t available yet for men, but we’ll send you an invitation as soon as it is");
- }
- }
- // End of Temporary Script
- });
- }
- });
- $custInfo.find("input[name=gender]").change(function () {
- if ($(this).val() == "male") {$custInfo.submit();}
- });
- });
- <?php
- //Start session and connection to database goes here
- //Function to sanitize values received from the form goes here
- $gender = $_POST['gender'];
- if ($gender==="female" ) {
- // INSERT information into customer_info table
- $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]')";
- $result = @mysql_query($qry);
- if($result) {
- // Identifies user_id assigned to this account
- $qry="SELECT * FROM customer_info WHERE user_name='$user_name' AND password='".md5($_POST['password'])."'";
- $result=mysql_query($qry);
- if($result) {
- if(mysql_num_rows($result) == 1) {
- session_regenerate_id();
- $member = mysql_fetch_assoc($result);
- $_SESSION['SESS_USER_ID'] = $member['user_id'];
- $_SESSION['SESS_USER_NAME'] = $member['user_name'];
- session_write_close();
- // Redirects user to the next page
- header("location: page1.html");
- exit();
- }else { //user_name failed
- header("location: login_failed.html");
- exit(); }
- }else { die("Unable to access your account (Error Message 1)"); }
- }else { die("Unable to access your account (Error Message 2)"); }
- }
- // If Gender is Male
- else {
- // Notify us of request via email
- $sendto = "info@click2fit.com";$userfname = $_POST['fname'];$userlname = $_POST['lname'];$usermail = $_POST['email'];$gender = $_POST['gender'];$subject = "Invite Request - " . ($gender) . " ";
- // INSERT information into invite_requests table
- $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]')";
- $result = @mysql_query($qry);
- // Echo message to Men
- 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>";
- // Redirects user - This should be replaced with the function which closes the fancybox iframe
- header("location: home.html");
- exit();
- }
- ?>
- 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)?- <style type="text/css">
- .ui-tooltip.menu_info {
- max-width: 200px;
- }
- * html .ui-tooltip {
- background-image: none;
- }
- body .ui-tooltip { border-width: 1px; }
- .ui-tooltip, .arrow:after, .arrow_left_side:after {
- background: white;
- border: 1px solid #999;
- }
- .ui-tooltip {
- padding: 10px 12px;
- color: Black;
- font: 8pt "Helvetica Neue", Sans-Serif;
- max-width: 150px;
- border: 1px solid #999;
- position: absolute;
- }
- .arrow_left_side {
- height: 70px;
- width: 8px;
- overflow: hidden;
- position: absolute;
- top: 0px;
- margin-top: 5px;
- left: -8px;
- }
- .arrow_left_side:after {
- content: "";
- position: absolute;
- width: 25px; height: 25px;
- -webkit-transform: rotate(45deg);
- -moz-transform: rotate(45deg);
- -ms-transform: rotate(45deg);
- -o-transform: rotate(45deg);
- tranform: rotate(45deg);
- }
- </style>
- <script>
- $(function() {
- $('.menu_info').tooltip({
- position: {
- my: "left+20 center",
- at: "right center",
- using: function (position, feedback) {
- $(this).css(position);
- $("<div>")
- .addClass("arrow_left_side")
- .addClass(feedback.vertical)
- .addClass(feedback.horizontal)
- .appendTo(this);
- }
- }
- });
- });
- </script>
- 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:- $("#fauxAccordion").click(function () {
- $(this).toggleClass("accordion_arrow_south");
- });
- $(function () {
$(".accordionInner").hide();
$(".accordionTrigger").hoverIntent(function () {
$(".accordionInner").slideDown();
}, function () {
$(".accordionInner").slideUp("slow");
});
$(".accordion_reclose").hoverIntent(cfg);
}); - var cfg = ($.hoverintent = {
- sensitivity: 100,
- interval: 500
- });
The combined function- $(function () {
- $(".accordionInner").hide();
- $(".accordionTrigger").hoverIntent(function () {
- $(".accordionInner").slideDown();
- $("#fauxAccordion").toggleClass("accordion_arrow_south");
- }, function () {
- $(".accordionInner").slideUp("slow");
- $("#fauxAccordion").toggleClass("accordion_arrow_east");
- });
- $(".accordion_reclose").hoverIntent(cfg);
- });
- var cfg = ($.hoverintent = {
- sensitivity: 100,
- interval: 500
- });
- <div class="accordionTrigger">
- <div class="header_10"><b>Header Goes Here<span style="padding-left:2em" class="accordion_arrow_east" id="fauxAccordion"></span></b></div>
- <div class=" accordionInner">
- Content Goes Here
- </div>
- </div>
- <div class="accordion_reclose">
Next Section
</div>
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).- 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:- <li onclick="drink(this)">Coffee</li>
- 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>- 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:- onclick="toggle_colorbox(this);"
How can I insert it into the following function?- $('.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/- 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- $('.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; } });
- 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- $('#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
- $('.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
- $('#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
- $('.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;
}
});
- 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.- $('.features_rank').change(function () {
- switch ($('[name=vehicle]').val()) {
- case "1":
- $('[name=multiple]').val(["Multiple"]);
- break;
- case "2":
- $('[name=multiple]').val(["Multiple2"]);
- break;
- case "3":
- $('[name=multiple]').val(["Multiple3"]);
- break;
- }
- 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:- $('#complaint').change(function () {
- if ($(this).attr('checked')) {
- $('input[name="modify_increase"]')[0].checked = true;
- }
- else {
- $('input[name="modify_increase"]')[0].checked = false;
- }
- });
I've tried these IF statements with the code below:- if ($('select[name="complaint"]').val("Too_small") {...}
- if ($('#complaint :selected'').val("Too_Small") {...}
- if ($(this).attr('checked')) {...}
- <select name="complaint" id="complaint">
- <option value="Too_small">Too Small</option>
- <option value="Too_big" >Too big</option>
- <option value="Too_expensive">Too expensive</option>
- </select>
- $('#complaint).change(function () {
- if ($('select[name="complaint"]').val("Too_small") {
- $('[name="modify_increase"]')[0].checked = true;
- }
- if ($('select[name="complaint"]').val("Too_big") {
- $('[name="modify_decrease"]')[0].checked = true;
- }
- if ($('select[name="complaint"]').val("Too_expensive") {
- $('[name="modify_price"]')[0].checked = true;
- }
- else {
- $('input[name="modify_increase"]')[0].checked = false;
- }
- });
I've also tried assigning id's to each option value and the following code:- $('#complaint1').change(function () {
- if ($(this).attr('checked')) {
- $('[name="modify_increase"]')[0].checked = true;
- }
- else {
- $('input[name="modify_increase"]')[0].checked = false;
- }
- });
- $('#complaint2').change(function () {
- if ($(this).attr('checked')) {
- $('[name="modify_decrease"]')[1].checked = true;
- }
- else {
- $('input[name="modify_decrease"]')[1].checked = false;
- }
- });
- $('#complaint3').change(function () {
- if ($(this).attr('checked')) {
- $('[name="modify_price"]')[2].checked = true;
- }
- else {
- $('input[name="modify_price"]')[2].checked = false;
- }
- });
© 2013 jQuery Foundation
Sponsored by
and others.
- background-color:
white;
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.