Search Results

Search found 131 results on 6 pages for 'slidetoggle'.

Page 2/6 | < Previous Page | 1 2 3 4 5 6  | Next Page >

  • Toggle two divs and classes

    - by kuswantin
    I have two links with classes (login-form and register-form) relevant to their target forms ID, they want to toggle. I have also a predefined 'slideToggle' function to toggle better. This is what I have tried so far: $('#userbar a').click(function() { var c = $(this).attr('class'); $('#userbar a').removeClass('active'); $(this).toggleClass('active'); $('#register-form,#login-form').hide(); //bad, causing flashy $('#' + c).slideToggle('slow'); return false; }); With this I have trouble with the flashy window, and to correctly toggle the active classes when another link is clicked, the other link should not have active class anymore. Additional problem is the link is dead on serial clicks. I have another try, longer one: $('#userbar a').click(function() { var c = $(this).attr('class'); switch (c) { case 'login-form': $('#' + c).slideToggle('slow'); $(this).toggleClass('active'); $('#register-form').hide(); break; case 'register-form': $('#' + c).slideToggle('slow'); $(this).toggleClass('active'); $('#login-form').hide(); break; } return false; }); This one is worse than the first :( Any suggestion to correct the behavior? What I want is when a link with class login-form is click, so toggle the form with ID login-form, and hide the register-form if open. Any help would be very much appreciated. Thanks.

    Read the article

  • Toggle image based on cookie value

    - by danit
    Im using a couple of JS functions to set a cookie named 'visible' with the value of either yes or no. Essentially Im using these values to decide if a <div> is visible or hidden. I've only just added the cookie, previously I had been using two images 1. Show 2. Hide as a button to hide and show the <div> like this: HTML: <img class="show" title="Show" alt="Show" src="images/show.png" /> <img class="hide" title="Hide" alt="Hide" src="images/hide.png" /> JQUERY: $("#tool").click(function() { $(".help").slideToggle(); $("#wrapper").animate({ opacity: 1.0 },200).slideToggle(200, function() { $("#tool img").toggle(); }); }); However I have now added the Cookie into the mix: $("#tool").click(function() { if(get_cookie('visible')== null) { set_cookie('visible','no'); } else { delete_cookie('visible'); } $(".help").slideToggle(); $("#wrapper").animate({ opacity: 1.0 },200).slideToggle(200, function() { $("#slider img").toggle(); }); }); So the .toggle() no longer matches the state of the <div> When the cookie value = no the show.png should be visible When the cookie value = yes then the hide.png should be visible Can anyone suggest how i can ammend this?

    Read the article

  • Jump to an anchor link on function complete in jQuery?

    - by nick92675
    I have a simple slidetoggle function that opens onclick. What I'd like to do is jump the user down to the bottom of the page following the opened div. Basically, wait for the slidetoggle to complete - then imagine clicking my jump link to pull the viewport down. Here's my code. $('#clickme').click(function() { $('#form-area').slideToggle('slow', function() { // Animation complete // what can i put here that's like my standard jumpto? }); }); <a href="#form-bottom" id="clickme">Click here</a> <div class="main" id="form-area" > Stuff </div> <a name="form-bottom"></a>

    Read the article

  • jQuery carousel in a div with display:none

    - by Fred Kafka
    I have to use on my site a jQuery responsive carousel with 4 displayed items that slide one at a time, etc etc. The point is: this carousel is placed in a div with display:none and it appears clicking on a button with a slideToggle script (jQuery). Well, when the div appears the carousel is not displayed. Nothing! Notice that if I remove the display:none the carousel shows perfectly. I've tried a bunch of carousel plugin (bxslider, caroufredsel, elastislide, flexslider) and this issue happens for all of them. And then... I'm going crazy!! Excuse meSorry friends, here is the code: HTML (here is the case of FlexSlider but the code is similar for the other plugins) <div id="hiddenDiv"> <div id="hiddenDivInner"> <div class="flexslider"> <ul class="slides"> <li>...</li> <li>...</li> <li>...</li> </ul> </div> </div> </div> CSS #hiddenDiv{ display:none; padding-bottom:10px; background: url("../img/xxx.gif") repeat left bottom #FFFFFF; } SCRIPT (copy-paste from the site. This script is between $(document).ready together with other scripts. Alredy tried to remove the load function) $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", animationLoop: false, itemWidth: 300, itemMargin: 5, minItems: 1, maxItems: 4 }); }); $("#trigger").click(function () { $("#hiddenDiv").slideToggle(400, "easeInOutExpo"); }); I remind you that with this code and no display:none every carousels work, also if I slide up and then down the div using the slideToggle button (#trigger).

    Read the article

  • Sliding & hiding multiple panels in jQuery.

    - by lloydphillips
    I have a table with multiple rows in each row is a select list and based on the selection (when the onchange event is fired) panels appear containing additional data below the row.I currently have code like this: var allPnls = '.inv-dtl-comnts-add,.inv-dtl-comnts-update'; $(document).ready(function(){ hideAll(); //select action change $(".inv-dtl-ddlaction").change(onSelectChange); $(".btn-cancel").click(function(event){ slideAll(); $(".inv-dtl-ddlaction").val('[Select an Action]'); return false; }); }); function onSelectChange(event){ //find out which select item was clicked switch($(this).val()) { case 'View/Add Comment': $(this).closest(".row").children(allPnls).slideUp("fast", function(){ $(this).closest(".row").children(".inv-dtl-comnts-add").slideToggle("fast"); }); break; case 'Change Status': $(this).closest(".row").children(allPnls).slideUp("fast", function(){ $(this).closest(".row").children(".inv-dtl-comnts-update").slideToggle("fast"); }); break; default: //code to be executed if n is different from case 1 and 2 } } function hideAll(){ $(allPnls).hide(); } function slideAll(){ $(allPnls).slideUp("fast"); } So I'm hiding all the panels when the page loads and if a panel is already open I want to slide it shut before reopening the new panel. This works with the postback. With just one panel in the selection it worked great but with two panels the sliding up happens twice (it seems to slide down unopened panels before sliding them back up again). How can I adjust this so that I can get all panels listed in the variable allPnls to slide shut ONLY if they are already open? Is there a better way of sliding the panels shut and then having a callback to have the slideToggle work? Lloyd

    Read the article

  • jquery animated buttons that just wont behave

    - by TJ Sherrill
    Ok I have a inline list of buttons. <ul id="nav"> <li class="home"><a href="#">Menu Item</a></li> <li class="contact"><a href="#">Menu Item</a></li> <li class="about"><a href="#">Menu Item</a></li> </ul> .home{ position:absolute; bottom:0; background-image:url(../img/menu/single_line.png); background-repeat:no-repeat; height:34px; width:134px; } .home_hover{ position:absolute; bottom:0; background-image:url(../img/menu/single_line_over.png); background-repeat:no-repeat; height:70px; width:134px; } $(document).ready(function(){ $("#nav .home").mouseover(function(){ $(this).toggleClass("home_hover").slideToggle("slow"); return false; }).mouseout(function(){ $(this).toggleClass("home_hover").slideToggle("slow"); return false; }); }); Each menu item has a background image, and then when its hovered the background image is replaced by a taller image. Ultimately I am trying to build a simple menu where on mouseover the menu item appears to slide up. But in reality Jquery can animate the toggleClass with slideToggle. The problem is that this current code doesn't behave right. It jumps up and down, because the text is moving. I am pretty new to Jquery so any help is greatly appreciated. I also loaded this up at http://gasworks.ravennainteractive.com/result/ thanks

    Read the article

  • jQuery panels - close one when opening another

    - by justme
    I have two slide panel in the same page. Need that, when one is open and the and user clicks on the other one, that makes, at the same time, close the first one when opening the second. Now they are overlapping... Can you help me, please? thanks This is what i have on the page: I have two slide panel in the same page. Need that, when one is open and the and user clicks on the other one, that makes, at the same time, close the first one when opening the second. Now they are overlapping... Can you help me, please? thanks This is what i have on the page <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle('fast'); $("#panel2").slideToggle("fast"); $(this).toggleClass("active"); }); }); $(document).ready(function(){ $(".btn-slide2").click(function(){ $("#panel2").slideUp('fast'); $("#panel").slideToggle("fast"); $(this).toggleClass("active"); }); </script>

    Read the article

  • jQuery toggle content-div from menubar

    - by nuclearsugar
    I'm having trouble getting jQuery to allow only one content-DIV to be visible at a time. So that clicking between the menu buttons (about, newsletter, contact) this will allow only one content-DIV to be visible. --- Then the content-DIV needs to hide when the associated menu button is clicked (like it does currently). --- Upon clicking the header 'alliteration', any content-DIVs that are open need to hide. http://home.jasonfletcher.info/all/alliteration/index.html $('#collapse_about').hide(); $('#collapse_newsletter').hide(); $('#collapse_contact').hide(); $('#menu1').click(function() { $('#collapse_about').slideToggle(400); return false; }); $('#menu2').click(function() { $('#collapse_newsletter').slideToggle(400); return false; }); $('#menu3').click(function() { $('#collapse_contact').slideToggle(400); return false; }); I understand that this is a pretty simple bit of code... but the form of it evades me. Any help is much appreciated.

    Read the article

  • jQuery Toggle with Cookie

    - by Cameron
    I have the following toggle system, but I want it to remember what was open/closed using the jQuery cookie plugin. So for example if I open a toggle and then navigate away from the page, when I come back it should be still open. This is code I have so far, but it's becoming rather confusing, some help would be much appreciated thanks. jQuery.cookie = function (name, value, options) { if (typeof value != 'undefined') { options = options || {}; if (value === null) { value = ''; options = $.extend({}, options); options.expires = -1; } var expires = ''; if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) { var date; if (typeof options.expires == 'number') { date = new Date(); date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000)); } else { date = options.expires; } expires = '; expires=' + date.toUTCString(); } var path = options.path ? '; path=' + (options.path) : ''; var domain = options.domain ? '; domain=' + (options.domain) : ''; var secure = options.secure ? '; secure' : ''; document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join(''); } else { var cookieValue = null; if (document.cookie && document.cookie != '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = jQuery.trim(cookies[i]); if (cookie.substring(0, name.length + 1) == (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } }; // var showTop = $.cookie('showTop'); if ($.cookie('showTop') == 'collapsed') { $(".toggle_container").hide(); $(".trigger").toggle(function () { $(this).addClass("active"); }, function () { $(this).removeClass("active"); }); $(".trigger").click(function () { $(this).next(".toggle_container").slideToggle("slow,"); }); } else { $(".toggle_container").show(); $(".trigger").toggle(function () { $(this).addClass("active"); }, function () { $(this).removeClass("active"); }); $(".trigger").click(function () { $(this).next(".toggle_container").slideToggle("slow,"); }); }; $(".trigger").click(function () { if ($(".toggle_container").is(":hidden")) { $(this).next(".toggle_container").slideToggle("slow,"); $.cookie('showTop', 'expanded'); } else { $(this).next(".toggle_container").slideToggle("slow,"); $.cookie('showTop', 'collapsed'); } return false; }); and this is a snippet of the HTML it works with: <li> <label for="small"><input type="checkbox" id="small" /> Small</label> <a class="trigger" href="#">Toggle</a> <div class="toggle_container"> <p class="funding"><strong>Funding</strong></p> <ul class="childs"> <li class="child"> <label for="fully-funded1"><input type="checkbox" id="fully-funded1" /> Fully Funded</label> <a class="trigger" href="#">Toggle</a> <div class="toggle_container"> <p class="days"><strong>Days</strong></p> <ul class="days clearfix"> <li><label for="1pre16">Pre 16</label> <input type="text" id="1pre16" /></li> <li><label for="2post16">Post 16</label> <input type="text" id="2post16" /></li> <li><label for="3teacher">Teacher</label> <input type="text" id="3teacher" /></li> </ul> </div> </li>

    Read the article

  • how to properly use jquery .stop() ?

    - by GaVrA
    Hello! On this page: http://www.arvag.net/old/smsbox.de/ when you hover over "Informationen" and "Über uns" you get sub menu shown. When you move mouse away it hides. Normally i have problem with jquery making queue for every single hover i make, and then i just keeps on animating all those hovers. I tried to implement stop() but just cant get it to work properly. This is the code i am using: <script type="text/javascript"> //<![CDATA[ $(function(){ $('#nav_menu > .center > ul > li').hover(function() { $(this).children('ul').slideToggle('slow'); },function(){ $(this).stop(true,true).children('ul').slideToggle('slow'); }).click(function(){ return false; }); }); //]]> </script> Thanks!

    Read the article

  • A elusive multi level accordion

    - by juanpablo
    Hi, I try make a multi level accordion with jquery: <div class="acordion"> <a href="#"><h1>aaa</h1></a> <div class="acoTitulo"> <h1>aaa</h1> <div class="acoSubTitulo"> <a href="#"><h2>bbb</h2></a> <div class="acoSubSubTitulo"> <h2>bbb</h2> <div class="acoLink"> <a href="#">ccc</a><br> <a href="#">ccc</a> </div> </div> </div> <!-- acoSubTitulo --> </div> <!-- end acoTitulo --> <div class="acoTitulo"> <h1>aaa</h1> <div class="acoSubTitulo"> <a href="#"><h2>bbb</h2></a> <div class="acoSubSubTitulo"> <h2>bbb</h2> <div class="acoLink"> <a href="#">ccc</a><br> <a href="#">ccc</a> </div> </div> </div> <!-- acoSubTitulo --> </div> <!-- end acoTitulo --> <div class="acoTitulo"> <h1>aaa</h1> <div class="acoSubTitulo"> <a href="#"><h2>bbb</h2></a> <a href="#"><h2>bbb</h2></a> </div> <!-- acoSubTitulo --> </div> <!-- end acoTitulo --> <a href="#"><h1>aaa</h1></a> <a href="#"><h1>aaa</h1></a> <div class="acoTitulo"> <h1>aaa</h1> <div class="acoSubTitulo"> <a href="#"><h2>bbb</h2></a> <a href="#"><h2>bbb</h2></a> </div> <!-- acoSubTitulo --> </div> <!-- end acoTitulo --> <div class="acoTitulo"> <h1>aaa</h1> <div class="acoSubTitulo"> <a href="#"><h2>bbb</h2></a> <a href="#"><h2>bbb</h2></a> </div> <!-- acoSubTitulo --> </div> <!-- end acoTitulo --> </div> <!-- end acordion --> .acordion h1, .acordion h2, .acoLink { font-size: 11px; padding: 8px; } .acoTitulo h2 { margin: 0px; } .acordion * a, .acordion a { text-decoration:none; color: #fff; } .acordion { width: 160px; color: #fff; background-color: #06f; border: 1px solid #06f; } .acoSubTitulo { background-color: #09f; } $(document).ready(function(){ $(".acoSubTitulo").hide(); $(".acoLink").hide(); $(".acoTitulo").hover( function(){ $(this).find(".acoSubTitulo").slideToggle("slow"); },function(){ $(this).find(".acoSubTitulo").slideToggle("slow"); } ); $(".acoSubSubTitulo").hover( function(){ $(this).find(".acoLink").slideToggle(); },function(){ $(this).find(".acoLink").slideToggle(); } ); }); but, this accordion is very elusive with the mouse. any idea? many thanks.

    Read the article

  • IE8 Slide Toggle Issue

    - by jef2904
    Im having some trouble with jQuery's slideToggle function in IE8 for some reason the DIV its opening closes immediately after its opened heres the code im using $("h3 a").click(function(){ id = $(this).attr("href"); $(id).slideToggle("slow"); }); and the HTML <h3><a href="#promo-materials">Graphic and Pormotional Materials</a></h3> <div id="promo-materials" class="center gallery"> <a href="images/portfolio/bistro.png" rel="facebox"> <img src="images/portfolio/thumbs/bistro.png" alt="" /> </a> <a href="images/portfolio/direct-savings.png" rel="facebox"> <img src="images/portfolio/thumbs/direct-savings.png" alt="" /> </a> </div> Here is a link to the functional page it works in all other browsers including IE7

    Read the article

  • How to animate/show a hidden div?

    - by Ricky Cortes
    So I'm trying to show a div with a toggle transition when a link is clicked. My code: $("nav ul li#about a").click(function (e) { $("div#about").slideToggle(200); e.preventDefault(); }); It works great, but I want this effect here: http://ricostacruz.com/jquery.transit/ Scroll down and find "TRANSITIONS FOR OTHER PROPERTIES". Do you see that scale effect (first demo box)? THAT is what I want instead of the slideToggle. So I want this similar effect to TOGGLE... transition IN and OUT when link is clicked. I hope you guys can help me :)

    Read the article

  • Hide and Show content based on Cookie value

    - by danit
    Here is my Jquery: $("#tool").click(function() { $(".chelp").slideToggle(); $("wrapper").animate({ opacity: 1.0 },200).slideToggle(200, function() { $("#tool img").toggle(); }); }); When you click #tool img #wrapper is hidden along with .chelp. I need to control this with a cookie, so when the user hides #wrapper it remains hidden on all pages or when they re-visit the page. I know there is a jQuery Cookie plugin, but I'd like to do this with plain Javascript rather then including another plugin. Can anyone tell me how i can build in it in plain javascript and merge with the JQuery to create a cookie, then check the cookie each time the page loads to see if #wrapper should be hidden or displayed?

    Read the article

  • when i refresh the page, the popup window is visible for a second. How to clear this issue

    - by mano
    script $(document).ready(function(){ $(".aboutBtn").click(function () { $(".aboutContent").slideToggle("slow"); }); $(".contact").click(function () { $(".aboutContent").slideToggle("slow"); }); }); *Html * <article class="aboutBtn">ABOUT</article> Css .aboutBtn{ width:85px; padding:5px 0px 5px 10px; background-color:#d8531e; cursor:pointer; color:#ffffff; font-size:20px; text-transform:uppercase; position:relative;top:-48px; font-family:"Segoe UI Light"; }

    Read the article

  • Fade out when user leaves page — jquery

    - by Tom Julian Hume
    I have some simple page transitions that fade in, once the user has landed. However, I'm also trying to make the same page fade out, when the user leaves. I have found a few solutions, but they appeared to use delay(). Are there any that don't? Thanks for any help, (I'm new to this, mind!) Tom :) I am currently using this code: $(document).ready( function(){ $( 'body' ).fadeIn(2000); $('#stop').click(function (e) { e.preventDefault(); }); $('#clients').click(function() { $("#projectinfo").slideUp('slow'); $("#us").fadeOut('slow'); $("ul").fadeToggle('slow'); }); $('#information').click(function() { $("#projectinfo").slideUp('slow'); $("ul").fadeOut('slow'); $("#us").fadeToggle('slow'); }); $('#question').click(function() { $("#projectinfo").slideToggle('slow'); }); $('#question').hover(function() { $("#projectinfo").slideToggle('slow'); }); $("a").click(function(event){ event.preventDefault(); linkLocation = this.href; $("body").fadeOut(1000, redirectPage); }); function redirectPage() { });

    Read the article

  • jQuery .animate() not animating backgroundPosition in IE

    - by mikemike
    I'm trying to animate a background image to move down a set amount of pixels but remain in the center of the page. Upon another click of an element I need it to move back to the top, but still remain in the center. Below is the current code: $(document).ready(function() { $('#email_campaigns').click(function(){ var width = $(window).width(); width = (width / 2) - 700; if($('#email_campaigns_box').css('display') == 'none'){ //$('body').css('background-position','center 119px'); $('body').animate({ backgroundPosition: (width + "px 119px") }, {duration:500}); } else { //$('body').css('background-position','center top'); $('body').animate({ backgroundPosition: (width + "px 0px") }, {duration:500}); } $('#email_campaigns_box').slideToggle("slow"); $('#client_login_box').slideUp("slow"); }); $('#client_login').click(function(){ var width = $(window).width(); width = (width / 2) - 700; alert(width); if($('#client_login_box').css('display') == 'none'){ //$('body').css('background-position','center 119px'); $('body').animate({ backgroundPosition: (width + "px 119px") }, {duration:500}); } else { //$('body').css('background-position','center top'); $('body').animate({ backgroundPosition: (width + "px 0px") }, {duration:500}); } $('#client_login_box').slideToggle("slow"); $('#email_campaigns_box').slideUp("slow"); }); }); I cannot pass 'center', as it will onyl accept numeric values. My goal is to calulate the center of the page in pixels (width = (width / 2) - 700;), and then animate to this rough position (it's normally out by a few pixels due to scrollbars, and then force to the center using a .css() call. The problem is that IE does not want to play ball. IE will not animate at all. Firefox/Safari/Chrome all work as expected. Below is a live example: http://recklessnewmedia.com/new/# (click 'email campaigns' at the top). Thanks

    Read the article

  • Toggle button and Toggle visibility

    - by danit
    I'm using this jQuery to hide a DIV: $("#slider").click(function() { $(".help").slideToggle(); $("#wrapper").animate({ opacity: 1.0 },200).slideToggle(200, function() { $("#slider a").text($(this).is(':visible') ? "Hide" : "Show"); }); }); Instead of altering the text show I want to display a graphic, I want the grpahic to change based on the .toggle Current HMTL: <div id="wrapper"> LI ITEMS </div> <div class="help"> IMAGE </div> <div id="slider"> <a href="#">Hide</a> </div> I'd like to add two images into .slider, removing the <a>: <div id="slider"> <img class="show" title="Hide" alt="Hide" src="images/showbutton.png" /> <img class="hide" title="Hide" alt="Hide" src="images/hidebutton.png" /> </div> Perhaps I can use css to hide the 'hide' button, then switch that using jquery in some way? Any suggestions?

    Read the article

  • JQuery & Wordpress - Hide multiple divs inside unique ID?

    - by steelfrog
    I'm trying to write a short Wordpress JQuery for Wordpress comments that would allow users to toggle specific comments on and off. This is my first script, and I'm having a tough time. Once overtly simplified, the comments are formatted like so: <li id="li-comment-<?php comment_ID() ?>"> <div class="gravatar"><img src="#" /></div> <div class="comment_poster">Username</div> <div class="comment_options">Option buttons</div> <div class="comment_content">Comment</div> </li> In the "comment_options" DIV is a series of buttons that control the individual comments (reply, quote, edit, close, etc.). The close button is what I'm trying to write this script for. I need it to toggle the "gravtar" and "comment_content" DIVs, but leave the rest in place so that it still displays the user ID and controls. However, I can't seem to figure out how to contain the action. This is what I have so far: $(document).ready(function() { $("div.trigger").click(function() { $("div.gravatar").slideToggle(); $("div.comment_content").slideToggle(); }); }); The problem with this is that it closes are the .gravatar and .comment_content on the page, not just the ones found in the same list item. If you're curious, this is the page I'm working on. Any idea how I could resolve this? Again, this is my firs time with JQuery, so I'm a little fuzzy on how it all works. Thanks!

    Read the article

  • Fading out an article and dropping down a form at the same time?

    - by eveo
    I have an article: <article> Some paragraphs. </article> Below that I have my contact: <div id="contact"> stuff, this form is 600 px tall </div> contact is set to display:none;. I use jQuery to toggle it. What I'm trying to do is modify this script from http://tutsplus.com/lesson/slides-and-structure/ so that it fades out the article text and then slides in the contact form. Having some trouble. Code: <script> (function() { $('html').addClass('js'); var contactForm = { container: $('#contact'), article: $('article'), init: function() { $('<button></button>', { text: 'Contact Me' }) .insertAfter('article:first') .on('click', function() { console.log(this); this.show(); // contactForm.article.fadeToggle(300); // contactForm.container.show(); }) }, show: function() { contactForm.close.call(contactForm.container); contactForm.container.slideToggle(300); }, close: function() { console.log(this); $('<span class=close>X</span>') .prependTo(this) .on('click', function(){ contactForm.article.fadeToggle(300); contactForm.container.slideToggle(300); }) } }; contactForm.init(); })(); </script> The part that is not working is: .on('click', function() { console.log(this); this.show(); // contactForm.article.fadeToggle(300); // contactForm.container.show(); }) When I do .on('click', this.show); it works fine, when I put this.show in a function it does not work!

    Read the article

  • javaScript .splice() not working on correctly

    - by adardesign
    I am setting a cookie for each navigation container that is clicked on. It sets an array that is joined and set the cookie value. if its clicked again then its removed from the array. It somehow buggy. It only splices after clicking on other elements. and then it behaves weird. Thanks much. var navLinkToOpen; var setNavCookie = function(value){ var isSet = false; var checkCookies = checkNavCookie() setCookieHelper = checkCookies? checkCookies.split(","): []; console.log("value passed", value) for(i in setCookieHelper){ if(value == setCookieHelper[i]){ setCookieHelper.splice(value,1); isSet = true; } } if(!isSet){ setCookieHelper.push(value) } setCookieHelper.join(",") document.cookie = "navLinkToOpen"+"="+setCookieHelper; } var checkNavCookie = function(){ var allCookies = document.cookie.split( ';' ); for (i = 0; i < allCookies.length; i++ ){ temp = allCookies[i].split("=") if(temp[0].match("navLinkToOpen")){ var getValue = temp[1] } } return getValue || false } $(document).ready(function() { $("#LeftNav li").has("b").addClass("navHeader").not(":first").siblings("li").hide() $(".navHeader").click(function(){ $(this).toggleClass("collapsed").nextUntil("li:has('b')").slideToggle(300); setNavCookie($('.navHeader').index($(this))) return false }) console.log("init",document.cookie) var testCookies = checkNavCookie(); if(testCookies){ finalArrayValue = testCookies.split(",") for(i in finalArrayValue){ $(".navHeader").eq(finalArrayValue[i]).toggleClass("collapsed").nextUntil(".navHeader").slideToggle (0); } } });

    Read the article

  • Javascript Cookie Function not working for Domain

    - by danit
    Here are the functions Im using: Set Cookie: function set_cookie ( name, value, exp_y, exp_m, exp_d, path, domain, secure ) { var cookie_string = name + "=" + escape ( value ); if ( exp_y ) { var expires = new Date ( exp_y, exp_m, exp_d ); cookie_string += "; expires=" + expires.toGMTString(); } if ( path ) cookie_string += "; path=" + escape ( path ); if ( domain ) cookie_string += "; domain=" + escape ( domain ); if ( secure ) cookie_string += "; secure"; document.cookie = cookie_string; } Read Cookie: function get_cookie ( cookie_name ) { var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' ); if ( results ) return ( unescape ( results[2] ) ); else return null; } Delete Cookie: function delete_cookie ( cookie_name ) { var cookie_date = new Date ( ); // current date & time cookie_date.setTime ( cookie_date.getTime() - 1 ); document.cookie = cookie_name += "=; expires=" + cookie_date.toGMTString(); } The Jquery I use to construct the cookie: if(get_cookie('visible')== 'no') { $("#wrapper").hide(); $(".help").hide(); $("#slid .show").show(); $("#slid .hide").hide(); } else { $("#slid .show").hide(); $("#slid .hide").show(); } $("#slider").click(function() { if(get_cookie('visible')== null) { set_cookie('visible','no', 2020, 01,01, '/', 'domain.com'); } else { delete_cookie('visible'); } $(".help").slideToggle(); $("#wrapper").animate({ opacity: 1.0 },200).slideToggle(200, function() { $("#slid img").toggle(); }); }); Im trying to set the cookie for all pages that exist under domain.com with the path '/'. However using these functions and jQuery it doesn't appear to be working, any anyone give me an idea of where im going wrong?

    Read the article

  • splice() not working on correctly

    - by adardesign
    I am setting a cookie for each navigation container that is clicked on. It sets an array that is joined and set the cookie value. if its clicked again then its removed from the array. It somehow buggy. It only splices after clicking on other elements. and then it behaves weird. It might be that splice is not the correct method Thanks much. var navLinkToOpen; var setNavCookie = function(value){ var isSet = false; var checkCookies = checkNavCookie() setCookieHelper = checkCookies? checkCookies.split(","): []; for(i in setCookieHelper){ if(value == setCookieHelper[i]){ setCookieHelper.splice(value,1); isSet = true; } } if(!isSet){setCookieHelper.push(value)} setCookieHelper.join(",") document.cookie = "navLinkToOpen"+"="+setCookieHelper; } var checkNavCookie = function(){ var allCookies = document.cookie.split( ';' ); for (i = 0; i < allCookies.length; i++ ){ temp = allCookies[i].split("=") if(temp[0].match("navLinkToOpen")){ var getValue = temp[1] } } return getValue || false } $(document).ready(function() { $("#LeftNav li").has("b").addClass("navHeader").not(":first").siblings("li").hide() $(".navHeader").click(function(){ $(this).toggleClass("collapsed").nextUntil("li:has('b')").slideToggle(300); setNavCookie($('.navHeader').index($(this))) return false }) var testCookies = checkNavCookie(); if(testCookies){ finalArrayValue = testCookies.split(",") for(i in finalArrayValue){ $(".navHeader").eq(finalArrayValue[i]).toggleClass("collapsed").nextUntil(".navHeader").slideToggle (0); } } });

    Read the article

  • one click, two 'click' event fired

    - by Toni Michel Caubet
    I just want to toggle some elements when a link is clicked: This is how i am trying (But i don't really think that it matters much for this question what's inside the event function callback): /* mostrar exceso de comentarios a peticion del usuario*/ $('.toggleComments').click(function(){ console.log('.toggleComments'); if($(this).parents('.helpContent').find('.commentHideble:visible').length > 0){ $(this).text('+ <?=get_texto_clave('show_old_comments')?>').removeClass('toggleCommentsActive').append(' ('+$(this).parents('.helpContent').find('.commentHideble:not:visible').length+'+)'); }else{ $(this).text('- <?=get_texto_clave('hide_old_comments')?>').addClass('toggleCommentsActive'); } $(this).parents('.helpContent').find('.commentHideble').slideToggle(100); }); I even tried a boolean but gave me same result /* mostrar exceso de comentarios a peticion del usuario*/ var ctoggle = false; $('.toggleComments').click(function(){ if(ctoggle == false){ ctoggle = true; console.log('.toggleComments'); if($(this).parents('.helpContent').find('.commentHideble:visible').length > 0){ $(this).text('+ <?=get_texto_clave('show_old_comments')?>').removeClass('toggleCommentsActive').append(' ('+$(this).parents('.helpContent').find('.commentHideble:not:visible').length+'+)'); }else{ $(this).text('- <?=get_texto_clave('hide_old_comments')?>').addClass('toggleCommentsActive'); } $(this).parents('.helpContent').find('.commentHideble').slideToggle(100); ctoggle = false; } }); Why the log is being fired twice by click?

    Read the article

  • jQuery not refreshing tabs content in IE

    - by iddimu
    Hi all! I have a page that is using jQuery tabs. Within one of my tabs I have a div that contains a form (initially hidden) that I want to use to add content to the tab. What I have works perfectly in Chrome, Firefox, and Safari. But, in IE 7 the tab will not refresh. The post works and the data gets added to the database, but it simply will not show the new content after submitting it. I don't think it matters - but, just for information I am using the Codeigniter PHP framework as well. Here is my javascript: <script type="text/javascript"> $(document).ready(function(){ // initialize the addChild form as hidden until user requests it open $('#addChild').hide(); // open the form $('#openDialog').click( function(){ $('#addChild').slideToggle(); return false; }); // close the form $('#closeDialog').click( function(){ $('#addChild').slideToggle(); return false; }); // submit the form $('#frmAddChild').submit( function(){ $('#addChild').slideToggle(); $.ajax({ url: '/children/add', type: 'POST', data: $('#frmAddChild').serialize() //cache: false }); //reload the children tab $('#tabs').tabs('load',3); return false; }); }); </script> And, here is my PHP/HTML: <?php // initialize the elements of the form $frmAddChild = array( 'name' => 'frmAddChild', 'id' => 'frmAddChild', 'method' => 'post' ); $child_name = array( 'name' => 'child_name', 'id' => 'child_name', ); $child_dob = array( 'name' => 'child_dob', 'id' => 'child_dob' ); $btnOpenDialog = array( 'name' => 'openDialog', 'id' => 'openDialog', 'value' => 'true', 'content' => 'Add Child' ); $btnCloseDialog = array( 'name' => 'closeDialog', 'id' => 'closeDialog', 'value' => 'true', 'content' => 'Cancel' ); // button that shows the drop down to add echo form_button($btnOpenDialog); ?> <div id="addChild" title="Add Child"> <?php echo form_open('children/add/',$frmAddChild); ?> <table> <tr> <td> <?php echo form_label('Child\'s Name', 'child_name'); ?>: </td> <td> <?php echo form_input($child_name); ?> </td> </tr> <tr> <td> <?php echo form_label('Date of Birth','child_dob'); ?>: </td> <td> <?php echo form_input($child_dob); ?> </td> </tr> <tr> <td colspan="2" align="right"> <?php echo form_submit('submit', 'Add'); ?> <?php echo form_button($btnCloseDialog); ?> </td> </tr> </table> <?php echo form_close(); ?> </div> Does anyone have any ideas how I can get this working correctly in IE? Also, if anyone has any comments about how I have things structured, please let me know. I'm new to Codeigniter and I am by no means a javascript or jQuery expert. Thanks for your help!

    Read the article

< Previous Page | 1 2 3 4 5 6  | Next Page >