I'm trying to dynamically change the top margin size as the height of another div changes. The script below works but it's using the height of the body as it changes. How do I update the script to target the height of a specific div?
updateDivsMargins();
$(window).resize(updateDivsMargins);
function updateDivsMargins() {
$('div.mobile-menu').each(function () {
$(this).css({
'margin-top': ($(this).height()),
});
});
}
$(document).ready(function() {
updateDivsMargins();
$(window).resize(updateDivsMargins);
function updateDivsMargins() {
$('div.mobile-menu').each(function () {
$(this).css({
'margin-top': ($('#specificDiv').height()),
});
});
}
});
The function will iterates through all divs with the class name "mobile-menu" and sets the 'margin-top' CSS property to the height of the div with the id "specificDiv"
Related
I have this jsfiddle:
$('.btn').click(function() {
if ($('nav').hasClass('open')) {
$('nav').removeClass('open');
$('.hide').animate({
width: '508px'
});
} else {
$('nav').addClass('open');
$('.hide').animate({
width: 'toggle'
});
}
})
where I'm trying to get a side navbar to just show icons then when the button is clicked to animate to get a specific width.
While the toggling works and it's getting the desired width, it's not animated.
Any ideas?
Consider the following.
https://jsfiddle.net/Twisty/ck7y19rz/6/
JavaScript
$('.btn').click(function(event) {
$("nav").toggleClass("open");
if ($("nav").hasClass("open")) {
$(".hide").show().animate({
width: "580px"
});
} else {
$(".hide").animate({
width: "0px"
}, function() {
$(".hide").hide();
});
}
});
This is largely just cleaned up code. As was commented, when you animate back to the original size, it must use a Width value, not a keyword, like auto. I also added .show() and .hide() to ensure the state of the element is returned to the expected visible state.
My page content is dynamically created, I am trying to write a script that searches for all images in a container 'image-rounded', and if they are not square, change either the height or width to make them square (based on the size of the smallest edge).
Here is my script so far:
jQuery(function($) {
$('.wrapper-site').find('.image-rounded img').each(function () {
var round_image_width = $(this).width();
var round_image_height = $(this).height();
if(round_image_height > round_image_width) {
$(this).css('height', 'round_image_width');
} else {
$(this).css('width', 'round_image_height');
}
});
});
But currently this does nothing.
$(this).css('height', 'round_image_width');
should be
$(this).css('height', round_image_width);
Same for the height... Happens to the best of us :)
I'm using the media thumbnails that twitter bootstrap v2.3 has in their CSS library. You can see what I'm working on here.
Here is the jQuery I'm using:
<script>
$(window).load(function () {
var maxHeight = 0;
var divs = jQuery(".thumbnail");
jQuery.each(divs, function () {
var height = jQuery(this).height();
if (maxHeight < height) maxHeight = height;
});
divs.css('min-height', maxHeight + 'px');
});
$(window).resize(function () {
var maxHeight = 0;
var divs = jQuery(".thumbnail");
jQuery.each(divs, function () {
var height = jQuery(this).height();
if (maxHeight < height) maxHeight = height;
});
divs.css('min-height', maxHeight + 'px');
});
</script>
Basically my goal was since each thumbnail had different heights and I wanted them to all be equal heights, this script gives them all the same min-height in CSS on load, and everytime the screen is resized based on whichever thumbnail has the greatest height.
I got all that to work, but now the problem I can't figure out is when you drag the screen to smaller/bigger sizes and the min-height becomes very large, I have no code to decrease the min-height so they thumbnail divs look way too big. Does anyone have any code suggestions for me so the divs will all have equal height, but never get too big?
And if you set the height css property rather than min-height, the solution doesn't work for my original goal because the text paragraphs end up extending outside the divs.
On window resize you can set the min-height of the divs again, like this:-
$( window ).resize(function() {
if($( window ).height() < 300){
$( "div" ).css({min-height: 300px});
} else {
$( "div" ).css({min-height: 600px});
}
});
I have created a responsive site and then used some JS code to create captions on the images which works fine but when I re-size the browser. The images don't scale like they should and I believe its due to being given a height value in the JS. How do I remove this value and make the caption work?
$(window).load(function(){
// For each instance of p.caption
$("p.caption").each(function(){
$(this)
// Add the following CSS properties and values
.css({
// Height equal to the height of the image
"height" : $(this).children("img").height() + "px",
// Width equal to the width of the image
"width" : $(this).children("img").width() + "px"
})
// Select the child "span" of this p.caption
// Add the following CSS properties and values
.children("span").css(
// Width equal to p.caption
// But subtract 20px to callibrate for the padding
"width", $(this).width() - 20 + "px")
// find the <big> tag if it exists
// And then add the following div to break the line
.find("big").after('<div class="clear"></div>');
// When you hover over p.caption
$("p.caption").hover(function(){
// Fade in the child "span"
$(this).children("span").stop().fadeTo(400, 1);
}, function(){
// Once you mouse off, fade it out
$(this).children("span").stop().delay(600).fadeOut(400);
});
// End $(this)
});
});
I think you should try window.resize.
$(window).resize(function() {
$("p.caption").each(function() {
var item = $(this);
var big = item.find("big");
item.css({
"height" : item.children("img").height() + "px",
"width" : item.children("img").width() + "px"
}).children("span").css("width", item.width() - 20 + "px");
});
});
I refactored your code and created a fiddle:
http://jsfiddle.net/VinnyFonseca/6Kv9U/1/
jQuery.resize() will solve this for you http://api.jquery.com/resize/
You just have to store that procedural code to be re-executable (function) and then retrigger it based on relative (parent) DOM dimensions.
'use strict';
removeHeight(){
// That code here
}
$(document).ready(function(){
// Initial removal
removeHeight();
// Removal when resizing
$(window).resize(function() { removeHeight() });
});
I create one div#sresult_container dynamically and append no of div to that div. and all appended div have different text. so i can retrieve the width of div#sresult_container but i try to that increase the width of div#sresult_container 10px before it display on the view port. how can i do this plese help me?
my code is below:
var $sresult_container = $('<div id="sresult_container"></div>');
AND after that i append the some divs as children of div#sresult_container.
and append to body.
$('body').append($sresult_container);
var Setwidth = $('#sresult_container').outerWidth() + 10;
$('#sresult_container').css('width',Setwidth + 'px');
so here first load original width after that load the modified width. so how can do directly load the modified width.
First of all #sresult_container must have a pre-defined width.
#sresult_container {
width: 100px;
}
$('<div id="sresult_container">text</div>').appendTo('body');
$('#sresult_container').css('width', function () {
return ($(this).outerWidth(true) + 10) + 'px';
});
http://jsfiddle.net/xBZT7/14/
http://jsfiddle.net/xBZT7/15/