?
Solved

Adding Javascript in dreamweaver using a template

Posted on 2016-08-07
9
Medium Priority
?
108 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
9 Comments
 
LVL 10

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 10

Assisted Solution

by:Prasadh Baapaat
Prasadh Baapaat earned 1000 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
Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

 
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
 
LVL 10

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 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 1000 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this Micro Tutorial viewers will learn how to restore single file or folder from Bare Metal backup image of their system. Tutorial shows how to restore files and folders from system backup. Often it is not needed to restore entire system when onl…
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)
Suggested Courses

777 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