So this post might get lengthy but I'm stuck with iScroll. What I'm doing is populating my list with articles and when one gets clicked, I'm sliding in a div over the list to display the article. That part works but what doesn't is when I scroll through the article and get to the end, it keeps scrolling the list with articles. You can have a look here (the site is in russian but click on an article and scroll all the way to the bottom). Here's my entire code:
<head>
<style>
body{
padding: 0;
margin: 0;
border: 0;
}
#header{
position:fixed;
top:0;
left:0;
height:100px;
width: 100%;
background-color: black;
}
header{
position: absolute;
z-index: 2;
top: 0; left: 0;
width: 100%;
height: 50px;
}
#wrapper{
position: absolute;
z-index: 1;
width: 100%;
top: 52px;
left: 0;
overflow: auto;
}
#container{
position:fixed;
top:0;
right:-100%;
width:100%;
height:100%;
z-index: 10;
background-color: red;
overflow: auto;
}
#content{
margin:100px 10px 0px 10px;
}
</style>
</head>
<body>
<header>Main News</header>
<div id="wrapper">
<ul id="daily"></ul>
<ul id="exclusive"></ul>
<ul id="must"></ul>
<ul id="main"></ul>
<ul id="ukr"></ul>
<ul id="nba"></ul>
<ul id="euro"></ul>
</div>
<div id="container">
<div id="wrapper2">
<div id="header">
<button onclick="hide();">Back</button>
</div>
<div id="content"></div>
</div>
</div>
<script src="js/zepto.js"></script>
<script>
//AJAX requests to fill the li's...
function sayhi(url){
$('#container').animate({
right:'0',
}, 200, 'linear');
$.ajax({
url: serviceURL + "getnewstext.php",
data: {link: url},
success: function(content){
$('#content').append(content);
}
});
}
function hide(){
$('#container').animate({
right:'-100%'
}, 200, 'linear');
$('#content').empty();
}
</script>
<script src="js/iscroll-lite.js"></script>
<script>
var myScroll;
function scroll () {
myScroll = new iScroll('wrapper2', {hScroll: false, vScrollbar: false, bounce: false});
myScroll2 = new iScroll('wrapper', {hScroll: false, vScrollbar: false});
}
document.addEventListener('DOMContentLoaded', scroll, false);
</script>
</body>
Is there a way to scroll on the div container, or content, or wrapper2 without scrolling the wrapper div with the list of articles? Maybe I'm not using iScroll correctly? The same problem happens on Android and iPhone.
EDIT 1:
I set the wrapper position to fixed. Now the div container is the only one scrolling but the list of articles isn't scrolling...I added another iScroll to the wrapper but it's not working. Any advice here?
EDIT 2:
So I dropped iScroll all together and trying with CSS instead. To my onclick events I added:
$('body').css('overflow', 'hidden');
And when the close button is clicked I changed the overflow to auto. Now this stops the body from scrolling in a browser but not on mobile!!! How can I make it do the same thing on mobile???
I finally got it to work. What I needed to do is add another div inside the wrapper div. I'll share the code so hopefully it helps someone else Here's what the new code looks like:
<body>
<!--Added scroller div(without iScroll it works also...just make two divs so the body isn't scrolled but the second div is scrolled-->
<div id="wrapper">
<div class="scroller">
<header>Main News</header>
<ul id="daily"></ul>
<ul id="exclusive"></ul>
<ul id="must"></ul>
<ul id="main"></ul>
<ul id="ukr"></ul>
<ul id="nba"></ul>
<ul id="euro"></ul>
</div>
</div>
<div id="container">
<div class="scroller">
<div id="header">
<button onclick="hide();">Back</button>
</div>
<div id="content"></div>
</div>
</div>
<script>
$('body').on('touchmove', function(e){
e.preventDefault();
});
//prevents native scrolling so only iScroll is doing the scrolling
//after the AJAX call to get the content, declare your iScroll variable
var myScroll;
myScroll = new iScroll('wrapper');
setTimeout (function(){
myScroll.refresh();
}, 2000);
//set time out to give the page a little time to load the content and refresh your iScroll variable so it takes in the entire content of the wrapper div
var myScroll1;
myScroll1 = new iScroll('container');
//I defined my second iScroll variable here so I can destroy it in the next part...
//function sayhi(url) stays the same but in success of AJAX looks like this:
success: function(content){
$('#content').append(content);
myScroll1.destroy();
myScroll1 = null;
myScroll1 = new iScroll('container');
setTimeout (function(){
myScroll1.refresh();
}, 2000);
}
//when the div slides on the screen and content gets loaded, destroy your second iScroll
//variable, set it to null and define it all over again so it takes in the entire content
And that's it. Works perfectly now with two divs which need to use iScroll on the same page. Hope the explanation is clear enough and helps someone!!!
Related
So all the content on my page is loaded from an AJAX call.
I thought that if I simply put my isotope in a document ready function it would work but it does NOT work:
$(function(){
container = $('#content');
container.isotope({
itemSelector: '.tile',
masonry: {
columnWidth: 100
},
});
});
The AJAX call succeeds but nothing appears and the page remains blank. Any idea why? I get no errors.
I did however manage to get my isotope to work by using the jquery .then method after making my AJAX call. Here is an example where Isotope works:
function grabNews(){
var $content = $('#content');
$.ajax({
type:'GET',
url:'json/dummy.json',
success: function(news) {
for(i=min; i<max; i++){
$content.append('<div class="tile x150x100"><h3>' + news[i].headline +'</h3><br>' + news[i].text + '</div>')
}
}
max=max+50;
min=min+50;
},
error: function () { alert('Loading Failed...');
}
}).then(function(){
container = $('#content');
container.isotope({
itemSelector: '.tile',
masonry: {
columnWidth: 100
},
});
});
}
.background {
background-color: lightblue;
width: 1000px;
height: auto;
margin: auto;
overflow: auto;
}
.tile {
background-color: white;
border: 1px solid black;
overflow: hidden;
float: left;
margin: 10px;
padding: 10px;
}
.x300x300 {
height: 300px;
width: 300px;
}
.x300x200 {
height: 300px;
width: 200px;
}
.x200x200 {
height: 200px;
width: 200px;
}
.x150x100 {
height: 150px;
width: 100px;
}
<body>
<div id="content" class="background">
</div>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/isotope.js"></script>
<script src="js/controller.js"></script>
</body>
So using the .then method works UNTIL I scroll to the bottom of the screen and make another AJAX call to load more content. The new content does not enter the Isotope container. It is simply ignored.
I did find a quasi solution to my problem by inserting:
$('#content').isotope('destroy');
Into
.then(function(){
$('#content').isotope('destroy');
container = $('#content');
container.isotope({
itemSelector: '.tile',
masonry: {
columnWidth: 100
},
});
});
I put it in my jquery .then function and the isotope container updates and recognizes new objects. So success! BUT then my browser scrolls back to the top! Why?
How can I scroll down and update my isotope container while making ajax calls?
Please help!
I will give you a brief example to implement the isotope js work upon the ajax call and append to your isotop container.
first add the live CDN for isotop js:
<script src="https://unpkg.com/isotope-layout#3/dist/isotope.pkgd.js"></script>
<!-- or -->
<script src="https://unpkg.com/isotope-layout#3/dist/isotope.pkgd.min.js"></script>
lets assume we have the div with class lets say, "isotop": For Example:
<div class="isotop">
................
</div>
Now there may be some content inside this isotop div with class lets say, "isotop-item": For example:
<div class="isotop">
<div class="isotop-item">
<p>Item 1</p>
</div>
<div class="isotop-item">
<p>Item 2</p>
</div>
<div class="isotop-item">
<p>Item 3</p>
</div>
</div>
Also we have a button on which if clicked then the content should be loaded inside isotop div. For example:
<div class="btn_load">
Load More
</div>
Now if you want to append the content that you get from ajax call then it is as simple as you want:
<script type="text/javascript">
$(document).ready(function(){
$('.btn_load').on('click',function(){
var $grid = $('.isotop').isotope({
itemSelector: '.isotop-item',
});
$.ajax({
url : '<?php echo site_url('Items/addMoreItems'); ?>',
type : 'post',
data : 'offset='+offset,
success: function(res){
var $items = $(res);
$grid.append($items)
.isotope('appended',$items);
}
});
});
});
</script>
Note: The res in success must be:
<div class="isotop-item">
<p>Item 3</p>
</div>
<div class="isotop-item">
<p>Item 4</p>
</div>
And for sure you will get the isotop content will all of the isotop properties.
the issue is solved already I assume.
Anyway you can tell isotope about your new items in the AJAX succes callback, see isotope documentation under functions -> appended
Update for
Wordpress, Vue, Internet Explorer 11
Example has lazyload code added.
I just found out an alternative fix: I created a canvas element with the correct sizes instead of only loading and placing the images. This canvas is used as a placeholder for ratio calculations. The images sit with position absolute on top.
Caveat: you need to know the image sizes/ratio. In my wordpress case they are embedded in the json call.
It even works with Internet Explorer 11.
<figure>
<canvas
:width="post.image.sizes['medium-width']"
:height="post.image.sizes['medium-height']"
></canvas>
<img
class="lazyload"
:src="post.image.sizes.thumbnail"
:data-src="post.image.sizes.medium"
:alt="post.image.alt"
:width="post.image.sizes['medium-width']"
:height="post.image.sizes['medium-height']"
>
</figure>
CSS:
figure,canvas { position: relative; }
img { position: absolute; top:0; left:0; }
Okay so I have a page that uses javascript to fix the header to the top of the page (thus removing the banner) when you scroll past the bottom of the banner (about 200px down page).
On this website I've been using containers that have the position:inherit; property set to contain each part of the page. These then have a relatively positioned element inside them so I can place all my absolutely positioned elements where I like.
My problem is that id="content" keeps jumping to the top of the page when the javascript changes id="header" to position:fixed;
See here: www.obsojb.com
I have tried absolutely positioning id="content" and setting it's top value but it wouldn't work and I'm a bit stuck.
Here is a very simplified version of the HTML:
<body>
<div id="page"> <!--inherit-->
<a id="banner"></a> <!--inherit-->
<div id="header"> <!--inherit-->
<div id="lang"> <!--relative-->
<ul>...</ul> <!--inherit-->
<other divs> <!--absolute-->
</div>
<div id="nav"> <!--relative-->
<ul>..</ul> <!--inherit-->
<a id="userbutton"></a> <!--absolute-->
</div>
</div
<div id="content0"> <!--inherit-->
<div id="content"> <!--relative-->
<PAGE CONTENT> <!--absolute-->
</div>
</div>
<div id="footer"></div>
</div>
</body>
Here is my javascript:
var bannerheight // Glob var
window.onload = function() {
window.bannerheight = $('#bannerimg').height();
checkOffset();
};
window.onscroll = function(oEvent) {
checkOffset();
}
function checkOffset() {
if (window.pageYOffset >= window.bannerheight) {
document.getElementById("header").style.position = "fixed";
document.getElementById("banner").style.display = "none";
document.getElementById("padding").style.height = window.bannerheight+"px";
}
else {
document.getElementById("header").style.position = "inherit";
document.getElementById("banner").style.display = "block";
document.getElementById("padding").style.height = "0px";
}
}
and here is the relevant CSS:
#page {
margin:0px auto;
}
#lang {
position:relative;
}
#nav {
position:relative;
margin:0px auto;
}
#content0 {
height:800px;
}
#content {
position:relative;
margin:0px auto;
}
Try giving the content div a "margin-top" and set it to the number of pixels that the page is "jumping". Then when you scroll up and reset the position, undo the margin-top back to zero.
I've tested this and it solved my jumping issue.
I'm not sure what you expect as output but position: fixed works on the document, globally. It not only ignores element flow (like position: absolute) but it also ignores scrolling.
position: absolute is relative to it's offset parent which can be an item with position: relative.
You typically only want to use position: fixed if something needs to stick to the window, like a little popup that scrolls with as you go down the page. The Facebook header is a good example. Their header bar is fixed to the top of the window and stays there even if you scroll.
I am creating my product pages by using the object tag code, but every time I click the "view" button, the next page is staying at the same position of previous page which I just viewed. How can I add functionality that will let me view from the top of page every time I click the "view" button?
<div id="container" class="clearfix"><!--! end of #sidebar -->
<div class="holder"></div>
<div id="content" class="defaults"><!-- navigation holder -->
<div id="title2">Office Section</div>
<!-- item container -->
<ul id="itemContainer">
<li>
<div id="product">
<div id="title">FuBang®</div>
<div class="imageOuter" style="margin:0">
<a class="image" href="officesection010.html">
<span class="rollover" ></span>
<img class="imgborder" src="product/officesection/010.jpg" width="165" height="165" />
</a>
</div><br />
<div id="text">Sofa </div><br />
<div id="button">
View Details
</div>
</div>
</li>
</ul>
<br />
<div id="title2"></div>
<div class="holder"></div>
</div>
</div> <!--! end of #content -->
</div> <!--! end of #container -->
When I click the "View Details" button at a specific position "x" here: http://postimg.org/image/vgs0lwhtr/
The next page shows the same position "x", but I want it to jump to the top of page:
http://postimg.org/image/vn80e2lph/
Using Javascript:
document.body.scrollTop = document.documentElement.scrollTop = 0;
Using jQuery:
$(function() {
$('body').scrollTop(0);
});
jQuery(document).ready(function($){
$(window).scroll(function(){
if ($(this).scrollTop() > 50) {
$('#backToTop').fadeIn('slow');
} else {
$('#backToTop').fadeOut('slow');
}
});
$('#backToTop').click(function(){
$("html, body").animate({ scrollTop: 0 }, 500);
//$("html, body").scrollTop(0); //For without animation
return false;
});
});
please refere this, may this help
Sometimes placing scroll to body doesn't work if your current content is generated through jQuery (as it was in my case). In such situation you can just do following.
$(function() {
$('html').scrollTop(0);
});
A small issue with Subhash's jQuery solution is that you must call this code within $(document).ready() in order for your $('body') selector to work. The ready event may not fire before parts of your page have been rendered to the screen.
An better approach is to simply modify the user's location as a work-around to this browser 'feature':
//Above all of your $(document).ready(...) code
document.location = "#";
Simple HTML solution for jumping between page parts
// Place a tag like this where you would like to go
// in your case at the top
<a name="top"></a>
// you will reach there by click of this link better use an image reach their by clicking on this we can also use an image, align in right
last
Back to top button, works in all browsers.To change the scroll speed simply change the x in counter -= x here x = 10
function scrollToTop(){
var myBody = document.body;
var id = setInterval(secondFunction,1);
var height = window.pageYOffset;
var counter = height;
function secondFunction(){
if(window.pageYOffset == 0){
clearInterval(id);
}
else {
if(!!navigator.userAgent.match(/Trident/g) || !!navigator.userAgent.match(/MSIE/g)){
counter -= 10;
counter--;
document.documentElement.scrollTop = counter;
}
else {
counter -= 10;
counter--;
myBody.scrollTop = counter;
}
}
}
}
body {
height: 5000px;
margin: 0;
padding: 0;
}
.backToTop {
position: fixed;
/* Fixed at page */
top: auto;
bottom: 20px;
left: auto;
right: 20px;
background-color: crimson;
color: white;
padding: 5px;
cursor: pointer;
}
header {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: black;
}
<!-- back to top button -->
<span class="backToTop" onclick="scrollToTop()">TOP</span>
<!-- Header -->
<header>
</header>
Assign an id="#body" and tabindex in the <body> tag
<body id="#body" tabindex="1">
and use jquery focus()
$(function() {
$("#body").attr("tabindex",-1).focus();
}
You can use this method:
function gototop() {
if (window.scrollY>0) {
window.scrollTo(0,window.scrollY-20)
setTimeout("gototop()",10)
}
}
I'm trying to fix a div at the top of a layout that will contain a blog post's information (date posted, # of notes, permalink, etc.) and change this information as you scroll down past posts. I'm not sure if it would require any kind of javascript or just some intricate positioning using css. Here's how I would layout the posts. How can I get the specific post information from each post to change within that fixed div as the posts scroll past it?
#container {
width: 960px;
margin: 0px auto;
}
#changingpostinformation {
position: fixed;
margin: 0px auto;
}
<div id="container">
<div id="changingpostinformation">fixed post information div that's information changes as each post below reaches the top of #container</div>
<div class="post">
<h3>Post Title>
<p>This is the body of this example post.</p>
</div>
<div class="post">
<h3>Post Title>
<p>This is the body of this example post.</p>
</div>
</div>
Like #ShankarSangoli says, you should add top: 0;, and also left: 0; to #changingpostinformation (or other values to position it however you like)
You'll need some javascript to find out which post appears first on the page and show its info.
$(function() {
$(window).bind('load resize scroll', function() {
var doctop = $('body').scrollTop();
// loop over all posts, from top to bottom
$('.post').each(function() {
if ($(this).position().top > doctop) {
put_postinfo_in_fixed_div($(this));
return false; // breaks from the loop
}
});
});
});
This function runs once when page is loaded, and also when the window is resized or scrolled.
You need to implement put_postinfo_in_fixed_div() which gets an post div, and does what it says.
Use this CSS:
#changingpostinformation {
position: fixed;
top: 0px;
}
I want to implement an animation, image there are two divs
D1 | D2
At first D2 is in screen(with 100% width), D1 is invisible(outside of screen).
I want an animation that, D2 moves out to right, outside of screen.
D1 moves from left to right, finally occupies the screen(replace D1).
If you saw how Groupon animate when register user, you may understand what I mean...
Thanks.
EDIT Ok.. I wanted to make a general solution (by animating the wrapper margin). Clearer code and more customizable => http://jsfiddle.net/steweb/rWbFw/
markup:
<div id="mask">
<div id="wrapper">
<div class="full" id="div1">hey there I'm the first div</div>
<div class="full" id="div2">hey there I'm the second div</div>
<div class="full" id="div3">hey there I'm the third div</div>
<!-- add as many 'full' divs as you want -->
</div>
</div>
css:
#mask{
width:100%;
overflow:hidden;
position:relative;
}
#wrapper{
width:100%;
height:300px; /* optional! */
}
.full{
float:left;
height:300px; /* optional! */
}
#div1{
background:green;
}
#div2{
background:white;
}
#div3{
background:red;
}
js:
var utils = {
maskWidth : $('#mask').width(),
currIndex : 0,
setWidths : function(){
//setting maskWidth
utils.maskWidth = $('#mask').width();
//setting wrapper width
$('#wrapper').css('width',$('.full').length * utils.maskWidth);
//setting 'full div' width
$('.full').each(function(index){
$(this).css('width',utils.maskWidth);
});
//setting curr wrapper margin (for window resize)
$('#wrapper').css('margin-left',-(utils.currIndex*utils.maskWidth));
}
}
$('.full').click(function(){
utils.currIndex = $(this).index()+1; //current elem index (for margin calc)
if($(this).next().size() == 0){//if is the last, reset
utils.currIndex = 0;
$('#wrapper').animate({'margin-left':0});
}else{ //animation, negative margin of the wrapper
$('#wrapper').animate({'margin-left':-(utils.currIndex*utils.maskWidth)});
}
});
$(window).resize(function() { //on resize, reset widths and margins
utils.setWidths();
});
utils.setWidths(); //first time, set everything
-- OLD --
You could start with something like this: http://jsfiddle.net/steweb/dsHyf/
markup:
<div id="wrapper">
<div class="full" id="div1"></div>
<div class="full" id="div2"></div>
</div>
css:
#wrapper{
width:100%;
overflow:hidden;
position:relative;
height:300px;
}
.full{
position:absolute;
width:100%;
height:300px;
}
#div1{
background:#FF0000;
left:0px;
}
#div2{
display:none;
background:#FFFF00;
}
js:
$('#div2').css('left',-$('#wrapper').width()).show();
$('#div1').click(function(){
$(this).animate({'left':$('#wrapper').width()});
$('#div2').animate({'left':0});
});
$('#div2').click(function(){
$(this).animate({'left':-$('#wrapper').width()});
$('#div1').animate({'left':0});
});
I have tried this with jQuery timer plugin & it is working very well with localhost.
You need to import : jQuery & jQuery Timer Plugin
And then just implement this :
<script type="text/javascript" src="jquery-1.5.js"></script>
<script type="text/javascript" src="jquery.timers-1.2.js"></script>
<script type="text/javascript">
var i=0,j=100;
$('#1').css('width',"0%");
$('#2').css('width',"100%");
l2r();
function l2r(){
var i=0,j=100;
$(document).everyTime(2, function() {
i+=0.10;
$('#1').css('width',i+"%");
j -= 0.10;
$('#2').css('width',j+"%");
}, 1000);
setTimeout("r2l()", 4000);
}
function r2l(){
var i=100,j=0;
$(document).everyTime(2, function() {
i-=0.10;
$('#1').css('width',i+"%");
j += 0.10;
$('#2').css('width',j+"%");
}, 1000);
setTimeout("l2r()", 4000);
}
And your HTML will be :
<div style='width:100%;'>
<div id='1' style='background-color:#333333; height: 100px; float: left;'></div>
<div id='2' style='background-color:#CCCCCC; height: 100px; float: right;'></div>
</div>
Enjoy & correct me if I am wrong.
EDIT : It seems the problem is still with Different browser ! The timeout should be 4000 (as it is set) for Chrome & 10000 for Fire Fox. Let me edit code to recognize browser & set Time Out later, very soon.