I'm trying to figure this one out but my mind has just gone blank.
I have a button element on my webpage with an id: e.g <button id="someId"></button>
In the document.ready function, I have an on click event which occurs when the user clicks the button. e.g. $('#someId').on('click', function() {
In this event there is an if statement which determines a value. Depending on the value, I want to execute a href in an anchor but I can't figure out the syntax.
The reason I am trying to execute the anchor in the javascript is because i'm passing a variable into the href. It could be true or false.
Here is what I have\what I'm trying to do. Any help would be great.
if (date1 <= date2) {
//I want to execute this anchor
}else{
//otherwise execute this anchor
}
You're looking at the problem wrong. An anchor is a static HTML element that, when clicked, changes the current window location (i.e. URL). The JS equivalent looks something like this: window.location.href = 'http://www.google.com';. So by setting window.location.href you will use JS to navigate to another URL.
The window.location method posted by Eli is the correct way to visit a link using JavaScript. However, if you can use a link instead of a button, you could just set the href of the link in the onclick. Here is a sample jsFiddle that visits a different url based on whether one input is greater than the other:
http://jsfiddle.net/jw3Pd/
So when the user clicks the link, set the href to whatever link you want the user to visit.
$("#someId").on("click", function () {
if (date1 <= date2) {
//I want to execute this anchor
$("#someId").attr("href", "#{Application.openthispage(true)}");
} else{
//otherwise execute this anchor
$("#someId").attr("href", "#{Application.openthispage(false)}");
}
});
Related
I want a javascript to check if there is a button in the webpage that is being visited with the class detail-w-button act_watchlink like the following:
<a href="link" class="detail-w-button act_watchlink">
And if that button exists, I want to store in a variable the href.
How can I do this automatically when the page loads?
Update:
I don't know if it helps, but I know that the page has the following code to listen to the button:
$('.act_watchlink').on('click', function(){...});
I think it would be fine to just triggering that action automatically.
How to check if a node exists with jQuery:
if($('a.detail-w-button.act_watchlink').length > 0)
alert("I found it!");
else
alert("There is no such button");
Get href of this button:
var href = $('a.detail-w-button.act_watchlink').attr('href');
If you want to improve performance, store the button in a local variable instead of searching it each time you need it.
Update: If it is possible to encounter more than one such button on a page, you should address a specific item in the array of found objects. Like this:
var href = $('a.detail-w-button.act_watchlink').first().attr('href');
// note the first()
var href = $('a.detail-w-button.act_watchlink').eq(2).attr('href');
// note the eq(2)
$('.act_watchlink').trigger('click');
First of all, sorry for any mistakes, I'm an extreme novice coder.
What I'm trying to do is open a link on a page (which is html generated by python), have it open in another window to an anchor. This anchor is a reversedisplay javascript, which means that I want to open the contents of where the anchor is.
The initial python/html link is as follows:
print "/>TEXT HERE<a value=\"mg-auto\" onClick=\"Open('mg-auto')\" href=\"http://LINKHERE/#mg-auto\" target=\"_blank\"><font title=\"mg-auto\" >(<span class=\"tooltip\">?</span>)</font></a>"
which you would click to lead to this:
mg-auto
<div id="mg-auto" style="display:none;">
TEXT HERE
<hr />
</div>
The javascript function to open the reverse display is this:
function Open(d) {
document.getElementById(d).style.display = "block";
}
I have implemented this function in both the html and the python.
However, for some reason the anchor won't work at all. I fiddled around and discovered that a header + id like so:
<h3 id="IDNAME"></h3>
will make a valid anchor, but the div + id like I have will not.However, I can't combine a header and the javascript function without breaking the html.
Does anyone know of a way to make an anchor work? I guess my biggest problem is no matter how I try to implement the id, when I try to link to the anchor it will not recognize the '#IDNAME'
From what I can understand, you want someone clicking on the '(?)' to get a new window where the div that is display="none" to start with gets display="block".
Putting '#mg-auto' after the link (a fragment or hash) will take you to the element with that id attribute when the page loads (it will jump-scroll to it if it is off screen). But the problem is that the onClick="Open('mg-auto')" will get run before you follow the link, not after the new page loads in a new window. So in the new window the div still has display="none".
To run something when a page loads you can use the window.onload event, so all you then need is the hash. Check the code below.
window.onload = function() {
// Check if hash exists
if(window.location.hash) {
// Remove the "#" from the hash
hash = window.location.hash.substr(1);
// Display element with id == hash
document.getElementById(hash).style.display = "block";
}
}
That code will run when everything on the page has been loaded.
PS: You can essentially put an id on any element (including div and headings) and have the hash of you url take you to it.
I'm not sure how to do a pop-up that warns when you are clicking on external links, using javascript.
I figured that it would be handy to put a class on my external links as well, but I'm not quite sure it's done correct as it is now either. This is the HTML I'm using at the moment:
<div id="commercial-container">
<img src="picture1.jpg" />
<img src="pciture2.jpg" />
<img src="picture3.jpg" />
<img src="picture4" />
</div>
I'm very new to javascript and very unsure on how to solve my problems. The pretty much only thing I figured out so far is that I will have to use window.onbeforeload but I have no clue on how to figure out how to write the function I need.
I want to keep my javascript in a separated .js document instead of in the HTML as well.
Call the confirm() function from the onClick attribute. This function returns true if the user clicks OK, which will open the link, otherwise it will return false.
<img src="picture1.jpg"/>
Hope this helps.
You can do it by adding a click event handler to each link. This saves having to use a classname.
window.onunload will run even if the user is just trying to close your site, which you may not want.
staying in site
going external
<script>
var a = document.getElementsByTagName('a');
var b = a.length;
while(b--){
a[b].onclick = function(){
if(this.href.indexOf('yourwebsitedomain.com')<0){
//They have clicked an external domain
alert('going external');
}
else{
alert('staying in your site');
}
};
}
</script>
Since you're new to Javascript I advice you to use a javascript framework to do all the "heavy work" for you.
For example with JQuery you can easily bind an onClick event to all external links by doing:
$(".external").click(function(event) {
var confirmation = confirmation("Are you sure you want to leave ?");
if (!confirmation) {
// prevents the default event for the click
// which means that in this case it won't follow the link
event.preventDefault();
}
});
This way every time a user clicks on a link with the external class, a popup message box asking for a confirmation to leave will be prompt to the user and it will only follow the link if the user says "yes".
In case you want only to notify without taking any actions you can replace the confirmation by a simple alert call:
$(".external").click(function(event) {
alert("You are leaving the site");
});
If the user click an image,div,.. you need to look for the parent node. !There could be several elements wrapped with a-tag.
document.addEventListener('click',function(event){
var eT=(event.target||event.srcElement);
if((eT.tagName.toLowerCase()==='a' && eT.href.indexOf('<mydomain>')<0)
|| (eT.parentNode!==null && eT.parentNode.tagName.toLowerCase()==='a'
&& eT.parentNode.href.indexOf('<mydomay>')<0))
{
//do someting
}
else if(eT...){
...
}
},false);
Two side notes:
If you want to keep track a user by cookie or something similar, it's good practice to check external links, set a timeout and make a synchronic get request to renew.
It's better to add the event to the document or a div containing all events and decide on target.
On page1.php I have a click event that causes the user to be redirected to page2.php. It goes something like this:
$("#someButton").click(function() {
window.location = "page2.php";
});
And that works great. But what I really want is to open a hidden, UI-blocking <div> on page2. The user can already open this <div> manually by clicking another button on page2, that goes something like this:
$('#someOtherButton').click(function() {
$("#pageContainer").block({message: $("#theDivIWant2See")});
});
Can I make a click event from the JavaScript on one page call the JavaScript on another? Or will I need to add in some HTML-parsing to pass information between pages? (I'm not looking for a JavaScript hand-out here, just a strategy to help me move forward.)
When you redirect from the first page, add a querystring value in your url. and in the second page, using your server side page language, set in in a hidden field and in the document ready event check the value of that hidden field. If the value is expected, call a javascript function to show the popup.
Some thing like this
$("#someButton").click(function() {
window.location = "page2.php?showpopup=yes";
});
and in page2.php set it (forgive for errors, i am not a php guy)
<input type='<?php $_GET["showpopup"] ?>' id='hdnShow' />
and in the script
$(function(){
if($("#hdnShow").val()=="yes")
{
//Call here the method to show pop up
}
});
You need to do your stuff when DOM for page2 is ready. You can use jQuery's ready function for that.
$(document).ready(function() {
// put code for showing your div here
});
Hope that helps.
Could you pass a query string argument or assign a cookie that the other page could then check when the document loads? If the value exists then present a modal dialog (e.g. jQuery UI Modal Popup)
http://jqueryui.com/demos/dialog/
I want to link my page with another page on condition.
Suppose I have 3 HTML pages, namely 1.html, 2.html and 3.html. What I want is that if 1.html is loaded then load page 2.html; If 1.html is not loaded then load 3.html.
please help.
I can't follow your explanation about pages 1, 2 and 3, but in a general sense you can have a hyperlink go to different URLs depending on some condition(s) by handling its "onclick" event to cancel the default navigation and do it from JavaScript instead:
My link
<script>
function doClick() {
if (someCondition || someOtherCondition)
window.location.href = "firstURLhere";
else
window.location.href = "alternativeURLhere";
}
</script>
The URL specified in the anchor's href attribute will be used if JavaScript is disabled. Otherwise, the doClick() function is called to decide which URL to navigate to. Of course the function can be as simple or complicated as you need.
The onclick needs to return false; to cancel the default behaviour of a click on the anchor because (obviously) the default is to navigate to the URL in the href attribute.
I am not fully sure what you want to achieve.
I think you want to show hyperlink on a page only if some other pages are opened earlier.
If this is the case, you can create cookies on window.load of page 1, and check if that cookie is set on windolow.onload event of page 2.
If cookie is set, create a dynamic hyperlink on page 2 to redirect to page 3. If cookie is not set, do not create a link.
You may also show / hide hyperlink (instead of dynamically creating) depeding on whether cookie is set or not. This is an easy and crossbrowser way if you are not using jQuery.
Refer: http://www.w3schools.com/js/js_cookies.asp
It should be something along the lines of:
If you add the script at the bottom of the page, the javascript will search for all the <a> tags and compare them to the current url. If theres a match it will set its style to invisible.
<script>
linkNodes = document.getElementsByTagName("a");
for(i = 0; i < linkNodes.length; i++){
if(linkNodes[i].getAttribute("href") == document.url){
linkNodes[i].style.visibility= "hidden";
}
}
</script>
This way if you are in 1.html, 2.html and 3.html are displayed but not 1.html itself. the same happens for 2.html which would show only 1.html and 3.html... etc.