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

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

showing & hiding Divs

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

Contents

  showing & hiding Divs jayachandran.kandasamy@gmail.com - 2012-10-22 00:19 -0700
    Re: showing & hiding Divs SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2012-10-22 15:39 +0200
      Re: showing & hiding Divs Hans-Georg Michna <hans-georgNoEmailPlease@michna.com> - 2012-10-22 16:16 +0200
        Re: showing & hiding Divs SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2012-10-22 16:23 +0200
        Re: showing & hiding Divs SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2012-10-22 16:26 +0200
    Re: showing & hiding Divs Danny <dann90038@gmail.com> - 2012-10-22 14:34 -0700

#16786 — showing & hiding Divs

Dear members,

I have two divs on the parent page (I mean the divs placed immediately after the  first body tag) displayed none by default through external css, I should show and hide based on some function results which will execute in children IFRAMEs.

Basic idea is when I submit the form from children page at any level this divs will create mask layer and restrict the user to interact with the app till the function complete. 
I have created two functions like one for show the divs and other for hide... I will call the show function before the function processing functions (like Submitting, Editing, Saving and Cancelling)and calling the hiding function at the end of the processing functions, but this things not showing and hiding the divs when I inspect the DOM structure this two DIVS are always in display none state.. But some how this implementation is not at all working as expected across the iframes.  Please let me know the tricks or any other plugins will resolve my issue.

Thanks,
JC

[toc] | [next] | [standalone]

#16791

Le 22/10/12 09:19, jayachandran.kandasamy@gmail.com a écrit :
>
> I have two divs on the parent page (I mean the divs placed
> immediately after the  first body tag) displayed none by default

<style type="text/css">
.hid {  position: absolute; width: 100%; height: 100%;
	display: none; top: 0; left: 0;
	background:#000; opacity: 0.6; filter: alpha(opacity=60) }
body { text-align: center }
h1   { margin-top: 40% }
</style>
<script type="text/javascript">
function toggle(id){
  id = document.getElementById(id).style;
  id.display = id.display==''? 'block' : '';
}
</script>
<body>
<h1>opacifiers</h1>
<div id="one" class="hid"></div>
<div id="two" class="hid" style="background:red"></div>
<p><a href="#"
       onclick="toggle('one');
                setTimeout('toggle(\'one\')',3000);
                return false;">test one</a>
<p><a href="#"
       onclick="toggle('two');
                setTimeout('toggle(\'two\')',3000);
                return false;">test two</a>

> But some how this implementation is
> not at all working as expected across the iframes.

it may be, yeap

iframe = evil

-- 
Stéphane Moriaux avec/with iMac-intel

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

#16796

On Mon, 22 Oct 2012 15:39:22 +0200, SAM wrote:

> function toggle(id){
>   id = document.getElementById(id).style;
>   id.display = id.display==''? 'block' : '';
> }

Perhaps it would be better to change 'block' to 'none'.

Hans-Georg

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

#16797

Le 22/10/12 16:16, Hans-Georg Michna a écrit :
> On Mon, 22 Oct 2012 15:39:22 +0200, SAM wrote:
>
>> function toggle(id){
>>    id = document.getElementById(id).style;
>>    id.display = id.display==''? 'block' : '';
>> }
>
> Perhaps it would be better to change 'block' to 'none'.

as they are un-displayed (at display:none) by default
why to tell it back ?


no, but maybe :
	id.display = id.display=='block'? '' : 'block';
five more characters :-(



-- 
Stéphane Moriaux avec/with iMac-intel

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

#16798

Le 22/10/12 16:16, Hans-Georg Michna a écrit :
> On Mon, 22 Oct 2012 15:39:22 +0200, SAM wrote:
>
>> function toggle(id){
>>    id = document.getElementById(id).style;
>>    id.display = id.display==''? 'block' : '';
>> }
>
> Perhaps it would be better to change 'block' to 'none'.

no, because the div's display must be at none by default
(if not and without JS enabled ... nothing accessible on the page)



-- 
Stéphane Moriaux avec/with iMac-intel

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

#16808

Since we can't see your code, I'd assume you're not addressing the parent(top) window object from the child(iframe), thus to access say and object whose ID is id="gray-overlay" on the containing window object, from a child(iframe or frame) would be

top.document.getElementById('gray-overlay')

[toc] | [prev] | [standalone]

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

csiph-web