w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
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 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

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

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 .height() not pulling the height
If you want a one-liner, try this: $(".zebra-helper").fadeToggle("slow", "linear").height($("#main-content-pane").height()); If you want to use again the same height in that block, store it into a variable, then use it when needed: var h = $("#main-content-pane").height(); $(...).height(h);

Categories : Jquery

Javascript / jQuery : get height when max-height is set to 0
My first question would to be why are you using max-height: 0; is there something else you can use? Like hide() show() which use display: none the only thing I can thing of would be to remove the max-height css get the height and then reapply the max-height: $('.div').css('max-height', 'none') console.log($('.div').height()) $('.div').css('max-height', '0') This should happen fast enough that you wont see the element but it could be wise to hide it before removing the max-height with: $('.div').hide() $('.div').css('max-height', 'none') console.log($('.div').height()) $('.div').css('max-height', '0') $('.div').show()

Categories : Javascript

Click to increase height and decrease back to original height when click again with jQuery?
$("button").toggle(function(){ $("#section").height($("#section").height()+300); },function(){ $("#section").height($("#section").height()-300); }); reference toggle

Categories : Jquery

calculate and set the height for some div (initial settings). When the height of the browser window is changed --> change the height for div
is that what you are looking for? api.jquery.com jQuery(document).ready(function () { $(window).resize(function() { var height = document.documentElement.clientHeight - 500; if (height < 135) { height = 135; } document.getElementById('left_space').style.height = height + 'px'; jQuery(window).resize(function () { var height = document.documentElement.clientHeight - 500; if (height < 135) { height = 135; } document.getElementById('left_space').style.height = height + 'px'; }); }); });

Categories : Javascript

Changing height of jQuery Mobile "select" with jQuery?
You are missing the obvious. Your original select is not longer visible. Also as you can see new one is just custom combination of <div>'s and <span>'s. New custom select box will not inherit css from the old one. New select box CSS structure needs to be changed in order for this to work. Working example: http://jsfiddle.net/Gajotres/PMrDn/107/ HTML: <div class="ui-grid-a"> <div class="ui-block-a" style="width: 80%;"> <div data-role="content" class="accountTransferLabels" style="padding-left: 0;"> Amount: </div> <input type="text" autocomplete="off" class="translate" placeholder="0.0" data-clear-btn="true" autofocus required autocorrect="off" autocapitalize="off" data-theme="d"/> </div> &l

Categories : Javascript

jquery css cannot set the height
Something on your page is conflicting with jQuery. Using $ is the problem in this case. Try this instead... (function($) { $(function(){ $('#nimble_portfolio_grid_1').addClass('importantRule'); }); })(jQuery); That will run whatever code is inside the enclosure with jQuery passed in as the $ parameter and solved your problem. Alternatively, if you're not adding any more code, just change the $ to jQuery like this... jQuery(function(){ jQuery('#nimble_portfolio_grid_1').addClass('importantRule'); }); Finally, the best thing to do would be to use CSS correctly and just specify the element by ID... <style> #nimble_portfolio_grid_1 { height: 5320px !important; } </style>

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

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.height() return 0 for an img tag
The code you shared by itself seems to do the job I even ran it in a jsfiddle link: var jdialog = $('<div id="avatar_button_clipdiv" style="width: 68px; height: 125px"> <img width="50" height="100" src="https://www.google.co.il/images/srpr/logo4w.png" style=""/> </div>').appendTo('body'); console.log(jdialog.find('img')); console.log(jdialog.find('img').width(),jdialog.find('img').height()); does this happes on a specific browser?

Categories : Jquery

jQuery addClass if div height changes
you need to use overflow: auto. That will only put a scrollbar on the div when the height of the content within the element exceeds the max-height of the element. So in your css: #sidebar-container { max-height: 450px; overflow: auto; }

Categories : Jquery

Use jquery cookie to keep CSS height
Use jQuery.cookie plugin. Once you include it, you need to call it this way: if (!$.cookie("height")) $.cookie("height", "297px"); And when you give a changeHeight() function, add this too: function changeHeight(){ $('#totalInfo').css('marginTop', '172px'); $('.single #secondary-two #cart').css('maxHeight', '290px'); $.cookie("height", "297px"); }

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 get height of fluid image
You can use window resize callback $(window).resize(function(){ var img_height = $('#image').height(); $('.some_div').css('height', img_height); })

Categories : Javascript

Phantom height when specifying the width of a LI using jQuery
It adds 5px left padding, 5px right padding and 2px of border width from your css. if you can not find which css effects. comment back nav#mainNavigation > div > ul > li > .relContainer > a { padding: 7px 5px; } the tag take this css

Categories : Jquery

Setting height through css and jquery, css gets precedence
Your jQuery CSS application is invalid and is being ignored. $('#myDiv').css("height", cal_ht + "px !important;"); Should be: $('#myDiv').css("height", cal_ht + "px"); Because jQuery applies CSS properties via the style attribute--which is applied after stylesheet resources--the !important flag is unnecessary. Removing that leads to jQuery applying a height of cal_ht + "px;". If, for example cal_ht's value was 123, that would mean, jQuery is trying to apply a height of 123px;, which is not a valid value for height. However, 123px is a valid height, so the semi-colon causes the jQuery function to fail. Here is a jsFiddle showing the difference between the two jQuery CSS calls.

Categories : Jquery

How can I bump line-height with jQuery?
For me the following works (http://jsfiddle.net/stas_sl/LkueJ/3/): $(function(){ $('#bump').click(function() { newLineHeight = parseInt($('#box1').css('line-height'))+5+'px'; $('#box1') .css('padding-top', "+=5" ); $('#box1') .css('line-height', newLineHeight); }); });

Categories : Jquery

Can't set width, height of