Member Avatar for chrisschristou

hello firends
i have more tha 30 div block as list of product it containt like this

<div class="itemlist" id="itemlist">
        <ul>
          <li><img src="cover/imshge.jpg"</li>
          <li class="iteminfo" id="iteminfo"><"item desciption"></li>
          <li> <?php echo ['price']; ?></li>
        </ul>
      </div>

and i want to description can have 4 or 5 line of text but i want to hide it it show only 2 line but when mouse hover the div itemlist it must have a thin border and show the rest of iteminfo.

#itemlist {
    clear: none;
    float: left;
    margin-left: 2.8698%;
    margin-bottom:2.8698%;
    padding-top:2.8698%;
    width: 26.8040%;
    display: block;
}

please check the exemple of realy what i want here http://www.aliexpress.com/w/wholesale-jiake-v8.html?g=y&SearchText=jiake%2Bv8&CatId=0&initiative_id=SB_20131218055218

Edited by chrisschristou because: i add i link of exemple of realy what i want do
  • 4 Contributors
  • 6 Replies
  • 491 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Member #46692

Dani AI

Generated

Brief summary and quick fixes tied to the thread

The goal posted by is straightforward: show only two lines of the product description and reveal the rest (plus add a thin border) on hover. The two concrete problems visible in the thread are: multiple elements using the same id (invalid HTML — IDs must be unique) and an incorrect border declaration (border: 2% solid is not a valid way to set border width). ’s jsFiddle is a useful concept demo and ’s tooltip suggestion is a reasonable fallback for very long content or small grids, but the most direct fix is to switch to class-based selectors and correct the border/box behavior.

Practical approaches (pick one that fits)

  • Use CSS multi-line clamp for modern browsers: use the line-clamp pattern (WebKit box + -webkit-line-clamp: 2) with overflow: hidden for a clean two-line truncation and use the container hover to remove the clamp. Add a fallback for browsers that don’t support it.
  • Use max-height + transition: set the description to a max-height that equals two lines initially, then on .item:hover .iteminfo raise max-height to a known large value and animate the transition. (Animating height: auto doesn’t animate; max-height does if you pick a sensible maximum.)
  • Avoid layout shift when adding a border: use box-sizing: border-box, or use outline or an absolutely positioned inner element for the expanded text so the grid doesn’t reflow when the border appears. For touch and keyboard accessibility, provide a focus/click toggle (or :focus-within) because hover is not reliable on touch devices.

Notes tied to existing replies

  • Replace duplicate ids with classes (Post #5) and correct the border unit to a length (for example 2px). ’s fiddle shows the hover behavior well but be sure selectors and HTML validity are fixed first.

Recommended Answers

All 6 Replies

Member Avatar for Member #46692

Looks to me like it is working... Am I missing something?

Member Avatar for JorgeM

Am I missing something?

He was providing an example of what he wants to do. It seems to me he's looking for guidance on how to incorporate that less..more functionaility into the code example that he pasted above.

Member Avatar for Dervish1

I would think it's a matter of putting some code into the mouseover to modify the contents of the div. This forces a redraw, of course, which might be a bit ugly if you have a large grid that has to be redone.

Alternately, you might try assigning each item a tooltip with the full info you want.

Member Avatar for chrisschristou

tried by my self but div don't make border the when i hover on first item of list it make some trouble
here is the what i do www.zunaphone.com/accesory
all that list have same class name and id this is the code css

#itemlist {
    clear: none;
    float: left;
    margin-left: 2.8698%;
    margin-bottom:2.8698%;
    padding-top:2.8698%;
    width: 26.8040%;
    display: block;
}
.itemlist:hover {
    border: 2% solid  #CCC;
    }
    .iteminfo{
    overflow-y: hidden;
    height: 50px;
}

please view ebay product list with gallery view and hove mouse on to understund what i mean what i relay want to do : http://www.ebay.com/sch/Cell-Phones-Smartphones-/9355/i.html?rt=nc&_dmd=2

Edited by chrisschristou because: a link of exemple
Member Avatar for chrisschristou

any help here please??

Member Avatar for Member #46692

Maybe as a quick example...

http://jsfiddle.net/NgXSc/62/

Edited by Member #46692
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.