How can I activate an internal page link with Javascript? - javascript

How do you activate a link when the page loads using javascript?
I am trying to open a lightbox when the page loads, here is the link I am trying to activate.
Replay Intro

All you need to do is
<script type="text/javascript">
$(document).ready(function() {
$("#linkID").bind('click',function()
{
$(this).facebox();
})
$("#linkID").click();
})
</script>

using vanilla javascript that would be to use window.location.href = 'your_link_here.html'
Using your lightbox, the code could be different. Please post a link to the lightbox you are using or show us some sample code. Usually they come with API's or documentations on how to use them.

Do you just want to trigger a 'click' event on the <a>?
That would be something like this:
$('#home_video').click();

Related

Why is trigger('click') not working?

I have a simple anchor element like below:
YahOO
Below is JS code:
$(document).ready(function() {
$(".foo").trigger('click');
});
Why is the click code not getting executed?
http://jsfiddle.net/L7vaLrwk/
Instead of using .trigger() try using .click() and target the element by type and classname.
HTML
YahOO
Javascript
$(document).ready(function() {
$('a.foo')[0].click()
})
You can try this way,
HTML
YahOO
JavaScript
document.getElementById('fooTest').click();
Added an id to the link to uniquely identify it, and using plain javascript to simulate a click.
Have replaced google.com with example.com as google doesn't open inside a iframe
You can check working example here on jsFiddle.

Twitter Bootstrap Tabs: Go to Specific Tab with Hyperlink

I've tried to apply the method found on this post : specific tab hyperlink
But i don't understand why it doesn't work for me. I'm sure it's a little mistake but i'm not an expert in javascript.
If you could give me some help :
here is my page but if i try to access directly on my "devis" tab with this link it doesn't work.
Thanks for your time
Try this:
Your external link:
Devis From Outside
And JS (to extract tab hash from page URL and update tabs view):
<script>
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = this.href.split('#');
$('.nav a').filter('a[href="#'+target[1]+'"]').tab('show');
})
</script>
See JsFiddle DEMO, I hope it works for you, Thanks !

Set focus on element of other page imported with jQuery load method

I have HeaderTemplate.html which includes a logout button and a navigation menu. This page will be imported from different pages using jQuery like this:
$(function(){
$("#headermenu").load("HeaderTemplate.html");
});
.
.
</head>
<body>
<div id="headermenu"></div>
After login, user will be redirected to Welcome.html which includes only Header page HeaderTemplate.html. I wanna set focus on logout button only on this Welcome page so the javascript focus() can't be in the HeaderTemplate.html.
The problem is, as HeaderTemplate.html is imported, javascript can't find the logout button's id no matter where I put the code in the page. I even tried like this.
<div id="headermenu"></div>
<script>
document.getElementById('logout-button').focus();
</script>
but still doesn't work. How can I make this work? Any help would be greatly appreciated. Thank you for your time.
Use callback method of .load()
$("#headermenu").load("HeaderTemplate.html", function () {
$('#logout-button').focus();
//Or
//document.getElementById('logout-button').focus();
});

jQuery and Ajax to dynamically load new page

I am attempting to create a static microsite that has a list of pages. I have a main file 'index.php' with a list of links like the following:
Go to page 1
Go to page 2
What I'm trying to do is something like (http://voiceandtone.com/) where when you click on a page it fades-out the current page you are on and animates in the new page without refreshing the page.
Does anyone know how I can achieve this or if there are any great tutorials out there that can help me?
Maybe somethig like this ?
$(document).ready(function() {
$("a").click(function() {
$('#result').load("http://domain.com" + $(this).attr('href'), function(){
// Stuff to do after the page is loaded
});
});
});
here is documentation http://api.jquery.com/load/
The answer is Ajax. You can use either the GET or POST method to achieve your task.

Change href attribute by jQuery in jQuery Mobile

I am creating an application by jQuery Mobile.
I want a link, which redirects to a page. for example:
Account
It is available on all of pages, and I want to change href of that link on every page to something like this:
Account
I have written this code, but it is not working when jQuery Mobile loads a page with Ajax navigation:
$(function () {
$(".useroptions").attr("href", "/Account/?returnUrl=" + encodeURIComponent(document.URL));
});
How to do that when every page is shown? (Which event should I use? ...)
I should use pageshow event of jQuery Mobile. see pageshow part of this page.
Modified version of jQuery code to work correctly:
$("div[data-role='page']").live("pageshow",function() {
$(".useroptions").attr("href", "/Account/?returnUrl=" + encodeURIComponent(document.URL));
});

Categories

Resources