show/hide problem with explorer 7

[may bailey]

Hi all,

I have been trying to use a show / hide script on my web site but when
I click on the "hide" button there occurs an error with explorer 7.
The web site starts to go down =) and there happens a blank on the top
of the page. the problem occurs when I use the codes more than one
content and when I add new contents with the codes below, the blanks
is getting greater =)

* I built my web sites on "joomla" open source content management
software.

<b>The codes I have tried between head tags are </b>

<script type=”text/javascript”>
function shToggle(content) {
if (document.getElementById(content).style.display == “none”)
document.getElementById(content).style.display = “block”
else
document.getElementById(content).style.display = “none”
}
</script>


<b>and I used that one in my each content </b>

<span>What’s the name of Calgary’s NHL Team?</span>
<a href=”javascript:void(0);” onclick=”shToggle(’calgary’); return
false;”>show/hide answer</a>

<div id=”calgary” style=”display:none;”>The Calgary Flames</div>

You can check the images of the web site here :
http://forum.joomla.org/viewtopic.php?f=32&t=341625 I have also post
the problem on joomla forum but I think it's about coding.

 

[SAM]

Le 11/8/08 7:23 AM, may bailey a écrit :

* I built my web sites on "joomla" open source content management
software.

Nothing in this code calls something about joomla.

<script type=”text/javascript”>
function shToggle(content) {
if (document.getElementById(content).style.display == “none”)
document.getElementById(content).style.display = “block”
else
document.getElementById(content).style.display = “none”
}
</script>

function shToggle(content) {
var d = document.getElementById(content).style;
d.display = d.display=='none'? 'block' : 'none';
return false;
}

<span>What’s the name of Calgary’s NHL Team?</span>
<a href=”javascript:void(0);” onclick=”shToggle(’calgary’); return
false;”>show/hide answer</a>

take care to use correct quotes : " and ' instead of ” and ’

<p><a href="#" onclick="return shToggle('calgary');">show/hide

<div id=”calgary” style=”display:none;”>The Calgary Flames</div>

<p id="calgary" style="display:none">voir ou non</p>

 

[SAM]

Le 11/8/08 10:40 AM, SAM a écrit :

Le 11/8/08 7:23 AM, may bailey a écrit :

take care to use correct quotes : " and ' instead of ” and ’

CSS :
=====

#quizz span { display: none; }
#quizz .answer span { display: inline; color: red }

JS :
====
function toggle(what) {
what.className = what.className==''? 'answer' : '';
}

HTML :
======
<h3>quizz</h3>
<ul id="quizz" title="click to show or hide answer">
<li onclick="toogle(this);">
question #1 : <span>answer 1</span></li>
<li onclick="toogle(this);">
question #2 : <span>answer 2</span></li>
<li onclick="toogle(this);">
question #3 : <span>answer 3</span></li>
</ul>

 

[may bailey]

Hi again,

Thanks for your help but it didnt solve the problem.

I my codes with your new codes but I got the same error =( By the way
the marks (") that you wanted me to take care of seems ok in my site.

By the way, there is nothing related to joomla with the codes I wrote.
I just wanted to give enough informations about my problem.

There was a question mark in your codes for <script>..., what was that
for?

regards

 

[SAM]

Le 11/8/08 11:23 AM, may bailey a écrit :

Hi again,

Thanks for your help but it didnt solve the problem.

does that here :

There was a question mark in your codes for <script>..., what was that
for?

Not understood.
what about do you talk?


I did correct your function (more simple and faster)
I did correct your html link :

- href="javascript:void()"
is the most uggly way to code a link with a JS event
At least put : href="#"
and prefer to give an url to a page for those browsing without JS.
To stop the call to html link (href) add : return false;
in the onclick

Another example of toggle :
<http://cjoint.com/?lingA6DNtO>

Method with css rollover on links :
<http://cjoint.com/?linoIBJCOn>
(and without JS)

 

[Doug Gunnoe]

There was a question mark in your codes for <script>..., what was that
for?

regards

http://en.wikipedia.org/wiki/Conditional_operator

 

[SAM]

Le 11/8/08 1:18 PM, SAM a écrit :

Le 11/8/08 11:23 AM, may bailey a écrit :

d.display = d.display=='none'? 'block' : 'none';

translation :
d.display is, if d.display is 'none', 'block' else it is 'none'


same as :

d.display = (d.display=='none')? 'block' : 'none';

or :

if(d.display == 'none' ) d.display = 'block';
else d.display = 'none';

or :

if ( d.display == 'none' )
{
d.display = 'block';
}
else
{
d.display = 'none';
}



var displayed = d.display=='none'; // true/false

if(displayed) d.display = 'block'; else d.display = 'none';

d.display = displayed? 'block' : 'none';

 

[may bailey]

Thanks for the detailed answers.

Unfortunately the problem is still going on for explorer 7. I would
like to give the url of the page so maybe you can understand the
reason and we can find a solution??

the url of the page : http://emlaxity.com/main/content/blogcategory/14/28/#

you will see the hide / show option by every content.

Regards

 

[SAM]

Le 11/8/08 3:09 PM, may bailey a écrit :

Thanks for the detailed answers.

Unfortunately the problem is still going on for explorer 7. I would
like to give the url of the page so maybe you can understand the
reason and we can find a solution??

the url of the page : http://emlaxity.com/main/content/blogcategory/14/28/#

you will see the hide / show option by every content.

All I can say is that works in my Fx.3 (Mac) and my IE.6 (Win XP)

I haven't IE.7

You're working in XHTML and that doc-type supports no error of coding.

Unlovely I see :

<style type="text/css">
</style>
<script type="text/javascript">
function shToggle(content) {
var d = document.getElementById(content).style;
d.display = d.display=='none'? 'block' : 'none';
return false;
}

</script>

which is not in the head


And My Firefox sees 60 errors ...


What does the validator tell about this page ?
<http://validator.w3.org/check?uri=http://emlaxity.com/main/content/blogcategory/14/28/>

 

[SAM]

Le 11/8/08 11:56 PM, SAM a écrit :

Le 11/8/08 3:09 PM, may bailey a écrit :

I haven't IE.7

I got it and did install it.

That works fine !

 

[may bailey]

Thanks again for your interest.

Are you sure that that works fine? But I still see the same problem is
going on =( When I click the "hide" button after showing the content,
the page is going down on explorer 7.

By the way the script code was between the head tags but I tried to
put it in every content at the time of your check. But now it's ok.

P.S: I saw the validaor results which seems terrifiying as always for
me =) but I dont know how to fix them beacuse when I check my
index.html I cannot see any kind of errors as I see with validator and
I Think it's because of my poor understanding of the warnings, because
whenever I try to fix them as I see on validator page, the result
never changes.

Regards

 

[SAM]

Le 11/9/08 9:07 AM, may bailey a écrit :

Thanks again for your interest.

Are you sure that that works fine? But I still see the same problem is
going on =( When I click the "hide" button after showing the content,
the page is going down on explorer 7.

going down ?

Of course the content is smaller so the window can scroll to adapt the
viwer to the new cintent, no ?

try with url :
http://emlaxity.com/main/content/blogcategory/14/28/
instead of :
http://emlaxity.com/main/content/blogcategory/14/28/#

P.S: I saw the validaor results which seems terrifiying as always for
me =)

This validator isn't very friendly.

but I dont know how to fix them beacuse when I check my

index.html I cannot see any kind of errors as I see with validator and
I Think it's because of my poor understanding of the warnings, because
whenever I try to fix them as I see on validator page, the result
never changes.

I did try to see ...
it's quite impossible : too much tables (whom a lot being nested) and
divs not always necessary.

You could begin by choosing an easier doctype as html4.01
without xml

 

[may bailey]

Le 11/9/08 9:07 AM, may bailey a écrit :



going down ?

Of course the content is smaller so the window can scroll to adapt the
viwer to the new cintent, no ?

try with url :http://emlaxity.com/main/content/blogcategory/14/28/
instead of :http://emlaxity.com/main/content/blogcategory/14/28/#

Yes unfortunately it's going down to adapt the viewer to the new
content but why? It's a problem for me and there is not a problem with
firefox or explorer 6, but I need to fix it for explorer 7 which is
widely used =( Cant we fix it? and if yes, how?

regards

 

[may bailey]

Hi again,

Doesnt anyone has a solution for this problem?

regards

 

[Thomas 'PointedEars' Lahn]

Doesnt anyone has a solution for this problem?

<http://jibbering.com/faq/#noAnswer>


PointedEars

 

[may bailey]

<http://jibbering.com/faq/#noAnswer>

PointedEars
--
    realism:    HTML 4.01 Strict
    evangelism: XHTML 1.0 Strict
    madness:    XHTML 1.1 as application/xhtml+xml
                                                    -- Bjoern Hoehrmann

Thanks a lot

I changed it with XHTML 1.1 which you called madness ; )

Regards
may

 

[David Mark]

Thanks a lot

I changed it with XHTML 1.1 which you called madness ; )

Why on earth would you do that? Scratch "XHTML" out of your
playbook. And 1.1 on the Web is madness, as is 1.0 when served as
text/html. Yes, lots of pinheads do it (including whomever is
responsible for the W3C site, which is cutting edge for 1999.) If
they all jumped off a bridge...

 

[David Mark]

Thanks for the detailed answers.

Unfortunately the problem is still going on for explorer 7. I would
like to give the url of the page so maybe you can understand the
reason and we can find a solution??

the url of the page :http://emlaxity.com/main/content/blogcategory/14/28/#

Sorry, I don't trust IE7 (or people with lowercase names.)

you will see the hide / show option by every content.

Nope. Post the entire script here if you want help. But frankly,
after reading your posts in this thread, the best advice is to pack it
in.