• open panel

How To Add Javascript To Weebly

 

Javascript greatly enhance usability of a site. There are several third party Javascript samples available that can be used with Weebly Sites.

Some of the scripts like “Gallery Slide Shows” provide various options to make your site appealing. And there are scripts like “Scroll To Top” which takes you to the top of any page. For this artcile, we will walk you through how we added the Scroll To Top script to SiteShowCase.Weebly.Com

Scroll To Top floating icon for Weebly Site Show Case

The floating Green Arrow appears when you scroll just a little

This script places a floating arrow at the bottom right corner of the page. Clicking the arrow takes you to the top of the page. Check the SiteShowCase Pages for a quick demo. The script is made available by DynamicDrive. Do the following to get this working for your site:

Step 1: Download the Script and the Image

Download script from http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm and save the script and image in your computer. (You can just right click and save them). Open the script scrolltotop.js in a text editor and locate the line starting with “controlHTML”. In this file you will see “img src” set to up.png. This is the relative path to the image, which might not work some times. Replace up.png with full path like http://yoursite.weebly.com/files/theme/up.png. Save the script file.

Step 2: Add the above files to your Site

In your Weebly website editor, go to “Design -> Edit HTML/CSS“, and click “Add New Files” from the left side column. Upload the modified Script from Step 1. Then add the image file “up.png” also.

Step 3: Include the script for your pages

Now that you have the script and image loaded into your site, all that is needed is to instruct your pages to use this script. There are a few ways of doing it. For SiteShowcase.Weebly.Com, since we wanted the “Scroll To Top” functionality on all of the pages, we chose to include the following code in the “Header Code” part of “Settings -> Search Engine Optimization“:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://siteshowcase.weebly.com/files/theme/scrolltopcontrol.js">
/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************
</script>

In the above code, replace the “siteshowcase.weebly.com” with your site address. Save the settings and publish your site. That provides you with the “Back To Top” functionality for your site.

Optional:

If you want the “Scroll To Top” functionality on jus a few pages, but not all, then do not add it to “Settings” Tab. Instead go to “Pages” tab. Select the page you would like to add this functionality to and click “Advanced Settings“. Add to the Header Code here. Repeat this for other pages of your choice.

If you would like to use a different image for the Up Arrow Icon, upload the new image to your site and name it up.png

 
Raju Nunna

About Raju Nunna

Raju Nunna is the Founder of "Weebly Forums"

25 Responses to “How To Add Javascript To Weebly”

  1. WOW GREAT!!! Thanks for shared. :) what about script to modify Gallery Slide Shows?

     
    • Ivan
    • Reply
    • jQuery Plugin for Nivo Slider is Free. Check http://nivo.dev7studios.com/pricing/

      The Classic Theme Gallery slide show is free. Check http://galleria.io/

      Any time you upload a Javascript, make sure you reference the full path of script file location. If the script uses other files, include full path for the files as well.

       
      • Raju Nunna
      • Raju Nunna
    • The system is too typical I don’t understand how to do?
      Please help.
      Thankyou

       
      • saloni
  2. Yet, another wonderful article, Raju! Thank you so much!! All of these articles have helped my website become a success in ways I have not imagined, and this is the best one yet!

     
  3. also, Javascript is is mostly used as plural word, and you said Javascripts greatly enhance usability of a site whereas Javascript becomes plural, and is therefore:

    Javascript greatly enhances usability of a site.

    minor grammatical mistakes, otherwise GREAT article! I’ve already implemented it!

     
    • Corrected. Thanks for looking.

       
      • Raju Nunna
      • Raju Nunna
  4. This is my first comment and its for your help. I tried to follow your instructions as I have with great results previously but it didn’t work for me. I saved the JavaScript in notepad++ as a .js file. Uploaded that and the image in files and I added the script to the head in settings. Saved and published my site but nothing happened. Can you tell me what I did wrong? Thank you so much.

     
  5. Never mind. So sorry I didn’t write the same file name in the header as the uploaded file. Thank for everything!

     
  6. it worked for me on IE. but on chrome the image up.png is shown broken.
    any ideas?

     
    • Barak
    • Reply
  7. Can you do an post about adding the sliding gallery you suggested in the comments page? I would really appreciate it.

     
  8. Hi I have added the above script to the header of my weebly page http://www.tiratiraahuahin.com/one-bed-availability.html

    I notice some strange things happening. 1 The extra menu items are not being shown in more, but underneath the existing menu items and 2. the drop downs no longer appear on this page.

    The script for scroll back to top works ok.

    Please could you give me an idea where to look to correct this.
    Many thanks

     
    • two41
    • Reply
    • Your weeby flyout menu is conflicting with srolltotop. Try moving the script to ‘settings’ or page specific header etc to see if that gets addressed. unfortunately, the flyout menu script is not user configurable. So, if this does not work, you may not be able to use the scroll to top functionality.

       
      • Raju Nunna
      • Raju Nunna
  9. Hi Raju
    Thanks for you prompt reply. The script is page specific so it looks like I will have to continue to use the anchor for “back to top” :-(
    Thank you

     
    • two41
    • Reply
  10. Hi Raju
    I have now added the script to settings and it appears to work and not conflict with other elements. (When it was page specific it also stopped the photo gallery slide show) Obviously I now have Scroll to top on ALL pages, but to have this feature working for the long pages it is probably worth it.
    Thanks again

     
    • two41
    • Reply
  11. Is it possible to have the icon appear right-side middle rather than right-side bottom.

    Thanks

     
    • Roy
    • Reply
  12. Exactly what I am looking for. I find the Weebly Forum the best thing in the world. Can learn so much to make my site more attractive and a better user experience to my visitor. Thank you.

     
  13. I thought can I change the position of the bullets?.I do not have much Knowledge of CSS.Also can I remove the arrows.Also can I remove the bullets completely?

     
  14. Can I change the green arrow to my own file?

     
  15. Im trying to add a delay call to action button
    could anyone help with this

     
    • Xavier
    • Reply
  16. I am trying to make the adjustments, such as a different image, or changing the target destination. I make the changes in the script, and also upload new images with the up.png extension yet I am still getting the original green arrow and it only returns to the top of the page. I am familiar with script but still quite novice. Any help would be great.

     
  17. Hi,

    Thanks for the article. Quick questions:
    1) Would I need to upload every javascript file I use, each image, each CSS file individually and update all the paths to absolute paths?
    2) Or, is there a way to upload an entire folder and keep the original structure? There are some great scripts one can buy for including games and other features but they all use a folder structure with all images in the image folder, CSS in the CSS folder, javascripts in the JS folder, etc. It would be very error prone to handle the files individually.

    Any help or suggestions?

    Thanks,
    Ambika

     
  18. This is helpful. I’d like a more specific explanation of how to import an Adobe Edge file into Weebly. It contains several .js files and image files. I’ve attempted to adapt this tutorial without success.
    Included files:
    DoveTest_edge.js
    DoveTest_edgeActions.js
    DoveTest_edgePreload.js
    DoveTest.html
    images (folder)

    Any help would be greatly appreciated.

     
    • rcraighead
    • Reply
  19. Trying to take baby steps. I successfully reproduced your tutorial. I’ll keep trying on the Edge Animate files. Thank you.

     
    • rcraighead
    • Reply
  20. Hi,

    I have custom javascript loaded from the header. works fine for desktop but it doesn’t seem to work on mobile site. Any idea why this happens?

    Thanks

     
  21. Does anyone know if the grey background around enlarged (Lightbox) images can be removed or adjusted?

     

Leave a Comment

Weeblyforums.com is neither affiliated with nor endorsed by Weebly
© 2013 Weebly Forums, a CrossWeb.ca venture

Facebook

Follow WeeblyForums on Facebook
%d bloggers like this: