Solved

Adding Javascript in dreamweaver using a template

Posted on 2016-08-07
9
95 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 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
Enterprise Mobility and BYOD For Dummies

Like “For Dummies” books, you can read this in whatever order you choose and learn about mobility and BYOD; and how to put a competitive mobile infrastructure in place. Developed for SMBs and large enterprises alike, you will find helpful use cases, planning, and implementation.

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

NFR key for Veeam Backup for Microsoft Office 365

Veeam is happy to provide a free NFR license (for 1 year, up to 10 users). This license allows for the non‑production use of Veeam Backup for Microsoft Office 365 in your home lab without any feature limitations.

Question has a verified solution.

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

Background Information Recently I have fixed file server permission issues for one of my client. The client has 1800 users and one Windows Server 2008 R2 domain joined file server with 12 TB of data, 250+ shared folders and the folder structure i…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This tutorial will walk an individual through the process of installing the necessary services and then configuring a Windows Server 2012 system as an iSCSI target. To install the necessary roles, go to Server Manager, and select Add Roles and Featu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

732 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