- Screen name: Chaya Cooper
Chaya Cooper's Profile
30 Posts
105 Responses
0
Followers
Show:
- Expanded view
- List view
Private Message
- 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?
- 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 I
In the function below, I want to have an alert instead of this line:can'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.- 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 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;
}
});
- 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- $('#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;
}
}
?>
- 08-Oct-2012 07:07 PM
- Forum: Using jQuery Plugins
I'm having trouble figuring out the proper syntax for removing validation rules with the jQuery Validate plugin (by Jörn Zaefferer). I need to remove 3 validation rules in the event that the user selects a specific radio button (in this case specifying that they are male).
I've tried inserting an If/Else statement as well as creating an onclick function, but I don't think I'm doing it properly because I can't seem to get either method to work properly. I've included the code that I've tried below.
Validation Script- $(document).ready(function() {
// validate signup form on keyup and submit
var validator = $("#customer_info").validate({
rules: {
fname: "required",
lname: "required",
user_name: {
required: true,
},
password: {
required: true,
},
email: {
required: true,
},
terms: "required",
},
messages: {
fname: "",
lname: "",
user_name: {
required: "",
remote: jQuery.format('</br>User Name {0} already in use'),
},
password: "",
email: {
required: "",
email: "</br>Please enter a valid email address"},
terms: "</br>Please accept the terms of our privacy policy",
},
errorLabelContainer: "#messageBox",
submitHandler: function () {
jQuery(form).ajaxSubmit({
});
}
});
});
Methods I've Tried
If/Else
I've tried several variations of:- var validator = $("#customer_info").validate(
if ($gender==="male") {
$(this).rules("remove", "user_name password terms");
} else
{rules: {- ...
including switching (this) for ("#customer_info").
I also tried removing all the rules- $(this).rules("remove");
Creating a Separate Function
I also tried creating a separate function which would be triggered onclick
HTML
- <label>Male</label><input name=gender type=radio value=male onclick="change();">
Method 1- function change(){
- $("#customer_info").rules("remove", "user_name password terms");
- }
- function change(){
- $("#user_name").rules("remove", "required");
- $("#password").rules("remove", "required");
- $("#terms").rules("remove", "required");
- }
- 24-Aug-2012 07:48 PM
- Forum: Using jQuery
I need to modify this Replace function to use arrays, but haven't been able to figure out how to do that.
This function allows the text and 2 sets of items to be replaced when a user clicks on an element, and each set of items includes an image and it's associated value (which will then be added to the customer's profile and be inserted into a database). I can't figure out how to modify the code to use arrays instead or how to advance past the 2nd set.
This is part of a taste questionnaire which asks users to select the style they prefer from a series of pairs, and the specific pairings shown changes based upon the items previously selected. I have 12 arrays of 20 images, and was previously directing which image would be displayed from an array with the code below which had each 'Select' button trigger onclick="javascript:manipulateDOM()", however that didn't allow me to identify the value selected and is somewhat cumbersome. In addition that code didn't allow me to direct different choices based on the user's selection.
(Partial) Replace Function- <script type="text/javascript" language="javascript">
- $(document).ready(function () {
- $("#trendyButton").click(function () {
- var newSrc = $("#imgtrendy").attr("src").replace("z1", "z14");
- $("#imgtrendy").attr("src", newSrc);
- var newSrc2 = $("#imgclassic").attr("src").replace("z2", "z12");
- $("#imgclassic").attr("src", newSrc2);
- var que = $("#question").text().replace("Question 1", "Question 2");
- $("#question").text(que);
- var imgvalue = $("#imgtrendy").attr("value");
- $("#picval").text(imgvalue);
- });
- $("#classicButton").click(function () {
- var newSrc = $("#imgtrendy").attr("src").replace("z1", "z4");
- $("#imgtrendy").attr("src", newSrc);
- var newSrc2 = $("#imgclassic").attr("src").replace("z2", "z3");
- $("#imgclassic").attr("src", newSrc2);
- var que = $("#question").text().replace("Question 1", "Question 2");
- $("#question").text(que);
- var imgvalue = $("#imgclassic").attr("value");
- $("#picval").text(imgvalue);
- });
- });
- </script>
HTML
- <div id="question">Question 1</div>
- <div>
- <img id="imgtrendy" src="files/z1.png" name="taste" value="trendy[1]" height="5%" width="5%" />
- <img id="imgclassic" src="files/z2.png" name="taste1" value="classic[1]" height="5%" width="5%"/>
- </div>
- <div>
- <img id="trendyButton" alt"Select" src="files/Select.jpg">
- <img id="classicButton" alt"Select" src="files/Select.jpg">
- </div>
- <div id="picval"></div>
Sample ArraysPrevious method I used in javascript- var NumberOfImages = 7 - 1; //-1 because array members starts from 0
- var trendy = new Array(NumberOfImages);
- trendy[0] = "files/z1.png";
- trendy[1] = "files/z1.png";
- trendy[2] = "files/z14.png";
- trendy[3] = "files/z4.png";
- var imgNumber = 1; //array key of current image
- var NumberOfImages = 7 - 1; //-1 because array members starts from 0
- var classic = new Array(NumberOfImages);
- classic[0] = "files/z2.png";
- classic[1] = "files/z2.png";
- classic[2] = "files/z12.png";
- classic[3] = "files/z3.png";
- var classicNumber = 1; //array key of current image
- var text = 6 - 1; //-1 because array members starts from 0
- var text = new Array;
- text[0] = "Question 1"
- text[1] = "Question 2"
- text[2] = "Question 3"
- text[3] = "Question 4"
- var textNumber = 1; //array key of current image
- function manipulateDOM() {
- changeObjects();
- NextImage();
- }
- function changeObjects() {
- document.getElementById("question").innerHTML = text[textNumber];
- }
- function NextImage() {
- if (imgNumber < NumberOfImages) //Stop moving forward when we are out of images
- {
- trendy[0] = trendy[1]; trendy[1] = trendy[2]; trendy[2] = trendy[3];
- document.images["taste"].src = trendy[imgNumber];
- classic[0] = classic[1]; classic[1] = classic[2]; classic[2] = classic[3];
- document.images["taste1"].src = classic[imgNumber];
- text[0] = text[1]; text[1] = text[2]; text[2] = text[3];
- document.getElementById["question"].innerHTML = text[textNumber];
- }
- }
- 23-Aug-2012 01:53 PM
- Forum: Using jQuery Plugins
Can the jQuery validate plugin be used to sanitize fields to prevent SQL injection? I got the impression that it does but it's not working with the standard settings and I haven't found any information on how specifically to set it up.
These are my current settings:- $(document).ready(function() {
- // validate signup form on keyup and submit
- var validator = $("#customer_info").validate({
- rules: {
- fname: "required",
- lname: "required",
- user_name: {
- required: true,
- remote: "check_username.php"
- },
- password: {
- required: true,
- minlength: 6
- },
- email: {
- required: true,
- email: true,
- },
- security_question: "required",
- terms: "required",
- },
- messages: {
- fname: "",
- lname: "",
- user_name: {
- required: "",
- remote: jQuery.format('</br>User Name {0} already in use'),
- },
- password: "",
- email: {required: ""},
- security_question: "",
- terms: "</br>Please accept terms and conditions",
- },
- errorLabelContainer: "#messageBox",
- submitHandler: function () {
- jQuery(form).ajaxSubmit({
- });
- }
- });
- });
- 13-Aug-2012 01:51 PM
- Forum: Getting Started
I need to clarify which jQuery files to include in order for jQuery UI and widgets/plugins to work.
I recently downloaded a more recent and minified version of jQuery and most of the basic site functions stopped working inside a Dialog Modal (including text boxes, radio buttons, checkboxes and html links), and it has stopped reading some of the options that I've defined for jQuery functions (i.e. validation and placeholders).
I'm including these files in my header:
jQuery core and UI
jquery-1.7.2.min.js jquery-ui-1.8.22.custom.min.js jquery-ui-1.8.22.custom.css
Files to validate forms
jquery.validate.js (v1.9.0) jquery.form.js (v3.14) jquery.metadata.js jquery.form_malsup.js (v3.14) - They are all the latest versions.
Is there something else that I need to include?
Some of these problems were fixed when I tried added jquery.js (I tried both v1.7.2 and 1.8), and others stopped working (i.e. Dialog Modal boxes).- 07-Aug-2012 02:11 AM
- Forum: Using jQuery
I'd like to write a function to modify the jQuery UI MultiSelect Widget options so that the option selectedList displays the object's ID before the information it is programmed to display.SelectedList displays which items have been checked, and it's parameter is a boolean/numeric value denoting how many checked items to display.
The widget also has aselectedText
option, which is programmed to receive 3 arguments: the # of checkboxes checked, total # of checkboxes, and an array of the checkboxes that were checked. I've included the sample script for this below as I'm assuming that the function I'd need probably requires a similar structure.
Script for assigning the widget's options- $(function(){
- $(".multi").each(function(){
- $(this).multiselect({
- selectedList: 4, //This displays the options which have been selected (max. 4)
- multiple: true,
- header: false,
- noneSelectedText: $(this).attr("id"),
- })
- })
- });
- <select class="multi" name="example" id="example" multiple="multiple">
- <option value="1">Option 1</option>
- <option value="2">Option 2</option>
- <option value="3">Option 3</option>
- <option value="4">Option 4</option>
- <option value="5">Option 5</option>
- </select>
The script which defines bothSelectedList and selectedText (in JQuery.multiselect.js):
- // updates the button text. call refresh() to rebuild
- update: function(){
- var o = this.options,
- $inputs = this.inputs,
- $checked = $inputs.filter(':checked'),
- numChecked = $checked.length,
- value;
- if( numChecked === 0 ){
- value = o.noneSelectedText;
- } else {
- if($.isFunction( o.selectedText )){
- value = o.selectedText.call(this, numChecked, $inputs.length, $checked.get());
- } else if( /\d/.test(o.selectedList) && o.selectedList > 0 && numChecked <= o.selectedList){
- value = $checked.map(function(){ return $(this).next().html(); }).get().join(', ');
- } else {
- value = o.selectedText.replace('#', numChecked).replace('#', $inputs.length);
- }
- }
- this.buttonlabel.html( value );
- return value;
- },
Information that might be helpfulThe example given for sending the 3 arguments to
selectedText
is:$("select").multiselect({
selectedText: function(numChecked, numTotal, checkedItems){
return numChecked + ' of ' + numTotal + ' checked';
}
});
- «Prev
- Next »
- $('#loginForm').validate({
Moderate user : Chaya Cooper
© 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.