I've encountered a problem with Flexslider on iOS devices that seems similar to the problem reported in this unanswered question. Slideshows with images of different aspect ratios display properly on OSX Safari and all other browsers I've tried (even IE8), but not on iOS 5 or 6 using Safari or Chrome. The problem occurs on both iPhone and iPad.
I first noticed this in a large responsive portfolio site I'm building for a client and thought it might be related to the unusual configuration including pulling the slider in using Ajax. As it turns out I was able to reduce it to a simple example. Here are screen shots of the example in iOS and OSX Safari.
The example is very simple and uses jQuery 1.10.1 and jQuery.flexslider 2.1. You can find a working example on my website. Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" id="viewport" content="initial-scale=1.0, width=device-width" />
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.flexslider.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(window).load(function() {
jQuery('.flexslider').flexslider({
controlNav:true,
animationLoop: true,
slideshowSpeed:2000
});
});
</script>
<link rel="stylesheet" href="flexslider.css" />
<style type="text/css">
#example{
width:100%;
height:auto;
max-width:400px;
background-color:#f0f0f0;
}
</style>
</head>
<body>
<h1>Flexslider iOS bug example</h1>
<section id="example">
<div class="flexslider">
<ul class="slides">
<li><img src="tallslide.jpg"></li>
<li><img src="wideslide.jpg"></li>
</ul>
</div>
<p>Text after slider</p>
</section>
</body>
</html>
I've tried numerous CSS adjustments such as changing the images to display:inline, and messing with margins and padding. None of those made it any better.
My question is:
How do you make Flexslider display short slides properly on iOS or do you know of a slider that works well in responsive sites with slides of different aspect ratios?
It doesn't look like it's currently possible with what Flexslider provides. My best alternative was to use BXSlider which has an adaptiveHeightoption.
If your images are all different sizes than what you need to is set the height of the container to a fixed value and set the content to be overflow:hidden;
Something like
.flexslider {
height: 300px;
overflow: hidden;
}
You could include a series of media queries based on the height of the viewport to adjust that height over a range of heights.
Something like that?! Customized according to your example ;) (flexslider 2.1 tested)
jQuery(window).load(function() {
jQuery('.flexslider').flexslider({
controlNav:true,
animationLoop: true,
slideshowSpeed:2000,
after: function(slider){
$(this).height( $(this).find('.slides > li').eq(slider.currentSlide).height() );
}
});
});
From my previous answer to this stackoverflow question https://stackoverflow.com/a/21491781/3259159
Related
I added a WebGL 3D animation to the page with VantaJS.org, I have completely written the code as same as the official example, but the 3D animation is stopped once I scroll down the page. You can check the demo here: https://lovage.io/3d and my codes below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D</title>
<script src="https://lovage.io/3d/js/three.r92.min.js"></script>
<script src="https://lovage.io/3d/js/vanta.wave.min.js"></script>
</head>
<body>
<section id="layer"></section>
<div style="height:3000px;"></div>
<script>
VANTA.WAVES({
el: "#layer",
});
</script>
</body>
</html>
However, the official demos works fine on my browser. Anyone can give me any tips debugging?
Thanks in advance!
You need to give height and width to your section.
You attached the event on that tag but since has no dimensions you lost the animation at the first scroll.
Try this
body, section{
height: 100%; width: 100%
}
<div data-role="page" id="samples">
<div data-role="header" data-position="fixed">Back<h1>Ceremony Planner 2.0 - Samples</h1></div>
<object type="text/html" data="http://www.thereverendmichael.com/ceremony-samples"></object>
</div>
The object scrolls and works fine on all browsers but will not scroll on mobile, it gets cut off and bottom-clipped. Can anyone tell me how I can fix this?
Try this:
First: Make you sure that you put the viewport inside <head> like
<head><meta name=viewport content="width=device-width, initial-scale=1"></head>
Use <iframe> instead <object>
Add a wrapper to the <iframe>and add the following style
html
<div class="wrap">
<iframe src="http://www.thereverendmichael.com/ceremony-samples"></iframe>
</div>
css
.wrap {
// -webkit-overflow-scrolling: touch; Non-standard!
overflow-y: scroll;
}
SOURCE: https://www.w3schools.com/cssref/css3_pr_overflow-y.asp
If it doesn't work uncomment the other style although I see the documentation and is not recommended to use it see here.
However here is working: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe you can see
the style that applies to #iframewrapper watching the view-source (ctrl+u in your browser) and looking for #iframewrapper
Hope this helped you!
I am trying to use the jquery custom scrollbar plugin.
My html:
<body>
<div style="height:10000px"></div>
</body>
javascript:
$("document").ready(function(){
$("body").customScrollbar();
});
Yes, I linked jquery, the js and css file.
When I load the page, it is blank. Without the javascript, it is fine.
The plugin can be found here:
http://plugins.jquery.com/custom-scrollbar/
You need to set the skin in the body and set width and height in pixels. Percentages or use of CSS3 calc doesn't works (if you set the width and height in body). Maybe you would have to modify the CSS to get better results.
<head>
<style type="text/css">
body{
width: 200px;
height: 200px;
}
</style>
</head>
<body class="modern-skin">
<div style="height:10000px">asdf SAS</div>
<script>
$(window).load(function(){
$("body").customScrollbar({updateOnWindowResize:true});
});
</script>
</body>
Look! it's just a band-aid.
If you need a better solution, I recommend you to implement this example from plugin website. Here's an example of how to adjust the scrollbar to the window size.
I have a web app that I created using html5,jquery and css that contains,
<html>
<head>
<title>Pascal Pattern Scan Laser Photocoagulator</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (1462_Next_Treatment_Flat.psd) -->
<style type="text/css">
<!--
As you can see it was sliced in photoshop so for each slice i have a css div class e.g.
div.Table_01 {
position:absolute;
left:0px;
top:0px;
width:1024px;
height:768px;
}
When viewing on mobile devices the width matches the screen however the height is too big for mobile screens (user has to scroll down) how can i match the resolution. Similar to a responsive design?
Also do i need to set height as AUTO in the html part of the code or the css or both?
<div class="Table_01">
<div class="id1462-Next-Treatment-Flat-01">
<img src="images/1462_Next_Treatment_Flat_01.jpg" width="1024" height="479" alt="">
</div>
You have to implement Media Queries in css. Please go through below mentioned link for specific implementations...
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
I'm trying to create a slideshow (of images) which I've done (by coping an example and changing it slightly, but I'm trying to fit the image size so that there is no option of scrolling. I tried putting it in a div, but this did not work (undoubtably due to my incompetence). I have looked up lots on here, and found several cases of people asking the same/similar questions (e.g How to resize an image to fit in the browser window?), however I have been unable to apply it. Currently when I view this, the page size is the size of the largest image (when the image is larger than the page.)
Many thanks for your help.
Here is where I'm currently at:
<!DOCTYPE html>
<html>
<head>
<title>JQuery Cycle Plugin - Basic Demo</title>
<style type="text/css">
.slideshow { height: "100%"; width:auto }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
</head>
<body>
<div class="slideshow"; style= height: "100%"; width:"auto">
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
<img src="5.jpg" />
</div>
</body>
</html>
http://jsfiddle.net/LsNV7/6
.slideshow > img {width: 100%;}