I'm trying to make a carousel that after 3 seconds changes image.
I got 3 images as slide1, slide2, slide3
and thanks to the methods change1,change2,change3 changes image.
I would like to automate everything like this:
function time(change1, change2, change3) {
this.change1 = change1;
this.change2 = change2;
this.change3 = change3;
t = setInterval(change1 && change2 && change3, 3000); //obviously it doesn't work.
}
/*
---------------ANOTHER METHOD-----------------
*/
function time() {
t = setInterval(check, 3000);
}
function check() {
if (slide1.style.display = "inline-block") {
change2();
} else if (slide2.style.display = "inline-block") {
change3();
} else {
change1();
}
}
but i don't know how
Any ideas?
well that is an easy job, here is a simple example on how you could do it
I used jq but you will get the idee. if you want only js that let me know will do it to
/// use jq for batter effekt
var sliders = $(".container > div");
var current;
function change() {
if (!current)
current = sliders.first();
else {
current.hide("fast");
current = current.next();
}
if (current.length == 0)
current = sliders.first();
current.show();
}
setInterval(change, 2000);
.container {
display: flex;
border: 1px solid #CCC;
}
.container>div {
width: 100%;
min-height: 100px;
}
.container>div:not(:first-child){
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div style="background:red;"></div>
<div style="background:green"></div>
<div style="background:blue"></div>
</div>
Related
So I have a button on my website that looks like this:
<button id = "bgb">Toggle Background</button>
And I want this button to turn on and off the background in a box. Therefore I made a script in JavaScript to do this.
var bg = true;
document.querySelector("#bgb").onclick = function(){
const mb = document.querySelector(".Main-Box");
if (bg == true)
{
mb.style.background = "white";
bgb = false;
}
if (bg == false)
{
mb.style.background = "linear-gradient(45deg,#F17C58, #E94584, #24AADB , #27DBB1,#FFDC18, #FF3706)";
bgb = true;
}
}
However, when I click on the button, It tuns it off fine but when I want to turn it back on it doesn't work; any suggestions?
bg is always set true.
why you change "bgb"?
try
<script>
var bg = true;
document.querySelector("#bgb").onclick = function () {
const mb = document.querySelector(".Main-Box");
if (bg) {
mb.style.background = "red";
bg = false;
} else {
mb.style.background = "linear-gradient(45deg,#F17C58, #E94584, #24AADB , #27DBB1,#FFDC18, #FF3706)";
bg = true;
}
}
</script>
Here is a demo of what you want:
let bg = true;
document.querySelector("#bgb").onclick = function(){
const mb = document.querySelector(".Main-Box");
if (bg == true)
{
mb.style.background = "white";
bg = false;
}
else if (bg == false)
{
mb.style.background = "linear-gradient(45deg,#F17C58, #E94584, #24AADB , #27DBB1,#FFDC18, #FF3706)";
bg = true;
}
}
.Main-Box {
width: 100vw;
height: 100vh;
background: linear-gradient(45deg,#F17C58, #E94584, #24AADB , #27DBB1,#FFDC18, #FF3706);
}
<div class='Main-Box'>
<button id="bgb">Click Me!</button>
</div>
#cSharp already gave you a solution to your issue. However to make your entire code shorter and easier you could simply use: classList.toggle() and apply the changes by toggeling a CSS-Class on and off:
document.querySelector('#bgb').addEventListener("click", function() {
document.querySelector('.Main-Box').classList.toggle('class-name');
});
.Main-Box {
width: 100vw;
height: 100vh;
background: linear-gradient(45deg, #F17C58, #E94584, #24AADB, #27DBB1, #FFDC18, #FF3706);
}
.class-name {
background: white;
}
/* for visualisation only */
body {
margin: 0;
}
<div class='Main-Box'>
<button id="bgb">Click Me!</button>
</div>
If it is not necessary, I will not use global variables to control the state.
In addition, you can also create a new class attribute, and you only need to control the class when switching.
Below are examples of both approaches for your reference.
document.querySelector('input[type=button]').onclick = function() {
switchLinearGradientBackground('.main-box', 'linear-gradient');
}
function switchLinearGradientBackground(selector, switchClassName) {
const elems = document.querySelectorAll(selector);
for (let index = 0; index < elems.length; index++) {
elems[index].classList.toggle(switchClassName);
}
}
body {
display: flex;
}
.main-box {
flex-direction: column;
display: flex;
width: 200px;
height: 200px;
}
.linear-gradient {
background: linear-gradient(45deg, #F17C58, #E94584, #24AADB, #27DBB1, #FFDC18, #FF3706) !important;
}
<div class='main-box' />
<input type='button' value="switch background">
document.querySelector('input[type=button]').onclick = function() {
switchLinearGradientBackground('.main-box');
}
function switchLinearGradientBackground(selector) {
const elems = document.querySelectorAll(selector);
const grad = 'linear-gradient(45deg, #F17C58, #E94584, #24AADB, #27DBB1, #FFDC18, #FF3706)';
for (let index = 0; index < elems.length; index++) {
const style = elems[index].style;
style.background = style.background.length > 0 ? '' : grad;
}
}
body {
display: flex;
}
.main-box {
flex-direction: column;
display: flex;
width: 200px;
height: 200px;
}
<div class='main-box' />
<input type='button' value="switch background">
I am trying to understand function construction so I can cut down on my repeated code. All the snippets I have see deal with returning values and was hoping someone could shed some light on why this doesn't work.
<div id = 'box1' style = 'background-color: green; height: 100px; width: 50px' >
</div>
var box = $('#box1');
function pushCard(x){
if(x.style.opacity == 0.5){
x.style.opacity = 1;
}
else {
x.style.opacity = 0.5;
}
}
box.click(pushCard(box));
You don't want to call the function as you pass it. You can just pass the function, then when you click it will pass the event. The element is the event target
var box = $('#box1');
function pushCard(event) {
let x = event.target
if (x.style.opacity == 0.5) {
x.style.opacity = 1;
} else {
x.style.opacity = 0.5;
}
}
box.click(pushCard);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='box1' style='background-color: green; height: 100px; width: 50px'>
</div>
You can also use this to get the clicked object:
var box = $('#box1');
function pushCard() {
if (this.style.opacity == 0.5) {
this.style.opacity = 1;
} else {
this.style.opacity = 0.5;
}
}
box.click(pushCard);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='box1' style='background-color: green; height: 100px; width: 50px'>
</div>
function scrollWin() {
setInterval(function(){ for(var i = 0; i < 1250; i++){
window.scrollTo(0, i);} }, 3);
}
li {
float: left;
list-style: none;
margin: 10px;
}
.reset {
clear: both;
}
div {
width: 500px;
height: 600px;
background-color: blue;
margin: 20px;
}
<ul>
<li>Home</li>
<li><button onclick="scrollWin()"></a>about</button>
<li>profile</li>
<li>contact</li>
</ul>
<div class="reset"></div>
<section>
<div id="home1"></div>
<div id="about1">About</div>
<div id="profile1"></div>
<div id="contact"></div>
</section>
so im trying to make the for loop increase the height by 1 each loop which will make the screen drop by the height of one. Using a time interval for a very short amount of time I would believe this would make a smooth scroll down the page.
I'm writing a sample code in php where scroll bar appears if the loop run for second time as in the question you asked I hope.
so define a variable first and then increase it in your loop as follows:
<?php
$i=1;
for(condition;condition;condition){
//your code here
$i++;
}
if($i<1){
echo '<script>
$(".yourdivclass").css("overflow","scroll");
</script>';
}
?>
This bit of JavaScript should perform nicely what you are asking. I have a fiddle that I have set up as a usage example. Please check it out and let me know if you have any questions.
https://jsfiddle.net/6gp7srfr/1/
function smoothScroll(x, y) {
var b = document.body;
var xIncrement = 1;
var yIncrement = 1;
var scrollY = function () {
yIncrement += 1;
window.scroll(b.scrollLeft, b.scrollTop + yIncrement);
if (b.scrollTop < y) {
if (requestAnimationFrame) {
requestAnimationFrame(scrollY);
} else {
setTimeout(scrollY, 15);
}
}
};
var scrollX = function () {
xIncrement += 1;
window.scroll(b.scrollLeft + xIncrement, b.scrollTop);
if (b.scrollLeft < x) {
if (requestAnimationFrame) {
requestAnimationFrame(scrollX);
} else {
setTimeout(scrollX, 15);
}
}
};
if (y > 0) {
scrollY();
}
if (x > 0) {
scrollX();
}
}
i have tried it within the loop function but it says the function isn't being used so i put it outside still doesnt work and i dont know how to fix it as i thought that would work, rmember first day on javascript, thanks for the help in advance and please no jquery.
<html>
<head>
<style type="text/css">
#PictureContainer {
height: 300px;
width: 500px;
margin: 0 auto;
overflow: hidden;
display: inline-block;
}
#SliderWrapper {
width: 628px;
height: 300px;
margin: 0 auto;
overflow: hidden;
}
#image {
height: 300px;
width: 500px;
}
#Next {
float: right;
}
#Before {
float: left;
}
</style>
</head>
<body>
<div id="SliderWrapper">
<img id="Next" src="Forward.png" alt="Forward">
<img id="Before" src="Back.png" alt="Back">
<div id="PictureContainer">
<img id="image" src="html.png" alt="HTML">
</div>
</div>
<script language="javascript" type="text/javascript">
var i = 1;
function loop() {
i = i+1;
if(i == 5){
i = 1;
}
if (i == 1) {
document.getElementById('image').src = "html.png";
} else if(i == 2) {
document.getElementById('image').src = "css3.png";
} else if (i == 3) {
document.getElementById('image').src = "WebdevLogo's.jpg";
} else {
document.getElementById('image').src = "WebdevLogo's.jpg";
}
}
var pictureloop = setInterval(loop, 3000);
function Forward() {
if(i == 5) {
i = 1;
} else {
i = i+1;
}
}
function Back() {
if(i == 1) {
i = 4;
} else {
i = -1;
}
}
</script>
</body>
</html>
You have a function called loop, but you never call it, so it's never changing the source attribute of the image. In the forward and back functions, add a call to the loop function at the end. There are also a few problems internally with Back() that I've fixed.
function Forward() {
if(i == 5) {
i = 1;
} else {
i++;
}
loop();
}
function Back() {
if(i == 1) {
i = 5;
} else {
i--;
}
loop();
}
Within the loop() function, consider using a switch block instead of all those else ifs. Also in the loop function, use the increment operator - i++; - which increases the value by 1, rather than the manual statement i = i+1; Also, the if i==5 statement is redundant. You already have it in your Forward function.
this is more of a question for https://codereview.stackexchange.com/ but here are a few things that would make this code cleaner.
instead of duplicating image setting code, declare an array of images.
var images = ['img1.png','img2.png'];
var currentImage = 0;
function forward() {
currentImage++;
if (currentImage > images.length-1) currentImage == 0;
setImage()
}
function setImage() {
document.getElementById('image').src = images[currentImage];
}
setInterval(forward, 5000);
I want text to bounce of the left and right sides of a div tag (#header). It works fine when it bounces of the right, then goes back and hits the left. The problem is that after it hits the left and starts to go right again it never hits the right side. It just keeps going and the window scrollbar appears. It appears as soon as it hits the left side. It seems that the div tag.
var finishedGoingRight = false;
setInterval(function() {
slideText();
}, 10);
function slideText(){
if(!finishedGoingRight){
$('#header h1').css("right","-=1");
}else{
$('#header h1').css("left","-=1");
}
if($('#header h1').css("right") == "20px"){
finishedGoingRight = true;
}
if($('#header h1').css("left") == "485px"){
finishedGoingRight = false;
}
}
Hope I explained it clearly :)
Debugging your code revealed that $('#header h1').css("right") always equals "auto", unless you've set it explicitly somewhere.
This works:
http://jsfiddle.net/7z3a3/1/
var finishedGoingRight = false;
setInterval(function() { slideText(); }, 10);
function slideText() {
if (!finishedGoingRight) {
$('#header h1').css("left", "+=1");
} else {
$('#header h1').css("left", "-=1");
}
if ($('#header h1').position().left >= $('#header').width()-$('#header h1').width()) {
finishedGoingRight = true;
} else if ($('#header h1').position().left <= 0) {
finishedGoingRight = false;
}
}
Here's my solution using animate:
JS:
var inner = $('#inner'), widthInner = inner.width(), outer = $('#outer'), widthOuter = outer.width();
function animateRight() {
inner.animate({ left: widthOuter - widthInner }, 1000, function() {
animateLeft();
});
}
function animateLeft() {
inner.animate({ left: 0 }, 1000, function() {
animateRight();
});
}
animateRight();
HTML
<div id="outer"><h2 id="inner">Inner</h2></div>
CSS
div, h2 { border: 1px solid black; }
#outer { width: 300px; height: 200px; }
#inner { margin-top: 75px; width: 50px; position: relative; }
http://jsfiddle.net/rHEQA/2/