I have some code which acts as a toggle to open/close an element. I am trying to figure out how to manipulate this so that when one element is clicked - the active one closes.
I have used animation to make the content appear from the right hand side of the page.
Please take a look at the code, I need to access the open callback but not sure how.
(function($) {
$.fn.clickToggle = function(func1, func2) {
var funcs = [func1, func2];
this.data('toggleclicked', 0);
this.click(function() {
var data = $(this).data();
var tc = data.toggleclicked;
$.proxy(funcs[tc], this)();
data.toggleclicked = (tc + 1) % 2;
});
return this;
};
}(jQuery));
// cache sliding obj in a var
var tab1 = $('.tab1');
var tab1content = $('.tab1_results');
var tab2 = $('.tab2');
var tab2content = $('.tab2_results');
tab1.clickToggle(function() {
tab1.animate({
'right': '450px'
});
tab1content.animate({
'right': '0'
});
}, function() {
tab1.animate({
'right': '0'
});
tab1content.animate({
'right': '-450px'
});
});
tab2.clickToggle(function() {
tab2.animate({
'right': '450px'
});
tab2content.animate({
'right': '0'
});
}, function() {
tab2.animate({
'right': '0'
});
tab2content.animate({
'right': '-450px'
});
});
.filter {
position: fixed;
right: 0;
z-index: 99;
top: 0;
height: 100%;
}
.tab1_results {
background: #1cb2e7
}
.tab2_results {
background: #1cb2e1;
}
.tab1_results,
.tab2_results {
position: fixed;
width: 450px;
right: -450px;
z-index: 99;
top: 0;
height: 100%;
}
a.tab1 {
background-image: url('http://placehold.it/100x100?text=TAB1');
top: -1px;
z-index: 100;
height: 100px;
width: 100px;
position: absolute;
right: 0;
background-repeat: no-repeat;
margin-top: 0px;
}
a.tab2 {
background-image: url('http://placehold.it/100x100?text=TAB2');
top: 50%;
z-index: 100;
height: 100px;
width: 100px;
position: absolute;
right: 0;
background-repeat: no-repeat;
margin-top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filter">
<a class="tab1" href="#"></a>
<div class="tab1_results">
tab 1 content
</div>
<a class="tab2" href="#"></a>
<div class="tab2_results">
tab 2 content
</div>
</div>
Don't use jQuery to animate things. Instead, use jQuery to toggle an "active" class, and use CSS transitions to make the active element slide in and the others out.
CSS3 transitions are hardware-accelerated, and overall, that's way less code.
See in Codepen
$(".header").click(function() {
$(this)
.parent()
.toggleClass("active")
.siblings()
.removeClass("active")
})
.filter {
position: absolute;
right: 0;
height: 100%;
}
.filter .tab {
height: 100%;
width: 200px;
background: #add8e6;
border: #808080 solid 1px;
transition: all 0.3s ease-out;
z-index: 1;
position: absolute;
top: 0;
left: 0;
}
.filter .tab:nth-child(2) .header {
top: 110px;
}
.filter .tab:nth-child(3) .header {
top: 220px;
}
.filter .tab.active {
transform: translateX(-100%);
z-index: 2;
}
.filter .tab .header {
cursor: pointer;
position: absolute;
left: 0;
top: 0;
background: #d3d3d3;
color: #a9a9a9;
width: 100px;
height: 100px;
transform: translateX(-100%);
}
.filter .tab .header:hover {
outline: #a9a9a9 solid 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filter">
<div class="tab">
<div class="header">Tab 1</div>
<div class="contnet">
tab 1 content
</div>
</div>
<div class="tab">
<div class="header">Tab 2</div>
<div class="contnet">
tab 2 content
</div>
</div>
<div class="tab">
<div class="header">Tab 3</div>
<div class="contnet">
tab 3 content
</div>
</div>
</div>
You could do something like this:
if (tab2.css("right").replace("px","") > 0) {
tab2.trigger("click");
}
demo
(function($) {
$.fn.clickToggle = function(func1, func2) {
var funcs = [func1, func2];
this.data('toggleclicked', 0);
this.click(function() {
var data = $(this).data();
var tc = data.toggleclicked;
$.proxy(funcs[tc], this)();
data.toggleclicked = (tc + 1) % 2;
});
return this;
};
}(jQuery));
// cache sliding obj in a var
var tab1 = $('.tab1');
var tab1content = $('.tab1_results');
var tab2 = $('.tab2');
var tab2content = $('.tab2_results');
tab1.clickToggle(function() {
if (tab2.css("right").replace("px","") > 0) {
tab2.trigger("click");
}
tab1.animate({
'right': '450px'
});
tab1content.animate({
'right': '0'
});
}, function() {
tab1.animate({
'right': '0'
});
tab1content.animate({
'right': '-450px'
});
});
tab2.clickToggle(function() {
if (tab1.css("right").replace("px","") > 0) {
tab1.trigger("click");
}
tab2.animate({
'right': '450px'
});
tab2content.animate({
'right': '0'
});
}, function() {
tab2.animate({
'right': '0'
});
tab2content.animate({
'right': '-450px'
});
});
.filter {
position: fixed;
right: 0;
z-index: 99;
top: 0;
height: 100%;
}
.tab1_results {
background: #1cb2e7
}
.tab2_results {
background: #1cb2e1;
}
.tab1_results,
.tab2_results {
position: fixed;
width: 450px;
right: -450px;
z-index: 99;
top: 0;
height: 100%;
}
a.tab1 {
background-image: url('http://placehold.it/100x100?text=TAB1');
top: -1px;
z-index: 100;
height: 100px;
width: 100px;
position: absolute;
right: 0;
background-repeat: no-repeat;
margin-top: 0px;
}
a.tab2 {
background-image: url('http://placehold.it/100x100?text=TAB2');
top: 50%;
z-index: 100;
height: 100px;
width: 100px;
position: absolute;
right: 0;
background-repeat: no-repeat;
margin-top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filter">
<a class="tab1" href="#"></a>
<div class="tab1_results">
tab 1 content
</div>
<a class="tab2" href="#"></a>
<div class="tab2_results">
tab 2 content
</div>
</div>
Related
When click on the small image it will open as pop-up for 15 seconds, and then automatically opens the second one.
Is it possible to add certain time limit of pop-up image and after that the next image will open? closely same with Whatsapp or Facebook status.
Here is my HTML, CSS and JavaScript code:
$(function () {
"use strict";
$(".popup img").click(function () {
var $src = $(this).attr("src");
$(".show").fadeIn();
$(".img-show img").attr("src", $src);
});
$("span, .overlay").click(function () {
$(".show").fadeOut();
});
});
.popup{
width: 900px;
margin: auto;
text-align: center
}
.popup img{
width: 200px;
height: 200px;
cursor: pointer
}
.show{
z-index: 999;
display: none;
}
.show .overlay{
width: 100%;
height: 100%;
background: rgba(0,0,0,.66);
position: absolute;
top: 0;
left: 0;
}
.show .img-show{
width: 600px;
height: 400px;
background: #FFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
overflow: hidden
}
.img-show span{
position: absolute;
top: 10px;
right: 10px;
z-index: 99;
cursor: pointer;
}
.img-show img{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
/*End style*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="popup">
<img src="http://images.entertainment.ie/images_content/rectangle/620x372/success-kid.jpg">
<img src="https://pbs.twimg.com/media/CX1PAZwVAAANemW.jpg">
<img src="http://images5.fanpop.com/image/photos/30900000/beautiful-pic-different-beautiful-pictures-30958249-1600-1200.jpg">
</div>
<div class="show">
<div class="overlay"></div>
<div class="img-show">
<span>X</span>
<img src="">
</div>
</div>
<!--End image popup-->
Thank you.
window.onload = function() {
setTimeout(function() {
document.getElementById('mydiv').style.display = 'block';
}, 10000);
}
You can use this code but I guess you can easily find more examples for this on google.
$(function() {
"use strict";
var timeOut;
var intervalMs = 15000;
$(".popup img").click(function() {
var src = $(this).attr("src");
$(".show").fadeIn();
$(".img-show img").attr("src", src);
if (timeOut != null)
clearTimeout(timeOut);
var that = $(this);
timeOut = setTimeout(function() {
if (that.next() == null)
that.siblings().first().click();
else
that.next().click();
}, intervalMs);
});
$("span, .overlay").click(function() {
clearTimeout(timeOut);
$(".show").fadeOut();
});
});
I'm trying to do something like (in js, html, sass) :
when I scroll the page down my layers (ground, sky, space, ...) go down
my content (that will be a rocket going in the sky) stay in the middle of the screen and will move to the sides like if it were to be flying (that will be for later)
some elements will move on the layers (like asteroids going from right to left or something) (for later)
So here are some ideas of code I tried but this seem odd and do not work as intended; as you can see, the layers are scrolling as intended, but they are not all showing for whatever reason, they seem to fill all the page size but they shouldn't and i'm going round and round about this on the internet and no one seem to have done something like this.
// Functions
detectPageVerticalPosition = () => {
pageVerticalPosition = pageYOffset;
};
getDivs = () => {
for (
let div = document.getElementsByTagName("div"), i = 0; i < div.length; i++
) {
div[i].getAttribute("class") == "layer-vertical" &&
layerVerticalArray.push(div[i]);
}
console.log("layerVerticalArray: ", layerVerticalArray);
};
moveLayers = () => {
for (let i = 0; i < layerVerticalArray.length; i++) {
layerVerticalArray[i].style.bottom = -1 * pageVerticalPosition + "px";
}
};
// End Functions
// Variables
var pageVerticalPosition = 0,
layerVerticalArray = new Array();
// End Variables
// Events
window.onload = e => {
getDivs();
// console.log(layerVerticalArray);
};
window.onscroll = e => {
detectPageVerticalPosition();
moveLayers();
};
// End Events
body {
margin: 0;
}
#page {
position: relative;
height: 20000px;
width: 100%;
}
#rocket-container {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#rocket-container #rocket {
position: absolute;
width: 100px;
height: 100px;
left: calc(50% - 50px);
top: calc(50% - 50px);
}
#background-container {
position: fixed;
height: 100%;
width: 100%;
background-color: red;
overflow: hidden;
}
#background-container .layer-vertical {
width: 100%;
height: 3500px;
}
#background-container #layer-vertical-1 {
position: absolute;
background-color: blue;
}
#background-container #layer-vertical-1 #cloud-1 {
outline-style: dashed;
right: 0px;
}
#background-container #layer-vertical-1 #cloud-2 {
outline-style: dotted;
bottom: 0px;
}
#background-container #layer-vertical-2 {
background-color: green;
}
#background-container #layer-vertical-3 {
background-color: purple;
}
.cloud {
position: absolute;
width: 180px;
height: 120px;
background-image: url(../images/cloud.png);
}
<div class="page">
<div class="background-container">
<div class="layer-vertical" id="layer-vertical-1">
Layer 1
<div class="cloud" id="cloud-1"></div>
<div class="cloud" id="cloud-2"></div>
</div>
<div class="layer-vertical" id="layer-vertical-2">
Layer 2
</div>
<div class="layer-vertical" id="layer-vertical-3">
Layer 3
</div>
</div>
<div id="rocket-container">
<div id="rocket">STAY MIDDLE</div>
</div>
</div>
[1]: https://via.placeholder.com/180/120
So, here's what i found in order to fix this (jsfiddle: http://jsfiddle.net/kjrte2sd/2/)
i used some jquery to make the background-container scroll down as intended instead of each elements scrolling down by himself.
now the page div is gone and the body handle the sizing of the whole thing.
i guess the answer was simpler than i expected it to be.
var winHeight = $(window).innerHeight();
$(document).ready(() => {
$(".layer-vertical").height(winHeight);
$("body").height(winHeight * $(".layer-vertical").length);
});
window.addEventListener("resize", e => {
$(".layer-vertical").height($(window).innerHeight());
});
$(window).on("scroll", () => {
$("#background-container").css("bottom", $(window).scrollTop() * -1);
});
body {
margin: 0;
padding: 0;
}
#rocket-container {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#rocket-container #rocket {
position: absolute;
width: 100px;
height: 100px;
left: calc(50% - 50px);
top: calc(50% - 50px);
}
#background-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
#background-container .layer-vertical {
width: 100%;
}
#background-container .layer-vertical h1 {
width: 100px;
position: relative;
display: block;
margin: 0 auto;
text-align: center;
top: 50%;
}
#background-container #layer-vertical-1 {
background-color: green;
}
#background-container #layer-vertical-2 {
background-color: red;
}
#background-container #layer-vertical-3 {
background-color: white;
}
#background-container #layer-vertical-4 {
background-color: pink;
}
#background-container #layer-vertical-5 {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="background-container">
<div class="layer-vertical" id="layer-vertical-5">
<h1>5</h1>
</div>
<div class="layer-vertical" id="layer-vertical-4">
<h1>4</h1>
</div>
<div class="layer-vertical" id="layer-vertical-3">
<h1>3</h1>
</div>
<div class="layer-vertical" id="layer-vertical-2">
<h1>2</h1>
</div>
<div class="layer-vertical" id="layer-vertical-1">
<h1>1</h1>
</div>
</div>
<div id="rocket-container">
<div id="rocket">STAY MIDDLE</div>
</div>
I have created the following simple image comparison slider - modified from the version on w3schools (I know my mistake to use their code).
This all works fine on a desktop but when I try to use it on a mobile, nothing happens - it doesn't even register the console.log on the mousedown/touchstart (when I press on the slider button with my finger).
I was wondering if anyone could spot anything obvious with why it isn't working on mobile devices
(() => {
$.fn.imageComparisonSlider = function() {
var returnValue = this.each((index, item) => {
var $container = $(this);
var $overlay = $container.find('.image-comparison-slider__bottom-image');
var $slider = $('<span class="image-comparison-slider__slider"></span>');
var $window = $(window);
var touchStarted = false;
var width = $container.outerWidth();
$container.prepend($slider);
$container.on('mousedown touchstart', '.image-comparison-slider__slider', event => {
event.preventDefault();
console.log('touchstart');
touchStarted = true;
});
$window.on("mousemove touchmove", windowEvent => {
if (touchStarted) {
// get the cursor's x position:
let pos = getCursorPos(windowEvent);
// prevent the slider from being positioned outside the image:
if (pos < 0) pos = 0;
if (pos > width) pos = width;
// execute a function that will resize the overlay image according to the cursor:
slide(pos);
}
});
$window.on('mouseup touchend', event => {
event.preventDefault();
touchStarted = false;
});
function getCursorPos(e) {
var thisEvent = e || window.event;
// calculate the cursor's x coordinate, relative to the image
return thisEvent.pageX - $container.offset().left;
}
function slide(x) {
// set the width of the overlay
$overlay.width(width - x);
// position the slider
$slider[0].style.left = x + 'px';
}
function resetSlider() {
$overlay.width('50%');
$slider[0].style.left = $overlay.width() + 'px'
width = $container.outerWidth();
}
});
return returnValue;
};
})($);
$('.image-comparison-slider__container').imageComparisonSlider();
.image {
display: block;
width: 100%;
}
.image-comparison-slider__title {
text-align: center;
}
.image-comparison-slider__container,
.image-comparison-slider__image-holder {
position: relative;
}
.image-comparison-slider__bottom-image {
position: absolute;
overflow: hidden;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
width: 50%;
}
.image-comparison-slider__caption {
position: absolute;
padding: 1rem;
color: white;
background: rgba(0, 0, 0, 0.6);
z-index: 2;
white-space: nowrap;
}
.image-comparison-slider__top-image .image-comparison-slider__caption {
top: 0;
left: 0;
}
.image-comparison-slider__bottom-image .image-comparison-slider__caption {
bottom: 0;
right: 0;
}
.image-comparison-slider__image {
display: block;
z-index: 1;
}
.image-comparison-slider__bottom-image .image {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: auto;
}
.image-comparison-slider__slider {
position: absolute;
z-index: 3;
cursor: ew-resize;
/*set the appearance of the slider:*/
width: 50px;
height: 50px;
background-color: rgba(255, 96, 38, 0.8);
border-radius: 50%;
top: 50%;
left: 50%;
display: flex;
justify-content: center;
align-items: center;
transform: translate(-50%, -50%);
}
.image-comparison-slider__slider:after {
content: "< >";
color: white;
font-weight: bold;
font-size: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-comparison-slider__container">
<div class="image-comparison-slider__image-holder image-comparison-slider__top-image">
<img src="https://www.fillmurray.com/g/400/300" alt="A test image 1" class="image">
<div class="image-comparison-slider__caption">Left Image</div>
</div>
<div class="image-comparison-slider__image-holder image-comparison-slider__bottom-image">
<img src="https://www.fillmurray.com/400/300" alt="A test image 2" class="image">
<div class="image-comparison-slider__caption">Right Image</div>
</div>
</div>
Fiddle link for code
Ok have managed to fix this - the touch wasn't registering because of the transform so I changed that and just used negative margin as the button was a fixed size.
I then had to fix the thisEvent.pageX for android - so did a check with isNaN and then set it to e.originalEvent.touches[0].pageX if it was true.
Working version:
(() => {
$.fn.imageComparisonSlider = function() {
var returnValue = this.each((index, item) => {
var $container = $(this);
var $overlay = $container.find('.image-comparison-slider__bottom-image');
var $slider = $('<span class="image-comparison-slider__slider"></span>');
var $window = $(window);
var touchStarted = false;
var width = $container.outerWidth();
$container.prepend($slider);
$container.on('mousedown touchstart', '.image-comparison-slider__slider', event => {
event.preventDefault();
console.log('touchstart');
touchStarted = true;
});
$window.on("mousemove touchmove", windowEvent => {
if (touchStarted) {
// get the cursor's x position:
let pos = getCursorPos(windowEvent);
// prevent the slider from being positioned outside the image:
if (pos < 0) pos = 0;
if (pos > width) pos = width;
// execute a function that will resize the overlay image according to the cursor:
slide(pos);
}
});
$window.on('mouseup touchend', event => {
event.preventDefault();
touchStarted = false;
});
function getCursorPos(e) {
var thisEvent = e || window.event;
let xVal = thisEvent.pageX;
if (isNaN(xVal)) {
xVal = e.originalEvent.touches[0].pageX;
}
// calculate the cursor's x coordinate, relative to the image
return xVal - $container.offset().left;
}
function slide(x) {
// set the width of the overlay
$overlay.width(width - x);
// position the slider
$slider[0].style.left = x + 'px';
}
function resetSlider() {
$overlay.width('50%');
$slider[0].style.left = $overlay.width() + 'px'
width = $container.outerWidth();
}
});
return returnValue;
};
})($);
$('.image-comparison-slider__container').imageComparisonSlider();
.image {
display: block;
width: 100%;
}
.image-comparison-slider__title {
text-align: center;
}
.image-comparison-slider__container,
.image-comparison-slider__image-holder {
position: relative;
}
.image-comparison-slider__bottom-image {
position: absolute;
overflow: hidden;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
width: 50%;
}
.image-comparison-slider__caption {
position: absolute;
padding: 1rem;
color: white;
background: rgba(0, 0, 0, 0.6);
z-index: 2;
white-space: nowrap;
}
.image-comparison-slider__top-image .image-comparison-slider__caption {
top: 0;
left: 0;
}
.image-comparison-slider__bottom-image .image-comparison-slider__caption {
bottom: 0;
right: 0;
}
.image-comparison-slider__image {
display: block;
z-index: 1;
}
.image-comparison-slider__bottom-image .image {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: auto;
}
.image-comparison-slider__slider {
position: absolute;
z-index: 3;
cursor: ew-resize;
width: 50px;
height: 50px;
background-color: rgba(255, 96, 38, 0.8);
border-radius: 50%;
top: 50%;
left: 50%;
display: flex;
justify-content: center;
align-items: center;
margin: -25px 0 0 -25px;
}
.image-comparison-slider__slider:after {
content: "< >";
color: white;
font-weight: bold;
font-size: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-comparison-slider__container">
<div class="image-comparison-slider__image-holder image-comparison-slider__top-image">
<img src="https://www.fillmurray.com/g/400/300" alt="A test image 1" class="image">
<div class="image-comparison-slider__caption">Left Image</div>
</div>
<div class="image-comparison-slider__image-holder image-comparison-slider__bottom-image">
<img src="https://www.fillmurray.com/400/300" alt="A test image 2" class="image">
<div class="image-comparison-slider__caption">Right Image</div>
</div>
</div>
I have made this scrolling effect that comes into action when page is scrolled. Now, i want to show a scrollbar on the page which when present at the starting position, all the divs are at 100% width and when at bottom, all divs are at 0% width.
EDIT - Basically I want to control whatever animation I have made, not with wheel event but by using a scrollbar, controlling the div widths using scrollTop etc.
var leftDiv = document.querySelectorAll(".lcurtain");
var rightDiv = document.querySelectorAll(".rcurtain");
var locker = document.getElementById("locker");
document.addEventListener("wheel", change);
var per = 100;
var angle = 0;
function change(e) {
if (e.deltaY > 0 && per > 0) {
for (var i = 0; i < 4; i++) {
leftDiv[i].style.width = per - 1 + "%";
rightDiv[i].style.width = per - 1 + "%";
}
per -= 1;
} else if (e.deltaY < 0 && per < 100) {
for (var i = 0; i < 4; i++) {
leftDiv[i].style.width = per + 1 + "%";
rightDiv[i].style.width = per + 1 + "%";
}
per += 1;
}
}
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: relative;
}
.lcurtain,
.rcurtain {
width: 100%;
height: 12.5%;
position: absolute;
}
#div1 {
top: 0;
left: 0;
background-color: blue;
}
#div2 {
top: 12.5%;
right: 0;
background-color: red;
}
#div3 {
top: 25%;
left: 0;
background-color: green;
}
#div4 {
top: 37.5%;
right: 0;
background-color: purple;
}
#div5 {
top: 50%;
left: 0;
background-color: orange;
}
#div6 {
top: 62.5%;
right: 0;
background-color: cyan;
}
#div7 {
top: 75%;
left: 0;
background-color: brown;
}
#div8 {
top: 87.5%;
right: 0;
background-color: pink;
}
<div id="div1" class="lcurtain"></div>
<div id="div2" class="rcurtain"></div>
<div id="div3" class="lcurtain"></div>
<div id="div4" class="rcurtain"></div>
<div id="div5" class="lcurtain"></div>
<div id="div6" class="rcurtain"></div>
<div id="div7" class="lcurtain"></div>
<div id="div8" class="rcurtain"></div>
<script src="script.js"></script>
Here's the solution using CSS vh units and scroll event handler.
When a scroll events is handled it calculates the relative current scroll position in percents:
100 - (scrollTop / (scrollHeight - clientHeight) * 100)
thus 100% means the very top scroll position, otherwise 0% means we're at the very bottom.
Reference: Cross-Browser Method to Determine Vertical Scroll Percentage in Javascript.
Then we just apply this calculated value to the divs style.width parameters.
var leftDiv = document.querySelectorAll(".lcurtain");
var rightDiv = document.querySelectorAll(".rcurtain");
document.addEventListener("scroll", change);
function change(e) {
var h = document.documentElement;
var b = document.body;
var st = 'scrollTop';
var sh = 'scrollHeight';
var percent = 100 - (h[st] || b[st] / ((h[sh] || b[sh]) - h.clientHeight) * 100) + "%";
for (var i = 0; i < 4; i++) {
leftDiv[i].style.width = percent;
rightDiv[i].style.width = percent;
}
}
html {
width: 100%;
height: 1000vh;
}
body {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
position: fixed;
}
.lcurtain,
.rcurtain {
width: 100%;
height: 12.5%;
position: absolute;
}
#div1 {
top: 0;
left: 0;
background-color: blue;
}
#div2 {
top: 12.5%;
right: 0;
background-color: red;
}
#div3 {
top: 25%;
left: 0;
background-color: green;
}
#div4 {
top: 37.5%;
right: 0;
background-color: purple;
}
#div5 {
top: 50%;
left: 0;
background-color: orange;
}
#div6 {
top: 62.5%;
right: 0;
background-color: cyan;
}
#div7 {
top: 75%;
left: 0;
background-color: brown;
}
#div8 {
top: 87.5%;
right: 0;
background-color: pink;
}
<div id="div1" class="lcurtain"></div>
<div id="div2" class="rcurtain"></div>
<div id="div3" class="lcurtain"></div>
<div id="div4" class="rcurtain"></div>
<div id="div5" class="lcurtain"></div>
<div id="div6" class="rcurtain"></div>
<div id="div7" class="lcurtain"></div>
<div id="div8" class="rcurtain"></div>
I prepared this:
http://jsfiddle.net/hXpWh/2/
When you hover the .container it changes the color of both. But I just want to change it of the container where the mouse is on.
Here is the js code:
moped = "";
$(".container").mouseenter(function () {
$(".content").css('background', function () {
moped = $(this).css('background');
return "green";
});}).mouseleave(function () {
$(".content").css('background', function () {
return moped;
});
});
html:
<div class="container">
<div class="content"></div>
<div class="caption">
<p>This is the caption of .container</p>
</div>
</div>
<div class="container2">
<div class="content"></div>
<div class="caption">
<p>This is the caption of .container2</p>
</div>
</div>
css:
.container {
position: absolute;
top: 0;
left: 0;
display: block;
z-index: 800;
width: 250px;
height: 250px;
padding: 0;
margin: 0;
}
.container2 {
position: absolute;
top: 0;
left: 255px;
display: block;
z-index: 800;
width: 250px;
height: 250px;
padding: 0;
margin: 0;
}
.content {
display: block;
background: red;
position: absolute;
z-index: 900;
top: 0;
left: 0;
width: 250px;
height: 250px;
}
.caption {
display: block;
background: none;
position: absolute;
z-index: 1000;
top: 0;
left: 0;
width: 250px;
height: 250px;
}
.caption p {
position: relative;
bottom: 10px;
left: 10px;
}
The other answers show what's wrong in the jQuery code, but another fix is to just using CSS for this.
Give the outer elements a common class, then:
.cont {
background:red;
}
.cont:hover .content {
background: green;
}
DEMO: http://jsfiddle.net/hXpWh/4/
But with respect to the jQuery code, not only do you need to find the nested .content, but also, there's no need for the variable. Just set the background to "" in the mouseleave.
$(".container").mouseenter(function () {
$(this).find(".content").css('background', "green");
}).mouseleave(function () {
$(this).find(".content").css('background', "");
});
Change $(".content") to $(this).find(".content") in the .mouseenter function, and it will only change the one that you hover over. You could change it to $(".content", this), but as per epascarello in the comments, it is not as efficient.
Well , you could either move the css background attribute or do this:
moped = "";
$(".container").mouseenter(function () {
$(this).children(".content").css('background', function () {
moped = $(this).css('background-color');
return "green";
});
}).mouseleave(function () {
$(this).children(".content").css('background', function () {
return moped;
});
});
My advice is do it with the script and refactor it , use .hover() and name the mouseenter and mouseout functions separately.
Good luck, mate.