So i have some troubles getting to the right place when loading the page. I would like to when i open start.php to go to start.php#forside.
Right now i have something that works a little but its not the right way to do it and i would like something more stable.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ane Lagoni Jewelry</title>
</head>
<body>
<img class="loadBackground" src="img/baggrund.jpg" alt="" />
<span id="counter">0</span>
<script type="text/javascript">
function countdown() {
var i = document.getElementById('counter');
if (parseInt(i.innerHTML) <= 0) {
location.href = 'start.php#forside';
}
i.innerHTML = parseInt(i.innerHTML)-1;
}
setInterval(function(){ countdown(); },75);
</script>
</body>
</html>
Would it be possible with some js?
EDIT:
i solved it with
<?php
header('Location: start.php#forside');
?>
What about this:
var timeLeft = 5;
var interval;
function timer() {
timeLeft--;
document.getElementById('counter').innerHTML = timeLeft;
if (timeLeft == 0) {
location.href = 'start.php#forside';
}
};
interval = setInterval(timer, 1000);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ane Lagoni Jewelry</title>
</head>
<body>
<img class="loadBackground" src="img/baggrund.jpg" alt="" />
<span id="counter"></span>
</body>
</html>
If you want to go to #forside when the page loads, you could use scrollIntoView() instead of replacing location.href.
if (parseInt(i.innerHTML) <= 0) document.getElementById('forside').scrollIntoView()
Further documentation: MDN
Related
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function mouseOn() {
function int() {
document.getElementById("hover").click();
}
var interval = setInterval(int, 0);
}
function mouseOff() { clearInterval(interval); }
</script>
</head>
<body>
<button id="hover"
onmouseenter="mouseOn();"
onmouseleave="mouseOff();">
Hover and Autoclick
</button>
</body>
</html>
It doesn't autoclick when my mouse hovers on it. Do you guys know how to fix this?
You only had one mistake in the initialization of the interval variable inside the function instead of in the main scope, I added a small check of the text changing to red when clicked and it works fine for me now
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var interval
function mouseOn() {
function int() {
document.getElementById("hover").click();
}
interval = setInterval(int, 0);
}
function mouseOff() {
clearInterval(interval);
}
function test() {
document.getElementById("hover").style.color = "red";
}
</script>
</head>
<body> <button id="hover" onclick="test();" onmouseenter="mouseOn();" onmouseleave="mouseOff();">Hover and Autoclick</button> </body>
</html>
I made a simple HTML with JS inside, and its about add 1 to variable and keep running until user gets 1 by rng(random number generator). Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function clicked(){
var num = Math.floor((Math.random() * 100) + 1);
var click = 0;
click = click+1;
if(num == 1){
document.getElementById("print").innerHTML="Congratz! You did it in "+click+" times!";
document.getElementById("press").disabled = true;
}
else{
document.getElementById("print").innerHTML="Not the right number! You 've pressed "+click+" times!";
}
}
</script>
</head>
<h1>TEST YOUR LUCK!</h1>
<body>
<input type="button" value="Press Me!" id="press" onclick="clicked()">
<div id="print"></div>
</body>
</html>
At this code, click = click+1 don't work and click is stuck at 1. What should I do?
The reason your click stuck to 1 is whenever function called you are declaring
click = 0, so it is initialized every time you press the button. So just declare var click outside of function clicked() and see the magic.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var click = 0;
function clicked(){
var num = Math.floor((Math.random() * 100) + 1);
click = click+1;
if(num == 1){
document.getElementById("print").innerHTML="Congratz! You did it in "+click+" times!";
document.getElementById("press").disabled = true;
}
else{
document.getElementById("print").innerHTML="Not the right number! You 've pressed "+click+" times!";
}
}
</script>
</head>
<h1>TEST YOUR LUCK!</h1>
<body>
<input type="button" value="Press Me!" id="press" onclick="clicked()">
<div id="print"></div>
</body>
</html>
I have below code but it's not working, I don't know what I'm doing wrong.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script>
if(window.innerWidth <= 800 && window.innerHeight <= 600) {
window.location = "http://www.youtube.com";
} else {
window.location = "http://www.google.com";
}
</script>
</body>
</html>
can anyone please help me out?
Thanks in advance.
Slightly change your code to:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script>
if(window.innerWidth <= 800 && window.innerHeight <= 600) {
location.href = "http://www.youtube.com";
} else {
location.href = "http://www.google.com";
}
</script>
</body>
</html>
Use location.href instead of window.location.
I know this question is asked frequently but I can not copy a code. I want the image to change after a time. I think I made a lot of wrong coding errors. Below is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="/css/styles.css">
</head>
<body>
<img id="image" src="foto1.jpg">
<script type = "text/javascript">
var image=document.getElementById("image");
function volgendefoto() {
if (images==0) {
image.src="foto2";
}
if (images==1) {
image.src="foto2";
}
if (images==3) {
image.src="foto1";
}
}
function timer(){
setInterval(volgendefoto, 3000);
}
var images= [], x = -1;
image[0]="foto1.jpg";
image[1]="foto2.jpg";
image[2]="foto3.jpg";
</script>
</body>
</html>
Thanks in advance for help,
Jasper
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="/css/styles.css">
</head>
<body>
<img id="image" src="foto1.jpg">
<script type = "text/javascript">
var image = document.getElementById("image");
var currentPos = 0;
var images = ["foto1.jpg", "foto2.jpg", "foto3.jpg"]
function volgendefoto() {
if (++currentPos >= images.length)
currentPos = 0;
image.src = images[currentPos];
}
setInterval(volgendefoto, 3000);
</script>
</body>
</html>
You're not creating your interval, timer is never executed. Here's one that will loop your pictures, assuming that your first image is images is the one preloaded (eg: images[0] === image.src on page load) :
const image=document.getElementById("image");
let images= ["foto1.jpg","foto2.jpg","foto3.jpg"], i = 0;
function volgendefoto() {
i<images.length?i+=1:i=0;
image.src=images[i];
}
setInterval(volgendefoto, 3000);
Javascript/jQuery/jQuery Mobile
The codes below work fine but when I reload/F5 several times of this page, the currentDate and currentTime values are disappear. Then when I reload several times again, its work fine. Does anyone know what is the cause and how to solve it?
<%# include file="/common/taglibs.jsp"%>
<%# include file="/common/jquery-mobile-javascript-css.jspf"%>
<%# include file="/common/jquery-mobile-javascript.jspf"%>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript">
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
function DisplayTime(){
if (!document.all && !document.getElementById)
return
var timeElement=document.getElementById? document.getElementById("curTime"): document.all.tick2;
var CurrentDate=new Date();
var hours=CurrentDate.getHours();
var minutes=CurrentDate.getMinutes();
var seconds=CurrentDate.getSeconds();
var year=CurrentDate.getYear();
if (hours<=9) {
hours="0"+hours;
}
if (minutes<=9) {
minutes="0"+minutes;
}
if (seconds<=9) {
seconds="0"+seconds;
}
if(year < 1000){
year += 1900;
}
var currentTime=hours+":"+minutes+":"+seconds;
var currentDate=dayNames[CurrentDate.getDay()]+' '+monthNames[CurrentDate.getMonth()]+' '+CurrentDate.getDate()+', '+year;
document.getElementById('curDate').innerHTML="<font style='font-size:18px;font-weight:bold;'>"+currentDate+" </b>";
timeElement.innerHTML="<font style='font-size:18px;font-weight:bold;'>"+currentTime+"</b>";
setTimeout(DisplayTime,1000);
}
window.onload=DisplayTime;
</script>
</head>
Html
<body>
<div id="page" data-role="page">
<div data-role="header" data-theme="b" data-position="fixed">
<p class="ui-li-aside"><span id=curDate></span><span id=curTime></span></p>
</div>
</div>
</body>
Finally, i have replaced window.onload=DisplayTime; with using flag eg:
if(flag==true){
DisplayTime();
flag=false;
}
I think window.onload is response earlier before the Displaytime fully loaded and that is why it wont display on the page after reload/refresh page several times