I am setting up a website like this (vertical slideshow almost):
http://mikelegacywebdesign.com/scrollpage_test/index.html
The one thing I am looking to do that I can't figure out is how to make the scrolling SNAP to the point where the color change is while scrolling.
For example, when scrolling, you get to about 50-100 px near the top of the next color you are scrolling to, it would be nice if that would snap to that point, instead of just continuing to scroll, because it is hard to get that "frame" to perfectly align. It's dependent on the user to scroll the perfect amount so that they are viewing the full frame, and not pieces of the former or next frame in the sequence.
Anyone that knows if there is a jQuery plugin or something for this would be my hero.
Here is the ENTIRE page so far. It's simple coding to get the current effect:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Scrollpage Test</title>
<style type="text/css">
html, body { margin: 0; padding: 0; height: 100%; width: 100%; }
.container { height: 400%; width: 100%; }
.section { height: 35%; width: 100%; }
#section1 { background-color: #1d9ad7; }
#section2 { background-color: #c83e3d; }
#section3 { background-color: #75b946; }
#section4 { background-color: #f4be2f; }
</style>
</head>
<body>
<div class="container">
<div class="section" id="section1"></div>
<div class="section" id="section2"></div>
<div class="section" id="section3"></div>
<div class="section" id="section4"></div>
</div>
</body>
</html>
Yes, it's possible. Their code is quite awful though. While animating scrollTop, you'll want to make sure that additional user-input that normally leads to scrolling is ignored. Have a look at this test-case to get an idea about how to prevent a user from scrolling.
You can get the desired effect using the
scroll() jumpScroll() scrollBy()
and a little bit of your own code.
For example,
function jumpScroll() {
window.scroll(0,250);
}
Would scroll to that point on the page
I was after the same thing so asked a similar question a few weeks ago. I found an addon called stellar.js that had the functionality but the demo was in horizontal and I couldnt for the life of me change it to vertical. Anyways, someone posted a solution, which I edited for mousescroll instead of click: http://jsfiddle.net/djsbaker/dxzk4/
On a site note, I had issues with it being quite laggy with huge fixed background images. In fact very laggy, but I was using parallax which didn't mix well.
Related
If i refresh the page and scroll down, the website lags for a few milliseconds and continues afterwards. the problem is only coming back after I refresh the page.
Any possible solutions for that?
Thanks
try to add this.see if it helps. clear your cache and try to run in in a different browser if thats a browser problem.
html {
scroll-behavior: smooth;
}
I understand your problem. I write a simple code for scroll behavior watch my codepen link and
html {
scroll-behavior: smooth;
}
#test1 {
height: 600px;
background-color: green;
}
#test2 {
height: 600px;
background-color: black;
color:white;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Smooth Scroll</h1>
<div class="main" id="test1">
<h2>Section 1</h2>
<p>Click on the link to see the "smooth" scrolling effect.</p>
Click Me to Smooth Scroll to Section 2 Below
<p>Note: Remove the scroll-behavior property to remove smooth scrolling.</p>
</div>
<div class="main" id="test2">
<h2>Section 2</h2>
Click Me to Smooth Scroll to Section 1 Above
</div>
<p><strong>Note:</strong> The scroll-behavior property is not supported in Internet Explorer.</p>
</body>
</html>
I would also suggest this:
html {
scroll-behavior: smooth;
}
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
height: 250px;
width: 250px;
overflow: auto;
}
#content {
height: 800px;
width: 2000px;
background-color: coral;
}
</style>
</head>
<body>
<p>Scroll inside the div element to display the number of pixels the content of div is scrolled horizontally and vertically.</p>
<div id="myDIV">
<div id="content">Scroll inside me!</div>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener('scroll', function (e) {
alert("scroll");
});
document.getElementById("myDIV").addEventListener('click', function (e) {
alert("click");
});
</script>
Why its not working in IE I played this same code in w3 try it yourself page, it works in IE but not if I tried it as a separate file, so confused. Even if some one downvote this please tell me what I am missing?
I found these things when I browse other answers:
pointing to window.scroll but I need on a particular element
Use overflow-x: scroll; overflow-y: hidden; or vice versa.(which didn't work and also I need scroll on both ways)
NOTE:
This code works clearly in other browsers.
Its my bad. May be helpful for someone like me, Please enable scripting in your IE. :_(
A thing to note here is, Although script is not enabled it w3 school exercises exercises worked because of iframe?. If so how?
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am searching a lot but don't know how to name it properly.
Idea:
We have two divs together. The first one on the left have a lot of content, more than the one on right side. The second one have only form to be filled up and send. When user scrolls the left div for more information, the right side with contact form will follow to the end of this div. And when user scrolls up, this form on the right will follow it too.
How to detect it? Is there any framework?
I have a lot of divs in website and each one must have this script.
Screen to show what I mean:
Link to page:
LINK
Check following links:
http://www.jqueryscript.net/layout/jQuery-Plugin-To-Fix-Element-Within-Its-Parent-Container-nail.html
Demo: http://www.jqueryscript.net/demo/jQuery-Plugin-To-Fix-Element-Within-Its-Parent-Container-nail/
http://www.jqueryscript.net/layout/Super-Tiny-jQuery-Plugin-For-Sticky-Elements-Sticky.html
Demo: http://www.jqueryscript.net/demo/Super-Tiny-jQuery-Plugin-For-Sticky-Elements-Sticky/
http://www.jqueryscript.net/layout/Multipurpose-jQuery-Sticky-Sidebar-Plugin-scrollWith.html
Demo: http://www.jqueryscript.net/demo/Multipurpose-jQuery-Sticky-Sidebar-Plugin-scrollWith/scrollwith-single-first.html
You can use the CSS position: fixed; for the right side.
is this what you want. the concept is to use position:fixed and right:0 and/or top:10px properties with your css. this is a small example for it.hope this will help.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
body{
width: 100%;
height: 1000px;
background-color: orange;
}
.right{
width: 30%;
position: fixed;
right: 0;
height: 500px;
background-color: gray;
}
.check{
position: absolute;
top: 900px;
}
</style>
<body>
<div class="right">
<h2>send an email</h2>
</div>
<h1 class="check">checkin the view</h1>
</body>
</html>
values are to get an idea, change those as your need.
What is the effect of including the following CSS? Initially this may seem like a silly question, but bear with me. I have the following page. Nothing too complicated, just a fixed header at the top with the h1 centered horizontally inside the header div. In a browser this works perfectly. However, this is to be used inside a phonegap 2.9.0 app.
On a nexus 4, when the screen rotates, the h1 is no longer centered horizontally unless the "orientations from js" css is included. But I don't even have the class in the #media selector in my HTML page at all. Admittedly I copied the orientation css from jquery mobile's css file, but only to understand how they were able to get their h1 to always center even upon device orientation change. I am not using jquery mobile.
Can someone please explain this mystery?
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1">
<style>
/*CSS WITH THE CORRECTING EFFECT*/
#media screen and (orientation: portrait){
.nonExistantClass {}
}
/* OR THIS ONE! */
#media screen and (orientation: landscape){
.anotherNonExistantClass {}
}
/*END CSS WITH THE CORRECTING EFFECT*/
.header h1{
font-size:1.4em;
margin: 0 30%;
}
.header {
left: 0;
right: 0;
width: 100%;
top:0;
position: fixed;
z-index: 1000;
background:black;
color:white;
height:2.4em;
line-height:2.4em;
text-align:center;
}
</style>
</head>
<body>
<div>
<div class="header">
<h1>Title</h1>
</div>
</div>
</body>
</html>
UPDATE:
I have narrowed it down a bit. My initial question was about classes ui-mobile and ui-page. However the same CSS from before with changed class names has the exact same effect.
Further, I only need one of the two #media selectors to exhibit the mentioned behaviour. I have updated my question.
My answer, unless someone can correct me, is that this is simply a bug in phonegap or its implementation on Android, and that by including one of those media selectors I am forcing the browser view of the app to somehow do a width calculation that it is supposed to be doing in any case.
I wonder if the people behind jQuery knew this or just coincidentally happened to have CSS that corrected the bug...
I'm trying to recreate something like they've got over at gimmebar.com.
When you click an image, the content current page slides out left and fades out. The target page fades in and slides in from the right.
I've tried a couple of things, like creating two divs in a container with a width of 200% and scrolling the content in to view and using JqueryUI and slideing the divs.
The scrolling failed with the divs not moving at all and srollLeft always being 0 no matter what.
The slide worked somewhat better but to me it seems like they aren't run simultaneously.
The second div just pops in to existence instead of nicely sliding in right behind the first.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slide demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<style>
.container {
width: 100%;
float: left;
height: 800px;
}
#one {
background-color: red;
}
#two {
background-color: #333;
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<div class="container" id="one"></div>
<div class="container" id="two"></div>
<script>
$( document ).click(function() {
$("#one").hide("slide", { direction: "left" }, 1000);
$("#two").show("slide", { direction: "left" }, 1000);
});
</script>
</body>
</html>
It seems like it should be so easy to achieve but I'm stuck.
Take care.
Edit:
I kind of got it to work as you can see in this fiddle.
The slide is there but I can't see no fade.
There also might be a better way of achieving this but I'm pretty satisfied with not having to load a third lib/plugin just to slide a div.
http://webadvent.org/2012/css-sliding-panels-by-bedrich-rios
Found a tutorial written by their developer. Think that would count as the solution.
A pure javascript solution: in the CSS:
div.wrap {visibility: hidden; position: absolute; overflow: hidden;
top: 0; left: 0; width: 100%; height: 100%}
div.wrap div.newContent {visibility: visible; position: relative; left: 100%;}
in the HTML:
<div class="initContent">
This is the content that is initially displayed
</div>
<div class="wrap">
<div class="newContent">
Put the content you want to be revealed here
</div>
</div>
The newContent div is initially hidden because its left edge is at the right edge of its parent (wrap) div, and the CSS tells the browser to hide any content that overflows the parent div.
Then to reveal the hidden content set a timer that progressively decreases the style.left for the inner div from 100% to 0% and increases the opacity from 0 to 1. I made a class for opening/closing swipey menus that could be adapted slightly to do this. (EDIT : a newer version)
i would recommend you use this jQuery script i used not so long ago in a website and it worked like a charm its called CODA SLIDER, it was made by Kevin Batdorf and the installation its barely 5 lines of code.
Good luck