I have something like this:
<div>
<img src="bigimage_1.jpg" />
<img src="bigimage_2.jpg" />
<img src="bigimage_3.jpg" />
...
<img src="bigimage_n.jpg" />
</div>
The div should only be shown if the width of the viewport is greater than 300px.
Since the images are very large, I dont want them to be downloaded when the width is lower than 300px. But when the width is greater than 300px I need to start downloading them as soon as possible.
Also, this should work on a lot of browsers on a lot of devices so I want to make it as robust as possible.
I was thinking in using https://github.com/sebarmeli/JAIL and call the jail function on $(document).ready, but I don't know if there is a better solution.
Any recommendations?
I recommend taking a look at Scott Jehl's picturefill solution. It takes a somewhat similar approach to JAIL in terms of implementing a no-js solution using the noscript tag to provide the fallback image, but it avoids the initial http request made for the placeholder .gif.
You can try use CSS #media (min-width: 300px) { … }
Put a $(document).ready function, test the viewport (or the render area available for the image, accounting for body and other element's margin, paddings, etc) width with a conditional statement, and call the jail function if it passes.
You could place a width-greedy-zero height (with css) empty element where the images are supposed to be loaded, and test how much width it can get by selecting him via jquery. If its width is greater than 300, call the JAIL.
Related
I am trying to make a p always have the same width and height as an image that is placed next to it.
I set specific dimensions to both of the divs containing those elements, and then set the img width and height to 100% (as mentioned here). Unfortunately that led to images getting distorted even if I used the dimensions of the actual images being provided. Forgot to mention that I use Picturefill by the way, perhaps it has something to do with that..
I should mention that it is possible to somewhat control the amount of distortion, by adjusting the values in the sizes attribute of the picturefill HTML. However it turned out that I would have to add thousands of different values to that attribute to actually make it work this way. It just didn't really feel like the correct approach to something like this.
HTML
<div>
<img
sizes="(min-width: ...px) ...vw, (min-width: ...px) ...vw etc"
srcset="/images/img1.jpg 280w,
/images/img2.jpg 350w"
alt="...">
</div>
<div>
<p> ... </p>
</div>
Set the image width to 100% and height to auto. That way, the image will preserve its aspect ratio while still being resized.
How can i add/remove class according as div width ? I tried some codes but I have no idea about jquery codes. I'd like add div class according as antoher div width. Just i need add class like that. If container is smaller than 600px "add class" to content div else "remove class" from content div. These are my codes;
<div class="container">
<div class="content"></div>
</div>
$(window).resizeboxes(function() {
if ($(".container").width < 600){
$( ".content" ).addClass( ".content_600" );
}
});
else{
removeClass('.content_600')
}
$(window).trigger('resizeboxes');
This works, though the code is changed slightly. There were some problems with the syntax also, so I've corrected those (for instance the else statement was slightly misplaced). Here is a working example:
https://jsfiddle.net/vt0nbx36/3/
Here is the code:
var resizeboxes = function() {
if ($(".container").width() < 600)
{
$(".content").addClass("content_600");
}
else
{
$(".content").removeClass("content_600")
}
};
resizeboxes();
$(window).resize(function(){
resizeboxes();
});
For this need exactly, you have jQuery's .toggleClass() function. It takes the class name as a first parameter, and optional second boolean parameter that states wether the class name should be added or removed. You can find the documentation here
$(".content").toggleClass("content_600", ($(".container").width() < 600));
Even tho your question is a JS related question, CSS as a matter of fact can handle this like no other beast can (mostly)!
CSS allows you to use media-queries to resize your content based on the width of the viewport.
The upside of this is that the browser will handle this for you within the rendering engine rather than having JS between your change and the rendering engine.
The major downside is that you can't define the width of element A based on element B but are unfortunately locked to using the viewport as an indicator.
Before I explain why you'd want to use CSS I'd like to point out why you don't want to use JS for this if possible.
The jQuery.resize eventhandler fires inconsistently across browsers and it fires alot of times usually.
This causes your scrolling to clog up and make your webpage feel laggy.
If there's anything your users will dislike it's the fact that scrolling is controlled by something they don't even know of which is slowing you down.
As for a CSS solution, a media query looks like this:
.my-selector {
width: 900px;
}
#media all and (max-width: 600px) {
.my-selector {
width: 600px;
...
}
}
You wrap your code in a sort-of conditional that allows you to be very flexible with manipulating elements on the page.
What happens in the above piece of code is that when the parser reads the CSS it sees the first selector not in a media query so it applies width: 900px; then it sees a media query and sees the other rule for my-selector however it will only apply that rule when the screen is at that width we defined in the #media ... rule. When you resize CSS handles things differently behind the scenes so it's much faster than JS in that case.
I'm not sure if it actually applies to your situation but if your container is sized by the viewport rather than parent elements this should be possible and I thought it'd be nice atleast to show you a good way of playing with element dimensions.
Also, you can use #media to for instance make a webpage print friendly by changing the all to print for example and setting the background-color: transparent for an element - saves ink ^.^ which is an additional extra on top of the general awesomeness of media queries.
Hope it helps, good luck if you wish to make your webpage 5 times faster ;)
quick question. I would like to add a JS program to control the height of one of my bootstrap divs (it's a decorative border on both sides of the page - see picture)
I don't want to have to set the height manually (i.e 2000px;)
I was trying something like this, but I couldn't manage it
css("max-height", $(window).height());
except this just fills up the screen, anyway of filling the body?
Here is the site - davidcodes.co.uk/vintarnBurmese/index.html –
David
If you are targeting modern browsers, or using modernizr, then using 'vh' units generally works better than %. When trying to size something relative to the screen height, then percentage units require that the heights of the tree going from your element up through its parents to the body all have predetermined heights. But the 'vh' units exactly capture what you want.
.yourdiv { height:100vh; }
Replace window with 'body':
$el.css('height', $('body').height());
This worked in the end (though Safari doesn't like it, FF and Chrome find it ok)
<script>
var mainSectionHeight = $(".mainSection").height();
$(".sideBar").height(mainSectionHeight + 100 + "px");
</script>
In my web app, I want to display popup element which has <img> element in it. Image source is usually bigger than I need it, so it get's resized in css. And before I display it, I need to know it's outerHeight.
The popup looks something like this:
<div class="popupContainer">
<div class="popupHeader">Header</div>
<img class="popupImage" src="source" />
<div class="popupMessage">message</div>
</div>
After I append it to another element, I'v tried retrieving it's height in two ways: simply popup.outerHeight(true) and using imagesLoaded library:
imagesLoaded(popup, function () {
popup.outerHeight(true)
})
In most caes, both options return the same and expected result (like how tall the element actually is in browser). But there are times when option #1 returns height that is too small, because the image source hasn't been loaded yet, whereas option #2 returns height that is way too big, because the css hasn't been applied yet. (I think that those are the reasons). So I wanted to know, which is the best time to retrieve it's height? When the image will be loaded and element will be formatted correctly accoring to css.
You should do when the image will be loaded.
I am trying to get image width of image with class product-thumbnail. There are several images with this width but all of them have the same width. So this is my javascript:
$(document).ready(function() {
alert($('img').('.product-thumbnail').width());
});
and these are image tags
<img src="img/produkt1.png" title="Názov produktu" class="product-thumbnail">
<img src="img/produkt2.png" title="Názov produktu" class="product-thumbnail">
however it doesnt work and I am not getting any alerts. There should be no problem with the selectors (jquery is included) and I want to use this so I can set div width acording to image width but the image width changes with browser windows width. Do you know a solution for this? Maybe I have only som syntax error there.
alert($('img').('.product-thumbnail').width());
That is invalid jquery, the selector should all be inside the $(''), like a CSS selector, so it should be
alert($('img.product-thumbnail').width());
You also need to pick which image to get the width of, for the first one, you would do:
alert($('img.product-thumbnail')[0].width());
You should be doing:
alert($('img.product-thumbnail').width());
But even so, it's problematic since you will get an array back. In any case, the syntax you are using is wrong.