How would I install this javascript?

[noesac]

http://stackoverflow.com/questions/659199/how-to-show-popup-message-like-in-stackoverflow/659243#659243


There are three parts, markup, css and javascript.

I tried putting the markup and javascript at the top of header.tpl

And then the css in themes>mytheme>global.css


However this didn't work, any tips on how to get this going?

[rocky]

This is one of those things that is easy if you know how to write modules, but not if you don't. You can read how to create a module here. If you can't create a module, you could copy the code into your theme, though that ties the code to that theme only. You could copy the HTML code and Javascript into footer.tpl and copy the CSS into global.css.

[noesac]

Hi Rocky, it would probably be ok if it were tied to just one theme as I'm not looking to change themes anytime soon.

Wouldn't putting this in the footer display it at the bottom of the page instead of at the top?

I just added the css to global.css, and the following to the footer.tpl file but no luck, any idea what i've done wrong?

<!-- Footer -->


Hey, This is my Message.
X



$(document).ready(function() {
   $("#message").fadeIn("slow");
   $("#message a.close-notify").click(function() {
       $("#message").fadeOut("slow");
       return false;
   });
});
{$HOOK_FOOTER}

   {/if}
   </body>
</html>

[rocky]

I thought since it is a message box, it should go at the bottom so it is loaded after the website finishes and doesn't block loading of the website. Try adding {literal} before the Javascript and {/literal} after so that Smarty doesn't get confused by the { } in the Javascript.

[noesac]

Hum no luck, this is what I did:

<!-- Footer -->


Hey, This is my Message.
X



{literal}$(document).ready(function() {
   $("#message").fadeIn("slow");
   $("#message a.close-notify").click(function() {
       $("#message").fadeOut("slow");
       return false;
   });
});
{/literal}

{$HOOK_FOOTER}

   {/if}
   </body>
</html>

Here's my test site: http://tiny.cc/uq5qw


And here's a great example of it in action: http://stackoverflow.com/

(really nice way of doing notifications!!)

[rocky]

I just noticed that you forgot to put script tags around your code. Try:

{literal}
<script type="text/javascript">
$(document).ready(function() {
   $("#message").fadeIn("slow");
   $("#message a.close-notify").click(function() {
       $("#message").fadeOut("slow");
       return false;
   });
});
</script>
{/literal}

[noesac]

Great that worked!! Hum I just realised that it might not work all that well with prestashop...since I can't dynamically adjust my page up and down (if you look at my test site it looks a little funky).

Oh well maybe I can use it again in the future!

[keyura]

I prefer to write it in .tpl file of the module. Check how I have put the social bookmarks in the home editor module.