I have 3 images and I want to change those images by clicking arrow image but I have a problem with that.
I created some tracers to hold the pictures adresses but it doesn't work.
When I use this function, it just changes the picture from first to third picture. So I can't show that 3 pictures in a row.
What I need is that when I click the arrow image to change the pictures in a row like first picture, second picture and third picture.
function change(){
img_tracer = new Array () ;
img_tracer[0] = '1';
img_tracer[1] = '2';
img_tracer[2] = '3';
images = new Array ();
images[0] = document.getElementById('tech').src = "images1.jpg";
images[1] = document.getElementById('tech').src = "images2.jpg";
images[2] = document.getElementById('tech').src = "images3.jpg";
if ( images[0] )
img_tracer[0];
else if ( images[1] )
img_tracer[1];
else if ( images[2] )
img_tracer[2];
var arrow1 = document.getElementById('arr1');
if ( arrow1 ) {
if (img_tracer[0])
images[1];
else if (img_tracer[1])
images[2];
else if (img_tracer[2])
images[2];
}
}
<table align="center">
<tr><td width="100px;" id="arr1" name="arr1" background="imagesright.jpg"onclick="change()"></td><td>
<img src="images1.jpg" alt="Technology" id="tech" name="tech" align="middle" /></td>
<td width="100px;" id="arr2" name="arr2" background="imagesleft.jpg" style="background-repeat: no-repeat" onclick="change()">
</td></tr>
</table>
I'd appreciate if you'd help me.
I think this is what you're looking for: http://jsfiddle.net/xms7v9vv/
HTML:
<table align="center">
<tr><td width="100px;" id="arr1" name="arr1" background="imagesright.jpg"onclick="change(this)"></td><td>
<img src="images1.jpg" alt="Technology" id="tech" name="tech" align="middle" /></td>
<td width="100px;" id="arr2" name="arr2" background="imagesleft.jpg" style="background-repeat: no-repeat" onclick="change(this)">
</td></tr>
</table>
Javascript:
var images = [];
images[0] = "images1.jpg";
images[1] = "images2.jpg";
images[2] = "images3.jpg";
var currentImage = 0;
var change = function(td){
if(td.getAttribute("name") == "arr1"){
// Go left
--currentImage;
if(currentImage == -1)
currentImage = 2;
}else{
// Go right
++currentImage;
if(currentImage == 3){
currentImage = 0;
}
}
document.getElementById('tech').src = images[currentImage];
};
This should be effective enough. You should only have 1 array with all the images and just update the current index.
var currentId = 0;
function setImage(id, src) {
document.getElementById(id).src = src;
}
var images = [
"http://placehold.it/200x160/ff0000/00ffff.png&text=1",
"http://placehold.it/200x160/00ff00/ff00ff.png&text=2",
"http://placehold.it/200x160/0000ff/ffff00.png&text=3"
];
window.change = function(direction) {
currentId += direction;
if (currentId > images.length - 1) {
currentId = 0;
} else if (currentId < 0) {
currentId = images.length-1;
}
setImage('tech', images[currentId]);
}
.nav {
border: thin solid #000;
text-align: center;
font-size: 64px;
font-weight: bold;
}
<table align="center">
<tr>
<td class="nav" width="100px;" id="arr1" name="arr1" onclick="change(-1)"><</td>
<td align="center">
<img src="http://placehold.it/200x160/ff0000/00ffff.png&text=1" alt="Technology" id="tech" name="tech" />
</td>
<td class="nav" width="100px;" id="arr2" name="arr2" onclick="change(1)">></td>
</tr>
</table>
Related
I made this button, and added Math.floor(Math.random() * 2 + 1) to it to give wrong and correct randomly. and i added 5 images as lifes that whenever I get wrong one of the images will get hidden or removed. but I'm getting 2 problems:
the first one is that whenever an image gets deleted it wont stop and it deletes all the other images without returning to the math.random.
second problem is that when i get wrong answer it takes to clicks to start deleting the images.
I've been trying to fix it but I just couldn't figure it out!
you can run the code yourself and try it if you didnt understand what i ment!
if you do help, pleas explain to me what was the problem!!
var button1 = 1;
var span1 = document.getElementById("count1");
var span2 = document.getElementById("count2");
document.getElementById("button1").onclick = function() {
let btn1 = Math.floor(Math.random() * 2 + 1);
if (btn1 == 1) {
if (parseInt(span1.innerHTML) < 10)
span1.innerHTML = parseInt(span1.innerHTML) + 1;
} else if (parseInt(span2.innerHTML) < 5) {
let imageToDelete = 1;
document.getElementById("button1").onclick = function() {
document.getElementById("image_" + imageToDelete).style.visibility = "hidden";
imageToDelete++;
span2.innerHTML = parseInt(span2.innerHTML) + 1;
}
}
}
<input id="button1" type="button" value="click me?" style="height: 100px; width: 100px;">
<div style="margin-top: 40px;"></div>
<div id="output">
<img id="image_1" src="/images/person1.jpg">
<img id="image_2" src="/images/person1.jpg">
<img id="image_3" src="/images/person1.jpg">
<img id="image_4" src="/images/person1.jpg">
<img id="image_5" src="/images/person1.jpg">
</div>
<p id="p1">CORRECT: <span id="count1">0</span></p>
<p id="p2">ERROR: <span id="count2">0</span></p>
Something like this maybe?
//var button1 = 1;
var span1 = document.getElementById("count1");
var span2 = document.getElementById("count2");
var lives = document.getElementsByClassName("img");
var deads = 0;
document.getElementById("button1").onclick = function() {
if (deads >= 5) {
alert('no more lives');
return;
}
var rand = Math.random();
var sp1 = parseInt(span1.innerHTML);
var sp2 = parseInt(span2.innerHTML);
if (rand < .5 && sp1 < 10) {
if (deads > 0) deads--;
sp1++;
span1.innerHTML = sp1;
lives[deads].style.visibility = 'visible';
} else {
sp2++;
span2.innerHTML = sp2;
lives[deads].style.visibility = 'hidden';
deads++;
}
}
<input id="button1" type="button" value="click me?" style="height: 100px; width: 100px;">
<div style="margin-top: 40px;"></div>
<div id="output">
<img id="image_1" class='img' src="/images/person1.jpg">
<img id="image_2" class='img' src="/images/person1.jpg">
<img id="image_3" class='img' src="/images/person1.jpg">
<img id="image_4" class='img' src="/images/person1.jpg">
<img id="image_5" class='img' src="/images/person1.jpg">
</div>
<p id="p1">CORRECT: <span id="count1">0</span></p>
<p id="p2">ERROR: <span id="count2">0</span></p>
I want a make a object which can change color after scrolling (down) 100px and change back to default after scrolling back (up). I'm using this code but not working
jQuery:
$(window).scroll(function() {
//After scrolling 100px from the top...
if ( $(window).scrollTop() >= 100 ) {
$('#menu').css('background', '#fff');
//Otherwise remove inline styles and thereby revert to original stying
} else {
$('#menu').removeAttr('style');
}
});
and my html:
<body>
<table>
<tr>
<td id="menu" class="title">
TITLE
</td>
<td style="width:40px;">
<div class=" ico">
<img src="search.svg" alt="search" style="width: 25px;" />
</div>
</td>
<td style="width: 40px;">
<div class=" ico">
<img src="menu.svg" alt="search" style="width: 25px;"/>
</div>
</td>
</tr>
</table>
</body>
Here you go :
$(function(){
var navColors = ['red', 'blue'];
var changeNavState = function(nav, newStateIndex) {
nav.data('state', newStateIndex).stop().css({
backgroundColor : navColors[newStateIndex]
});
};
var boolToStateIndex = function(bool) {
return bool * 1;
};
var maybeChangeNavState = function(nav, condState) {
var navState = nav.data('state');
if (navState === condState) {
changeNavState(nav, boolToStateIndex(!navState));
}
};
$('#header_nav').data('state', 1);
$(window).scroll(function(){
var $nav = $('#header_nav');
if ($(document).scrollTop() > 100) {
maybeChangeNavState($nav, 1);
} else {
maybeChangeNavState($nav, 0);
}
});
});
http://jsfiddle.net/2rqp6r6z/
i am using this code for stick top menu
you can customize it for your self and if you couldn't just say then i change it my self but if you , yourself do it is better
<script>
$('.top-menu').addClass('original').clone().insertAfter('.top-menu').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide();
scrollIntervalID = setInterval(stickIt, 10);
function stickIt() {
var orgElementPos = $('.original').offset();
orgElementTop = orgElementPos.top;
if ($(window).scrollTop() >= (orgElementTop)) {
orgElement = $('.original');
coordsOrgElement = orgElement.offset();
leftOrgElement = coordsOrgElement.left;
widthOrgElement = orgElement.css('width');
$('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement+'px').show();
$('.original').css('visibility','hidden');
} else {
$('.cloned').hide();
$('.original').css('visibility','visible');
}
}
</script>
How Do I make it so that when I click Next It will go to the next array image and when I click Previous it will go to the previous array image. I am trying to make a image slide show that has two buttons. one to go to the next picture and one to go to the previous picture
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
var images = new Array(7);
images[0] = "Images/lab1.jpeg";
images[1] = "Images/lab2.jpeg";
images[2] = "Images/lab3.jpeg";
images[3] = "Images/lab4.jpeg";
images[4] = "Images/lab5.jpeg";
images[5] = "Images/lab6.jpeg";
images[6] = "Images/lab7.jpeg";
images[7] = "Images/lab8.jpeg";
var num_img = 7;
var cur_img = 1;
function goback() {
if(cur_img>0)
{
cur_img = cur_img - 1;
}else{
alert("This is the first image");
}
}
function gofwd(){
if(cur_img < num_img){
cur_img = cur_img + 1;
}else{
alert("This is the last image");
}
}
</script>
</script>
</head>
<body>
<div style="border: solid 12px blue; width: 500px; height: 500px;">
<img src="Images/lab1.jpeg" alt="lab1" height="500" width="500">
</div><br>
<input type="button" value="PREVIOUS" id="prev" name="prev" style="color:blue" onclick="goback();" >
<input type="button" value="NEXT" id="next" name="next" style="color:blue" onclick="gofwd();" >
</body>
</html>
First of all
switch is a keyword in javascript so you can not use it as an identifier. So rename you array of images. give an id to your image in the HTML and then try the code below.
<script>
var images = new Array(7);
images[0] = "Images/lab1.jpeg";
images[1] = "Images/lab2.jpeg";
images[2] = "Images/lab3.jpeg";
images[3] = "Images/lab4.jpeg";
images[4] = "Images/lab5.jpeg";
images[5] = "Images/lab6.jpeg";
images[6] = "Images/lab7.jpeg";
var numimg = 7;
var curimg = 1;
function goback() {
var im=document.getElementById("image");
if(curimg>0)
{
im.src = images[curimg-1];
curimg = curimg - 1;
}else{
alert("This is the first image");
}
}
function gofwd(){
var im=document.getElementById("image");
if(curimg < numimg){
im.src = images[curimg+1];
curimg = curimg + 1;
}else{
alert("This is the last image");
}
}
</script>
The HTMl will be like
<div style="border: solid 12px blue; width: 500px; height: 500px;">
<img src="Images/lab1.jpg" alt="lab1" height="500" width="500" id="image" />
</div><br>
<input type="button" value="PREVIOUS" id="prev" name="prev" onclick="goback();" >
<input type="button" value="NEXT" id="next" name="next" onclick="gofwd();" >
Here is my code. I have tried everything I can think of. I have tried using just div ID's and have now tried classes. Nothing seems to work. I just want the number 2 not to be visible if there is no entry beside it. It doesn't matter if it is in a table or not.
Thanks.
<style type="text/css">
<!--
.leftone {
float: left;
height: auto;
width: auto;
}
.rightone {
float: left;
height: auto;
width: auto;
}
.lefttwo {
float: left;
height: auto;
width: auto;
}
.righttwo {
float: left;
height: auto;
width: auto;
}
-->
</style>
<table width="400" border="0" cellpadding="0" cellspacing="3" id="tableONE">
<tr>
<td width="200" height="50"><div class="leftone">1.)</div></td>
<td width="200" height="50"><div class="rightone">The Number One</div></td>
</tr>
<tr>
<td width="200" height="50"><div class="lefttwo">2.)</div></td>
<td width="200" height="50"><div class="righttwo"></div></td>
</tr>
</table>
<p> </p>
<script type="text/javascript">
<!--
function shownumbers() {
var myNum1 = '[.rightone]';
if(myNum1 != ''){
document.getElementById('.leftone').style.display = "block";
}
else if(myNum1 == ''){
document.getElementById('.leftone').style.display = "none";
}
var myNum2 = '[.righttwo]';
if(myNum2 != ''){
document.getElementById('.lefttwo').style.display = "block";
}
else if(myNum2 == ''){
document.getElementById('.lefttwo').style.display = "none";
}
}
//-->
</script>
You cannot use getElementById with classes. Also, you don't need the '.' or '#' when using these methods in javascript. Below should do what you are asking. Although if there is only ever 1 item of class 'rightone' and 'leftone' you should use ID's.
var myNum1 = document.getElementsByClassName('rightone')[0].innerHTML;
if(myNum1 != ''){
document.getElementsByClassName('leftone')[0].style.display = 'block';
} else if(myNum1 == ''){
document.getElementsByClassName('leftone')[0].style.display = 'none';
}
A more elegant solution would be:
HTML:
<table width="400" border="0" cellpadding="0" cellspacing="3" id="tableONE">
<tr>
<td><div class="left">1.)</div></td>
<td><div class="right">The Number One</div></td>
</tr>
<tr>
<td><div class="left">2.)</div></td>
<td><div class="right"></div></td>
</tr>
</table>
JS:
var right = document.getElementsByClassName('right');
for(var i=0;i<right.length;i++){
if(!right[i].innerHTML){
right[i].parentNode.parentNode.getElementsByClassName('left')[0].style.display = 'none';
} else {
right[i].parentNode.parentNode.getElementsByClassName('left')[0].style.display = 'right';
}
}
Kinda similar to Jason's, but I spent the time so I'mma post it. ;)
JSFiddle: http://jsfiddle.net/H3UNH/1/
HTML:
<table id="tableONE">
<tr>
<td width=50>1.)</td>
<td >The Number One</td>
</tr>
<tr>
<td>2.)</td>
<td></td>
</tr>
</table>
(I do still like the width attribute for cells in tables; it can be moved to CSS but this is one of those exceptions for me where the markup and presentation can have a tiny bit of overlap. Move everything else to CSS. Your mileage may vary.)
CSS:
td { padding: 3px; text-align:left; height: 50px;}
JavaScript:
function shownumbers() {
var rows = document.getElementsByTagName('tr');
for(var i=0,len=rows.length;i<len;i++) {
var _this = rows[i];
var rowCells = _this.getElementsByTagName('td');
if(rowCells[1].innerHTML == "") {
_this.style.display = "none";
}
}
}
shownumbers();
(for the purpose of the demo, I just separately call shownumbers. If you want it to be automatic, make it self-invoking. Otherwise call it from wherever it makes sense)
I think the more important lesson here isn't the JavaScript, actually. ;) I understand that not everyone is writing perfect JavaScript (heck, mine's not perfect either). But you really need to understand the purpose of CSS and classes in general to write good maintainable markup and presentation for the web! I hope that doesn't sound too condescending or anything; it wasn't meant to be.
By using the :empty selector.
var els = document.querySelectorAll('td div:empty'),
i = els.length,
el;
for(;i--; ) {
el = els[i];
do {
el = el.parentNode;
} while ( el.nodeName != 'TR' )
el.style.display = 'none';
}
Fiddle: http://jsfiddle.net/uAUt8/
I am having a problem getting onprogress event for the audio tag working on chrome. it seems to work on fire fox.
http://www.scottandrew.com/pub/html5audioplayer/ works on chrome but there is no progress bar update. When I copy the code and change the src to a .wav file and run it on fire fox it works perfectly.
<style type="text/css">
#content
{
clear:both;
width:60%;
}
.player_control
{
float:left;
margin-right:5px;
height: 20px;
}
#player
{
height:22px;
}
#duration
{
width:400px;
height:15px;
border: 2px solid #50b;
}
#duration_background
{
width:400px;
height:15px;
background-color:#ddd;
}
#duration_bar
{
width:0px;
height:13px;
background-color:#bbd;
}
#loader
{
width:0px;
height:2px;
}
.style1
{
height: 35px;
}
</style>
<script type="text/javascript">
var audio_duration;
var audio_player;
function pageLoaded() {
audio_player = $("#aplayer").get(0);
//get the duration
audio_duration = audio_player.duration;
$('#totalTime').text(formatTimeSeconds(audio_player.duration));
//set the volume
}
function update(){
//get the duration of the player
dur = audio_player.duration;
time = audio_player.currentTime;
fraction = time/dur;
percent = (fraction*100);
wrapper = document.getElementById("duration_background");
new_width = wrapper.offsetWidth*fraction;
document.getElementById("duration_bar").style.width = new_width + "px";
$('#currentTime').text(formatTimeSeconds(audio_player.currentTime));
$('#totalTime').text(formatTimeSeconds(audio_player.duration));
}
function formatTimeSeconds(time) {
var minutes = Math.floor(time / 60);
var seconds = "0" + (Math.floor(time) - (minutes * 60)).toString();
if (isNaN(minutes) || isNaN(seconds))
{
return "0:00";
}
var Strseconds = seconds.substr(seconds.length - 2);
return minutes + ":" + Strseconds;
}
function playClicked(element){
//get the state of the player
if(audio_player.paused)
{
audio_player.play();
newdisplay = "||";
}else{
audio_player.pause();
newdisplay = ">";
}
$('#totalTime').text(formatTimeSeconds(audio_player.duration));
element.value = newdisplay;
}
function trackEnded(){
//reset the playControl to 'play'
document.getElementById("playControl").value=">";
}
function durationClicked(event){
//get the position of the event
clientX = event.clientX;
left = event.currentTarget.offsetLeft;
clickoffset = clientX - left;
percent = clickoffset/event.currentTarget.offsetWidth;
duration_seek = percent*audio_duration;
document.getElementById("aplayer").currentTime=duration_seek;
}
function Progress(evt){
$('#progress').val(Math.round(evt.loaded / evt.total * 100));
var width = $('#duration_background').css('width')
$('#loader').css('width', evt.loaded / evt.total * width.replace("px",""));
}
function getPosition(name) {
var obj = document.getElementById(name);
var topValue = 0, leftValue = 0;
while (obj) {
leftValue += obj.offsetLeft;
obj = obj.offsetParent;
}
finalvalue = leftValue;
return finalvalue;
}
function SetValues() {
var xPos = xMousePos;
var divPos = getPosition("duration_background");
var divWidth = xPos - divPos;
var Totalwidth = $('#duration_background').css('width').replace("px","")
audio_player.currentTime = divWidth / Totalwidth * audio_duration;
$('#duration_bar').css('width', divWidth);
}
</script>
</head>
<script type="text/javascript" src="js/MousePosition.js" ></script>
<body onLoad="pageLoaded();">
<table>
<tr>
<td valign="bottom"><input id="playButton" type="button" onClick="playClicked(this);" value=">"/></td>
<td colspan="2" class="style1" valign="bottom">
<div id='player'>
<div id="duration" class='player_control' >
<div id="duration_background" onClick="SetValues();">
<div id="loader" style="background-color: #00FF00; width: 0px;"></div>
<div id="duration_bar" class="duration_bar"></div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
</td>
<td>
<span id="currentTime">0:00</span>
</td>
<td align="right" >
<span id="totalTime">0:00</span>
</td>
</tr>
</table>
<audio id='aplayer' src='<%=getDownloadLink() %>' type="audio/ogg; codecs=vorbis" onProgress="Progress(event);" onTimeUpdate="update();" onEnded="trackEnded();" >
<b>Your browser does not support the <code>audio</code> element. </b>
</audio>
</body>
Chrome doesn't fire the progress event when it has the media in cache, that might be your problem.
The progress event doesn't fire in Chrome for WAV files but it does for MP3.
There is a known timeupdate bug: http://code.google.com/p/chromium/issues/detail?id=25185.