I have the following javascript function:
function reglare(){
alert("Inaltime imagine= "+$(".slider img").height());
}
I call the function on window resize, like this:
$(window).resize(function(){
reglare();
});
Most of the times the output is the image height, but sometimes the output is 0.
How can I fix this in order to get the actual image size on window resize ALL the times?
LATER EDIT: why do I need this?
The code is like this:
<div id="slideshow" class="latime_100">
<img src="poze/sageata_st.png" class="navigare" id="navigare_st" onclick="go_prev();"></img>
<div id="slider_1" class="slider" >
<img src="../poze/imagine_slide1_iul_fade.png"></img>
</div>
<div id="slider_2" class="slider">
<img src="../poze/imagine_slide2_iul_fade.png"></img>
</div>
<div id="slider_3" class="slider">
<img src="../poze/imagine_slide3_iul_fade.png"></img>
</div>
<img src="poze/sageata_dr.png" class="navigare" id="navigare_dr" onclick="go_next();"></img>
</div>
I have a container div slideshow which is position relative containing more absolute positioned divs. Because they are position absolute, the container does not extend with content so what is below gets overlapped.
Here's a fiddle: https://jsfiddle.net/g6ppqxLf/5/
TO DISPLAY THE ERROR I HAVE IN THE FIDDLE: just resize the browser a few times and follow the alert message: it will sometimes output 0.
the jquery class selector returns an array.
https://api.jquery.com/class-selector/
function reglare(){
for (var i = 0; i < $("img.slider").length; i++){
alert($("img.slider")[i].attr("height");
}
}
this alerts the attribute height of each image with class .slider
hope this is what you searched for
Related
Right now, I am moving div tag to another div tag when screen is less then 992px. But if screen is again greater then 992px, it should be placed again at original position.
HTML
<div id="top">
<div id="translate-this">
<a class="translate-this-button" href="//www.translatecompany.com/translate-this/">Translate This</a>
</div>
</div>
<div id="bottom"></div>
jQuery
$(document).ready(function() {
$(window).on('resize',function(){
if ($(window).width() < 992) {
$("#top").appendTo("#bottom");
} else {
$("#bottom").appendTo("#top");
}
});
});
When I decrease window size of browser, it moves div element to another div element with bottom id, but when I again make window full size, it does not move div with top id to its original place.
When you make the screen smaller than 992, #top gets appended inside of #bottom, converting the html to this
<div id="bottom">
<div id="top">
<div id="translate-this"><a class="translate-this-button" href="//www.translatecompany.com/translate-this/">Translate This</a>
</div>
</div>
</div>
Then when you make the screen larger, you try to execute $("#bottom").appendTo("#top");. that would try to append #bottom inside of #top, which makes no sense, since #bottom has #top inside
You can move the translate-this div around like this:
if ($(window).width() < 992) {
$("#translate-this").appendTo("#bottom");
}
else {
$("#translate-this").appendTo("#top");
}
I am using the Salvattore plugin to create a grid based layout for my website.
Here is how the plugin should set up in HTML:
<div class="grid columns2" data-columns>
<img src="">
<img src="">
</div>
It basically finds .grid and then .columns3 which determines how many columns the plugin should create inside .grid.
The outcome would look like:
<div class="grid" data-columns="2">
<div class="column count-2">
<img src="">
</div>
<div class="column count-2">
<img src="">
</div>
</div>
All works fine, until the .grid is a child of a parent which has display: hidden - i.e:
<div style="display:none" id="popup">
<div class="grid" data-columns="2">
<div class="column count-2">
<img src="">
</div>
<div class="column count-2">
<img src="">
</div>
</div>
</div>
Why I gave it display: none? well, I am trying to use this .grid inside div's which are hidden by default and only show when requested, for example, inside a popup window or UI accordion and tabs.
I have created a live test here: http://loai.directory/beta if you look, you will see two containers with the .grid one that works fine and the other one below where it says The hidden div is below me which is the one in question.
Here is what I thought of doing "but don't have the skills to try it or even know where to start" - I was wondering, would the problem be solved if using JavaScript to trigger the plugin again each time the .grid state changes?
Your problem with Salvatore's plugin is in grid-system.js (ln. 538)
self.registerGrid = function registerGrid (grid) {
if (global.getComputedStyle(grid).display === "none") {
return; // so basically any class or inline style with display set to none :s
}
/*...*/
};
To workaround this issue, you can bind an unique event to it's "toggle/display" trigger. It would be ideal that all triggers and hidden layers, match an unique id or some commonly mapped reference.
trigger popup
<div id="popup" class="grid hide" data-columns></div>
Then the js would be something like:
function delayedGrid() {
var grids = $('.grid.hide[data-columns]'); // assuming they all have the hide class
// var grids = $('.grid:hidden'); // could work as well
$.each(grids, function(){
// pickup the mapped references from your grid (id and ref)
var grid = $(this),
id = grid.prop('id'), // get the id reference
ref = $('[data-ref="' + id + '"]'); // get the referenced element by data-ref="popup" for ex.
// one time only event
ref.one('click', function() {
// gives browser reflow a better chance
setTimeout(function() {
// call the grid initializer again
salvattore.init();
}, 200);
});
});
}
Then all you need to do is render delayedGrid on DOM ready, or onload, or on resize, or whenever you need to recalculate your hidden grids.
// DOM ready
$(fuction(){
delayedGrid();
});
// window load
$(window).load(function(){
delayedGrid();
});
// window resize
$(window).on('resize', function(){
// google for throttle function perhaps
delayedGrid();
});
I don't think I am doing this the best way possible. Is a better way to do it?
Example: http://www.mudquarters.com (click "in stores")
I want to default to the blue shirt and when you click the swatches they swap the image in the div to the appropriate color. They are somewhat working now, however it defaults to yellow instead of blue and this method requires my css to include position: "absolute" which ruins my background tiling for that section in my responsive layout as it is breaking outside the container.
Is there a way to do this better?
CSS:
#shirt img {
position:absolute;
}
HTML:
<ul id="swatches">
<li><img src="img/BTN_Blue.gif"></li>
<li><img src="img/BTN_Green.gif"></li>
<li><img src="img/BTN_Red.gif"></li>
<li><img src="img/BTN_Grey.gif"></li>
<li><img src="img/BTN_Yellow.gif"></li>
</ul>
<div id="shirt" class="large-6 columns">
<img src="img/T_Blue.png">
<img src="img/T_Green.png">
<img src="img/T_Red.png">
<img src="img/T_Grey.png">
<img src="img/T_Yellow.png">
</div>
JS:
<script>
$('#swatches li').on('mousedown',function(e){
$('#shirt img').stop().fadeTo(300,0);
if (e.type=='mousedown') {
$('#shirt img').eq( $(this).index() ).stop().fadeTo(300,1);
}
});
</script>
Fixes
Issue 1: In order to default to the blue shirt, you can just hide all other images on page load:
$('#shirt img').not(':first').fadeOut(0);
Issue 2: The issue with absolute positioned elements is that they are outside the flow, so parents can't adjust their height. The only fix for this would be to set the height explicitly, taking a note from James Daly's answer you would need something like this (inside the resize event to accommodate for your fluid layout):
$(window).resize(function() {
$('#shirt').height($('$shirt img:first').height());
});
$(window).trigger('resize');
New approach
Now if you don't feel like implementing this fixes, you can change your logic to use only one image and update its src with the click on the swatches, effectively eliminating both issues since there won't be a need to use absolute position anymore and you could easily set the default image to blue. This new implementation would look something like this:
HTML
<ul id="swatches">
<!--Add the reference to the main img src of each link as a data-attribute-->
<li><img src="img/BTN_Blue.gif"></li>
<li><img src="img/BTN_Green.gif"></li>
<li><img src="img/BTN_Red.gif"></li>
<li><img src="img/BTN_Grey.gif"></li>
<li><img src="img/BTN_Yellow.gif"></li>
</ul>
<div id="shirt" class="large-6 columns">
<img src="img/T_Blue.png"> <!--Set blue as default-->
</div>
jQuery
var $shirtImg = $('#shirt img');
$('#swatches li a').on('mousedown',function(e){
var src = $(this).data('img-src');
if(src != $shirtImg.attr('src')){ //Check if it's not the image we have now
$shirtImg.stop().fadeTo(150,0.8,function(){
$(this).attr('src',src).fadeTo(150,1);
});
}
});
A couple of things you could try ... I can't tell for sure though.
To get the blue shirt to display by default, could you not change the order of the images and place the blue shirt last?
<div id="shirt" class="large-6 columns">
<img src="img/T_Green.png">
<img src="img/T_Red.png">
<img src="img/T_Grey.png">
<img src="img/T_Yellow.png">
<img src="img/T_Blue.png">
</div>
For the background tiling, try adding overflow:auto; to the style for #stores
Good luck!
css
.zindex { z-index: 10}
edit
try making the parent div as tall as the image
javascript
var $firstImage = $('#shirt img:first-child'); // cache
var imageHeight = $firstImage.height();
$firstImage.addClass('zindex');
var $shirtImage = $('#shirt img')
$('#shirt').height(imageHeight);
$('#swatches li').on('mousedown',function(e){
$shirtImage.removeClass('zindex').stop().fadeTo(300,0);
if (e.type=='mousedown') {
$shirtImage.eq( $(this).index() ).stop().fadeTo(300,1);
}
});
it doesn't look like you are changing the image size at all when screen is small if so you could always wrap that in a function and call it on
$(window).resize(function() {
// your code here
})
I've seen the same question over and over here, but no solution worked for me.
I am applying the jScrollPane() method on a <div> element with settled height and width, the content is cut by the overflow jScrollPane() inserts, but the scroll bar is not appearing.
My JavaScript code:
function openSubs(cont){
var width = 500;
var height = 500;
var mtop = ((height+65)/2)*(-1);
$('#lightbox .content').width(width).height(height).css('margin-top', mtop).load('content/'+cont+'.php', function(){
$('#sub-content').width(width).height(height);
$('#sub-content').jScrollPane();
});
openLightBox();
}
(on the openLightBox(); function are the fadeIns for the Lightbox divs below)
And the HTML before the Scroll Pane method is called:
<div id="lightbox">
<div class="fade"></div>
<div class="content">
A HUGE TEXT GOES HERE
</div>
<div class="fechar" onClick="resetLightBox();"></div>
</div>
I'm trying to create a div that expands the entire window (can scroll horizontally) and resize to its children, which all resize to their children.
So: Parent > Expanding Parents > img Children
This is based on post: jQuery - set div width to sum of it's children
This is to ultimately create a horizontal image layout that will continue horizontally based on posts with an undefined amount of images.
Please see this link. Goal is to have images float left in each parent and each parent float left within main parent.
JavaScript:
$(function(){
$("#page-wrap").wrapInner("<table><tr>");
$(".post").wrap("<td>");
});
$(function(){
var sum=0;
$('.post img').each( function(){ sum += $(this).width(); });
$('td > div').width( sum );
});
HTML:
<div id="page-wrap">
<div class="post">
<img src="../newimages/ford_models_chris1.jpg"/>
<img src="../newimages/ford_models_chris1.jpg"/>
</div>
<div class="post">
<img src="../newimages/ford_models_chris1.jpg"/>
</div>
$('.post').each(function(){
var width=0;
$(this).find('img').each(function(){width+=$(this).width();})
$(this).width(width+'px');
});
make your images float:left to complete this
you can add overflow:auto to the parent's css