Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

Help with javascript dock menu


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Feb 20, 2009, 12:27 PM
Ace
 
3 posts · Feb 2009
Help with javascript dock menu

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`
  #2  
Old Feb 20, 2009, 01:14 PM
Flynn's Avatar
Flynn
 
3,754 posts · Oct 2008
Munich, Germany
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
  #3  
Old Feb 20, 2009, 02:50 PM
Ace
 
3 posts · Feb 2009
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`

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
inserting javascript in body of post wolfclick Atahualpa 3 Wordpress theme 7 Jul 2, 2010 10:07 PM
[3.3.3]Javascript Rotation Question Pxl_Buzzard Header configuration & styling 2 May 9, 2009 05:18 AM
Javascript, Adsense, RSS, and Comments Jerry RSS, Feeds & Subscribing 3 Mar 25, 2009 12:16 PM
help: add javascript banner in header irynas Header configuration & styling 0 Mar 8, 2009 03:06 AM
Issue with Javascript and Lightbox brigade Atahualpa 3 Wordpress theme 1 Feb 23, 2009 03:11 PM


All times are GMT -6. The time now is 11:00 PM.


Powered by vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.