Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 7, 2014 at 9:05 pm #221039
    sandboxes

    I would like to use a jquery plugin in a layer slider to show typography.

    here is the link to the plugin. http://charliepark.org/hatchshow/

    this is the code:`<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script&gt;
    <script type=”text/javascript” charset=”utf-8″>
    $(window).load(function(){
    $().hatchShow();
    });
    jQuery.fn.hatchShow = function(){
    $(‘.hsjs’).css(‘display’,’inner-block’).css(‘white-space’,’pre’).each(function(){
    var t = $(this);
    t.wrap(“<span class=’hatchshow_temp’ style=’display:block’>”);
    var pw = t.parent().width();
    while( t.width() < pw ){t.css(‘font-size’, (t.fontSize()+1)+”px”),
    function(){while( t.width() > pw ){t.css(‘font-size’, (t.fontSize()-.1)+”px”)}};
    };
    }).css(‘visibility’,’visible’);
    };
    jQuery.fn.fontSize = function(){return parseInt($(this).css(‘font-size’).replace(‘px’,”));};

    </script>`

    here is the code for HTML

    <span class="hsjs">Each line in this code&rsquo;sHTML</span>
<span class="hsjs">is set off with a</span>
<span class="hsjs"><span></span>
<span class="hsjs">element, & HatchShow adjusts the font size</span>
<span class="hsjs">automatically.</span>
<span class="hsjs">Each line should end up</span>
<span class="hsjs">(roughly) the same width.</span>

    please can you tell me can i do this and if so how/

    February 8, 2014 at 12:14 pm #221206
    Dude

    Hey sandboxes!

    I don’t know if LayerSlider supports this script and we can’t provide support for this customization. However you can try to place the html code into the “html” field of a layer

    
<span class="hsjs">Each line in this code&rsquo;sHTML</span>
<span class="hsjs">is set off with a</span>
<span class="hsjs"><span></span>
<span class="hsjs">element, & HatchShow adjusts the font size</span>
<span class="hsjs">automatically.</span>
<span class="hsjs">Each line should end up</span>
<span class="hsjs">(roughly) the same width.</span>

    and then insert this code at the very bottom of enfold/js/avia.js:

    
(function($){
   $(window).load(function(){
      $().hatchShow();
    });		
    jQuery.fn.hatchShow = function(){
      $('.hsjs').css('display','inner-block').css('white-space','pre').each(function(){
        var t = $(this);
        t.wrap("<span class='hatchshow_temp' style='display:block'>");
        var pw = t.parent().width();
        while( t.width() < pw ){t.css('font-size', (t.fontSize()+1)+"px"),
          function(){while( t.width() > pw ){t.css('font-size', (t.fontSize()-.1)+"px")}};
        };
      }).css('visibility','visible');
    };
    jQuery.fn.fontSize = function(){return parseInt($(this).css('font-size').replace('px',''));};
})( jQuery );

    Cheers!
    Peter

    February 8, 2014 at 1:30 pm #221218
    sandboxes

    Hi

    that did not work, do you think any of the other sliders would be easier to get it working in?

    thanks ..

    February 11, 2014 at 9:28 am #222082
    Dude

    Hi!

    Tbh I’m not sure but you can try to place the html code into an “Easy Slider” caption field. If it doesn’t work I recommend to hire a freelancer who can help you to implement the “hatchShow” javascript code directly into a slider script.

    Best regards,
    Peter

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Hatchshow in Layer Slider’ is closed to new replies.