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 .
How does your header.tpl look? And why not just have the js in an external file and load it normally?
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:
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.
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.
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?
The thing is that i used it somewhere else on another site that doesnt use smarty and it works like a charm :
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/
btw, the original demo is here : http://codyhouse.co/gem/css-slide-in-panel/ i will try to see if there is a version that uses only css3.
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).
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