0

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>
4
Contributors
16
Replies
100
Views
3 Years
Discussion Span
Last Post by Airshow
Featured Replies
  • 1

    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(); }); Read More

0

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.

0

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

0

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

0

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?

0

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.

0

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?

0

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>

Edited by Julia25

0

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.

Edited by Airshow

0

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

Edited by Julia25

1

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 by Airshow

Votes + Comments
Genius!
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.