/    Sign up×
Community /Pin to ProfileBookmark

Need help with closing and open divs with Javascript

Copy linkTweet thisAlerts:
Mar 02.2010

Hi!

I’m working on a website where I need some help with open and closing divs using javascript.

This is the website: [URL=”http://www.clashjeans.se/test/styles.html”]Clash Jeans[/URL]

As you can see I’m using a javascript to open each jeans style link, I don’t know if this is the best way to do it, but it’s how I’ve done it so far. If you click the “Frankie style link” at the bottom the div called Frankie will show and you will see a little image in that div that says “next wash”. What I would like this link to do is to close the frankie div and open up another wich looks almost the same as the previous, the only thing that will change is the pictures actually. Please help me solve this problem, any suggestion about how to make this work will be highly appreciated!

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@JMRKERMar 02.2010 — I'm assuming your problem area is here ...
<i>
</i>&lt;div id="frankie" style="padding:0px;position: absolute; left: 50%; top: 50%;
margin-left:-450px; margin-top:-300px; z-index 5; height: 600px; width: 900px;
background-image:url(images/frankiestyledry.jpg); display:none; text-align:right"&gt;

&lt;div style="padding-right:15px;padding-top:13px;"&gt;
&lt;span class="who"&gt;&lt;a href="javascript:closeFrankie()" style="width:100%;"&gt;CLOSE&lt;/a&gt;

&lt;div id="frankieknapp"&gt;

&lt;img src="images/nextwash.jpg" width="95" height="18" alt="nextwash" /&gt;&lt;/a&gt;

&lt;/div&gt;

&lt;/div&gt;

&lt;script type="text/javascript"&gt;
function closeFrankie() {
document.getElementById("frankie").style.display="none";
}
function openFrankie() {
document.getElementById("frankie").style.display="block";
}

&lt;/script&gt;
&lt;/div&gt;

Instead of 'open'ing and 'close'ing the element, why not just substitute a different background image

since that will be the only thing you say will change. I don't know what that image looks like,

but assuming it is a similar size, you might try the following (untested) code. :o
<i>
</i>&lt;img src="images/nextwash.jpg" width="95" height="18" alt="nextwash" onclick="ShowNextWash()" /&gt;
&lt;!-- /a ?matching tag? --&gt;

Note, in your oiginal code, I don't see the matching opening <a> tag for the </a> tags already included ? ?

The 'ShowNextWash()' function might look like ...
<i>
</i>function ShowNextWash() {
document.getElementById('Frankie').style.backgroundImage = 'url("FrankieNextWash.jpg")';
}

Good Luck!

?
Copy linkTweet thisAlerts:
@drmacauthorMar 02.2010 — Thanks, looks like we can solve this?

I've updated the website now, so you can see the result. What I miss is to be able to switch back to the first background again when i push the button once again. My first thought was to have another button, that says previous wash, appearing when i change to wash no.2. Do you understand me?

Thanks!!!
Copy linkTweet thisAlerts:
@JMRKERMar 02.2010 — Thanks, looks like we can solve this?

I've updated the website now, so you can see the result. What I miss is to be able to switch back to the first background again when i push the button once again. My first thought was to have another button, that says previous wash, appearing when i change to wash no.2. Do you understand me?

Thanks!!![/QUOTE]

That would be the easiest solution, to add a 'Previous' button.

Using only one button you could also "toggle" between two displays, or sequence forward until repeats if more than two displays. Just don't know your requirements.

You're most welcome for the help.

Good Luck!

?
Copy linkTweet thisAlerts:
@drmacauthorMar 02.2010 — I would really appreciate if you had the time to write down the code for the toggle option, cause there is one or two jeans styles that has more than two washes.

Thanks!
Copy linkTweet thisAlerts:
@JMRKERMar 02.2010 — I would really appreciate if you had the time to write down the code for the toggle option, cause there is one or two jeans styles that has more than two washes.

Thanks![/QUOTE]

Not sure I understand your request ...

'Toggle' usually implies 2 states, on/off,

whereas if you need more than 2 displays you could go with

a sequence of clicks on the same link to advance the displays

or a radio button selections to display the pages beyond 2.

You're request is asking for 2 and sometimes more, so I'm not sure how to respond. ?
Copy linkTweet thisAlerts:
@drmacauthorMar 02.2010 — Sorry, you can forget that.

I'm going the easy way, I will switch the text on my buttons to the name of the wash. So every wash will get a button instead of using the "previous" and the "next" buttons.

Thanks for all!
Copy linkTweet thisAlerts:
@JMRKERMar 03.2010 — You're most welcome.

Happy to help.

Good Luck!

?
×

Success!

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