Search jQuery

jQuery Forum

opening a tab using an image link instead of the actual tab

in Using jQuery • 13 years ago

Please forgive me, as I am pretty new at Javascript, but I need to learn

Anyways, i use the Jquery UI Tabs plugin for navigation within a page on my website. I have two tabs on this page and I would like to have one image at the bottom of the first tab content that just simply opens the second tabbed content.

I read this wiki on the documentation section of the plugin page:

..select a tab from a text link instead of clicking a tab itself

var $tabs = $('#example').tabs(); // first tab selected $('#my-text-link').click(function() { // bind click event to link $tabs.tabs('select', 2); // switch to third tab return false; });

This had me pretty confused.

This is the code that I have for the image (it also uses a simple javascript image hover effect on it as well)

 
    <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('consultation','','../weddings/pagegraphics/consult_b.png',1)"><span><img src="../weddings/pagegraphics/consult_a.gif" alt="set up a consultation now" name="consultation" width="293" height="36" border="0" id="consultation" align="right" /></span></a>

So when I read the the above wiki, i assumed that you put it in head like this:

     $(function()
            {
            /*    $('#tab-me').tabs();  */
                $('#tabmain').tabs(4, { fxFade: true, fxAutoHeight: true});
                $('.scroll-paneMap').jScrollPane();                
var $tabs = $('#tab1').tabs(); // first tab selected
$('#consultation').click(function() { // bind click event to link
    $tabs.tabs('select', 2); // switch to third tab
    return false;
});

Where i used the id of the image as the first "blind click event to link" and the name of the first tab that is opened when you view the page as "tab1" and the name/id of the tab that I would like to open on click is tab2

this is my basic code setup:

 <div id="tab1" class="tabContent">
          <div class="scroll-paneContact">
MAIN CONTENT GOES HERE
    <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('consultation','','../weddings/pagegraphics/consult_b.png',1)"><span><img src="../weddings/pagegraphics/consult_a.gif" alt="set up a consultation now" name="consultation" width="293" height="36" border="0" id="consultation" align="right" /></span></a>
</div><div>
<div id="tab2" class="tabContent">
            <div class="scroll-paneContact" >
FORM TO LINK TO FROM TAB1 GOES HERE
</div></div>

So as you can see, I am pretty stuck. I'm sure i did something entirely wrong and misunderstood the instructions in the wiki doc. ANY help at all is GREATLY appreciated.

Replies(10)

hardrain

Re: opening a tab using an image link instead of the actual tab

13 years ago

Your pasted code is a little bit confusing and does not adhere with your script too.

 $('#consultation').click(function() { // bind click event to link
Where is your consultation html tag?

lindsayan..

Re: Re: opening a tab using an image link instead of the actual tab

13 years ago

Its in the image code here - have a look at the end, the ID="consultation" is there

<img src="../weddings/pagegraphics/consult_a.gif" alt="set up a consultation now" name="consultation" width="293" height="36" border="0" id="consultation" align="right" />

ajpiano

Re: opening a tab using an image link instead of the actual tab

13 years ago

1) This line in your code is very unclear:

$('#tabmain').tabs(4, { fxFade: true, fxAutoHeight: true});

What is it supposed to be do?

2) Are you sure the click event that you bound to that image is bound and firing at all?

You can debug this by using Firebug and putting a console.log() statement in the click handler, or using breakpoints.

I am skeptical of the wisdom of binding directly to an image that is INSIDE of an A tag, maybe you could try binding to the A by doing

$("#consultation").closest("a").click(function(e) {
$tabs.tabs("select","#tab2");
return false;
});

You can use the selector for the tab you want to select, instead of the 0 based index, as well, and see if that makes any difference.

3) Don't use Dreamweaver's built-in image rollovers. They make everyone want to gag.

lindsayan..

Re: Re: opening a tab using an image link instead of the actual tab

13 years ago

hmm.. yea.. Did I mention that I am REALLY REALLY new to this? Like i said, i am not overly familiar with javascript yet, but I am learning by reading, trying, and doing.

So when you say "use a console.log() statement in the click handler, I'm not entirely sure what you are saying.. or breakpoints.

The #tabmain function was there from the UI tabs to make it animate on click. I have not gotten that to work ever since I got the scroll-pane script to work.. So i guess its kinda moot, since it's not being used. I kept it there because eventually I would like to figure this out as well.

as for the image rollovers.. i know, they are horrible. To tell you the truth, I just did them as quick "get it in there to see how it looks/works" and then was going to clean it up.

I was GOING to use a CSS rollover option, but I am more than open to suggestions if you know of an easy image roller script!

p.s. I really REALLY appreciate your help. I am going to upload my testing document that I am working. This is just crappy ugly website.. but you can see what I am trying to do. THANKS

lindsayan..

Re: Re: opening a tab using an image link instead of the actual tab

13 years ago

Ok.. here is the link to the page.

If you do take a look at it and come up with a solution, if you could please explain it in laymens terms, i would really appreciate it. I am actually trying to learn how to do this stuff.. not just looking for quick fixes.

BTW, i hate this particular website. I generally do graphic design and some basic HTML stuff.. I'm MUCH MUCH better at php coding than javascript.. I work on ecommerce things for the most part.. but this.. THIS thing will be the death of me. Someone else developed and designed it. now I had to take the design and make it more usable (before it was all hacked up images from photoshop/fireworks) nothing was expandable.

ajpiano

Re: opening a tab using an image link instead of the actual tab

13 years ago

console.log , and the full console API, are available as part of Firebug (http://www.getfirebug.com), an extension for Firefox. There are debugging consoles available in Safari, Chrome, Firefox, and IE8. Using the console is a crucial part of developing in Javascript, and you need to be able to use the console so you can debug your code as it happens. Console.log() is somewhat like alert, only it doesn't pause execution and it allows for much richer view of the data.

When i say "Click handler", i just mean, "the event you bound to the click."

If you want javascript image rollovers, you can use jQuery's hover() method.

Unfortunately, you didn't actually post the link in your last post. If you post that up properly, perhaps someone will take a look.

lindsayan..

Re: Re: opening a tab using an image link instead of the actual tab

13 years ago

Wow, I do feel like an idiot for not posting the link. my head is spinning with this website and its making me more and more angry with my husband (the guy who came up with this "great fucking idea" for a website with a rounded edge")

Anyways here is the ACTUAL link

website test page

I do have firebug and used firebug before (use it a lot actually when playing with CSS stuff).

So if i understand you correctly, when you say "the event you bound the click to" that would be this:

$("#consultation").closest("a").click(function(e) {
$tabs.tabs("select","#tab2");
return false;
});

but what do i do with it?? how do I attach it to that?

When I view the page in firebug i get a LOT of errors because of that google map.. Also, i dont know if there is something wrong with it, but I can't seem to expand the warnings to see where they are coming from.

I do appreciate any and all help I can get. If you do have the time, please try and explain the "whys" and "hows" of the fix so I can learn for the future. THANKS

Just ran the profiler with the script as it is now.. I clicked on the image that I had tried to apply the open tab to and got nothing. It said "not event to profile" so i'm not entirely sure whats happening.

lindsayan..

Re: Re: opening a tab using an image link instead of the actual tab

13 years ago

Yea.. so i tried a simple jquery hover plugin and it's not working. I really feel stupid! I am using this one now:

jquery simple hover image script

test page 2

I do appreciate any and all help I can get. If you do have the time, please try and explain the "whys" and "hows" of the fix so I can learn for the future. THANKS

ajpiano

Re: opening a tab using an image link instead of the actual tab

13 years ago

So far as I can tell, you don't have tabs set up properly. You seem to have two separate instances of tabs right next to each other on the page. Even though that animation you wanted didn't work, you still are initing .tabs() twice. The markup for tabs should be something along these lines, and there should only be ONE instance of the tabs widget.

             <div id="tabs">
                <ul>
                    <li> <a href="#about"><span>About your consultation</span></a></li>                    
                    <li> <a href="#request"><span>Request Form</span></a></li>
                </ul>       
                <div id="about">
                    <a id='consultation'><span><img/></span></a>
                </div>
                <div id="request">
                    <form/>
                </div>
            </div>    		
And the JavaScript should be something along the lines of
$(document).ready(function() {
var $tabs = $("#tabs").tabs();
$("#consultation").click(function(e) { // this is "binding the click handler"
$tabs.tabs("select",1); // or you can use $tabs.select("#request")
return false;
});

Also, from a page performance standpoint, I don't know if swapping full images just to get an underline on an image text is necessarily the most performant approach. In general, when developing, don't leave code in that isn't working right. Try to take things one step at a time and work the bugs out one at a time. Otherwise, the likelihood that you introduce weird knots and complications goes up dramatically.

You can use Firebug to debug JavaScript code. The console.log() statement allows you to output selections of elements, or anything else you need to view.

For instance,

$("#container").click(function(e) {
console.log(e); // this will log the Event object to the console so you can view its properties. 
//the fact that ANYTHING is logged to the console is evidence that the function has fired.
});
You can also use the Script tab in firebug to add breakpoints to code, and the execution will pause when that code is running.

lindsayan..

Re: Re: opening a tab using an image link instead of the actual tab

13 years ago

Actually, the code for the tabs (the div container for the UL being separate for the div container for the tabs and then the individual tab containers) is what I got directly from the jquery UI tabs website.. i think.. unless i really REALLY messed something up.

Your code has the tabs being in the same container as the tab's content, and i dont think thats how it was.
I could be wrong.

As far as your fix - YOUR A GENIUS!!!! THANK YOU SOO MUCH!! IT WORKS!!!

I see now that the first line in there is telling the code to use the container id #tabsmain as the main navigation, and the second line of code is giving the same function as the tabs to different elements (only those with that particular id).

I do know the importance of getting one bug fixed before the other.. I get impatient, but I usually create a cop HTML page and work on that until the other one is fixed.. once I get the things working separately, I combine them. I have CLEAN backups of everything, partially clean (few bugs) versions, and then I combine what I have when its all said and done, one bit at a time and test as a go.. Might be sloppy, might require a LOT LOT LOT of notes and stuff, but it kinda works for me.

I dont know if i picked a dud of an image swap script, but it seemed pretty straight forward (like pretty photo) and I cant get it to work.. The reason I wanted to use an image swap for an underline is because I probably will change that image (i dont like it). So i just uploaded the new page with the working tabs WITH the image link (YAY!)

Link

huh.. just realized after I uploaded (script seems to work when its ok a server, but not on my local files) that its blinking AND the link doesn't work - i think this might be because it can't find the second pic. Must be something wrong with my file paths

Top Reply

Response title

Attachments

jQuery Forum

opening a tab using an image link instead of the actual tab

..select a tab from a text link instead of clicking a tab itself

Replies(10)

Re: opening a tab using an image link instead of the actual tab

Re: Re: opening a tab using an image link instead of the actual tab

Re: opening a tab using an image link instead of the actual tab

Re: Re: opening a tab using an image link instead of the actual tab

Re: Re: opening a tab using an image link instead of the actual tab

Re: opening a tab using an image link instead of the actual tab

Re: Re: opening a tab using an image link instead of the actual tab

Re: Re: opening a tab using an image link instead of the actual tab

Re: opening a tab using an image link instead of the actual tab

Re: Re: opening a tab using an image link instead of the actual tab

Statistics

Tags

Actions