Different backgrounds when scrolling down - javascript

I am inspired by this website - http://henrikljunggren.se/ -
Does anyone know how to get two different backgrounds when scrolling down?

On this site, there are multiple div with the CSS property :
background-attachement: fixed;

This can be easily achieved with the help of css property background-attachement: fixed
If you have say 2 sections like this -
<div class="section-1">
</div>
<div class="section-2">
</div>
then use
.section-1 {
background: url(path-to-your-image);
background-attachement:fixed;
}
.section-2 {
background: url(path-to-your-image);
background-attachement:fixed;
}
This will easily give you the effect.

Related

Issue with overflow:hidden/visible toggle on hover. Gif available in post

As you can see above, I cannot select the overflowed events on the calendar date. It looks like it's because I have the overflow:hidden/visible toggle triggering on the class of the calendar date: '#cell-shell'.
Here is the HTML code for that specific date:
<td>
<div id="09" class="cell-shell>
<div class="date-num">9</div>
<div class="event-wrap>
<span></span> <!--these hold edit buttons when editor is logged in-->
<span></span>
<div id="e1" class="cell-data">Event 1</div>
</div>
<div class="event-wrap>
<span></span>
<span></span>
<div id="e2" class="cell-data">Event 2</div>
</div>
<div class="event-wrap>
<span></span>
<span></span>
<div id="e3" class="cell-data">Event 3</div>
</div>
<div class="event-wrap>
<span></span>
<span></span>
<div id="e4" class="cell-data">Event 4</div>
</div>
... <!-- pattern repeats-->
</div>
</td>
Here is my current relevant CSS:
.cell-shell {
height: 152px;
width: 152px;
overflow: hidden;
}
.cell-shell:hover {
overflow:visible;
}
.event-wrap {
position: relative;
display: inline-block;
font-size: 0;
}
.event-wrap:hover {
opacity: .5;
}
Is there any way through CSS or JS that I can prioritize the '#cell-data' elements? I need to be able to click on those events 6 & 7 and beyond, but once my mouse wanders out of the '9' '.cell-shell' box into the '16' '.cell-shell' box, '16' seems to take over.
EDIT: I added more information as requested by david. I thought it was irrelevant but perhaps not. I added the elements as well as the children below them. I also added in the event-wrap CSS
It looks like it's not because you mouse over 16, but because your mouse went between the event divs, thereby touching the 16 div between the event divs.
See the frame below where you're over an event on top of 16 just before you cross the gap:
The way that hover works is that if the mouse is over any sub-element of the element with hover, that hover CSS will continue to be used. But the moment the mouse leaves the border-box of the sub-element AND is outside of the element with over, the hover CSS will stop working.
I bet that if you're fast and accurate enough, you can get the mouse to clip over the gap between frames and keep it open. But your users might not find that useful. ;P
One method that might fix this would be making sure that the event divs have no space between them. That means no margins separating them.
In order to keep your current visual without having to add too much code, you can do something like the following:
...
<div class="event-wrapper"><div id="e1" class="cell-data">Event 1</div></div>
<div class="event-wrapper"><div id="e2" class="cell-data">Event 2</div></div>
...
...where the event-wrapper class looks like:
.event-wrapper {
margin: 0px;
padding: 0px;
}
Another method might be having the whole date box expand its size, but that might require some changes to how the layout works in order to keep it from messing things up.
Anyway, I hope that helps.
Use z-index to give priority to your cell-data elements over '16'.
Find a sample demo of it's usage below:
https://www.w3schools.com/cssref/pr_pos_z-index.asp
Add CSS property z-index: -1 into your css.
.cell-shell {
height: 152px;
width: 152px;
overflow: hidden;
z-index: -1 // Here
}
.cell-shell:hover {
overflow:visible;
z-index: -1 //Here
}
Hope it will work for you.

How to add background color only to scroll the menu?

I have this page:
link
CODE HTML:
<div class="content-menu">
<div class="navbar navbar-inverse bs-docs-nav" role="banner" id="menu-top">
<div class="navbar-header">
//some code html
</div>
</div>
</div>
the top menu id want to add to scroll CSS class which is presented below
CODE CSS:
.bg-scroll{
background: red;
}
I tried to use the JS code below
CODE JS:
$(window).scroll(function() {
$("#menu-top").addClass("bg-scroll");
});
Can you tell me please what is wrong?code is quite simple ... the scroll function works smoothly but do not add the respective class
Thanks in advance!
The code you have should work, you probably just have an issue with css selector specificity.
ID based CSS selectors like #menu-top have a higher precedence than Class based CSS selectors like .bg-scroll
Try making your CSS selector for .bg-scroll more specific:
#menu-top.bg-scroll { background: red; }
Or to be more reusable:
.navbar.bg-scroll { background: red; }
Using !important will also work but is generally considered a bad practice because it can make debugging more difficult:
.bg-scroll { background: red !important; }
Read more about best practices: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Change slider for horizontal scroll?

i've done a horizontal picture gallery from the here: How do I allow horizontal scrolling only for a row of images and show overflow, without horizontally scrolling the rest of the page?
and i was wondering if there is anyway to change the slider at the bottom to something like a nano slider? Something like this:
I'd really appreciate some help
Use overflow-x: auto; on your container (section in your example)
<section>
<div class="pic-container">
<div class="pic-row">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
<img src="5.jpg">
<img src="6.jpg">
</div>
</div>
</section>​
CSS:
body {
overflow: hidden;
}
section {
/* The width of your document, I suppose */
width:600px;
margin: 0 auto;
white-space:nowrap;
overflow-x: auto;
}
.pic-container {
/* As large as it needs to be */
width: 1500px;
}​
If i understand correctly, you want to change the styling for the scroll bar. If I'm correct, that isn't difficult. you should use Webkit Scrollbars for this. Here's a pretty good article on it.
you would probably want something like this:
::-webkit-scrollbar-track:horizontal {
height: 3px;
background: gray;
}
::-webkit-scrollbar:horozontal {
background: white;
}
I'm not completely sure about it, thought. It's been a while since I've needed to style scroll bars.
note: since this is webkit it won't work in firefox (or maybe explorer, not sure) as far as I know, the only way to do this would be with javascript.

Overlay div with transparent area

I'm trying to achieve an effect on a webpage whereby I have a semi-transparent overlay over all elements on a page, except for one specific div.
This is an example of my page structure:
<div id="d1">
<div id="d2"></div>
<div id="left"></div>
<div id="d3"></div>
<div id="right"></div>
<div id="d4"></div>
</div>
<div id="overlay"></div>
And here is a fiddle of the above in action. I would like the green div (#d3) to be visible on top of the overlay.
Is there any way of achieving this without adding position:absolute to #d3 or modifying the DOM? I am targeting the latest version of Chrome here and am open to Javascript/jQuery solutions if there is no pure-CSS3 solution available
use position: relative for #d3 for the z-index to work
#d3 {
background: green;
z-index: 9999999;
position: relative;
}
Demo: Fiddle
See this answer
For me, the outline property is the simplest way to add an overlay around any element in CSS.
No need of z-index, just add the following code:
.myElement {
outline: 99999px solid rgba(0, 0, 0, 0.5)
}
I created a demo on jsFiddle.
Have a nice day,
Thomas.
This is the explanation of why this works: "The z-index will only work if the position property is set as well."
see http://webdesign.about.com/od/styleproperties/p/blspzindex.htm et.al.

How do I make floated elements resize correctly

I have been trying to figure this out for a while and everything I try fails to produce the result I am after.
So the setup is as follows
HTML
<div class="container">
<div class="icon-holder">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/>
</div>
<div class="icon-holder">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/>
</div>
<div class="icon-holder">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/>
</div>
<div class="icon-holder">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/>
</div>
<div class="icon-holder">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/>
</div>
</div>
CSS
.icon-holder {
float:left;
height:100%;
width:auto;
}
.container {
height:100px;
}
.icon {
height:auto;
width: auto;
max-height: 100%;
display:block;
}
.container-before {
height:100px;
}
.container-after {
height:20px;
}
Now the problem lies in that if I use javascript to resize the container I need the images to resize with it and have no spacing in between. I need a CSS solution that works, I know I can hack it with JS but thats not what I am trying to accomplish.
I have an example running at http://jsfiddle.net/twmxh/3/ of the whole issue with expected output.
UPDATE
Just a bit more about the implementation. The container div is actually a toolbar with a resize handle. So the container is the only element I can apply the new height on.
Can you do this
$("#resize").click(function() {
$('.container').height("20px");
$('.container .icon').width("20px");
});
This appears to be triggering some funny browser bugs - it works fine essentially in both Firefox and Chrome, but both screw up on the element resize in different ways. In IE10 your sample doesn't run at all.
However, for the intended result you shouldn't be using animate at all in these modern CSS3 days, just use CSS transitions instead, like this example Fiddle solving your case to work in all current browsers.
Try switching your CSS for the image size
width: 100%;
height: auto;
i don't think heights and percentages behave well in most browsers
This is generally how you can define the size for a "responsive" image... whereas the width will always fit the size of the container, and the height will follow suit automagically.
edit your code so that the animation scales by width rather than by height. see if that works.
Try adding to the dynamically changed widths
clear:right;
this will refresh the container
heres a link
http://www.w3schools.com/cssref/pr_class_clear.aspenter link description here

Categories