First up, sorry about the title, I know it's not very specific, but I'm really stumped on what else to say.
So before I try and ramble on at what my problem is, you might as well check out this jsfiddle I made:
http://jsfiddle.net/ax1ncdmu/2
How it works in this fiddle is exactly how I want it to work, but as you can see the jQuery is like this:
$(document).ready(function () {
$("input[name=guest0]").click(function () {
$('#guest0').toggle();
});
$("input[name=guest1]").click(function () {
$('#guest1').toggle();
});
$("input[name=guest2]").click(function () {
$('#guest2').toggle();
});
});
But it seems pretty sloppy to write out the code like that, just repeating the same thing over again. I feel like it should be obvious but I haven't worked with jQuery before, so I'm having a hard time figuring it out.
Is there a way to figure out the 'name' of the checkbox being clicked and then use that string to plug into the code? Or is that going the wrong way about it?
You can use jQueries attribute-starts-with-selector:
$(document).ready(function () {
// all inputs that its name starts with "guest"
$("input[name^=guest]").click(function () {
// read the name and apply to id
$('#'+$(this).attr('name')).toggle();
});
});
See it working:
http://jsfiddle.net/ax1ncdmu/7/
Related
I'm new to javascript and jQuery. I am trying to make it such that the background of my whole webpage (class = .background-image) changes when hovering over a specific element. I am unable to get it work. When I hover over the item (id = #ComingSoon), nothing seems to happen. There are currently no errors in the browser console. Can someone please tell me what could be wrong. I have been working at this for a couple of hours now making a series of minor changes with no success. I have searched for others with similar problems without success. Here are some extracts from my HTML and Javascript:
HTML
JAVASCRIPT
Thank you for your help.
I'm pretty sure your issue is the size(cover) you have after your url().
I just tried the code without it and it works fine:
(Working code)
$(document).ready(function(){
'use strict';
$("#ComingSoon").mouseenter(function(){
$(".background-image").css("background-image", "url(http://www.realpropertymanagementcolorado.com/wp-content/uploads/2013/12/denver-skyline.jpg)");
$(".background-image").css("background-size", "cover");
console.log("entered H2")
})
$("#ComingSoon").mouseleave(function(){
$(".background-image").css("background", "none");
console.log("Left H2")
})
})
When I write it again with the size(cover) you have, it breaks:
(broken code)
$(document).ready(function(){
'use strict';
$("#ComingSoon").mouseenter(function(){
$(".background-image").css("background-image", "url(http://www.realpropertymanagementcolorado.com/wp-content/uploads/2013/12/denver-skyline.jpg) size(cover)");
$(".background-image").css("background-size", "cover");
console.log("entered H2")
})
$("#ComingSoon").mouseleave(function(){
$(".background-image").css("background", "none");
console.log("Left H2")
})
})
if u r using jquery try it..
$(function(){
$('#comingSoon').hover(function(){
/*do something when moseover*/
},
function(){
/*do something when mouse-left*/
});
});
I am generating script that is supposed to select values after page got reloaded with F5 or browser back button.
JQuery is loaded, and element is on the page, screenshot below shows me running in console $('.isEstateOver325K').show() and element remaining display:none.
I must be missing something obvious here.
script that is supposed to change visibility is fired by another that triggers change and click on element it would be weird if this would be the reason since it works ok for some different elements - still worth mentioning.
(function() {
$(
"[name='MaritalStatus'][value='Single'],[name='MaritalStatus'][value='Divorced'],[name='MaritalStatus'][value='Co-habiting']"
).closest('.quote-form__question').click(function() {
if ($(
"[name='MaritalStatus'][value='Single'],[name='MaritalStatus'][value='Divorced'],[name='MaritalStatus'][value='Co-habiting']"
).is(':checked')) {
$(".isEstateOver325K").show();
$(".isEstateOver325K").addClass('quote-form--active');
} else {
$(".isEstateOver325K").hide();
}
});
});
$(function() {
$("[name='MaritalStatus'][value='Single']").trigger("click");
$("[name='MaritalStatus'][value='Single']").trigger("change");
});
I am sure someone has experienced something similar, why doesn't it change to display:block?
Try with :
$('').attr('style','display:block;')
Try to use toggle(). Toggle will toggle display:none to display:block and Vice-Versa.
$(
"[name='MaritalStatus'][value='Single'],[name='MaritalStatus'][value='Divorced'],[name='MaritalStatus'][value='Co-habiting']"
).closest('.quote-form__question').click(function() {
if ($(
"[name='MaritalStatus'][value='Single'],[name='MaritalStatus'][value='Divorced'],[name='MaritalStatus'][value='Co-habiting']"
).is(':checked')) {
$(".isEstateOver325K").toggle();
$(".isEstateOver325K").addClass('quote-form--active');
} else {
$(".isEstateOver325K").toggle();
}
});
});
$(function() {
$("[name='MaritalStatus'][value='Single']").trigger("click");
$("[name='MaritalStatus'][value='Single']").trigger("change");
});
even this can also work
/*---for multiple css property-----*/
$('').css({
'display':'block'
});
/*---for single css property-----*/
$('').css('display','block');
So for your first question, to sum up . If you call
$('').show();
You're telling jQuery to select "nothing" and to show this "nothing".
If you want to select "all". Than you have to use the all-selector(http://api.jquery.com/all-selector/):
$('*').show();
A really basic example is here: http://jsbin.com/cixoxatufu/2/edit?html,js,console,output
And for the rest, I really appreciate a JSBin or something as this is just hinting to something and not really providing a solution.
I am trying to do something very simple. If you go to http://cutecuttingboards.com/product/apple/, I simply want to hide the "From:" price after the user choose a size in the drop down menu. I am trying the code below, which is working fine in Fiddle but not on the live site:
jQuery('#size').on('change', function(){
jQuery('p.price').hide();
});
Here is the fiddle with unformatted code: http://jsfiddle.net/anneber/U2Mat/
Any help is much appreciated!
Anne
i know it's kind of late but.. in case someone else is having the same problem, this should do the trick:
jQuery(document).ready(function($) {
$(document).on("change", ".variations #size", function() {
$('p.price').hide();
});
});
If I copy/paste your code above into web inspector and then change the selection it works, so most likely, the code is either not in the page, not being run, or being run before the related elements have been loaded into the DOM.
There is an error in your cutecutb.js file the Unterminated comment. i.e you are not terminating the comment
There is no "*/" sign.
EDIT :
Now another reason in add-to-cart-variation.min.js there is already an onchange event of dropdown
You can see you "#size" element is inside ".variations" class
I'm new at both JS and jQuery (behind the times I know) but I have a working JS function that is very simple that I'd like to convert to jQuery. I think if I can get help with this it will help me in understanding the mechanics of jQuery (as I understand this JS).
What this does is to show or hide a div based on whether a pair of radio buttons are selected Yes or no. What I'd like to do (on load) is slide the div in if Yes is selected and out if No is selected. I'd like no to be default (right now Yes is default). I do have jQueryUI running for the slide.
Here is the JS code:
<script type="text/javascript">
function makeChoice()
{
if (document.form1.mobileyesno[1].checked == true)
{
document.getElementById('wanttexts').style.visibility = 'hidden';
}
else
{
document.getElementById('wanttexts').style.visibility = 'visible';
}
}
</script>
I know this is probably elementary but I need the help. :-) Thanks!
function makeChoice() {
$('#wanttexts').css(
'visibility',
document.form1.mobileyesno[1].checked ? 'hidden' : 'visible'
);
}
EDIT better yet:
function makeChoice() {
$('#wanttexts')
[document.form1.mobileyesno[1].checked ? 'slideDown' : 'slideUp']();
}
If you are using jQuery then you can try this
function makeChoice()
{
if (document.form1.mobileyesno[1].checked == true)
{
$('#wanttexts').slideDown();
}
else
{
$('#wanttexts').slideUp();
}
}
Well I could just give you some code converting it for you, but that wouldn't really help. ;) Here's some links I would start with to replace things in that function specifically. The jQuery docs are actually really great (most of the time).
Selectors, specifically, ID Selector. So this is how you actually reference a specific set of things.
CSS This is the function you use to change CSS on an element. Here's the broader section for how to change things in the DOM.
For checked, you should use .prop(). There's actually been some recent upheaval about the difference between that and .attr, but don't worry about it too much.
To do something on load, you should look at .ready(). You can pass functions in that for the whole document like this:
$(document).ready(function () {
//stuff to do on load
});
To show or hide things in jQuery, it actually has some convenience functions like .show() and .hide(), but you can look at effects for more things like sliding and fading. Pretty neat stuff.
There's some other things to know about jQuery, like that you can chain things, etc. It would be worth it to go through some of the introductory documentation like this.
$(function() {
if ($('input[name="mobileyesno"]:checked').val() == 'Yes') {
$('#wanttexts').show();
} else {
$('#wanttexts').hide();
}
);
The outer $(function() { }); means that the code in the curly brackets will run when the page has finished loading. $('input[name="mobileyesno"]:checked') is a way of selecting all input fields which have the name "mobileyesno" and are currently checked, and val() extracts the value of that input field. If you want a particular input field to be selected by default when the page loads, add the checked="checked" attribute to the input tag for that radio button.
function makeChoice()
{
if(document.form1.mobileyesno[1].checked)
$("#wanttexts").hide();
else
$("#wanttexts").show();
}
I was thinking about something like this:
jQuery(function($){
function toggle() {
$('#wanttexts').toggle(
$('[name=mobileyesno]:eq(0):checked').length == 1
);
}
});
See http://api.jquery.com/toggle/
If you want slid effect you can do:
$('#mobileyesno').checked(function() {
$('#wanttexts').slideToggle();
});
Otherwise:
$('#mobileyesno').checked(function() {
$('#wanttexts').toggle();
});
$(function() {
$("#mobileyesno").bind("click", function() {
$("#wanttexts").css("visibility", ($("#mobileyesno").eq(1).is(":checked") ? "hidden" : "visible"));
});
});
.hide() and .show() will set the element to display:none / block - not what the OP's code does.
I am using this jquery plugin for called tokeninput it's for autosuggestion when typing:
the code here generates the autosuggestion for the input box:
$("#input-auto").tokenInput("topicGet.php", {
theme: "facebook"
});
but when I try to append the input which uses the #input-auto it does not do the autosuggestion but it works when it's loaded on the page:
the code is here:
$('.topicEdit').live('click', function() {
$('#Qtopics').html('<input type="text" id="input-auto" />');
I'm trying to solve the problem, but I can't find anything, I also tried to put the live click on the .topicEdit, but it's still not working. :)) thanks
Looks like you're probably initializing the autosuggestion BEFORE you add the input into the DOM. You have to remember that jQuery is stupid, and only does things in the order that you tell it. When you initially 'generate' the autosuggestion, if it can't find it in the DOM at that moment, it won't do anything! So, to solve your problem, you'll want to do the generation of the autosuggest after you insert it into the DOM:
$('.topicEdit').live('click', function() {
$('#Qtopics').html('<input type="text" id="input-auto" />');
$("#input-auto").tokenInput("topicGet.php", {
theme: "facebook"
});
});
yay?
Calling tokenInput on page load when input-auto doesn't yet exist is your problem.
$('.topicEdit').live('click', function() {
$('#Qtopics').html('<input type="text" id="input-auto" />');
$("#input-auto").tokenInput("topicGet.php", {
theme: "facebook"
});
});
I'm not exactly sure what the problem is, but try using livequery plugin. You don't need to specify an event to it, just a function which will run for all current and future elements that match the selector.
Example:
$(".something").livequery(function () {
// do something with the element
}