I created a simple header. There are two boxes (DIVs) to be more precise. Both of them are part of the header
HEADER
BOX 1
BOX 2
I want the first box to dissapear as the user scrolls down but keep the second box fixed. The second box which is fixed also shrinks a little bit in height.
The problem is that I want the "Content" heading to be visible right in the moment when the second box shrinks and becomes fixed. However as the user scrolls down more I want the "Content" header to dissapear below the fixed header with the other content as well.
I wanted to solve this using vanilla JavaScript. I suppose the solution for my issue is just a spacer, but I added it and doesn't seem to work.
"use strict";
const header = document.querySelector(".header-main");
const sticky = header.offsetTop;
window.addEventListener("scroll", event => {
if (window.pageYOffset > sticky) {
header.classList.add("is-sticky");
header.style.height = "70px";
} else {
header.classList.remove("is-sticky");
header.style.height = "100px";
}
});
:root {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
p {
margin: 0;
}
.header-above {
background: lightseagreen;
color: #fff;
height: 100px;
}
.header-main {
background: #0A246A;
color: #fff;
height: 100px;
transition: all 0.2s linear;
}
.header-main.is-sticky {
position: fixed;
top: 0;
width: 100%;
}
.header-main.is-sticky + .main {
padding-top: 120px;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="fixed-header-plusabove.css">
<title>Fixed Header Plus Above</title>
</head>
<body>
<header class="header">
<div class="header-above">
<div class="header-above-container">
<p>Header Above Container</p>
</div>
</div>
<div class="header-main">
<div class="header-main-container">
<p>Header main</p>
</div>
</div>
</header>
<main>
<h1>Content</h1>
<script>
for (let i = 0; i < 100; i++) {
document.write("<p>Some text...</p>");
}
</script>
</main>
<script src="fixed-header-plusabove.js"></script>
</body>
</html>
I think the spacing idea, could be a solution for you.
You have 2 mistakes in your shown code:
.header-main.is-sticky + .main
there is no class named main, only the html tag <main>
with the code line above, even with <main>, you won't affect the main element.
If you add a class like .is-sticky to the parent class header.header you could use ur code line like this:
header.header.is-sticky + main
"use strict";
const parentHeader = document.querySelector(".header");
const header = document.querySelector(".header-main");
const sticky = header.offsetTop;
window.addEventListener("scroll", event => {
if (window.pageYOffset > sticky) {
header.classList.add("is-sticky");
parentHeader.classList.add("is-sticky");
header.style.height = "70px";
} else {
header.classList.remove("is-sticky");
parentHeader.classList.remove("is-sticky");
header.style.height = "100px";
}
});
:root {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
p {
margin: 0;
}
.header-above {
background: lightseagreen;
color: #fff;
height: 100px;
}
.header-main {
background: #0A246A;
color: #fff;
height: 100px;
transition: all 0.2s linear;
}
.header-main.is-sticky {
position: fixed;
top: 0;
width: 100%;
}
header.header.is-sticky + main {
padding-top: 120px;
}
<header class="header">
<div class="header-above">
<div class="header-above-container">
<p>Header Above Container</p>
</div>
</div>
<div class="header-main">
<div class="header-main-container">
<p>Header main</p>
</div>
</div>
</header>
<main>
<h1>Content</h1>
<script>
for (let i = 0; i < 100; i++) {
document.write("<p>Some text...</p>");
}
</script>
</main>
<script src="fixed-header-plusabove.js"></script>
Related
maybe someone can tell me, how to make it so that when clicking next, the user sees an infinite loop of slider elements? At the moment, I was only able to make the elements move inside the slider.
I'm assuming that I need to create new items inside the carousel on every click.
I would be grateful for advice on what to do next.
function sliderFunc() {
let sliderBox = document.querySelector('.slider');
let tapToRightBtn = document.querySelector('.btn');
function sliderNext() {
sliderBox.style.transform += 'translateX(-100px)';
sliderBox.style.transition = '0.3s';
}
tapToRightBtn.addEventListener('click', sliderNext);
}
sliderFunc();
.container {
max-width: 300px;
margin: auto;
overflow: hidden;
}
.slider {
background: #eee;
display: flex;
width: 500px;
border: solid;
}
.slide {
width: 200px;
height: 100px;
margin-right: 10px;
}
.slide1 {
background: #f3ca63;
}
.slide2 {
background: #d06c65;
}
.slide3 {
background: #6579d0;
}
.slide4 {
background: #65d073;
}
.slide5 {
background: #ba65d0;
}
.btn {
margin: 2rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<section class="container">
<div class="slider">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
<div class="slide slide4"></div>
<div class="slide slide5"></div>
</div>
<button class="btn">Next</button>
</section>
</body>
</html>
I made a simple script based on what you want. You may want to optimize it by removing the object(s) when they are not displayed.
What I have changed:
Instead of transitioning using translateX(-100px), I make the container position relative then moving using left attribute (you're doing it wrong, you have to check for the value first then remove the px suffix)
Make a timeout function to clone the object at index, then put it at the end of the slider object (have to increase the width and set the left style properly). The function sync exactly with the transition duration.
function sliderFunc() {
let sliderBox = document.querySelector('.slider');
let tapToRightBtn = document.querySelector('.btn');
let index = 0;
sliderBox.style.width = '500px';
sliderBox.style.left = '0px';
function sliderNext() {
setTimeout(() => {
index++;
let child = sliderBox.querySelector(`div:nth-child(${index})`);
let cloneNode = child .cloneNode(true);
sliderBox.style.width = `${(5 + index) * 100}px`;
sliderBox.appendChild(cloneNode);
}, 300);
// clone and move the element to bottom
let currentLeftPosition = sliderBox.style.left ? parseFloat(sliderBox.style.left.replace('px', '')) : 0;
let nextLeftPosition = currentLeftPosition - 100;
sliderBox.style.left = `${nextLeftPosition}px`;
}
tapToRightBtn.addEventListener('click', sliderNext);
}
sliderFunc();
.container {
max-width: 300px;
margin: auto;
overflow: hidden;
position: relative;
}
.slider {
background: #eee;
display: flex;
min-width: 500px;
border: solid;
position: relative;
transition: left 0.3s;
}
.slide {
width: 200px;
height: 100px;
margin-right: 10px;
}
.slide1 {
background: #f3ca63;
}
.slide2 {
background: #d06c65;
}
.slide3 {
background: #6579d0;
}
.slide4 {
background: #65d073;
}
.slide5 {
background: #ba65d0;
}
.btn {
margin: 2rem;
}
<section class="container">
<div class="slider">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
<div class="slide slide4"></div>
<div class="slide slide5"></div>
</div>
<button class="btn">Next</button>
</section>
If I understood your question you can go with the following elegant solution
I will first explain the principles and advantages:
I won't add/remove any element, working only on your initial sliderBox
in order to create an infinite loop I'm stopping the shift move on this element that would be executed by sliderBox.style.transform += 'translateX(-100px)';
I modified sliderNext() so that the infinite slide effect will be achieved by stealing the color to the next slide, i.e. after clicking the Next button the 2nd slide will steal the color to the 3rd, the 3rd to the 4th and the 4th will be assigned each time a random color to give that endless feeling
I'm assuming that "infinite loop" meant that we don't want to see the border of sliderBox that would be shown with the 5th element, so we will never see it [you can add a "Go to the last element" button should you need that]
I did only minimal adjustments to your original draft, minimizing also any unneeded computational operations
Without further ado here is the final code:
function sliderFunc() {
let sliderBox = document.querySelector('.slider');
let tapToRightBtn = document.querySelector('.btn');
let counter = 0;
let firstSlide = document.querySelector('.slide2');
let secondSlide = document.querySelector('.slide3');
let thirdSlide = document.querySelector('.slide4');
function sliderNext() {
if (counter == 0) {
sliderBox.style.transform += 'translateX(-100px)';
sliderBox.style.transition = '0.3s';
} else {
firstSlide.style.background = secondSlide.style.background;
secondSlide.style.background = thirdSlide.style.background;
thirdSlide.style.background = "#" + Math.floor(Math.random() * 16777215).toString(16);
}
counter++;
}
tapToRightBtn.addEventListener('click', sliderNext);
}
sliderFunc();
.container {
max-width: 300px;
margin: auto;
overflow: hidden;
}
.slider {
background: #eee;
display: flex;
width: 500px;
border: solid;
}
.slide {
width: 200px;
height: 100px;
margin-right: 10px;
}
.slide1 {
background: #f3ca63;
}
.slide2 {
background: #d06c65;
}
.slide3 {
background: #6579d0;
}
.slide4 {
background: #65d073;
}
.slide5 {
background: #ba65d0;
}
.btn {
margin: 2rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<section class="container">
<div class="slider">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
<div class="slide slide4"></div>
<div class="slide slide5"></div>
</div>
<button class="btn">Next</button>
</section>
</body>
</html>
This should solve your problem, otherwise let me know
My Files:
https://jsfiddle.net/claudiopb/f8y4mnc6/2/
I have 2 background images. When the scroll invades the Y coordinate at the top of div 4, I would like to change the body's fullscreen image to the other background image.
As you can see in these examples below:
I started to make a JavaScript to intercept if the scroll coordinate was equal to the top of the div, to do the CSS class change, but it is not working.
HTML
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<script src="js/script.js" defer></script>
<title>Background changing</title>
</head>
<body class="bg-1">
<div class="style-1 item-1">
<h1>Item-1</h1>
</div>
<div class="style-1 item-2">
<h1>Item-2</h1>
</div>
<div class="style-1 item-3">
<h1>Item-3</h1>
</div>
<div class="style-1 item-4">
<h1>Item-4</h1>
<p>Here I want the background image changing!!!</p>
</div>
<div class="style-1 item-5">
<h1>Item-5</h1>
</div>
</body>
</html>
CSS
* {
border: 0;
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
position:relative;
}
.bg-1 {
background:url('https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171__480.jpg') no-repeat fixed center bottom;
background-size: cover;
}
.bg-2 {
background: url('https://images.unsplash.com/photo-1434725039720-aaad6dd32dfe?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb') no-repeat fixed center top;
background-size: cover;
}
.style-1 {
height:800px;
width:600px;
display:flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 30px;
text-align: center;
padding-left: 20px;
padding-right: 20px;
}
.style-1 h1 {
padding-bottom:40px;
}
.item-1 {
background-color:green
}
.item-2 {
background-color:blue
}
.item-3 {
background-color:grey
}
.item-4 {
background-color:orange
}
.item-5 {
background-color:red
}
JS
const el = document.querySelector(".item-4")
const result = getOffset(el)
let scroll = null;
function getOffset(el) {
const rect = el.getBoundingClientRect();
return rect.top
}
window.addEventListener("scroll", (event) => {
scroll = this.scrollY;
console.log(scroll)
if (scroll == result) {
console.log('true')
/**
* if this returns true, write the lines of code to switch the body's class.
*
*/
}
});
I am trying to make the content of a div change when the page is scrolled to a certain point using jQuery. Currently, I am trying to accomplish this by adding a class when the page is scrolled past 800 and removing it and adding a different class when the page is above 800. Here is my current code on jsfiddle: https://jsfiddle.net/shgfrdm8/
Here is the jQuery code:
$(window).scroll(function() {
let windowTop = $(window).scrollTop();
if (windowTop < 800) {
$('image-content').addClass('scrolledDown');
$('image-content').removeClass('scrolledUp');
} else {
$('image-content').addClass('scrolledUp');
$('image-content').removeClass('scrolledDown')
}
})
The CSS ids/classes:
.main {
width: 100%;
height: 700px;
overflow: hidden;
position: relative;
}
.main-image {
width: 100%;
position: fixed;
left: 50%;
transform: translate(-50%) scale(500%);
}
.filler {
height: 400vh;
}
.main-text {
left: -14px;
width: 99.3vw;
height: 4000px;
text-align: center;
background-color: red;
position: relative;
}
#image-content::before {
white-space: pre;
position: absolute;
bottom: 20px;
left: 20px;
font-family: Impact;
font-size: 55px;
font-weight: 550;
color: white;
z-index: 4;
opacity: 1;
position: fixed;
}
#image-content.scrolledDown::before {
opacity: 1;
content: 'ABC';
}
#image-content.scrolledUp::before {
opacity: 1;
content: "DEF";
}
The HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="zoom.css">
</head>
<body>
<div class="image-container">
<div class="zoom main">
<img src="images/sourcecode.jpg" class="main-image">
</div>
<div id="content-anchor"></div>
<div id="image-content"></div>
</div>
<div class="filler">
</div>
<div class="main-text">
</div>
I am wondering how I can make this work because I far as I can tell the classes either not being added or the classes are not working.
Suggesting the following changes:
$(window).scroll(function() {
var windowTop = $(window).scrollTop();
if (windowTop < 800) {
$('.image-content').addClass('scrolledDown');
$('.image-content').removeClass('scrolledUp');
} else {
$('.image-content').addClass('scrolledUp');
$('.image-content').removeClass('scrolledDown')
}
});
This ensures you have the correct Class selector.
The function I want to implement is that a parent element that contains an indefinite number of child elements can automatically extend its height to the furthest point of the children when the total height of the children exceeds the parent's. The parent has a fixed height if the children's total height do not exceed that height. Here's the diagram:
I've tried and searched for hours and still couldn't get it to work. Don't know what's been missing here. Here's a demo snippet and when you click on the blue panel it will exceed the white panel but the white one does not extend accordingly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
html,
body {
height: 100%;
background-color: grey;
margin: 0;
}
#left-panel {
position: relative;
width: 256px;
height: 100%;
background-color: white;
}
#child-panel {
position: absolute;
width: 30%;
height: 40%;
top: 20%;
left: 30%;
background-color: blue;
}
</style>
<script>
window.onload = init;
function init() {
var leftPanel = document.getElementById("left-panel");
var childPanel = document.getElementById("child-panel");
childPanel.onclick = function(ev) {
if (childPanel.offsetHeight < leftPanel.offsetHeight) {
childPanel.style.height = leftPanel.offsetHeight + 100 + "px";
leftPanel.style.height = leftPanel.offsetHeight + 100 + "px";
} else {
childPanel.style.height = "40%";
leftPanel.style.height = "100%";
}
}
}
</script>
</head>
<body>
<div id="left-panel">
<div id="child-panel"></div>
</div>
</body>
</html>
it is simple, you don't need javascript to get the right bhavior
first i used this html and css code that gives the same ui as yours in the pictures :
<div class="parent-purpel">
<div class="firstChild-yellow">
<div class="thirdChild-orange">
</div>
</div>
it gives me the result below :
then i used flex in the css :
.firstChild-yellow{
background-color: yellow;
width: 30%;
height: auto;
margin : 30px;
display: flex; /* <====================== */
flex-direction: column; /* <======= to get orange squares in vertical align */}
important ! :
we have to use an auto height in the yellow and the purpel divs :
.parent-purpel{
background-color: purple;
width: 100%;
height: auto; /*<===== important*/ }
.firstChild-yellow{
background-color: yellow;
width: 30%;
height: auto; /*<===== important*/
margin : 30px;
display: flex;
flex-direction: column;}
Now even we add orange elements to the yellow div we will have variable height of the divs yellow and purpel like that :
i hope that will help you thanks !
here is the full code :
html : test1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="test1.css">
<title>Document</title>
</head>
<body>
<div class="parent-purpel">
<div class="firstChild-yellow">
<div class="thirdChild-orange">
</div>
<div class="thirdChild-orange">
</div>
<div class="thirdChild-orange">
</div>
<div class="thirdChild-orange">
</div>
</div>
</div>
</body>
</html>
CSS : test1.css
.parent-purpel{
background-color: purple;
width: 100%;
height: auto;}
.firstChild-yellow{
background-color: yellow;
width: 30%;
height: auto;
margin : 30px;
display: flex;
flex-direction: column;}
.thirdChild-orange{
background-color: orange;
width: 60%;
height: 200px;
margin: 30px;}
Try this one:
var childTop = childPanel.offsetTop
if (childPanel.offsetHeight < leftPanel.offsetHeight) {
childPanel.style.height = leftPanel.offsetHeight - childTop + "px";
leftPanel.style.height = leftPanel.offsetHeight + "px";
}
you were setting child height (cHeight) as parent height (pHeight) so let's assume
pHeight = 100px;
cheight = pHeight in your case childPanel.style.height = leftPanel.offsetHeight
it means both elements are having the same height but child element also have top: 20%; that you have to reduce from the height of the child.
Calculate Top of the child: var childTop = childPanel.offsetTop
and then reduce from height
childPanel.style.height = leftPanel.offsetHeight - childTop + "px";
Why don't you just try something like;
<!-- min height will be the height that you want to keep fixed if lesser number of children -->
<div style="border:1px solid black; padding:5px; min-height:50px">
<div>
Child 1
</div>
<div>
Child 2
</div>
<div>
Child 3
</div>
<div>
Child 4
</div>
</div>
it's the:
#child-panel {
position: absolute;
}
that is causing the behaviour, to get the position use padding and margin:
#left-panel {
padding: 5% 2%;
}
#child-panel {
margin: auto;
}
The key is to use
min-height: 100%;
height: auto;
for parent panel and don't use
position: absolute;
for the child panels. If you want to re-position the child panels use a wrapper panel instead. Here's the code that when you click on the blue panels the parent and the panels are all extended accordingly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
html, body {
height: 100%;
background-color: grey;
margin: 0;
}
#left-panel {
width: 256px;
min-height: 100%;
height: auto;
background-color: white;
}
.child-panel-wrapper {
width: 30%;
height: auto;
background-color: yellow;
position: relative;
left: 30%;
}
.child-panel {
background-color: blue;
height: 200px;
}
</style>
<script>
window.onload = init;
function init() {
var childPanels = document.getElementsByClassName("child-panel");
for (var i = 0; i < childPanels.length; i++) {
var panel = childPanels[i];
panel.addEventListener("click", function (evt) {
if (this.offsetHeight <= 200) {
this.style.height = 600 + "px";
} else {
this.style.height = 200 + "px";
}
})
}
}
</script>
</head>
<body>
<div id="left-panel">
<div class="child-panel-wrapper">
<div class="child-panel"></div><br>
<div class="child-panel"></div><br>
<div class="child-panel"></div>
</div>
</div>
</body>
</html>
Recently I have asked a similar question about transition animation in divs. (See this post)
The Code Snippet below shows my solution.
However, the animation only works if the width is given in pixels, not as a percentage.
Does anybody know a way around this?
EDIT (More info to clarify my problem):
In this section of a website, I have a heading that should always stay the same and 3 pages of content which can be "swiped" on user input.
Thus, the span of the left margin of the page would range from -100% to +100%.
I want a swiping animation so that the user can switch from page 2 (i.e. displaying an image) to page 3 (i.e. the text correlating to the image).
Because of different browser window sizes, I need the width to be in percentages. Sadly...
$(document).ready(function() {
$(".next").click(function() {
var current = $(".container").css("left");
if (current == "-200px") {
current = "-400px";
} else if (current == "0px") {
current = "-200px";
}
$(".container").css("left", current);
});
$(".prev").click(function() {
var current = $(".container").css("left");
if (current == "-200px") {
current = "0px";
} else if (current == "-400px") {
current = "-200px";
}
$(".container").css("left", current);
});
});
.row {
border: 1px solid black;
height: 200px;
margin: 0;
width: 200px;
padding: 0;
display: block;
position: relative;
overflow: hidden;
}
.container {
height: 200px;
margin: 0;
width: 600px;
padding: 0;
display: block;
position: absolute;
left: -200px;
top: 0;
-webkit-transition: left 0.5s ease-in-out;
-moz-transition: left 0.5s ease-in-out;
transition: left 0.5s ease-in-out;
}
.ins {
width: 200px;
float: left;
height: 200px;
margin: 0;
padding: 0;
background-color: red;
}
.div1 {
background-color: red;
}
.div2 {
background-color: green;
}
.div3 {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<!-- Thanks to kittyCat at stackoverflow.com for helping me with this website.-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TITLE</title>
<meta name="Title" content="Main">
</head>
<body>
<div class="row">
<div class="container">
<div class="ins div1">div-1</div>
<div class="ins div2">div-2</div>
<div class="ins div3">div-3</div>
</div>
</div>
<button class="prev">prev</button>
<button class="next">next</button>
</body>
</html>
I have changed the left positioning for a transform on the individual elements:
Now, also, the class row is set to occupy full browser width. The container class is se to 300% (because it will make room for 3 elements). And the children are set to 33% of this, that at the end is 100% of the row.
var pos = 2; /* values 1 - 2 or 3 */
$(document).ready(function() {
$(".next").click(function() {
if (pos == 1) {
$(".container").removeClass("pos1");
$(".container").addClass("pos2");
pos++;
} else if (pos == 2) {
$(".container").removeClass("pos2");
$(".container").addClass("pos3");
pos++;
}
});
$(".prev").click(function() {
if (pos == 3) {
$(".container").removeClass("pos3");
$(".container").addClass("pos2");
pos--;
} else if (pos == 2) {
$(".container").removeClass("pos2");
$(".container").addClass("pos1");
pos--;
}
});
});
.row {
border: 1px solid black;
height: 200px;
margin: 0;
width: 100%;
padding: 0;
display: block;
position: relative;
overflow: hidden;
}
.container {
height: 200px;
width: 300%;
margin: 0;
padding: 0;
display: block;
position: absolute;
top: 0;
}
.ins {
width: 33.33%;
height: 200px;
margin: 0;
padding: 0;
float: left;
transition: transform 0.5s ease-in-out;
}
.div1 {
background-color: red;
}
.div2 {
background-color: green;
}
.div3 {
background-color: blue;
}
.pos2 .ins {
transform: translateX(-100%);
}
.pos3 .ins {
transform: translateX(-200%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<!-- Thanks to kittyCat at stackoverflow.com for helping me with this website.-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TITLE</title>
<meta name="Title" content="Main">
</head>
<body>
<div class="row">
<div class="container pos2">
<div class="ins div1">div-1</div>
<div class="ins div2">div-2</div>
<div class="ins div3">div-3</div>
</div>
</div>
<button class="prev">prev</button>
<button class="next">next</button>
</body>
</html>
Narusan,
If I'm understanding your goal correctly, part of the problem is that no matter what, jQuery wants to return px units to you. You can set a percentage value, but it seems it will not then return those percentages to you.
I changed your code some to demonstrate this:
$(document).ready(function() {
$(".next").click(function() {
var current = $(".container").css("left");
console.log(current);
if (current == "-200px" || current == "-100%") {
current = "-200%";
} else if (current == "0%") {
current = "-100%";
}
$(".container").css("left", current);
});
$(".prev").click(function() {
var current = $(".container").css("left");
console.log(current);
if (current == "-200px" || current == "-100%") {
current = "0%";
} else if (current == "-200%") {
current = "-100%";
}
$(".container").css("left", current);
});
});
You'll see that the values printed to the console are always in px, but if you inspect the DOM you'll see that the % value is being set on the element.
Approaching the problem very differently, like vals did, seems like a good approach.