Help with javascript dock menu

Ace · #1 Feb 20, 2009, 12:27 PM

Hey, first let me say that this skin is amazing, thanks for making it.

The only problem I am having is I can't seem to get a javascript (jquery) dock menu to work in the skin. I am trying to use this dock. The download provides a js folder with "jquery" and "interface" scripts, style.css file, and image folder (there is also a demo html file). When I first tried to use the dock menu I put all the files in the main directory of wordpress then added the code from the demo in the header.php (calling the javascripts) of the Atahualpa theme, as well as in the index.php (remainder of code where the dock will be). When I tested it out the images of the dock showed up, but the functions of the dock did not work. Because of this I am assuming that the javascript was either put in the wrong place in the header.php and index.php, or I should put all of the dock menu files in the theme directory for this skin.

Script used to call in javascripts:

Code:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>

<link href="style.css" rel="stylesheet" type="text/css" />

<!--[if lt IE 7]>
 <style type="text/css">
 .dock img { behavior: url(iepngfix.htc) }
 </style>
<![endif]-->

Any help would be great.

Also the creator of the dock menu made a wordpress theme using his dock (so I know it is possible to have it work with wordpress). I tried using the same methods he used but with no luck.

Thanks.
Ace`

Flynn · #2 Feb 20, 2009, 01:14 PM

jQuery is alreay available in the theme, you don't need to include it.

Reference all files with absolute paths to be sure, your current paths would not work on all pages if you use permalinks.

Also, Atahualpa has a style.css, too so either don't upload the style.css of the dock menu into the Atahualpa directory, or rename the dock menu's CSS file name

If you upload interface.js, iepngfix.htc and the (renamed) dockmenu.css to /yourdomain/wp-content/themes/atahualpa/

Add this via HTML/CSS Inserts -> HTML Inserts: Header

HTML Code:

<script type="text/javascript" src="/wp-content/themes/atahualpa/interface.js"></script>
<link href="/wp-content/themes/atahualpa/dockmenu.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
 <style type="text/css">
 .dock img { behavior: url(/wp-content/themes/atahualpa/iepngfix.htc) }
 </style>
<![endif]-->

You can upload all the files into /youdomain.com/ too. In that case change all three paths to /interface.js, /dockmenu.css and /iepngfix.htc

Ace · #3 Feb 20, 2009, 02:50 PM

Thanks Flynn for the help. Unfortunately I still can't get the dock menu to work. I got the CSS to work by merging it with theme's main css file. Still though the dock does not function. How exactly is jquery set up for this skin? Is it possible I have to call it specifically for the dock? If the jquery is not the problem then maybe it is the other code associated with the dock (the part that is suppose to to be inserted in the <body>).

This is what I have inserted in the header.php file, above the "container id":

Code:

<div class="dock" id="dock2">
  <div class="dock-container2">
<div id="dockleftround"><img src="style_images/ab42muse/dockleftround.png" width="5" height="4" /></div>
	  <a class="dock-item2" href="#"><span>Home</span><img src="images/home.png" alt="home" /></a> 
	  <a class="dock-item2" href="#"><span>Contact</span><img src="images/forum1.png" alt="contact" /></a> 
	  <a class="dock-item2" href="#"><span>Portfolio</span><img src="images/image3.png" alt="portfolio" /></a> 
	  <a class="dock-item2" href="#"><span>Music</span><img src="images/image4.png" alt="music" /></a> 
	  <a class="dock-item2" href="#"><span>Video</span><img src="images/image5.png" alt="video" /></a> 
	  <a class="dock-item2" href="#"><span>History</span><img src="images/image6.png" alt="history" /></a> 
<div id="dockrightround"><img src="style_images/ab42muse/dockrightround.png" width="5" height="4" /></div>
  </div>
</div>
<!--dock menu JS options -->
<script type="text/javascript">
	
	$(document).ready(
		function()
		{
			$('#dock').Fisheye(
				{
					maxWidth:60,
					items: 'a',
					itemsText: 'span',
					container: '.dock-container',
					itemWidth: 50,
					proximity: 90,
					halign : 'center'
				}
			)
			$('#dock2').Fisheye(
				{
					maxWidth: 30,
					items: 'a',
					itemsText: 'span',
					container: '.dock-container2',
					itemWidth: 45,
					proximity: 60,
					alignment : 'left',
					valign: 'center',
					halign : 'center'
				}
			)
		}
	);

</script>

I should be able to post this code wherever I would like correct? Whether in the header.php (its a top navigation menu), or in the index.php, or footer.php. Do I have to place it somewhere specific? I tried pasting it in the HTML/CSS Inserts section but it didn't work there either. Also is the javascript in the above code not compatible with the theme?

Thanks for your time.
Ace`