Results 1 to 7 of 7

Thread: DD Hovertabs Modification

  1. #1
    Join Date
    Jul 2005
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default DD Hovertabs Modification

    I have a question about the following script

    http://dynamicdrive.com/dynamicindex1/ddtabmenu2.htm

    I think it is a great idea but I was wondering if it could be modified so that the content expands with an onclick command instead of an onmouse over command. In fact, thats exactly what I did. I went into the actual HTML and changed the function from "onmouseover" to "onclick", the problem is though, the image rollover effect doesn't occur until you actually click on the tab. Without any type of rollover effect when the user scrolls over the tab, they won't know it is clickable. Is there any way to modify this code so that it expands the content with "onclick" yet it still features an "onmouseover" rollover effect and your mouse changes into a hand?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,024
    Thanks
    44
    Thanked 3,209 Times in 3,171 Posts
    Blog Entries
    12

    Default

    Using the example with just these modifications to the links:
    Code:
    <div id="ddimagetabs">
    <a href="http://url/" onclick="expandcontent('sc1', this);return false;">Home</a> <a href="http://url/" onclick="expandcontent('sc2', this);return false;;return false;">New</a> <a href="http://url/" onclick="expandcontent('sc3', this);return false;;return false;">Revised</a><a href="http://url/" onclick="expandcontent('sc4', this);return false;;return false;">Submit</a>
    </div>
    " . . .it expands the content with "onclick" yet it still features an "onmouseover" rollover effect and your mouse changes into a hand."

    Note: I made NO other modifications to the basic installation instructions.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2005
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks John, thats works nicely. At the same time though, there is a small problem that I don't know how to fix since I am relatively new to HTML and I just started learning it.

    Offline the page works fine, but once the page is uploaded to the web, when the user clicks on any of the tabs the content indeed comes up on onclick. However, since the url of the tab is "http://url/" a few seconds after the user clicks on the tab, he gets a "page cannot be found" error. I tried removing the href from the tag so it doesn't link anywhere, but that prevents the tabs from working correctly. I disabled linking in the original Javascript code, but that seems to prevent the tabs from working as well. So, what can I place inside that "href" so the browser bypasses it and doesn't tried to a load a page when the user clicks on a tab?

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,024
    Thanks
    44
    Thanked 3,209 Times in 3,171 Posts
    Blog Entries
    12

    Default

    Are you sure you used return false in the onclick events as I did? I just put up a live version of the demo at:

    Clickable Tabs Demo

    Try it out, works fine here.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jul 2005
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Yes, I used the ;return fase; and double checked I hadn't altered anything else. Here is where things get interesting through. I saved the source of your test page and uploaded it to geocities and it doesn't work. I won't be using geocities as the host for my site, but it is weird that the code works perfectly for you, yet when I saved the source and uploaded to geocities, it experiences the same problem.

    http://www.geocities.com/eliteseraphim/test.html

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,024
    Thanks
    44
    Thanked 3,209 Times in 3,171 Posts
    Blog Entries
    12

    Default

    Geocities hi-jacks the variables i and j, crippling or completely disabling many scripts. There are work arounds but, if you are not planning on using it on Geocities, I wouldn't bother as they also do other weird things so that fixing one problem can reveal another.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Jul 2005
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Yeah, I figured it was something like that since I have been seeing all these little script errors when uploading my test pages to geocities. Anyhow, thanks for the help! I really appreciate it!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •