We Keep Coding

Jquery .toggle does not work on live site

I'm trying to toggle a div on click via jQuery.
But somehow on my live site it does not work at all.
I tried .toggle; hasClass .addClass .removeClass in if/else; also .show/.hide on if/else and so on.
But somehow the content does not get displayed or cannot be hidden.
Here is my working fiddle with the segment DOM of the livesite:
JSFiddle Example
$(".jsselect").click(function() {
var popup = $(this).next(".popup_select");
if (popup.hasClass('showit')) {
popup.removeClass('showit');
} else {
popup.addClass('showit');
}
});
Here is my livesite: Livesite

Well,
sometimes you just need to go to bed and figure out, that you've added the same script.js twice - so the code did execute twice.
Well, screw me then ;)
Thank you all so much!

jquery fade out and redirect not working in IE

I have a website on which I have the following script intended to handle all links:
$(document).ready(function(){
$("body").css("display","none");
$("body").fadeIn(2000);
$("a").click(function(event){event.preventDefault();
linkLocation=this.href;
if(!linkLocation.contains("#")){$("body").fadeOut(1000,redirectPage);
}});
function redirectPage(){
window.location=linkLocation;}})
What it should do is, when a link is clicked to fade out and then to fade back in.
The issue I am facing is that in IE, links simply do not work.
Is it possible to edit my code in order for it to work?
If not, is there a way I can use a fallback code during this issue?
This issue is not present in chrome and I am using the latest IE

You should first check if your url contains the substring that you want to check with using indexOf() method. If it contains that character/substring then it'll return any 0 or positive value. Else it'll return -1 .
Try this way :
HTML :
ToogleFade
jQuery :
$(document).ready(function(){
$("body").css("display", "none");
$("body").fadeIn(2000);
$("a").on("click", function(e){
linkLocation = $(this).attr("href");
e.preventDefault();
if(linkLocation.indexOf('#') == -1){
$("body").fadeOut(3000, redirectPage);
}
});
function redirectPage()
{
window.location=linkLocation;
}
});
jsFiddle
Resources :
indexOf()

I found that the answer was to set the z-index. I have a stack of absolutely positioned divs and wanted to fade between them. The only way I could get IE8 to handle the fades nicely was to set the z-index of the element to be faded in higher than the element to be faded out.
$('#fadeoutdiv').css({zIndex:99}).fadeOut(2000);
$('#fadeindiv').css({zIndex:90}).fadeOut(2000);
and for redirect Check the Link Stackoverflow

I have gone through your code its almost correct you simply need to change something in your click function because preventDefault(); creating problem with the default functionality of <a></a> tag...
Also click on Allow block content when it ask you in IE.
Instead try this :-
<script>
$(document).ready(function(){
$("body").css("display","none");
$("body").fadeIn(2000);
$("a").click(function() {
linkLocation=this.href;
if(!linkLocation.contains("#"))
{
$("body").fadeOut(1000,redirectPage);
}
});
function redirectPage()
{
window.location=linkLocation;
}
});
</script>
I hope this will work for you..

jQuery .change not working in WooCommerce

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

First toggle open by default

So have a block of toggles on my page and now I need to add another block of toggles on the same page but this one with the first toggle active/open by default.
I've been working around the JS but no luck so far so I need your precious help to get this to work.
Thanks!
Demo
Javascript
jQuery(window).load(function(){
$('.toggle-view li').click(function () {
var text = $(this).children('div.toggle-content');
if (text.is(':hidden')) {
text.slideDown('200');
$(this).children('span').html('<i class="icon-minus"></i>');
} else {
text.slideUp('200');
$(this).children('span').html('<i class="icon-plus"></i>');
}
$(this).toggleClass('activetoggle');
});
});

You can do it with something like:
$('.added_class_on_second li').eq(0).children('.toggle-content').show();
Just add another distinct class to the second, or target it with:
$('.toggle-view').eq(1).children('li').eq(0).children('.toggle-content').show();
if you don't want to change the html at all.
http://codepen.io/anon/pen/CDdlH

If you need the first section to be open when the page loads you could simply call click() on $('.toggle-view li').first(). However, this may have undesired side effects if you have other actions occur on click, and it will perform an animation, so consider creating a function open which does nothing but open the indicated section, and calling that on document load.

Convert simple code from JS to jQuery

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.