I have the simple function of changing content of container div.
There is a <table> inside the container <div>, with 2 <td>s, the javascript simply moves left this <table> and it works, but onclick and I need to execute the moving function with time interval.
<div onclick="move(this.children[0])" class="table_wrap">
<div class="table_scroll" style="left: 0px;">
<table cellpadding="0" cellspacing="5" width="1920px">
<tr>
<td style="background-color: red;">
a
</td>
<td style="background-color: blue;">
b
</td>
</tr>
</table>
</div>
</div>
<script language="javascript">
function move(elem) {
var left = 0
function frame() {
left -= 5; // update parameters
elem.style.left = left + 'px' // show frame
if (left == -965) // check finish condition
clearInterval(id)
}
var id = setInterval(frame, 1) // draw every 10ms
}
</script>
And CSS:
<style type="text/css">
.table_wrap{
position:relative;
overflow:hidden;
width: 967px;
height: 250px;
left: -2px;
top: 5px;
}
.table_wrap .table_scroll{
position: absolute;
text-align:center;
white-space:nowrap;
}
</style>
I tryed to use setInterval, but failed.
http://jsfiddle.net/hqztm2dt/1/ here is the JSfiddle, just click on the red line..
Thanks in advance for the attention !
If you need to move it on interval, see this:
http://jsfiddle.net/gsddsxgy/2/ (here the time interval is 3ms)
html:
<div class="table_wrap">
<div id='move' class="table_scroll" style="left: 0px;">
<table cellpadding="0" cellspacing="5" width="1920px">
<tr>
<td style="background-color: red;">
a
</td>
<td style="background-color: blue;">
b
</td>
</tr>
</table>
</div>
</div>
JS:
setInterval(function(){
var elem=document.getElementById('move');
var left = 0
function frame() {
left -= 5; // update parameters
elem.style.left = left + 'px' // show frame
if (left == -965) // check finish condition
clearInterval(id)
}
var id = setInterval(frame, 1) // draw every 10ms
}, 3000);
If you need to move the div on click but after a little time gap, see
this http://jsfiddle.net/gsddsxgy/
code:
function move(elem) {
setTimeout(function(){
var left = 0
function frame() {
left -= 5; // update parameters
elem.style.left = left + 'px' // show frame
if (left == -965) // check finish condition
clearInterval(id)
}
var id = setInterval(frame, 1) // draw every 10ms
}, 1000);
}
The problem with your code in jsFiddle is the move function isn't defined when trying to call it - if you use addEventListener you can bind the method to the click event using just javascript and not the onClick attribute. Using your code:
var elem = document.getElementById('wrapper');
elem.addEventListener('click', move);
function move() {
var left = 0
function frame() {
left -= 5; // update parameters
elem.style.left = left + 'px' // show frame
if (left == -965) // check finish condition
clearInterval(id)
}
var id = setInterval(frame, 1) // draw every 10ms
}
JS fiddle - http://jsfiddle.net/b1q7poj4/2/
Related
I am working on simple solution which requires image slider.
Right now it is just fading in and out. i would like to add some slide animation
I can simply do it using jquery but i don't want to use any external libraries.
var counter = 0;
var slideImgs = [
"http://placesforkidsct.com/wp-content/uploads/2016/07/300x250.png",
"https://abbs.edu.in/wp-content/uploads/2018/01/self-development-300x140.jpg",
"https://abbs.edu.in/wp-content/uploads/2018/01/self-development-300x140.jpg"
]
var imgelm = document.getElementById("300x250_Image");
var inst = setInterval(change, 1500);
function change() {
// elem.innerHTML = text[counter];
imgelm.src = slideImgs[counter];
counter++;
if (counter >= slideImgs.length) {
counter = 0;
// clearInterval(inst); // uncomment this if you want to stop refreshing after one cycle
}
}
change();
<div class="300x250_section_3" style="float: left;margin-top: 13px;">
<div class="300x250_center_img" style="
width: 300px;
height:140px;
float: left;
">
<img src="http://placesforkidsct.com/wp-content/uploads/2016/07/300x250.png" style="width: 300px;text-align: center;display: block; margin:auto; max-height:140px;
" id="300x250_Image" class="slide_1">
</div>
</div>
I have an html file called index.html, and it has this div in there
<body>
<div id="rock"> <img src="rock.PNG" alt="rock" onclick="test()"> </div>
<div id="paper"> <img src="paper.PNG" alt="rock"></div>
<div id="scissors"> <img src="scissors.PNG" alt="rock"> </div>
test is my function, and its within the same file and its written here
<script type="text/javascript">
function test(){
var elem = document.getElementById("rock");
var pos = 0;
var id = setInterval(frame, 10);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
</script>
but when my page runs I click the image, and it does not move. the image is displayed, and the onclick does work (i tested it with alert) but the image won't move... any ideas?
You need to specify the position attribute, likely relative. You could also use absolute or fixed positioning if one of those fits your needs better.
#rock, #paper, #scissors {
position: relative;
}
You need a relative position to be able to change top,bottom,left,right properties
<div id="rock" style="position: relative;">
<img src="rock.PNG" alt="rock" onclick="test()">
</div>
Have you tried change the position of the elements?
https://www.w3schools.com/css/css_positioning.asp
Ex:
<body>
<div id="rock" onclick="test()" style="position:absolute;"> <img src="teste.PNG" alt="rock" > </div>
</body>
<script type="text/javascript">
var pos = 0;
var elem = null;
var id = null;
function test() {
console.log("test");
elem = document.getElementById("rock");
id = setInterval(frame, 10);
}
function frame() {
console.log("frame");
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
</script>
How do I force javascript to do the following?
If the width of an element with the id myBar is 100%, change the style of an element with the ID result to be "block" (it's set to none)?
Please answer!
Code: html
<div id="myProgress">
<div id="myBar"></div>
</div>
<button onclick="move()">Run Malware Code Scan</button>
<p id="result">
<em>Fount 142 threats!</em> Take responsibility please!
</p>
Code: CSS
#myProgress {
width: 100%;
background-color: #ebf442;
}
#myBar {
width: 1%;
height: 30px;
background-color: #ed4949;
}
#result {display:none;}
ul li {list-style-type:square;}
Code: JS
<script>
function move() {
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 3);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
</script>
<script>
if (document.getElementById("myBar").style.width= "100%")
document.getElementById("result").style.display ="block"
</script>
P.S.: I'm a beginner at JS!
Edit
You can change display to block in your frame function when you check if width is >= 100. Wouldn't that solve your problem?
<script>
function move() {
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 3);
function frame() {
if (width >= 100) {
clearInterval(id);
document.getElementById("result").style.display = "block";
} else {
width++;
elem.style.width = width + '%';
}
}
}
</script>
The problem of style properties
The element.style.property returns no value until the css is applied from the tag i.e <div style="..."></div>.
So your code is not working. You should apply the width css from the tag to make your code work.
<div id="myProgress">
<div id="myBar" style="width: 100%;"></div>
</div>
<button onclick="move()">Run Malware Code Scan</button>
<p id="result">
<em>Fount 142 threats!</em> Take responsibility please!
</p>
As Oen44 figured out, there is a syntax error too in your if condition (== is written as =).
I need to make an infinite wall which will pull text from database and show it on the wall. I have written this code -
$(function() {
var x = 0;
var y = 100.0;
var z=0;
setInterval(function() {
x -= 0.1;
y -= 0.1;
z++;
if (x <= -100.0){
$("#h1d1").html("loop div 1 :" + z);
x = 0;
}
if (y <= 0){
$("#h1d2").html("loop div 2 :" + z);
y = 100.0;
}
$('#movimg1').css('left', x + "%");
$('#movimg2').css('left', y + "%");
}, 10);
$("#stopbutton").click(function() {
$('#movimg1').stop();
});
})
But the text are not behaving as I wanted it to behave. It changes in the middle of the screen which I don't want. I need the text to change when it is out of view.
https://jsfiddle.net/oa0wdxcx/2/
A couple more things- I want to add a play/pause button. Any advice on how I could achieve that would be much appreciated. Also I want the divs to be inside #wrap div, but if I change the position attribute to relative, the divs don't remain together.
Thanks in advance.
The problem was in the conditions.
if (x <= -100.0) {
z++;
$("#h1d1").html("loop div 1 :" + z);
x = 100; /* change this line */
}
if (y <= -100.0) { /* change this line */
w++;
$("#h1d2").html("loop div 2 :" + w);
y = 100;
}
the conditions says that if any of these two divs reaches left:-100% then the element must place at the end of queue at left:100%.
And one other thing you can combine these if statements and only use x to do the transition.
For start and stop button to work, you should kill the simulation to stop by using clearInterval() function, and call doSimulate() to start again:
var started = true;
$("#stopbutton").click(function () {
if(started) {
clearInterval(sim);
$(this).html('Start');
started = false;
}else{
doSimulate();
$(this).html('Stop');
started = true;
}
});
Here is jsFiddle With Start/Stop Working.
Look at this JSFiddle, i added one more to get a smooth transition back to start.. The third should contain same message as first.
HTML
<body>
<div class="row">
<div class="col-xs-1"></div>
<div id="wrap" class="col-xs-10">
<div class="movimg message1" id="movimg1">
<h1 class="header">start div 1</h1>
</div>
<div class="movimg message2" id="movimg2">
<h1 class="header">start div 2</h2>
</div>
<div class="movimg message1" id="movimg3">
<h1 class="header">start div 1</h1>
</div>
</div>
<div class="col-xs-1"></div>
</div>
<div class="row">
<button class="button" id="startbutton" style="display:none;">Start</button>
<button class="button" id="stopbutton">Stop</button>
</div>
</body>
JavaScript
$(function () {
var x = 200.0;
var interval;
function start(){
interval = setInterval(function () {
x -= 0.1;
if (x <= 0.0) {
x = 200;
}
$('#movimg1').css('left', (x-200) + "%");
$('#movimg2').css('left', (x-100) + "%");
$('#movimg3').css('left', x + "%");
}, 10);
}
start();
$("#stopbutton").click(function () {
window.clearInterval(interval);
$(this).hide();
$("#startbutton").show();
});
$("#startbutton").click(function () {
start();
$(this).hide();
$("#stopbutton").show();
});
})
CSS
body {
overflow: hidden;
}
#wrap {
width: 80%;
left: 10%;
}
.movimg{
position: absolute;
height: 600px;
width: 100%;
background-image: url('https://s-media-cache-ak0.pinimg.com/736x/89/ed/e5/89ede56bcc8243787e55676ab28f287f.jpg');
}
#movimg1 {
left: 0%;
}
#movimg2 {
left: 100%;
}
#movimg3 {
left: 200%;
}
.header {
text-align: center;
}
.button{
top: 600px;
position: relative;
}
UPDATE
Now with Stop and Start buttons: JSFiddle
What I want to make is an horizontally scrolling DIV "list" just like pretty much every big web site in the internet(netflix for example).
I tried to make it using a main DIV which would be some kind of container, a 2nd div which holds all the content and is inside the first DIV and a lot of DIVs, one for each content module, that go inside the 2nd div.
the parts of the 2nd DIV that overflow the main one should hide, and the content could be shown by moving it(the 2nd DIV).
this is the best I could come up with, but it still doesn't work jsfiddle
This is my HTML
<button onmouseover="left=1" onmouseout="left=0">
<</button>
<div class="container">
<div id="filler" style="left:0px">
<div class="module" style="background:coral;">testing</div>
<div class="module" style="background:lightblue;">testing</div>
<div class="module" style="background:lightgreen;">testing</div>
<div class="module" style="background:salmon;">testing</div>
<div class="module" style="background:lightyellow;">testing</div>
</div>
</div>
<button onmouseover="right=1" onmouseout="right=0">></button>
CSS
.container {
height:50px;
width:200px;
overflow:hidden;
}
#filler {
height:50px;
width:250px;
position:relative;
border-radius:10px;
background:crimson;
}
.module {
width:50px;
height:50px;
border-radius:5px;
float:left;
line-height:50px;
text-align:center;
}
JavaScript:
var feft = 0
//feft stands for filler left
var right = 0
var left = 0
var loaded = 0
window.onload=function(){
loaded=1
}
function move() {
if(loaded == 1){
if (left == 1 && feft <= 250) {
//left == 1 && feft <= filler width
document.getElementById("filler").style.left = feft + 1
}
if (right == 1 && feft >= 0) {
//right == 1 && feft >= 0
document.getElementById("filler").style.left = feft - 1
} //these IFs tests if the filler should move
feft = document.getElementById("filler").style.left
//this sets the feft variable to what it needs to be for the next run of the function
}}
window.setInterval(move(), 100)
I have made a fiddle for you.
demo
HTML code
<button onmouseover="left=1" onClick="move(-1)"><</button>
<div class="container">
<div id="filler" style="left:0px">
<div class="module" style="background:coral;">testing</div>
<div class="module" style="background:lightblue;">testing</div>
<div class="module" style="background:lightgreen;">testing</div>
<div class="module" style="background:salmon;">testing</div>
<div class="module" style="background:lightyellow;">testing</div>
</div>
</div>
<button onmouseover="right=1" onClick="move(1)">></button>
JS Code
var position = 0;
var moduleCount = document.querySelector(".module").length;
window.move = function(number) {
if (number) {
position += number;
if (number == 0 || number > moduleCount) {
position = 0;
}
} else {
if (position <= 4) {
position++;
} else {
position = 0;
}
}
moduleOffset = document.querySelector(".module").offsetWidth;
filler = document.querySelector("#filler");
filler.style.left = -( position* moduleOffset) + "px";
}
setInterval(window.move, 3000);
What you want to do is called "Carousel". I suggest to use bootstrap for example and implement it then in your site.
http://getbootstrap.com/javascript/#carousel
Try adding overflow: scroll as a CSS property to your container div.