Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cant find the reason in the code, any ideas?

    Greetings gurus and I hope everyone is having a great day. I have been thrown back into web design agian and I am very rusty and my skills where lame when I used them and they are laughable now days it seems. I understand the basics and how and why things work but I am currrently stuck on a problem that I am not sure what is causing it.

    Ok so the problem is when I mouse over the left nav menu all is great, when I mouse over the newly created DHTML menu in the middle the seperators(black before mouse over of the DHTML menu) disapear on the left nav menu and there is now white space surrounding the buttons on the left nave menu. IF you switch to full screen mode(F11 I think) I can see the actual graphic on the left nav menu changing and that is what is causing this, but I cant find it in the code.

    I have narrowed it down to my framework.js script but no idea where it is within this code. I can post that code in here and maybe you can see what I mean and I will attach a screen shot of the problem, or try to. If none of this helps let me know what I can post in order to help sort this out, thank you all.

    Code:
    // JavaScript Document
    //var baseStr = "local is here";
    var baseStr = "web base address here";
    
    var collageNum = 1;
    var fullScreen2 = "FALSE";
    var agencyBtnNames = new Array(5);
    var rollNum = new Array(17, 21, 25, 29, 33);
    
     MakeNames();
    
    if (fullScreen2 == "FALSE")
    {
    	document.write(" <div id=\"top\" > ");
    }
    else
    {
    	document.write(" <div id=\"top\" style=\"left: 0\" > ");	
    }
    	document.write(" <div id=\"top-top\" > ");
    		document.write("<a href=\"" + baseStr + "index.html\" onmouseout=\"display(" + rollNum[0] + ", homeBtn);\" onmouseover=\"display(" + (rollNum[0] + 1) + ", homeBtn);\" >");
    		document.write(" <img class=\"topNavBtns\" id=\"homeBtn\" src=\"" + baseStr + "images/" + agencyBtnNames[0] + "\" alt=\"Home\" name=\"Division Link\" width=\"65px\" height=\"28px\" /></a> ");  		
    		
    		document.write("<a href=\"" + baseStr + "history/index.html\" onmouseout=\"display(" + rollNum[1] + ", archivesBtn);\" onmouseover=\"display(" + (rollNum[1] + 1) + ", archivesBtn);\" >");
    		document.write(" <img class=\"topNavBtns\" id=\"archivesBtn\" src=\"" + baseStr + "images/" + agencyBtnNames[1] + "\" alt=\"Archives &amp; History\"  name=\"Archives Link\" width=\"185px\" height=\"28px\"/></a> ");
    		
    		document.write("<a href=\"" + baseStr + "arts/index.html\"  onmouseout=\"display(" + rollNum[2] + ", artsBtn);\" onmouseover=\"display(" + (rollNum[2] + 1)  + ", artsBtn);\" >");
    		document.write(" <img class=\"topNavBtns\" id=\"artsBtn\" src=\"" + baseStr + "images/" + agencyBtnNames[2] + "\" alt=\"Arts\" name=\"Arts Link\" width=\"67px\" height=\"28px\"/></a> ");
    
    		document.write("<a href=\"" + baseStr + "shpo/index.html\"  onmouseout=\"display(" + rollNum[3] + ", histPresBtn);\" onmouseover=\"display(" + (rollNum[3] + 1) + ", histPresBtn);\" >");
    		document.write(" <img class=\"topNavBtns\" id=\"histPresBtn\" src=\"" + baseStr + "images/" + agencyBtnNames[3] + "\" alt=\"Historic Preservation\" width=\"189px\" height=\"28px\" name=\"HP Link\" /></a> ");
    
    		document.write("<a href=\"" + baseStr + "museum/index.html\" onmouseout=\"display(" + rollNum[4] + ", museumBtn);\" onmouseover=\"display(" + (rollNum[4] + 1) + ", museumBtn);\" >");
    		document.write(" <img class=\"topNavBtns\" id=\"museumBtn\" src=\"" + baseStr + "images/" + agencyBtnNames[4] + "\" alt=\"Museums\" name=\"Museum Link\" width=\"84px\" height=\"28px\" /></a> ");
    
    	document.write(" </div> ");
    	document.write(" <div id=\"top-mid\" > ");
    		document.write(" <img src=\"" + baseStr + "images/banner_title.GIF\" alt=\"West Virginia Division of Culture and History\" name=\"\" width=\"590\" height=\"50\"> ");
    	document.write(" </div> ");
    	
    	document.write(" <div id=\"top-bottom\" >  ");	
    		document.write(" <img class=\"collagepix\" src=\"" + baseStr + "images/collageimage_" + collageNum + ".jpg\" alt=\"Collage Image\" name=\"Collage Image\" height=\"70\"> ");
    	document.write(" </div> ");
    document.write(" </div> ");
    
    if (fullScreen2 == "FALSE")
    {
    document.write(" <div id=\"nav\"> ");
    
    	document.write("  <div id=\"PopupDiv\"></div>");
    	document.write("  <iframe id=\"DivShim\"></iframe>");
    
    	document.write(" <div id=\"mainLogo\" class=\"submenu\" > ");
    		document.write(" <img src=\"" + baseStr + "images/logo.gif\" alt=\"Main Logo\" name=\"logo\" /></a>");
    	document.write(" </div> ");
    
    	document.write(" <div id=\"eventsItem\" class=\"submenu\"> ");
    		document.write("<a href=\"" + baseStr + "events.aspx\" onmouseout=\"timer(0,'events');\"onmouseover=\"activateMenu(1,'events',170,0);display(2,events);timer(1, 'none');\">" );
    		document.write(" <img src=\"" + baseStr + "images/1_events.gif\" alt=\"Events Page\" name=\"events\" /></a>");
    	document.write(" </div> ");
    	
    	document.write(" <div id=\"educationItem\" class=\"submenu\"> ");
    		document.write("<a href=\"" + baseStr + "education.html\" onmouseout=\"timer(0,'education');\"onmouseover=\"activateMenu(2,'education',173,0);display(4,education);timer(1);\">" );
    		document.write(" <img src=\"" + baseStr + "images/2_education.gif\" alt=\"Education Page\" name=\"education\"/></a>");
    	document.write(" </div> ");
    
    	document.write(" <div id=\"exhibitsItem\" class=\"submenu\"> ");
    		document.write("<a href=\"" + baseStr + "exhibits.html\" onmouseout=\"timer(0,'exhibits');\"onmouseover=\"activateMenu(3,'exhibits',173,0);display(6,exhibits);timer(1);\">" );
    		document.write(" <img src=\"" + baseStr + "images/3_exhibits.gif\" alt=\"Exhibits Page\" name=\"exhibits\" /></a>");
    	document.write(" </div> ");
    
    	document.write(" <div id=\"grantsItem\" class=\"submenu\"> ");
    		document.write("<a href=\"" + baseStr + "grants.html\" onmouseout=\"timer(0,'grants');\"onmouseover=\"activateMenu(4,'grants',173,0);display(8,grants);timer(1);\">" );
    		document.write(" <img src=\"" + baseStr + "images/4_grants.gif\" alt=\"Grants Page\" name=\"grants\" /></a>");
    	document.write(" </div> ");
    
    	document.write(" <div id=\"productsandpublicationsItem\" class=\"submenu\"> ");
    		document.write("<a href=\"" + baseStr + "p_and_p.html\" onmouseout=\"timer(0,'pandp');\"onmouseover=\"activateMenu(5,'pandp',173,0);display(10,pandp);timer(1);\">" );
    		document.write(" <img src=\"" + baseStr + "images/5_p_and_p.gif\" alt=\"Products and Publications Page\" name=\"pandp\" /></a>");
    	document.write(" </div> ");
    
    	document.write(" <div id=\"theagencyItem\" class=\"submenu\"> ");
    		document.write("<a href=\"" + baseStr + "agency/index.html\" onmouseout=\"timer(0,'agency_btn');\"onmouseover=\"activateMenu(6,'agency_btn',173,0);display(12,agency_btn);timer(1);\">" );
    		document.write(" <img src=\"" + baseStr + "images/6_agency.gif\" alt=\"The Agency Page\" name=\"agency_btn\" /></a>");
    	document.write(" </div> ");
    	
    	document.write(" <div id=\"technicalassistanceItem\" class=\"submenu\"> ");
    		document.write("<a href=\"" + baseStr + "tech_assist.html\" onmouseout=\"timer(0,'techassist');\"onmouseover=\"activateMenu(7,'techassist',173,0);display(14,techassist);timer(1);\">" );
    		document.write(" <img src=\"" + baseStr + "images/7_tech_assist.gif\" alt=\"Technical Assistance Page\" name=\"techassist\" /></a>");
    	document.write(" </div> ");
    	
    	document.write(" <div id=\"whereareweItem\" class=\"submenu\"> ");
    		document.write("<a href=\"" + baseStr + "sites/where_we_are.html\" onmouseout=\"timer(0,'wherearewe');\"onmouseover=\"activateMenu(8,'wherearewe',173,0);display(16,wherearewe);timer(1);\">" );
    		document.write(" <img src=\"" + baseStr + "images/8_where_are_we.gif\" alt=\"Where We Are Page\" name=\"wherearewe\" /></a>");
    	document.write(" </div> ");
    
    	document.write(" <div id=\"pic\">");
    
    	document.write(" <div id=\"seal\"> <a href=\"http://www.wv.gov\" target=\"_blank\"> <img src=\"" + baseStr + "images/stateseal.gif\" alt=\"State Home Page\">");
    	document.write(" </a></div> ");
    
    document.write(" <div id=\"search\" style=\"position:relative\"><form method=get action=\"" + baseStr + "search.aspx\"> ");
    		document.write(" &nbsp;&nbsp;&nbsp;&nbsp;<input style=\"z-index: 102; width: 135px\" value=\"Search Here...\" onClick=\"if (this.value == 'Search Here...') {this.value=''}\" type=\"text\" name=\"Terms\"> ");
    		document.write(" <br /><br /> ");
    		document.write(" &nbsp;&nbsp;&nbsp;&nbsp;<select name=\"Area\" style=\"width: 140px\"><option selected=\"selected\">Entire Site</option><option>Arts</option><option value=\"history\">Archives &amp; History</option><option value=\"goldenseal\">Goldenseal</option><option value=\"shpo\">Historic Preservation</option><option value=\"Museum\">Museums</option></select> ");
    		document.write(" <br /><br /> ");
    		document.write(" &nbsp;&nbsp;&nbsp;&nbsp;<input type=\"submit\" value=\"Search\" onclick=> ");
    		document.write(" </form></div> ");
    
    document.write(" <div id=\"email\"> ");
    	document.write(" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;COMMENTS OR QUESTIONS &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ABOUT OUR SITE?<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href=\"" + baseStr + "agency/webmaster.html\" style=\"color:#FFFFFF\">EMAIL OUR WEBMASTER</a>");
    document.write(" </div> ");
    document.write(" </div> ");
    document.write(" </div> ");
    document.write(" </div> ");
    }
    
    // Create image names for pictures to display
    function MakeNames()
    {
    	var thisURL = "";
    	var found = false;
    	var pos1 = 0;
    	var pos2 = 0;
    	var i=0;
    	
    	// default to the non-highlighted buttons
    	agencyBtnNames[0] = "HomeBtn.GIF";
    	agencyBtnNames[1] = "ArchivesBtn.GIF";
    	agencyBtnNames[2] = "ArtsBtn.GIF";
    	agencyBtnNames[3] = "HistPresBtn.GIF";
    	agencyBtnNames[4] = "MuseumBtn2.gif";
    	
    	thisURL = document.URL.toLowerCase();
    	randomUnique();
    	
    	// See if this is the Home page
    	pos1 = thisURL.indexOf("/index.aspx");
    	pos2 = thisURL.indexOf("\\index.aspx");
    
    	if ((pos1 != -1 || pos2 != -1) || ((thisURL.length - baseStr.length) < 4))
    	{
    		agencyBtnNames[0] = "HomeBtnHL.gif";
    		rollNum[0] = rollNum[0] + 2;
    	}
    	
    	// Look for history
    	pos1 = thisURL.indexOf("/history/");
    	pos2 = thisURL.indexOf("\\history\\");
    
    	if (!found && (pos1 != -1 || pos2 != -1))
    	{
    		found = true;
    		agencyBtnNames[1] = "ArchivesBtnHL.GIF";
    		rollNum[1] = rollNum[1] + 2;
    		
    		pos1 = thisURL.indexOf(".aspx");
    		
    		if (pos1 == -1)
    		{
    			fullScreen2 = "TRUE";
    		}
    	}
    
    	// Look for wvmemory
    	pos1 = thisURL.indexOf("/wvmemory/");
    	pos2 = thisURL.indexOf("\\wvmemory\\");
    
    	if (pos1 != -1 || pos2 != -1)
    	{
    		fullScreen2 = "TRUE";	
    	}
    	
    	// Look for arts
    	pos1 = thisURL.indexOf("/arts/");
    	pos2 = thisURL.indexOf("\\arts\\");
    
    	if (pos1 != -1 || pos2 != -1)
    	{
    		found = true;
    		agencyBtnNames[2] = "ArtsBtnHL.GIF";
    		rollNum[2] = rollNum[2] + 2;		
    	}
    
    	// Look for shpo
    	pos1 = thisURL.indexOf("/shpo/");
    	pos2 = thisURL.indexOf("\\shpo\\");
    
    	if (!found && (pos1 != -1 || pos2 != -1))
    	{
    		found = true;
    		agencyBtnNames[3] = "HistPresBtnHL.GIF";
    		rollNum[3] = rollNum[3] + 2;		
    	}
    
    	// Look for museum
    	pos1 = thisURL.indexOf("/museum/");
    	pos2 = thisURL.indexOf("\\museum\\");
    
    	if (!found && (pos1 != -1 || pos2 != -1))
    	{
    		found = true;
    		agencyBtnNames[4] = "MuseumBtn2HL.gif";
    		rollNum[4] = rollNum[4] + 2;		
    	}
    
    	if (navigator.appName.indexOf("WebTV") != -1)
    	{
    		fullScreen2 = "TRUE";
    	}
    
    }
    
    // Creates 4 unique random numbers 1-8 (number of images for each agency)
    function randomUnique()
    {
    	var NumCollages = 5;
    	collageNum = Math.floor((Math.random() * NumCollages) + 1);
    }

    http://i3.photobucket.com/albums/y88...r/mouseout.jpg


    http://i3.photobucket.com/albums/y88.../mouseover.gif

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Why do you need to generate your html markup for your menu using javascript? Can't you simply add an unordered list with required attributes and then style it using CSS?

    Take a look at a good 3 column layout at http://bonrouge.com/3c-hf-fluid.php
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for the link Abduraooft, lots of nice code over there. I guess the real reason is it has been driving me nuts trying to work with this current layout and after trying everything I knew of to fix it I realized I really wanted to know why it was doing what it is doing.

    I really dont want to have to redo all of the other pages right now so I was trying to be as minimal as possible in order to put in the bar they wanted in just this section of the website. When I have to redo the entire site I will probably go with a similar column layout but for now I am just trying to work with the exisitng code until we decide about a total change over to something else. The more I look, the more interested I become, I must be getting sick or something.

    Thanks again to any who may see something standing out and thank you again Abduraooft, every thing helps me.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •