[headbirth]

Hi, in looking at this page (the expanding and collapsing feature specifically):

http://www.kung-foo.tv/ecto/#

It gave me the idea that I could place much more content (images, copy, links, etc...) on a single page rather than having to load other pages.

If you look at the scenarios section of my site (http://home.earthlink.net/~headbirth), you'll see that I placed three items per page and load a new page for each ....

Using the code from the ecto site is it possible for me to simply place the next three items below the previous three and simply toggle the visibility of each set as needed?

And if that's possible couldn't I then add the preview item (little magnify widget) to the same page as well?

[philzilla]

i'd suggest keeping it as single pages, and losing the frameset. that way, it's easier for clients to bookmark the page where they login.

i have to say, i'm not a fan of the javascript login thing you've used on that page. it made my screen hurt. can't you use a Perl/PHP/ASP login? or some quick'n'easy .htaccess action?

[headbirth]

That would be nice but I'm not familar with Server side programming.

[DUNSEL]

It's definitely possible. Check out my site for an example jpages.net, but you'll have to view it in MS IE. I'm still trying to find syntax for Safari. That's why I'm here.

Do you happen to know what values Safari accepts for it's opacity property?

[headbirth]

Sorry can't help you there.

I was also wondering if a hidden image will load and cache with the page or will it not load until it's visibility is toggled?

[Chris O'Brien]

Originally posted by DUNSEL:
It's definitely possible. Check out my site for an example jpages.net, but you'll have to view it in MS IE. I'm still trying to find syntax for Safari. That's why I'm here.

Do you happen to know what values Safari accepts for it's opacity property?

in safari 1.2 just use

Code:
 opacity: 0.5;

for 50% opacity... It takes values in the range 0 to 1.

I haven't tested this further, but I quickly put

Code:
<div style="background: blue; height: 100px; width: 100px; opacity: 0.5">
hello there
</div>

and it worked as expected...

I replied to this in another thread

[MaxPower]

I'd suggest checking out the CSS and Javascript sections on Apple's own website:

developer.apple.com

There is one article on the DOM under CSS and two under Javascript. They show you how to dynamically manipulate elements on a page. They were written by Scott Andrew, who used to have a bunch of cool tutorials on his site as well. But now he is apparently using it solely to promote his band.

Anywhoo, they are really good articles. Using that method, I got some pretty dandy code working under IE 5+,Mozilla, and Safari.

Good luck!

[DUNSEL]

You guys RULE! Thanks, that means I don't have to use a different script from the Mozilla/Netscape one. Both accept the values in the .0 to 1 range. Thanks, guys. So I don't have to use khtmlOpacity to access it with javascript?

[Chris O'Brien]

Originally posted by DUNSEL:
You guys RULE! Thanks, that means I don't have to use a different script from the Mozilla/Netscape one. Both accept the values in the .0 to 1 range. Thanks, guys. So I don't have to use khtmlOpacity to access it with javascript?

In Safari 1.2 just use

Code:
element.style.opacity = value;

for example - put this in safari:

Code:
<div style="background: blue; height: 100px; width: 100px; opacity: 0.5" onclick="this.style.opacity='0.2'">
hello there
</div>

[DUNSEL]

I tried that. Got the word that it didn't work. However, since I was using a global variable for the function (because IE accepts integers for it's value, and NS/Mozilla and Safari accept decimals) I put the value as (i/100); No dice. Very tough to code for something you can't see. I have to wait for mac users to load the page and get back to me.

[Chris O'Brien]

Originally posted by DUNSEL:
I tried that. Got the word that it didn't work. However, since I was using a global variable for the function (because IE accepts integers for it's value, and NS/Mozilla and Safari accept decimals) I put the value as (i/100); No dice. Very tough to code for something you can't see. I have to wait for mac users to load the page and get back to me.

What site is it? I'll have a look if you want.

i should point out though, that what I said does work in safari 1.2 but I can't seem to change opacity values in Gecko based browsers since I updated to moz 1.6 and firefox. Which is strange...

[DUNSEL]

It's gkarchitects.biz/index2.htm

The syntax for changing the property in Netscape/Mozilla is MozOpacity= .value. It accepts decimals like Safari does.

I assume Safari supports the getElementsById() method?

[Chris O'Brien]

Originally posted by DUNSEL:
It's gkarchitects.biz/index2.htm

The syntax for changing the property in Netscape/Mozilla is MozOpacity= .value. It accepts decimals like Safari does.

I assume Safari supports the getElementsById() method?

yes - I am aware of the syntax for changing opacity in Gecko browsers - as I said, since upgrading to moz 1.6, setting opacity values just makes everything disappear. I have scripts I wrote years ago (well, 1-2) that now don't work and I have no idea why...

Yes. Safari does support document.getElementById()

I'm just gonna have a look at your site

[Chris O'Brien]

Just had a look at your javascript, and I've come up with this to make it work in Safari:

Code:
<script>
	
el_to_fade = new Array('fade','fade1','fade2','fade3','fade4'), a=0, op=0;
	
	function fadeIn() {
		
		var to_fade = document.getElementById(el_to_fade[a]);

		if (op <= 100) {
			
			to_fade.style.opacity = op/100;
			op+=4;
			
		} else {
				
			op = 0;
			a++;
			
		}
			
		if ((a <= 5)) {
			
			setTimeout("fadeIn()",100);
			
		}
			
	}
</script>

All you need is 5 div's named fade, fade1 etc (like you have on that page) and the above will work fine. Note, this is for Safari 1.2 - I don't know about Safari 1.1 or below.

Oh, and the abocve removes the need to call multiple functions too...

Hope that helps a bit.

[DUNSEL]

Thanks. Aside from adding the array to remove multiple functions, the only significant different I see is the removal of () around the value. If I remove them from my value, will you load it again, and see if it runs?

[Chris O'Brien]

Originally posted by DUNSEL:
Thanks. Aside from adding the array to remove multiple functions, the only significant different I see is the removal of () around the value. If I remove them from my value, will you load it again, and see if it runs?

I just loaded it and it didn't run I'm afraid. Also - when I view it in firefox, I can only see the div's once the opacity is set to 1. that is, they just appear at the end of the function rather than fading in....

[DUNSEL]

But you tested yours and it DOES run? Like to understand that. Other than using a variable with part of the output statement assigned to it, and the omission of the (), I don't see a difference that should prevent it from running. Ok, I'll adjust yours for my page, and UL it. If you would, test if for me afterwards?

[registered_user]

Originally posted by headbirth:
Sorry can't help you there.

I was also wondering if a hidden image will load and cache with the page or will it not load until it's visibility is toggled?

if its visibility is set to hidden it will indeed load and cache.

[Chris O'Brien]

I've found the problem: try using navigator.userAgent rather than navigator.appName. fadeIn() isn't being called because safari's appName is actually 'Netscape'.

Problem solved.

now, just change the style rule for div to have opacity: 0; -moz-opacity: 0 and you'll be laughing

[DUNSEL]

Ok, it's up. I had to change the last test to < . <= causes abend. But it's up whenever you can try and load it.

[Chris O'Brien]

Originally posted by DUNSEL:
Ok, it's up. I had to change the last test to < . <= causes abend. But it's up whenever you can try and load it.

Works perfectly in Safari 1.2

[DUNSEL]

**Even in the far northeast of England, the sound of a body in Manhattan, can be heard hitting the floor**

Much thanks for your help, and indulgence. It's pretty much impossible to code blind, like I was doing. But it wasn't worth buying another computer over. LOL!

Now for the really big problem. I'm out of coffee filters.

[Chris O'Brien]

Mate - it's always worth buying a mac!

Ooh - extra wide textareas in the reply page now - seems like what was talked about in the feedback forum has been honoured - cheers gorgonzola! (although it's not what I suggested)

Anyhoo - I'm surprised that what I said worked, really. It's a Friday, and, since I'm a student, I've been drinking since about midday - which means roughly 8 hours since i started replying to your posts. It also means I'm completely hammered now - oh well. Now I need to find a way to be incredibly nice and romantic towards my girlfriend tomorrow morning whilst nursing a hangover.....

[DUNSEL]

Thanks, but I'm a confirmed IBM format user, and I really don't have room for 2 (you know what they say about apt. size in Manhattan? Well it's true!).

Well my remedy for a hangover is a big bowl of chicken soup. One usually awakes from a serious drunk freezing cold, and dehydrated. Soup addresses both. Preface with Aleve, or similar headache tablet. Loop.

Thanks again, I'd never have solved that without you. Who knew Safari masqueraded as Netscape? If you visit NYC, pints are on me.