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.
Related
I need to embed a Facebook Page Plugin on a website.
According to the info on
https://developers.facebook.com/docs/plugins/page-plugin
it can be any width between 180px and 500px
On large screen I want 500px width, but on smaller it would need to something around 300px.
Now, there is an option which makes the iframe adjust to the width of the container, but that part of it doesn't work for me at all.
So, what I have is two iframes (one for 500px width, one for 300px), and using #media queries, I hide/show the correct one.
However, it still loads two iframes.
Is there an equivalent <picture>/<video> tag I could use, which would load only one, depending on screen-width?
Alternatively, what I am doing wrong with the iframe?
Below is the code replicated in jsfiddle:
https://jsfiddle.net/nuy4r1gk/2/ <-- 2 iframes
As you can see, it works, but it's loading two iframes, which is far from good. If I use css styling (#media) on the iframe, it just cuts it off, rather that loading narrower.
https://jsfiddle.net/nuy4r1gk/4/ <-- 1 iframe with css
I found a working solution when using the iFrame embed method. It works with any container width between the supported 180-500px
https://stackoverflow.com/a/52459262/10401291
When the webpage is on the big screen everything is perfect. All 3 blocks of text are inline and the white footer comes right after the background picture.
But when I resize the window webpage automatically adds space after the picture.
Not sure what I should do: have my picture repeated? But that won't look good. Leave it as it is? Not sure what to do? What is a good solution for this?
If you have a background image, you can set the background-size to cover to ensure that it always covers the whole element.
See example here: https://jsfiddle.net/ut04htu0/
If the background is an image(tag), through jquery set the height to window height in resize function.(jquery).
$(window).resize(function(){
$(".img").height($(window).height());
});
Here img is the class used for image tag.
Hopefully this solves your problem
The website is http://teothemes.com/wp/Teo/ and the section I'm reffering is the Portfolio section with the filterable portfolio. On hover on each element, two icons show up http://prntscr.com/1a1wxx
If you click on the "+" one(which means extend), the slider is totally messed up, http://prntscr.com/1a1x00 . I don't understand why it takes all the images in just one slide. And, it happens just on the first time I load a portfolio, if I try it for other portfolio items after I open the first ope, it works just fine.
I've tried setting the position to relative, thought it's a css problem with margins, padding, the width of the top container, I set it to 100%, but it just doesn't want to work.
I think the problem is with some of the default CSS code for the flexslider container, but I'm not sure what exactly to check.
Any help is appreciated.
I have a page in which I have a fixed footer that scrolls with the page, however on the page there is a Javascript slideshow, as the slideshow loads in a new image, it loads it over the fixed footer.
The page in question is this one: http://mysterybox.co/signalnoise/. Scroll down to see problem.
Screenshot of the offending effect:
Can anyone give me any advice? I thought I may be able to fix it with a z-index but that didn't work.
add z-index: 2; to #footerwidth
EDIT:
same goes for #headerwidth
EDIT2:
per ThinkingStiff's suggestion, you may also consider replacing the margin-bottom attribute of the footer with a padding-bottom attribute.
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
});