I need to hide a link to the user so that he can't click it to get to another page but I have several JS scripts and CSS that would take too much work to change so I need the document structure to stay the Same.
How can I achieve that?
This is an example
<span>
text
</span>
I obviously tried to generate this instead
<span>text</span>
but selectors can't find the text because there's no "a" tag.
How can I achieve that?
To disable all the links, have such code:
window.onload = function() {
for(var i = 0; i < document.links.length; i++) {
document.links[i].onclick = function() {
return false;
}
}
};
Live test case.
This won't change their destination (href attribute) just cause that clicking them will have no effect whatsoever.
Set style="display: none" to not display it at all.
Related
I have this link on my web page:
Terms and conditions
I want to use Jquery to check whether this specific link is present or not on the web page. I know how to check if text is present on a page, but am struggling a little with links. If it helps, it is only the terms-conditions-mywebsite bit that I need to use (as mywebsite changes depending on who is using the site).
The class is footer so I have tried $('.footer:contains("terms-conditions") but this doesn't seem to work. Any pointers would be appreciated, thanks so much :)
Edit: I need to check that the actual specific contents of this links is present, rather than the text 'Terms and conditions'
You should check the value of href attribute. You can use Attribute Contains Selector [name*=”value”] which select elements that have the specified attribute with a value containing a given substring:
The following should work:
if($('a[href*=terms-conditions]').length){
//exist
}
OR: Check the link string directly
if($('a:contains("Terms and conditions")').length){
//exist
}
I would look at doing this with Javascript, as it's very straightforward and means you are not reliant on JQuery should you wish to remove JQuery from the site at a later date.
// get <a> elements
var links = document.getElementsByTagName('a');
// loop through each <a>
for (var i = 0; i < links.length; i++) {
// get each href
var hrefs = links[i].getAttribute("href");
// check href against the one you want
if (hrefs == "https://www.google.com") {
// check content of link
console.log('link content:', links[i].innerHTML)
}
}
If you browse webpages using Firefox or Chrome, you can select text in a hyperlink, an element with <a> tag, by holding right alt key.
In my app, I want to achieve this using javascript, not by holding some button but by default. I will redirect to url if user doubleclicks, otherwise user will be able to select the content as if it's just a plain text.
First thing I tried is to replace all <a> elements with <span>elements and implement relevant events. This provides the functionality I wanted, but distorts the look considerably even tough I keep all attributes (class, id) same. It seems there are tag <a> specific css for the pages I'm dealing with.
Now what am trying is to achieve this by keeping tagname. My current code is as follows:
var linkElems = document.getElementsByTagName('a');
for (var i = linkElems.length - 1; i >= 0; i--) {
linkElems[i].ondblclick = function () {
//redirect to url
};
linkElems[i].setAttribute("href", "#");
linkElems[i].onclick = function () { return false; };
}
After this code, links does not make page redirect to respective url, but when I try to select the text it just drags some box having the url in it. To prevent that, I wrote this line of code:
document.body.ondragstart = function(){return false;}
Now, I prevent the drag but still can't select the text. I wonder is there a way to fix this.
See this.
I used data attribute and did not define href attribute.
You can find more information about data-* attribute on MDN
$(function(){
$(".aLink").dblclick(function(){
var link = $(this).attr("data-href");
window.location.href = link;
});
});
a {
color: blue;
text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-href="https://example.com" class ="aLink">Link 1</a> <br><br>
<a data-href="https://example.com/something" class ="aLink">Likn 2</a>
I'm working on a SVG map (Raphael) on a Drupal site, and for some reason beyond me I can't get jQuery to affect the SVG map at all. I want to manipulate the <a> and its child (a path) using the title="skane" value as an anchor.
One weird thing is that when looking at the generated Raphael code in the inspector it says title="skane", but if i copy the entire block to jsFiddle I get xlink:title="skane" – what's up with that?
In a Fiddle it seems to be working just fine using $("a[xlink\\:title=skane]").hide(); but when I try to incorporate it into my script it doesn't do anything, even when entered in the console well after page load.
If I target all <a> tags with $('a').hide(); the whole map disappears as expected, so how do I select only the <a> with title="skane"?
Link to jsFiddle example
Any help is greatly appreciated!
Have you tried $("a[title='skane']").hide();?
I found this solution. However I am not sure if that´s what you need.
var parameters = document.getElementsByTagName("a");
for (var i = 0; i < parameters.length; i++) {
var attribs = parameters[i].attributes;
for (var j = 0; j < attribs.length; j++) {
if (attribs[j].localName == "xlink:title" && attribs[j].value == "skane") {
parameters[i].style.display='none';
}
}
}
Hope it Helps
How to remove or hide only visible "text & link" from website using java script. For example I want to hide "some text " & "Link text here" from bellows code without remove this full code
<p style="text-align:center;">some text Link text here</p>
Please help me
Assuming you mean that you want to hide the <p> tag, you need this piece of JavaScript:
document.getElementsByTagName('p')[0].style.display = 'none';
That will hide the first <p> tag on your page. I suggest adding a class or id to the tags you want to hide though, so that you can select them more accurately.
If you want to clear all contents of your <p> tag, you can do this:
document.getElementsByTagName('p')[0].innerHTML = '';
That will simply remove all of the tag's contents. If you want to remove the whole tag itself (so that it doesn't leave the empty <p> tag sitting around) you can change the .innerHTML part to .outerHTML.
There are several things to consider: you may want the test to return, so we cannot just lose it. You may want to preserve event bindings on nested elements, so we cannot simply destroy those. In the end, I would suggest CSS being the most appropriate route to take.
var paragraph = document.querySelector("p");
paragraph.style.overflow = "hidden";
paragraph.style.textIndent = "-1000%";
You could, alternatively, create a custom class meant to set overflow and text-indent, and toggle that class with JavaScript (jQuery?) instead:
paragraph.classList.toggle( "offsetChildren" );
// jQuery: $(paragraph).toggleClass( "offsetChildren" );
Fiddle: http://jsfiddle.net/6UZ82/
Try this code
function Hide(ptext,aText){
var p = document.getElementsByTagName('p');
var a = document.getElementsByTagName('a');
for(var i=0;i<a.length;i++){
if(a[i].innerHTML==aText){
a[i].setAttribute("style","display:none") ;
}
}
for(var i=0;i<p.length;i++){
var str = p[i].innerHTML;
var rp = str.replace(ptext,'<span style="display:none">'+ptext+'</span>');
p[i].innerHTML = rp;
}
}
Hide('some text','Link text here');
Also you can show back using the reverse logic. i have commented out the show function in fiddle. you can uncomment it and click run to see it in action
Demo here
I want to open links in my post on a new page or a new tab rather. But only the link in the specific division, not all the links on my page. I don't wanna put _blank in all my tags it's too time consuming. How can I do that?
Thanks in advance.
With jQuery, you could set the target to _blank for all your links. E.g.
$(function(){
$("#myDiv a").attr("target","_blank");
});
Example on jsFiddle.
You really ought to put them in. If it's too time-consuming, try using a simple regex to do it for you (only run it on the html you care about). Replace:
(<a href[^>]*)(>)
with
$1 target="_blank"$2
If you really need to, you can use JavaScript, but it won't work where javascript is disabled. It's really a terrible solution for this problem:
var el = document.getElementById('myDiv'); // or some other way of making `el` point to your element
var links = el.getElementsByTagName('a');
for( var i = 0; i < links.length; i++ )
{
links.target = '_blank';
}
Here is a link to the Javascript that I use to set all the links within a certain div (or all links which are labeled with a certain class) to open in a new window: http://icode4you.net/use-javascript-to-open-all-links-within-a-certain-div-in-a-new-window.
I originally found this script at http://www.dynamicdrive.com/dynamicindex8/newwindow3.htm