/    Sign up×
Community /Pin to ProfileBookmark

Just foolin’ ’round wit JavaScript/CSS…

Copy linkTweet thisAlerts:
Mar 11.2004

Hey, I was bored, so I started workin’ on a little somethin’ that would simulate the ‘closing effect’ of a window. Here’s a sample of what I am doing: [url=”http://216.36.173.149/my%20site/”]Window Simulation[/url]. What I want it to do is remove the red bar at the top of the screen when I click the “X”. I can’t seem to find any errors in my script, so could someone tell me why it isn’t getting rid of the bar when I click the ‘X’? Thanx,
-Dan

[b]**EDIT**[/b]
Here’s the code, too, incase anyone needs it:

CSS:

[code]
#bar {
height:30px;
width:100%;
text-align:right;
background:url(“images/unfocus.png”)
}
#bar:hover {
background:url(“images/focus.png”)
}[/code]

JavaScript/HTML:

[code]<?xml version=”1.0″ encoding=”utf-8″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>

<head>
<link rel=”SHORTCUT ICON” href=”Images/Assets/favicon.ico”></link>
<meta http-equiv=”content-type” content=”text/html;charset=utf-8″ />
<meta http-equiv=”Content-Style-Type” content=”text/css” />
<title>Window Simulation</title>
<style type=”text/css”>
@import url(“styles.css”);
</style>

<script language=”javascript”>
function closeIt(it){
document.bar.style.height=”0px”;
}
</script>
</head>

<body>

<div id=”bar”><img src=”images/close.gif” onClick=”closeIt(‘bar’)” alt=”Close” width=”25″ height=”30″ /></div>

</body>
</html>
[/code]

to post a comment
JavaScript

21 Comments(s) ↴

Copy linkTweet thisAlerts:
@SamMar 11.2004 — rather than setting the height to 0, why not use css made to hide things (display:none) like this:
[code=php]
<script language="javascript">
function closeIt(it){
document.getElementById(it).style.display="none";
}
</script>
[/code]
Also, I'm sure you realize this, but [URL=http://www.microsoft.com/windows/ie/default.asp]not-so-real browsers[/URL] don't support hover's on anything other than anchors.

One other note, <?xml version="1.0" encoding="utf-8"?> throws browser's into quirks mode, you can take that line out entirely

also, the background image only needs to be 1px wide, and you should change the rule to:

background:url(images/unfocus.png) repeat-x;
Copy linkTweet thisAlerts:
@Daniel_TauthorMar 11.2004 — Thanx samij!
[i]Originally posted by samij586 [/i]

[B]Also, I'm sure you realize this, but [URL=http://www.microsoft.com/windows/ie/default.asp]not-so-real browsers[/URL] don't support hover's on anything other than anchors.[/B][/QUOTE]
Yes, I noticed this, and thought it was very odd that Netscape didn't even support this. I thought that Netscape and Firefox were virtually the same when it comes to these things...

-Dan
Copy linkTweet thisAlerts:
@SamMar 11.2004 — latest netscape?
Copy linkTweet thisAlerts:
@Daniel_TauthorMar 11.2004 — [i]Originally posted by samij586 [/i]

[B]latest netscape? [/B][/QUOTE]
7.1, and that's the latest, I believe...

-Dan

[b]**EDIT**[/b]

Although, I think mine may be a beta version, so that might be what's causing it...
Copy linkTweet thisAlerts:
@SamMar 11.2004 — Don't know, I'm sure fredmv or someone will know though...
Copy linkTweet thisAlerts:
@Daniel_TauthorMar 11.2004 — [i]Originally posted by samij586 [/i]

[B]Don't know, I'm sure fredmv or someone will know though... [/B][/QUOTE]
Yeah, probly! It(Netscape) seems to be working fine except for the rollovers. I've changed it to visibility="hidden"; rather than display="none"; because with visibility, it won't slide other page content into it's place after it's disappeared. You should take a look at it now, I am very happy with how it turned out! Maybe a possible layout for my site... but, it requires JavaScript, sooo... maybe not. Well, maybe....?

-Dan
Copy linkTweet thisAlerts:
@SamMar 11.2004 — the first thing I tried when I viewed that page was to drag a window (try for yourself, really doesn't turn out too well).

check out http://www.dhtmlcentral.com for a very nice window script
Copy linkTweet thisAlerts:
@Daniel_TauthorMar 11.2004 — [i]Originally posted by samij586 [/i]

[B]the first thing I tried when I viewed that page was to drag a window (try for yourself, really doesn't turn out too well).

check out http://www.dhtmlcentral.com for a very nice window script [/B][/QUOTE]
I'm not really looking for one in which you can drag windows. I just think it would be a cool layout without dragging.

-Dan
Copy linkTweet thisAlerts:
@SamMar 11.2004 — All I'm saying, is anyone who sees something that looks like a window will do is try to drag it.
Copy linkTweet thisAlerts:
@Daniel_TauthorMar 11.2004 — Thanx samij, I'll look into that! Also, could someone tell me why this isn't validating? [url=http://validator.w3.org/check?uri=http%3A%2F%2F216.36.173.149%2Fmy%2520site%2F]Validation Results[/url]. I can't see what it is saying is wrong?

-Dan
Copy linkTweet thisAlerts:
@David_HarrisonMar 11.2004 — onload

onclick

no such thing as a target attribute with this DTD

onclick

Welcome to the XHTML Strict world. ?
Copy linkTweet thisAlerts:
@Daniel_TauthorMar 12.2004 — Ok, I've modified it to fit the standards, except for the onLoad function. Could someone tell me how I can keep the onLoad function, or something that would do the same thing, and have valid code? Also, when I make the functions into links, instead of events, it adds a border around the images that have links. Could someone also tell me how to get rid of this? It works if I put 'style="border:0;"' in the img tag, but I would like to do it through a stylesheet, so I don't have to put that on every image. Is there a predefined "image {}" thing in CSS that defines all images in the document, like a "p {}" does for paragraphs?

-Dan
Copy linkTweet thisAlerts:
@David_HarrisonMar 12.2004 — In XHTML strict all attributes have to be in lower case, therefore onLoad should be onload and that is valid. onClick should be onclick and target doesn't exist in strict.

If you want all images not to have a border once they are inside links then add this to your styles:

a img{border:0;}

This will apply a border of 0 to all <img /> tags that are enclosed in <a></a> tags.
Copy linkTweet thisAlerts:
@Daniel_TauthorMar 12.2004 — [i]Originally posted by lavalamp [/i]

[B]In XHTML strict all attributes have to be in lower case, therefore onLoad should be onload and that is valid. onClick should be onclick and target doesn't exist in strict.



If you want all images not to have a border once they are inside links then add this to your styles:



a img{border:0;}



This will apply a border of 0 to all <img /> tags that are enclosed in <a></a> tags. [/B][/QUOTE]

Ahhhh, thank you! I went around changin' all my onClick's to JavaScript link 'cuz I thought you meant they were completely deprecated! Oh well, though, I just pushed CTRL+Z a helluva lotta times and I got back to where I started. And then, thanks to DreamWeaver, I used Find and Replace to change all the onClick's to onclick?

-Dan
Copy linkTweet thisAlerts:
@David_HarrisonMar 12.2004 — Yikes, don't start using javascript: that's an accesibility nightmare. No, when I posted before I posted what the attributes should be, guess I should have made that clearer.

I code only in notepad, I also have Win XP at home which means that notepad also comes with a handy little search and replace feature which I make good use of. ?
Copy linkTweet thisAlerts:
@SamMar 12.2004 — why not use something with syntax highlighting like HTML-Kit or Code Genie?
Copy linkTweet thisAlerts:
@Daniel_TauthorMar 12.2004 — Ok, just one more problem here! It seems to be adding a funny rectangle shape onto the bottom of the image focus. You can see in the attatchment what it is doing. Also, you can go to the actual site [url=http://216.36.173.149/my%20site/]here[/url]. Any ideas as to why this is happening? Thanx,

-Dan

[upl-file uuid=c6bc3f99-ebee-4db6-bfa1-c95d048d3417 size=47kB]wierdfocus.png[/upl-file]
Copy linkTweet thisAlerts:
@SamMar 12.2004 — that is being caused by the margin:10px in your img tags.

You [u]really[/u] should make that background image 1x30px, its 30kb as is, quite a long load...
Copy linkTweet thisAlerts:
@David_HarrisonMar 12.2004 — [i]Originally posted by samij586 [/i]

[B]why not use something with syntax highlighting like HTML-Kit or Code Genie? [/B][/QUOTE]I don't need it and colouring the text will just hinder me. I find it easier to understand if it's just black and white.
Copy linkTweet thisAlerts:
@SamMar 12.2004 — understandable, though I do find it very difficult to debug javascript without line numbers.
Copy linkTweet thisAlerts:
@David_HarrisonMar 12.2004 — Windows XP notepad has a "goto line" function. I use that when I'm debugging.
×

Success!

Help @Daniel_T spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...