Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,254
Total Threads: 80,792
Total Posts: 566,471
There are 1343 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     Programming     Javascript :

Hide all divs, show one using getElementsByTagName("div")

Thread title: Hide all divs, show one using getElementsByTagName("div")
Closed Thread    
    Thread tools Search this thread Display Modes  
08-03-2008, 03:13 PM
#1
Avarus is offline Avarus
Avarus's Avatar
Status: Junior Member
Join date: Aug 2007
Location: Apeldoorn, The Netherlands
Expertise:
Software:
 
Posts: 29
iTrader: 0 / 0%
 

Avarus is on a distinguished road

  Old  Hide all divs, show one using getElementsByTagName("div")

Hi, lately I've made a navigation menu that operates through invisible divs that can become visible. By default, all divs are invisible. When you point your mouse over a menu element, the appropiate div shows up. When you point your mouse over another element, the div will hide and another div shows up... At least, that's the idea.

This technique works smoothly when working with a static menu, but when the menu is dynamicaly rendered by PHP, the javascript has to become "dynamic" too. I thought I found a solution for that, but it isn't working as it should.

Code:
function menu(id) 
 {
 var divall = document.getElementsByTagName("div");
 if(divall.className == "menu")
  {
  divall.style.display = "none";
  }
 
var div = document.getElementById(id);
div.style.display= "block";
 
 return false;
   }
When you mouseover an element, the function is invoked by onmouseover="menu('dynamic_name')". This code should first hide all divs with the classname "menu". Then it picks the div with the id "dynamic_name" and chances its display into "block". The latter part works well, but in the first part, something is wrong: the divs won't hide.

I think the problem lies in the fact that divall is an array, but I'm not very good in JS, so I hope you guys can help me out.

08-03-2008, 08:21 PM
#2
CreativeLogic is offline CreativeLogic
CreativeLogic's Avatar
Status: Request a custom title
Join date: Feb 2005
Location:
Expertise:
Software:
 
Posts: 1,078
iTrader: 6 / 100%
 

CreativeLogic is on a distinguished road

Send a message via MSN to CreativeLogic

  Old

This could be accomplished much easier using a javascript library such has jquery. Have you considered using one?

08-03-2008, 08:31 PM
#3
Gaz is offline Gaz
Gaz's Avatar
Status: Request a custom title
Join date: Apr 2007
Location: UK
Expertise: Code & Programming
Software: Coda, TextMate, Sublime 2
 
Posts: 2,097
iTrader: 26 / 100%
 

Gaz will become famous soon enough Gaz will become famous soon enough

Send a message via Skype™ to Gaz

  Old

$(#id1).click(function(){
$(#id2).toggle();
});

easy with jQuery

08-04-2008, 11:30 AM
#4
Avarus is offline Avarus
Avarus's Avatar
Status: Junior Member
Join date: Aug 2007
Location: Apeldoorn, The Netherlands
Expertise:
Software:
 
Posts: 29
iTrader: 0 / 0%
 

Avarus is on a distinguished road

  Old

Cool, I've never heard of jQuery, I'll try this first.

Thanks for your replies

EDIT:

I've tried a script from this site: http://enure.net/dev/hide-all-except-one/. It seems to be exactly what I am looking for, except the point that it gives an error.

I've used this example:

Code:
<a href="#lorem" class="toggle">lorem</a>
<a href="#ipsum" class="toggle">ipsum</a>

<div id="toggleThis">
   <div id="lorem">
      lorem
   </div>
   <div id="ipsum">
      ipsum
   </div>
</div>
This is the main code:

Code:
$(document).ready(function() {
    var hash = window.location.hash;
    
    (!hash) ?  
        hideAllExcept('#' + $('#toggleThis > div:first').attr('id')) 
            : hideAllExcept(window.location.hash);

    $('a.toggle').hover(function() {
        var href = $(this).attr('href');
        hideAllExcept(href);
    });
});

function hideAllExcept(el) {
    $('#toggleThis div').addClass('hide');
    $(el).removeClass('hide');

    $('a.toggle').removeClass('active');
    $('a[href="' + el + '"]').addClass('active');
    
}
This is the error:

Code:
Message: 'guid' is null or not an object
Line: 1835
Char: 3
Code: 0
Since I've been in jQuery for like 1 hour, I've no idea what is going wrong

08-06-2008, 01:33 PM
#5
Avarus is offline Avarus
Avarus's Avatar
Status: Junior Member
Join date: Aug 2007
Location: Apeldoorn, The Netherlands
Expertise:
Software:
 
Posts: 29
iTrader: 0 / 0%
 

Avarus is on a distinguished road

  Old

Anyone?

08-13-2008, 08:48 AM
#6
Avarus is offline Avarus
Avarus's Avatar
Status: Junior Member
Join date: Aug 2007
Location: Apeldoorn, The Netherlands
Expertise:
Software:
 
Posts: 29
iTrader: 0 / 0%
 

Avarus is on a distinguished road

  Old

Well, I've tried, but jQuery is not my thing. I've tried a few plugins and methods, but I can't get it to work, either because of some error it gives, or because I can't apply the code to dynamic PHP.

Is it possible to do it on the 'old school' way, like I've suggested in the beginning (read up, first post)?

08-13-2008, 12:11 PM
#7
Gaz is offline Gaz
Gaz's Avatar
Status: Request a custom title
Join date: Apr 2007
Location: UK
Expertise: Code & Programming
Software: Coda, TextMate, Sublime 2
 
Posts: 2,097
iTrader: 26 / 100%
 

Gaz will become famous soon enough Gaz will become famous soon enough

Send a message via Skype™ to Gaz

  Old

http://jqueryfordesigners.com/jquery-tabs/
http://stilbuero.de/jquery/tabs_3/

or

Add me to MSN and I'll try to help ya.
Gareth

08-15-2008, 01:42 PM
#8
Avarus is offline Avarus
Avarus's Avatar
Status: Junior Member
Join date: Aug 2007
Location: Apeldoorn, The Netherlands
Expertise:
Software:
 
Posts: 29
iTrader: 0 / 0%
 

Avarus is on a distinguished road

  Old

Thanks man, the first link did the trick. It's working now

Closed Thread    


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed