vb.org Archive - Hiding/Showing a Div with JavaScript.

Page 1 of 2

Show 40 post(s) from this thread on one page

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vB3 Programming Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=15)

- - Hiding/Showing a Div with JavaScript. (https://vborg.vbsupport.ru/showthread.php?t=160777)

MrApples

10-21-2007 08:19 PM

Hiding/Showing a Div with JavaScript.

What action do I need to use to hide or show a div, and everything it contains. I know that it needs a seperate ID, and how to call the function, but I need to know the action.

My current way of going about this(without the action of course).

Code:

<script type="text/javascript">

hcur=0



function hidelast(){

switch(hcur){

case 0:

    hide div0

    break

case 1:

    hide div1

    break}

}



function header_main(){

if ( hcur!=0 ){

    hidelast()

    hcur = 0

    show div0}

}



function header_diff1(){

if ( hcur!=1 ){

    hidelast()

    hcur = 1

    show div1}

}

</script>



...



<div id="div0">

    <a href="url"><img onmouseover="header_main()"></a>

</div>

<div id="div1">

    <a href="url"><img onmouseover="header_diff1()"></a>

</div>

I'm asking for just the action on hiding/showing a div, but if anyone can see something obvious wrong with my logic please, point that out too, this is my first time writing JS. This is intended for about 5 divs.

Lynne

10-21-2007 08:48 PM

For you div code, you need to add the display style like "<div id=xxx style="display: none;">"

MrApples

10-21-2007 09:07 PM

So I would use...

Code:

document.getElementById('div1').style.display="none"

and

Code:

document.getElementById('div1').style.display="inline"

?

EDIT: This works for the hiding, but not for the showing. I tried visibility, same thing.

Lynne

10-21-2007 10:57 PM

This is the javascript I use:

PHP Code:


		
			
function collapse_news(id)

{

    var collapseText = document.getElementById('k' + id);

    var collapseBild = document.getElementById('pic' + id); 



    if (collapseText.style.display == 'none') {

          collapseText.style.display = 'block';

          collapseBild.src = '/forums/images/buttons/collapse_alt.gif';

    }

    else {

          collapseText.style.display = 'none';

          collapseBild.src = '/forums/images/buttons/collapse_alt_collapsed.gif';

    }

}

And then this:

PHP Code:


		
			
<a href="javascript:collapse_news('220')"><img border=0 src="/forums/images/buttonsttd/collapse_alt.gif" id=pic220 alt="Show / Hide"> Date and Title of my news</a><div id=k220 style="display: none;">My News Hidden</div>

Analogpoint

10-22-2007 07:08 PM

To hide, set display to "none" and to show, set display to "" (an empty string.)

MrApples

10-22-2007 07:16 PM

Thank you, I made this function modeled after that. However it's not working, is my syntax wrong?

hcur stores the id of the current element shown.
hx tells how many additional elements are included. (if theres more than one)

hcur + 'b' is the button, it changes images. hcur + '2', and hcur + '3' are additional elements that should be hidden/shown if needed.

Code:

function switchheader(id, x)

{

        if ( hcur != id ){

                document.getElementById(hcur).style.display = 'none';

                document.getElementById(hcur + 'b').src = '/styles/7M-v1/new/' + hcur + '.png';

                if (hx != 1){

                        document.getElementById(hcur + '2').style.display = 'none';

                        if (hx == 3){

                                document.getElementById(hcur + '3').style.display = 'none';}

                }

                hcur = document.getElementById(id);

                document.getElementById(hcur).style.display = 'block';

                document.getElementById(hcur + 'b').src = '/styles/7M-v1/new/' + hcur + '_alt.png';

                if (x != 1){

                        document.getElementById(hcur + '2').style.display = 'block';

                        if (hx == 3){

                                document.getElementById(hcur + '3').style.display = 'block';}

                }

                hx = x;

            }

}

Code:

        <img onMouseover="switcheader('main', 2)" src="/styles/7M-v1/new/main.png" />

       <img onMouseover="switcheader('projects', 1)" src="/styles/7M-v1/new/projects.png" /><td>

If anyone were to tell me what i'm doing wrong that would be greatly appreciated.

PS: Saw your message just now analog i'll make that change, however this code above isn't working at all.

Analogpoint

10-22-2007 08:51 PM

To begin with, hcur isn't defined in the function. I didn't get any further than that. But why make it that complicated? Put your two alternate headers within a div for each one, and then do something like this. Your two divs have id's headerone and headertwo.

Code:

function toggle_header()

{

      var el = document.getElementById('headerone');

      if (el.style.display == 'none')

      {

              el.style.display = '';

              document.getElementById('headertwo').style.display = 'none';

      }

      else

      {

              el.style.display = 'none';

              document.getElementById('headertwo').style.display = '';

      }

}

MrApples

10-22-2007 09:48 PM

That wouldn't work. I'm switching between about 6 divs, and it seems wasteful to check the state of each div when I can just use a variable.

I simplified it, sorry, kinda used to going overboard when coding (other language). Really don't like to use specifics.

Code:

var hcur='logo';

function switchheader(id){

        if ( hcur != id ){

                document.getElementById(hcur).style.display = 'none';

                document.getElementById(hcur + 'b').src = '/styles/7M-v1/new/hb_' + hcur + '.png';

                document.getElementById(id).style.display = '';

                document.getElementById(id + 'b').src = '/styles/7M-v1/new/hb_' + hcur + '_alt.png';

                if (hcur == 'logo'){

                        document.getElementById('logo2').style.display = 'none';}

                if (id == 'logo'){

                        document.getElementById('logo2').style.display = '';}

                hcur = id;

        }

}

I'll explain exactly what i'm trying to do.

hcur is the last id shown, the one currently being shown.
id the the new one in question.
buttons switch to a alternate version when they are hovered on as well. Their id is the same as the div, with a b added on (id + 'b').

If the new id is not equal to the current id (why switch to the same?), then continue with the switch, else do nothing. Hide the current div, and switch the current button back to default. Then show the new div, and switch the new button to alternate.

If the past id was logo, hide the extra div. If the new id is logo, show the extra div. Set hcur to the new id as it is now the current, and end function.

Analogpoint

10-23-2007 02:50 AM

After a quick glance, it looks good. Try putting an alert('x'); after each line to identify where it chokes.

MrApples

10-23-2007 11:39 PM

Ok, I did that. My code exactly for that...

Code:

var hcur='logo';

function switchheader(id){

        alert('runs! id:' + id + ' hcur:' + hcur);

        if ( hcur != id ){

        alert('1');

                document.getElementById(hcur).style.display = 'none';

                alert('2');

                document.getElementById(hcur + 'b').src = '/styles/7M-v1/new/hb_' + hcur + '.png';

                alert('3');

                document.getElementById(id).style.display = '';

                alert('4');

                document.getElementById(id + 'b').src = '/styles/7M-v1/new/hb_' + hcur + '_alt.png';

                alert('5');

                if (hcur == 'logo'){

                alert('6');

                        document.getElementById('logo2').style.display = 'none';}

                        alert('7');

                if (id == 'logo'){

                alert('8');

                        document.getElementById('logo2').style.display = '';}

                        alert('9');

                hcur = id;

                alert('10');

        }

}

Apparently it is stopping at

Code:

document.getElementById(hcur + 'b').src = '/styles/7M-v1/new/hb_' + hcur + '.png';

Does JS lack failsafe checking? That image does not exist (haven't gotten to that yet), so is it just killing the function over it? Thank you a lot for this error finding command by the way.

PS: THe problem defiantly lies in those 2 lines, I commented them out and it works.

All times are GMT. The time now is 03:48 AM.

Page 1 of 2

Show 40 post(s) from this thread on one page

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01811 seconds Memory Usage 1,761KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (9)bbcode_code_printable (2)bbcode_php_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (10)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: