Well, I'm running ISOTOPE. So I have to set the DIV's height and width through jQuery. It's a photographer's portfolio, so I have thousand of photos with different sizes.
HTML
<div class="element metal cesco1 " data-symbol="Hg" data-category="transition">
<span>
<a class="fancybox" href="fotos/full/full01.png" data-fancybox-group="gallery">
<img src="fotos/thumbs/thumb01.png"/>
</a>
</span>
</div>
<div class="element metal cesco1 " data-symbol="Hg" data-category="transition">
<span>
<a class="fancybox" href="fotos/full/full03.png" data-fancybox-group="gallery">
<img src="fotos/thumbs/thumb03.png"/>
</a>
</span>
</div>
JavaScript:
<script type="text/javascript">
var width = 0;
$('.cesco1 img').each(function() {
width += $(this).outerWidth( true );
alert(width);
});
$('.cesco1').css('width', width + 0);
</script>
I'm using the same JavaScript for height as well.
The first thumb width is 300px and the second is 200px.
So I get the a 500px width div.it adds up.
I would like to set the width for each DIV at the time.
I'm a newbie, sorry if it's dumb.
Use the .closest() method to access the DIV that contains the image.
$('.cesco1 img').each(function() {
width += $(this).outerWidth( true );
alert(width);
$(this).closest('.cesco1').css('width', width);
});
If the image is always an immediate child of the DIV, you can use the more efficient selector .cesco1 > img and .parent() instead of .closest('.cesco1').
Try this:
<script type="text/javascript">
$(function(){
$('.cesco1').each(function() {
var width = 0;
$(this).children('img').each(function(){
width += $(this).outerWidth( true ); // reset the width
});
$(this).css('width', width);
});
});
</script>
Related
I have simple html:
<a href='#' id='target'>
<img src='https://sftextures.com/texture/6485/0/6487/metal-dots-very-dark-grey-black-solid-material-seamless-texture-256x256.jpg'/>
</a>
I want to get the height of the #target element which should basically copy the image:
let target = document.getElementById('target');
let height = target.getBoundingClientRect().height;
// result 18px, image size is 256px
Why the target a link element does not copy the height of the child? Let's say my site has thousands of elements and I can't identify children. How could I get correct height in similar cases where it does not match the real height?
https://jsfiddle.net/b2y8gtLx/
If you have more elements, try setting a <div> as parent. Should work fine.
with making display to 'inline-block'
target.onclick = function () // just to take care of image loading delay
{
target.style.display = 'inline-block';
targetHeight.textContent = `parent height: ${target.getBoundingClientRect().height} px `;
image_Height.textContent = `img height: ${ImgInsideA.getBoundingClientRect().height} px `;
target.style.display = null;
console.log( target.getBoundingClientRect().height );
}
<a href='#' id='target'>
<img id="ImgInsideA"
src='https://sftextures.com/texture/6485/0/6487/metal-dots-very-dark-grey-black-solid-material-seamless-texture-256x256.jpg' />
</a>
<div id='targetHeight'> -- </div>
<div id='image_Height'> -- </div>
let height = target.offsetHeight.
Please try it. It is working
here i am going to ask two questions...
how to get the exact width of the div
Code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Width of div: " + $("#a").width());
});
});
</script>
</head>
<body>
<div id="a" style="width:1000px;height:500px;">
<div style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;">
</div>
</div>
<br>
<button>Display the width of div</button>
</body>
</html>
here i am declared 2 .. parent div width is 1000 child div width is 300 if i use $("#a").width() function i will get 1000 which i mentioned on that div. but how can i get the exact used width(300) using $("#a") as well as same in height?
your "a" is 1000px - since you want the width of the div within the "a" you need to use:
$("#a div").width()
or if you can have multiple divs - then use :first (or some other selector)
Try with chaining in jquery
$("#a div").width()
You can use attr methods like
$("button").click(function(){
alert("Width of div: " + $("#a div").attr("width"));
});
Use can use this code to get the height and width div inside #a div
$(document).ready(function(){
$("button").click(function(){
alert("Width of div: " + $("#a div").width());
alert("Width of div: " + $("#a div").height());
});
});
If you would have only two divs, then why dont you just assign id to your second div also.
<div id="a" style="width:1000px;height:500px;">
<div id="b" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background- color:lightblue;">
</div>
</div>
Then you can just get the width and height as follows:
var width = $('#b').attr("width");
var height = $('#b').attr("height");
I want a slider with content. but the content should appear only when mouse hover. This is the code I'm using:
<div id="slideshow" style="width:560px; background:#999;">
<div id="slidesContainer">
<div class="slide">
<img src="js/1.jpg" />
<div> some text </div>
</div>
<div class="slide">
<img src="js/2.jpg" />
<div> some text </div>
</div>
<div class="slide">
<img src="js/3.jpg" />
<div> some text </div>
</div>
<div class="slide">
<img src="js/4.jpg" />
<div> some text </div>
</div>
</div>
</div>
and the jquery 1.8.3 lib and this code
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 560;
var slides = $('.slide');
var numberOfSlides = slides.length;
// Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');
// Wrap all .slides with #slideInner div
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
'float' : 'left',
'width' : slideWidth
});
// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Hide left arrow control on first load
manageControls(currentPosition);
// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
if(position >= 4)
{
position=0;
currentPosition=0;
}
// Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
}
function Aplay(){
// Determine new position
currentPosition = currentPosition+1 ;
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
});
setTimeout(function(){Aplay();},2000);
}
setTimeout(Aplay(),20000);
});
now the <div> some text </div> should appear only when mouse hover, example: http://www.backslash.gr/demos/contenthover-jquery-plugin/#demo4
CSS
<style type="text/css">
.title {visibility:hidden;}
</style>
HTML add a class title to all needed DIV elements
<div class="title"> some text </div>
Add this to your script
$('#slideInner').mouseover(function() {
$('#slideInner .title').css('visibility', 'visible');
});
$('#slideInner').mouseout(function() {
$('#slideInner .title').css('visibility', 'hidden');
});
Working jsBin
A simple solution would be to set up your 'slide' divs like this:
<div class="slide" onMouseOver="$('#TEXT1').css('display','block')" onMouseOut="$('#TEXT1').css('display','none')">
<img src="js/1.jpg" />
<div id="TEXT1" style="display:none;"> some text </div>
</div>
It's easy and i think this is the fastest solution, because require less jquery than the others (= keep your code clean)
Add the following class to every div which contain the description: class="slide-desc" to your HTML
Add var slideDesc = $('.slide-desc'); to your JS, which is just to fit your way of write jQuery, and slideDesc.hide(); (or $('.slide-desc').hide;, to use a faster way instead). This statement (it's better to call the .hide() method in first line of your JS, to avoid the description flashing while page is loading. Put it just after your declaration of variables.
Add somewhere in the JS these lines: $('#slidesContainer').hover(function(){
slideDesc.show();
});
You've done! :D
i have downloaded an image scrollpane which changes the background images. i want to make the images get resized automatically at screen size.. to do this i used this html line
style="width:100%;height:100%;"
but then i realised that this line wont work on my case because the scrollpane works a little bit differently.
to be more specific, the scrollpane will use as background image the alt attribute of the img tag and for the thumbnails of the image it will use the src attribute of the img tag.
<div class="wrapper thumbs_wrapper">
<div class="thumbs">
<img src="images/album/thumbs/1.jpg" alt="images/album/1.jpg"/>
<img src="images/album/thumbs/2.jpg" alt="images/album/2.jpg"/>
</div>
</div>
so if i add this line here
<img src="images/album/thumbs/1.jpg" alt="images/album/1.jpg" style="width:100%;height:100%;"/>
there wont be any change to the background image but only to the thumbnail.. is there any way to resize the image from the alt attribute?
i simply want to grab the img from the alt attribute and resize it with a javascript function and set the width and height to 100%.
i have written this function but it doesn't work..
<script type="text/javascript">
function resize()
{
var element = document.getElementById('imgg');
var attr = element.getAttribute(alt);
attr.width = '100%';
attr.height = '100%';
}
</script>
<img id="imgg" onload="resize()" src="images/album/thumbs/1.jpg" alt="images/album/1.jpg" height='' width=''/>
thank you in advance
try this
<script type="text/javascript">
$(document).ready(function () {
var browserHeight = $(window).height();
var browserWidth= $(window).width();
$('.fullscreen').css({
height: browserHeight ,
width: browserWidth
});
})
</script>
<img id="imgg" class="fullscreen" src="images/album/thumbs/1.jpg" alt="images/album/1.jpg" height='' width=''/>
I am using the plugin described in Create a Thumbnail with Fading Caption Using jQuery, but I would like my caption to be an h2 and text grabbed from the img attr?
By following that plugin code, make the HTML like this instead of the plugin example:
<div class="item">
<a href="link">
<img src="link img" title="your title" width="125" height="125"/>
<div class="caption">
<h2></h2>
</div>
</a>
</div>
Then this is the updated jQuery you need, with comments to explain:
$(function() {
// let's set a variable as our img attr title
var title = $("img").attr('title');
var move = -15;
//zoom percentage, 1.2 =120%
var zoom = 1.2;
//On mouse over those thumbnail
$('.item').hover(function() {
//Grab title from title attr
$("h2").hide().append(title).fadeIn('slow');
//Set the width and height according to the zoom percentage
width = $('.item').width() * zoom;
height = $('.item').height() * zoom;
//Move and zoom the image
$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});
//Display the caption
$(this).find('div.caption').stop(false,true).fadeIn(200);
},
function() {
//Remove title
$("h2").empty();
//Reset the image
$(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:100});
//Hide the caption
$(this).find('div.caption').stop(false,true).fadeOut(200);
});
});
Working example: http://jsfiddle.net/u2HxY/40/
Grab the alt attribute and put it in the caption HTML.
$('#captionID').html($('#imageID').attr('alt'));
Use this.
$('#imgSelector').attr('title')
or
$('#imgSelector').attr('alt')