Javascript doesn't work for an image slider (help)? - javascript

I'm quite new to this all, and I just need to have an image slider/transition full width for the top of my page..
only problem is; I've never used or did anything with javascript code writing.
I've been looking for about 5 hours now and tried every thing possible but I just can't make anything work.
Most of the time it's just images stacking up under each other or next to each other.
I'm using dreamweaver CC because I have a deadline for the website on thursday and it's easier.
As you may have read I'm completely useless when it comes to javascript..
Also, I'm quite confused about jquery.. (Yes, I've looked everywhere but I can't understand anything of it, no mather what I do.. it doesn't work)
Please help?

<html>
<head>
<title>Slider</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$().ready(function()
{
setInterval(function()
{
var activeimg = $('#slider').find('img:visible:first');
(activeimg.next('img:hidden').parent().attr("id") == 'slider') ?
activeimg.next('img:hidden').toggle("slow") :
$('#slider').find('img:hidden:first').show("slow");
activeimg.toggle("slow");
}, 3000);
});
</script>
</head>
<body>
<div id="slider">
<img src="img/1.png">
<img src="img/2.png" style="display:none;">
<img src="img/3.png" style="display:none;">
</div>
</body>
</html>

Related

Javascript function not working. Script positioning issue?

I am attempting to get jQuery waypoints to work and I am doing a very basic example and it won't display the window alert that I am attempting to show when scrolled to. I was watching a video of this and I had exactly what the guy had, so I am not sure why it isn't working for me.
Any ideas of why this not initiating?
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
</head>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<section>
<img src="images/big-smile-face.png" class="dipper" alt="">
</section>
<script src="js/waypoints.js"></script> <!-- js/waypoints.js file -->
Javascript - js/waypoints.js file
$(document ).ready(function(){
var $dipper = $('.dipper');
$dipper.waypoint(function () {
alert('waypoint!');
});
});
What browser are you using? There might be some issue there. It seems to be working fine for me and I am not getting any errors.

How to scroll to the bottom of the page when at the bottom of the page (with a div)

I am trying to create a simple chat widget that will automatically load data from a different file, and stay at the bottom of the page unless the user has scrolled up at all. So far I have the loading working but the scrolling has not worked yet. I have tried several different answers on SO as well as many other places, non of them have worked. Also, I am relatively new to JavaScript.
Here is the code i am using, any help would be greatly appreciated!
<!DOCTYPE html>
<html>
<head>
<title>BennerBot v0.7 ~ Chat</title><link rel="stylesheet" type="text/css" href="resource/layout.css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(function (){
$('#load').load('output.html?_=' +Math.random()).fadeIn("slow");
$("#load").attr({ scrollTop: $("#load").attr("scrollHeight") });
}, 1000);
</script>
</head>
<body>
<div id="load" style="overflow:auto"> </div>
</body>
</html>
Here is an example of the file that i am using:
<center><h1>Welcome to BennerBot</h1>Version 0.7</center>
<img src=./resource/OutputLogo.png>08:48 <span style='color:#ff0000'>BennerBot</span>: Sucessfully Connected to Twitch<br>
<img src=./resource/OutputLogo.png>08:48 <span style='color:#ff0000'>BennerBot</span>: Sucessfully Connected to Hitbox<br>
<img src=./resource/OutputLogo.png>08:56 <span style='color:#ff0000'>BennerBot</span>: all the infromations<br>
Look at this fiddle. This may answer your problem
$('html,body').animate({
scrollTop : $('.last').offset().top
},3000);
All you have to do is add scrolling action at documents ready function.

Javascript. OnClick Image src +1

This is my code:
<img name="changer1" alt="before" src="img/.../1/before.jpg"/>
<img name="changer2" alt="after" src="img/.../1/after.jpg"/>
<img src="img/next.png" onclick="changer1.src='img/.../2/before.jpg'; changer2.src='img/.../2/after.jpg'"/>
So when I click on the "next.png" image, both pictures change to the pictures in the new folder. This works perfect. But what I want is, when I click on the "next.png" image, the src code automatic change. So when I click it looks like:
<img src="img/next.png" onclick="changer1.src='img/.../3/before.jpg'; changer2.src='img/.../3/after.jpg'"/>
When i click again it looks like:
<img src="img/next.png" onclick="changer1.src='img/.../4/before.jpg'; changer2.src='img/.../4/after.jpg'"/>
So the folder allways move +1. From 2 to 3. From 3 to 4...
I hope you know what I mean and help me :)
And sorry for my bad english.
You can change it with basic DOM methods in Javascript. Firstly I should point out 'name' is a depreciated attribute, HTML 5 uses the 'id' attribute instead.
Anyway firstly we need to add some labels to the img's so we can find them in JS
<img id="changer1" alt="before" src="img/.../1/before.jpg"/>
<img id="changer2" alt="after" src="img/.../1/after.jpg"/>
I just used your existing name attributes. Figured that was why you'd included them anyway! Then we add a JS function to attach to the on click listener.
<script>
var pictureID = 1;
function moveToNextImage(){
pictureID++;
var string = 'img/.../'+pictureID;
document.getElementById('changer1').src = string + '/before.jpg';
document.getElementById('changer2').src = string + '/after.jpg;
}
</script>
This script keeps a counter for the folder value and uses that to generate a new source string to replace the old one with. The function adds 1 to the counter then changes the src attribute on the 2 elements to the new one.
Your next button should look like this to use the function instead.
<img src="img/next.png" onclick="moveToNextImage()"/>
Okey so my problem now is I have this script allready installed for those 2 images
So my full script is this:
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.beforeafter-1.4.js"></script>
<script type="text/javascript">
$(function(){
$('#container').beforeAfter();
});
</script>
<div id="container">
<div><img id="changer1" alt="before" src="http://www11.pic-upload.de/12.09.14/oha2eiilhnay.jpg"/></div>
<div><img id="changer2" alt="after" src="http://www11.pic-upload.de/12.09.14/gdbsfgzsh2f.jpg"/></div>
</div>
I hope you know what my problem is...
When I remove the "container" ID from the div, the script from Raj works perfekt. But not my time comparison script, you find in the 1 link.
<!DOCTYPE html>
<html>
<body>
<img name="changer1" id="changer1" alt="before" src="img/.../1/before.jpg"/>
<img name="changer2" id="changer2" alt="after" src="img/.../1/after.jpg"/>
<img src="img/next.png" id="test"/>
</body>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
var i = 2;
$("#test").click(function(){
var srcbefore='img/.../'+i+'/before.jpg';
var srcAfter="img/.../"+i+"/after.jpg";
$("#changer1").attr("src",srcbefore);
$("#changer2").attr("src",srcAfter);
console.log(srcbefore+"::"+srcAfter);
i++;
});
});
</script>
</html>
hope this solves your problem..
FYI -
Dont couple your JS code in HTML. Make it seperate.
Use Class or ID instead of name.

Simple Alternative to document.write

I'm teaching myself JavaScript and I'm a little bit stuck. Here's what I'm trying to do: I have an image, and once that image is clicked it disappears and is replaced by two other images. My code works, but it replaces everything on the page instead of just swapping out the images. I think that I have to use innerHTML somehow, but when I tried that, none of the images showed up. My code is below-I'd greatly appreciate any insights or explanations-thank you!
<body>
<h1>JavaScript Image Test</h1>
<script type="text/javascript">
function showImage(){
document.write(puppy);
}
var dog = '<div id="dog"><img src="images/dog.jpg" onclick="showImage();"></div>';
var puppy = '<div id="puppy"><img src="images/puppy.jpg"><img src="images/puppy2.jpg"></div>';
document.write(dog);
</script>
</body>
Write out the dog div as normal html and then replace it's contents:
<body>
<h1>JavaScript Image Test</h1>
<script type="text/javascript">
function showImage(){
document.getElementById("dog").innerHTML = puppy;
}
var puppy = '<img src="images/puppy.jpg"><img src="images/puppy2.jpg">';
</script>
<div id="dog"><img src="images/dog.jpg" onclick="showImage();"></div>
</body>
Look into document.createElement() or the whole jQuery library.
for an image swap you can just get the image (give the image you create an Id first) and then say:
document.getElementById("PetImg").src("images/puppy2.jpg");
To follow with what you're doing you could also take change puppy to do something like:
document.getElementById("dog").appendChild(puppy);
Inner HTML works like this:
<body>
<h1>JavaScript Image Test</h1>
<script type="text/javascript">
function showImage(){
var div = document.getElementById('images');
div.innerHTML = '<img src="images/dog.jpg" onclick="showImage();">'
}
</script>
<div id='images'>
<img src="images/puppy.jpg">
<img src="images/puppy2.jpg">
</div>
</body>
Although there may be better ways of switching the images, if your learning Javascript stay away from jQuery as the other comments may have said its a good idea to learn these fundamentals first.
You could use jQuery... This will replace dog.jpg with puppy.jpg when the link is clicked.
<script type="text/javascript">
function showImage(){
$('#dog').attr('src', 'images/puppy.jpg');
}
</script>
<img id="dog" src="images/dog.jpg" />
You may consider picking up a Javascript framework, jQuery is popular and makes this task relatively easy. Instead of replacing all of the HTML, you can update the src attribute on the image. Something like:
$('#some_div img').attr('src', 'images/some_image.jpg');
Alternatively you can replace the html as well:
$('#some_div').html('<img src="images/some_image.jpg" />');

Showing random div with javascript

So I want to show random divs, and I found this stackoverflow solution here: Showing random divs using Jquery
And the correct answer uses this code: http://jsfiddle.net/nick_craver/RJMhT/
So I want to do the above, but for the life of me, I don't know how.
I thought it would be as simple as
<html>
<head>
<script type="text/javascript">
var divs = $("div.Image").get().sort(function() {
return Math.round(Math.random())-0.5; //random so we get the right +/- combo
}).slice(0,4)
$(divs).appendTo(divs[0].parentNode).show();​​
</script>
<style type="text/css">
div.Image {
display: none;
}​
</style>
</head>
<body>
<div class="Image"><img src="/image1.jpg">1</div>
<div class="Image"><img src="/image2.jpg">2</div>
<div class="Image"><img src="/image3.jpg">3</div>
<div class="Image"><img src="/image4.jpg">4</div>
<div class="Image"><img src="/image5.jpg">5</div>
<div class="Image"><img src="/image6.jpg">6</div>
<div class="Image"><img src="/image7.jpg">7</div>​
</body>
</html>
But apparently not, as nothing shows up on my screen. Can somebody help me? Should be really really easy for someone who knows the least bit about javascript I think.
Thank ya!
You are running the script before the HTML code for the body of the page has been parsed, so the elements doesn't exist yet.
Put your code in the ready event of the page:
$(document).ready(function(){
// your Javascript code goes here
});
Also you are missing the include of the jQuery library, as Conner showed.
You need to import the jQuery library.
Add
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
to your <head> tags before your javascript code.

Categories

Resources