on click message

Question

Julia25 0 Light Poster

10 Years Ago

i have two product categories which customer can preview when click,
and wish to show a message on each item. Ive found a nice script but
need help to make this in 2 sets. need help. Happy new year!

<!DOCTYPE html>
<html lang="en">
<title>Untitled Document</title>

<script type="text/javascript">

var current = null;

function showresponddiv(messagedivid){
    var id = messagedivid.replace("message-", "respond-"),
        div = document.getElementById(id);

    // hide previous one
    if(current && current != div) {
        current.style.display =  'none';
    }   

    if (div.style.display=="none"){
        div.style.display="inline";
        current = div;
    } 
    else {
        div.style.display="none";
    }
}
</script> 




<style type="text/css">
.box li { cursor:pointer; }
#banks .active { color:red; }
#buttons .active { color:blue; }
</style>



</head>

<body>
<div id="message-1" onclick="showresponddiv(this.id)">Set1 a
</div>
<div id="respond-1" style="display:none;">Bar1
</div>
<div id="message-2" onclick="showresponddiv(this.id)">Set1 b
</div>
<div id="respond-2" style="display:none;">Bar2
</div>

<div id="message-3" onclick="showresponddiv(this.id)">Set1 c
</div>
<div id="respond-3" style="display:none;">Bar3
</div>






</body>

</script> 
</html>

javascript onclick

4 Contributors
16 Replies
466 Views
3 Days Discussion Span
Latest Post 10 Years Ago Latest Post by Airshow

All 16 Replies

Airshow 416 WiFi Lounge Lizard

10 Years Ago

Hi Julia.

Why would the current script not work for two categories?

As long as the ids of the divs' are unique and follow the same naming rules ("message-n" and "respond-n"), then everything should work.

Unless I'm missing something, categorisation should just be a question of layout - eg category A divs will be in a different container from category B divs - and the click handler will be showresponddiv() in both cases.

stultuske 1,116 Posting Maven

10 Years Ago

you've tried ... what is it you've tried, exactly?

Airshow 416 WiFi Lounge Lizard

10 Years Ago

Julia, if you post your 2-category HTML, I'll see if I can advise.

Airshow 416 WiFi Lounge Lizard

10 Years Ago

Julia,

First give your set wrappers the class name "set" :

<div class="set" id="SET1">
    ...
</div>
<div class="set" id="SET2">
    ....
</div>

Then use the following glorious seven-method one line jQuery event handler :

$(".tiptext").on('click', function () {
    $(this).closest(".set").find(".description").hide().end().end().children(".description").show();
});

Edited 10 Years Ago by Airshow

Julia25 commented: Genius! +2

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Julia25 0 Light Poster · Answer 1 · 2014-01-03T09:11:35+00:00

Hello A! Nice to hear from you again :)
Yes ive tried but seem not working?

anas.man 0 Newbie Poster · Answer 2 · 2014-01-03T11:27:46+00:00

Julia25 0 Light Poster · Answer 3 · 2014-01-03T16:28:13+00:00

basically the project is layered images.Set 1 Shirt and Set 2 Pants which has each own thumbnails which customers can mix and match. the idea of the script is for the thumbnail
when click, it will show the brand and the style on each set

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 4 · 2014-01-03T18:24:35+00:00

OK, I'm guessing here - you have a bunch of shirt thumbnails and a bunch of pant thumbnails displayed on the page. When a shirt is cliked, you want to display some descriptive text in a "shirts details" area. When a pant is cliked, you want to display some descriptive text in a "pant details" area, ie there's one details area per set, not one per item? That would make sense, but is it what you want?

Julia25 0 Light Poster · Answer 5 · 2014-01-03T19:04:26+00:00

like this :)
[IMG]http://i44.tinypic.com/2mhu3k6.jpg[/IMG]

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 6 · 2014-01-04T08:06:56+00:00

Julia, for the text, I can see no reason why the code above shouldn't work. You will need additional code to change the images.

Julia25 0 Light Poster · Answer 7 · 2014-01-04T09:33:34+00:00

everything is working, except for the thumbnail to show text when clicked.Though its difficult to position the text under the thumbnail. can you suggest a better script for this?

Julia25 0 Light Poster · Answer 8 · 2014-01-04T11:20:49+00:00

Im also trying this method using tooltip which i change the mouseover to click but wish the description will not leave until clicking on the other thumbnail.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mix and Match</title>

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>


<style type="text/css">

#SET1 {
    height: 150px;
    width: 350px;
    text-align: left;
    background-color: #FFC;
    float: left;
}
#SET2 {
    height: 150px;
    width: 350px;
    text-align: left;
    background-color: #FCC;
    float: left;
    margin-left: 15px;
}
.tiptext2 {
    background:#ccc;
    border: 1px #333 solid;
    padding:5px;
    width:100px;
    float:left;
    display: block;
    margin: 15px;
}
.txt {
    text-align: center;
    width: 350px;
    display: block;
}
.description {
    display:none;
    position:absolute;
    border:1px solid #000;
    margin-top: 10px;
    margin-left: -10px;
}
#ff {
    background:#ccc;
    border: 1px #333 solid;
    padding:5px;
    width:100px;
    float:left;
    display: block;
    margin: 15px;
    }
    #ff2 {
    border: 1px #333 solid;
    padding:5px;
    width:100px;
    float:left;
    display: block;
    margin: 15px;
    background-color: #CCF;
    }
    #ff3 {
    border: 1px #333 solid;
    padding:5px;
    width:100px;
    float:left;
    display: block;
    margin: 15px;
    background-color: #FCF;
    }

        #SS1 {
    border: 1px #333 solid;
    padding:5px;
    width:100px;
    float:left;
    display: block;
    margin: 15px;
    background-color: #9CF;
    }
    #SS2 {
    border: 1px #333 solid;
    padding:5px;
    width:100px;
    float:left;
    display: block;
    margin: 15px;
    background-color: #9CC;
    }
    #SS3 {
    border: 1px #333 solid;
    padding:5px;
    width:100px;
    float:left;
    display: block;
    margin: 15px;
    background-color: #CF3;
    }
</style>
</head>

<body>
 <div id="SET1">
<span class="txt">SET 1</span>
<div class="tiptext" id="ff">Text
  <div class="description">Armani</div>
</div>

<div class="tiptext" id="ff2">Text
<div class="description">Guess</div>
</div>

<div class="tiptext" id="ff3">Text
<div class="description">versace</div>
</div>
</div>


<div id="SET2">
<span class="txt">SET 2</span>
<div class="tiptext" id="SS1">Text
  <div class="description">Levis</div>
</div>

<div class="tiptext" id="SS2">Text
<div class="description">McGree</div>
</div>

<div class="tiptext" id="SS3">Text
<div class="description">Blue Navy</div>
</div>
</div>



<script type="text/javascript">
$(".tiptext").click(function() {
    $(this).children(".description").show();
}).mouseout(function() {
    $(this).children(".description").hide();
});
  </script>
</body>
</html>

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 9 · 2014-01-04T20:20:45+00:00

Julia,

Aha, jQuery - much easier.

If I understand correctly, you want something like this - http://jsfiddle.net/L54vH/1/ . I changed the script but left the HTML and CSS alone.

var $current = $();
$(".tiptext").on('click', function() {
    $current.hide();
    $current = $(this).children(".description").show();
});

The CSS can be simplified by defining a .tiptext directive.

Julia25 0 Light Poster · Answer 10 · 2014-01-04T21:51:44+00:00

wow! great! is it possible to separate the function within each set? I mean when clicking a thumbnail in Set2, Selected element in Set1 should remain (not hide). vice versa

Julia25 0 Light Poster · Answer 11 · 2014-01-05T05:12:49+00:00

Julia25 0 Light Poster

10 Years Ago

Yes! It works! Thanks a lot Mr. A!

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 12 · 2014-01-05T18:03:38+00:00

Julia, I forgot to post a link to the updated fiddle - but you got it working anyway - cool!

on click message

Recommended Answers Collapse Answers

All 16 Replies

Recommended Answers