Jump to content
bruyndoncx

See more / see less doable in osC

Recommended Posts

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 ?


KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Share this post


Link to post
Share on other sites

"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/


KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Share this post


Link to post
Share on other sites

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


KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

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 by John W

I'm not really a dog.

Share this post


Link to post
Share on other sites

Nevermind, it didn't work.


Edited by John W

I'm not really a dog.

Share this post


Link to post
Share on other sites

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 by John W

I'm not really a dog.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×