Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 120
  • Last Modified:

Adding Javascript in dreamweaver using a template

I have a site that I created in dreamweaver cc 2015 than uses a template .dwt.  I want to add a wordrotator. https://github.com/andreapace/wordsrotator in my site.  I cannot figure out exactly where to put the links to the javascript and css as well as what needed to be imbeded where (either in the template page or the main index page?  I know in index I cannot edit regions controlled by the .dwt in index.html . So in short, if I want to add the wordrotator on everypage (ie. .dwt) or just on the Index.html page, How do I do above.
0
Christopher Gore
Asked:
Christopher Gore
  • 4
  • 3
2 Solutions
 
Prasadh BaapaatWeb Designer & DeveloperCommented:
well the .dwt file is same as a html page you construct in dreamweaver...

so you can open the DWT file in dreamweaver and think its same like a HTML

whatever links you want to add to... like Javascript, attach css etc you can add to the .dwt file and save it...

they will be reflected in the page when you use the template file.

in your question you just say I am using a dwt file... but I cannot guess its code so cant help on where exactly you have to make changes.

hope this helps.

thanks,
Prasadh
1
 
Christopher GoreSolutions ArchitectAuthor Commented:
Here is the beginning of the .dwt file.  Let's say I want the rotator to be at the top of the page, so just above or inside the top of the header.

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <!-- TemplateBeginEditable name="doctitle" -->
  <title>Wedding Makers</title>
  <!-- TemplateEndEditable -->
 <link href="../stylesheets/reset.css" rel="stylesheet" type="text/css" />
  <!-- TemplateBeginEditable name="head" -->
  
  <!-- TemplateEndEditable -->
</head>
 <body>
  <div class="main_wrapper cf">
   <div class="header header_align cf">
    <div class="logo_holder"> <a href="index.html"><img src="../images/bluedolphinLOGO2015.png" class="company_logo" alt=""/></a> 
    </div>

Open in new window

...
0
 
Prasadh BaapaatWeb Designer & DeveloperCommented:
as per the wordsrotator page in your link, it is explained which Javacsript, JQuery, CSS etc links need to be added in head... and steps to do it... so follow that page instructions...

Your code shows that the header contains only a logo image... so considering you want words rotator to be ABOVE the image...

you need to add the word rotator code
<p>An <span id="myWords"></span> a day keeps the doctor away</p>

Open in new window


as per below example:

<div class="header header_align cf">
<p>An <span id="myWords"></span> a day keeps the doctor away</p>
    <div class="logo_holder"> <a href="index.html"><img src="../images/bluedolphinLOGO2015.png" class="company_logo" alt=""/></a>
    </div>

Open in new window


I don't know what CSS properties are given to .header, .header_align cf,  .logo_holder classes in your CSS...

so after adding the above code you may have to make some adjustments in the CSS also.
0
Has Powershell sent you back into the Stone Age?

If managing Active Directory using Windows Powershell® is making you feel like you stepped back in time, you are not alone.  For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why.

 
Christopher GoreSolutions ArchitectAuthor Commented:
what about this part

<script type="text/javascript">
    $(function () {
        $("#myWords").wordsrotator({
            words: ['apple', 'apricot', 'avocado']
        });
    });
</script>

Where should I put this?
0
 
Prasadh BaapaatWeb Designer & DeveloperCommented:
normally the javascript function will be put at the end of page ... before the </body> tag

maybe after end of your </wrapper> tag
0
 
Scott Fell, EE MVEDeveloperCommented:
If the word wordrotator goes on every page, then you will put the code on your template (dwt file) in a non-editable region. By default, the entire template (dwt) generates pages that can not be editable until you specifically place dreamweaver code to make it editable https://helpx.adobe.com/dreamweaver/using/creating-editable-regions-templates.html.

If it will only go on the index page, then you will add the code to the editable region.  

Notice in your code you have TemplateBeginEditable  and TemplateEndEditable
 <!-- TemplateBeginEditable name="doctitle" -->
  <title>Wedding Makers</title>
  <!-- TemplateEndEditable -->

Open in new window


That defines where you can place code that may be one one page bu not another.

A very basic html page looks like this
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>TEST</title>
</head>
<body>

</body>
</html>

Open in new window

You should have at least 2 editable regions.  One in your head section and one in your body.

Looking at the github example, your code would look something like below if the rotator is on every page

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

  <link rel="stylesheet" href="path_to_/jquery.wordrotator.css">
<script src="path_to_/jquery.wordrotator.js"></script>
  <link rel="stylesheet" href="path_to_/animate.css">

  
  <!-- TemplateBeginEditable name="doctitle" -->
  <title>Wedding Makers</title>
  <!-- TemplateEndEditable -->
 <link href="../stylesheets/reset.css" rel="stylesheet" type="text/css" />
  <!-- TemplateBeginEditable name="head" -->
  
  <!-- TemplateEndEditable -->
  <script>
  
    $(function () {
        $("#myWords").wordsrotator({
            words: ['apple', 'apricot', 'avocado']
        });
    });
</script>
</head>
 <body>

   <p>An <span id="myWords"></span> this shows up on every page</p>
    <!-- TemplateBeginEditable name="main" -->
  content here can change on any page
  <!-- TemplateEndEditable -->

</body>
</html>

Open in new window

1
 
Christopher GoreSolutions ArchitectAuthor Commented:
Thank you. That was helpful.
0
 
Christopher GoreSolutions ArchitectAuthor Commented:
Thanks for the help
0

Featured Post

Problems using Powershell and Active Directory?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now