Develop Reference

Javascript to hide div and href in the same link

I have a link that sets a cookie and hides a DIV (intro) when clicked. I however also want it to go to a URL (a href) when clicked, while still running the code to hide the div and set the cookie. How do I achieve this?
Currently I have the cookies code:
$(document).ready(function() {
if (!readCookie('my-intro')) {
$('#intro').show();
}
$('#close').click(function() {
$('#intro').hide();
createCookie('my-intro', true, 1)
return false;
});
});
(Note there's more code for the "createCookie" function, but I don't think that's relevant to the problem, so I removed it to keep it cleaner).
And the current link:
close and go to URL
The problem is with the above, I need it to close AND go to a URL, which I can't seem to set as I already have a "href" with javascript.
Thank you very much in advance for your help.

Just enter your link under the href attribute, and return true at the end of your click function.

You can more-or-less duplicate what a normal <a> click does by just setting window.location:
window.location = "http://what/ever";
Now, that said, it's not really clear what the point would be of adjusting page layout when you're about to obliterate it all anyway.

If I understand you properly I would do the following:
Give the link these attributes:
Close and go
And then do a
window.location = $( '#close' ).attr ( 'href' );

I think you can use the following code-
<div id="div1">click here to go to www.yahoo.com</div>
You have to define the setCookie() function to set the cookie.

document.location strange behaviour? / alternative jsTree link solution?

I've build up an menu with jQuery.jsTree and every item should contain a link to a specific page. With jsTree it isnt possible to click these links due to the prevention of the standard behaviour of
<a href="index.php?content=example" ... >....</a>
links (this is actually an example of one of my links. The index.php is my standard page and just the content will be replaced). In order to fix that I found this solution:
jQuery(".tree").bind("select_node.jstree", function (e, data) {
document.location = data.rslt.obj.children("a").attr("href");
});
This solution works partly for me, which means the clicked link works but in the opened window Firebug tells me that jQuery is not defined. Is it possible that on document.location the browser "forget" the library imports (as I mentioned I stay on the index.php page and just replace the content)?
and the other question is: does anyone may know a better solution for the enabling of the links in jsTree without edit the library itself ?
thanks in advance!

If your links at first look like:
<a href="index.php?content=example" ... >....</a>
And you want to load the content into a div with ID maincontent
You can do something like:
$(".tree a").each(function(){
var $this = $(this);
$this.click(function(){
$("#maincontent").load($this.href, function(){
// this callback functions fires once load is complete,
// incase you need to do post-load operations
});
return false;
});
});
This will byposs loading the new page as a normal link would, and fetch the page via AJAX and load the returned HTML into the DIV with ID maincontent.
Code is untested, but I've done this in the past so should work as is.

Fancybox link to display another fancybox

Sometimes it makes sense to have a link within a fancybox to launch another fancybox (or load content within the current one).
Say, you have a fancybox error message on login. You also have a "email me my password" widget that works via a fancybox. You may want to combine the two to say (in a fancybox):
Bad password!
Forgot my password!
Unfortunately, this will not work. I considered adding the following js:
$('#fancybox-content a').live('click', function(){
$(this).fancybox();
});
Surprisingly, this sort of worked: You have to click on the link twice and then the right thing happens. Ugh.
Finally, I found a hacky ugly work-around (it works!):
$('#fancybox-content a').live('click', function(){
var href = $(this).attr('href'); //assume there is a selector inside href
$.fancybox($(href).html()); //find the html manually and load
});
What is the right way to accomplish this?

This is i how i solved this problem in my projects:
$('a.fancybox').live("click",function(event) {
event.preventDefault();
var href = $(this).attr('href');
$.fancybox({href: href})
});
In this way you can add fancybox to any current un future A elements with .fancybox class so you don't have to define new events after opening fancybox.

Version 2 is already using "live", so using class names - `$(".fancybox").fancybox();' - would also work on elements loaded using ajax

You should be telling elements to open a Fancybox from within your plugin.
Somewhere you have the following ->
$(document).ready(function(){
$("#my_element").fancybox();
});
That's a very basic function to open a Fancybox, and not only that, but it will also what to open based on the href of the element. You don't need to do any leg work here.
So if you have ->
Forgot my password!
Simply add an ID, such as 'x' for simplicity ->
<a id="x" href="#forgot-password">Forgot my password!</a>
Then, enable the Fancybox plugin for this element.
$(document).ready(function(){
$("#my_element").fancybox();
//this is for our new container to fire
$("#x").fancybox();
});
That should be all you need.

Create a Javascript function to simulate clicking on a href on a page

Thanks in advance to anyone that can help me on this issue. I have a basic index.php page running a XML rotating banner. In the banner you can have html links to other pages. That all works fine. I also have a jquery Contact Form that gets hidden on load in the index.php page. To activate the form I use the following href link on the index.php page, ContactForm and works and display form perfectly.
However my issue is that I cannot get the link to from the xml rotating banner to load the contact form. If I simply put the link ContactForm into it nothing happens. The Contact form does not appears. I think it maybe because the link is inside the images.xml file and the #contactForm cannot get activated from within that file. I think the form needs to be activated from the index.php file. So what I thought I would do is create a link to a javacript script function and calls the jquery function to show the contact form.
However, I am either going about this the wrong way or I am missing something in my LoadContactForm function. It only triggers the alerts. I have tried so many different code snippets and I still cannot seem to get it to work. Here is the lastest version of my function that I created that is still not working. Any help and sample code would be greatly appreciated!
<script type="text/javascript">
function LoadContactForm()
{
alert("Load Contact Form 1!");
window.location.document.getElementById('a[href="#contactForm"]').click();
return false;
alert("Load Contact Form 2!");
}
</script>

Luke... You about nailed it with:
$("a[href="#contactForm"]").click();
I just used the following and it does work:
$("a[href=#contactForm]").click();
Cheers!
~Ken

You are calling getElementById and you dont have any id. Also your script is not jQuery.
$(document).ready(function(){
$("a[href="#contactForm"]").click(function(){
alert("Form clicked");
});
function LoadContractForm(){
$("a[href="#contactForm"]").click();
}
});
I do not understand you question fully. How is the form hidden? Via css? What triggers the survey form? Why don't you give your survey form an id that you can refer to with $("#idname").toggle();

How can I activate an internal page link with 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();