8 replies [Last post]
Juachoerin
Offline
Regular
New York
Last seen: 17 years 43 weeks ago
New York
Timezone: GMT-5
Joined: 2004-10-16
Posts: 17
Points: 0

My page has two effects, both produced with CSS alone--no scripts. Several images can be moved around at once just by clicking any one of them; and it has a link to another page which requires clicking three different places in succession to activate it.

It works fine with IE 6 for Windows, but the CSS code is very tricky, so I'm not confident about how it's behaving in other browsers. You can look at the source code and see what I'm trying to do. It's at http://fruitbowl.spcomplete.com/Musical.html

(Ring!) Hello? Hey, man, wassup? Cool! I'm like stoked. Awesome. No way! That's lame. Oh, snap! That like rocks. Way rad. Ew! That so sucks. Way! Like big time an' stuff. Majorly. I'm like, yeah right! Totally, um, whatever. Later, dude! (Click!)

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Unorthodox methods!

Hi Juachoerin,
After a bit of clicking I got a flash of something.
None of the images seemed to move.
I'm not really sure what I was meant to see.
Firefox 10.1 Linux

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 9 years 2 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Unorthodox methods!

Nothing moves at all. FireFox 1.0 PR Mac.

Life's a b*tch and then you die!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Unorthodox methods!

Nor in FF 0.8, 0.9, 1.0 win98, winxp.
Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Juachoerin
Offline
Regular
New York
Last seen: 17 years 43 weeks ago
New York
Timezone: GMT-5
Joined: 2004-10-16
Posts: 17
Points: 0

Unorthodox methods!

Apparently, from what I've learned by asking in several places, my page wouldn't work at all if it weren't for a peculiarity of IE that makes it work. A link is supposed to be "active" only while the mouse button is down; but IE, once a link is clicked, considers it "active" until you click somewhere else. So with other browsers you can see all the "configurations" of the page, by holding the button down for each one, but you can't solve the "triple-link" puzzle--because its working depends on the images staying in their positions from one click to the next. You can solve it if you have IE.

(Ring!) Hello? Hey, man, wassup? Cool! I'm like stoked. Awesome. No way! That's lame. Oh, snap! That like rocks. Way rad. Ew! That so sucks. Way! Like big time an' stuff. Majorly. I'm like, yeah right! Totally, um, whatever. Later, dude! (Click!)

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 18 years 29 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

Unorthodox methods!

Mozilla, FF etc will work using :focus instead of :active;

IE will ignore :focus so you can safely put it in the same style, just make sure it follows :active;

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

Juachoerin
Offline
Regular
New York
Last seen: 17 years 43 weeks ago
New York
Timezone: GMT-5
Joined: 2004-10-16
Posts: 17
Points: 0

Unorthodox methods!

Thanks. Soon as I have a chance, I'll rewrite the page that way. Smile

(Ring!) Hello? Hey, man, wassup? Cool! I'm like stoked. Awesome. No way! That's lame. Oh, snap! That like rocks. Way rad. Ew! That so sucks. Way! Like big time an' stuff. Majorly. I'm like, yeah right! Totally, um, whatever. Later, dude! (Click!)

Juachoerin
Offline
Regular
New York
Last seen: 17 years 43 weeks ago
New York
Timezone: GMT-5
Joined: 2004-10-16
Posts: 17
Points: 0

Unorthodox methods!

Stu:-- I've been doing some experimenting just now, and apparently IE applies styles specified for "active" (as opposed to "focus", which it ignores, as you say) but its determination of WHEN to apply them is more like what "focus" is supposed to mean. Selecting a link with the Tab key, in IE, just highlights it--so you can then activate it with the Enter key instead of the mouse, or tab to next link; I already knew that, though I always use the mouse myself. But I find that if I tab to a link in my test page, it takes on whatever style I specified for "active" links--without using the mouse OR the Enter key. And once that happens, it stays that way until you either click somewhere else, or tab somewhere else.

So when the books and sites say that IE doesn't implement "focus", that's technically right but misleading. What's really happening is this: IE doesn't implement "active"; but it implements "focus" and wrongly CALLS it "active"! Those not familiar with IE--and those familiar ONLY with IE, as I was until now--can't be expected to figure all this out for themselves. The websites that tell about browser bugs should explain it THIS way, and then designers would know what to expect. Let me know if there's anyone else I should tell about this, and I will. Smile

(Ring!) Hello? Hey, man, wassup? Cool! I'm like stoked. Awesome. No way! That's lame. Oh, snap! That like rocks. Way rad. Ew! That so sucks. Way! Like big time an' stuff. Majorly. I'm like, yeah right! Totally, um, whatever. Later, dude! (Click!)

Juachoerin
Offline
Regular
New York
Last seen: 17 years 43 weeks ago
New York
Timezone: GMT-5
Joined: 2004-10-16
Posts: 17
Points: 0

Unorthodox methods!

OK, here's a test page for the jumping-image trick. Instead of an image I just used a word in large type here. It works in IE, and I want to know if it works in other browsers. When you click the word, which is floated on the right, it should jump to the center and push the text down below it, leaving the sides clear. Then it should stay that way until you click in the text area, above or below it. The code that does it is:

a {color: #DC143C; text-decoration: none; font-size: 100px; float: right}
a:active, a:focus {float:none; text-align:center; display:block}

The text is an article I wrote in May, which is on three websites already. All of this is just a sneaky trick I'm using to make you read the article, of course! Wink

(Ring!) Hello? Hey, man, wassup? Cool! I'm like stoked. Awesome. No way! That's lame. Oh, snap! That like rocks. Way rad. Ew! That so sucks. Way! Like big time an' stuff. Majorly. I'm like, yeah right! Totally, um, whatever. Later, dude! (Click!)