1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

jQuery only working once?

Discussion in 'jQuery' started by Borduhh, Apr 1, 2013.

  1. #1
    Hey everyone,

    I have a simple script I wrote to make a div larger and smaller by clicking on a "readmore/readless" button. But the problem is it only works once.

    The jQuery code is:

    Code (Text):
    1. jQuery(document).ready(function () {
    2.  
    3.         jQuery('a.desc-readmore').click( function (){
    4.             jQuery('div.product-desc').css('max-height', '550px');
    5.             jQuery('a.desc-readmore').text('Read Less');
    6.             jQuery('a.desc-readmore').addClass('desc-readless');
    7.             jQuery('a.desc-readless').removeClass('desc-readmore');
    8.        
    9.             jQuery('a.desc-readless').click( function(){
    10.                 jQuery('div.product-desc').css('max-height', '150px');
    11.                 jQuery('a.desc-readless').text('Read More');
    12.                 jQuery('a.desc-readless').addClass('desc-readmore');
    13.                 jQuery('a.desc-readmore').removeClass('desc-readless');
    14.             });
    15.         });
    16.     });
    and the html is:

    Code (Text):
    1. <div class="product-desc-container">
    2.             <div class="product-desc">
    3.                 <?php echo $_helper->productAttribute($_product, nl2br($_product->getDescription()), 'description') ?>
    4.             </div>
    5.             <a class="desc-readmore">Read more</a>
    6.         </div>
    Any ideas what might be going wrong?
    Solved! View solution.
    Borduhh, Apr 1, 2013 IP
  2. Borduhh

    Borduhh Active Member

    Messages:
    677
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    65
    #2
    I tried doing a little research and came up with this code:

    Code (Text):
    1. jQuery(document).ready(function () {
    2.         jQuery(document).on("click", "a.desc-readmore", function (){
    3.             jQuery('div.product-desc').css('max-height', '550px');
    4.             jQuery('a.desc-readmore').text('Read Less');
    5.             jQuery('a.desc-readmore').addClass('desc-readless');
    6.             jQuery('a.desc-readless').removeClass('desc-readmore');
    7.         });  
    8.     });
    But that still doesn't work either...
    Borduhh, Apr 1, 2013 IP
  3. robzdc

    robzdc Greenhorn

    Messages:
    23
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    11
    #3
    Code (Text):
    1. jQuery(document).ready(function () {
    2. function reloadFunc(){      
    3. jQuery(document).on("click", "a.desc-readmore", function (){
    4.             jQuery('div.product-desc').css('max-height', '550px');
    5.             jQuery('a.desc-readmore').text('Read Less');
    6.             jQuery('a.desc-readmore').addClass('desc-readless');
    7.             jQuery('a.desc-readless').removeClass('desc-readmore');
    8. reloadFunc();
    9.         });
    10.      
    11. }
    12. reloadFunc();
    13. });
    14.  
    robzdc, Apr 6, 2013 IP
  4. robzdc

    robzdc Greenhorn

    Messages:
    23
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    11
    #4
    You are changing the DOM so you need to reload the script.
    robzdc, Apr 6, 2013 IP
  5. #5
    Such a stunning example of jQuery for nothing... and not entirely grasping how the DOM works. You're calling a LOT of classes for what should be handled by reference, you're manipulating a lot of things that could simply be handled by your class swap, you're putting elements in the markup that only work when scripting is on and as such have no business in the markup, have no 'exit plan' for when scripting is blocked... So swinging an axe at all that...

    shrinker.js
    Code (Text):
    1. shrinkHandler = {
    2.  
    3.     addButton: function(parent,desc,className) {
    4.         var a = parent.appendChild(document.createElement('a'));
    5.         a.className = className + ' readButton';
    6.         a.appendChild(document.createTextNode(desc));
    7.         a.onclick = function(e) {
    8.             e = e || window.event;
    9.             var
    10.                 p = (e.target || e.srcElement).parentNode,
    11.                 state = new RegExp('(\\s|^)sectionReadLess(\\s|$)').test(p.className);
    12.             p.className = p.className.replace(
    13.                 ' sectionRead'+(state ? 'Less' : 'More'),
    14.                 ' sectionRead'+(state ? 'More' : 'Less')
    15.             );
    16.         }
    17.     },
    18.    
    19.     setupWrapper : function(targetId) {
    20.         var t = document.getElementById(targetId);
    21.         t.className += (t.className ? ' ' : '') + 'sectionReadLess';
    22.         this.addButton(t,'Read More','readMore');
    23.         this.addButton(t,'Read Less','readLess');
    24.     },
    25.    
    26.     add : function(targets) {
    27.         targets = targets.split(',');
    28.         for (var t=0; t<targets.length; t++) {
    29.             this.setupWrapper(targets[t]);
    30.         }
    31.     }
    32. }
    Markup:
    Code (Text):
    1.     <div id="product1" class="shrinkWrapper"><div class="shrink">
    2.         <p>
    3.             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    4.         </p><p>
    5.             Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
    6.         </p>
    7.     <!-- .shrink, .shrinkWrapper --></div></div>
    8.  
    9. <!-- this next part should be right before </body> -->
    10. <script type="text/javascript" src="shrinker.js"></script>
    11. <script type="text/javascript"><!--
    12.     shrinkHandler.add('product1');
    13. --></script>
    CSS
    Code (Text):
    1. .shrinkWrapper {
    2.     overflow:hidden; /* wrap floats */
    3.     zoom:1; /* trip haslayout, wrap floats IE */
    4.     margin:1em 0;
    5.     padding:0.5em 0.5em 0;
    6.     border:0.2em solid #DDD;
    7.     -webkit-border-radius:1em;
    8.     -moz-border-radius:1em;
    9.     border-radius:1em;
    10. }
    11.  
    12. .shrinkWrapper p {
    13.     padding-bottom:1em;
    14. }
    15.  
    16. .sectionReadLess .shrink {
    17.     overflow:hidden;
    18.     max-height:4.5em; /* 3 lines at 1.5em line-height */
    19. }
    20.  
    21. .sectionReadLess .readLess,
    22. .sectionReadMore .readMore {
    23.     display:none;
    24. }
    The 'add' function takes a comma delimited list (no spaces) of ID's to add the shrinker to. You can also call that object multiple times if desired. A more robust version would probably getByClassName all the .shrinkWrappers and apply it that way instead of by ID. Calling it before onload means the script only content is added to the DOM before CSS is applied (typically). Because the class to hide things when loaded is added by the script, scripting off all areas will open fully expanded (so people can actually USE THEM).

    I tossed a live copy on my server so you can see it working.
    http://www.cutcodedown.com/for_others/borduhh/template.html

    as with all my examples the directory:
    http://www.cutcodedown.com/for_others/borduhh/

    ... is wide open for easy access to the gooey bits and pieces.

    Side note -- and I still say it's dumb as hell that transition:height or width won't work with 'auto'

    You REALLY want I could probably rewrite that in jBloaty, but I really don't see the point, it might take it from 958 bytes to 700 bytes -- NOT really worth 32k worth of stupid library garbage.
    deathshadow, Apr 7, 2013 IP
  6. Irfi0009

    Irfi0009 Banned

    Messages:
    17,609
    Likes Received:
    33
    Best Answers:
    1
    Trophy Points:
    48
    #6
    this person gave you write information
    Irfi0009, Apr 9, 2013 IP
  7. Borduhh

    Borduhh Active Member

    Messages:
    677
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    65
    #7

    Thanks for all of that. It really is one of my first times using jQuery.
    Borduhh, Apr 24, 2013 IP