Perform hyperlink by hover - javascript

I have a very little problem. I want to go on another site, by hovering an "a"-link (like clicking the link, just without the click :) ). Is this possible with css? If yes, how do you do that?

It's absolutely not possible with CSS, as far as I know, but you can do it with pure JavaScript or with any advanced JavaScript library.
I'm gonna give you a simple solution:
<a onmouseover="this.click();" href="...">link</a>
Or, if you want to use jQuery:
$('a').mouseover(function(){
$(this).click();
});

document.querySelector('#your_a_id').onmouseover = function()
{
window.location = "http://www.yoururl.com";
}
a way using javascript :)

onmouseover="function()"
window.location.href = "https://www.example.com";
now you can go on a URL just hovering over it.

Related

Make javascript work on any link

I would like for an effect to happen (a certain <div id="posts"> to translate left) when clicking on any link of my page. I was wondering if there was a way to do this with javascript. The only thing I thought about was the function but to add the attribute onclick="myFunction" to all of my links would be so long..
Maybe there is a pre-made js function that works on any link?
I also thought about using CSS a:active but I don't think that would be the best idea.
Thanks for the replies! :)
You can use jQuery to look for clicks on the <a> element, and call a function from there:
$('a').click(function() {
// code to translate div left
});
You can use jQuery to make things work like this:-
$('a').click(myfunction);
function myFunction() {
//do click event stuff here :)
}
If you need a pure JavaScript alternative, I'm not sure if this will work but here's something you can try:
var a = document.getElementsByTagName("p");
for(var i=0; i<p.length; i++){
p[i].onclick = function(){
myFunction();
}
}
function myFunction() {
//do click event stuff here :)
}
For a better understanding, you can refer to http://jsbin.com/onaci/
I'm sorry if I misunderstood you. If so, please correct me.
Thanks

Adjust menu bar buttons' highlighter when scrollling the webpage

Take a look at https://www.simple.com website. See the way menu (& submenu) works when you scroll the webpage.
Does anyone know what it's called or know how it works? I'm trying to find a example or plug that can do this.
Thanks...
It is called fixed navigation bar and here is a great tutorial
http://www.fuelyourcreativity.com/how-to-create-a-fixed-navigation-bar-for-your-website/
It is very simple using jquery scroll() event handler.
You can bind it using following code
$(window).scroll(function () {
//your code goes here
}
read more at http://api.jquery.com/scroll/
It's just a simple anchor tag they've used along with some jQuery. A quick example here for you.
Create your links as normal Blog. This creates an anchor to move to your blog section.
Add a class to your element so it's now like: Blog
Next, add the jQuery code below to your page.
Don't forget to include the jQuery library..
$(document).ready(function() {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});
});
I have decided to delete the question as there's no answer to what I'm looking for and there's no need to leave behind an unanswered post 2 years from now.

I want to have a overlay using css but it's not working

I am trying to create a overlay dialog box using CSS . I wrote the css but I am not able to display the overlay dialog box. Any help would be greatly appreciated.
Check out my attempt here. Also this should work in IE9 and firefox.
http://jsfiddle.net/tGDKT
why not just use jQuery UI's dialog:
http://jsfiddle.net/maniator/tGDKT/15/
$(function() {
$('.clickme').click(function() {
$('iframe').dialog();
});
});
You could also attach the method in the javascript, unobtrusive style. Give the <a> an id or:
$('a').click(calculateEmbeddedWindowSize);
... would call the function for every link on the page.
I keep getting "calculateEmbeddedWindowSize is not defined" in the console. Your javascript does not seem to be there at all on the page.
Edit - Try this: http://jsfiddle.net/tGDKT/7/

Looking to automate a webpage with links using Javascript

I'm new to programming and have a question related to HTML and Javascript. I have a HTML page with 100 links on it. I'm looking for a way wherein if I click on the first link then the rest of the links are clicked after it without me having to click them manually. Is there a way to do it?
Please help!!!
$("a:first").click(function() {
$("a:not(:first)").click();
});
Sample working code: http://jsfiddle.net/EJY8s/
$('a').each(function() {
$(this).click();
});
For full-syntax head to Jquery site documentation.
The following bit of Javascript will make it so you can click any one of those 100 links and open them each in a new window. 100 impressions, how nice.
$a = $("a");
$a.click(function(e){
e.preventDefault();
$a.each(function(){ window.open(this.href); });
});
Demo: jsfiddle.net/JB2YF
If you only want the first <a> to open all links, it's an easy tweak:
$("a:first").click(function(e){
e.preventDefault();
$("a").each(function(){ window.open(this.href); });
});

Executing JavaScript when a link is clicked

Which is preferable, assuming we don't care about people who don't have JavaScript enabled?
Or
Is there any difference?
Or there any other ways I'm missing besides attaching an event to the anchor element with a JavaScript library?
The nice thing about onclick is you can have the link gracefully handle browsers with javascript disabled.
For example, the photo link below will work whether or not javascript is enabled in the browser:
foobar
it's better to use the onclick because that's the way the things should be.
The javascript: was somekind of hackish way to simulate the onclick.
Also I advice you to do some non intrusive Javascript as much as possible, it make the code more easy to read and more maintainable!
href="#" has a number of bad side effects such as showing # in the browser footer as the destination URL, and if the user has javascript disabled it will add a # at the end of their URL when they click the link.
The best method IMHO is to attach the handler to the link in your code, and not in the HTML.
var e = document.getElementById("#myLink");
e.onclick = executeSomething;
This is essentially the pattern you'd want to follow:
Write your HTML markup
Attach event handlers from JavaScript
This is one way:
<a id="link1" href="#">Something</a>
<script type="text/javascript">
// get a reference to the A element
var link1 = document.getElementById("link1");
// attach event
link1.onclick = function(e) { return myHandler(e); };
// your handler
function myHandler(e) {
// do whatever
// prevent execution of the a href
return false;
}
</script>
Others have mentioned jQuery, which is much more robust and cross-browser compatible.
Best practice would be to completely separate your javascript from your mark up. Here's an example using jQuery.
<script type="text/javascript">
$(function() {
$('a#someLink').click( function() {
doSomething();
return false;
});
});
</script>
...
some text
Yes I would agree to use onclick and leave the href completely out of the anchor tag... Don't know which you prefer to do but I like to keep the 'return false' statement inside by function as well.
The main difference is that:
The browser assume by default the href attribute is a string (target url)
The browser knows that in a onclick attribute this is some javascript
That's why some guys specify to the browser "hey, interpret javascript when you read the href attribute for this hyperlink" by doing ...
To answer the question, that's the difference!
OTOH what's the best practice when using javascript events is another story, but most of the points have been made by others here!
Thanks

Categories

Resources