Closed Thread Icon

Preserved Topic: DHTML Hide and Unhide onLoad Question (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=17999" title="Pages that link to Preserved Topic: DHTML Hide and Unhide onLoad Question (Page 1 of 1)" rel="nofollow" >Preserved Topic: DHTML Hide and Unhide onLoad Question <span class="small">(Page 1 of 1)</span>\

 
Carnage
Nervous Wreck (II) Inmate

From:
Insane since: May 2001

posted posted 05-31-2001 20:59

ok call me stupid. But I'm including several PHP files in another PHP file. The included ones are DHTML pieces that I'm working with DIV tags to basically mimic maximize and minimize effects. The problem is I can't get them to START with either minimize or maximize state. They end up starting both shown.

Question is, how do I "hide" one of them when the page loads? So that in essence I can start them in the maximize or minimize state? (I'll work with cookies or whatnot next to keep them in a state for that user whenever he/she views the page)

Thanks for any help in advance.

bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

posted posted 05-31-2001 21:12

You're stupid!

just kidding!

This is pretty simple it's actually in your style info

<style>
#myDIV {visibility: hidden;}
</style>

I think thats your answer.
Otherwise you may need to use the onLoad handler which gets dumped in your body tag.

<body onLoad="minimize()">


Or you can use both. Like put the hidden stuff in your CSS AND the minimize code in your onload.
I like to put onload="init()" in mine. Then init is everything I want to run as soon as the page is loaded

so you could do something like this

function init() {
minimize(myDIV) //or whatever you need to minimize a div
document.all.mydiv.style.visibility = "visible"; // this will show it
}

I hope this is what you are looking for.


Walking the Earth like Kane

[This message has been edited by bitdamaged (edited 05-31-2001).]

Carnage
Nervous Wreck (II) Inmate

From:
Insane since: May 2001

posted posted 05-31-2001 21:17

Ok call me stupid again. But when I do this. I can no longer turn the things BACK on when I want them on. This turns them off for good and my turnon() script that changes visibility to "" doesn't work anymore.

Carnage
Nervous Wreck (II) Inmate

From:
Insane since: May 2001

posted posted 05-31-2001 21:19

Here is the script I'm using. I kind of used a TOGGE function I found and then modified it to do what I want (I think).

<script language=javascript>
<!--
ie4 = ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4 ));

function turnon( targetId){
if (ie4){
target = document.all( targetId );
target.style.display = "";
}
}

function turnoff( targetId ){
if (ie4){
target = document.all( targetId );
target.style.display = "none";
}
}

//-->
</script>

So then on clicking the minimize button I can turnoff the maximized stuff and the minimize button, and then enable the maximize button and showing the minimized type text or image or whatnot.




bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

posted posted 05-31-2001 21:20

Whoops I edited it with I think your answer

That will only work in IE though

in NN it would be

document.myDIV.visibility = "visible";



Walking the Earth like Kane

bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

posted posted 05-31-2001 21:23

Hmm I generally use visiblity instead of display

Changing that in your script and using "visible" and "hidden"

SHould work fine

function turnon( targetId){
if (ie4){
target = document.all( targetId );
target.style.visiblity = "visible";
}
}

function turnoff( targetId ){
if (ie4){
target = document.all( targetId );
target.style.visiblity = "hidden";
}
}


Walking the Earth like Kane

Carnage
Nervous Wreck (II) Inmate

From:
Insane since: May 2001

posted posted 05-31-2001 21:25

Hmmm so I should be using visibility and not display.... Guess that could cuase some things not to work right. I tried to do the init function but it's not turning off anything that it's supposed to. Wonder if that's because I'm using about 20 <? include "stuff.php" ?>

Carnage
Nervous Wreck (II) Inmate

From:
Insane since: May 2001

posted posted 05-31-2001 21:33

Oohh no, not what I'm looking for. Visibility is if it shows to the screen or not. Display is if it's actually in the CODE or not. ( I think ). If I use visibility I have a BLANK spot where something should be. I dont' want a blank spot, I want that whole spot GONE as if it didn't exist. This way I can toggle an image in that spot back and forth. With visibility I have to have 2 spots....

bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

posted posted 05-31-2001 21:34

Nope. Thats not the reason.
Quick thing PHP, perl, java, ASP, ColdFUsion etc. are all server side languages. Which means that their code is parsed and run on the server side, it runs the code and then sends the formatted HTML page to the browser. In other words it only sends what you see when you view the source of a page.

Nothing done be these languages directly affects the browser

Javascript is a client side language. (Really the only one worth mentioning)
That means that the Javascrpt code is actually parsed and run by the browser.

Can you post a link to the page?
Or failing that the HTML

It would help


Walking the Earth like Kane

Carnage
Nervous Wreck (II) Inmate

From:
Insane since: May 2001

posted posted 05-31-2001 21:37

Ok don't laugh I'm just been screwing around with PHP and javascript just trying to learn some things I thought were neat. This is NOT my area of expertise. The website is NOT in anyway complete and shouldn't be hacked apart please I'm a CS major learning some of the front end stuff since I do all of the back end stuff normally.
http://www.forcefive.com/index.php

My MSN is x@innocent.com if you have that.
AIM is ekramber if you have that and want to laugh at me in my face



[This message has been edited by Carnage (edited 05-31-2001).]

Pugzly
Paranoid (IV) Inmate

From: 127.0.0.1
Insane since: Apr 2000

posted posted 05-31-2001 23:07

Let me know if this helps: http://www.development.runningwolf.com/development/code/layers/new3.htm

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 06-01-2001 01:33

OK, you want either this:

...style.visibility = "visible";
...style.visibility = "hidden";

or this:

...style.display = "block";
...style.display = "none";

The difference between display = 'none' and visibility = 'hidden' is that if it's a part of the web page (not absolutely positioned) and there's content beneath it, the display = 'none' will move the content below it up, but the visibility = 'hidden' won't, it will just leave a blank space where it was.

butcher
Paranoid (IV) Inmate

From: New Jersey, USA
Insane since: Oct 2000

posted posted 06-01-2001 03:43

Sorry for butting in, but Linear pointed me to this thread as it may be the answer to what I've been trying to do.

I have a page with stacked divs that I'm using a show/hide script to let the user change pages of the article. I want to use a media=print CSS sheet that makes the divs print out like one of those printer friendly version pages you see all the time. I've been messing around with the positioning attributes of my divs, but just can't seem to get them to do what I want (no great suprise there). No matter what I've tried so far, I still get giant gaps of whitespace on the printed pages. If anyone could set me straight I'd be greatful.

While reading this thread something came to mind. Would it be possible to have a div with the texts layed out exactly as I want them on top of the rest of the page, with it's display set to none, and then just set the display on that layer to block in the print.css?

Thanks

<edit>Here's the link, just in case I didn't explain myself very well. http://www.martysdesigns.com/greatdane/pagetest.php </edit>


- Resolutions, Of All My Fruitless Searches -

[This message has been edited by butcher (edited 06-01-2001).]

Carnage
Nervous Wreck (II) Inmate

From:
Insane since: May 2001

posted posted 06-01-2001 03:51

Yes I'm using display since that's what I want it to look like. Now the question I've still not got answered is how do I make certain things blocked on load of the page. I tried calling the init function in the body's onLoad() but that's still not working on my end. Ya the init is SUPPOSED to hide links...

Still not working.
http://www.forcefive.com/index.php The links on teh right side with the minimize and maximize buttons. They work great after you click them.... But on page initialization they load ALL of it.

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 06-01-2001 18:55

Working on Carnage's question before I read butcher's...

Ah, you need to use document.all["id"] instead of document.all("id"). [] instead of (), because it's an object, not a function.

That's all I can find with a quick scan of the code.

NOTE: NN 4.x doesn't correctly support changing the display style attribute. This is due to an advanced principle known as "Netscape Navigator 4.x sucks."

Butcher:

For one thing, stop using "#" for your hrefs! It's annoying, it scrolls to the top whenever I click on a link. use JavaScript:void(0); instead.

OK, this is what I think you want to do:

have a page so that only one of 5 sections is visible at once, but when it's printed, they're all layed out one after the other.

First, in your regular style sheet, get rid of the absolute positioning. If you want this to work, they can't be absolutely positioned.

Then, in the code, just have one page after another in the code, like this:

<div id="page1">
hi i'm text
</div>
<div id="page2">
hi i'm text
</div>
<div id="page3">
hi i'm text
</div>
<div id="page4">
hi i'm text
</div>
<div id="page5">
hi i'm text
</div>

Set page1 to be regular, and the rest to have display:none; then, when the page is changed, set page1 to display:none and the new page to display:block. See?

And in your printing style sheet, just have them all displayed at once, and they'll all appear one after the other.

Make sense?

butcher
Paranoid (IV) Inmate

From: New Jersey, USA
Insane since: Oct 2000

posted posted 06-02-2001 00:34

Thanks a lot Slime!

And thanks for the javascript:void bit... that scrolling to the top annoyed me big time too, I just didn't know any better.

I appreciate it.



- Resolutions, Of All My Fruitless Searches -

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 06-02-2001 03:26

You mean it worked? How lucky! Er, I mean, of course. Glad to be of service. =)

Carnage
Nervous Wreck (II) Inmate

From:
Insane since: May 2001

posted posted 06-07-2001 20:13

Well I still can't get init to startoff and start turning items off.

<script language=javascript>
<!--
function init() {
turnoff('minimize_headlines');
turnoff('maximize_pic');
turnoff('nopic');
turnoff('headlines');
}
//-->
</script>


</head>

<body onload="init()">

the turnoff('blah') I know works since it works in the code. http://www.forcefive.com/index.php

Any ideas?

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 06-07-2001 20:30

This is what *I* see in the code:

function init() {
javascript:turnoff('minimize_headlines');
javascript:turnoff('maximize_pic');
javascript:turnoff('nopic');
javascript:turnoff('headlines');
}

Get rid of all the javascript: 's.

Carnage
Nervous Wreck (II) Inmate

From:
Insane since: May 2001

posted posted 06-07-2001 20:46

Sorry, yes that's what you see if you go there now. I had it that way to begin with. I'm trying things to get them to work and it's not happening!

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 06-08-2001 20:20

I still see some document.all()'s, use [] instead of ()!

btw, do you have error alerts turned on? because they give you the line number and error message whenever there's an error...

Carnage
Nervous Wreck (II) Inmate

From:
Insane since: May 2001

posted posted 06-08-2001 20:38

The document.all()'s are working fine.

I found the problem was that INIT gets called before the DIV tags are actually in place on the page. So it wasn't doing anything. If I put the turnoff()'s at the bottom of the page in a script tag then it works perfectly. Basically a stupid coding mistake that is common, trying to change something that isn't even there .

Now if someone could help me on the iframe post

Thanks for the help,

Carnage


« BackwardsOnwards »

Show Forum Drop Down Menu