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;
}
Related
I have two div in site body.I want to have fixed position to the left div...
but when scrolling to bottom it comes on my contact us div..this is the sample page:http://www.runsensible.com/legal/privacypolicy
here is my code:
.sticky {
position: fixed;
}
<div id="menu-privacy">
<div class="fusion-text">
<p>
– What information we collect from you
– How your information is used
– How your information is shared
– Terms of service
</p>
</div>
</div>
<script>
window.onscroll = function() {myFunction()};
var header = document.getElementById("menu-privacy").getElementsByClassName("fusion-text")[0];
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
What I suggest is instead of having a JavaScript function, we can use a CSS class for it.
NOTE: Based on the requirements of your specification, you can vary the size of width & height. And you can put this as class="fixed" for the div tag containing id="menu-privacy" as you can see below.
.fixed{
position: fixed;
top: 80px;
right: 0px;
width: 100px;
height: 150px;
}
1) give an id to footer or add a wrapper for footer section
2) let your function like this - you need to let condition by footer position
function myFunction() {
if (sticky < footerIdOffset) {// footerIdOffset is an offset for footer section
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
3) you need to subtract margin/gabs between footer and upper section to work in your point truth.
Good luck
I suggest you use position:sticky instead so this effect can be achieved with pure CSS rather than adding javascript. Looking at your site it's rather possible to do this
Here's what you need to do
Remove the javascript that add/remove the sticky class
Add this style in your div with id="menu-privacy", something like this
CSS
#menu-privacy {
position: sticky;
top: 80px;
}
note that you can play around the top value to achieve the gap that you like. Hope this helps!
You can try adding the attribute "z-index" to the contact div.
On "Contact Us" div set (z-index:10) .
I am trying to create a sticky menu using CSS Bootstrap affix and list-group menu.
I manage to get most of it to work except for when the user scrolls down.
When the user scrolls down, the menu seems to take the entire with of the page.
I tried to set it up via data attributes
using something like this
<div class="container">
<div class="row">
<div class="col-md-3" id="leftCol">
<div data-spy="affix">
<div class="list-group list-group-root well">
<a class="list-group-item" href="#introduction">Introduction</a>
<a class="list-group-item" href="#features">Features</a>
<a class="list-group-item" href="#dependencies">Dependencies</a>
</div>
</div>
</div>
<div class="col-md-9" id="mainCol">
Some long text for the body along with some tables.
</div>
</div>
</div>
But the data attribute did not make the menu stick! it just kept it on the top.
So I tried to use JS to get the job done like this
$(function(){
$('#leftCol').affix({
offset: {
top: 100,
bottom: function () {
return (this.bottom = $('.footer').outerHeight(true))
}
}
});
});
I created jsFiddle to show you the current behavior.
How can I fix this affix so when the user scrolls down the menu maintain the same shape?
First of all, you should use either data-attributes or JS.
I updated your jsFiddle. The position of id="leftCol" was changed:
<div class="col-md-3" >
<div id="leftCol">
...
</div>
</div>
and style was added:
#leftCol {
width: 220px;
}
Also, you should add media queries to remove affix from mobile view.
As an "unacceptable" workaround, I set a max width of the menu to 250px like so
.list-group.list-group-root {
padding: 0;
max-width: 250px;
}
I am not sure how to get it to work without adding a max-with the max with should be defined by the parent. In this case class="col-md-3"
UPDATED
javascript to the rescue!
I added the following JS code to solve this problem once an for all.
It basically resize the menu everytime affix.bs.affix event is fired
$(document).on('affix.bs.affix', '#docs-menu', function() {
$(this).width($(this).width());
});
From the docs
affix.bs.affix => This event fires immediately before the element has
been affixed.
Ok I believe I got most of the code working like you want it to. The main changes I made were adding this CSS:
#leftCol {
display: block;
height: auto;
padding: 0;
width: 100%;
}
.navbar-fixed-top-again {
position: static;
top: 60px;
z-index:1031;
}
.navbar-inner {
background: red;
padding: 5px;
}
.affix {
position: fixed !important;
}
and I changed up some of the structure on your HTML:
<div class="container body-content">
<div>made up content to allow the navigation to scroll more before it becomes sticky. This height will need to be set in the data-offset-top which is in the leftCol DIV just below this content. The same will apply if you need to set it for a footer offset.</div>
<!-- new nav section -->
<div class="col-md-3 navbar-fixed-top-again" id="leftCol" data-spy="affix" data-offset-top="80">
<div class="navbar-inner">
<div class="list-group list-group-root well">
*the rest of your code*
</div>
</div>
</div>
</div>
The main problem now is having a sticky navigation menu with variable height. If you notice when you scroll your reading content underneath jumps up and gets hidden. It seems that it is possible to fix this using JavaScript (link to SO question).
Heres the link to your updated Fiddle. Hope that helps.
The issue is the following :
I have a calendar in which the user can create an appointment (using DHTMLX Scheduler Timeline View), the main problem is the Scheduler doesn't support a scrollable view , only fits the schedule into the view.
I Solve the previous problem, creating a div with a FIXED width (in this way can i have a longer horizontal scheduler ) and wrapping it inside a div that allows to scroll horizontally its content.
However , I dont have a clear idea of how to solve the following problem caused :
When the calendar is loaded , you can see which div belongs to its horizontal Row
And when the user scrolls horizontal (to see 7:00 PM for example)
You cannot see in which div with color you need to create the appointment !
So i need something like this, where the div is still visible although the user scrolls horizontally :
I already tried with something like the following :
May be a problem too with the parent container, because it hides the div if the following works maybe ?
.visible-division{
position:relative; /*Because the div with color is inside a table, and i need that still floating in the same row !!*/
float:left;
z-index:9000;/*a higher z-index in case something cover the div*/
}
without any luck ..
My CSS
#calendar-container{
width: 2000px;
}
#calendario {
height: 900px;
width: 100%;
border: 1px solid #cecece;
}
.scrolling_container {
height: 100%;
overflow: auto;
}
And my Markup
<div class="scrolling_container">
<div id="calendar-container">
<div class="dhx_cal_container panel" id="calendario">
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>
<div class="dhx_cal_tab" name="day_tab"></div>
<div class="dhx_cal_tab" name="week_tab"></div>
<div class="dhx_cal_tab" name="month_tab"></div>
<div class="dhx_cal_tab" name="timeline_tab" style="right:280px;"></div>
</div>
<div class="dhx_cal_header"></div>
<div class="dhx_cal_data"></div>
</div>
<div class="well text-right">
<div>
a link
</div>
</div>
</div>
It can be solved via CSS ? Otherwise, Should I apply classes to it in case of scroll event ?
Any help is appreciated, thanks !
This may help you do the trick.
.visible-division{
position:fixed;
width: /* specifiy */
height: /* specify */
top: /* specify */
left: /* specify */
}
.scrolling_container {
height: 100%;
overflow: auto;
}
Though not supported by most browser, you may try sticky position value position: sticky.
Hope this will be helpful, apply this class to the floating div only.
.floating{
position:fixed;
top:20px;
right:0px;
width:80%; /* as required */
}
I'm trying to add an image over some text that I have. This is similar to retailmenot.com's reveal coupon code. When a user clicks on the image the image is removed and reveals the text underneath while simultaneously linking the user to an external url.
The base layer can be as follows:
<div class="base">
<h3>Some text</h3>
</div>
I want to load an image with the following over it when the text is clicked:
<div class="overlay">
<img src="http://example.com/image.jpg"/>
</div>
The height of the base layer with class "base" is variable, so the image has to be resized to fit it. I have a working example where I place the image and then resize it, but this creates issues when javascript may not be enabled as the image fails to be resized and looks messy. I want the script to fall back to just showing the underlying text if javascript is disabled.
How can I add and automatically resize such an overlay on page load using jquery or javascript?
You can do it like this:
$(document).ready(function () {
//Set overlay position and dimension to same as base
$base = $(".base");
$overlay = $(".overlay");
$overlay.offset($base.offset());
$overlay.height($base.outerHeight());
$overlay.width($base.outerWidth());
$overlay.show();
//Hide overlay on click (show hidden text)
$(".overlay").click(function () {
$(this).fadeOut();
});
});
and with css:
.overlay{
/* Hide overlay if no js */
position: absolute;
display: none;
}
Check it out here: JSFiddle
If you can have the overlay in the base, as such:
<div class="base">
<h3>Some text</h3>
<div class="overlay">
<img src="http://example.com/image.jpg"/>
</div>
</div>
You can css this, no need for javascript:
.base{
position: relateive;
}
.overlay{
position: absolute; /* or fixed if scrollbars involved */
display: none;
left: 0;
right: 0;
top: 0;
bottom: 0;
/* or replace right and bottom with: */
/* width: 100%;
height: 100%; */
}
You can now use javascript to toggle visibility:
$('.overlay').fadeIn();
Let your html page has this following code
<div class="base">
</div>
Don't place any code about your image in html page. And then in your jQuery code.
var img = '<img src="http://example.com/image.jpg"/>';
var txt = 'Some text';
$(document).ready(function(){
$(this).find('.base').html(txt).show();
$(this).find('.base').click(function(){
if($(this).html() == img)
$(this).html(txt).show();
else
$(this).html(img).show();
});
});
This will solve your issue.
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!!!