w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
Slide toggle element when height is dynamic
$("footer").on("tap click", function () { $(this).parent().next().slideToggle(); var section = $(this).prev(), toHeight = (section.height() == 60) ? section.get(0).scrollHeight : 60; section.animate({ height: toHeight}, "fast"); });

Categories : Jquery

jQuery slide toggle, div moves position after first toggle
change basketButton class as follows: .basketButton{ width:270px; position:relative; text-align:right; /*background-image:url('images/pinkbag.png');*/ background:red; display:inline-block; background-repeat: no-repeat; height: 67px; }

Categories : Jquery

Jquery toggle('slide') only slides once
When you use toggle on hover, you don't need to do the the mouseleave event. Also note that stop takes to boolean parameters, first for clear queue, second for jump to end: Just do: $('.proimg').hover(function(event) { $('.boxcaption',this).stop(true, true).toggle( 'slide' ); }); Fiddle: http://jsfiddle.net/rK4GD/10/ See: http://api.jquery.com/stop/

Categories : Javascript

jQuery slide toggle on a fixed div
Just add return false: <script> $(document).ready(function(){ $(".basketButton").click(function(){ $(".basket").slideToggle("slow"); return false; }); }); </script> The link tries to navigate to the anchor #, and that's the top of the page. Return false disables the default behavior of the link. For the positioning just use one fixed div with the button and the basket inside: http://jsfiddle.net/w1ll3m/9fZsj/3/

Categories : Jquery

jQuery Accordion Toggle Slide Up & Down
Yo, DJ! Just came across this question :) Hopefully this is still of some help: var accordion_head = $('.accordion > li > .toggle'); accordion_head.on('click', function (event) { var $a = $(this); event.preventDefault(); if ($a.hasClass('active')) { $a.removeClass('active').siblings('div').slideUp(); } else { $a.addClass('active').siblings('div').slideDown(); } }); Example fiddle

Categories : Jquery

Jquery Toggle slide of Child Element
use toggle() and toggleClass(); $(document).ready(function() { $('.content').hide(); $(".reveal-more").click(function() { $(".content", this).toggle("slow"); $(".content", this).toggleClass("open-information"); $(".reveal-more h3").toggleClass("open-container"); }); }); fiddle here

Categories : Jquery

jquery slide toggle : hidden + new link
Try this: var $j = jQuery.noConflict(); $j('#containertoggle').on('click', 'a.opener', function () { $j(this).next().toggle('slow').find('p').append('<span> close</span>'); $j(this).hide(); }); $j('#containertoggle').on('click', 'span', function () { $j(this).closest('div').toggle('slow').closest('li').find('a').show(); $j(this).remove(); }); jsFiddle example

Categories : Javascript

Slide Toggle After Page Resize Bugging - jQuery
I had a quick test and found that removing the resive condition and putting it into it's own function seemd to fix the issue From $(document).ready(function () { var width = $(window).width(); if (width > 400) { $('#width').myfunction(); } else { $('#width').mysecondfunction(); } $(window).resize(function () { var width = $(window).width(); if (width > 400) { $('#width').myfunction(); } else { $('#width').mysecondfunction(); } }); }); to $(document).ready(function () { var width = $(window).width(); if (width > 400) { $('#width').myfunction(); } else { $('#width').mysecondfunction(); } }); $(window).resize(function () { var width = $(window).width(); if (width > 400) {

Categories : Javascript

jquery slide toggle iframe overriding hide or show
Managed to find the answer by adding the dfp code in via jQuery rather than straight into the html. Have put the invocation code into two lines (59 and 73) and tested it. Here is the finished code… <style> #billboardButton { background-color:#f1f1f1; color:#666; padding:3px; width:100px; cursor:pointer; text-align:center; margin:0 auto; } </style> <!-- Load the latest version of jQuery --> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <!-- Load the jquery.cookie.js plugin --> <script src="https://googledrive.com/host/0B7ZDS1Dob8_8WXhpUVdtNjVNdWc/"></script> <script type='text/javascript'> var googletag = googletag || {}; googletag.cmd = googletag.cmd || []; (f

Categories : Jquery

jQuery show hide multiple links slide toggle div
You can use an instance of this, also, you're going to need two div's for each link: <a href="#" id="toggle3">Slide Toggle3</a> <div class="toggle" style="display:none; background-color:#4CF;width:100px;height:200px;"></div> <br><br> <a href="#" id="toggle4">Slide Toggle3</a> <div class="toggle" style="display:none; background-color:#4CF;width:100px;height:200px;"></div> You should also use a class for your links, but I just comma separated the ID's $("#toggle3, #toggle4").click(function() { $(this).next(".toggle").slideToggle("slow"); }); Demo: http://jsfiddle.net/nbh2w/2/

Categories : Javascript

jQuery slide toggle checkbox cant change background colour
Add the style #stage .slider-frame.green { background-color: #5fca42 !important; -moz-box-shadow: 0 1px 0 rgba(255,255,255,.4), inset 0 1px 3px rgba(0,0,0,.32), inset 0 0 3px rgba(0,0,0,.12); -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.4), inset 0 1px 3px rgba(0,0,0,.32), inset 0 0 3px rgba(0,0,0,.12); box-shadow: 0 1px 0 rgba(255,255,255,.4), inset 0 1px 3px rgba(0,0,0,.32), inset 0 0 3px rgba(0,0,0,.12); background-image: -webkit-linear-gradient(bottom, #5fca42 0%, #5fca42 0.27%, #d8d8d8 100%); } Demo: Fiddle

Categories : Jquery

float:right causes jquery slide toggle dropdown div (activated via hover) to be jumpy?
Are you referring to the fact that when you mouse over it, it expands, then slightly retracts? If so try adding the min-height property set to the size of the icons to the .notes element and it seems to prevent this jittering. Tip: I noticed if you mouse out right away it will jitter too because it calls the method at the same time. Set a flag when the animation initiates to prevent the other animation from starting. something like this pseudo code: //Global Flag flag = false; -- start function -- //prevent animation if another animation is in progress. if(flag) return; flag = true; your.animation(function(){ //callback (when animation is done) flag = false; //rest flag }); The reason why it jitters is because since the elements inside are set to float, the height of the p

Categories : Javascript

Jquery CSS height Toggle
That is because you have a typo. In your first line you check ('#descrition').css('height') instead of ('#description').css('height'). But you could also use: $('#description').height(); But that gives a value without the 'px'.

Categories : Jquery

slide from right to left using slide toggle or animate
So first time, you animate it from left to right, next time, you animate it from right to right? If I understood you right, you want the menu to be hidden, and then when the button is pressed, the menu slides visible from left to right. Next time button is pressed, it slides back, from right to left. This is exactly what the code does, except for hiding the menu. $(MENU_BUTTON).click(function() { var right = $(MENU_ID).hasClass('right'); $(MENU_ID).toggleClass('right'); // If you would like to hide/show it too. // Change the 0 to 0-$(MENU_ID).outerWidth(); /* if (right) { setTimeout(function () {$(MENU_ID).hide();}, 600); } else $(MENU_ID).show(); */ $(MENU_ID).animate({ width:(right?0:245) }, 600); });

Categories : Jquery

Jquery Cycle Carousel with varying slide height
overflow: hidden in the below line of code is hiding the content when we set the 0 to containerResize. This style is getting added from the jquery.cycle.all plugin code. You may have to modify the script to get the content displayed. <div class="allSlidesWrap slideshow" style="position: relative; overflow: hidden;">

Categories : Jquery

carousel-slide-dimension on Jquery Cycle2 -fixed width/height
All the attributes with cycle2 are preceded by "data-cycle-" so for carousel-slide-dimension, you simply add that like so: data-cycle-carousel-slide-dimension=300 in your slideshow div (and whatever dimension). Hope this helps!

Categories : Misc

jQuery toggle slides DIV up and down, but UL content animates left to right. How can I make the content slide up and down?
toggle() simply toggles the showing/hiding, but doesn't specify how to show/hide. Try: $('#myMenu ul').slideToggle('slow'); jsfiddle

Categories : Jquery

Script for slide/toggle menu?
Maybe something like this? HTML: <div id="header"> <ul> <li>Foo</li> <li>Bar</li> <li>Boo</li> <li>Far</li> </ul> <div id="toggledWrapper"> <p id="toggled">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <div id="toggler">Toggle</div>

Categories : Javascript

Slide toggle nav to open on page load
In your html : <div class="container open-sidebar"> [content] </div> or in your Js : $(window).load(function(){ $(".container").addClass("open-sidebar"); // add class ".open-sidebar" to ".container" once dom is loaded $("[data-toggle]").click(function() { ...

Categories : Jquery

How to create a simple slide Up slide down login/signup division in JQUERY
You need to change your show()'s and hide()'s to be called when the sliding is done. Like this: $(".show_hide_sign_up").slideUp(function() { $(this).show() } ); $(".show_hide_sign_up").slideDown(function() { $(this).hide() } );

Categories : Javascript

Using multiple radio buttons to toggle slide out windows
I hope I understand your question correctly. I made an example with 2 radio button's. The trick is to set a transition-delay to the div that is currently closed. I will explain my code with comments. HTML <input type="radio" name="slider" id="one"> <input type="radio" name="slider" id="two"> <label for="one">slider one</label> <label for="two">slider two</label> <div class="slider slider_one">one</div> <div class="slider slider_two">two</div> CSS html,body { height:100%; width:100%; overflow:hidden; /* you can change this, just for the example */ } input { position:absolute; /* move the checkbox from the field since we can't style them */ left:-9999px; top:-9999px; } label { -webkit-appearance:

Categories : HTML

How do I use Jquery Mobile Slide Panel to slide up from the bottom?
see https://github.com/jquery/jquery-mobile/pull/5770 Unfortunately, arschmitz said: there are a bunch of conflicts here because of changes we have made to panels. love the feature though and would love to try and make this happen for 1.5 im going to close this PR just because it is now outdated however would like to work with you to land this in hopefully next version

Categories : Javascript

jQuery slide from right, change image then slide back
It looks as if this code just sets it to appear at two different coordinates, you may need the slide functionality in jQuery UI for this one. jQuery slide left and show

Categories : Jquery

I want div slide up & slide down action for jquery 1.3.2 version
Here. Try this fiddle (using jQuery 1.3.2) : Updated JS: function toggle() { $("#monster").slideToggle("fast"); } $("#clickk").hover(toggle,toggle); The difference was in hover function in both the versions : From 1.3.2 hover:function(E,F){return this.mouseenter(E).mouseleave(F)} From 1.4.2 hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)} Notice that in 1.4.2 the hover sets mouseleave to same as mouseenter when not specified.

Categories : Jquery

Second jQuery toggle() file breaks the first toggle() method
Add jquery library once in header, and remove any other occurrences of below script inclusion, if you include it twice or more all the variables will be reset. remove this line only in your file inclusion -> http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js Rest of all is ok and will work $("button").click(function(){ $("p").toggle(); });

Categories : Javascript

jQuery toggle inside toggle, with individual selection
Ok then here it is: $('.to-do > span').click(function () { var ix = $(this).index(); console.log(ix); $('.add', $(this).parents('div')).toggle(ix == 0); $('.reduce', $(this).parents('div')).toggle(ix == 1); return false; }); JSFiddle

Categories : Javascript

jquery - when toggle children do not toggle parent
use e.stopPropagation(); $('#menu').on('click','.level1',function(e) { e.stopPropagation(); $(this).find('.level2').slideToggle(); }); $('#menu').on('click','.level2',function(e) { e.stopPropagation(); $(this).find('.level3').slideToggle(); }); $('#menu').on('click','.level3',function(e) { e.stopPropagation(); $('.level3').hide(); $('.level2').hide(); $('.level1').hide(); $('#menu').hide(); });

Categories : Javascript

jQuery using .toggle() to toggle a single element
Try this : $('.classname').eq(0).toggle() When using [], you are losing jquery reference and the object become a dom element. DOM element are used with Javascript. Example : $('.classname')[0].id //will work since .id is a DOM attribute $('.classname').eq(0).id //will not work since it's a jQuery object Here the jQuery .eq() information page. Elements are based on a 0 index, wich mean 0 = first element, 1 = second element and go on

Categories : Javascript

Div height doesn't toggle
Try this code. Actually the $(this).next() will fetch div, which is the parent of .dropdown-container. That is why .dropdown-container is not displaying $("a.dropdown-link").click(function(e) { e.preventDefault(); e.stopPropagation(); dd.hide("fast"); $(this).next().find('.dropdown-container').show(); }); JS Fiddle demo http://jsfiddle.net/t7FL9/1/

Categories : HTML

JS Dropdown menu bugs out on height toggle
Use jQuery.stop() in order to stop the currently-running animation on the matched elements. Example :: $('li.tab-drop-down').hover(function(){ $(this).stop(true, true); //existing stuff }, function(){ $(this).stop(true, true); //existing stuff }); }); This will fix your issue.

Categories : Jquery

jquery stop() not working when combining jquery fade and slide jquery-ui
Instead of using separate funcitons for the fadeIn and slide effect I decided to implement both in a single animate() function, then I just added some CSS resets to make sure the element is ready before starting the animation: $(document).ready(function () { var _duration = 1000; $('#show-effect-1').hover(function () { var $next = $('.text-banner'); $next.show(); $next.stop(true, true).css({ 'margin-left': $next.outerWidth() * -1, 'margin-top': 0, 'opacity': 0, 'display': 'block' }).animate({ 'margin-left': 0, 'opacity': 1 }, _duration); }, function () { var $next = $('.text-banner'); $next.stop(true, true).animate({ 'margi

Categories : Javascript

jQuery - get tallest image's height, apply other images' height difference to top margin
Try this: function createGrid() { var imgs = $('.hlist figure > img'); var maxImgHeight = 0; imgs.each(function () { var imgHeight = $(this).outerHeight(); maxImgHeight = maxImgHeight > imgHeight ? maxImgHeight : imgHeight; }); imgs.each(function () { var margin = maxImgHeight > $(this).outerHeight() ? (maxImgHeight - $(this).outerHeight()) : 0; $(this).css("margin-top", (margin + "px")); }); } The first each loop looks for the tallest height and stores it in maxImgHeight, as you originally had planned. The second each loop calculates and applies the margin for each image. The conditional assignment will cause the margin-top for the tallest image to be 0.

Categories : Javascript

jQuery Set height of 2 independent lists first list li the same height as second li
http://jsfiddle.net/EvspT/ $(document).ready(function() { $('.extraQuestionName li').each(function(i) { $('.extraQuestionValue li').eq(i).height($(this).height()); }); }); The each() function has an index parameter. This loops through the li elements in the first list, and uses eq() to find the item with the same index in the second list, then set the height.

Categories : Jquery

Javascript / jQuery - Is there a performance difference between height() and .css({'height'})
Read the Source, Luke. jQuery.prototype.height: //snipped to end: return value === undefined ? // Get width or height on the element, requesting but not forcing parseFloat jQuery.css( elem, type, extra ) : // Set width or height on the element jQuery.style( elem, type, value, extra ); jQuery.prototype.css: return value !== undefined ? jQuery.style( elem, name, value ) : jQuery.css( elem, name ); The difference between the two is what's done before going over the matched elements, and that extra parameter that's passed in .height. What could rationally cause a big slowdown? I've no real idea. Maybe it has to do with optimizations a js engine can do in one, but not the other. More likely than not, the perf test is bad (testing these things correctly is very ha

Categories : Javascript

jQuery Error: Object has no method 'height', this.height()
this is a DOM element. You want a jQuery object. Try $(this).height() : function Test(){ $("#list li").each(function(){ var h = $(this).height() + 50; $(this).height(h); }); }

Categories : Jquery

jquery-Slide Effect not consistent and happening too many times with jquery 1.7
Try $(document).ready(function() { $(".menuList li").mouseenter( function() { $(this).find(".submenuInner").stop(true, true).css({"margin-top":"0"}); $(this).children(".submenu").stop(true, true).slideDown("slow"); }); //console.log("menuin"); $(".menuList li").mouseleave( function() { $(this).children(".submenu").stop(true, true).slideUp("slow"); //$(this).find(".submenuInner").animate({marginTop:"-100%"},{queue :false,duration :50}); $(this).find(".submenuInner").stop(true, true).animate({marginTop:"-100%"},500); }); }); Demo: Fiddle

Categories : Jquery

How to Remove Delay on Css3 Slide out transition which uses max-height transition
It's because you're animating between 0 and 1000px max height but your content is only about 120px high. The delay is the animation happening on the 880 pixels that you can't see. Either set max-height to the known height of your content (if you know it - example: http://jsbin.com/onihik/1/) or try a different method. Maybe something like http://stackoverflow.com/a/6486082/2619379

Categories : Misc

jQuery, min-height based on browser height
Use css(). var height = $(window).height(); $(".single-block").css("min-height", height); or simply: $(".single-block").css("min-height", $(window).height());

Categories : Jquery

jQuery Toggle not working properly with newer jQuery version
jQuery .toggle() event method was deprecated in jQuery 1.8 and removed in jQuery 1.9. You can use .toggleClass() method instead: $(".trigger").on('click', function() { $(this).toggleClass("active"); });

Categories : Jquery

Can I Toggle content of Element based on pixel height of element?
This can be done using CSS for the element styling and then applying classes via Javascript: The HTML: <div class="toggle"> your huge text here... </div> CSS: .toggle{ height:170px; } .open{ height:auto; } and JS (using jQuery): $('.toggle').on('click', function () { $(this).toggleClass('open'); }); What the script basically does is detect when you click on the .toggle and, if it is clicked, then it toggles the class .open which sets the propertie height to auto, leading the element with the text to be as huge as it can grow. Here is a working example: http://jsfiddle.net/8SXNZ/1/

Categories : Jquery



© Copyright 2017 w3hello.com Publishing Limited. All rights reserved.