/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] How do they do it?

Copy linkTweet thisAlerts:
May 23.2012

Hi there,

I’ve been looking at the code on the [URL=”http://www.walkerart.org/”]Walker Art Center’s website[/URL], but I can’t seem to figure out how they do this. Can anyone explain me how do they manage to change the achronyms in the left side menu, to the full words kind of boxes when we hover them. Are they even using javascript to make this change?

Thank you.

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@auntniniMay 23.2012 — You might want to look at this

http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

Animated Collapsible DIV v2.4

Author: Dynamic Drive
Copy linkTweet thisAlerts:
@JMRKERMay 24.2012 — You could also modify something like this.

No JS involved, just some CSS settings.
<i>
</i>&lt;html&gt;
&lt;head&gt;
&lt;title&gt; Untitled &lt;/title&gt;

&lt;style type="text/css"&gt;
#leftPanel { width:150px; }
#leftPanel ul { list-style-type:none; }
#leftPanel li:hover { border:1px solid orange; }
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div id="leftPanel"&gt;
&lt;ul id="leftPanelList"&gt;
&lt;li onmouseover="this.innerHTML='Web Developer'" onmouseout="this.innerHTML='WD'"
onclick="window.location.href='http://www.webdeveloper.com'"&gt;WD&lt;/li&gt;
&lt;li onmouseover="this.innerHTML='Coding Forums'" onmouseout="this.innerHTML='CF'"
onclick="window.location.href='http://www.codingforums.com'"&gt;CF&lt;/li&gt;
&lt;li onmouseover="this.innerHTML='Dream In Code'" onmouseout="this.innerHTML='DC'"
onclick="window.location.href='http://www.dreamincode.net'"&gt;DC&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@mindwashedauthorMay 24.2012 — Thanks JMRKER! that's exactly what I was looking for. It works like a charm. Well the border thing does not but I don't need it anyway. ?
Copy linkTweet thisAlerts:
@JMRKERMay 24.2012 — Thanks JMRKER! that's exactly what I was looking for. It works like a charm. Well the border thing does not but I don't need it anyway. ?[/QUOTE]

You're most welcome.

Happy to help.

What is the problem with the "border thing"?

Which browser is giving you the problem?

Good Luck!

?
Copy linkTweet thisAlerts:
@PadonakMay 24.2012 — 
...

Which browser is giving you the problem?

...[/QUOTE]

i bet he's talking about IE ))

for IE and the same crap (if exists lol) the code will be:

[CODE]<html>
<head>
<title> Untitled </title>

<style type="text/css">
#leftPanel { width:150px; }
#leftPanel ul { list-style-type:none; }
#leftPanel li.norm{border:none;}
#leftPanel li.hov{border:1px solid Orange;}
</style>

</head>
<body>
<div id="leftPanel">
<ul id="leftPanelList">
<li onmouseover="this.innerHTML='Web Developer';this.className='hov'" onmouseout="this.innerHTML='WD';this.className='norm'"
onclick="window.location.href='http://www.webdeveloper.com'">WD</li>
<li onmouseover="this.innerHTML='Coding Forums';this.className='hov'" onmouseout="this.innerHTML='CF';this.className='norm'"
onclick="window.location.href='http://www.codingforums.com'">CF</li>
<li onmouseover="this.innerHTML='Dream In Code';this.className='hov'" onmouseout="this.innerHTML='DC';this.className='norm'"
onclick="window.location.href='http://www.dreamincode.net'">DC</li>
</ul>
</div>
</body>
</html>[/CODE]
Copy linkTweet thisAlerts:
@JMRKERMay 24.2012 — i bet he's talking about IE ))

for IE and the same crap (if exists lol) the code will be:

[CODE]...

<style type="text/css">
#leftPanel { width:150px; }
#leftPanel ul { list-style-type:none; }
#leftPanel li.norm{border:none;}
#leftPanel li.hov{border:1px solid Orange;}
</style>

...[/CODE][/QUOTE]

Thanks, I was unaware the CSS needed to be different for the 'special' MSIE. :eek:

:rolleyes: ?
×

Success!

Help @mindwashed 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.19,
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,
)...