5haun Posted December 18, 2013 Share Posted December 18, 2013 Hi allHave a look here http://www.saltshop.gourmetsalt.co.za/index.phpI have got a position: fixed; on my "right_column". I would like to stop it from scrolling with the page at a certain point. (As you can see it overlaps the menu, header etc.)When the top of the "right_column" div reaches the "horizontalmenu" div, I want it to stop scrolling and become static... or something like that. Does anybody know a jQuery method or something to do this?Thank you! Link to comment Share on other sites More sharing options...
vekia Posted December 18, 2013 Share Posted December 18, 2013 hello position:fixed will not work, because it's related to browser window, not to parent element change resolution of browser window, you will see then that it will disappear Link to comment Share on other sites More sharing options...
5haun Posted December 18, 2013 Author Share Posted December 18, 2013 Okay I see. Then how do I relate it to the parent element? Link to comment Share on other sites More sharing options...
vekia Posted December 18, 2013 Share Posted December 18, 2013 stickyfloat jquery plugin will be enough: https://github.com/yairEO/stickyfloat#readme it's very easy in use , just two lines of code and you will achieve what you expect Link to comment Share on other sites More sharing options...
5haun Posted December 18, 2013 Author Share Posted December 18, 2013 Okay thanks..Where exactly do I put the two lines?Could you maybe give me a quick walk through on how to do it properly? Link to comment Share on other sites More sharing options...
vekia Posted December 18, 2013 Share Posted December 18, 2013 it's necessary to upload js library to your FTP, then include it to your shop theme <header> section then use code: $( document ).ready(function() { $('#right_column').stickyfloat( {duration: 400} ); }); Link to comment Share on other sites More sharing options...
5haun Posted December 19, 2013 Author Share Posted December 19, 2013 I did this in header.tpl </script> <script type="text/javascript" src="themes/default/js/stickyfloat.js"> $( document ).ready(function() { $('#right_column').stickyfloat( {duration: 400} ); }); </script> Errors:<br /><b>Fatal error</b>: Uncaught exception 'SmartyCompilerException' with message 'Syntax Error in template &quot;/home/gourmkdu/saltshop/themes/default/header.tpl&quot; on line 55 &quot;$( document ).ready(function() { $('#right_column').stickyfloat( {duration: 400} ); });&quot; - Unexpected &quot;: &quot;, expected one of: &quot;}&quot; , &quot; &quot; , ATTR' in /home/gourmkdu/saltshop/tools/smarty/sysplugins/smarty_internal_templatecompilerbase.php:667Stack trace:#0 /home/gourmkdu/saltshop/tools/smarty/sysplugins/smarty_internal_templateparser.php(3144): Smarty_Internal_TemplateCompilerBase->trigger_template_error()#1 /home/gourmkdu/saltshop/tools/smarty/sysplugins/smarty_internal_templateparser.php(3209): Smarty_Internal_Templateparser->yy_syntax_error(2, ': ')#2 /home/gourmkdu/saltshop/tools/smarty/sysplugins/smarty_internal_smartytemplatecompiler.php(105): Smarty_Internal_Templateparser->doParse(2, ': ')#3 /home/gourmkdu/saltshop/tools/smarty/sysplugins/smarty_internal_templatecompilerbase.php(206): Smarty_Internal_Sma in <b>/home/gourmkdu/saltshop/tools/smarty/sysplugins/smarty_internal_templatecompilerbase.php</b> on line <b>667</b><br /> Link to comment Share on other sites More sharing options...
CartExpert.net Posted December 19, 2013 Share Posted December 19, 2013 Hi. You need to escape the script: {literal} //JAVASCRIPT CODE {/literal} Regards.Robin.The CartExpert Team Link to comment Share on other sites More sharing options...
vekia Posted December 19, 2013 Share Posted December 19, 2013 that's correct in smarty, always when you <script> uses brackets: { or } you have to to use {literal} {/literal} tags Link to comment Share on other sites More sharing options...
5haun Posted December 19, 2013 Author Share Posted December 19, 2013 Okay thanks guys. It's not working though... Not scrolling with page? Link to comment Share on other sites More sharing options...
CartExpert.net Posted December 19, 2013 Share Posted December 19, 2013 (edited) It's not working because you call the jquery object before it is loaded. <script type="text/javascript" src="themes/default/js/stickyfloat.js"> $( document ).ready(function() { $('#right_column').stickyfloat( {duration: 0}); }); </script> should go after the jquery script. Regards.Robin.The CartExpert Team Edited December 19, 2013 by CartExpert.net (see edit history) Link to comment Share on other sites More sharing options...
nikoz Posted December 4, 2014 Share Posted December 4, 2014 I am using prestashop 1.06 I tried to follow the above instructions in order to have a sticky column but it didn't work. What I want to achieve actually is in the category page, I want when I scroll down the product filter box to be sticky. So what I did. - I uploaded the stickyfloat.js in /themes/mytheme/js folder - Opened the /themes/mytheme/header.tpl and I edited like this: <html lang="{$lang_iso}"> <head> {literal} <script type="text/javascript" src="themes/mytheme/js/stickyfloat.js"> $( document ).ready(function() { $('#right_column').stickyfloat( {duration: 0}); }); </script> {/literal} Still is not working... Do I miss something? Thank you in advance Link to comment Share on other sites More sharing options...
vekia Posted December 9, 2014 Share Posted December 9, 2014 I am using prestashop 1.06 I tried to follow the above instructions in order to have a sticky column but it didn't work. What I want to achieve actually is in the category page, I want when I scroll down the product filter box to be sticky. So what I did. - I uploaded the stickyfloat.js in /themes/mytheme/js folder - Opened the /themes/mytheme/header.tpl and I edited like this: <html lang="{$lang_iso}"> <head> {literal} <script type="text/javascript" src="themes/mytheme/js/stickyfloat.js"> $( document ).ready(function() { $('#right_column').stickyfloat( {duration: 0}); }); </script> {/literal} Still is not working... Do I miss something? Thank you in advance can you share url to shop where you use this code? cases like this need an inspection Link to comment Share on other sites More sharing options...
nikoz Posted December 11, 2014 Share Posted December 11, 2014 Thank you Vekia for your reply. I was working locally but now I have uploaded the site so you can have a look. http://notinathens.com/private/15-daxtilidia : this a category. I would like either the right or left column to remain sticky. Thanks again for your time. Link to comment Share on other sites More sharing options...
gilbertfp Posted December 10, 2020 Share Posted December 10, 2020 Estoy tratando de integrar ese script sin embargo no logro que funcione en Prestashop 1.7 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now