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%
}
Related
I have embedded a website using iframe.
Whenever the parent page loads, the embedded page makes the parent page scroll down to the iframe. I cannot change any code in the embedded page, only the parent page.
Here's the [fiddle of the issue][1]:
HTML:
<iframe src="http://store.ecwid.com/#!/~/cart" width="100%" height="100%" id="Container"></iframe>
CSS:
body { margin-top: 100px; height: 1000px; }
How can I prevent the parent page from scrolling down to the iframe?
IMPORTANT UPDATE: ALMOST THERE
So we've added the following javascript to force the page to scroll bacl to the top:
window.addEventListener("scroll", runOnScroll);
function runOnScroll(){
window.scrollTo(0, 0);
window.removeEventListener("scroll", runOnScroll);
}
It does work as you can see [in this fiddle][2]. However, on the iPad and iPhone, you can clearly see the page scolling back then up again. On the PC, you can't see the transition.
Please visit [this website][3] so you can check both transitions (pc and mobile).
I'd like to know if there is anything we can add to the code so:
the transition in mobile is not noticed like in the pc (preferred choice)
OR
the transition is smoother (slower scrolling or something like that)
Ok, I added a bit of JavaScript that listens to the first time the document is scrolled down. When the document is scrolled down for the first time, it'll force itself back to the top, then it'll remove the listener so that the user may scroll as desired afterward.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css"></link>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<iframe src="http://store4549118.ecwid.com/#!/~/cart" width="100%" height="100%" id="Container"></iframe>
<script src="scripts.js"></script>
</body>
</html>
JAVASCRIPT (In a file named scripts.js)
window.addEventListener("scroll", runOnScroll);
function runOnScroll(){
$('html,body').animate({scrollTop: 0},1000);
window.removeEventListener("scroll", runOnScroll);
}
Give it a shot, and let me know if it works!
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
I have a page in HTML5
The page is defined as 100% height, and still have a scroll bar.
At first I thought it was because the Google Map that I have in the page, and then I opened the page in another browser, scroll bar smaller than the first browser,
then I got the idea that it is because of the different Tool Bars.
Is it really because of the Tool bar or is it because of the map, and how to fix it?
Thank you...
My css:
.ui-mobile
{
height: 99%;
width: 100%;
}
ui-mobile-viewport.ui-overlay-c
{
height: 99%;
}
#map_canvas
{
height: 99%;
width: 100%;
position: inherit;
}
My Html:
<!DOCTYPE html>
<html class="no-js">
<head>
...
<title>Main Page</title>
</head>
<body>
<div id="MainPage" data-role="page">
<script>
$("#MainPage").live("pageinit", function () { ... });
</script>
<div id="map_canvas">
</div>
</div>
</body>
</html>
If this is not a problem for you take a look at my jQuery solution:
$(window).bind('resize', function () {
var screenHeight= 0;
screenHeight= $('[data-role="page"]').first().height() - $('[data-role="header"]').first().height()- $('[data-role="footer"]').first().height();
$('#map_canvas').css('height',screenHeight - 4);
}).trigger('resize');
Page height - header height - footer height - 4 = content height
I am using - 4 to counter borders. Use only -2 if you have only footer or header. None if you have only map.
For this formula you need a viewpoint meta tag set, because you will get wrong screen sizes.
<meta name="viewport" content="width=device-width, initial-scale=1" />
This is a jsFiddle example: http://jsfiddle.net/Gajotres/HKjEF/
Tested in Win Firefox, iPad Safari, Android 4.1 Chrome environments.
First of all please share HTML code.
For your question : Yes, it may be because of Tool Bars or some other default margin, padding in the page.
You can remove the scroll-bar by setting height as 98% or 99% which ever fix scrolling issue for you.
I want to use jQuery or Javascript to take my logo and when the page loads, slide it from the left hand side of the page and make it stop and stay at it's resting spot about mid way through the page. (Logo div id="mylogo")
$(document).ready( function () {
$("#myLogo").animate("aCSSAttribute", "toThisValue");
});
also check:
http://api.jquery.com/animate/
If you show your effort, then I can help you out better.
You'll probably want something like this: http://jsfiddle.net/SATMY/1/
Your question is not clear at all, so it is hard to say whether it is possible that my answer is, indeed, a correct answer.
$("div#logo").animate({"marginLeft":"-50px"}, 800);
And initial CSS:
margin-left: -900px; /* Before slide-in */
You'll need to work out just how far it needs to move, the example below makes an assumption of x% but you can do this to the pixel should you need to.
Don't forget to position your logo, and to make sure the outer element has some width/display definition.
Fiddle
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#main {width:100%;}
#mylogo{border:1px solid red;width:200px;height:100px;display:block;position:relative}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#mylogo').animate({left:'+=25%'});
});
</script>
</head>
<body>
<div id="main">
<div id="mylogo"></div>
</div>
</body>
</html>
Alright, for those of you who have seen the new Google Page, I am attempting to get a similar idea going on my own webpage. Basically, I want the image in the middle to fade in upon a mouse moving on the screen. Here is the URL:
http://mageia.rh.rit.edu/
This is the Jquery I am using to get most of the affect: http://hv-designs.co.uk/2009/01/19/jquery-fade-infade-out/
However, as you might be able to tell, the image loads and then fades out. What I would like to have happen is for the image to not be seen at all until you move your mouse, just like on the Google webpage. I was thinking of perhaps changing the image's visibility by javascipt and CSS, but I'm not sure how to go about that. Ideas would be appreciated!
CSS:
div.fade_in { display: none; }
You can make it fade in on page load:
$(function() {
$("div.fade_in").fadeIn();
});
If you want to wait for the mouse to move:
function fade_in() {
$("div.fade_in").fadeIn();
$("html").unbind("mousemove", fade_in);
}
$("html").mousemove(fade_in);
Edit: tested in IE8 (compatibility mode), FF3.5 and Chrome 3:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://mageia.rh.rit.edu//resources/main.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function fade_in() {
$("div.fade_in").fadeIn();
$("html").unbind("mousemove", fade_in);
}
$(function() {
$("html").mousemove(fade_in);
});
</script>
<style type="text/css">
div.fade_in { display: none; }
</style>
</head>
<body>
<h1 class="centertext">Welcome to Mageia</h1>
<h3 class="centertext">The Works of Genii</h3>
<div id = "container" class="fade_in" >
<img class="image1" src="http://mageia.rh.rit.edu/resources/Escher.gif" />
</body>
</html>
For the CSS:
imageID{opacity:0.0;filter:alpha(opacity=00)}
This ensures that the image isn't shown until the JS is loaded.
For the Javascript:
$(document).ready(function(){
$("imageID").fadeIn("slow"3);
});
This changes the opacity from 0 to 1.
Cheers!