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.
Related
So there are html pages, 'login.html' and 'register.html' stored within same folder on my desktop.
when i open my login.html page it has a button when clicked should be redirected to register.html page.
i have checked that the button event it self is working fine when button is pressed the event is fired (confirmed through alert method)
document.getElementById('logIn').onclick= function(){
window.location.href="login.html" // does not works
window.location.href="./login.html" // does not works
window.location.href("/login.html") // does not works
window.location ="login.html" // does not works
window.open("login.html")// open it but in a new tab (which i dont want)
window.open("login.html","_self")// does not works
}
also i am not using jquery for this project.
I don't see why those wouldn't work, but perhaps you can try this:
(basically, you create an anchor tag, set its properties, and click it)
document.getElementById('logIn').onclick = function() {
let loginAnchor = document.createElement('a');
document.body.appendChild(loginAnchor);
loginAnchor.style.display = 'none';
loginAnchor.href = 'login.html';
loginAnchor.click();
}
For future reference, you should stay as consistent as reasonable with your string literals (single quote / double quote / template). Also, don't use window unnecessarily (unless it improves readability). Lastly, location.href is not a method, but a property whose value you should set.
i found out the problem, form tag was preventing the page from loading a new one!
so i simply replaced form tag with a div tag.
BEFORE
<form>
//all buttons inside
</form>
AFTER
<div>
//all buttons inside
</div>
Click Event of the Button:
document.getElementById('logIn').onclick= function(){
window.location.href ="login.html";
}
I can't figure out how this is done:
I want to link to an internal page with an addEventlistener function. When the linked page loads I want to open a div that is hidden. So something along the line of:
button.addEventListener("click", () => {
const hiddenDiv = document.getElementById("hidden-div")
window.open("/newPage.html" + hiddenDiv.click())
});
I know the code above won't work, but I don't know how it could work, since window.open() ends the execution of the code.
Is there a way to store the function after the page refreshes (without localstorage)? Is there a way to handle it via the url? Or should be done with localstorage?
I was wondering whether it was possible to make a link with <a> tags that doesn't display its URL?
Put into other words, I would like a piece of HTML that either hides or obfuscates the URL that it links to.
I have found this StackOverflow question, but I'd prefer that the link would work in all browsers (not just chrome) and was not a popup. I already have access to jQuery, Bootstrap and PHP 5.5.
Any help would be appreciated.
UPDATE: I feel this needs clarification. I do not want it to be visible in ANY way - i.e. this is a link that must NOT be shared, so I cannot simply use redirects and just hide the URL when it is hovered over - I do not want it visible in the source code either. Sorry for any inconvenience :(
Thanks,
ICT
You can capture the link in a closure to hide it, then point the window there when the <a> is clicked, for example
function hideLink(anchor) {
var href = anchor.getAttribute('href');
anchor.removeAttribute('href');
anchor.className += ' pseudolink';
anchor.addEventListener('click', function (e) {
e.preventDefault();
window.location.href = href;
});
}
window.addEventListener('load', function () {
hideLink(
document.getElementById('my_link')
);
});
.pseudolink {
color: blue;
cursor: pointer;
text-decoration: underline;
}
<a id="my_link" href="http://google.com">Hover over me</a>
It is not possible to completely hide the URL you are attempting to navigate to. The URL must be present in some form - such as the 'href' attribute of the <a> - tag to tell the browser where to navigate to.
However, it is possible to mask the URL with access to your server settings. Using a .htaccess file it is possible to redirect from one entered URL to another, whilst maintaining the entered URL within the address bar of the browser. There are many sources online that explain how to do this.
Simply handling each link using some logic within a PHP file may be suitable to hide the link in the source. For example, you could send every link to handler.php and specify a value for which page to navigate to, ie handler.php?page=1.
handler.php would then contain something along the lines of:
<?php
if ($_GET['page'] == 1) header('Location: /where/you/want/to/go');
if ($_GET['page'] == 2) header('Location: /where/else/you/want/to/go');
?>
This way, the user will not know where the link actually goes and (using the .htaccess settings) unaware of the URL they have navigated to.
You could use an url minifier like this one : https://goo.gl/.
<a data-link="some link here"></a>
$('a').on('click', () => {
window.location.href = $(this).attr('data-link');
});
User won't see the link while hovering it.
OK so I was using a bit of jquery to select all the <a> tags on the page and if they link to an image file to add a zoom class to it for the purposes of a lightbox.
This is the code which works
$(document).ready(function () {
$('a[href*=".png"], a[href*=".gif"], a[href*=".jpg"]').addClass('zoom');
});
There is a problem with this though;
Say I have a link which just goes to another page but passes an image url as a GET variable in the URL the lightbox is activated as a result of this and fails because the link is not actually to an image. For example:
Link text
In the above instance the jQuery script will add the zoom class to this anchor even though it doesn't actually link to a picture.
This wouldn't usually be an issue as you would leave the page to go to the link's destination before the lightbox has a chance to appear, but in times where a new tab/window is opened I get a failed lightbox coming up.
This is particularly prevalent on social media buttons such as Pinterest which passes an image url within the link.
[apologies for the title - I wasn't sure how best to phrase it. Please feel free to edit to something more suitable]
you could add the zoom class only if href attribute doesn't contain a ? (or, in other words, a querystring is not included), e.g.
$(document).ready(function () {
$('a[href*=".png"], a[href*=".gif"], a[href*=".jpg"]').each(function() {
if (this.href.indexOf('?') < 0) {
$(this).addClass('zoom');
}
});
});
You can parse the href with a simple regex to check that the image is not in the query string, and filter out the false positives.
$(document).ready(function () {
$imgLinks = $('a[href$=".png"], a[href$=".gif"], a[href$=".jpg"]');
$imgLinks.filter(function() {
return !$(this)
.attr('href')
.match(/^http\:\/\/.*\?.*http\:\/\/.*\.(png|gif|jpg)$/);
})
.addClass('zoom');
});
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.