SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Switch Content script- Dynamic Drive firefox issues when altering the layout

    Hi all,
    I'm not very good in javascript but i can handle CSS and html rather well.
    i am using the Switch Content script- Dynamic Drive for a web site. I had to alter the position of the links in the page to suit the layout, meaning instead of the content to drop down below the link to appear on the left hand side. It does work fine in ie but unfortunatelly in firefox it leaves a huge gab that i take it is the total ammount of the text when it is hidden.

    please preview my attempt http://www.weblizzard.co.uk/oandc/LocationandInfo.htm

    please please help

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I think you'd be better off writing your own script for this. For starters, in your links, the "href" attribute's value is "#", which makes the page jump to the top every time, which is annoying. You need to cancel the default action:
    Code:
    function swapcontent(e) {
      if (!e) window.event.returnValue = false;
      else e.preventDefault();
      // the rest of the code
    }
    That script from Dynamic Drive, as usual, is bloated and horribly verbose. Plus it uses javascript in the body, which is not good. What I would do is give all the things that are swappable a class of "swappable" at the outset, not with javascript, but directly in the HTML or using whatever you're using on the server side. Also give the one that is to be shown by default a class of "show". Then in your CSS you can do this:
    Code:
    .swappable {display:none}
    .show {display:block}
    Presumably each item to be swapped is in a DIV of its own. Then using javascript, find all the DIVs with the class "swappable" and also find all links with a class of "swapper", which are the links you click. Then attach a click event to each swapper and when each is clicked, you run your swapping function. Each link should have a "href" attribute with a value equal to the ID of the DIV that is to be shown with a "#" in front of it. This way, when JS is off, the page will just scroll down to the relevant area, like a normal link of that sort.

    When the function runs, cycle through the DIVs and remove the className of "show" for whichever is to be hidden. Then find the element with the ID that you get from the link's "href" attribute, give it the class show and you're done.

    Also, if you say you're good at HTML and CSS, you really ought to stop using tables for your layout and using more semantic HTML. For example, this:
    HTML Code:
    <p class="TitleBrown">How to reach O&B from Athens Airport</p>
    really ought to be:
    HTML Code:
    <h2>How to reach O&B from Athens Airport</h2>
    That's what heading elements (h1 - h6) were invented for!!

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb

    Hey Raffles,
    thanks very much for your reply. The think is that I've only started working in this company last week, and this website was already made by 80% and in joomla and I'm trying to correct a few thinks in the layout and add function. the code is a big mess as it's a mixture of joomla's and the previous designer. now we decided to rebuild the whole think from the beginning as it was taking us too much time to correct the previous.

    Yesterday I've tried to move around the divs with the links outside the main container area and the huge gab did disappear but other things obviously broke down. Anyway as i said before we are doing it from the start, so wish me luck and i will let you know how it went.

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb

    Hey Raffles,
    thanks very much for your reply. The think is that I've only started working in this company last week, and this website was already made by 80% and in joomla and I'm trying to correct a few thinks in the layout and add function. the code is a big mess as it's a mixture of joomla's and the previous designer. now we decided to rebuild the whole think from the beginning as it was taking us too much time to correct the previous.

    Yesterday I've tried to move around the divs with the links outside the main container area and the huge gab did disappear but other things obviously broke down. Anyway as i said before we are doing it from the start, so wish me luck and i will let you know how it went.

  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Good luck, and you're right to start from scratch. I've read enough about people's woes with inheriting bad, messy code from previous developers and trying to build on it to know that starting from the ground up is almost always a better solution that will work better, be more maintainable and save you some stress.


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
  •