PDA

View Full Version : Chrome CSS Drop Down Menu - Incompatible with hash navigation?



InsanitysMuse
11-07-2012, 08:00 PM
1) Script Title: Chrome CSS Drop Down Menu (v2.5)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm

3) Describe problem: First of all, the Chrome DDM is fantastic, I love how easy it was to implement and customize for the website I'm working on. The trouble I'm running into is this: I wanted to implement a simple dynamic content loader using hash tags and all the to reduce to load on the site and also make navigation more fluid. However, any link within a drop down menu inside this script appears to be treated as a normal link, instead of being grabbed by the content loader script.

This is my simple script, based on this tutorial (http://css-tricks.com/video-screencasts/85-best-practices-dynamic-content/) from css-tricks.com (credit where credit is due). In the chrome.js file it says
All event handlers added to the menu are now unobstrusive, allowing you to define your own "onmouseover" or "onclick" events on the menu items which is why I figured that I should be able to get the two scripts working together. Note: the content loading script works fine on links in the navbar that AREN'T in a drop down menu, but are still under the chromestyle div.


$(function() {

var newHash = "",
$mainContent = $("#maincontent"),
$mainWrap = $("#mainwrapper"),
baseHeight = 0,
$el;

$mainWrap.height($mainWrap.height());
baseHeight = $mainWrap.height() - $mainContent.height();

$("#navbar").delegate("a", "click", function() {
window.location.hash = $(this).attr("href");
return false;
});
// Next few lines were my attempt to force this script to see the chrome menu links
$("#dropmenudiv").delegate("a", "click", function() {
window.location.hash = $(this).attr("href");
return false;
});


$(window).bind('hashchange', function(){

newHash = window.location.hash.substring(1);

if (newHash) {
$mainContent
.find("#content")
.fadeOut(400, function() {
$mainContent.hide().load(newHash + " #content", function() {
$mainContent.fadeIn(400, function() {
$mainWrap.animate({
height: baseHeight + $mainContent.height() + "px"
});
});
$("navbar a").removeClass("current");
$("navbar a[href="+newHash+"]").addClass("current");
});
});
};

});

$(window).trigger('hashchange');

});