I have a slideshow in my website that will not scale to the browser.
What happens: When the browser is reduced to 414 px it renders
correctly. When I drag the browser window larger the slideshow image
size remains the same. Refreshing the browser makes it render correctly.
Also during the increase in browser size it's not a smooth transition.
You can see it here. http://comrefhvac.com
Thank you in advance.
RichM
How to fix the issue is a different question, and one that requires that we look at your code. If you simply want to know why, then it's because the styling for the slideshow is dynamically applied via javascript and it looks like the author of the plugin only considered the initial page load and no the window.resize event.
I'm cool with that. Try this, go to my website then take the browser down to 414 px and you will see a gap between the slideshow and the text below. Then refresh the page and it will render as it should. Then maximize the browser and you will see that the slideshow container does not expand to the proper size which is set in my css at 440 x 800 px. Thanks for being honest, hope your head doesn't hurt this AM Jeff. RichM
Related
Many websites use this, but https://modsquad.com/ was the first example I found. When you visit the site their background image (video in this case) is the full width and length of whatever screen you are viewing it on, directly below it is separate content, but you only see the video prior to scrolling down. How do you achieve this? In my search for the answer to this question I have only seen examples that set the entire html background to a certain image, which is not what I am looking for. Thanks in advance for help.
Visit here : https://modsquad.com/ , and open console, you can see what they do.
When the browser is resized, the video(or image) changes its height.
You can do it via javascript, read this question : JavaScript - Get Browser Height
http://1aproductions.ots-internet3.net
So my wordless theme has a built in slider. It is responsive. The slider is in the background and seems to have a height of 100%. On browsers that are normal width but tall this means that a lot of the image is hidden behind the white background of the content lower down the page. If you resize the page while the slider is on the slide image of the queen you will see why this is a problem. My boss would like it to always show her heard and shoulders.
Is there a way of, on longer shaped browser windows, stopping the image from being 100% height and therefore making it display better on longer height browsers as well as normal shaped ones?
As you can probably tell I'm kind of out of my depth on this one, so any help would be fantastic!
Thanks
Luckily for you there is a quick fix on this particular slider. The elements are set to have a background-attachment of fixed on #slider-container .full-bg-image. Clear it and the whole picture will display. You should then be able to use the background-position to align more specifically for mobile, or only have the fixed position for desktop use with a media query. I'm not sure what method the powers that be would like best :)
I've looked and there doesn't appear to be another post the is exactly what I am looking for, and I am on a deadline to make this work so lets see if I can explain it better.
We have one page in development on a Drupal site that uses Panels and Views Slideshow. There are a lot of absolute and fixed position elements because of where they need to be on the page. The parent div needs to have a width and height of 100% to fill the page. Keeping in mind that the point of this page is to not have scrollbars and present everything to the user no matter what screen size they are on. So I have media queries cleaning up elements where need be on certain screen sizes.
Though when a user uses their browser to zoom into the page, the elements start shifting and stacking on top of each other. I believe this is because the 100% height/width is adhering specifically to the window size and doesn't expand beyond the window when a user zooms in.
I was able to fix it by removing the 100%'s and replacing them with pixels, but this becomes an issue because if the screen isn't the correct height or width, then you have scrollbars and the user doesn't immediately see everything on the page.
Is there any JavaScript or anything that can utilize the 100% height/width and allow them to expand beyond the page, and turn on scrollbars, during Browser Zoom?
Keep in mind that if a user is zooming in, its OK for the page to spill off and scrollbars to show, but the default screen this is not allowed.
I hope this is OK to show but an example of a page that uses Javascript to scale the entire page is pretty much what I can see myself needing but don't know how.
http://www.ammunitiongroup.com/
Any help appreciated and the quicker the better of course :)
This should help. Lets you detect the browser zoom level in mordern browsers.
https://github.com/yonran/detect-zoom
Example page:
http://htmldoodads.appspot.com/dimensions.html
I can't seem to find an answer to this rather interesting problem. In google chrome, images that have a set width and/or height, either using attributes, inline styling or css styling, refuse to show up on the page on initial load. They only seem to appear after there has been some page activity. Yet, if you let the images load to their natural size they display on page load perfectly fine. The images can be seen as it works in other browsers and when inspecting elements in chrome the image is display in the popup window.
Any know how to fix this?
define what you mean by: 'after some page activity'.
You also mentioned that the it happens when you have set width AND/OR height which leads me to believe in some of your testing your ommiting width OR height so it can be calculated by the browser. if that is the case then yes the image will never look proper and the elements will have no size on initial page load UNTIL the image is downloaded, the browser inspects the image and determines the dimensions missing to create the bounding box.
Edit:
After looking at your online site, my previous comment explains the gist of it but I can see that you're setting a width of 'auto' which requires the browser to load the image first and detect the sizes. Which will cause a delayed 'reflow' in the browser rendering. Set your widths and heights otherwise they will need to calculated by the client browser. And if you have not so good pc it looks sluggish. On my system if i hard refresh with no cache sometimes i get all the thumbs and other times I don't and the delay is very noticeable.
So in short make your images always have a width AND height.
Edit:
You also have some 404 errors that can cause some latency. http://www.webpagetest.org/result/120725_0C_3N6/1/details/
Edit:
I think your only option is to load the bg image first by getting it higher up in the order of resources downloaded so it loads in as fast as possible to be rendered.
One trick might be to load the bg image in a hidden div to preload it right away so the browser downloads it first. And even if you do that you should expect to see some flash of black background while you wait for the high res shot to download and get loaded. Can't set widths and heights on background images anyways. Going further you can speed up the response time maybe by loading all the thumbnails with an AJAX call AFTER page loads so they don't even compete with the big photo shot and start downloading until the dom is fully loaded. You can even put a nice effect in there to maybe fade in the thumbnails loading or something to that effect.
What is the best way to dynamically change the width and height of an HTML5 video within a webpage? The kind of behaviour I'm referring to is the same thing in the intro video of http://flipboard.com/
When the window is resized, the video still takes up 100% of the viewable size (without scrolling). I noticed that the video gets resized to a certain degree, but stops resizing and gets cropped at some point.
What is the best way to get the same behaviour? I want to have a video take up the entire viewable area of the browser without scroll bars. This is only on a desktop/laptop, I am not considering any mobile devices ATM.
What I have in mind right now is to dynamically change the width/height properties of the video to fit the viewable area using javascript, but also set a minimum size such that the video doesn't get distorted. The video can be placed in a container that is always centered, so if the browser gets to a size that is too small, it effectively gets cropped. I'm not sure if this is too long-winded and if there is an easier way.
Thank you.
It looks like they have the css properties of height and width set to 100%. If you use an element inspector like the one built into chrome or firebug for Firefox, you should be able to see exactly how they structured the html/css for the video element as well as the div its nested in. Then, as you said, also set a min-width/min-height property.
Unless I'm misreading your question, it should be that simple. Hope this helps!
you could do it with "Responsive CSS", there are some ways to do that,
you could set the viewport, max-width, min-width, etc.
This link have a nice explanation how to do that : http://kyleschaeffer.com/best-practices/responsive-layouts-using-css-media-queries/