Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #18039 > unrolled thread

Simple question about div show or hide

Back to article view | Back to comp.lang.javascript

Contents

  Simple question about div show or hide justaguy <lichunshen84@gmail.com> - 2013-01-09 12:54 -0800
    Re: Simple question about div show or hide Scott Sauyet <scott.sauyet@gmail.com> - 2013-01-09 13:29 -0800
    Re: Simple question about div show or hide Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2013-01-09 22:44 +0100
      Re: Simple question about div show or hide justaguy <lichunshen84@gmail.com> - 2013-01-09 14:25 -0800
        Re: Simple question about div show or hide Richard Yates <richard@yatesguitar.com> - 2013-01-09 14:47 -0800
      Re: Simple question about div show or hide Martin Leese <please@see.Web.for.e-mail.INVALID> - 2013-01-10 09:52 -0700
        Re: Simple question about div show or hide Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2013-01-10 21:02 +0100
    Re: Simple question about div show or hide Hans-Georg Michna <hans-georgNoEmailPlease@michna.com> - 2013-01-10 18:26 +0100
      Re: Simple question about div show or hide "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2013-01-10 19:37 +0100
    Re: Simple question about div show or hide Danny <dann90038@gmail.com> - 2013-01-10 12:47 -0800

#18039 — Simple question about div show or hide

Hi,

Problem with the following code for simple Div show or hide:
Second click is not possible.  Tested against Firefox 17 and Chrome 23 (both on Windows 7).

What's wrong?  Am I missing something obvious?

Please note, I'm using double ## here instead of a single # because the server side scripting language, ColdFusion or Railo that I'm using, consider # as a special symbol, so, I'm using double ## to escape to one.

<div><a href="##sh" onclick="if (document.getElementById('t').style.display='none'){document.getElementById('t').style.display='inline';}else{alert('2nd test click called');document.getElementById('t').style.display='none';}">test div show/hide</a></div>

<div id="t" style="display:none">test data</div>

Many thanks.
	

[toc] | [next] | [standalone]

#18040

justaguy wrote:

> Problem with the following code for simple Div show or hide:
> Second click is not possible.  Tested against Firefox 17 and
> Chrome 23 (both on Windows 7).
>
> What's wrong?  Am I missing something obvious?
>
> Please note, I'm using double ## here instead of a single #
> because the server side scripting language, ColdFusion or
> Railo that I'm using, consider # as a special symbol, so,
> I'm using double ## to escape to one.

Please supply the code that the Javascript engine views, not your
original source code.  It makes our life siginificantly easier.

> <div><a href="##sh" onclick="if (document.getElementById('t').style.display='none'){document.getElementById ('t').style.display='inline';}else{alert('2nd test click called');document.getElementById('t').style.display='none';}">test div show/hide</a></div>
>
> <div id="t" style="display:none">test data</div>


This is likely at least your first issue:

    if (document.getElementById('t').style.display='none'

That should be `==` or `===`.  It's a test, not an assignment.

  -- Scott

[toc] | [prev] | [next] | [standalone]

#18041

W dniu 2013-01-09 21:54, justaguy pisze:
> Hi,
>
> Problem with the following code for simple Div show or hide: Second
> click is not possible.  Tested against Firefox 17 and Chrome 23 (both
> on Windows 7).
>
> What's wrong?  Am I missing something obvious?
>
> Please note, I'm using double ## here instead of a single # because
> the server side scripting language, ColdFusion or Railo that I'm
> using, consider # as a special symbol, so, I'm using double ## to
> escape to one.
>
> <div><a href="##sh" onclick="if
> (document.getElementById('t').style.display='none'){document.getElementById('t').style.display='inline';}else{alert('2nd
> test click
> called');document.getElementById('t').style.display='none';}">test
> div show/hide</a></div>
>
> <div id="t" style="display:none">test data</div>

I would write in that way*:

(note: needed to remove <> due to problem with post of this message)

[HTML]

a href="#somewhere" id="mylink" style="display:none" Test /a

[JavaScript]

var switchView, elm,
     b = true;

elm = document.getElementById('mylink');

switchView = function(e){
     if (b) {
         elm.style.display = 'block';
     } else {
         elm.style.display = 'none';
     }
     b = !b;

     if (e.preventDefault) {
         e.preventDefault();
     }
     if (window.event) {
         window.event.returnValue = false;
     }
     return false;
};

if (window.addEventListener) {
     el.addEventListener('click', switchView, false);
} else {
     el.attachEvent('onclick', switchView);
}

* 1) assuming that code is loaded when DOM is ready
   2) this is very simple example and probably could be improved in a 
many ways
   3) it's better to use 'class' and switch classes instead of inline styles

-- 
Cezary Tomczyk
http://www.ctomczyk.pl/

[toc] | [prev] | [next] | [standalone]

#18042

oops, how embarrassing for me to mix equality evaluation and assignment. Thanks.

On Wednesday, January 9, 2013 4:44:51 PM UTC-5, Cezary Tomczyk wrote:
> W dniu 2013-01-09 21:54, justaguy pisze:
> 
> > Hi,
> 
> >
> 
> > Problem with the following code for simple Div show or hide: Second
> 
> > click is not possible.  Tested against Firefox 17 and Chrome 23 (both
> 
> > on Windows 7).
> 
> >
> 
> > What's wrong?  Am I missing something obvious?
> 
> >
> 
> > Please note, I'm using double ## here instead of a single # because
> 
> > the server side scripting language, ColdFusion or Railo that I'm
> 
> > using, consider # as a special symbol, so, I'm using double ## to
> 
> > escape to one.
> 
> >
> 
> > <div><a href="##sh" onclick="if
> 
> > (document.getElementById('t').style.display='none'){document.getElementById('t').style.display='inline';}else{alert('2nd
> 
> > test click
> 
> > called');document.getElementById('t').style.display='none';}">test
> 
> > div show/hide</a></div>
> 
> >
> 
> > <div id="t" style="display:none">test data</div>
> 
> 
> 
> I would write in that way*:
> 
> 
> 
> (note: needed to remove <> due to problem with post of this message)
> 
> 
> 
> [HTML]
> 
> 
> 
> a href="#somewhere" id="mylink" style="display:none" Test /a
> 
> 
> 
> [JavaScript]
> 
> 
> 
> var switchView, elm,
> 
>      b = true;
> 
> 
> 
> elm = document.getElementById('mylink');
> 
> 
> 
> switchView = function(e){
> 
>      if (b) {
> 
>          elm.style.display = 'block';
> 
>      } else {
> 
>          elm.style.display = 'none';
> 
>      }
> 
>      b = !b;
> 
> 
> 
>      if (e.preventDefault) {
> 
>          e.preventDefault();
> 
>      }
> 
>      if (window.event) {
> 
>          window.event.returnValue = false;
> 
>      }
> 
>      return false;
> 
> };
> 
> 
> 
> if (window.addEventListener) {
> 
>      el.addEventListener('click', switchView, false);
> 
> } else {
> 
>      el.attachEvent('onclick', switchView);
> 
> }
> 
> 
> 
> * 1) assuming that code is loaded when DOM is ready
> 
>    2) this is very simple example and probably could be improved in a 
> 
> many ways
> 
>    3) it's better to use 'class' and switch classes instead of inline styles
> 
> 
> 
> -- 
> 
> Cezary Tomczyk
> 
> http://www.ctomczyk.pl/

[toc] | [prev] | [next] | [standalone]

#18045

On Wed, 9 Jan 2013 14:25:59 -0800 (PST), justaguy
<lichunshen84@gmail.com> wrote:

>oops, how embarrassing for me to mix equality evaluation and assignment. Thanks.

I have a small sign taped to my monitor that reads: "=" !== "=="
I still manage to overlook it about once a week.

[toc] | [prev] | [next] | [standalone]

#18054

Cezary Tomczyk wrote:

> I would write in that way*:
...
> switchView = function(e){
>     if (b) {
>         elm.style.display = 'block';
>     } else {
>         elm.style.display = 'none';
>     }
...
>   3) it's better to use 'class' and switch classes instead of inline styles

Why?  Or, more correctly, under what
conditions is it better?

-- 
Many thanks,
Martin Leese
E-mail: please@see.Web.for.e-mail.INVALID
Web: http://members.tripod.com/martin_leese/

[toc] | [prev] | [next] | [standalone]

#18057

W dniu 2013-01-10 17:52, Martin Leese pisze:
> Cezary Tomczyk wrote:
>
>> I would write in that way*:
> ...
>> switchView = function(e){
>>     if (b) {
>>         elm.style.display = 'block';
>>     } else {
>>         elm.style.display = 'none';
>>     }
> ...
>>   3) it's better to use 'class' and switch classes instead of inline
>> styles
>
> Why?  Or, more correctly, under what
> conditions is it better?

1. In above example logic ix mixed with presentation, which developer 
should avoid.
2. "Class"-es can contains more styles, not only "display".

+ http://webdesign.about.com/od/css/a/aa073106.htm

-- 
Cezary Tomczyk
http://www.ctomczyk.pl/

[toc] | [prev] | [next] | [standalone]

#18055

On Wed, 9 Jan 2013 12:54:59 -0800 (PST), justaguy wrote:

> document.getElementById('t').style.display='inline';

To avoid problems you could set it to '' instead of 'inline'.

Moreover, you can do something like

var st = document.getElementById('t').style;

Then you can just use

st.display = '';

or

st.display = 'none';

and don't have to find the same element again multiple times.

Hans-Georg

[toc] | [prev] | [next] | [standalone]

#18056

Hans-Georg Michna wrote on 10 jan 2013 in comp.lang.javascript:

> On Wed, 9 Jan 2013 12:54:59 -0800 (PST), justaguy wrote:
> 
>> document.getElementById('t').style.display='inline';
> 
> To avoid problems you could set it to '' instead of 'inline'.
> 
> Moreover, you can do something like
> 
> var st = document.getElementById('t').style;
> 
> Then you can just use
> 
> st.display = '';
> 
> or
> 
> st.display = 'none';
> 
> and don't have to find the same element again multiple times.

Try these:

==================== test.html ================
<script type='text/javascript'>

function swapStyle(el, styl, v1, v2) {
  var st = el.style;
  st[styl] = (st[styl] != v1) ?v1 :v2;
};

function swapStyleGebi(id, styl, v1, v2) {
  var st = document.getElementById(id).style;
  st[styl] = (st[styl] != v1) ?v1 :v2;
};

</script>

<div 
onclick = "swapStyle(this, 'color', 'red', 'black')" id=d>
Colour swap
</div>

<div 
onclick = "swapStyleGebi('d', 'display', 'none', 'block')">
Display swap
</div>
=============================================



-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#18058

To justaguy
Maybe as in -> http://www.webdevout.net/test?01c&raw

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web