w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
jQuery toggle and toggling :checked
DEMO $('#mChatUseSound').prop('checked',function(){return !this.checked}).change(); As we create a closure, this will refer to specific element in set, here '#mChatUseSound'.

Categories : Jquery

jQuery toggle function for toggling specific div (and not all div with same class name.)
Change $content.slideToggle() to $(this).next().slideToggle() assuming that .content is always the next sibling of .toggle EDIT: since it's not, what you can do is use the postids. I think it would be better to use the data-postid attribute instead of adding it to the id (or do both) so that you don't have to parse it from the ID. $(".content[data-postid=" + $(this).data('postid') + "]").slideToggle();

Categories : Jquery

Toggling height of div in jQuery
Fix is simple: $("#topbar").toggle(function () { $(this).animate({ height: 40px }, 200); }, function () { $(this).animate({ height: 10px }, 200); }); You just need to add px units to the height value. See demo at: http://jsfiddle.net/audetwebdesign/3dd3s/ PS Some of the other posted answers show a better way of coding this type of animation. I simply demonstrated how to fix the bug. Note that this use of .toggle has been deprecated since jQuery 1.8. Reference: http://api.jquery.com/toggle-event/ Why The Unit is Needed Some of the other solutions involve the jQuery .height() function, which returns a unit-less pixel value. In this case, the computed value is coerced/cast to be a pixel value, so the 'px` unit is not required. In the original exa

Categories : Javascript

jquery 1.10 and makes toggle event run automatically
You don't have a listener for a click-event. Maybe your code should look like this: $(document).ready(function() { $("#toggle").click(function(){ if($(this).attr("class") != "bigger"){ click1(); $(this).addClass("bigger"); } else { click2(); $(this).removeClass("bigger"); } }); $("#togglemove").click(function(){ if($(this).attr("class") != "bigger"){ move1(); $(this).addClass("bigger"); } else { move2(); $(this).removeClass("bigger"); } }); });

Categories : Jquery

jQuery animate height, why does my div animate in from the left?
Use .slideDown instead of .show() jsFiddle Demo $container.slideDown('slow');

Categories : Jquery

jquery - toggle animate (almost there?)
It should be if jquery < 1.9 $('a.mobile-menu-icon').toggle(function(){ $('#sidebar').animate({ left: '0px;' }, 500); }, function(){ $('#sidebar').animate({ left: '-250px;' }, 500); }); In 1.9 this particular usage of toggle is removed

Categories : Jquery

toggle() an animate() with jquery
You'll have to create some sort of toggling functionality based on the elements left margin : $(document).ready(function(){ $('#menu_button').on('click', function(){ var state = parseInt($('.wrapper').css('margin-left'),10) > 200; $('.sidebar_menu').animate({left:'0'}, 'slow'); $('.wrapper').animate({'margin-left': (state ? 0 : 250)}, 'slow'); }); }); FIDDLE

Categories : Misc

jQuery get/toggle class and animate if
You can use .hasClass() to check if it has a class. if($('#foobar').hasClass('closed')) { $( "#foobar" ).animate({ "left": "+=200px" }, "slow" ); } else { $( '#foobar' ).animate({ "right": "+=200px" }, "slow" ); }

Categories : Jquery

Can't get jQuery animate toggle to work
Something like http://jsfiddle.net/gKfKW/76/ ? You were missing: position: relative; top: -150px; in the default state.

Categories : Javascript

I have an issue with animating the height of my nav with jquery - it makes me click the button twice
You need to click it twice because your menu_button div does not have an 'isDown' class to begin with. The first time you click it, it animates it to 0px (which it already is) and adds the class. Then, the second time you click it works as expected. Do this: <div id="menu_button" class="isDown">

Categories : Jquery

JQuery Animate Height to 100%
You can use jQuery's .slideDown() instead of .animate().. For the fade in and out effect use .animate() instead of .fadeIn() and .fadeOut() $('.LEFTNAV-content').slideDown(); $('.LEFTNAV-content').animate({opacity: 1},{queue: false}); and for the hide menu part: .slideUp() $('.LEFTNAV-content').slideUp(); $('.LEFTNAV-content').animate({opacity: 0},{queue: false}); Look at this jsFiddle - I also fixed the problem where the first click has no effect

Categories : Jquery

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

jquery animate line height - possible?
Here you go, it was your line-height in animate function it should have been 'line-height' $(function(){ $('nav').data('size','big'); }); $(window).scroll(function(){ var $nav = $('nav'); var $a = $('nav > a'); if ($('body').scrollTop() > 0) { if ($nav.data('size') == 'big') { $nav.data('size','small').stop().animate({ height:'40px', 'line-height':'40px' }, 300); $a.data('size','small').stop().animate({ height:'20px' }, 300); } } else { if ($nav.data('size') == 'small') { $nav.data('size','big').stop().animate({ height:'100px', 'line-height':'40px' }, 300); $a.data('size','big')

Categories : Javascript

jQuery animate - opacity slower than height
Stack the animations on top of each other, and disable the default animation queueing. $(".thebox") .animate({height: "toggle"}, {duration: 250, queue:false}) .animate({opacity: "toggle"}, {duration: 500, queue:false}); // Runs twice as slow. EDIT: Since the events are triggered twice using toggle, we need a different approach, to detect wheter to hide or show the box. One simple solution would be a helper-class as such: var theBox = $('.thebox'); if (theBox.hasClass('active')) { // It is active, then fade it out thebox .removeClass('active') .animate({height: 0}, {duration: 250, queue:false}) .animate({opacity: 0}, {duration: 500, queue:false}); } else { // It is not active, show it thebox .addClass('active') .animate({height: 'auto'}, {duration:

Categories : Javascript

Increase the height of DIV with jQuery animate, without pushing the content down
Change html to <div id="header-line"></div> <div id="content"> <div id="main-menu">Expands on hover</div> </div> Change jquery to $("#main-menu").hover(function () { $(this).stop(true, false).animate({ height: "100px" }); }, function () { $(this).stop(true, false).animate({ height: "30px" }); }); Change style to #header-line { height: 20px; background-color: black; top:0; left:0; } #main-menu { height: 30px; background-color: green; position:relative; z-index:3; } #content { background-color: blue; height: 200px; } The main aim is to put the div inside the other div, then it won't put the bottom div down. Working fiddle.

Categories : Jquery

Odd jQuery animate top/height/position bug in firefox and opera
Use float: left instead of display: inline-block on your list items. Then make sure to add a margin-right to your list items to space them apart, and add list-style: none to your ul to hide the bullets. ul { height: 30px; margin-top:200px; list-style: none; } ul li { width: 30px; position: relative; height: 30px; overflow: hidden; text-align: center; background:red; float: left; margin-right: 4px; } See DEMO.

Categories : Jquery

jQuery ajax can't animate div height resize in success function
Are you sure your content block is float:left; ? Maybe height of #content doesnt change really ... if you have multiple block with float:left; in a parent block with float:none; , parent block havent "the real height", child blocks were showed because overflow is visible ... <div class="container"> <div id="content" style="float:left"> &nbsp; </div> </div>

Categories : Javascript

Find out the height of an element would have to animate max-height properly
My current Workaround: The #stuff element contains two nested divs: <div id="stuff"> <div id="a">Lorem Ipsum</div> <div id="b">Lorem Ipsum</div> </div> I am now using $('#a').outerWidth() + $('#b').outerWidth() to calculate the height I need. (cHeight in Ross' answer) Better approach: An option might be to duplicate the full #stuff div make it display none remove the max-height property (max-height: auto) then use `cHeight = $('#stuff-duplicate').height()'

Categories : Jquery

css background-height makes element overflow
i made some tries with your page and found out that the "over-height" of your <td> elements is due to the padding for anchor elements inside <td>. You have first to put it to 0 and then to apply the other paddings for left and right you are using: #head table td a{ padding: 0px; } Moreover you can just set the height directly to the <div id="head"> and set it with hidden overflow (which also makes the trick but lets <td> with wrong height). #head{ height: 60px; overflow: hidden} The background-size works fine and doesn't make any mistake. Hope it helps you.

Categories : HTML

jQuery hover with animate then animate left in second handler issue?
Like this? DEMO http://jsfiddle.net/yeyene/kNts8/ JQUERY $(document).ready( function(){ $('.nav_button').hover( function(){ $(this).stop().animate({top:'-15px',opacity:'0.5'},'slow') }, function(){ $(this).stop().animate({top:'15px',opacity:'1'},'slow') }); }); CSS .nav_button{ background:red; position:relative; top:0px; padding:0 5px; z-index:100; }

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 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

"float: left" makes the
  • item ignore the
  • When you apply float to an element it is no longer part of the regular flow layout. As such the parent, which by default sizes to fit to its children, doesn't have any height at all when all its children are floating. Possible solutions: Give the parent container a fixed height to accomodate its children. Use display:inline-block to position the elements next to eachother instead of float. Use an element with a clear rule to break to below all floating elements. The 'float everything' method - a floating element will resize to its floating children. This is generally a bad solution since you'll end up floating everything as the name implies.

    Categories : HTML

    Toggling with jquery
    Please see this demo $("#p1").click(function () { $("p").each(function() { if ($(this).parent("a").attr("id") !== "p1") { $(this).hide(); } }); $("#p1 p").toggle(); }); $("#p2").click(function () { $("p").each(function() { if ($(this).parent("a").attr("id") !== "p2") { $(this).hide(); } }); $("#p2 p").toggle(); });

    Categories : Jquery

    Jquery animate, disable animate until complete
    You need to set a flag that you'll interrogate as to whether or not you want the animation to run upon a click: var isMoving = false; Now adjust your handler a bit to check the flag, which will ensure the animation isn't interrupted by another animation until the first animation is complete. $('#twitter').click(function() { if(isMoving == false){ isMoving = true; if(groot != '#twitter'){ topv = $("#twitter").css("top"); $('#twitter').animate({ left: '475', top: '16', height: '414' }, 1000, function() { }); $(groot).animate({ left: '8', top: topv, height: '128' }, 1000, function() { groot = '#twitter'; }); isMoving = false; } } }); This is untested, I'm working off my netbook on vacation, hopefully this gives you the

    Categories : Jquery

    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

    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

    Animate Height of my ImageView
    Use the animation to do that--- Animation fadeInFromTopAnimation = AnimationUtils .loadAnimation(ActivityName.this, R.anim.slide_up); fadeInFromTopAnimation .setAnimationListener(new AnimationListener() { public void onAnimationStart(Animation anim) { } public void onAnimationEnd(Animation anim) { imageView.setVisibility(View.GONE); } public void onAnimationRepeat(Animation anim) { } }); imageView.startAnimation(fadeInFromTopAnimation);

    Categories : Java

    jQuery hiding and toggling
    $('.article-row').click(function(){ if($(this).parent().find('.content').is(':visible')){ $('.content').hide(); $(this).parent().find('.content').show(); } }); Hide all elements, then display the clicked one. But first verify if the clicked article is not already the active one to make sure it doesn't flicker or look weird if you animate the transition.

    Categories : Javascript

    Toggling a class with jquery
    Just remove the class from the siblings of the current element: $('.text-selection').on('click', function () { $(this).toggleClass('on-off').siblings().removeClass('on-off'); }); Demo: http://jsfiddle.net/MFQc9/4/

    Categories : Jquery

    select all toggling using jquery
    You have to add a return false; to your function or the click which starts the function will deselect the "Select all" after the selectAll: var firstli = $('.dropdown-menu.inner li').first(); firstli.click(function (event) { if (!firstli.hasClass('selected')) { $('.selectpicker').selectpicker('selectAll'); } else { $('.selectpicker').selectpicker('deselectAll'); } return false; });

    Categories : Javascript

    jQuery Toggling width
    May be you could try this: $('.mChatOpts .pane').click(function(){ var _headerwidth = $('#header').width(); var _foabgwidth = $('.forabg').width(); $('.fixed').css('width',_foabgwidth); $('.chatbox').toggleClass('fixed',function(){ $('.fixed').css('width',_headerwidth); }); });

    Categories : Jquery

    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

    How do I animate a DIV height smoothly for mobile?
    The special about translate is you do not effect the rest of the page by translate3d'ing an element. Whereat changing the height the browser has to render the complete page for each height change - which is not trivial for the amount of pixels a modern smartphone has. You could instead show all the content directly and provide a menu with anchors. The menu you can fade or translate into the viewport smoothly on mobile devices.

    Categories : HTML

    Animate android view's height
    Try the below code: It may not give you on what you want exactly. But it can definitely help you to modify it according to your requirement. main.xml: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity" > <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" android:layout_gravity="bottom" android:weightSum="100"> <View android:id="@+id/heightView" android:layout_width="fill_parent" android:layout_height="0dp" android:layout_w

    Categories : Android

    Animate the change of height in a div on click of another div
    This works, but you can never animated it back because you can't click on the element when it's 0px high: http://jsfiddle.net/neuroflux/UYZY2/23/ SNIP! function toggle_visibility(id) { $(id).stop().animate({height:'toggle'}, 500); } $('.clicker').on('click', function() { toggle_visibility('#' + $(this).attr('name')); });

    Categories : Javascript

    How to animate the width and height of a Layout?
    Sure that is possible. Simply write your own custom-animation and modify the LayoutParams of your animated view. In this example, the animation animates the height of the animated View. Of course, animating the width is also possible. This is how it could look like: public class ResizeAnimation extends Animation { private int startHeight; private int deltaHeight; // distance between start and end height private View view; /** * constructor, do not forget to use the setParams(int, int) method before * starting the animation * @param v */ public ResizeAnimation (View v) { this.view = v; } @Override protected void applyTransformation(float interpolatedTime, Transformation t) { view.getLayoutParams().height = (int) (st

    Categories : Java

    Animate grid row height change in WP
    This doesn't seem like a sensible thing to want to do, and a grid animation like this is going to look awful because it's not on the compositor, but: private void grid0_Tap(object sender, RoutedEventArgs e) { this.LayoutRoot.RowDefinitions[2].Height = new GridLength(0); } private void grid1_Tap(object sender, RoutedEventArgs e) { double fromHeight = this.LayoutRoot.RowDefinitions[2].ActualHeight; this.LayoutRoot.RowDefinitions[2].Height = new GridLength(3, GridUnitType.Star); this.LayoutRoot.Measure(new Size(this.Width, this.Height)); double toHeight = this.LayoutRoot.RowDefinitions[2].DesiredSize.Height; MyStoryboard.From = fromHeight; MyStoryboard.To = toHeight; MyStoryboard.Begin(); }

    Categories : Windows Phone 8

    Animate StackPanel height code-behind
    You cannot animate width and height properties (or any other properties of type double) if they are by default unset (in that case their value will be NaN). So alternatively you can achieve it with ScaleTransform. Please check this blog article. Hope it helps. http://marlongrech.wordpress.com/2009/09/07/animating-width-and-height-when-they-are-double-nan/

    Categories : C#



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