I have this in line of code
<a class="btn btn-block btn-lg" ng-class='login.anchorClass' ng-href="{{login.idp_authnrequest_url}}"><img src="{{login.file_name}}"/>{{login.name}}</a>
But this displays url in bottom left which I want to hide ( that's the requirement). Can anyone help with this?
Since those links comes from ng-repeat I tried onclick="location.href='({{login.idp_authnrequest_url}})'"
but that only opens last url on every anchor tag click. Also thought about using button instead of anchor tag but since I have multiple button how would that work?
Welcome to Stack Overflow.
Have you try using jquery:
$(function(){
$("a").each(function (index, element){
var href = $(this).attr("href");
$(this).attr("hiddenhref", href);
$(this).removeAttr("href");
});
$("a").click(function(){
url = $(this).attr("hiddenhref");
window.location.href = url;
})
});
This works for me.
Here the reference answer https://stackoverflow.com/a/56340724/13955999
Related
On begin.html, I've written some code like:
<a target="_blank" href="test.php">Proceed</a>;
This makes the link open in a new tab/window. Simultaneously, I want to go to test2.php from begin.html by clicking on the same link.
So, basically, at the end of my operation, one tab shows test2.php and the new tab shows test.php.
Is it possible?
Considering you have test2.php in root folder as test.php. you can try it this way. Don't forget to add your javascript code inside a script tag.
<script>
function OpenNewPage() {
var win = window.open('test2.php', '_blank');
win.focus();
}
</script>
<a target="_blank" href="test.php" onclick="OpenNewPage();">Proceed</a>
You need JavaScript to do that; and even with it it’s very likely the browser will block the second window thinking it’s a popup:
<button id="b">Click here</button>
document.getElementById("b").addEventListener("click", function() {
window.open("https://www.google.com", "_blank");
window.open("https://www.bing.com", "_blank");
}, false);
See this JSFiddle.
I'm adding a Chatango HTML5 chat box to my website, but when users scroll up or down in the chat box, it also scrolls up or down the rest of the page. I've been experimenting with different codes I've found on this site, but so far nothing has worked.
I thought I found a solution here: How to disable scrolling in outer elements? and applied it to my chatroom. It works exactly how I want it to on this codepen editor: http://codepen.io/EagleJow/pen/QbOBJV
But using the same code in JSFiddle: https://jsfiddle.net/4bm6ou90/1/ (or on my actual website) does not prevent the rest of the page from scrolling. I've tested it in both Firefox and Chrome with the same results.
Here's the javascript:
var panel = $(".panel");
var doc = $(document);
var currentScroll;
function resetScroll(){
doc.scrollTop(currentScroll);
}
function stopDocScroll(){
currentScroll = doc.scrollTop();
doc.on('scroll', resetScroll);
}
function releaseDocScroll(){
doc.off('scroll', resetScroll);
}
panel.on('mouseenter', function(){
stopDocScroll();
})
panel.on('mouseleave', function(){
releaseDocScroll();
})
Any ideas?
It didn't work on JSFiddle because I didn't have jQuery set on the side menu and it didn't work on my website because the '$' symbol in the javascript conflicted with that same symbol in the jQuery (or something like that).
Here's the JSFiddle with better code and set to load jQuery: https://jsfiddle.net/4bm6ou90/7/
The Javascript:
$.noConflict();
jQuery( document ).ready(function( $ ) {
$(".panel").on("mouseenter", function(){
$(document).on("scroll", function(){
$(this).scrollTop(0);
});
});
$(".panel").on("mouseleave", function(){
$(document).off("scroll");
});
});
Also gotta have that jQuery CDN in the html head section.
So, I'm having trouble trying to figure out how to make the 2 left divs (volunteer sign-up and Request a volunteer) on my home page be clickable links. I currently have them change color when you hover over them but how do I make them link to there appropriate page. Any help w
http://partners.sbceo.org
Wrap the div in an anchor tag.
<a href="your-link-here">
<div></div>
</a>
<div class="mydiv" data-href="http://stackoverflow.com"></div>
<script>
$('.mydiv').on('click', function(){
window.location = $(this).data('href');
})
</script>
this way you could use more than one clickable div
Give the div a class or other identifier. Then using jQuery do something like:
$('identifier').click(function(){
window.location = "your url";
});
None jQuery:
<div id="hello"></div>
function linkTo(url){
window.location = url;
}
el = document.getElementById('hello');
el.onclick = linkTo('some website');
i can't see the link but you can do this using Javascript:
<div style="cursor: pointer;" onclick="window.location='http://google.com/'">
</div>
How can I prevent the page from "jumping up" each time I click a link? E.g I have a link somewhere in the middle of the page and when I click it the page jumps up to the top.
Is the anchor href="#"? You can set it to href="javascript:void(0);" instead.
If you are going to a prevent default please use this one instead:
event.preventDefault ? event.preventDefault() : event.returnValue = false;
Let's presume that this is your HTML for the link:
Some link goes somewhere...
If you're using jQuery, try like this:
$(document).ready(function() {
$('a#some_id').click(function(e) {
e.preventDefault();
return false;
});
});
Demo on: http://jsfiddle.net/V7thw/
If you're not on jQuery drugs, try with this pure DOM JavaScript:
window.onload = function() {
if(document.readyState === 'complete') {
document.getElementById('some_id').onclick = function(e) {
e.preventDefault();
return false;
};
}
};
It will jump to the top if you set the link href property to # since it is looking for an anchor tag. Just leave off the href property and it won't go anywhere but it also won't look like a link anymore (and make sure to handle the click even in javascript or else it really won't be of much use).
The other option is to handle the click in javascript and inside your event handler, cancel the default action and return false.
e.preventDefault();
return false;
How can I make a link a href="#" does not show # in URL when clicked and does not scroll up the page?
I have seen it in http://www.offroadstudios.com/creative-agency
But could not learn how they did it.
Left menu contains a href="#" but it behaves in the way I am asking.
Looking at that site it would appear they are using jQuery to change the visible content. To prevent a # from appearing in your browser bar, you can preventDefault:
$("a.myLinkClass").click(function(e){
e.preventDefault();
//do something..
});
See Demo: http://jsfiddle.net/SJuwL/show
In topic author link, they used this:
jQuery(document).ready(function() {
jQuery('.product-selector').each(function(i, element) {
jQuery('.product-selector.product-' + i).click(function() {
jQuery('a#products-top').focus();
if (producttool == false) {
producttool = true;
}
// Return false so that the page doesn't switch.
return false;
});
});
});
So, the answer on your question, is to return false; in onclick event.
Demo here: http://jsfiddle.net/FSou1/K3p2W/
$('a[href="#"]').click(function(event){
event.preventDefault();
});
Attack a click handler to the link and prevent the default action
$('a').click(function(){return false});
http://jsfiddle.net/MjyzK/show/
To link-jump to a position in the HTML file it is possible to use a named anchor tag.
<a name="here"></a>
LINK <!-- jumps to the position "here" -->