Announcement
Collapse
No announcement yet.
How to apply this script into web?
Collapse
X
-
Re: How to apply this script into web?
So, on that DynamicDrive page, you'll want to right-click on the text "jquery.magnifier.js" and select "Save As" and choose a location on your computer (might be best to put it on the desktop) where you can easily find it. Next:
1) log into your Vodahost cPanel
2) click on File Manager
3) In the "File Manager Directory Selection" window, click the last radio button (beside "Document Root For")
4) Just below "Document Root For", click the dropdown menu and choose the domain of the site where you want the DynamicDrive tool to appear. Click the grey "Go" button
5) In the row of icons near the top of the page, click "Upload" icon (looks like a file folder with a green arrow in front of it)
6) On the new page you'll get, click "Choose" and navigate to wherever you saved the "jquery.magnifier.js" file and double click to select it.
7) cPanel should automatically begin uploading the file you selected to the domain you specified.
Repeat this process for the other file that DynamicDrive says you need to upload. Once you have both of them uploaded to the proper directory in your cPanel, you should be able to implement the DynamicDrive tool on a BV page.
-
Re: How to apply this script into web?
Originally posted by jimchicago View PostSo, on that DynamicDrive page, you'll want to right-click on the text "jquery.magnifier.js" and select "Save As" and choose a location on your computer (might be best to put it on the desktop) where you can easily find it. Next:
1) log into your Vodahost cPanel
2) click on File Manager
3) In the "File Manager Directory Selection" window, click the last radio button (beside "Document Root For")
4) Just below "Document Root For", click the dropdown menu and choose the domain of the site where you want the DynamicDrive tool to appear. Click the grey "Go" button
5) In the row of icons near the top of the page, click "Upload" icon (looks like a file folder with a green arrow in front of it)
6) On the new page you'll get, click "Choose" and navigate to wherever you saved the "jquery.magnifier.js" file and double click to select it.
7) cPanel should automatically begin uploading the file you selected to the domain you specified.
Repeat this process for the other file that DynamicDrive says you need to upload. Once you have both of them uploaded to the proper directory in your cPanel, you should be able to implement the DynamicDrive tool on a BV page.
Step 1: Insert the following code into the <head> section of your page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" />
<link rel="stylesheet" type="text/css" href="ddsmoothmenu-v.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="ddsmoothmenu.js">
/***********************************************
* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<script type="text/javascript">
ddsmoothmenu.init({
mainmenuid: "smoothmenu1", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
ddsmoothmenu.init({
mainmenuid: "smoothmenu2", //Menu DIV id
orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
//customtheme: ["#804000", "#482400"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
</script>
The above code references a few external files, which by default you should upload to the same directory as the page itself (right click each file and select "Save As"):
ddsmoothmenu.js
ddsmoothmenu.css
ddsmoothmenu-v.css
2 images:
(I have done this, I can see at FTP)
Step 2: Add the below menu code to the BODY section of your page. It contains the markup for 1 horizontal menu and 1 vertical menu:
<h2>Example 1</h2>
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
<li><a href="#">Folder 0</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>
<h2 style="margin-top:200px">Example 2</h2>
<div id="smoothmenu2" class="ddsmoothmenu-v">
<ul>
<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
<li><a href="#">Folder 0</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>
But when preview I see all these or this will work only after published:
Example 1
Item 1
Folder 0
Sub Item 1.1
Sub Item 1.2
Sub Item 1.3
Sub Item 1.4
Sub Item 1.2
Sub Item 1.3
Sub Item 1.4
Folder 1
Sub Item 1.1
Sub Item 1.2
Sub Item 1.3
Sub Item 1.4
Sub Item 1.2
Sub Item 1.3
Sub Item 1.4
Item 3
Folder 2
Sub Item 2.1
Folder 2.1
Sub Item 2.1.1
Sub Item 2.1.2
Folder 3.1.1
Sub Item 3.1.1.1
Sub Item 3.1.1.2
Sub Item 3.1.1.3
Sub Item 3.1.1.4
Sub Item 3.1.1.5
Sub Item 2.1.4
Item 4
Example 2
Item 1
Folder 0
Sub Item 1.1
Sub Item 1.2
Sub Item 1.3
Sub Item 1.4
Sub Item 1.2
Sub Item 1.3
Sub Item 1.4
Folder 1
Sub Item 1.1
Sub Item 1.2
Sub Item 1.3
Sub Item 1.4
Sub Item 1.2
Sub Item 1.3
Sub Item 1.4
Item 3
Folder 2
Sub Item 2.1
Folder 2.1
Sub Item 2.1.1
Sub Item 2.1.2
Folder 3.1.1
Sub Item 3.1.1.1
Sub Item 3.1.1.2
Sub Item 3.1.1.3
Sub Item 3.1.1.4
Sub Item 3.1.1.5
Sub Item 2.1.4
Item 4
>
Please advise how to apply them correctly.
Thank you.
Comment
Comment