Client Side Things
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me



Go Back   Codewalkers ForumsOther TechnologiesClient Side Things

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Codewalkers Forums Sponsor:
Old November 7th, 2009, 03:40 PM
skyhintack skyhintack is offline
Registered User
Codewalkers Newbie (0 - 499 posts)
 
Join Date: Feb 2009
Location: USA
Posts: 4 skyhintack User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 43 m 14 sec
Reputation Power: 0
Javascript - JQuery flyout menu links not funtioning

Hi there. I have found a jQuery flyout menu that I love and am trying to incorporate it into my web script. The website for it (and to download the script) is here.

I've been trying to integrate it with my existing script, but I'm not getting luck with the actual "navigation" part of it. The menu renders correctly, where all the styles look perfect, but when I go to click on any of the actual links, nothing happens. When hovering over the links, it displays the url at the bottom of Firefox, but it doesn't take me anywhere when clicked.

This is how the menu looks:
URL

Code:
/* These control the jQuery aspect of the menu */
<script type="text/javascript" src="../themes/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../themes/fg.menu.js"></script>

/* The CSS I wrote for the rest of my page/script */
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="../ie.css" />
<![endif]-->
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="../style.css" />
<!--<![endif]-->

/* The CSS for the jQuery flyout */
<link type="text/css" href="../themes/fg.menu.css" media="screen" rel="stylesheet" />
<link type="text/css" href="../themes/cupertino/ui.all.css" media="screen" rel="stylesheet" />

<!-- styles for this example page only -->
<style type="text/css">
body { font-size:62.5%; margin:0; padding:0; }
#menuLog { font-size:1.4em; margin:20px; }
.hidden { position:absolute; top:0; left:-9999px; width:1px; height:1px; overflow:hidden; }

.fg-button { clear:left; margin:0 4px 40px 20px; padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
.fg-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
a.fg-button { float:left;  }
button.fg-button { width:auto; overflow:visible; } /* removes extra button width in IE */

.fg-button-icon-left { padding-left: 2.1em; }
.fg-button-icon-right { padding-right: 2.1em; }
.fg-button-icon-left .ui-icon { right: auto; left: .2em; margin-left: 0; }
.fg-button-icon-right .ui-icon { left: auto; right: .2em; margin-left: 0; }
.fg-button-icon-solo { display:block; width:8px; text-indent: -9999px; }	 /* solo icon buttons must have block properties for the text-indent to work */	

.fg-button.ui-state-loading .ui-icon { background: url(../themes/spinner_bar.gif) no-repeat 0 0; }
</style>

<!-- style exceptions for IE 6 -->
<!--[if IE 6]>
<style type="text/css">
.fg-menu-ipod .fg-menu li { width: 95%; }
.fg-menu-ipod .ui-widget-content { border:0; }
</style>
<![endif]-->

/* This is for the links part of the menu */
<script type="text/javascript">
// Main Menu
$(function(){
   	// BUTTONS
   	$('.fg-button').hover(
   		function(){ $(this).removeClass('ui-state-default').addClass('ui-state-focus'); },
   		function(){ $(this).removeClass('ui-state-focus').addClass('ui-state-default'); }
   	);
	// FROM AN EXTERNAL SOURCE (for the main menu)
	$.get('../themes/maincontent.php', function(data){ // grab content from another page
		$('#flyout').menu({ content: data, flyOut: true });
	});
	// For the config menu (not default)
	$.get('../themes/configcontent.php', function(data){ // grab content from another page
		$('#flyout2').menu({ content: data, flyOut: true });
	});
	// For the members menu (not default)
	$.get('../themes/membercontent.php', function(data){ // grab content from another page
		$('#flyout3').menu({ content: data, flyOut: true });
	});
	// For the maintenance menu (not default)
	$.get('../themes/maintcontent.php', function(data){ // grab content from another page
		$('#flyout4').menu({ content: data, flyOut: true });
	});
});
</script>
</head>

/* For the display of the menu on the page */
<body>
<div class="adminbg"></div><div class="adminlogo"></div><div class="navbgleft2"></div><div class="navbg2"></div><div class="navbgright2"></div>
<div class="links2"><span class="links">You are logged in as: <span class="ygreen"><?php echo $session->username ?></span><br /><span class="copyright"><?php echo $vcpcopy ?></span></span></div>
<span class="main_b"><a tabindex="0" href="../themes/maincontent.php" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="flyout"><span class="ui-icon ui-icon-triangle-1-s"></span>Main</a></span>
<span class="config_b"><a tabindex="0" href="../themes/configcontent.php" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="flyout2"><span class="ui-icon ui-icon-triangle-1-s"></span>Configuration</a></span>
<span class="members_b"><a tabindex="0" href="../themes/membercontent.php" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="flyout3"><span class="ui-icon ui-icon-triangle-1-s"></span>Members</a></span>
<span class="maint_b"><a tabindex="0" href="../themes/maintcontent.php" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="flyout4"><span class="ui-icon ui-icon-triangle-1-s"></span>Maintenance</a></span>
<span class="home_b"><a tabindex="0" href="../index.php" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="flyout4"><span class="ui-icon ui-icon-triangle-1-s"></span>Return to Control Panel</a></span>


With the Javascript at the end of the head tag, that's supposed to control the links. The one that says "FROM AN EXTERNAL SOURCE" is the original one to the menu and should be "/themes/mainContent.php" but I changed the page to match the others that I manually added. Under the body tag, the < span class="main/config/members/maint/home _b"> was added by me to reposition all of them to the top with CSS so they aren't in an ugly vertical line.

Code:
<ul>
	<li><a href="../admin/index.php"><img src="../images/admin_center.png" alt="" style="border-style: none" /> &nbsp;Administration Center</a></li>
	<li><a href="../admin/credits.php"><img src="../images/news.png" alt="" style="border-style: none" /> &nbsp;Credits and Support</a></li>
	<li><a href="../admin/news.php"><img src="../images/email.png" alt="" style="border-style: none" /> &nbsp;News and Newsletters</a></li>
</ul>


That's the code from the maincontent.php page. The only thing I added here is the image tag to make it look better. With the little changes I've made, there hasn't been a difference; it's still not working. I've removed all the changes I made and stripped the code bare to see if that worked, but it hasn't. For the zip file of the flyout script, you can go here.

Thanks for the help in advance.

Reply With Quote
Old December 7th, 2009, 03:39 PM
angelcm angelcm is offline
Registered User
Codewalkers Newbie (0 - 499 posts)
 
Join Date: Dec 2009
Posts: 1 angelcm User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 8 m 47 sec
Reputation Power: 0
hi...

hi skyhintack...

I don't know speak and write in english very much, sorry...

I see you post and I have the same trouble... the solution is in the fg.menu.js in the line 247 you have than change this

before
$('#menuSelection').text($(item).text());
//location.href = $(item).attr('href');

now
//$('#menuSelection').text($(item).text());
location.href = $(item).attr('href');


atte: AnGeL

Reply With Quote
Reply

Viewing: Codewalkers ForumsOther TechnologiesClient Side Things > Javascript - JQuery flyout menu links not funtioning


Developer Shed Advertisers and Affiliates


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.

© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap