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.

Need help : Jquery with Smarty files

Discussion in 'jQuery' started by RoundShots, Sep 24, 2015.

  1. #1
    Hello guys, ok, so let me explain you, i would like to insert a small jquery script which open a sliding window when clicking on a link in menu.

    I have my tpl files :
    header.tpl
    footer.tpl

    The script is like this :

    Link menu code :
    <li class="right"><main class="cd-main-content"><a href="#0" class="cd-btn">Menu text</a>
    </main></li>
    HTML:
    Then, before </body> i need to paste it :
    <div class="cd-panel from-right">
    <header class="cd-panel-header">
    <h1>Title goes here</h1>
    <a href="#0" class="cd-panel-close">Close</a>
            <script>
    jQuery(document).ready(function($){
        //open the lateral panel
        $('.cd-btn').on('click', function(event){
            event.preventDefault();
            $('.cd-panel').addClass('is-visible');
        });
        //clode the lateral panel
        $('.cd-panel').on('click', function(event){
            if( $(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close') ) {
                $('.cd-panel').removeClass('is-visible');
                event.preventDefault();
            }
        });
    });
    </script>
    </header>
    <div class="cd-panel-container">
    <div class="cd-panel-content">
    <p>some text here</br>
    2. lorem ipsum</br>
    3. text text text</br></p></div></div></div>
    HTML:
    And css code :
    .cd-main-content h1 {
      font-size: 20px;
      font-size: 1.25rem;
      color: #64788c;
      padding: 4em 0;
    }
    .cd-main-content .cd-btn {
    position: relative;
    display: inline-block;
    color: #fff;
    font-weight: 700;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
    border-right: 1px solid #516E86;
    }
    .no-touch .cd-main-content .cd-btn:hover {
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
    }
    @media only screen and (min-width: 1170px) {
      .cd-main-content h1 {
        font-size: 32px;
        font-size: 2rem;
      }
    }
    
    .cd-panel {
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      visibility: hidden;
      -webkit-transition: visibility 0s 0.6s;
      -moz-transition: visibility 0s 0.6s;
      transition: visibility 0s 0.6s;
    }
    .cd-panel::after {
      /* overlay layer */
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: transparent;
      cursor: pointer;
      -webkit-transition: background 0.3s 0.3s;
      -moz-transition: background 0.3s 0.3s;
      transition: background 0.3s 0.3s;
    }
    .cd-panel.is-visible {
    visibility: visible;
    -webkit-transition: visibility 0s 0s;
    -moz-transition: visibility 0s 0s;
    transition: visibility 0s 0s;
    background: rgba(0, 0, 0, 0.41);
    }
    .cd-panel.is-visible::after {
      background: rgba(0, 0, 0, 0.6);
      -webkit-transition: background 0.3s 0s;
      -moz-transition: background 0.3s 0s;
      transition: background 0.3s 0s;
    }
    .cd-panel.is-visible .cd-panel-close::before {
      -webkit-animation: cd-close-1 0.6s 0.3s;
      -moz-animation: cd-close-1 0.6s 0.3s;
      animation: cd-close-1 0.6s 0.3s;
    }
    .cd-panel.is-visible .cd-panel-close::after {
      -webkit-animation: cd-close-2 0.6s 0.3s;
      -moz-animation: cd-close-2 0.6s 0.3s;
      animation: cd-close-2 0.6s 0.3s;
    }
    
    @-webkit-keyframes cd-close-1 {
      0%, 50% {
        -webkit-transform: rotate(0);
      }
      100% {
        -webkit-transform: rotate(45deg);
      }
    }
    @-moz-keyframes cd-close-1 {
      0%, 50% {
        -moz-transform: rotate(0);
      }
      100% {
        -moz-transform: rotate(45deg);
      }
    }
    @keyframes cd-close-1 {
      0%, 50% {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0);
      }
      100% {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
      }
    }
    @-webkit-keyframes cd-close-2 {
      0%, 50% {
        -webkit-transform: rotate(0);
      }
      100% {
        -webkit-transform: rotate(-45deg);
      }
    }
    @-moz-keyframes cd-close-2 {
      0%, 50% {
        -moz-transform: rotate(0);
      }
      100% {
        -moz-transform: rotate(-45deg);
      }
    }
    @keyframes cd-close-2 {
      0%, 50% {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0);
      }
      100% {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
      }
    }
    .cd-panel-header {
      position: fixed;
      width: 90%;
      height: 50px;
      line-height: 50px;
      background: rgba(255, 255, 255, 0.96);
      z-index: 2;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
      -webkit-transition: top 0.3s 0s;
      -moz-transition: top 0.3s 0s;
      transition: top 0.3s 0s;
    }
    .cd-panel-header h1 {
    color: #af2b35;
    font-size: 22px;
    padding-left: 5%;
    font-weight: 300;
    font-family: 'Helveticaneue','Open Sans','Yanone Kaffeesatz',"Trebuchet MS",Arial,Helvetica,sans-serif;
    }
    .from-right .cd-panel-header, .from-left .cd-panel-header {
      top: -50px;
    }
    .from-right .cd-panel-header {
      right: 0;
    }
    .from-left .cd-panel-header {
      left: 0;
    }
    .is-visible .cd-panel-header {
      top: 0;
      -webkit-transition: top 0.3s 0.3s;
      -moz-transition: top 0.3s 0.3s;
      transition: top 0.3s 0.3s;
    }
    @media only screen and (min-width: 768px) {
      .cd-panel-header {
        width: 70%;
      }
    }
    @media only screen and (min-width: 1170px) {
      .cd-panel-header {
        width: 50%;
      }
    }
    
    .cd-panel-close {
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: 60px;
      /* image replacement */
      display: inline-block;
      overflow: hidden;
      text-indent: 100%;
      white-space: nowrap;
    }
    
    
    .cd-panel-close::before, .cd-panel-close::after {
      position: absolute;
    content: '';
      top: 22px;
      left: 20px;
      height: 3px;
      width: 20px;
      background-color: #424f5c;
    
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
    .cd-panel-close::before {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
    }
    .cd-panel-close::after {
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }
    .no-touch .cd-panel-close:hover {
      background-color: #424f5c;
    }
    .no-touch .cd-panel-close:hover::before, .no-touch .cd-panel-close:hover::after {
      background-color: #ffffff;
      -webkit-transition-property: -webkit-transform;
      -moz-transition-property: -moz-transform;
      transition-property: transform;
      -webkit-transition-duration: 0.3s;
      -moz-transition-duration: 0.3s;
      transition-duration: 0.3s;
    }
    .no-touch .cd-panel-close:hover::before {
      -webkit-transform: rotate(220deg);
      -moz-transform: rotate(220deg);
      -ms-transform: rotate(220deg);
      -o-transform: rotate(220deg);
      transform: rotate(220deg);
    }
    .no-touch .cd-panel-close:hover::after {
      -webkit-transform: rotate(135deg);
      -moz-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
      -o-transform: rotate(135deg);
      transform: rotate(135deg);
    }
    
    .cd-panel-container {
      position: fixed;
      width: 90%;
      height: 100%;
      top: 0;
      background: #EBEBEB;
      z-index: 1;
      -webkit-transition-property: -webkit-transform;
      -moz-transition-property: -moz-transform;
      transition-property: transform;
      -webkit-transition-duration: 0.3s;
      -moz-transition-duration: 0.3s;
      transition-duration: 0.3s;
      -webkit-transition-delay: 0.3s;
      -moz-transition-delay: 0.3s;
      transition-delay: 0.3s;
    }
    .from-right .cd-panel-container {
      right: 0;
      -webkit-transform: translate3d(100%, 0, 0);
      -moz-transform: translate3d(100%, 0, 0);
      -ms-transform: translate3d(100%, 0, 0);
      -o-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);
    }
    .from-left .cd-panel-container {
      left: 0;
      -webkit-transform: translate3d(-100%, 0, 0);
      -moz-transform: translate3d(-100%, 0, 0);
      -ms-transform: translate3d(-100%, 0, 0);
      -o-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
    }
    .is-visible .cd-panel-container {
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      -webkit-transition-delay: 0s;
      -moz-transition-delay: 0s;
      transition-delay: 0s;
    }
    @media only screen and (min-width: 768px) {
      .cd-panel-container {
        width: 70%;
      }
    }
    @media only screen and (min-width: 1170px) {
      .cd-panel-container {
        width: 50%;
      }
    }
    
    .cd-panel-content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 70px 5%;
      overflow: auto;
      /* smooth scrolling on touch devices */
      -webkit-overflow-scrolling: touch;
    }
    .cd-panel-content p {
      font-size: 14px;
      font-size: 0.875rem;
      color: #424f5c;
      line-height: 1.4;
      margin: 2em 0;
    }
    .cd-panel-content p:first-of-type {
      margin-top: 0;
    }
    @media only screen and (min-width: 768px) {
      .cd-panel-content p {
        font-size: 16px;
        font-size: 1rem;
        line-height: 1.6;
      }
    }
    Code (CSS):

    I tried to use the {literal}{/literal} tags, but it doesnt work at all, i wonder how to make this work .
     
    Last edited: Sep 24, 2015
    RoundShots, Sep 24, 2015 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    How does your header.tpl look?

    And why not just have the js in an external file and load it normally?
     
    PoPSiCLe, Sep 24, 2015 IP
  3. RoundShots

    RoundShots Active Member

    Messages:
    231
    Likes Received:
    16
    Best Answers:
    1
    Trophy Points:
    80
    #3
    My header.tpl looks like this :
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#" xmlns:og="http://ogp.me/ns#">
    <head>
          <title>{if $pagetitle ne ""}{$pagetitle} - {/if}{$site_name|stripslashes}</title>
        <meta name="description" content="{if $pagetitle ne ""}{$pagetitle} - {/if}{if $metadescription ne ""}{$metadescription} - {/if}{$site_name|stripslashes}">
        <meta name="keywords" content="{if $pagetitle ne ""}{$pagetitle},{/if}{if $metakeywords ne ""}{$metakeywords},{/if}{$site_name}">
        <meta name="title" content="{if $pagetitle ne ""}{$pagetitle} - {/if}{$site_name}" />
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <meta name="Revisit-After" content="1 days" />
        <link rel="shortcut icon" type="image/x-icon" href="{$baseurl}/favicon.ico">   
        <meta property="fb:app_id" content="{$FACEBOOK_APP_ID}" />
        <meta property="fb:admins" content="{$FACEBOOK_ADMIN}"/>
        <meta property="og:site_name" content="{$site_name}" />
        <meta property="og:title" content="{$pagetitle}" />
        <meta property="og:description" content="{$site_desc}" />
        <meta property="og:url" content="{$baseurl}/{$seokey}" />
        <meta property="og:image" content="{if $PID GT "0"}{$purl}/t/l-{$sharepic|stripslashes}{/if}" />
        <meta property="og:type" content="article" />
        <meta name="medium" content="image" />
        <link rel="stylesheet" type="text/css" href="{$baseurl}/css/style.css" />
        <!--[if IE]>
        <link rel="stylesheet" type="text/css" href="/css/ie.css?v=002" />
        <![endif]-->
        <script type='text/javascript' src='{$baseurl}/js/jquery.min.js'></script>
        <script type='text/javascript' src='{$baseurl}/js/jquery.sticky.js'></script>
        {literal}
        <script type="text/javascript">
        $(document).ready(function() {
          $('.cube').scrollToFixed({
            limit: $('.end-sticky').offset().top - $('.cube').outerHeight(true),
            zIndex: 999,
            fixed: function() {  },
          });
        });
        $(function() {
            var offset = $("#social").offset();
            var topPadding = 15;
            $(window).scroll(function() {
                  if ($(window).scrollTop() > offset.top) {
                      $("#social").stop().animate({
                          marginTop: $(window).scrollTop() - offset.top + topPadding
                      });
                  } else {
                      $("#social").stop().animate({
                          marginTop: 0
                      });
                  };
            });
        });
        $(document).keyup(function(e) {
              if (e.keyCode == 39) { 
                  window.location.href = $("#next").attr('href');
              }
              if(e.keyCode==37){
                  window.location.href = $("#prev").attr('href');
              }
        });
        </script>
        {/literal}
        <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
        <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
        {literal}
        <script type="text/javascript">
        (function() {
            window.PinIt = window.PinIt || { loaded:false };
            if (window.PinIt.loaded) return;
            window.PinIt.loaded = true;
            function async_load(){
                var s = document.createElement("script");
                s.type = "text/javascript";
                s.async = true;
                if (window.location.protocol == "https:")
                    s.src = "https://assets.pinterest.com/js/pinit.js";
                else
                    s.src = "http://assets.pinterest.com/js/pinit.js";
                var x = document.getElementsByTagName("script")[0];
                x.parentNode.insertBefore(s, x);
            }
            if (window.attachEvent)
                window.attachEvent("onload", async_load);
            else
                window.addEventListener("load", async_load, false);
        })();
        </script>
        {/literal}
    </head>
    <body>
        <div class="flip">   
            <div id="fb-root"></div>
            {if $enable_fc eq "1"}
            {literal}
            <script src="http://connect.facebook.net/en_US/all.js"></script>
            <script>
              FB.init({appId: '{/literal}{$FACEBOOK_APP_ID}{literal}', status: true,
                       cookie: true, xfbml: true});
              FB.Event.subscribe('auth.login', function(response) {
              });     
            </script>
            {/literal}
            {/if}
            <div id="header">
                  <div class="wrapper">
                    <div id="logo"><a href="{$baseurl}" title="{$site_name}"><img src="{$imageurl}/pixel.gif" /></a></div>
                    <div class="ad">
                          {insert name=get_advertisement AID=1}
                    </div>
                  </div>
                  <div class="clear"></div>
            </div>       
            <div id="menu" style="margin: 0 auto; margin-top: -24px; position: relative; width: 939px;">
                <a id="home" {if $mainmenu eq "0"}class="current"{/if} href="{$baseurl}" title="{$lang38}">{$lang38}</a><span></span>
                <a id="current" {if $mainmenu eq "1"}class="current"{/if} href="{$baseurl}/new" title="{$lang41}">{$lang41}</a><span></span>
                <a id="categories" {if $mainmenu eq "2"}class="current"{/if} href="{$baseurl}/popular" title="{$lang43}">{$lang43}</a><span></span>
                <a id="members" {if $mainmenu eq "3"}class="current"{/if} href="{$baseurl}/random" title="{$lang45}">{$lang45}</a><span></span>
                <a id="top view" {if $mainmenu eq "5"}class="current"{/if} href="{$baseurl}/viewed" title="{$lang46}">{$lang46}</a><span></span>
                <a id="upload" {if $mainmenu eq "up"}class="current"{/if} href="{$baseurl}/submit" title="{$lang6}">{$lang4}</a>
            </div>
            <div class="clear" style="padding-bottom:5px;"></div>
    HTML:
     
    RoundShots, Sep 24, 2015 IP
  4. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #4
    And what kind of errors do you get? Just that the JS itself doesn't work? No errors from Smarty, if I'm guessing correctly?
    If so, you probably have some conflicts between all the different js-libs you're using.
     
    PoPSiCLe, Sep 24, 2015 IP
  5. RoundShots

    RoundShots Active Member

    Messages:
    231
    Likes Received:
    16
    Best Answers:
    1
    Trophy Points:
    80
    #5
    yes, it shows no error, its just that when i click on the link from my menu, a window should slide from left and appear, and it doesnt.
     
    RoundShots, Sep 24, 2015 IP
  6. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #6
    Then it's almost a 100% that there's an error with the javascript you're using.
    Have you examined the console log to see if there's a js-error? If not, do you have a link?
     
    PoPSiCLe, Sep 24, 2015 IP
  7. RoundShots

    RoundShots Active Member

    Messages:
    231
    Likes Received:
    16
    Best Answers:
    1
    Trophy Points:
    80
    #7
    The thing is that i used it somewhere else on another site that doesnt use smarty and it works like a charm :
    [​IMG]
     
    RoundShots, Sep 24, 2015 IP
  8. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #8
    Most definitely you have conflicting .js files. Usually the .min ones. I'd just try something else. I used jquery heavily at one point and found out that simply trying a different jquery library solves the issue.

    Search for something like "jquery sliding div from the right" and you'll find samples that may work with your site. Something like this may work:

    http://jsfiddle.net/yHPTv/2968/
     
    qwikad.com, Sep 24, 2015 IP
  9. RoundShots

    RoundShots Active Member

    Messages:
    231
    Likes Received:
    16
    Best Answers:
    1
    Trophy Points:
    80
    #9
    RoundShots, Sep 24, 2015 IP
  10. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #10
    The problem (very often) is that the different libraries' way of interpreting similar stuff (for instance, jQuery's way of using $ as an identifier for elements), tends to conflict with other libraries use of the same - for instance, Wordpress has a filter-function built in, so that if you use different libraries, it uses their "coinhabitant" mode instead of the $ or similar.
    Your problem is the multiple different JS-libraries - usually, it's a LOT wiser to stick to one library, and search for plugins and similar which does what you want, instead of running multiple libraries on the same site. (Not counting things like FB-js and such, they're usually fine either way).
     
    PoPSiCLe, Sep 24, 2015 IP
  11. RoundShots

    RoundShots Active Member

    Messages:
    231
    Likes Received:
    16
    Best Answers:
    1
    Trophy Points:
    80
    #11
    i updated jquery library and it seems to work now, damn just for a line of code, it made all this mess...grrrr

    thanks for help guys
     
    Last edited: Sep 24, 2015
    RoundShots, Sep 24, 2015 IP
    qwikad.com likes this.