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.
Related
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.
Hello I have some JavaScript code to fill some table of page1 and auto click its submit button, then it jump to another page2.
What I want is to execute some other codes after page2 is fully loaded. I know methods like window.onload and jQuery.ready but i don't know how to set this method to page2. For example if i write window.onload then the window reference to the current page.
Can anyone help?
You could achieve it the following way.
example :
Add unique identification classes to each of the page body.
page 1
<body class='page1'></body>
page 2
<body class='page2'></body>
JavaScript
in your javascript file, use the following to run the code.
if($('body').hasClass('page1')){
//run page 1 code
}else{ // You can add a second if just to check if it's page 2
//run page 2 code
}
Then import the file to both pages at the bottom of the body tag. the script will run as needed.
Update
To get the current browser url just use window.location.href to get the url. The url is a unique page identifier so just update the condition to the following.
if(window.location.href == 'page1-url'){
//run page 1 code
}else{ // You can add a second if just to check if it's page 2
//run page 2 code
}
I would prefer using the window.location.pathname since it would just return the page path without the host, but the above will work too.
You can use $( document ).ready() if page 2 is a new document.
If "page 2" is at a scroll point in the same document, you can use an if statement with the scroll point using .scroll(). Add your script in the head of your new document or a link to a new js file.
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)}");
}
});
I hope some of you better than me at coding can help.
I have a simple webpage (www.mypage.com). It has 5 links
Link 1 (www.mypage.com/link1.html)
Link 2 (www.mypage.com/link2.html)
Link 3 (www.mypage.com/link3.html)
Link 4 (www.mypage.com/link4.html)
Link 5 (www.mypage.com/link5.html)
Now from the main homepage, clicking on the link opens up a popup window using an iframe to display the page they clicked.
Now what I want to do is that when people click the link via the mainpage and hence get a popup/iframe, that on that page eg (www.mypage.com/link1.html) I want to hide some elements. The elements are things link Menu and Banner.
Now if a person enters one of the links manually eg typing www.mypage.com/link1.html directly into their browser, then I want the Banner and Banner to show.
Is there anyway I can do this?
Is there some javascript that can run that if it detects it's an iframe that it can do a display:none on the elements I want to hide?
Many thanks in advance.
This is how i would do it :
in the link pages (www.mypage.com/link1.html) i would have a script to verify if the hash of the url has a certain value.If it does, then hide the banners;else show the banners normally.
So when you open the page in an iframe, be sure to set the src to "www.mypage.com/link1.html#banner_off" and not to the simple "www.mypage.com/link1.html".
This way, when a user types in the browser the link address (without the hash value), your ads will be shown.
here is an example of how the script in the link pages should look like:
function manageBanners(){
if(document.location.hash == "banner_off")//hide banners
{
//code to hide banners here
var banners = document.getElementsByClassName('banner');
for(var i in banners)
banners[i].style.display = 'none';
}
//else do not alter the banners visibility
}
window.onload = manageBanners;
Of course you can use in the same way the php-query like sintax : url?banner=false and check for the parameters in the url.
Hope this helps!
The best way I can think of to detect that a page is in an iFrame is to compare the URL of the page with the URL in the browser window. If they're different, it must be in a frame.
if (top.location != location) {
// hide menu and banner
}
I have a 2-frame HTML page:
FrameA contains a list of links to various pages, or anchors within pages
FrameB displays the individual pages.
Some of the pages contain slideDown sections, with trigger text - i.e. clicking this text shows/hides the slideDown section below it.
The parent element of the trigger element also contains an anchor, for example:
<li class="expandable">
<p><a name="myanchor3"></a>Trigger text</p>
<div class="slideDownSection">
...
</div>
</li>
I want to detect whenever an anchor is requested in the URL used to load the page into FrameB. If there is an anchor ref, I want to check whether the anchor falls within an "expandable" element and, if it is, I do a slideDown on the element below to display it.
I can do this easily enough by putting some Javascript inside a $(document).ready(function(){ ... }); in the page that gets loaded. This checks the location.hash value and processes it if one's found. However, this only works when the page gets loaded into FrameB.
If a page is already loaded into FrameB and I click a link in FrameA that points to another anchor within the same page, I can't capture that event. The page position changes to display the anchor at, or near, the top of the page - without reloading the page.
My question is:
What event handler can I use in the page displayed in FrameB to detect that an anchor on that page has been requested via a link clicked in FrameA?
Note: The content of FrameA is auto-generated, so I can't use an onClick event for the page in FrameA, I can only work within the pages that get displayed in FrameB.
IE8 supports the hashchange event that you can listen for. For all other browsers, you have to poll the value of location.hash using setInterval():
var lastHash = null;
function checkHash() {
if (window.location.hash != lastHash) {
lastHash = window.location.hash;
// Do your hash stuff
}
}
setInterval(checkHash, 100);
On - window.location.hash - Change? is a very similar question.