I read the W3Schools JavaScript Chapter and am trying to make an image slide. I did everything first and it works properly for the first round. For example lets say I click the next button it will keep sliding the slides till the end of the slideshow and then if I click once more it will reset every thing but never works after that. Also when I include the DocType deceleration it won't even work from the beginning.
Here is the HTML with CSS and JavaScript Code:
<html lang="en">
<head>
<title>
Project Name
</title>
<style>
*
{
margin: 0px;
padding: 0px;
}
body
{
margin: 25px;
}
#slideshow
{
width : 300px;
height: 300px;
border: 1px solid #000;
margin: 0 auto;
}
#slides
{
position: relative;
width: 900px;
height: 300px;
transition: 1s;
}
.slide
{
width : 300px;
height: 300px;
float: left;
}
</style>
</head>
<body>
<div id="slideshow">
<div id="slides">
<img class ="slide" src="images/slide1.jpg">
<img class="slide" src="images/slide2.jpg">
<img class="slide" src="images/slide3.jpg">
</div>
</div>
<button onclick="prev()">prev</button>
<button onclick="next()">next</button>
<script type="text/javascript">
var value = 300;
function next()
{
var slider = document.getElementById("slides");
if(value == 900)
{
slider.style.left = "0";
value = 300;
}
else
{
slider.style.right = value;
value += 300;
}
}
</script>
</body>
Hardcoding JS values is bad practice.
One day you'll change the slider width in CSS and wonder what's going on with the JS part...
make it responsive
calculate dynamically the number of slides with JS
create a counter variable c=0
prev/next manipulate your counter value (loop using %)
tranistion-animate to -100*c in percentage %
var slider = document.getElementById("slides"),
slide = slider.querySelectorAll(".slide"),
tot = slide.length, c = 0;
function anim() {
c = c<0 ? tot-1 : c%tot;
slider.style.left= -100*c +"%";
}anim();
function next() { ++c; anim(); }
function prev() { --c; anim(); }
#slideshow {
height: 150px;
border: 1px solid #000;
overflow:hidden;
}
#slides {
position: relative;
height: 100%;
width: 100%;
white-space:nowrap;
font-size:0; /* removes 4px inline-block gap */
transition: 1s; -webkit-transition: 1s;
}
.slide {
font-size: 1rem; /* restore font size */
display:inline-block;
vertical-align:top;
width : 100%;
height: 100%;
background: none 50%;
background-size: cover;
}
<div id="slideshow">
<div id="slides">
<div class="slide"
style="background-image:url(http://placehold.it/800x600/0fb);"></div>
<div class="slide"
style="background-image:url(http://placehold.it/800x600/bf0);"></div>
<div class="slide"
style="background-image:url(http://placehold.it/800x600/f0b);"></div>
</div>
</div>
<button onclick="prev()">prev</button>
<button onclick="next()">next</button>
Now that your slider is responsive, put into any container and it's width will accommodate.
You must set back the right property to 0 once you finish one round. In your code you are setting left as 0 but your right still remains 900 . This is the problem, So change your code to set right to 0
if(value == 900)
{
slider.style.right = "0";
value = 300;
}
Related
HTML Code:
<div id="screenLeft" class="screen"></div>
<div id="screenTop" class="screen"></div>
<div id="container">
<div id="content">
Test Possition of Text and whatnot1<br />
Test Possition of Text and whatnot2<br />
Test Possition of Text and whatnot3<br />
Test Possition of Text and whatnot4<br />
</div>
</div>
CSS code:
.screen {
position: fixed;
background: black;
}
#screenTop {
height: 100px;
width: 100%;
background: green;
}
#screenLeft {
height: 100%;
width: 100px;
}
#screenTop { top: 0; }
#screenLeft { left: 0; }
#content {
margin: 100px;
}
I have two Questions
how can I bring black sidebar on top of header while both is fixed?
How can I show content div in whole screen if sidebar & header display is none?
enter image description here
First question:
How can I show sidebar on top of header while both are positioned fixed?
simple answer, you can use z-index = number (z-index = 100 for example),
reference: MDN
The z-index CSS property sets the order of a positioned element and its descendants. Overlapping elements with a larger z-index cover those with a smaller one.
example code:
.screen {
position: fixed;
start: 0;
}
#screenTop {
height: 100px;
width: 100%;
top: 0;
z-index:10;
}
#screenLeft {
height: 100%;
width: 100px;
top:100px; /*To Prevent Overlapping*/
z-index:9;
}
#content{
margin: 50px;
}
Second question:
How can I show content div in whole screen if sidebar & header display is none?
You will need to use a little javascript to perform this,
Add the following code before the end of your <body> tag,
then modify it for your needs.
<script>
function ToggleContent()
{
let screenTopDisplay = document.getElementById("screenTop").style.display;
let screenLeftDisplay = document.getElementById("screenLeft").style.display;
let toggleMargin =
(screenTopDisplay = "" || screenTopDisplay = "block") && (screenLeftDisplay = "" || screenLeftDisplay = "block");
let container = document.getElementById("container");
if(toggleMargin)
{
container.style.margin = "100px 0px 0px 100px";
}
else
{
container.style.margin = "0px";
}
}
</script>
*remember to call the function when you show/hide the .screen ToggleContent()
For your first Question add these 2 properties top:0px;(to start form to 0 of screen) and z-index:99; (to stack over the topbar) to sidebar id #screenLeft
For your 2nd Question after removing sidebar and top bar add this css
#content { margin-left: 0; margin-top: 0; }
it will remove margin form content div.
.screen {
position: fixed;
background: black;
}
#screenTop {
height: 100px;
width: 100%;
background: green;
}
#screenLeft {
height: 100%;
width: 100px;
top:0;
z-index:99;
}
#screenTop { top: 0; }
#screenLeft { left: 0; }
#content {
margin: 100px;
}
<div id="screenLeft" class="screen"></div>
<div id="screenTop" class="screen"></div>
<div id="container">
<div id="content">
Test Possition of Text and whatnot1<br />
Test Possition of Text and whatnot2<br />
Test Possition of Text and whatnot3<br />
Test Possition of Text and whatnot4<br />
</div>
</div>
Hoping for a little guidance. I'm making a "slide up" menu for a site i'm using and I have it working, except it's not responsive. Ideally, i'd like to have it so whatever I put in the content under "Book Now" would be hidden no matter the size, while keeping "Book Now" shown.
The way I have it set up now, I have to be very verbose about heights, and it doesn't seem to really want to work on mobile.
Hoping you kind folks could point me in the right direction of what CSS I actually need to make this work!
Here is the JSFiddle:
https://jsfiddle.net/yg13exft/
<style>
/* footer fixed Menu stuff */
.bottomNav{
overflow: hidden;
position: fixed;
bottom: -210px;
width: 100%;
transition: all .7s ease-in-out;
z-index: 9999;
}
.tipBar{
text-align: center;
transition: all .7s ease-in-out;
}
.tipBar a{
color: #6c0505;
background: orange;
display: inline-block;
padding: 5px 15px 5px 15px;
}
.menuBar{
background-color: #6c0505;
display: grid;
grid-template-columns: auto auto;
justify-content: center;
padding-top: 10px;
height: 100%;
}
.bottomNav p{
color: black;
}
.displayNone{
display: none;
}
.tipToggleAnim{
bottom: 46px;
}
.bottomMenuAnim{
bottom: 0;
}
.rightCol img{
max-height: 200px;
}
</style>
<div class="bottomNav" id="bottomNav">
<div class="tipBar" id="tipBar">
<a id="bookNowButton" class="animate__animated animate__backInUp">
Book Now!
</a>
</div>
<div id="dialog" class="menuBar" >
<div class="leftCol">
<p>
TEST TEXT HERE! :)
</p>
</div>
<div class="rightCol">
<img src="https://images.unsplash.com/photo-1589883661923-6476cb0ae9f2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80" alt="cat">
</div>
</div>
</div>
<script>
let toggledVar = false;
function popupMenu(){
let menuToggle = document.getElementById("bottomNav");
let divButton = document.getElementById("tipBar");
if (toggledVar == true){
toggledVar = !toggledVar;
menuToggle.classList.remove('bottomMenuAnim');
}
else {
toggledVar = !toggledVar;
menuToggle.classList.add('bottomMenuAnim');
}
}
let buttonTest = document.getElementById("bookNowButton");
buttonTest.addEventListener("click", popupMenu, false);
</script>
Thank you.
I would use clientHeight to get the height of the dialog section and then set that as the bottom attribute so it will always be hidden. That way no matter what the height of the content, it will always know how many pixels to set bottom to and hide the div, but keep the Book Now showing.
There is a window load event because we need the DOM to fully load before we retrieve dialog div height.
Then, we use animate to smooth the change of the bottom attribute. Animate takes two parameters, the keyframes and the options. In the options, fill makes the animation run and stay in its end state. You can adjust the duration to fit your liking.
// We wait for the page to fully load, then we can grab the height of the div
window.addEventListener('load', function() {
// Toggle boolean
let toggledVar = false;
// Set toggle to Book now button
let menuToggle = document.getElementById("bookNowButton");
// Get bottomNav section
let bottomNav = document.getElementById("bottomNav");
// Get the height of the div
let hiddenSection = document.getElementById("dialog").clientHeight;
// Set bottom css attribute
bottomNav.style.bottom = `-${hiddenSection}px`;
function popupMenu(){
if (toggledVar == false) {
// Set bottom css attribute to 0px to reveal it
bottomNav.animate([
// keyframes
{ bottom: `-${hiddenSection}px` },
{ bottom: '0px' }
], {
duration: 1000,
fill: 'forwards'
});
toggledVar = true;
} else {
// Set bottom css attribute to hide it
bottomNav.animate([
// keyframes
{ bottom: '0px' },
{ bottom: `-${hiddenSection}px` }
], {
duration: 1000,
fill: 'forwards'
});
toggledVar = false;
}
}
menuToggle.addEventListener('click', popupMenu);
});
* {
box-sizing: border-box;
}
html, body {
padding: 0;
margin: 0;
width: 100%;
min-height: 100vh;
}
#bottomNav {
max-width: 100%;
position: fixed;
overflow: hidden;
left: 0px;
}
#bookNowButton {
display: block;
margin: 0 auto;
text-align: center;
padding: 1rem;
max-width: 200px;
background-color: yellow;
cursor: pointer;
}
#dialog {
background-color: #6c0505;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1rem;
padding: 1rem;
}
.rightCol img {
max-width: 100%;
}
<div id="bottomNav">
<span id="bookNowButton">Book Now!</span>
<div id="dialog">
<div class="leftCol">
<p>
TEST TEXT HERE! :)
</p>
</div>
<div class="rightCol">
<img src="https://images.unsplash.com/photo-1589883661923-6476cb0ae9f2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80" alt="cat">
</div>
</div>
</div>
Hey guys i am trying to make transition when the scroll it pass the first div( that is with the class name "one") height it will resize it width to 20% and the second div ( with the class name "two") will take the remaining width of the "one" class. <== when this happened it will turn the "two" class to a display as a block rather than inline-block. the problem that i have right now is that when the ".one" class it got resize to 20% the ".two" class disappear same as the below class and when the ".two" class disappear when i scroll up it only resize the ".one" class div halfway . can anyone help me how to achieve this? here's my code and some image that i made of a transition that i want to make in case still confused of what i want to achieve. thanks for the help.
in here it shown from this image to the left shown display of the page before scroll and from the right image shown when the user scroll the page that will reduce the size of the div class ".
in this section of image from the left shown when the width of the div class ".one" is have width of 20% it will not resize it again and for the right image shown when the div class ".one" have width of 20% it will change the css of div class ".two" from inline block to display block and when it scroll it will show the third div.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
overflow-x: hidden;
height: 2000px;
}
.container {
width: 100vw;
height: 100vh;
position: fixed;
}
.content-wrapper {
width: 100vw;
white-space: nowrap;
}
.section {
width: 100vw;
height: 100vh;
position: relative;
display: inline-block;
}
.section label {
font-size: 100px;
color: white;
text-align: center;
transform: translateX(-50%) translateY(-50%);
}
.one {
background-color: red;
top: 0;
z-index: -999;
}
.two {
background-color: yellow;
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div class="container">
<div class="content-wrapper">
<div class="section one">
<label>one</label>
</div>
<div class="section two">
<label>two</label>
</div>
</div>
<div class="revelation" style="width: 100vw; height: 100vh; background-color: black;">
<label>Tree</label>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<script type="text/javascript">
$(window).scroll(function() {
var winScrollTop = $(window).scrollTop() + 0,
zeroSizeHeight = $(document).height() - $(window).height(),
newSize = 1400 * (1 - (winScrollTop / zeroSizeHeight));
let box = document.querySelector('.one');
let width = box.clientWidth;
console.log(newSize)
if(newSize > 331.13772455089827 ){
$(".one").css({
"width":newSize
})
}else if(newSize <= 331.13772455089827){
$(".section").css({
"display":"block"
})
}
});
</script>
</body>
</html>
Im trying to do a slider menu, i have a div with a tape background, all is working fine when it's animating to the left by the background-repeat, but when it is animating to the right and it get to the left border of the background it get disappears because background-repeat doesn't repeat to the left, just to the right.. There's way to make the background repeat to the left?
And the list inside the "slider" div doesn't move at the same velocity of "slider" div
Here is the HTML code
<!DOCTYPE html>
<html>
<head>
<title>Prueba</title>
<link type = "text/css" rel = "stylesheet" href = "PruebaIndex.css">
<script type = "text/javascript" src = "jquery-2.1.4.js"></script>
<script>
$(document).ready(function(){
var mode = 0; // 0 Left - 1 Right
autoSlider();
function autoSlider(){
mode = 0;
$("#slider").animate({left: "-=60px", width: "+=60px"}, 'slow', 'linear', autoSlider);
}
function slideLeft(){
mode = 1;
$("#slider").animate({left: "+=60px", width: "-=60px"}, 'slow', 'linear', slideLeft);
}
$("#slider").mouseover(function(){
$("#slider").stop();
});
$("#slider").mouseout(function(){
if(mode === 0)
autoSlider();
else
slideLeft();
});
$("#Left").mouseover(function(){
$("#slider").stop();
autoSlider();
});
$("#Right").mouseover(function(){
$("#slider").stop();
slideLeft();
});
});
</script>
</head>
<body>
<div id = "wrapper">
<div id = "slider">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div id = "Left">
Left
</div>
<div id = "Right">
Right
</div>
</div>
</body>
</html>
And the CSS code
*{
padding: 0;
margin: 0;
}
#slider {
padding: 0;
left: 0px;
background-color: black;
background-image: url("http://s11.postimg.org/msh93rl8z/Tira_Fotografica.png");
background-repeat: repeat-x;
width: 800px;
height: 304px;
position: relative;
overflow: hidden;
}
#wrapper {
width: 800px;
height: 1000px;
margin: 0 auto;
text-align: center;
overflow: hidden;
}
#Left {
width: 100px;
height: 100px;
position: absolute;
color: white;
background-color: black;
margin-top: -200px;
margin-left: -100px;
}
#Right {
width: 100px;
height: 100px;
position: absolute;
color: white;
background-color: black;
margin-top: -200px;
margin-left: 800px;
}
#slider ul {
list-style: none;
}
#slider ul li {
display: inline-block;
width: 200px;
height: 200px;
position: relative;
background-color: white;
margin: 50px 10px 0px 0px;
}
I tried to put the code on JSFiddle but it doesn't run..
Sorry for my bad english
it works. see here: https://jsfiddle.net/cLv4hLfy/
take a look at the #slider element.
this values are annoying ;-)
<div style="left: -5863.5px; width: 6663.8px; overflow: hidden;" id="slider">
left is decreasing and width is getting bigger and bigger.
when the slider goes to the opposite direction left gets bigger and width convergates to 0px.
[EDIT]: so the background is not animated. the div is animated. what about fix the div and animate something in the div. you could do something also with background position when its repeated.
<body>
<div id="parent_scroll">
<div id="slider">
<div class="slides">Slide1</div>
<div class="slides">Slide2</div>
<div class="slides">Slide3</div>
</div>
</div>
</body>
<style>
#parent_scroll{
width: 800px;
height: 350px;
border: 1px solid grey;
margin-left: auto;
margin-right: auto;
overflow: hidden;
position: relative;
}
#slider{
width: 2430px;
border: 1px solid green;
height: 350px;
position: absolute;
}
.slides{
width: 800px;
height: 350px;
border: 1px dotted blue;
float: left;
background-color: grey;
font-size: 30px;
text-align: center;
}
I am trying to implement a slide show sort of a feature. But i am not sure what logic goes into the javascript over here, i know i need to use a setInterval() function. The only part is how i would work out the width of the element with the id:"slider". Pointers would be helpful
EDIT: trying to implement this without jQuery
I see in your CSS that your widths are static, but if you were to add slides you should
calculate the #slider width using the width of .slides times the amount of slides..
Then, save your .slides width (including margin) as your offset, and animate #slider's left position using the offset..
EDIT: Actually, there's another technique I've been fiddling with so you won't have to calculate the widths, and that's using display inline-block like this:
#slider { white-space:nowrap;}
.slides { display:inline-block;}
this will automatically have all your slides on the same line and then you can animate using margins.
Let me know if that clears it up for you.. do you need a code example?
EDIT: example (using css animations)
Javascript
var slider, slides, offset, amount, _timer, _curindex = 0;
function initSlider() {
slider = document.getElementById("slider");
slides = document.getElementsByClassName("slides");
offset = slides[0].offsetWidth+2;
amount = slides.length;
slider.style.width = offset*amount;
_timer = setInterval(moveSlide, 3000);
}
function moveSlide() {
_curindex = (_curindex == amount-1) ? 0 : _curindex+1;
slider.style.left = -_curindex*offset+"px";
}
initSlider();
FIDDLE
Like this? Pure HTML CSS:
<div id="parent_scroll">
<div id="slider">
<div class="slides"><img src="http://placehold.it/350x150/ff0000/000000" alt=""></div>
<div class="slides"><img src="http://placehold.it/350x150/00ff00/000000" alt=""></div>
<div class="slides"><img src="http://placehold.it/350x150/0000ff/000000" alt=""></div>
</div>
</div>
DIV#parent_scroll{
width: 350px;
height: 150px;
overflow: hidden;
}
DIV#slider{
position: relative;
width: 1050px;
animation: slideme 5s infinite;
-webkit-animation: slideme 5s infinite;
}
#keyframes slideme {
0% {left: 0;}
33% {left: -350px;}
67% {left: -700px;}
100% {left: 0;}
}
#-webkit-keyframes slideme {
0% {left: 0;}
33% {left: -350px;}
67% {left: -700px;}
100% {left: 0;}
}
DIV.slides{
float: left;
}
DIV#slider:before, DIV#slider:after{
display: table;
content: "";
}
DIV#slider:after{
clear: both;
}
DIV#slider{
zoom: 1
}
http://jsfiddle.net/yLTKe/3/
Add JS to make it dynamic
you should try this code
<div id="div1" class="slides" style="width:800px...">Slide1</div>`
and in js code
var slide1 = document.getElementById("div1");
//if you want to add width
slide1.style.width= parseInt(slide1.style.width) + 100 + "px";`