Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Adding Javascript in dreamweaver using a template

Posted on 2016-08-07
9
Medium Priority
?
116 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
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

 
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 54

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

Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
This tutorial will walk an individual through the process of configuring their Windows Server 2012 domain controller to synchronize its time with a trusted, external resource. Use Google, Bing, or other preferred search engine to locate trusted NTP …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

618 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