I am trying to use bxslider to make a full-height slider that is dependent on the browser window, so the entire slide is always showing.
As it is now, it is adjusting its width based on the browser window, but I can't get it to adjust its height.
Do I have to somehow adjust the image height itself (within the slide) to be based on the browser window?
Is there another slider plugin I should be using for this?
Thanks in advance!
Related
I have a website that has a title, navigation bar, and a paragraph of text, followed by an iframe. I want to set the height of the iframe to the remaining height of the screen and set the iframe width based on this height.
I have a JS function doing it when the website loads, but want to do this using CSS so it is more responsive. This tutorial shows how to do this based on width of the screen. It makes the height 56.25% of the screen width. I want to do something similar but scale the iframe so it is as large as possible without having users scroll down to see the whole iframe.
In my JS function, I have everything not including the iframe wrapped in <div class="header"> and get that height with $('.header').height(). Then I just subtract this from the window height to get the iframe height and calculate the width based on a ratio (i.e. 16/9 for a video). How can this be done in CSS?
I've tried setting the height to 100% and not specifying the width, which was suggested elsewhere. This didn't work. My iframe is essentially embedding another HTML document, not a video.
Once the page initializes, I can't find a way to resize the height of a vertical panel. If I select the split pane component with jquery and set a min height the component does not respond by resizing its separator or internal panel. Is there any way to change the height of a vertical panel dynamically after the initial page load?
Found a way, just needed to target .v-outer instead of the actual container.
I have a simple page with a fixed sidebar (navigation) and a content area that scrolls normally. Sidebar position:fixed, content area normal.
The sidebar (if taller than the browser) uses a scroll bar to show the rest of the sidebar content. Thats cool, it works like its supposed to.
I'm trying to get the sidebar, onload, to set its height as tall as its contents, so there is no scrolling. So if the sidebar is 2000px tall with all the content loaded in, onload the height is set to 2000px so there is no scrollbar. It will just make the fixed sidebar 2000px high.
Is this a min-height issue? I feel like there is a simple way to do this but I have been at it so long I cant figure it out. Ive used scrollHeight, height(); etc. and cant get a solution.
Thanks
Remove the css height to allow the div to expand, set overflow:none;
Otherwise similar questions and answers here:
Make div 100% height of browser window
This is what I understand from the question, since there is no code submitted.
If you "mesure" contents height after pageload, you can set your sidebar height to this value.
document.ready(function(){
contentHeight = $("#content").css("height");
// set sidebar height
$("#sidebar").css({"height":contentHeight});
});
Place it at the end of the page, so it will be executed after pageload.
I'm not sure this will remove the scrollbars, since it appears when height is more than viewport.
You'll have to set css for the sidebar to overflow:hidden.
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 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
});