Html and JQuery: How to create slideshow of images or text? - javascript

I recently started learning Javascript and Jquery and wanted create my own slideshow of images or text ticker.
I copied some code and modified but nothing happens when i run it.
HTML is like this,simple i wanted that image to change with fadeout.So i chose array.
<div class='tickr'>
<img src='img006.jpg'>
</div>
JQuery is like this
var i = 1;
function loop() {
var pre = [
'disclosure_left.png',
'disclosure_right.png',
'icon_more.png',
'icon_search.png'
];
var old = $('.tickr img');
var newi = '<img src="'+ pre[1]+'"/>';
newi.hide();
$('.tickr').prepend(newi);
newi.fadeIn(1000);
old.fadeOut(1000, function () {
$(this).remove();
});
i = (i == 3) ? i + 1 : 0;
}
// begin invalid code
setInterval("loop()", 2500)
}

There are a couple of errors in your code that are causing the script not to work:
all of your referneces to the "pre" Array are incorrect. Not pre[1]... pre[i]
Your ternary operator at the end of the function was incorrectly written
Also consider using "Chaining" of JQuery methods to save extra time
these changes are outlined below:
var i=0;
function loop(){
var pre = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
var old = $('.tickr img');
$('.tickr').prepend('<img src="'+ pre[i]+'"/>');
$('.tickr img[src="'+pre[i]+'"]').hide().fadeIn(1000);
old.fadeOut(1000,function(){
$(this).remove();
});
i = (i == 3) ? 0 : i = i + 1;
}
setInterval(loop, 2500);
hope this helps.

You can use this code to add a slider
<div class="holder">
<div class="slider-parent">
<div class="arrow-left2"></div>
<div class="arrow-right2"></div>
<div class="slider2">
<ul>
<li><img src="images/slider/10.jpg" alt="Chapelle's Show" /> </li>
<li><img src="images/slider/11.jpg" alt="Rescue Me" /></li>
<li><img src="images/slider/12.jpg" alt="The Guild" /></li>
<li><img src="images/slider/13.jpg" alt="Trailer Park Boys" /></li>
<li><img src="images/slider/14.jpg" alt="The Lincoln Lawyer" /></li>
<li><img src="images/slider/15.jpg" alt="Bones" /></li>
<li><img src="images/slider/16.jpg" alt="Survivor Man" /></li>
<li><img src="images/slider/17.jpg" alt="WildBoyz" /></li>
<li><img src="images/slider/18.jpg" alt="American Dad" /></li>
</ul>
</div><!--end slider div-->
</div> <!--Slider parent end-->
</div><!--end holder div-->
The css:
.holder{
width:960px;
}
.slider-parent{
width:100%;
height:210px;
background-color:#e1e1e1;
position:relative;
}
.slider2{
position:absolute;
width:780px;
height:200px;
background-color:#e1e1e1;
top:20px;
left:90px;
overflow:hidden;
}
.slider2 ul {
width:1460px;
height:200px;
background-color:#e1e1e1;
}
.slider2 ul li{
width:140px;
height:200px;
background-color:orange;
margin-right:20px;
float:left;
}
.slider2 ul li:hover{
width:140px;
height:200px;
opacity:.8;
margin-right:20px;
float:left;
}
.arrow-left2{
width:60px;
height:60px;
background-color:white;
position:absolute;
top:100px;
left:0px;
background-image: url('../images/arrow-left.png');
background-repeat:no-repeat;
background-position:center;
border-radius:10px;
}
.arrow-right2{
width:60px;
height:60px;
background-color:white;
position:absolute;
top:100px;
right:0px;
background-image: url('../images/arrow-right.png');
background-repeat:no-repeat;
background-position:center;
border-radius:10px;
}
.arrow-left2:hover{
width:60px;
height:60px;
background-color:white;
position:absolute;
top:100px;
left:0px;
background-image: url('../images/arrow-left.png');
background-repeat:no-repeat;
background-position:center;
border-radius:10px;
opacity:.6;
}
.arrow-right2:hover{
width:60px;
height:60px;
background-color:white;
position:absolute;
top:100px;
right:0px;
background-image: url('../images/arrow-right.png');
background-repeat:no-repeat;
background-position:center;
border-radius:10px;
opacity:.6;
}
The JS:
jQuery(".arrow-right2").hover(function() {
count2++;
// alert(count);
if (count2 >4) {
count2 = 4;
jQuery(".slider2 ul").animate({
"margin-right": "0px"
}); //animate method ennnd
} else {
jQuery(".slider2 ul").animate({
"margin-left": "-=160px"
}); //animate method ennnd
}
}) //click right method end
jQuery(".arrow-left2").hover(function() {
count2--;
if (count2 <0){
count2 = 0;
jQuery(".slider2 ul").animate({
"margin-left": "0px"
}); //animate method ennnd
} else {
jQuery(".slider2 ul").animate({
"margin-left": "+=160px"
}); //animate method ennnd
}
}) //click left method end
If this doesn't work let me know, might have forgotten some js...

Related

Scroll from div to next div (different height)

I have got page with 5 div's. My div's have different heigh (it's adaptive). How I can go to next div by mouse when I scroll half of the current div?
I trying fullpage.js and onepage.js but it not working for me, because my div must be different height
#first {
width:100vw;
height:700px;
background-color:lightyellow;
text-align:center;
}
#second {
width:100vw;
height:700px;
background-color:lightblue;
text-align:center;
}
#third {
width:100vw;
height:1000px;
background-color:lightpink;
text-align:center;
}
#fourht {
width:100vw;
height:1500px;
background-color:lightgreen;
text-align:center;
}
#fiveth {
width:100vw;
height:800px;
background-color:lightgray;
text-align:center;
}
<div id="first">1 div</div>
<div id="second">2 div</div>
<div id="third">3 div</div>
<div id="fourht">4 div</div>
<div id="fiveth">5 div</div>
you're need get the height current active elem, and give for container transform translate( 0, -height ) on scroll, onepage and fullpage for there are work with this.
var $container = $('.container');
var $elem = $container.find('.elem');
var $active = $container.find('.active').height();
$(window).on('scroll',function(){
$container.css({"transform":"translate(0, -" + $active + "px)"});
});
body{
height: 100%;
}
.container{
transition: 1s all;
}
#first {
width:100vw;
height:700px;
background-color:lightyellow;
text-align:center;
}
#second {
width:100vw;
height:700px;
background-color:lightblue;
text-align:center;
}
#third {
width:100vw;
height:1000px;
background-color:lightpink;
text-align:center;
}
#fourht {
width:100vw;
height:1500px;
background-color:lightgreen;
text-align:center;
}
#fiveth {
width:100vw;
height:800px;
background-color:lightgray;
text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="first" class="elem active">1 div</div>
<div id="second" class="elem">2 div</div>
<div id="third" class="elem">3 div</div>
<div id="fourht" class="elem">4 div</div>
<div id="fiveth" class="elem">5 div</div>
</div>
I created my version. Look at this https://codepen.io/damates/pen/VXdKjR .
Jquery:
$("#nextDiv, #previousDiv").click(function(){
actualTopOffset = $(window).scrollTop();
areas = $(".area");
find = false;
newPosition = 0;
type = $(this).attr("data-type");
areasCount = $(areas).length;
$.each(areas, function(index, val) {
if(type == "next"){//if we click to go next area
if($(areas).length > (index+1)){
if(actualTopOffset < $(areas[index+1]).offset().top && !find){// ask if area has top offset higher. If yes set new position
find = true;
newPosition = $(areas[index+1]).offset().top;
}
}
}else if(type == "prev"){ //if we click to go previous area
areasCount--;
if((areasCount) >= 0){
if(actualTopOffset > $(areas[areasCount]).offset().top && !find){// ask if area has top offset lower. If yes set new position
find = true;
newPosition = $(areas[areasCount]).offset().top;
}
}
}
});
if(find){ //If we found new position scroll on new position
$('html, body').animate({
scrollTop: newPosition
}, 1000);
}
});
CSS:
#first {
width:100vw;
height:700px;
background-color:lightyellow;
text-align:center;
}
#second {
width:100vw;
height:700px;
background-color:lightblue;
text-align:center;
}
#third {
width:100vw;
height:1000px;
background-color:lightpink;
text-align:center;
}
#fourht {
width:100vw;
height:1500px;
background-color:lightgreen;
text-align:center;
}
#fiveth {
width:100vw;
height:800px;
background-color:lightgray;
text-align:center;
}
#nextDiv, #previousDiv{
position: fixed;
top: 20px;
background: red;
}
#previousDiv{
top: 0px;
}
HTML:
<div id="first" class="area">1 div</div>
<div id="second" class="area">2 div</div>
<div id="third" class="area">3 div</div>
<div id="fourht" class="area">4 div</div>
<div id="fiveth" class="area">5 div</div>
<div id="previousDiv" data-type="prev">Previous div</div>
Next div
EDIT VERSION WITH SCROLL
I change the script for scrolling. Look at to https://codepen.io/damates/pen/VXdKjR

Toggle Play/Pause image buttons HTML5 Video

I have this code
var video = document.getElementById('player');
video.volume = 0;
var muteBtn = document.getElementById('mute');
muteBtn.addEventListener('click',function(){
if(video.volume == 1){
video.volume = 0;
muteBtn.src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/sound-on-beli-1.png";
}
else{
video.volume = 1;
muteBtn.src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/sound-off-beli-1.png";
}
});
.buttons{
display:block;
width:50px;
height:50px;
background-color:black;
float:left;
}
#control{
width:1000px;
height:50px;
clear:both;
background-color:black;
}
<div id="control">
<img class="buttons"src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/play-beli-1.png" onClick="document.getElementById('player').play();"/>
<img class="buttons" src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/pause-beli-1.png" onClick="document.getElementById('player').pause();"/>
<img class="buttons" src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/sound-on-beli-1.png" id="mute">
</div>
And I wish to make Play/Pause button toggle like mute button currently does.
https://jsfiddle.net/t6t0maw7/
I tried duplicating javascript and editing it with play/pause functions but with no luck.
Be free to edit jsfiddle.net and correct answer will be accepted.
JS Codes
var playPause = document.getElementById("play-pause");
playPause.addEventListener("click", function() {
if (video.paused == true) {
// Play the video
video.play();
// Update the button text to 'Pause'
playPause.classList.toggle('pause');
} else {
// Pause the video
video.pause();
// Update the button text to 'Play'
playPause.classList.toggle('pause');
}
});
css
button{
height:50px;
width:50px;
border:none;
outline:none;
}
button.play{
background:url("http://omniawebfactory.com/unik/wp-content/uploads/2016/10/play-beli-1.png");
background-size:100%;
}
button.pause{
background:url("http://omniawebfactory.com/unik/wp-content/uploads/2016/10/pause-beli-1.png");
background-size:100%;
}
Here is updated fiddle
Even kiran Gopal answer is correct.
I wanted to provide code i edited a little bit and it is working like charm.
I defined button images in javascript instead of css.
<video src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/video-za-SaB.mp4" autoplay="true" loop="true" width="100%" height="auto" id="plejer"></video>
<div id="control">
<img src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/pause-beli-1.png" id="play-pause" class="play"></img>
<img class="buttons" src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/sound-off-beli-1.png" id="mute">
</div>
<script>
var video = document.getElementById('plejer');
video.volume = 0;
var muteBtn = document.getElementById('mute');
muteBtn.addEventListener('click',function(){
if(video.volume == 1){
video.volume = 0;
muteBtn.src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/sound-off-beli-1.png";
}
else{
video.volume = 1;
muteBtn.src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/sound-on-beli-1.png";
}
});
var playPause = document.getElementById("play-pause");
playPause.addEventListener("click", function() {
if (video.paused == true) {
// Play the video
video.play();
playPause.src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/pause-beli-1.png";
// Update the button text to 'Pause'
playPause.classList.toggle('pause');
} else {
// Pause the video
video.pause();
playPause.src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/play-beli-1.png";
// Update the button text to 'Play'
playPause.classList.toggle('pause');
}
});
</script>
<style>
.buttons{
display:block;
width:25.6px;
height:25.6px;
float:left;
}
.play{
display:block;
width:25.6px;
height:25.6px;
float:left;
margin-right:5px;
}
#control{
width:1000px;
height:25.6px;
clear:both;
position:absolute;
top:88%;
left:4%;
z-index:1;
}
#media only screen and (max-width: 500px) {
#control{
width:1000px;
height:25.6px;
clear:both;
position:absolute;
top:73%;
left:4%;
z-index:1;
}
</style>

How to display a specific image on clicking a specific list_item in jquery?

I have designed through an image slider . This slider slides through the images well automatically. But I want a specific image also to be displayed when clicking a specific list item just in the below div( the so called round buttons).
That is when even the slider is displaying the 5th image in the queue if I press upon the 2nd list item 2nd image of that sequence should be displayed and again after this slider should normally continue. Again I click back 1,it should display 1st image and again slider rolls on normally.
how to do that ?
Here is my code snippet .
Where am i making it wrong?
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Dialog: Hide the Close Button/Title Bar</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<style type="text/css">
.mySlider
{
//
}
.shadow_div
{
//
}
.mySlider img
{
width:800px;
height:480px;
display:none;
}
.Parent_Slider > a
{
text-decoration:none;
font-weight:bold;
width:32px;
height:32px;
position:absolute;
top:45%;
text-indent:-9999px;
display:block;
border:1px solid white;
}
.Next_Class
{
right: 282px;
background-image: url(Images/rightarrow.jpg);
}
.Prev_Class
{
left:282px;
background-image:url(Images/leftarrow.jpg);
}
ul.Round_Buttons
{
position:relative;
left:35%;
top:5px;
text-decoration:none;
list-style-type:none;
text-indent:-9999px
}
ul.Round_Buttons li
{
float:left;
background-color:white;
margin:1px 5px;
padding:0px 7px;
border-radius:50%;
border-width:1px;
border:1px solid #3610a5;
cursor:pointer;
box-shadow:1px -1px 3px 1px #3610a5;
transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#my_image_slider>#1").show("fade", 1000);
$("#my_image_slider>#1").delay(3500)
.hide("slide", { direction: 'left' }, 800);
var image_count = $("#my_image_slider > img").length; //total number of images
var count = 2;
setInterval(function () {
$(("#my_image_slider #") + count)
.show("slide", {direction: 'right'}, 1000);
$(("#my_image_slider #") + count).delay(3500)
.hide("slide", { direction: 'left' }, 800);
if (count == image_count) {
count = 1;
} else {
count = count + 1;
}
}, 5300);
$(".Round_Buttons li").click(function () {
var id_temp = this.id.charAt(0);
$("my_image_slider #id_temp").show("fade", 1000);
});
});
</script>
</head>
<body>
<div class="Parent_Slider">
<div id="my_image_slider" class="mySlider">
<img id="1" src="Images/bmw.jpg" alt="" title="Audi India"/>
<img id="2" src="Images/audi.jpg" alt="" title="BMW India" />
<img id="3" src="Images/aston-martin.jpg" alt="" title="Aston-Martin APAC" />
<img id="4" src="Images/bugatti.jpg" alt="" title="Buggatti APAC" />
<img id="5" src="Images/koenigsegg.jpg" alt="" title="Koenigsegg APAC" />
</div>
Next
Prev
</div>
<div class="shadow_div" >
<ul class="Round_Buttons">
<li id="1_Round_Buttons">1</li>
<li id="2_Round_Buttons">2</li>
<li id="3_Round_Buttons">3</li>
<li id="4_Round_Buttons">4</li>
<li id="5_Round_Buttons">5</li>
</ul>
</div>
</body>
</html>
You don't need to manually show the target image on round button click
Just reset your count variable to that value and let the setInterval function show it.
$(".Round_Buttons li").click(function () {
count = this.id.charAt(0);
});
id_temp is a variable. So you wan to concatenate with the selectory
$(".Round_Buttons li").click(function () {
var id_temp = this.id.charAt(0);
$("my_image_slider #"+id_temp).show("fade", 1000);
});

jQuery Image slider not working as expected

I have designed an image slider that slides through the pictures . But I want it also to display that specific image associated to that corresponding button user clicks on i.e. if user clicks 3rd button it would display the 3rd image and then it should slide on normally.
I have coded that but it is not working as expected in fact it is not working at all . can anyone point me out where am I doing wrong ?
and help me solve that?
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Dialog: Hide the Close Button/Title Bar</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<style type="text/css">
.mySlider
{
width:800px;
height:480px;
overflow:hidden;
margin:40px auto;
background-image:url(Images/Loading.gif);
background-repeat:no-repeat;
background-position:center;
background-color:#fff;
}
.shadow_div
{
background-image:url(Images/shadow.png);
background-repeat:no-repeat;
background-position:top;
width:800px;
height:30px;
margin:-39px auto;
}
.mySlider img
{
width:800px;
height:480px;
display:none;
}
.Parent_Slider > a
{
text-decoration:none;
font-weight:bold;
width:32px;
height:32px;
position:absolute;
top:45%;
text-indent:-9999px;
display:block;
border:1px solid white;
}
.Next_Class
{
right: 282px;
background-image: url(Images/rightarrow.jpg);
}
.Prev_Class
{
left:282px;
background-image:url(Images/leftarrow.jpg);
}
ul.Round_Buttons
{
position:relative;
left:35%;
top:5px;
text-decoration:none;
list-style-type:none;
text-indent:-9999px
}
ul.Round_Buttons li
{
float:left;
background-color:white;
margin:1px 5px;
padding:0px 7px;
border-radius:50%;
border-width:1px;
border:1px solid #3610a5;
cursor:pointer;
box-shadow:1px -1px 3px 1px #3610a5;
transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
}
</style>
<script type="text/javascript">
var count = 1;
var temp_count = 0;
var _tempClicked = false;
$(document).ready(function () {
$(("#my_image_slider>#")+count).show("fade", 1000);
$(("#my_image_slider>#")+count).delay(3500).hide("slide", { direction: 'left' }, 800);
var image_count = $("#my_image_slider > img").length;//total number of images
$(".Round_Buttons li").click(function () {
temp_count = this.id.charAt(0);
_tempClicked = true;
});
count = count + 1;
setInterval(function () {
alert("In setinterval --- " + count);
$(("#my_image_slider #") + count).show("slide", { direction: 'right' }, 1000);
$(("#my_image_slider #") + count).delay(3500).hide("slide", { direction: 'left' }, 800);
if (count == image_count) {
count = 1;
alert("In first If -- " + count);
}
else if (_tempClicked == true) {
count = temp_count;
alert("In Else If " + count);
}
else {
count = count + 1;
alert("In else -- " + count);
}
}, 5300);
});
</script>
</head>
<body>
<div class="Parent_Slider">
<div id="my_image_slider" class="mySlider">
<img id="1" src="Images/bmw.jpg" alt="" title="Audi India"/>
<img id="2" src="Images/audi.jpg" alt="" title="BMW India" />
<img id="3" src="Images/aston-martin.jpg" alt="" title="Aston-Martin APAC" />
<img id="4" src="Images/bugatti.jpg" alt="" title="Buggatti APAC" />
<img id="5" src="Images/koenigsegg.jpg" alt="" title="Koenigsegg APAC" />
</div>
Next
Prev
</div>
<div class="shadow_div" >
<ul class="Round_Buttons">
<li id="1_Round_Buttons">1</li>
<li id="2_Round_Buttons">2</li>
<li id="3_Round_Buttons">3</li>
<li id="4_Round_Buttons">4</li>
<li id="5_Round_Buttons">5</li>
</ul>
</div>
</body>
</html>
In your click function it is setting a value that is picked up later by setInterval, so it may appear to not work immediately. Also _tempClicked is not reset to false after it's checked in setInterval so you would never see the user's clicks after the first one.
For immediate UI response you can try something like this...
<script type="text/javascript">
var count = 1;
var _tempClicked = false;
$(document).ready(function () {
var image_count = $("#my_image_slider > img").length;//total number of images
increment_counter = function(){
if (count == image_count) {
count = 1;
}
else {
count = count + 1;
}
};
doslide = function(){
$("#my_image_slider>#"+count).show("fade", 1000);
$("#my_image_slider>#"+count).delay(3500).hide("slide", { direction: 'left' }, 800);
increment_counter();
};
doslide();
setInterval(function () {
doslide();
}, 5300);
$(".Round_Buttons li").click(function () {
count = parseFloat(this.id.charAt(0));
// hide currently visible image
$('#my_image_slider').children().each(function(index,obj) {
if( $(obj).css("visibility") != "hidden"){
$(obj).hide();
};
});
$("#my_image_slider>#"+count).show();
});
});
</script>
you have error in your code:
$(("#my_image_slider>#")+count)
this type of selector is wrong, instead use this type of selector
(you should remove inner parentheses):
$("#my_image_slider>#" + count )
NOTE: jQuery selector should be a string.

javascript not setting innerHTML

I'm working on a website for a client and I am using ajax to get the contents of a file, html specifically, and then I am trying to insert that html into a div so that i can display the content. i know that i am getting the contents of the file because i have alerts set to display the request's readyState, status, and responseText, and it is showing the contents of the file in the alert. however when i attmept to insert it into the div using this line: document.getElementsByClassName('content').innerHTML = response; nothing happens. can anyone help me figure this out?
CODE:
JAVASCRIPT:
<script language="javascript" type="text/javascript">
var request = new ajaxRequest();
var fileLoc;
var response;
function getData(fileName){
fileLoc = encodeURI("assets/"+fileName+".html")
alert(fileLoc);
request.onreadystatechange = processData;
request.open("GET",fileLoc, false);
request.send();
alert(request.readyState);
alert(response);
alert(request.status);
document.getElementsByClassName('content').innerHTML = response;
}
function processData(){
response = request.responseText;
/*if (request.readyState==4){
if (request.status==200){
try{
document.getElementsByClassName('content').innerHTML = response;
} catch(e){
alert("Error: " +e.description);
}
}
else{
alert("An error has occured making the request");
}
}*/
}
function home() {
getData("home");
}
function about() {
getData('about');
}
function proof() {
getData('contact');
}
function contact() {
getData('proof');
}
function ajaxRequest(){
var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"]
if (window.XMLHttpRequest)
return new XMLHttpRequest();
else if (window.ActiveXObject){
for (var i=0; i<activexmodes.length; i++){
try{
return new ActiveXObject(activexmodes[i]);
}
catch(e){
alert(e.description);
}
}
}
else
return false
}
HTML:
<body>
<div class="container">
<div class="logo"> <span id="link-home" class="noglow" onclick="javascript: home();" onmouseover="this.className='glow'" onmouseout="this.className='noglow'">Home</span><!-- end link-home -->
<span id="link-about"class="noglow" onclick="javascript: about();" onmouseover="this.className='glow'" onmouseout="this.className='noglow'">About</span><!-- end link-about -->
<span id="link-proof" class="noglow" onclick="javascript: proof();" onmouseover="this.className='glow'" onmouseout="this.className='noglow'">Proof of Concept</span><!-- end link-proof -->
<span id="link-contact" class="noglow" onclick="javascript: contact();" onmouseover="this.className='glow'" onmouseout="this.className='noglow'">Contact</span><!-- end link-contact -->
<div id="home-flower" onclick="javascript: home();" onmouseover="javascript: document.getElementById('link-home').className='glow'" onmouseout="javascript: document.getElementById('link-home').className='noglow'"></div><!-- end home-flower -->
<div id="about-flower" onclick="javascript: about();" onmouseover="javascript: document.getElementById('link-about').className='glow'" onmouseout="javascript: document.getElementById('link-about').className='noglow'"></div><!-- end about-flower -->
<div id="proof-flower" onclick="javascript: proof();" onmouseover="javascript: document.getElementById('link-proof').className='glow'" onmouseout="javascript: document.getElementById('link-proof').className='noglow'"></div><!-- end proof-flower -->
<div id="contact-flower" onclick="javascript: contact();" onmouseover="javascript: document.getElementById('link-contact').className='glow'" onmouseout="javascript: document.getElementById('link-contact').className='noglow'"></div><!-- end other-flower -->
</div><!-- end logo-->
<div class="content"></div><!-- end content -->
</div><!-- end container -->
<div class="footer"></div><!-- end footer -->
CSS:
#charset "UTF-8";
/* CSS Document */
* {
margin:auto;
}
html, body {
height: 100%;
}
.container {
position:relative;
min-height: 100%;
width:800px;
}
.logo{
position:relative;
width:100%;
height:210px;
top:0px;
left:0px;
background:url(images/logo.png);
}
.content {
position:relative;
top:0px;
left:0px;
padding-top:20px;
padding-bottom: 75px !important;
}
.footer {
position:relative;
height: 75px;
margin-top:-75px;
background-color:#06F;
bottom:0px;
left:0px;
}
.large{
font-size:36px;
}
.fltright {
position:relative;
float:right;
top:0px;
left:0px;
width:auto;
height:auto;
}
.fltleft {
position:relative;
float:left;
top:0px;
left:0px;
width:auto;
height:auto;
}
span.glow {
text-shadow: 0px 0px 10px #87CFBF, 0px 0px 10px #87CFBF, 0px 0px 10px #87CFBF;
color:#999;
text-align:center;
}
span.noglow {
color:#999;
text-align:center;
}
#home{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
visibility:visible;
line-height:20px;
}
#about{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
visibility:visible;
}
#proof{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
visibility:visible;
}
#contact{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
visibility:visible;
}
#link-home{
position:absolute;
width:75px;
height:30px;
top:110px;
left:419px;
}
#link-about{
position:absolute;
width:75px;
height:30px;
top:110px;
left:515px;
}
#link-proof{
position:absolute;
width:75px;
height:30px;
top:100px;
left:609px;
}
#link-contact{
position:absolute;
width:75px;
height:30px;
top:110px;
left:708px;
}
#home-flower{
position:absolute;
width:30px;
height:30px;
top:131px;
left:442px;
background:url(images/home-flower.png);
}
#about-flower{
position:absolute;
width:30px;
height:30px;
top:135px;
left:540px;
background:url(images/about-flower.png);
}
#proof-flower{
position:absolute;
width:30px;
height:30px;
top:131px;
left:635px;
background:url(images/proof-flower.png);
}
#contact-flower{
position:absolute;
width:30px;
height:30px;
top:135px;
left:733px;
background:url(images/contact-flower.png);
}
document.getElementByClassName is returning an array. You cannot set the innerHtml of an array you need to loop through the array and set each individual elements inner html;
Working example: http://jsfiddle.net/CYZUL/
function processData(){
response = request.responseText;
/*if (request.readyState==4){
if (request.status==200){
try{
var elements = document.getElementsByClassName('content');
for(var x=0; x < elements.length; x++)
{
elements[x].innerHTML = response;
}
} catch(e){
alert("Error: " +e.description);
}
}
else{
alert("An error has occured making the request");
}
}*/
}
function getData(fileName){
fileLoc = encodeURI("assets/"+fileName+".html")
alert(fileLoc);
request.onreadystatechange = processData;
request.open("GET",fileLoc, false);
request.send();
alert(request.readyState);
alert(response);
alert(request.status);
var elements = document.getElementsByClassName('content');
for(var x=0; x < elements.length; x++)
{
elements[x].innerHTML = response;
}
}
Why not using the jQuery's $.load(); function and save your self a lot of pain and time

Categories

Resources