Solved

Adding Javascript in dreamweaver using a template

Posted on 2016-08-07
9
52 Views
Last Modified: 2016-10-09
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
Comment
Question by:Christopher Gore
  • 4
  • 3
9 Comments
 
LVL 9

Expert Comment

by:Prasadh Baapaat
ID: 41746313
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
 
LVL 1

Author Comment

by:Christopher Gore
ID: 41746315
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
 
LVL 9

Assisted Solution

by:Prasadh Baapaat
Prasadh Baapaat earned 250 total points
ID: 41746324
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
 
LVL 1

Author Comment

by:Christopher Gore
ID: 41746331
what about this part

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

Where should I put this?
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 9

Expert Comment

by:Prasadh Baapaat
ID: 41746333
normally the javascript function will be put at the end of page ... before the </body> tag

maybe after end of your </wrapper> tag
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 250 total points
ID: 41746419
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
 
LVL 1

Author Comment

by:Christopher Gore
ID: 41746479
Thank you. That was helpful.
0
 
LVL 1

Author Comment

by:Christopher Gore
ID: 41746480
Thanks for the help
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Sometimes drives fill up and we don't know why.  If you don't understand the best way to use the tools available, you may end up being stumped as to why your drive says it's not full when you have no space left!  Here's how you can find out...
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this Micro Tutorial viewers will learn how to use Boot Corrector from Paragon Rescue Kit Free to identify and fix the boot problems of Windows 7/8/2012R2 etc. As an example is used Windows 2012R2 which lost its active partition flag (often happen…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now