I am trying to create a sideways slideshow of images. The panel that will contain the slideshow is exactly 1200px wide. At page load, PHP loads images inside this panel. The number of images is not always the same, and I don't want the slideshow to start unless the collective width of the loaded images exceeds the width of the 1200px container.
The problem is, all the images are of various sizes, everything from 150x100 to 1980x1200. The images are fit into the bar by setting their height to 50 and letting their width rescale automatically.
Now, creating this slideshow panel in any other programming language would be easy. I'm suffering here in javascript though, because I simply can't find ANY WAY of getting the new width of the images. They all read width: 0px using jQuery outerWidth()
I have even tried putting a div wrapper inside the 1200px panel, outside the images, hoping that div would automatically scale around the width of the images and give me their collective width, but instead it reads 1200px (jQuery outerWidth())
Is there any way of measuring their width?
Is there an easier way of doing this?
Any help appreciated
I'm guessing you're trying to get the widths when the document is ready, instead of after the images have loaded.
Try placing the code that gets the outerWidth() in $(window).load().
$(window).load(function() {
//get the image widths
});
Related
I am currently building a portfolio website for myself. I have an array of projects that are flex and change size as the window changes size, once they get to a min-width they wrap over to the next line. My problem is that when the website is loaded for the first time without a cache, the images haven't loaded yet and the height of their container doesn't fit them. This causes a lot of overlap, but when the page is refreshed and there is a cache it fixes itself. An example is shown here:
The cache problem.
My idea to fix this was to make a min-height, but since its responsive and the size of the container changes, I don't know how to set the min-height. I was thinking of setting it to a mathematical relation to the width of the view port window, but wasn't sure if I had the skills to make that work. I will happily attach the code if needed.
If you want to preserve space for an existing image you can wrap it into a div and adjust this div's dimensions any way you like. For example, you can set min-height. Or if the image height varies you can use loading indicators (gif loading animations) with their own dimensions, and when your images finally load, you can replace the gifs with the actual images using js onload event
To make space for images before they load you need to give each image a corresponding value(*) of its height and width.
( * - in good coding practices, this is actually a requirement ! )
For example ::
<img src=[url] width=180px height=300px>
If you want a fast, stable, responsive, robust and absolutely solid page - Never leave images, tables and table-cell columns without a 1. width and 2.height specs.
Even if they are flexy, you are highly encouraged to at least use relative size (%).
<img src=[url] width=60% height=100%> /*relative::Let's say this set of images is in a
div who's css height is 300px. The images width given as 60% matches exactly its pixel
width, which is 180px.*/
You will immediately notice a tremendous improvement of your page performance and have away better experience working with them. Depending on the complexity of elements a ten fold improvement of the render speed may be achieved.
I have a div which contains another 3 divs, and each of them has a table.
I want them to change their size depending on screen size.
The reason why I need it is because:
If page are opened on 1366x768 resolution then page footer are moved with it and as a result, I am getting scrollbar. Because one of the tables already has scrollbar by itself, another scrollbar seems ugly. On bigger resolution everything seems fine (except maybe tables looks smaller and there a big amount of empty space under them).
I read that it could be done with css help but will this kind of solution will work on a different browser? (IE and Chrome for example).
Give max-width to your most outer div which contains other DIVs and then use percentage % for inner DIVs
Assuming you have a container div is 960px wide if you have a col div in the container as 320px wide then that would be 33.33%
320*100/960 = 33.33%
I'm using Flexslider which calculates the image size based on the parent element width, which makes it responsive because it resizes when you change the browser size.
The problem I'm having is that when I load the page, you see a colapsed slider until the images are loaded which makes it look bad. However, if you go to flexslider site at http://www.woothemes.com/flexslider/ you'll see that it has a loader.
Is there an option in flexslider for automatically behaving this? I couldn't find one.
Try giving
min-height
min-width
using CSS to the div block in which you are having the images so that it might atleast not collapse
In flexslider stylesheet they have give .flexslider a min-height of 280px and used a gif loading image as its background. You should use that. Your problem will be solved.
I am using jQuery Masonry to display a grid of boxes (all the same size).
Here is my testing site.
Works great when the browser width is 1100px or below.
When viewing it at 1270px and above, Masonry keeps adding columns on the right hand side.
I have a max-width set on the outer container, but Masonry doesn't seem to acknowledge it and just keeps expanding the width of the Masonry container.
On the Masonry Centered page, you can see that it is centered, but there is no constraining width. As you increase the browser width, it just keeps expanding and adding more columns.
How can I add a hard rule to say, "This is the maximum width. Stop trying to add more columns."
Thanks
UPDATE
Here is a jsfiddle, although I"m not sure if it's even set up correctly. It's best just to go to my testing site to see the problem.
Setting a max-width on the parent element of the masonry'ed container works for me. Is this not the result you're looking for?
#wrapper { max-width: 990px; }
I am trying to resize all elements on a web page upon resizing the window. The background image needs to stretch along with draggable items, text boxes, font size, and other images. The draggable items needs to stay in the same place in proportion to the background image. Everything needs to maintain aspect ratio. I have tried numerous methods and none seem to work.
As far as the background image scaling to whatever is going on on the page, see my reply to this guys similar question.
resize the image to fit the dimensions of TD
as far as other objects changing but maintaining aspect rations you may want to look into css Media Queries.
good luck