jQuery toggle not working in IE - javascript

I have some jQuery code that works absolutely fine on everything other than IE. The toggle action doesn't trigger and doesn't hide or show the footer element.
I have tried to use a conditional if and else statement to use hide() and show() instead of toggle, I have also tried adding language and src elements to the script tag but neither of these angles worked. I have the latest doctype declared and i'm using the latest version of wordpress.
Can anyone see why this isn't working in IE?
<script>
$(document).ready(function() {
$("#clickme").click(function() {
event.preventDefault()
$("#footer").toggle(2000);
$('#menu, #menu2, #menu3, #menu4').hide('slow');
$(this).html(($('#clickme').text() == 'Show') ? 'Hide' : 'Show');
$(this).toggleClass("active");
$(this).attr("title", ($(this).hasClass("active") ? "Show" : "Hide") + " the menu");
});
});​
</script>

You are using
$("#clickme").click(function() {
event.preventDefault();//^ event parameter is missing, so causing error
// ...
});
It should be
$("#clickme").click(function(event) {
event.preventDefault(); // ^
// ...
});

Related

The second div won't come back after it's clicked twice

I'm not really good at JQUERY, and I just tend to observe things, but here is a code I've been working on. So the goal here is that I want both .people and .people_bg to close when I click anywhere on my screen.
<script>
$(document).ready(function(){
$("#relations").click(function(){
$(".people").slideToggle("fast");
$(".people_bg").slideToggle("fast");
});
});
$('a.close, .people_bg').live('click', function() {
$('.people_bg , .people').fadeOut(function() {
$('.people_bg, a.close').remove(); //fade them both out
});
return false;
});
});
</script>
The problem is: It only works once. The second time around, only '.people' appears, and not '.people_bg'
The remove function that you're using actually deletes elements from the page altogether, so that's your culprit. Replace that with a more appropriate function and you should be just fine.
You can simply just fadeOut without remove. This will hide them without actually removing them from the page: JS FIDDLE
$('a.close, .people_bg').on('click', function () {
$('.people_bg , .people').fadeOut();
});
Additionally, in your first function, you can combine the two class selectors:
$("#relations").click(function () {
$(".people, .people_bg").slideToggle("fast");
});
Also note that you should be using jquery's .on() as of version 1.7 instead of .live().

Jquery: change css selector on click

I just get {"error": "Please use POST request"} when I run this
$("#ricomporreclick").click(function () {
$("#film").css('visibility', 'hidden');
$("#ricomporre").css('visibility', 'visible');
});
What's wrong with the code? I'm tring to change the selector without page being reloaded.. when the click is triggered #film should be display:none and #ricomporre should be visible.
http://jsfiddle.net/8Ndba/
just put return false at end of the code block.
Updated Your Fiddle
Try to use event.preventDefault() to prevent the default functionality of the anchor tag,
$("#ricomporreclick").click(function (e) {
e.preventDefault()
$("#film").css('visibility', 'hidden');
$("#ricomporre").css('visibility', 'visible');
});
DEMO
Change your anchor so the URL doesn't do anything:
HERE
DEMO
You need to stop the link from redirecting by using the preventDefault method. I've edited the fiddle to show this
$("#ricomporreclick").click(function (e) {
$("#film").css('visibility', 'hidden');
$("#ricomporre").css('visibility', 'visible');
e.preventDefault();
});
What was happening previously was that it was correctly changing the visibility, but then the link was reloading the page causing the css to be reset to the stylesheet.

getting a particular div in to view or scroll into view

I am trying to add a feature to my website in a way that when i click a link i want a particular div element to come in to view for a user.. ive tried the code
$(".testClick").live("click",function(e){
e.preventDefault();
// Call the scroll function
goToByScroll("indID13");
});
function goToByScroll(id){
// Reove "link" from the ID
id = id.replace("link", "");
// Scroll
$('html,body').animate({
scrollTop: $("#"+id).offset().top},
'slow');
}
but this doesnt work... is it possible to achieve this feature with out any plugin by pure jquery itself.. or should i be using any plugin...
I will add a sample of what ive tried. the jsfiddle link http://jsfiddle.net/xFu3M/
and try this one toooo http://jsfiddle.net/xFu3M/6/ is this a bug..im trying to get div 1 in to view and its already in view,, so when i click the link it shows some other div
You just had a syntax error, change the .live to .on as the .live has depreciated in later versions of jQuery use this and it will work:
$(".testClick").on("click",function(e){...
See this edited fiddle jsFiddle
Try
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".wrapper").css({"width" : $(window).width() , "height" : $(window).height()});
$(".testClick").on("click",function(e)
{
e.preventDefault();
goToByScroll("indID13");
});
});
function goToByScroll(id)
{
id = id.replace("link", "");
$('html,body').animate(
{
scrollTop: $("#"+id).offset().top
},'slow');
}
</script>
You click event code was not surrounded in document.ready.
Also use .on instead of .live because it already depreciated from now on.

on click for jquery not being recognized

I have done on hover and on click with jQuery plenty of times, but this is baffling me. I have the jQuery library imported, and I have the following:
$(document).ready(function() {
$('.content_main_left_bottom').bind("click", function(e) {
alert('hi');
});
});
For some reason, it's NEVER reaching the alert!! I even put the alert right above document and it's showing there. I have the div tag with content_main_left_bottom within my code somewhere, is there something else I should do with that class?
jQuery(document).ready(function($) {
$('.content_main_left_bottom').bind("click", function(e) {
alert('hi');
});
});
first i would try this if the element with CLASS name (not ID) content_main_left_bottom exists it should work fine ...except you have any other javascript error in the code which you can find out by pushing f12 in your browser and go to the console section

Disable click if class ="X", jQuery

Im trying to build a tabbed content box, and im wondering if its possible that i can disable 1 link with a specific class, such as 'disabled'
I read somewhere about a function called preventDefault, would this work?
http://jsfiddle.net/Ssr5W/
You can disable click event by returning false. like,
$('#tabmenu a').click(function() {
return !$(this).hasClass('disabled');
});
Also, I've updated your fiddle: http://jsfiddle.net/Ssr5W/1/
EDITED
and of course, preventDefault would work :)
$('#tabmenu a').click(function(e) {
if($(this).hasClass('disabled'))
e.preventDefault();
});
fiddle: http://jsfiddle.net/Ssr5W/2/
$('.disabled').click(function(e) {
e.preventDefault() ;
}) ;
You can just check for the class on the element that was clicked on:
$('tabElement').click(function(){
if(this.hasClass('disabled'))
return;
//Your code here..
);
This won't interfere with other clikc-handlers you may have on your tab element

Categories