See more / see less doable in osC

[♥bruyndoncx]

I would like to have my manufacturers and categories descriptions take up a certain space and have a see more / see less link like is done on this website

http://www.penguinrandomhouse.com/books/317943/a-visual-guide-to-drink-by-ben-gibson-patrick-mulligan/

 

Looking at the code I can see this is part of a View.Utils package probably within WP (theme ?)

 

I understand a background image is used for the transparency effect, but what else is needed to make this work ?

 

Is there any script like this floating about on the internet that could be integrated into oscommerce ?

[♥bruyndoncx]

"text fade out" effect is apparently what this is called , so i just found this piece of sample code

https://css-tricks.com/text-fade-read-more/

[Hotclutch]

You should be able to use bootstrap collapse for this.

 

http://www.w3schools.com/bootstrap/bootstrap_collapse.asp

[♥bruyndoncx]

You should be able to use bootstrap collapse for this.

 

http://www.w3schools.com/bootstrap/bootstrap_collapse.asp

Not really, the initial state is kinda semi expanded, a few lines visible, like a teaser to read more

[Hotclutch]

You can do that with bootstrap collapse I am sure. You can have 2 panels or divs, one for the teaser part and another for the more part. Then set a collapse on the 2nd div.

[Hotclutch]

Ok I see what you mean with the few lines visible (fading away)...too fancy for me, sorry  :)

[burt]

Gets you close:

<div class="col-sm-6">
  <div class="well">
    <p>The proof is in the pudding, and the pudding, in this case, is a football... Boof! Eat my goal!! The goalie has got football pie all over his shirt!</p>
    <div class="collapse" id="collapseMe">
      <p>Oooh scary Irish men. Would you like to recruit me? I like your berets. They're worn by Saddam Hussain, Frank Spencer, the French.</p>
      <p>Quick tip for yourself: if you're ever doing an after-dinner speech, you say "My Lords, Ladies and Gentlemen, sorry I'm late, I just popped to the toilet. And while I was there, I saw some graffiti and it said "I used to be indecisive, but now I'm not so sure"". Straight away you've got them by the jaffas.</p>
    </div>
    <p align="center"><a id="buttonised" class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseMe" aria-expanded="false" aria-controls="collapseMe"><span class="glyphicon glyphicon-collapse-down"></span> More</a></p>    
  </div>
  <script>
  $(function(){
    $('#collapseMe').on('hide.bs.collapse', function () {
      $('#buttonised').html('<span class="glyphicon glyphicon-collapse-down"></span> More');
    })
    $('#collapseMe').on('show.bs.collapse', function () {
      $('#buttonised').html('<span class="glyphicon glyphicon-collapse-up"></span> Less');
    })
  })
  </script>
</div>

Edited October 13, 2015 by burt

[♥John W]

You got me curious so I looked through their site and it seems they are using bootstrap collapse to do it.  i'm guessing you're looking for an automated way to add this to say your product description. How about using a conditional statement with PHP's countable function to count characters?

http://us3.php.net/manual/en/countable.count.php

Edited October 14, 2015 by John W

[♥John W]

Nevermind, it didn't work.

Edited October 15, 2015 by John W

[♥John W]

Not sure why I kept playing with this but I like understanding regex better.  I used RegexBuddy to test the regex.  Anyway, I figured we could automatically split and insert the div tag into text formatted into paragraphs like products description would have.  I use a test.php on my local machine to test ideas like this.  I just used the div that Burt provided.

$subject = "<P>One reason people lie is to achieve personal power.  Achieving personal power is helpful for someone who pretends to be moreconfident than he really is.</p>
<p> For example, one of my friends threw a party at his house last month. He asked me to come to his party and bring a date.</p>
<p> However, I didn't have a girlfriend. One of my other friends, who had a date to go to the party with, asked me about my date.
  I didn’t want to be embarrassed, so I claimed that I had a lot of work to do. I said I could easily find a date even better than his if I wanted to.
  I also told him that his date was ugly. I achieved power to help me feel confident; however, I embarrassed my friend and his date.
  Although this lie helped me at the time, since then it has made me look down on myself.</p>";

$pattern = '%<p\b[^>]*>(.*?)</p>(.*)%simx';

$replace = "$1
<div class=\"collapse\" id=\"collapseMe\">
  $2
</div>";

$result = preg_replace($pattern, $replace, $subject);

echo $result;

The above will output html like

One reason people lie is to achieve personal power.  Achieving personal power is helpful for someone who pretends to be moreconfident than he really is.
<div class="collapse" id="collapseMe">
  
<p> For example, one of my friends threw a party at his house last month. He asked me to come to his party and bring a date.</p>
<p> However, I didn't have a girlfriend. One of my other friends, who had a date to go to the party with, asked me about my date.
  I didn’t want to be embarrassed, so I claimed that I had a lot of work to do. I said I could easily find a date even better than his if I wanted to.
  I also told him that his date was ugly. I achieved power to help me feel confident; however, I embarrassed my friend and his date.
  Although this lie helped me at the time, since then it has made me look down on myself.</p>
</div>

Edited October 16, 2015 by John W