OnLoad Click or Trigger embed lightbox [closed] - javascript

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
When I get on one of my pages I want an lightbox to be loaded. I cant figure out how to make it happen.
Part of the jQuery:
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jss/jquery.js"></script>
<script src='http://fliphtml5.com/plugin/LightBox/js/fliphtml5-light-box-api-min.js'></script>
<script>
$(document).ready(function() {
$(".foo").trigger('click');
});
</script>
</head>
The image/link that should be clicked automaticly:
<img class="foo" src="imgs/logo-growpact.png"data-rel='fh5-light-box-demo' data-href='http://online.fliphtml5.com/classified' data-width='1280' data-height='720' data-title='Rootcage'>

First Just remove your
<script type="text/javascript" src="jss/jquery.js"></script>
And try this :
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src='http://fliphtml5.com/plugin/LightBox/js/fliphtml5-light-box-api-min.js'></script>
</head>
<body>
<script>
jQuery(function(){
jQuery('.foo').click();
});
</script>
<img class="foo" src="imgs/logo-growpact.png" data-rel='fh5-light-box-demo' data-href='http://online.fliphtml5.com/classified' data-width='1280' data-height='720' data-title='Rootcage'>
</body>
</html>
Here is the Fiddle: CHECK THIS
UPDATED
<script>
jQuery(function(){
setTimeout(function(){
jQuery('.foo').click();
},400);
});
</script>
FIDDLE

Related

Only first button works. Not sure if its the script. It might be I'm missing a rule [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I know I'm a beginner at this, but I really need to learn the rules. I'm trying to make a simple example of javascript. Its a box with three buttons, but for some reason only one of them works. They do have different ID types, so there must be another rule I don't know.
<!DOCTYPE html>
<html>
<head>
<title>Javascript box</title>
</head>
<body>
<p>Press buttons to change the box</p>
<div id="box" style="height:100px; width:100px; background-color: limegreen; margin:50px"></div>
<br>
<button id="less">less</button>
<button id="more">more</button>
<button id="none">Reset</button>
<script type="text/javascript">
document.getElementById("less").addEventListener("click", function(){
document.getElementById("box").style.height = "25px";
});
document.getElementByID("more").addEventListener("click", function(){
document.getElementById("box").style.height = "150px";
});
document.getElementById("none").addEventListener("click", function(){
document.getElementById("box").style.height = "100px";
});
</script>
</body>
</html>
For the second addEventListener, there's a typo.
In document.getElementByID, the D should not be capitalised.
A good way to debug these issues is to look at the console in developer tools.

THE COUNTER CREATED USING JAVASCRIPT NOT WORKING [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
<!DOCTYPE html>
<html>
<head>
<script>
let counter= 0;
function count() {
counter++;
document.querySelector('#counter').innerHTML= counter;
}
</script>
<title>My Webpage</title>
</head>
<body>
<h1 id="counter">0</h1>
<button onlclick="count()">Click Here!</button>
</body>
</html>
when i am running it on internet explorer and also on an online IDE for html the page displays 0 and click here but when i click on the button the page remains the same and the 0 not changes to 1.
Please help what changes can i make
You have a typo in onclick, here is the working version.
let counter = 0;
function count() {
counter++;
document.querySelector('#counter').innerHTML = counter;
}
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<h1 id="counter">0</h1>
<button onclick="count()">Click Here!</button>
</body>
</html>

toastr is not defined [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
Receiving the following error in developer console when loading the page:
Uncaught ReferenceError: toastr is not defined
Here are the html contents. Can someone please explain to me why toastr is undefined?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
</head>
<body>
<p>Toastr TEST</p>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script scr="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.2/js/toastr.min.js">
</script>
<script>
$(document).ready(function() {
console.log("document.ready");
toastr.info('document.ready');
});
$(window).load(function() {
console.log("window.load");
toastr.info('window.load');
});
</script>
</body>
</html>
You have the script elemen's src attribute wrongly spelled for the toaster.js file, it should be "src" but is "scr".

Jquery and input text onchange show pop up [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I have spent far too much trying to get a simple jquery and input box example to work.
When someone finishes typing something into the input box, I want jquery to popup an alert. Eventually I will be doing some more code with this but right now I just want to get this working!
Here is my example, which doesn't seem to work:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('#selector').change(function () {
alert($('#selector').val());
});
</script>
</head>
<body>
<input type="text" id="selector">
</body>
</html>
Any ideas?
Wrap your jquery inside document.ready() as shown :
<script type="text/javascript">
$(document).ready(function(){
$('#selector').change(function () {
alert($('#selector').val());
});
});
</script>
Read More here about document.ready().
EDIT :- If you want to alert on 'someone finishes typing(as given in your question)' then use .focusout() event as shown :
<script type="text/javascript">
$(document).ready(function(){
$('#selector').focusout(function () {
alert($('#selector').val());
});
});
</script>
DEMO
Add Document ready.
$(function(){
$('#selector').change(function () {
alert($('#selector').val());
});
});
</script>
You must use .focusout
$('#selector').focusout(function () {
alert($('#selector').val());
});
working example http://jsfiddle.net/2w7gyjgy/
You need to put your code in a document ready handler -
<script type="text/javascript">
$(document).ready(function() {
$('#selector').change(function () {
alert($('#selector').val());
});
});
</script>
Use Document.ready in your script yo bootstrap on page
$(document).ready(function(){// apply this
$('#selector').change(function () {
alert($('#selector').val());
});
});

How do I get the value of math.random and test it in an if statement? [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
EDIT Here is new code but it is still not working for me.
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="mycss.css">
<script src="myjavascript2.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<button onclick="myFunction()">Play</button>
<p id="test"></p>
</body>
</html>
Javascript:
var things = ['rock','paper','scissors'];
function myFunction() {
var i = Math.floor(Math.random()*things.length));
document.getElementById("test"+(i+1)).innerHTML=things[i];
}
I added this text so that it would let me post the edit, please ignore this.
You could simply replace your whole code with
var things = ['rock','paper','scissors'];
var i = Math.floor((Math.random()*things.length));
document.getElementById("test").innerHTML=things[i];
This would also let you more easily deal with other operations, like finding a winner.

Categories