jQuery look: Tim Van Damme | I can't get a small modification done

[Frankey]

Hi There,

I have found a very usefull and lightweight code that is made by the famous Tim Van Damme, a Dutch compatriot.

Here is the code, i will explain my question beneath.

The js that works in combination with the js libary.

<script language="javascript" type="text/javascript"> 


jQuery(document).ready(function($) {

  $('.tabs').each(function () {
	var $links = $(this).find('a'),

      panelIds = $links.map(function() { return this.hash; }).get().join(","),
      $panels = $(panelIds),
      $panelwrapper = $panels.filter(':first').parent(),
      delay = 500,
      heightOffset = 10; // we could add margin-top + margin-bottom + padding-top + padding-bottom of $panelwrapper
      
    $panels.hide();
    
    $links.hover(function () {
      var link = this, 
        $link = $(this);
      
      // ignore if already visible
      if ($link.is('.tabs-selected')) {
        return false;
      }
      
      $links.removeClass('tabs-selected');
      $link.addClass('tabs-selected');
      
      document.title = 'jQuery look: Tim Van Damme - ' + $link.text();
              
      if ($.support.opacity) {
        $panels.stop().animate({opacity: 0 }, delay);
      }
      
      $panelwrapper.stop().animate({
        height: 0
      }, delay, function () {
        var height = $panels.hide().filter(link.hash).css('opacity', 1).show().height() + heightOffset;
        
        $panelwrapper.animate({
          height: height
        }, delay);
      });
    });
    
    $links.filter(window.location.hash ? '[hash=' + window.location.hash + ']' : ':first').click();

  });
  });

</script>

The corresponding HTML code

<ul class="tabs tabs-nav">
<li><a href="#news"><span>News</span></a></li>
<li><a href="#blog"><span>Blog</span></a></li>
</ul>    
   
 <div class="panels">

     <div id="news" class="panel">
      <h1> hello news panel</h2>
      </div>

     <div id="blog" class="panel">
      <h1> hello blog panel</h2>
      </div>

</div>

This all works fine and I just want 1 small modification which i can't get done.

I want this list item

<li><a href="#news"><span>News</span></a></li>

like this so i can use the href to actually link to a page

<li><a href="http:www.mysite.nl/news" rel="#news"><span>News</span></a></li>

I am not that familiar with js but i tryed multiple things and searched a while on the internet but can't get the job done.

I thought this would be simple to change, well, not for me right. Can one of you point me in the right direction?

[Airshow]

Frankey,

Change

var panelIds = $links.map(function(){ return this.hash; }).get().join(","),
//to
var panelIds = $links.map(function(){ return (this.getAttribute('rel')) ? this.getAttribute('rel') : this.hash; }).get().join(","),

and

var height = $panels.hide().filter(link.hash).css('opacity',1).show().height() + heightOffset;
//to
var panelId = (link.getAttribute('rel')) ? link.getAttribute('rel') : link.hash;
var height = $panels.hide().filter(panelId).css('opacity',1).show().height() + heightOffset;

I only tested in IE. If it doesn't work in FF, Opera etc. then try replacing link.getAttribute('rel') with link.rel (in four places).

Airshow

[Frankey]

Airshow, many thanks for solving this. Great you had some sparetime to look into my code.

It works properly in IE 8 and FF 3.6, don't tested it yet in other browsers buti assume it will do fine there.

I only got rid of the VAR before the PANELIDS cause that wasn't in the original code actually.

Again Airshow, wonderfull that people putting effort to help others. We should put that in al aspects of life don't we?

[Airshow]

Only too pleased to be of some help Frankey.

I actually made an error by inserting var . Those lines of code are separared by , , so the leading var covers everything up to heightOffset = 10; .

For lines of more than a few characters, I would personally choose to make separate statements each starting with var and ending in ; . In fact that's what I did to test out the changes. I remembered to replace the ; with a , but I forgot to remove var in my reply.

Airshow

[Airshow]

I have just realised, there's an easier way (with a constraint).

Simply use your unmodified original code with :

<li><a href="http:www.mysite.nl/news#news"><span>News</span></a></li>

This is a rather odd formulation in that the href's "http:www.mysite.nl/news" will be interpreted by the server (onclick) via HTTP, while its hash string "#news" will be interpreted by javascript (onmouseover). Odd but sort of clever and it's possible that this is what your compatriot, Mr Van Damme, had in mind.

The constraint (as I'm sure you can see) is that the href can't have an independent hash string of its own.

Airshow

[Frankey]

I used your first suggestion, i works quiet good so i will stick to that, unless you strongly advice me to use the other.:-/

[Airshow]

I thnk that both versions should work Frankey.

If you have tested the first version cross-browser then by all means use it.

Airshow

[Frankey]

never too late, thanks!