• Locked
1 reply [Last post]
Tue, 2010-02-09 10:44
srinig29
srinig29's picture
User offline. Last seen 2 years 12 weeks ago. Offline
newbie
Timezone: GMT+5.5
Joined: 2010-02-08
Posts: 3
Points: 6

Hi experts, I have to do a small functionality like they did in this site http://www.docstoc.com/search/.net/?catfilter=1
Here they have changed the DIV with 3 different CSS styles, you can see that by clicking the image on left top corner of that grid. i have to do the same so i tried some thing but it doesnt work out.

This is what i tried. Can anybody give me better than this? 

<head runat="server">
    <title></title>
    <style type="text/css">
        .display1 .thumb img
        {
            width: 100px;
            height: 60px;
            float: left;
            overflow:hidden;
        }
        .display1 .title
        {
            font-size: 30px;
            color: #f30;
        }
        .display1 .description
        {
            font-size: 20px;
            color: #333;
        }
        .display2 .thumb img
        {
            width: 150px;
        }
        .display2 .title
        { 
            font-size:30px;
            color:#033;
            vertical-align:top;
        }
        .display2 .description
        {
            display: none;
        }
        .display3 .thumb img
        {
            display: none;
        }
        .display3 .title
        {
            font-size: 30px;
            color: #03f;
        }
        .display3 .description
        {
            font-size: 23px;
            color: #f30;
        }
    </style>
 
    <script type="text/javascript">
        changestyle = function(base_class) {
            document.getElementById('results_data').setAttribute('class', base_class);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <a href="javascript:changestyle('display1')" id="display1">show style1</a><br />
    <a href="javascript:changestyle('display2')" id="display2">show style2</a><br />
    <a href="javascript:changestyle('display3')" id="display3">show style3</a><br />
    <div id="results_data" class="display1">
        <div class="title">
            Koala Bear</div>
        <div class="thumb">
            <a><img src="Images/Koala.jpg" alt="Srini"/></a>
        </div>
        <div class="description">
            Koala is herbivore native to Australia</div>
 
        <br />    
        <div class="title">
            Penguins</div>
        <div class="thumb">
            <a><img src="Images/Penguins.jpg" alt="Srini"  /></a>
        </div>
        <div class="description">
            flightless birds living almost exclusively in the southern hemisphere</div>
            <br /> 
 
        <div class="title">
            Tulips</div>
        <div class="thumb">
            <a><img src="Images/Tulips.jpg" alt="Srini"  /></a>
        </div>
        <div class="description">
            Tulip is a perennial plant in the genus Tulipa</div>
            <br /> 
 
        <div class="title">
            Chrysanthemum</div>
        <div class="thumb">
            <a><img src="Images/Chrysanthemum.jpg" alt="Srini" /></a>
        </div>
        <div class="description">
            All hydrangeas will bloom and grow well in morning sun and afternoon shade</div>
    </div>
    </form>
</body>

Top
Tags:
Thu, 2010-02-11 14:11
#1
Josefine
Josefine's picture
User offline. Last seen 1 year 28 weeks ago. Offline
newbie
Timezone: GMT+1
Joined: 2010-02-11
Posts: 4
Points: 5

Hi, the first thing I think

Hi,
the first thing I think about when looking at the code is that you should probably remove the old class. Otherwise it will still have 'display1' and then just adding the new one.

/J

Top
  • Locked