My slideshow's working correctly in every aspect except the fact that it's a total failure when it comes to adjusting to different screen sizes.
It works like it should on my big screen, but on my other one it doesn't adapt and adds a horizontal scroller.
I added width 100% to it but as I've found out the right way to do this is by a javascript code that adjusts everything dynamically. The problem is, I've never had any prior experience doing this and don't know where to begin. My page has jQuery loaded by the way.
This is the sample structure of slideshow:
<div class="featured-image">
<div style="overflow: hidden;height: 450px;"><img width="1950px" height="" alt="4" src="image.jpg"></div>
<!-- end .featured-price -->
</div>
I suppose a jQuery script to target '.featured-image img' dynamically and add the width and height to it would be the way to do this. Is there any way better than that or a simpler script? Any help is appreciated.
var screenWidth = $(document).width();
$('.featured-image img').width(screenWidth);
If you need it to adjust dynamically then you'll need to capture the resize event:
$(window).resize(function() {
var screenWidth = $(document).width();
$('.featured-image img').width(screenWidth);
});
Related
i'm trying to make my twitter widget (which is in its own div) the same height as another div (called mainslider). I've tried some stuff with JavaScript and JQuery but i'm not too experience with this.
An extract of my code is below:
<div class="mainslider" id="mainsliderid">
(SLIDER CODE HERE THAT I REMOVED)
</div>
<script>
var twitterheight = $('mainsliderid').height();
</script>
<div class="maintwitter">
<a class="twitter-timeline" href="https://twitter.com/twitter" data-widget-id="704258053198254080" height="twitterheight" width="100%">Tweets by #twitter</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;js.src=p+"://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);
}}(document,"script","twitter-wjs");
</script>
</div>
So i solved the problem myself, and it was really simple.
Due to the nature of the slideshow i had, its height was set proportionally to its width. Because i am using proportions of the screen width to change both the twitter and slideshows width i could just use the unit 'VW' which is 1 % of the screen width and just had to multiply it by the correct value. Works fine now.
This seems like a very trivial doubt but I have spent a lot of time on it now and have not found any satisfactory solution.
I am working on Django. I have an image on a dummy.html. This html is being rendered from a function ipdtest() in my views.py.
These are the respective code snippets of the views function and the HTML.
def ipdtest(request, frameslug):
frame= VTryON.objects.get(slug=frameslug)
image_of_frame=frame.image.url
frame_path=("D:/Work-Backup/LiClipse Workspace/vTryON_DJango_Integration/vTryON/templates"+str(image_of_frame))
d=Frame_Superimposition()
resize_factor,height_frame,width_frame=Frame_Superimposition.frameSuperimpose(d,frame_path)
context={'frame':frame,'resize_factor':resize_factor, 'height_frame':height_frame,'width_frame':width_frame}
return render_to_response('dummy.html', context,context_instance=RequestContext(request))
My code in the dummy.html is as follows
<body class="body">
<div id="pageContainer">
RETURNED FROM VIEW
resize factor={{resize_factor}}<br>
height={{height_frame}}<br>
width={{width_frame}}<br>
<img id="original" src="{{frame.image.url}}" width="" height=""/><br>
<img id="resized" src="{{frame.image.url}}" width="" height=""/>
<br>
</div>
where height and width are the height and width of original image respectively. My problem is that based on the resize factor variable I want to dynamically change the height and width of my resized image. I can see all the values of resize factor, height and width displayed on to my django HTML page
To solve this, I googled and found that javascript was a possible solution and this is what I used in my HTML django template
<script type="text/javascript">
alert('JS in Dummy')
document.getElementById('resized').style.width='100px';
alert('###')
document.getElementById('resized').style.height='250px';
</script>
Instead of the '100px' and the '250px' (which I had set just to see whether the JavaScript works or not) for width and height here I should have the value for {{width * resize factor }} and {{height * resize factor}} here.
How should I do that so that based on the resize factor the width and height of the resized image is set. Is JavaScript the proper way to do this? I don't even see the code in the JavaScript going beyond the first alert in the JavaScript.
Please help. I have been stuck for a long while. Thanks in advance :)
EDIT:
The javascript should retrieve the django context variables in this way
<script type="text/javascript">
function resizeFrame(){
alert('resfac###')
var resize_factor="{{resize_factor}}";
var height_frame ="{{height_frame}}";
var width_frame ="{{width_frame}}";
var resized_ht= (height_frame * resize_factor)
var resized_wt= (width_frame * resize_factor)
alert(resized_ht)
alert(resized_wt)
document.getElementById('resized').style.height= resized_ht+"px";
alert('###')
document.getElementById('resized').style.width= resized_wt+"px";
};
I'm using a CSS grid system which is based upon percentages. I have a grid with 4 columns, each 25% of the page's total width. I output my image tags inside of each "25% cell" like this:
<img src="foo.jpg" style="max-width:100%" />
As the browser resizes, the images also resize to fill in 100% of each 25% cell. The browser picks a height, as if I had put "height:auto" (which is implicit when omitted).
Now I want to add lazy loading capability to this. The problem is that before the images are loaded, their height on the page is unknown. The browser has to download the image & observe its aspect ratio, and calculate a height for it. Prior to this, all the images have a height of 1px. Since every image has a height of 1px, they are all considered as "within the viewport" and are immediately loaded.
Currently I have a proof of concept where prior to outputting the img tag, I calculate the images aspect ratio on the server, and output in a data attribute:
<img src="foo.jpg" style="max-width:100%" data-aspect="1.7742" />
Then, upon the event "document ready", I loop through every image and set a fixed 'height' value in pixels prior to lazy loading:
$('img').each(function() {
var img = $(this);
var width = img.width();
var ratio = img.data('aspectratio');
var height = width / ratio;
$(this).css('height', height+'px');
});
This seems to be working, in the sense that it no longer loads all the images at the same time, but only loads images as I scroll.
However, it seems like it could cause new problems, like the images becoming stretched as the user resizes the browser. I would have to switch the 'height' back to 'auto' when a callback fires for lazy loading having completed. That would take care of images the user sees - but the images below the fold would still have an improper 'height' value upon the browser being resized. Every time the browser is resized, I would have to iterate all images that were previously below the fold, measure their updated width, read their aspect ratio, and update the new height, and then retrigger lazy loading to handle anything that is now above the fold. If I don't do this, loading could be triggered too early or too late due to those images having the wrong height value.
My question is, is there any other ways to lazy load images with unknown heights, other than the exact method I've described here, and what ramifications would this have? Is there any downside to my method, other than it being a pain to program?
I had a similar problem recently, combining Isotope with Lazy Load in a responsive layout. Isotope determines the layout based upon the width and height of the images when the page is loaded, so initially, the items were all overlapping because Isotope wasn't calculating the correct size.
To make sure the placeholder items were saving the space, I used the padding-bottom trick you mentioned: http://thisisthat.co.uk/notebook/2013-10-07-lazy-loading-responsive-images (Though it may have not been that exact post.) Here's my markup:
<article class="portfolio-item">
<a class="portfolio-link" href="img/gallery/thumb90.jpg" style="padding-bottom: 66.2%">
<div class="portfolio-image-wrapper">
<img class="portfolio-image" data-original="img/gallery/thumb90.jpg" width="1000" height="662">
</div>
<div class="portfolio-text">
<h1 class="portfolio-item-name">
<span href="#" class="icon" data-icon="e"></span>
<span class="portfolio-item-tags">Bridals</span>
</h1>
</div>
</a>
</article>
That's probably more involved than you need (as the entire .portfolio-text div is an overlay which has quite a bit of styling going on). The real key was just in calculating the bottom padding based upon the width and height of the image (which I did in the template with PHP) and setting that as the padding-bottom of the item that I wanted to save the space.
Here's the more elegant solution, from the comments. It still requires writing the aspect ratio server side, but with a wrapper div:
<div class="lazy"><img src="foo.jpg" style="max-width:100%" data-aspect="0.75" /></div>
Then with JS I give the wrapper div a padding-bottom:
$('div.lazy').livequery(function() {
var c = $(this);
var r = c.data('ar');
c.css('padding-bottom', r * 100 + '%');
});
This gives the div the exact dimensions that the img will eventually consume. I then use the following LESS to load the image within the area the padding consumes:
div.lazy {
max-width:100%;
position:relative;
img {
position:absolute;
width:100%;
height:100%;
}
}
Even cleaner:
Set height and width of images to an arbitrarily-large number (like 2000px x 1000px)
Apply the following CSS to each of the desired images (perhaps via a shared class):
max-width: 100% and height: auto
Smile wide :)
Credit for this approach goes to Github user dryabove, given in this Github issue
if you have images with height and width props (WordPress's default) with loaded 1x1px gif in src - by default in some plugins (looking at you - wp-smush) then just plug this little beast on docready event in your script and it will auto-fix nasty vertical jumping of image when lazy loading ,, I know this is old post, but this is I believe modern js solution:
$('.lazyload').each(function(i,j){
var h = $(j).attr( 'height' );
var w = $(j).attr( 'width' );
var at = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 ${w} ${h}'%3E%3C/svg%3E`;
$(j).attr('src', at);
});
I am working on a prototype of a project in which I need to adjust the look and feel of site content according to the browser window size.
Now for the prototype I am using a sample image and I want to adjust the height and width of the image as per window's height and width.
Here's the code that I am using:
$(window).resize(function() {
document.write("<img src='sample_image.jpg' border='0' height='"+window.innerHeight+"' width='"+window.innerWidth+"'>");
});
The above code doesn't work properly. I want to dynamically change the image height and width as user resizes the window. I also tried implementing this solution. But that didn't work either. Any ideas how can I solve this?
Well, since this is needed for testing purposes only, and it seems that you use jQuery, try this code:
<img src="sample_image.jpg" border='0' height="1" width="1" style="display: block;">
<script>
var resize = function() {
$("img").width($(window).width()).height($(window).height());
};
$(window).resize(function() {
resize();
});
resize();
</script>
DEMO: http://jsfiddle.net/GvRJ7/
Otherwise, myself and other guys here strongly recommend you using good HTML/CSS markup to make your design fit any resolution.
Instead of window.innerHeight and window.innerWidth you can try using percentage.That Will Resize your image accordingly to windows height andwidth.
document.write("<img src='sample_image.jpg' border='0' height='"70%"' width='"70%"'>");
Think of how often window.resize() fires (if you have any doubt, console.log() it). Only inexpensive operations should be performed inside it, like incrementing a counter, or calculating a position.
In your particular case, I think a 100% width/height image will work using just CSS (or CSS generated with JavaScript if needed). Of course, this will look bad as the image gets beyond its real size, and waste bandwidth when it is below its real size, but it will have the equivalent effect to your code at a fraction of the expense.
As a side note, document.write() should rarely be used. Use DOM manipulation functions instead.
I'm using JQuery and learning as I go, I was just curious is there a way to have a DOMwindow auto resize to its content?
I managed to figure out how to change the parameters to take % width and height instead of px but I'm finding that a dynamic resizing view would utilize my site's purpose better.
Should I be looking into a different type of code to accomplish this?
If you had a containing wrap element, which holds all of the content, and is not set to 100%:
<div id="main_container">
// page contents
</div>
You could now get the dimensions of the containing element and then resize your window to suit.
In jQuery:
$(document).ready(function() {
var myElement = $('#main_container');
var sWidth = myElement.width();
var sHeight = myElement.height();
window.resizeTo(sWidth, sHeight);
})
There are other ways of doing this, if you search thoroughly on this website, you will find your answer. You can use (document).width() and (window).width(), as this answer describes: jQuery(document).width() doesn't include width outside of viewable area