I've a script (an ads one) and I'd like to to trigger him out only when a button on my site has been clicked for X times.
<script type="text/javascript" src="ADS_URL"></script>
Let's assume this is my script. This is what I've done to find when the button has been clicked 5 times, but after it I'm blocked. I don't know how to trigger the script out.
Where should I paste the script? Thank you for the help!
$("#button").click(function() {
nclick++;
if (nclick == 7) {
nclick = 0;
// Make something
};
});
The following code works fine for me:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
"use strict";
var nclick = 0;
$(document).ready(function() {
// ===== START OF QUESTION CODE =====
$("#button").click(function() {
nclick++;
if (nclick == 7) {
nclick = 0;
alert("Pretend that this is an ad.");
}
});
// ===== END OF QUESTION CODE =====
});
</script>
</head>
<body>
<a id="button" href="#">Click me!</a>
</body>
</html>
If your code is not running:
Check the browser console. Are there any errors?
Is jQuery included on your page?
Are you attaching the #button function when the page is ready? You might be attempting to add an event before the button is created.
Have you declared an nclick variable and initialised it to zero?
EDIT
Okay, the question has now been clarified - the ad script appears as soon as the page is loaded, but you want to delay it until a button has been clicked 7 times. The solution is basically the same as the above, though:
ads.js
alert("hello, world!");
example.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
"use strict";
var nclick = 0;
var ad_script = null;
$(document).ready(function() {
// ===== START OF QUESTION CODE =====
$("#button").click(function() {
nclick++;
if (nclick == 7) {
nclick = 0;
ad_script = document.body.appendChild(document.createElement("script"));
ad_script.src = "ads.js"
}
else if (ad_script)
{
document.body.removeChild(ad_script);
ad_script = null;
}
});
// ===== END OF QUESTION CODE =====
});
</script>
</head>
<body>
<a id="button" href="#">Click me!</a>
</body>
</html>
Simply add the script into the page once the counter reaches 7.
create script tag & remove script tag
cScript();
var nclick=0;
$("#button").click(function() {
nclick++;
if (nclick == 7) {
rScript();
nclick = 0;
// Make something
};
});
function cScript(){
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = 'ADS_URL';
$("#someElement").append( script );
}
function rScript(){
var html = $("#someElement");
html.find('script').remove();
}
If i understood you correctly your JQuery event is not getting executed?
You need to add the JQuery's source first:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js? ver=1.4.2"></script>
<script type="text/javascript" src="ADS_URL"></script>
</head>
If you don't have the source for JQuery included it won't know what you mean. with $("#button").click
Related
I want to create a while loop between 2 html page (Or a prompt where I can ask a question) and make so that if I give the wrong answer I get redirected to another HTML page that will remain for 5 seconds before getting back to the prompt.
I am trying the following code
<!DOCTYPE html>
<html>
<body>
<script>
var pass;
pass = prompt("The corret answer is 1");
if (pass == "1") {
document.location.href = "https://stackoverflow.com/questions/40539097/redirect-user-to-another-html-page-if-the-condition-is-true";
} else {
setTimeout(function(){
window.location.href = 'prova2.html';
}, 5000);
}
</script>
<body>
</html>
The Problem is that the page "prova2.html" came out after 5 second.
Instead I want that it remain visible for 5 seconds.
But that's exactly what your code does: if the result of prompt is '1' it redirects to SO, otherwise you start a timer that redirects to prova2 after 5 seconds.
If you want the behaviour you're describing, you need to redirect to prova2.html immediately and in the code for prova2.html you need to set a timeout that redirects you back after 5 seconds:
in original.html (or whatever it's called for you):
<!DOCTYPE html>
<html>
<body>
<script>
var pass = prompt("The corret answer is 1");
if (pass == "1") {
document.location.href = "https://stackoverflow.com/questions/40539097/redirect-user-to-another-html-page-if-the-condition-is-true";
} else {
document.location.href = 'prova2.html';
}
</script>
<body>
</html>
in prova2.html:
<!DOCTYPE html>
<html>
<body>
<script>
setTimeout(() => {
document.location.href = 'original.html';
}, 5000)
</script>
<body>
</html>
This example of prova2.html does not rely on filenames, it uses the session history of the browser:
<!DOCTYPE html>
<html>
<body>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
setTimeout(function(){
history.back();
//window.location.href = 'previous.html';
}, 5000);
});
</script>
<p>5 sec after pageload you should get redirected back</p>
<body>
</html>
Source: https://developer.mozilla.org/en-US/docs/Web/API/History/back
I'm very new to JS and HTML. I would like to remove an element from the page as soon as the page is loaded. This is my simple HTML code:
<html>
<head>
</head>
<body>
<div id="trapParent"><a id="trap" href='/trap/removeByJS'> Javascript removal </a></div>
<script>
function timeout() {
setTimeout(function () {
timeout();
}, 1000);
}
timeout();
var parent = document.getElementById('trapParent');
var child = document.getElementById('trap');
while (child & parent){
parent.removeChild(child);
parent = undefined;
child = undefined;
}
</script>
</body>
</html>
But when I open the page I can still get a reference to the link on the page; when I get the value of document.getElementById('trap');, it returns the link which means that it is still in the DOM and I can see that the link is still there. Am I missing something here?
I added the timeout function to make sure that the script will run after the page is loaded.
Thanks to above answers, the following worked for me:
<html>
<head>
</head>
<body onload = "removelink();">
<div id="trapParent"><a id="trap" href='/trap/removeByJS'> disables Javascript </a></div>
Hey!
<script>
function removelink( ){
var parent = document.getElementById('trapParent');
var child = document.getElementById('trap');
while (child && parent){
parent.removeChild(child);
parent = undefined;
child = undefined;
}
}
</script>
</body>
</html>
I have TinyMCE version 3.5.8. I want to call tinyMCE object and it tinyMCE.editors. In Firefox and Chrome no problem. In IE 11 is a problem.
if (typeof(tinyMCE) != "undefined") {
var n = 0;
for (var i = 0; i < tinyMCE.editors.length; i++) {
...
}
}
Firefox and Chrome passes for cycle without problems but the problem is in IE
tinyMCE.editors.length return 0.
When a console dump TinyMCE I see "editors" correctly, but when you call tinyMCE.editors it returns an empty array.
I also tried tinyMCE['editors'] - the same problem in IE.
Please help. Thanks
any ideas?
Still, I would detailed description of the problem.
I updated the TinyMCE - version 4
use jQuery - v1.11.3
I tried the code cleanly without other javascript codes followes:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://.../js/jquery.js" ></script>
<script type="text/javascript" src="https://.../tinymce4/tinymce.min.js" ></script>
<script type="text/javascript" src="https://.../tinymce4/_tinymce.advanced.js" ></script>
</head>
<body>
<textarea class="wysiwyg" id="a1" name="a1">
</textarea>
<textarea class="wysiwyg" id="a2" name="a2">
</textarea>
<script type="text/javascript">
jQuery(window).bind('load', function () {
var editors = getTinyMCEEditors();
});
/**
* Get TinyMCE Editors on page
* #returns Object Editors Id
*/
function getTinyMCEEditors(filterClass) {
var ed = {};
if (typeof(tinyMCE) != "undefined") {
// THIS IS ERROR - return null array
console.log(tinyMCE.editors);
var n = 0;
for (var i = 0; i < tinyMCE.editors.length; i++) {
if ($('#' + tinyMCE.editors[i].id).hasClass(filterClass)) {
ed[n] = tinyMCE.editors[i].id;
n++;
}
}
}
return ed;
}
</script>
</body>
</html>
console.log(tinyMCE.editors); RETURN EMPTY ARRAY
Where is your init call to actually get TinyMCE to take over those textareas? Perhaps this is simply a timing issue? tinymce.editors won't contain anything until the initialization process is complete.
EDIT: I would try triggering your getTinyMCEEditors() call in the init() itself - TinyMCE gives you the ability to do this
TinyMCE 4 Code:
tinymce.init({
....
setup: function (editor) {
editor.on('init', function () {
//run your code here
});
}
....
}
TinyMCE 3 Code:
tinyMCE.init({
...
setup : function(ed) {
ed.onInit.add(function(ed) {
//run your code here
});
}
});
As JavaScript is asynchronous running your code on Window load is no guarantee that TinyMCE is done initializing the editors. Moving the code to the init's setup and triggering it on editor 'init' would ensure that the editors are in place before the code is run.
Here is my simple code
function goto() {
/* Some code to be executed */
if (a == "1")
location.href = "http://www.google.com";
else
location.href = "http://www.example.com";
}
And here is html
Hello
this works perfectly fine when i click normally but if i right click it and open in a new tab it doesn't execute.
try this:
Hello
function goto() {
/* Some code to be executed */
window.open("http://www.google.com");
}
if you want to open in new tab on mouse right click,
Hello
hit mouse right click and open in new tab
OR
u can try this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
function goto() {
window.location = "http://www.google.com";
}
document.addEventListener('DOMContentLoaded', function () {
document.getElementsByTagName('a')[0].addEventListener('contextmenu', function (ev) {
ev.stopPropagation();
ev.preventDefault();
goto();
});
document.getElementsByTagName('a')[0].addEventListener('click', function (ev) {
goto();
});
}, false)
</script>
</head>
<body>
Hello
</body>
</html>
Try something like this:
Hello
<script>
document.getElementById('myId').addEventListener('contextmenu', function(ev){
gotoFunc(ev);
});
function gotoFunc(ev){
//run this when right clicked over #myId element
}
</script>
do it like this:
function changeDest(elem) {
/* Some code to be executed */
if (a == "1")
elem.href = "http://www.google.com";
else
elem.href = "http://www.example.com";
}
Hello
you can instead use Hello
This should do the trick. i.e adding the url to the href of the anchor tag
If a website is loaded into an iframe, what code do I need to put on the child page of that iFrame to break out of the iFrame and load that page as the top document or reidrect to that page
Just found the code
<script>
if(window.top !== window.self){
window.top.location.href = "http://www.blah.com";
}
</script>
Even better code:
<style> html{display : none ; } </style>
<script>
if( self == top ) {
document.documentElement.style.display = 'block' ;
} else {
top.location = self.location ;
}
</script>
Code Example below:
<!DOCTYPE html>
<html lang="en">
<head>
blah
</head>
<body>
<iframe src="www.blah.com"></iframe>
</body>
</html>
What JQuery or javascript do I need to put on (in this example) www.blah.com so it breaks out of the iframe and www.blah.com is directly shown to the user?
What you're looking for is called a Framekiller
Here's the suggested implementation from that article:
<style> html{display : none ; } </style>
<script>
if( self == top ) {
document.documentElement.style.display = 'block' ;
} else {
top.location = self.location ;
}
</script>
This should work:-
<script type="text/javascript">
if (window!=top){top.location.href=location.href;}
</script>
window.top.location.href = "http://blah.com/";
As mentioned here (with a fuller explanation):
Redirect parent window from an iframe action
If you are using a link setting target="_top" attribute probably would do the job.