Member Avatar for Julia25

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
  • 534 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for Airshow

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.

Member Avatar for Julia25

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

Member Avatar for stultuske

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

Member Avatar for anas.man

<input type="button" value="Click Me" onclick="alert('Message')" />

Member Avatar for Airshow

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

Member Avatar for Julia25

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

Member Avatar for Airshow

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?

Member Avatar for Airshow

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.

Member Avatar for Julia25

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?

Member Avatar for Julia25

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
Member Avatar for Airshow

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
Member Avatar for Julia25

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
Member Avatar for Airshow

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
commented: Genius! +2
Member Avatar for Julia25

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

Member Avatar for Airshow

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

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.