2 Level Navigation Not Displaying On IE
Mar 18, 2011IE shows loads the page with errors in the script. It says:
'guid' is NULL or not an object
IE shows loads the page with errors in the script. It says:
'guid' is NULL or not an object
I have implemented Superfish in SAP Portal. there is a small issue when I take a print using the browser's print option. When I try printing the Web Page from the browser, the Top Level Navigation Menu appears as a list of links (vertical). This is happening in both IE as well as Firefox.
I have seen the same issue in the website from where I downloaded Superfish :-|
1. Goto: [URL]
2. Click on 'Print Preview' button in your Browser.
3. The Superfish Menu below the text 'The result:' will appear as a list of links in the print preview.
I'm ok with the basics of html and css, but and fairly new to it, so have been stumped by this latest problem. I built a site [URL] about a year ago, and am fairly sure that it worked perfectly in all browsers at the time. However, I've just checked it and have noticed that the last option on the navigation bar at the top ('noticeboard') seems to have disappeared in IE. It's still displaying perfectly in Firefox and Chrome however.
The html for that section is:
<div style="top: 0px; left: 0px" id="header">
<div style="text-align: center; top: 34px; right: 75px" id="menu">
<ul id="navigation">
<li class="active"><a href="index.htm"><span>HOME</span></a></li>
<li><a href="callington_LFC_fixtures.htm"><span>FIXTURES</span></a></li>
<li><a href="callington_LFC_reports.htm"><span>REPORTS</span></a></li>
<li><a href="callington_LFC_photos.htm"><span>PHOTOS</span></a></li>
<li><a href="callington_LFC_players.htm"><span>PLAYERS</span></a></li>
<li><a href="callington_LFC_contact.htm"><span>CONTACT</span></a></li>
<li><a href="callington_LFC_noticeboard.htm"><span>NOTICE BOARD</span></a></li>
</ul></div></div>
If you visit the site in different browsers you'll see what I mean. This time it's working fine in IE, but not in Firefox or Chrome (I feel like tearing my hair out!). The problem is with the very bottom section on the page. The alignment is all out. The html reads:
<div><img alt="" src="images/right_bottom.png" /></div></div><br clear="all" />
<center><img style="width: 552px" alt="" vspace="3" width="552" src="images/hr.gif" /></center></div></div>
<div id="footer"><a href="callington_LFC_contact.htm">Contact</a>|<a href="index.htm">Home</a>| <a href="callington_LFC_links.htm">Links</a>|<a href="callington_LFC_map.htm">Map</a>|<a href="callington_LFC_sitemap.htm">Sitemap</a> </div></div>
<div id="bottom"><br /> .....
I am trying to make a drop down menu in JQuery and I have hit a roadblock. I have been trying for hours to work this out myself but I'm coming up with nothing. The problem is that my dropdown items are displaying horizontally instead of vertically, here is the code:
HTML Code:
<nav class="ribbon">
<ul>
<li class="dropdown">
<a href="#" class="nav"><h1>Home</h1></a>
<ul>
<li><a href="#"><h2>Page 1</h2></a></li>
</ul>
</li> .....
I am trying to turn a single level flyout menu into a multi level one.
It uses a dt for the title, and a ul within the dd for the menu items. The dd opens to the right of the dt.
The problem is that the second level menu (a dl within an li within another dl) [URL] - flyout4 & subflyout5.
The z-index is increased each time. I just can't figure why the area is limited.
javascript, css & html follow -
Code JavaScript:
/** FLYOUT = vertical dropdown **/
var Flyout = {
DDSPEED:10,
[Code].....
I'm trying to implement a minimal navigation bar using jQuery's toggleClass() function but can't seem to get it working.
It's the .img_selector div at the bottom of the page:[url]
I want to toggle the 'active' class for each <a> when it's selected, to indicate which image is showing, so after calling jQuery, in the <head> I've got:
Then the links, which also include the showPic function:
I am not terribly familiar with Javascript but i am looking forward to learning, and currently the problem I am facing is this:I have an a file being included to an .shtml document, that serves as my navigation, the code is like this:
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Home</a>
<ul>
[code]....
I want to create an own horizontal navigation and so the navigation is a nested list like
<ul id="mymenu">
<li>entry1
<ul class="abc">
[code]....
<div>
</div><div>I did some navigation menu and sub menu using jquery ,</div><div>
</div><div>like ;</div><div>
</div><div>Menu1 </div><div> Sub menu1(some.php)</div><div> Sub menu2(some1.php)</div><div>
[Code]..
Ive been working on a site with a dropdown menu. its styled with css and animated with java i would like to add support for keyboard navigation.
var DDSPEED = 5;
var DDTIMER = 5;
main function to handle the mouse events [code].....
Im having trouble trying to access some values of the response from an API service. My code to connect and output for each item is working Ok getting the name and age. But I can't work out how to get the image urls.Clutching at straws I thought I could just target the first value stored using $imageURL = item.images['url'][0] but that fails.
Code:
$.getJSON("http://api-address", function(data) {
var html = '';
[code]....
If I wanted just the first level of ancestors inside a div what selector would I use?
<div>get me</div>
<div>get me</div>
<div>get me<div>don't get me</div></div>
<div>get me</div>
At certain times I need to prevent the user from clicking on elements in a div. I've tried giving the div an onclick that simply returns false, but the clicks still get through. In the simplified code below, the onclick is hardwired, but in real life it would be assigned dynamically. In this example, when I click the link to Google, I get the "yo" alert, but the Google page still loads. If it were just one link, I could disable it directly. But I'll be dealing with pages with lots of links on them. How do I do this??
[Code]...
3-level dropdown box: [URL]. Now in this dropdown menu if you select:
Category > Cars
Sub category Cars for Sale
Sub Sub Category Ibiza
What I want to do is two things:
1)Place a value on all the Sub Sub Category(ies) so for example the value of Ibiza I want to = 55
2)Then Grab that value? How would I get that value and grab it from POST?
I would like to use the menu that is linked below. I implemented it on my website but I discovered that it can only go 2 levels deep. I would like it to go one more level and I think that would be done in the javascript but I can't tell for sure. Could someone steer me in the right direction? [URL]
View 2 Replies View RelatedLike in the topic: I was wondering if you know a way to do it nice and clean.
View 3 Replies View RelatedCan someone direct me to a 3 level menu with the top level being images....
View 4 Replies View RelatedI've got a document that I want to ensure always get loaded into the
top level document and not into a frame or iframe. I've got it figured
out how to detect if the document is loaded into a frame. But what I
want to happen is the HTML content in the iframe to be displayed in the
top level document w/o a return trip to the server.
Here's what I'm thinking:
function forceTopLevelDocument() {
if (top != self) {
//load the HTML from child document into parent document
//without a return trip back to the server
}
}
What I can't figure out is how to take the document loaded into a child
frame and push it's contents up into a parent frame.
I have been searching around to see if it is possible to have a 5 level jQuery Cascading dropdown, so far I have 3 levels working but 4 and 5 will not.I have searched around and all I have found are only 3 level jQuery Cascading dropdown.
View 2 Replies View Relatedi want to collapse all level at load in this site : [URL]
View 1 Replies View RelatedI'm grabbing an XML file with jQuery like this:
$
document
.ready
[code]....
I want to use this menu but i have so many main items that there are 2 rows. The first row is always on top. How can i get the second level menu to be on top of the fisrt item menu-item1 menu-item2 menu-item3 menu-item4 menu-item5 menu-item6 menu-item7 menu-item8 menu-item9
View 2 Replies View RelatedGiven the following markup
<div id="menu">
<ul>
<li><a id="home" href="#">Home</a></li>
<li>
<a id="about" href="#">About</a>
<div>
About sub menu
</div></li><li>
<a id="products" href="#">Products</a>
<div><h2>Books</h2>
<ul><li>ColdFusion</li>
<li>jQuery</li>
<li>CSS</li>
<li>HTML</li>
<li>Groovy</li>
<li>Hibernate</li> .....
How can I grab only the 1st level children of my node? I want direct decendents of menu only. My code below is grabbing all <li> which is going to be a problem.
(function($){
$.fn.extend({
myplugin: function(options){
return this.each(function(){
// the object we are working with
var obj = $(this);
// get a list of menu items
var menuItems = $('li',obj);
});
}});
})(jQuery);
Am having a fiddle with the following for a while now and am not getting anywhere - also not knowing if what i am trying is actually the best / fastest way... What i have is the following menu
<ul>
<li>Test</li>
<li>Test
[code].....
Here is a list of block-level elements: [URL]. What is the best way to detect these using JavaScript?
View 5 Replies View RelatedTested in IE6 and Firefox. Hover on main menu items, sub-items are displayed. Main menu items are not required to have sub items.
MenuTree.xml
<?xml version="1.0" ?>
<menu>
<main>
<text>First</text>
<sub>
<text>Anything</text>
<link>links/anything.html</link>
</sub>
<sub>
<text>Everything</text>
<link>links/everything.html</link>
</sub>
<sub>
<text>Nothing</text>
<link>links/nothing.html</link>
</sub>
</main>
<main>
<text>Second</text>
<link>links/apples.html</link>
</main>
<main>
<text>Third</text>
<sub>
<text>Something</text>
<link>links/something.html</link>
</sub>
</main>
<main>
<text>Fourth</text>
<link>links/oranges.html</link>
</main>
</menu>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
var response = "";
var nContainer = "";
var mainItemsText = [];
var mainItemsLink = [];
var subItemsText = [];
var subItemsLink = [];
var mainItemsWithSubs = [];
var IE = true;
if (navigator.appName != "Microsoft Internet Explorer"){IE = false}
function hideSubs(nMain){
var nSubs = nMain.getElementsByTagName('dd');
for (i=0; i<nSubs.length; i++)
{
nSubs[i].style.display = 'none'
}
}
function showSubs(nMain){
var nSubs = nMain.getElementsByTagName('dd');
for (i=0; i<nSubs.length; i++)
{
nSubs[i].style.display = ''
}
}
function setHoverDisplay(){
if (IE)
{
for (i=0; i<mainItemsWithSubs.length; i++)
{
for (n=0; n<subItemsText[i].length; n++)
{
nContainer.childNodes[mainItemsWithSubs[i]].childNodes[n+1].style.display = 'none'
nContainer.childNodes[mainItemsWithSubs[i]].onmouseover = function(){showSubs(this)}
nContainer.childNodes[mainItemsWithSubs[i]].onmouseout = function(){hideSubs(this)}
}
}
}
else {
for (i=0; i<mainItemsWithSubs.length; i++)
{
for (n=0; n<subItemsText[i].length; n++)
{
nContainer.childNodes[mainItemsWithSubs[i]+1].childNodes[n+1].style.display = 'none'
nContainer.childNodes[mainItemsWithSubs[i]+1].onmouseover = function(){showSubs(this)}
nContainer.childNodes[mainItemsWithSubs[i]+1].onmouseout = function(){hideSubs(this)}
}
}
}
}
function buildMenu(){
nContainer = document.getElementById('menuContainer');
mainItemsWithSubs = [];
var n = 0;
for (i=0; i<mainItemsText.length; i++)
{
var nItem = document.createElement('dt');
var nLink = document.createElement('a');
nItem.appendChild(nLink);
nLink.appendChild(document.createTextNode(mainItemsText[i]));
if (mainItemsLink[i] != undefined)
{
nLink.setAttribute('href',mainItemsLink[i]);
}
else{
nLink.setAttribute('href',"#");
nLink.onclick = function(){return false;}
mainItemsWithSubs[n++] = i;
}
nContainer.appendChild(nItem);
}
for (i=0; i<mainItemsWithSubs.length; i++)
{
for (s=0; s<subItemsText[i].length; s++)
{
nItem = document.createElement('dd');
nLink = document.createElement('a');
nItem.appendChild(nLink);
nLink.appendChild(document.createTextNode(subItemsText[i][s]));
nLink.setAttribute('href',subItemsLink[i][s]);
if (IE){nContainer.childNodes[mainItemsWithSubs[i]].appendChild(nItem)}
else {nContainer.childNodes[mainItemsWithSubs[i]+1].appendChild(nItem)}
}
}
setHoverDisplay();
}
function parseResponse(){
var n = 0;
var s = 0;
var mainItems = response.getElementsByTagName('main');
if (IE)
{
for (i=0; i<mainItems.length; i++)
{
mainItemsText[n] = mainItems[i].firstChild.text;
if (mainItems[i].childNodes[1].nodeName == "link")
{
mainItemsLink[n] = mainItems[i].childNodes[1].text;
}
n++;
}
}
else {
for (i=0; i<mainItems.length; i++)
{
mainItemsText[n] = mainItems[i].childNodes[1].firstChild.data;
if (mainItems[i].childNodes[3].nodeName == "link")
{
mainItemsLink[n] = mainItems[i].childNodes[3].firstChild.data;
}
n++;
}
}
for (i=0; i<mainItems.length; i++)
{
if (IE && mainItems[i].childNodes[1].nodeName == "sub")
{
subItemsText[s] = [];
subItemsLink[s] = [];
for (n=0; n<mainItems[i].getElementsByTagName('sub').length; n++)
{
subItemsText[s][n] = mainItems[i].childNodes[n+1].childNodes[0].text;
subItemsLink[s][n] = mainItems[i].childNodes[n+1].childNodes[1].text;
}
s++;
}
if (!IE && mainItems[i].childNodes[3].nodeName == "sub")
{
subItemsText[s] = [];
subItemsLink[s] = [];
var subs = mainItems[i].getElementsByTagName('sub');
for (n=0; n<subs.length; n++)
{
subItemsText[s][n] = subs[n].childNodes[1].firstChild.data;
subItemsLink[s][n] = subs[n].childNodes[3].firstChild.data;
}
s++;
}
}
buildMenu();
}
function getMenuTree(){
var request = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
request.onreadystatechange = function()
{
if (request.readyState == 4)
{
if (request.status == 200)
{
response = request.responseXML;
parseResponse();
}
else {alert('Error MenuTree.xml '+ request.statusText)}
}
}
var forceGET = "?n="+ parseInt(Math.random()*999999999);
request.open("GET", "MenuTree.xml"+forceGET, true);
request.send(null);
}
onload=getMenuTree;
</script>
<style type="text/css">
dt {background-color:#b0c4de;text-indent:5px}
dd {background-color:#87ceeb}
a {color:#00008b}
</style>
</head>
<body>
<div id='menuContainer' style='border:1px solid black;background-color:#afeeee;height:200px;width:150px;font-size:12pt;padding:5px;overflow:auto;font-family:arial;font-weight:bold;line-height:140%'>
</div>
</body>
</html>