I'm making a header for my site, and I want to have it like a slideshow.
The problem is that the images won't change. It shows only 1 images, and the rest won't show up.
Code:
//Array with the paths to the images
var image = new Array("img/header/header1.png", "img/header/header2.png", "img/header/header3.png");
//imageNumber to change the image, and imageLenght for the array lenght - 1
var imageNumber = 0;
var imageLength = image.length -1;
//Call changeImage()
changeImage();
//Function to change the image
function changeImage() {
//use strict because I use dreamweaver and it needs that(I don't know why)
"use strict";
//Add 1 to imageNumber for choosing a image(in "document.slideshow.src = image[imageNumber];")
imageNumber++;
//Check if image number is not below 0 or above the array index
if(imageNumber < 0) {
imageNumber = imageLength;
} else if(imageNumber > imageLength) {
imageNumber = 0;
}
//Change the image
document.header.src = image[imageNumber];
//recalling every second
setTimeout(changeImage, 1000);
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tommie's HOME</title>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<script type="text/javascript" src="js/header_slideshow.js"></script>
</head>
<body>
<div id="big_wrapper">
<nav>
<ul id="n1">
<li><img src="img/logo.png" width="100px"/></li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<ul id="n2">
<li>About</li>
<li>Shop</li>
</ul>
</nav>
<div id="content">
<header>
<img src="img/header/header1.png" name="header" />
</header>
</div>
</div>
</body>
</html>
If you know the problem, feel free to reply.
Kind regards,
Tom
Related
My goal is to have the image switch once it's been clicked and back again to the original image once the second image has been clicked again. I hope that makes sense. I've been trying this for two days with no success. Any help would be appreciated.
/* global document */
var cactusImage = document.querySelector('img');
cactusImage.onclick = function () {
var myImages = cactusImage.getAttribute('src');
if(myImages === 'images/cactus.jpg') {
cactusImage.setAttribute ('src','images/old-typewriter');
} else {
cactusImage.setAttribute ('src','images/cactus.jpg')
}
}
<head> <!-- Content in the head element will not be displayed by browers-->
<meta charset="utf-8">
<title> My Sample webpage</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
<link href="stylesheets/mystyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Hello World !</h1> <!-- the size can be changed with css-->
<!-- <p class="para">It's a start of a new day</p>-->
<img src="images/cactus.jpg" alt="cactus">
<p class="para">Let us try to be</p>
<ul>
<!-- this is an unordered list-->
<li> Kind</li>
<li> Time</li>
<li> Why</li>
<li> Who</li>
</ul>
<p id="quote">The plan is to create a site that looks like this one, which was created by a popular mystery writier.</p>
<!-- <script>
var myHeading = document.querySelector("h1")
myHeading.textContent = 'Be Kind' ;
</script> -->
</body>
I have fixed your code. There is one error in your code i.e., you haven't mentioned the file extension whether its in .jpg or any other format in setAttribute. So let's say if your old-typewriter is in jpg format than this code will work if you have another format of image just replace jpg with that format and try to rerun this code.
var cactusImage = document.querySelector('img');
cactusImage.onclick = function () {
var myImages = cactusImage.getAttribute('src');
if(myImages === 'images/cactus.jpg') {
cactusImage.setAttribute ('src','images/old-typewriter.jpg');
} else {
cactusImage.setAttribute ('src','images/cactus.jpg')
}
}
I have edited complete code and you can replace your code with below code. It will work.
<!DOCTYPE html>
<html lang="en">
<head> <!-- Content in the head element will not be displayed by browers-->
<meta charset="utf-8">
<title> My Sample webpage</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
<link href="stylesheets/mystyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Hello World !</h1> <!-- the size can be changed with css-->
<!-- <p class="para">It's a start of a new day</p>-->
<img src="images/cactus.jpg" alt="cactus">
<p class="para">Let us try to be</p>
<ul>
<!-- this is an unordered list-->
<li> Kind</li>
<li> Time</li>
<li> Why</li>
<li> Who</li>
</ul>
<p id="quote">The plan is to create a site that looks like this one, which was created by a popular mystery writier.</p>
</body>
<script>
var cactusImage = document.querySelector('img');
cactusImage.onclick = function () {
var myImages = cactusImage.getAttribute('src');
if(myImages === 'images/cactus.jpg') {
cactusImage.setAttribute ('src','images/old-typewriter.jpg');
} else {
cactusImage.setAttribute ('src','images/cactus.jpg');
}
}
</script>
</html>
Holy-moly! So I took "Vipul's" suggestion of wrapping the code in script> and embedding the code in my HTML file which I wasn't doing before and voila. I want to thank all of you for the suggestions made. I hope I can return the favor one day.
Best,
<head> <!-- Content in the head element will not be displayed by browers-->
<meta charset="utf-8">
<title> My Sample webpage</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
<link href="stylesheets/mystyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Hello World !</h1> <!-- the size can be changed with css-->
<!-- <p class="para">It's a start of a new day</p>-->
<img src="images/cactus.jpg" alt="cactus">
<p class="para">Let us try to be</p>
<ul>
<!-- this is an unordered list-->
<li> Kind</li>
<li> Time</li>
<li> Why</li>
<li> Who</li>
</ul>
<p id="quote">The plan is to create a site that looks like this one, which was created by a popular mystery writier.</p>
<button>Change name</button>
<script src="scripts/myscripts.js"> </script>
<script>
var cactusImage = document.querySelector('img');
cactusImage.onclick = function () {
var myImages = cactusImage.getAttribute('src');
if(myImages === 'images/cactus.jpg') {
cactusImage.setAttribute ('src','images/old-typewriter.jpg');
} else {
cactusImage.setAttribute ('src','images/cactus.jpg');
}
}
var myHeading = document.querySelector("h1")
myHeading.textContent = 'Be Kind' ;
-->
This code should work:
index.html
<!doctype html>
<html>
<head>
<title>My Test Page</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<a onclick="switchImg()">
<img src="img1.png" id="img">
</a>
</body>
</html>
script.js
var imgSrc = document.getElementById("img").src
function switchImg() {
if(imgSrc == "img1.png") {
document.getElementById("img").src = "img2.png";
imgSrc = document.getElementById("img").src;
}
}
Just replace the names of the image files.
The dleMonitor and script in the code below are not working. Why? I think that timeout block need to be set in template file. I just want to make logout from profile after timeout. Help me please.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<title>
<ui:insert name="title">CMS</ui:insert>
</title>
<link rel="stylesheet" type="text/css" href="/cms/css/style.css"/>
<h:outputScript name="jsf.js" library="javax.faces" target="head"/>
<script type="text/javascript">
var timeOut = 1000 * 60 * 1; // 30 minutes
var lastActivity = new Date().getTime();
var checkTimeout;
checkTimeOut = function(){
if(new Date().getTime() > lastActivity + timeOut){
window.location.replace('http://sidanmor.com');
}else{
window.setTimeout(checkTimeOut, 1000); // check once per second
}
}
</script>
</h:head>
<body>
<p:idleMonitor timeout="5000" listener="#{LogoutServlet.service()}"
onidle="PF('alertExpire').show();">
</p:idleMonitor>
<p:idleMonitor widgetVar="idle" timeout="300" onidle="alert('OK')" />
<div id="minHeight"></div>
<div id="outer">
<div id="clearheader"></div>
<div id="nav">
<ui:include src="/templates/#{mainCms.edition}/nav.xhtml" />
</div>
<div id="content">
<ui:insert name="content" > Content area. </ui:insert>
</div>
<div id="clearfooter"></div>
</div>
<div id="footer">
www.com.ua
</p>
</div>
<div id="header">
<a href="/cms" class="logo" title="ом">
<span class="main">г</span>
</a>
</div>
</body>
</html>
I'll assume that this code
window.location.replace('http://sidanmor.com');
logs you out from the system. So here
var checkTimeout;
checkTimeOut = function(){
if(new Date().getTime() > lastActivity + timeOut){
window.location.replace('http://sidanmor.com');
}else{
window.setTimeout(checkTimeOut, 1000); // check once per second
}
}
you are assigning the function into checkTimeout variable without executing it, so adding this
checkTimeout(); // runs the function
will execute the function and run it again every second.
OK this is what im trying to do here:
I simply want to randomize the image under dv id splash and i have images placed in the root folder. I tried to randomize the code using function randomImg() here but the output is empty.
Any ideas?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML</title>
<meta name="author" content="blahblahblah" />
<!-- Date: 2014-03-06 -->
<script type="text/javascript">
function randomImg()
{
var images = new Array();
images[0] = "img06.jpg";
images[1] = "img07.jpg";
images[4] = "img08.jpg";
images[5] = "img09.jpg";
images[6] = "img10.jpg";
var random = Math.ceil(Math.random()* images.length);
if (random == 0) { random =1; }
document.write('<img src="images[random]">');
}
</script>
</head>
<body>
<div id="header">
<div id="logo">
<h1>Welcome</h1>
<h2>Flower of the day</h2>
</div>
<div id="splash"><img src="virus.jpg" alt="random images"/></div>
<script type="text/javascript">
document.getElementById('splash').firstElementChild.src = 'img09.jpg';
randomImg();
</script>
</div>
</body>
</html>
Update this html:
<div id="splash"><img id='image' src="virus.jpg" alt="random images"/></div>
Instead of document.write('<img src="images[random]">'); put
document.getElementById('image').src=images[random];
Else
Simply replace document.write('<img src="images[random]">'); with
document.getElementById('splash').firstElementChild.src =images[random];
How do you assign a class dynamically to a paragraph (via javascript/CSS) IF the paragraph contains the wording "Time Recorded:"?
You'll notice that I have manually assigned the paragraph with class class="dyncontent".
However, I'd like to dynamically assign this class to any paragraph tag which contain the words "Time Recorded:".
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript">
if (document.all || document.getElementById){ //if IE4 or NS6+
document.write('<style type="text/css">')
document.write('.dyncontent{display:none;}')
document.write('</style>')
}
</script>
<div class="right">
<ul>
<li class="say agent public">
<p>Description line 1</p>
<p class="dyncontent">Time Recorded: 5MIN(S)</p>
<p>Another description line</p>
</li>
</ul>
</div>
</body>
</html>
You could use jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
$(function(){
$("p:contains('Time Recorded:')").addClass('dyncontents');
});
</script>
$("p").each(function(ele) {if (this.html().indexOf('TimeRecorded') > 1) {$(this).addClass('dyncontent'))}});
I'd do indexOf because it will match easier than innerText
var allP = document.getElementsByTagName('p'),
pLength = allP.length;
while(pLength--){
if(allP[pLength].innerHTML.indexOf('Time Recorded') != -1){
allP[pLength].addClass('dycontents');
}
}
To explain: first you get all the <p> in the document. Then you loop through them. If any of them contain text of Time Recorded you add your class to it.
The following is solution without Jquery
o = document.getElementsByTagName('p');
for (i = 0; i < o.length; i++) {
if (o[i].innerText.indexOf('Time Recorded:') != -1) {
o[i].className = 'theClassYouWant';
}
}
I am pretty new to css + html and am coding my first website. I have a navigation menu setup inside a div, but I want to change the font-weight of the clicked text from lighter to bold when the user clicks on an item in it (text). Please can you tell me how to do this?
Here is my code so far:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>...</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" />
</head>
<body>
<div id="background" />
<div id="navigation" class="navigationPlaceholder">
<div id="navigationText">
<ul>
iOS
Blog
About
Contact
</ul>
</div>
</div>
</body>
</html>
You need to add a click event listener each navigation item and change its font-weight style.
First, start by using an unordered list for your nav
<div id="navigationText">
<ul>
<li>iOS</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
Then, place this script block just before the closing </body> tag
<script type="text/javascript">
var nav = document.getElementById('navigationText');
var navItems = nav.getElementsByTagName('li');
for (var i = 0; i < navItems.length; i++) {
navItems[i].addEventListener('click', function() {
this.style.fontWeight = 'bold';
}, false);
}
</script>
</body>
here you have an example, you should do the same wih your div:
<html>
<head>
<script type="text/javascript">
function displayResult()
{
document.getElementById("p1").style.fontWeight="900";
}
</script>
</head>
<body>
<p id="p1">This is some text.</p>
<br />
<button type="button" onclick="displayResult()">Change font weight</button>
</body>
</html>