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); });
});
Related
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.
There is a way to simulate a click on a link after having clicked another?
I have made this script:
$(".uno").click(function() {
$(".due")[0].click();
});
Fiddle: https://jsfiddle.net/5ad3m8La/
When I click on "one" want "two" open the page as indicated.
My script does not work, and I do not understand why.
Update your fiddle. Updated one https://jsfiddle.net/5ad3m8La/2/
Made few changes given below:
1. Added target="blank" in link.
2. Added http:// before google's link.
3. Wrapped your code in document.ready.
and it's working now :)
$(".uno").click(function(e) {
e.preventDefault();
location.href = $('.due').attr('href');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
One
Two
This is not the same as emulating a click, but this way the behaviour is the same as clicking another linke (without special code attached to it)
Try the code below:
$('.due').trigger('click');
Try this:
One
Two
jQuery:
$( ".uno" ).click(function() {
$('.due').trigger("click");
});
$( ".due" ).click(function() {
var link= $(this).attr("href"); // you need to ger href and redirect to that link
window.location.href = link;
});
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'm new to Jquery and Ajax and have tried to solve a problem for over 1h now.
You can see the page here: http://smartcreations.se/test/test.html (If you click in the green area it have the effect I want it to have.)
Almost everything works as I want except i can't use the menu at the top to have the boxes to aminate and load the content as it does when you click on the green div.
So what I want from you guys is some input on how I can solve this, another point of view.
$(window).load(function(){
$(".box").click(function(){
$(this).animate({
top: '-50%'
}, 500, function() {
$(this).css('top', '150%');
$(this).appendTo('#container');
$(".loadinghere").load($(this).attr('name'));
});
$(this).next().animate({
top: '50%'
}, 500);
});
});
This is the closest I get, but the links not works at all.
You can just fake the click on the box by using e. g.
$("#box1").click();
but I would do it completely different:
About me!
Portraits
Weddings
Action
<script type='text/javascript'>
$(document).load(function(){
$("a.show").on("click", function(e){
e.preventDefault();
var click=$(this);
var link=click.attr("href")+"#box";
$("#box").after("<div id='box2' />").load(link, function(){
$(this).animate({
// your effect and stuff
});
// Rename the new box and throw out the old one
// Make sure, it is not visible
$("#box").remove();
$("#box2").attr("id","box");
});
});
});
</script>
The idea is, to use full html and extract just the html out of #box and insert it on your current page. You can also use the newer history api or anchors for this. The main advantage is, that you can still use your page if JS is turned of. (Miss)using name or other html attributes for this is a really bad practice. If you need to, use the data attribute.
(The code is untested and the quick and dirty way just to give you an idea.)
I have tried finding a simialr example and using that to answer my problem, but I can't seem to get it to work, so apologies if this sounds similar to other problems.
Basically, I am using Terminal Four's Site Manager CMS system to build my websites. This tool allows you to generate navigation elements to use through out your site.
I need to add a custom bit of JS to append to these links an anchor.
The links generated are similar to this:
<ul id="tab-menu">
<li>test link, can i rewrite and add an anchor!!!</li>
</ul>
I can edit the css properties of the link, but I can't figure out how to add an anchor.
The JQuery I am using is as follows:
<script type="text/javascript" src="http://jquery.com/src/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// everything goes here
$("#tab-menu").children("li").each(function() {
$(this).children("a").css({color:"red"});
});
});
</script>
Thanks in advance for any help.
Paddy
sort of duplicate of this:
How to change the href for a hyperlink using jQuery
just copy the old href and add anchor to it and paste that back
var link = $(this).children("a").attr("href");
$(this).children("a").attr("href", link+ "your own stuff");
A nice jQuery-based method is to use the .get(index) method to access the raw DOM element within your each() function. This then gives you access to the JavaScript link object, which has a property called 'hash' that represents the anchor part of a url. So amending your code slightly:
<script type="text/javascript">
$(document).ready(function(){
// everything goes here
$("#tab-menu").children("li").children("a").each(function() {
$(this).css({color:"red"}).get(0).hash = "boom";
});
});
Would change all the links in "#tab_menu li" to red, and attach "#boom" to the end.
Hope this helps!
I can now target the html by using the following:
$(this).children("a").html("it works");
I assumed that:
$(this).children("a").href("something");
would edit the href but I am wrong.
Paddy
I am not sure for the answer, I dint try
$("#tab-menu").children("li").children("a").each(function() {
// $(this).css({color:"red"}).get(0).hash = "boom";
var temp_url = $(this).href +'#an_anchor';//or var temp_url = $(this).attr('href');
$(this).attr('href', temp_url);
});