On my site, Link A and Link B can link to Page X.
I want to start a video automatically on Page X if I come from Link A, but NOT when I come from Link B.
Is there any way I can do this using javascript/jquery?
For Reference: I am using fancy box to start the video.
There are two approaches you can take to this problem.
Option 1
This option was my first proof of concept.
On your first page:
Link A
Link B
And on /newpage:
<script type="text/javascript">
$(function(){
if(window.location.hash === "#linkA"){
// play video
}
});
</script>
or Option 2:
The first option doesn't account for the fact that the page will not refresh if you use the back button. Using a query string does cause the page to refresh though, thus breeding this solution.
On your first page:
Link A
Link B
And on /newpage:
<script type="text/javascript">
$(function(){
if(window.location.search.substring(1) === "playVideoA=1"){
// play video
}
});
</script>
So essentially you want to detect history. Simply use document.referrer.
Something like:
document.addEventListener("load", function() {
if (document.referrer === LINK_A) {
startVideo();
}
});
should be fine for your purposes.
I can think of two ways to do this. One is to check the value of document.referrer to see what the previous page was. A better way is to have your Page X accept a "autostart_video" HTTP GET parameter. So your link would go to a url like http://mysite.com/pageX?autostart=True . If your page is built dynamically (e.g. if you are using Django) then you can check for that parameter and modify the javsacript accordingly.
Related
How do I make a link where after it is clicked it brings you to a specific page, waits 3 seconds, then automatically clicks on a specific internal link on that current page?
Currently I have this
HTML:
Go to Page
Javascript:
if(window.location.hash === "#pupup_element_27_child"){
}
I have checked several other questions that I thought may be similar but nothing as specific as this.
If there are two different pages, you could use an URL param to follow the desired link after 3s. Code in the target page (add ?followLink after the URL):
<body onload="followLink()">
Automatically follow this link after 3s
<script>
function followLink(){
var params = window.location.search;
if (params.indexOf("followLink")){
window.setTimeout(function(){
document.querySelector('#link').click();
},3000);
}
}
</script>
</body>
Use setTimeout() to delay the action by 3 seconds after the new page is loaded.
if (window.location.hash === "#pupup_element_27_child") {
setTimeout(function() {
document.querySelector("#pupup_element_27_child").click();
}, 3000);
}
This JavaScript goes on the target page.
If you want to redirect to another page (on your website) and redirect to another page on the same website, the intermediate page must necessarily have a script that waits for the desired time and redirects.
If you don't want to do this everytime you access to that middle page, you can pass some query params and configure your method to wait only if some query params are present
According to your question, when user clicks a link on your current page, it's gonna lead to another page where you want to automatically click a link that exists in that page, then in your current page, put this script. You can set the time to whatever you like. Hope that answers your question.
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.4.0.min.js"
integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg="
crossorigin="anonymous"></script>
</head>
<body>
Go to Page
<script>
window.onload = function() {
setTimeout(function() {
document.querySelector("#openThis").click();
}, 2000);
};
</script>
</body>
</html>
Inside the location test logic, set a Timeout that will take your internal link and then click on it. You should consider jQuery.
if(window.location.hash === "#pupup_element_27_child"){
#Add a timeout here
setTimeout(()=>{
#Load the target url with whatever API/Library desired
window.location.href="https://my_new_location";
},3000);
}
I am using below Javascript function for the Link in the homepage. Requirement is to link clicked automatically on page load.
Link-
document.writeln("Live Chat");
I have tried below steps like adding document.getElementById('zautoclick').click(); and added id="zautoclick" before href but the problem is that my page does not show the link neither it loads the second page which comes after clicking on Live Chat.
Please share some logic to work auto click in my scenario.
try this out
1)
$(function() {
$('#watchButton').click();
});
2)
window.ready=function(){
document.getElementById("linkid").click();
};
3)
window.onload=function(){
document.getElementById("linkid").click();
};
I want to put a non removable credit link on my blogger templates but I don't know how. I have seen many templates using it but they are revealing their secrets.
All of them obfuscate their codes.
This is the below that I want to hapen.
Site name
When they change the example.com - they will be redirected to example.com
when they remove or change the class "credit" they will be redirected..
They are putting their javascript code before .
Yes, You can but you have to use a JQuery in your template for this.
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function()
{
var aa=$("#mycredit").val();
if (aa == null) {
window.location.href = "http://www.example.com/";
};
$("#mycredit").attr("href","
http://www.example.com/");
});
//]]>
</script>
And after adding above code, add the below code in your footer where you want to write your credit link...
<div id='#mycredit'>
Designed By <a href='http://www.example.com/' id='#mycredit'>Example Company</a>
</div>
Replace the URL from above to your on in both codes. Now for safty, Encrypt the above JQuery with your Blogger Template other JQuery using Javascript Obfuscator
As an aside, in your example code "credit" is an ID and not a class.
If you are selling or giving other people HTML code and associated JavaScript and CSS for use on their own site, it is impossible to prevent them from changing or adding to it. Whilst you could obsfucate a click event handler that directs to your site, which may be nontrivial to locate and remove, it does not help in circumstances where the link has simply been removed from the HTML by the user - or hidden using CSS. Testing for all possible methods of hiding the link (positioning, visibility, display, opacity, text-indent, colour, height/width etc.) will be onerous and a losing battle.
Assuming the user did simply change the credit link to point to their own site, and could not find and locate the click handler that directs visitors to your site instead - it would be easy for them to provide their own click handler which directs to their site and stops propagation to stop your handler being called.
To avoid the user removing the link, or changing the URL, in your HTML template you could add it to the page using JavaScript but - even if you could prevent the user from removing this code through obsfucation - any CSS rules applied to the page will still be applied, allowing the user to hide it, and it could be trivially removed from the DOM using their own scripts. Search engines also will most likely not see the link, even if left unchanged, as JavaScript may not be evaluated by visiting bots.
In summary, by all means seek credit for your work, and leave a link in your template - but there is no technical way you can guarantee that it will not be changed or removed once run on the sites of your end users. The best method would probably be to require that the link remains, and points to your site, in the license for use of the template.
You can do this using jquery. There is a easy way to add this.
$(document).ready(function(){
//Let's first setup the redirect
function redirect(){
window.location.assign('http://www.example.com');
}
//which things we got to check
function check(){
if($('#credits').length === 0){
redirect();
}
else if($('#creditlink').length === 0){
redirect();
}
else if($("#creditlink").attr("href") !== "http://www.example.com"){
redirect();
}
else if($('#creditlink').text() !== "Site name"){
redirect();
}
}
//execute the function on page load
check();
//excute the function at the intervals of 5 seconds.
setInterval(function () {check()}, 5000);
});
This program will better help you to add non removable credit link. But for which you need to add the HTML somthing like this
<div id="credits">
<a id="creditlink" href="http://www.example.com">Site name</a>
</div>
Reference: http://themedaddy.net/lets-learn-to-protect-your-work-with-non-removable-credit-links/
I'm having problems with history object and iframes in javascript/html5. I wrote a simple project to describe my problem:
http://dktest.evermight.com/
It's a page with an iframe and a next button. Every time you click next, it loads a new page with an incrementing counter. However, clicking the browser back button doesn't do what I want it to do. Let me explain the problem by breaking this post up into the following sections:
What I'd like to achieve
Undesired results in current project
Post all my code
1. What I'd like to achieve
I want the user to:
Open a new window and go to http://dktest.evermight.com/
Click next page and see a redbox fade in, and to see the url http://dktest.evermight.com/count.html?count=0 appear in both the iframe AND the browser's address bar
Click next page again and see http://dktest.evermight.com/count.html?count=1 in the iframe and browser's address bar
Click browser's back button ONCE and see http://dktest.evermight.com/count.html?count=0 in both the iframe and the browser's address bar
Click browser's back button ONCE and see http://dktest.evermight.com/ in the browser's address bar AND see the red box fade out
2. Undesired results in current project
With my code at http://dktest.evermight.com/, it's currently not performing steps 4 and steps 5 correctly. When I perform step 4, the iframe shows http://dktest.evermight.com/count.html?count=0 but the browser address bar shows http://dktest.evermight.com/count.html?count=1. I have to press the browser's back button again to make the browser address bar show http://dktest.evermight.com/count.html?count=0. When I perform step 5, the red box fades out which is great, but the address bar is still showing http://dktest.evermight.com/count.html?count=0. I have to press back again to make the address bar show http://dktest.evermight.com/.
3. Post all my code
My code is pretty straight forward. You can view source on http://dktest.evermight.com/. I will also post here for convenience.
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var count=0;
function clicknext()
{
$('#container').fadeIn();
$('#iframe').attr('src','count.html?count='+count.toString());
$('html title').html(count);
history.pushState({blahblah:'whatgoeshere?'},'i dont know what goes here either','http://dktest.evermight.com/count.html?count='+count);
count++;
}
function hideContainer()
{
$('#container').fadeOut();
var closeurl = 'close.html';
if($('#iframe').attr('src') != closeurl )
$('#iframe').attr('src', closeurl);
}
$(document).ready(function(){
hideContainer();
});
</script>
</head>
<body>
<div id="container" style="display:none; background:red;">
<!-- IMPORTANT
When DOM first created, the iframe.src MUST BE initialize.html
I have some code that I need to fire on that page before the rest
of this document starts
-->
<iframe id="iframe" src="initialize.html"></iframe>
</div>
<input type="button" onclick="clicknext()"; value="next page" />
</body>
</html>
close.html
<!DOCTYPE html>
<html>
<script type="text/javascript">
parent.hideContainer();
</script>
</html>
count.html
I CAN NOT modify the contents of count.html. In my real project, count.html is actually a youtube video, which is on a server I can't directly access.
<html>
<body>Youtube video at url <script type="text/javascript">document.write(location.href);</script></body>
</html>
initialize.html
Perform application specific functionality
Can anyone correct my code to achieve the results of step 4 and step 5 as described in section 1?
UPDATE
Ok, I'm appreciating the problem a bit more based on some experiments I'm doing.
Experiment 1: I tried changing the line:
$('#iframe').attr('src','count.html?count='+count.toString());
to
$('#iframe')[0].contentWindow.location.replace('count.html?count='+count.toString());
This allowed me to perform step 4 correctly. Apparently, contentWindow.location.replace() will not create an entry in the history object. However, this caused some other issues related with the contents of count.html, which is actually a page to youtube/vimeo content. The youtube/vimeo content REQUIRES that you load information via the attr('src') approach instead of .contentWindow.location.replace(). So perhaps the solution is to find a way to make attr('src') NOT create an entry with the history object?
Experiment 2 Another possible solution I tried was changing the order of the attr('src') and history.pushState() call. I tried calling attr('src') first then history.pushState() second, and also history.pushState() first then attr('src') second. But in both cases, when I push the browser's back button, it is the iframe content that goes back first. So there's no way for me to capture pass myself a message via the history object to do a "double back", since information in the history object is available LAST in the sequence of events.
Experiment 3 I also tried working with History.js. It did not do anything to solve my problems above. From what I could tell, it worked exactly like the regular history object.
Does anyone have any thing else I can try? Or suggest modifications to any of the experiments above? I'm going to explore Experiment 1 further as a separate stack overflow question.
I create a new iframe and destroy the iframe when loading new content. That solves the history issues.
I know this is a history problem but if you are still open to other possibilities, I think jquery-pjax is actually more suitable for what you are trying to do.
UPDATE I think this should work.
count.html
<div id="pjax-container">
<a id="pjax" data-pjax href="#">Next Page</a>
</div>
javascript
// get URL parameter (count): http://stackoverflow.com/questions/1403888/get-url-parameter-with-jquery
function getURLParameter(name) {
return decodeURI(
(RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
);
}
$(document).on('pjax:beforeSend', function() {
// your fading code goes here
})
$(document).on('pjax:complete', function() {
// fade out
// and then modify the anchor's href with something like
var new_count = getURLParameter('count') + 1;
$('a#pjax').attr('href', 'count.html?count=?' + new_count);
})
// where the pjaxed content should go
$(document).pjax('a[data-pjax]', '#pjax-container')
I have a link in my app that when clicked, leads to another page. I want to execute some JQuery on this new page after it loads, but only if that specific link is clicked to get to the page.
I have this JQuery:
$('#new_to_topics').click(function(){
$(document).ready(function() {
$('#topic_guidelines').slideDown('normal');
$('#topic_guidelines').addClass('on');
});
});
where #new_to_topics is the id of the link that leads to the new page and
$('#topic_guidelines').slideDown('normal');
$('#topic_guidelines').addClass('on');
is the JQuery code I want to execute on that new page. However, this does not work. How should I do this?
You could pass a location hash to the new page, and then conditionally run some javascript based on that hash.
If my link was to mynewpage.html#fromXlink (this would show in the address bar)
My javascript on mynewpage.html could be:
$(document).ready(function() {
if (location.hash == '#fromXlink') {
$('#topic_guidelines').slideDown('normal');
$('#topic_guidelines').addClass('on');
}
});
You could add a variable to the query string i.e. somepage.aspx?fromthislink=true
and then pick that up in jquery.
This shows how
If it cam from that link then fire off your jquery.
You can use window.name to pass data to the target page (although I would prefer passing data in the hash, if possible).