Horizontal scrolling with sticky div elements - javascript

Im trying to do a horizontal navigation with some fixed/sticky elements.
When the user scroll the page, some divs have to remain stuck on the left edge.
Here a fiddle of what i want to do :
http://jsfiddle.net/rQUeL/
css
.container>div {
display:block;
float:left;
}
.container {
height:100%; display:block; background:grey; float:left; width:2000px;
}
.cover{
width:25%; height:100%; background:blue; }
.menu{
width:90px; height:90px; background:green; margin-left:100px; }
.menu.fixed{
}
.cover.fixed{
}
.content{
width:500px; height:100px; background:red; }
<div class="container">
<div class="cover" >
<div class="menu">Menu</div>
</div>
<div class="content">content</div>
When the green square reach the left edge, the green and the blue elements have to be fixed , and the red content go below.
I believe it can be do jQuery...
Thank you for your help.
Sebastien

You basically change the class when the scroll length is above a certain number (in this case margin-left from .menu)
$(window).scroll(function () {
var sl = $(this).scrollLeft();
if (sl > 100) { // 100 is margin-left from .menu
$('.menu').addClass('fixed');
$('.cover').addClass('fixed');
} else {
$('.menu').removeClass('fixed');
$('.cover').removeClass('fixed');
}
});
PS: I have no idea what you want with the red element
FIDDLE

I had the same issue and couldn't find any solutions using CSS alone. so I made jQuery plugin that solves this issue. You can find it here.
Well, I had a great gif here demonstrating what it does but SO doesn't support it. You'll have to click this to see it.
Now, before you yell at me, let me yell at you first. This is a BYOCSS. So if you're looking for something that will take care of the CSS for you, keep looking. All you have to do is style the header element in an absolute position.
This plugin is still in development and needs some improvements. It's kinda jittery when you scroll. You can ease the jittering with a CSS3 transition: 90ms;
This is just a starting point, if you would like to contribute to it, fork it and see what you can do.

Related

How can I smoothly transition in a div on hover? [Tumblr Updates Tab]

I am sure this has been answered before, but I am not sure where to look for it, nor how to really word the question. But basically, I am creating an updates tab for a tumblr theme and I'm curious as to how make a div smoothly transition in while hovering over a parent div, if that makes sense.
Essentially I would like the div to transition in smoothly when I hover over the tab like it does when I click on a tab in my updates tab in my blog. However this tab was created using a tutorial that used a jquery code to create the smooth opening effect, and I don't know anything about jquery or javascript on my own.
I have the general idea of how to make a div show only when you hover over the parent element by using display:none and display:block... but it doesn't transition in smoothly, and as I've read there is no way to do so with CSS.
I have tried playing with height and opacity as well, but while it was a bit smoother, it was a rather messy transition with dealing with text and borders of the div I'm trying to show and hide.
Basically what I am asking is how I can create the same effect in my blog's updates tab that opens and closes when clicking on the tab, but using hover rather than click. I would love for the div to show when I'm hovered over the tab, as well as when my mouse is within the containing div, but close once my mouse leaves the tab. Sorry if that sounds confusing.
Here is the CSS:
#tab{
margin:auto;
}
.tab{
margin-top:0px;
margin-bottom:2px;
margin-left:-5px;
margin-right:-5px;
padding:7px;
border:1px solid #000000;
text-align:center;
}
#tab:hover .contents{
display:block;
}
.contents{
display:none;
margin-top:3px;
margin-bottom:3px;
margin-left:10px;
margin-right:10px;
padding:5px;
border:1px solid #000000;
text-align:center;
font-size:11px;
}
Here is the HTML for that CSS:
<div id="tab">
<div class="tab">Tab</div>
<div class="contents">
Tab Contents.
</div>
</div>
Jquery/ or javascript? From the tutorial from my blog's updates tab:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".inside").hide();
$(".label").click(function(){
$(this).next(".inside").slideToggle('slow');
});
});
</script>
You can use CSS3 transition-property to add 'smooth' effect. The only 'problem' with that , it doesnt work on IE9 and earlier versions. You can see example of that: here
You can probably do it like this. Use opacity instead for the display and transition. I added some pointer-event and make it none so once it is hidden, by the opacity, you can't interact it, which act like display: none.
#tab{
margin:auto;
}
.tab{
margin-top:0px;
margin-bottom:2px;
margin-left:-5px;
margin-right:-5px;
padding:7px;
border:1px solid #000000;
text-align:center;
}
#tab:hover .contents{
opacity: 1.0
}
.contents{
opacity: 0.0;
margin-top:3px;
margin-bottom:3px;
margin-left:10px;
margin-right:10px;
padding:5px;
border:1px solid #000000;
text-align:center;
font-size:11px;
transition: opacity 100ms ease-in-out;
pointer-events: none;
}
As an alternative, if the CSS3 transition does not work, you can try this:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".inside").hide();
$(".label").click(function(){
$(this).next(".inside").slideToggle('slow');
});
$(document).on("hover", ".label", function(){
$(this).next(".inside").slideToggle('slow');
});
});
</script>

JQuery, keep inner <div> orginal position on animation of container <div>

I'm building a small website, and i'm having an issue with jQuery animation,
Basically i have placed a small text (one character div) inside a circle (another div), and i want it to grow when the user hovers over it while keeping the inner div (text) at the original position, the circle will shrink back to original size upon mouseleave() event.
The growing/shrinking part is working quite good, the problem is with the inner text which changes position upon mouseenter().
Here's the HTML
<body>
<div class="steps">
<div id="one" class="number">
<div id="num-text">
<p><strong>1</strong>
</p>
</div>
</div>
</div>
</body>
with 'steps' serving as a container and 'number' the actual circle !
Here's a link to the JSFiddle of this question: http://jsfiddle.net/Rockr90/hZSKA/
Thank you !
Edit:
Actually, the flickering only happens on Chrome, the example with CSS3 works on IE and FireFox as expected, maybe it has something to do with webkit ?
This is possible with CSS only! You dont need jQuery for this and I will explain how to do it with this example. I've used display table for the circle so that we can use display table-cell for perfectly centered text
HTML
<div class="circle">
<p>1</p>
</div>
CSS
.circle {
position:relative; //set up a position, not needed, but for example
top:100px;
left:100px; // width and height
width:100px;
height:100px;
display:table; // display table for centered <p> with table-cell
background-color:blue;
border-radius:50%; // make it a circle!
-webkit-transition: all 0.5s; // transition
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.circle:hover {
margin-left:-10px; // on hover we will increase the height and width
margin-top:-10px; // we will also set the margin to - to make it stay on the same spot, +20 in height and width means -10 in margin
width:120px;
height:120px;
}
.circle p {
display:table-cell; // display table-cell magic
vertical-align:middle; // put the text in the middle!
text-align:center;
font-size:2em;
color:white;
}
FIDDLE
http://jsfiddle.net/n6D46/
If you give #num-text a height, you can vertically align it to the center using the absolute positioning you already have on it:
#num-text {
position:absolute;
text-align:center;
color:#eee;
font-size:24px;
width:100%;
height: 24px;
top:50%; margin-top:-12px; }
See fiddle here: http://jsfiddle.net/hZSKA/1/
As a side note, it's probably possible to do this same effect using CSS3 but that may not be backwards compatible with older browsers.
A quick (but rough and tumble) fix would be to also animate #num-text:
function () {
$(this).animate({
height: '-=10px',
bottom: '-=5px',
width: '-=10px'
}, 50);
$('#num-text').animate({'top': '-6px'}, 50)
});
});
JSFiddle: http://jsfiddle.net/hZSKA/5/
Although I'm sure there will be better answers.
EDIT: whoops, linked to the wrong JSFiddle.

How can I get Chrome to resize this div when the padding changes?

Update: added css transitions on fiddles to make it clearer
When the padding is removed from this div via javascript, Chrome doesn't resize the content to fit (i.e., the red div doesn't cover the yellow, it stays the same size):
http://jsfiddle.net/XDchs/4/
Likewise, if padding is added, the content is pushed outside of the div:
http://jsfiddle.net/XDchs/3/
Firefox resizes as I'd expect. Does anyone know why, and how to fix it?
HTML:
<div id="outer">
<div id="inner">
<div id="content">blah</div>
</div>
</div>
CSS:
#outer {
background-color:blue;
width:300px;
margin:0 auto;
}
#inner {
padding-left:100px;
margin:2px;
background-color:yellow;
-webkit-transition:padding-left 2s;
-moz-transition:padding-left 2s;
}
#inner.no-padding {
padding-left:0;
}
#content {
background-color:red;
}
JavaScript:
$(document).ready(function() {
$("#inner").addClass("no-padding");
});
I have no idea why Chrome appears to behave incorrectly, but you can work around with resetting the width:
#inner.no-padding {
padding-left:0;
width: 100%;
}
I ended up fixing this by setting the content's width to 100% via javascript after adding the CSS class: http://jsfiddle.net/XDchs/6/
$("#content").width("100%");
I couldn't find a CSS solution that completely worked.
Also, I filed this as a Chrome bug: https://code.google.com/p/chromium/issues/detail?id=171060

Fluid resizable image with infinite horizontal scroll (REV. 2)

I have coded a site with a simple horizontal "nowrap" css with img floated side by side. I have also hide the scrollbar away. The side scroll can be done by normal vertical mousewheel scrolling (see my project url
Because the images is all in big resolution of 1400x850px, i wanted to create a site that that will scale the images according to the browser size. Currently all the images are in max-width:100%, my aim is to scale them below that percentage when the browser is smaller.
I tried using max-width:100% with both width and height in auto. It not working.
I try using jquery fluid images script, they are not working as well due to "nowrap"
Below are the main code i am using:
#content {
width:5600px;
overflow-x: auto;
white-space: nowrap;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
#portfolio img {
float:left;
display:inline;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
This is the link of my project: http://credencepartners.com/demo02/
This is the result i trying to produce (for example please see the comments): http://credencepartners.com/demo02/interface/scene01.jpg
Do i need to implement javascript on this or CSS is possible for this scenario?
UPDATES / 10th Aug 2012
Thanks to Corey for the heads up, i have updated my demo02 link. The problem now is just adding the texts below the images. I tried using a div class to combine the text and images together, the result causes the images to be be non-fluid again. Now i need help making a fluid and re-sizable div tag.
GOALS
Knowing that building a typical horizontal side scrolling website is quite straight forward. The main problem i have is only the fluid resizable images at the top. I am pretty new that fluid/responsive layout and hope the gurus here can enlighten me :)
Use this CSS:
body, html {
width:100%;
min-height:100%;
height:auto !important;
}
#content {
width:100%;
height:100%;
position:relative;
}
#portfolio {
width:100%;
height:100%;
position:relative;
}
#portfolio ul{
width:100%;
height:100%;
display:block;
white-space:nowrap;
overflow:auto;
list-style:none;
padding:0;
margin:0;
text-align:center; /*in case not enough images to create a scroll*/
}
#portfolio img{
width:auto;
height:100%;
display:inline-block;
position:relative;
}
And lay out your html like this:
<div id="content">
<div id="portfolio">
<ul>
<img src="src.jpg" />
<img src="src.jpg" />
<img src="src.jpg" />
</ul>
</div>
</div>
I tried a little and found out:
You need to remove the height and width-Tag from the images
You set the height of the "portfolio"-div to the window-height using jQuery/JavaScript
That must be all, hope I understood what you meant

How to centre and scale up/down image within a resizing DIV

I have a DIV that is changing size depending on the browser window. I have an image inside of it which in effect will essentially fill up the entire browser window, and I need it to resize without stretching out of proportion when the window gets too wide or too long.
Additionally I need to have the image centred so you see the 'sweet spot' of the image when it becomes too big for the browser window.
I've been searching for ages and trying many different things but I can't work it out for the life of me. Perhaps it could be solved with Javascript or jQuery?
This is the CSS I have so far of the DIV id and the IMAGE class:
#VisitUsSlides {
height:100%;
width:100%;
position:absolute;
top:0px;
left: 0px;
}
.resizingImage {
width:100%;
min-width:100px;
min-height:100%;
position:fixed;
top:0;
left:0;
}
It's scaling up and down but starts to 'squash' horizontally when the window gets to thin, and it isn't centering.
Give it a try
<html>
<head>
<style type="text/css">
div
{
width:100%;
height:100%;
background-image:url('sample.jpg');
background-repeat:no-repeat;
background-attachment:fixed;//**Edit: Add this and check**
background-size:cover; //Edit2: Add this and check
background-position:center;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
Hope this solves your problem.
assuming the div have an id named
imageholder
#imageholder{width:500px;height:500px;position:relative;}
#imageholder>img{width:90%;height:90%;position:absolute;z-index:10;top:5%;left:5%;}
hope that helps
also while re-sizing the div. set the image max-height and max-width to its original dimension.
img {
margin : 0 auto;
display:block;
}
give it a try.
position your div as you want.
Try this JavaScript:
http://jsfiddle.net/Teak/6yxcG/
I'm not sure it's what your looking for but it could be expanded/edited, to be better. I'm not completely certain about what it is your after.
Edit: Try this full page version: http://www.teaksoftware.com/html/
There's a CSS3 property but i'm not sure about the support it has.
.resizingImage {
height: 100%;
width: 100%;
object-fit: contain; /*OR*/
object-fit: fill; /*there's also an object-position property*/
}
This prevents the image from being stretched.
Given that it's only ONE line of CSS you can try it out.

Categories

Resources