Jump to content
  • Advertisement
Sign in to follow this  
mattmeyer44129

local scripts and browsers

This topic is 2442 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Greetings, my first post here in years. Man this site has changed but anyway, Im getting into Web Development. I took a basic HTML and JavaScript class back in 2007 but never really did much with it otherwise.
Im back in School so I picked up Dreamweaver which is what Ill be doing my development in. So I poking around with the DOM and JavaScript to get some kind of navigation for a rudimentary site I put together.

Both using the DOM to alter the InnerHTML of divs or toggling the display style of divs worked fine in Dreamweaver but not on any of my browsers. Well actually the toggling method worked in IE but I get the window asking me to open the file which irritates me. Is there any way to turn that off in IE and what do you think is wrong with some of my Scripts that they'd not work in most of the browsers? [font="Arial"] Is there something about how the web Browsers handle scripts local to your machine?[/font]
[font="Arial"]
[/font]
[font="Arial"]for what its worth heres some code...[/font]
[font="Arial"]
[/font]
[font="Arial"]
[/font]
[font="Arial"]the toggle way...[/font]
[font="Arial"]
[/font]
[font="Arial"][/font]
[font="Arial"]function DoNavigationWelcome()
{
document.getElementById("WelcomeContent").style.display = "block";

if(CurrentContentId != "WelcomeContent")
document.getElementById(CurrentContentId).style.display = "none";


CurrentContentId = "WelcomeContent";
}[/font]
[font="Arial"]
[/font]
[font="Arial"]
[/font]
[font="Arial"]the assignment way...[/font]
[font="Arial"]
[/font]
[font="Arial"][html][/font]
[font="Arial"]function DoNavigationNews()
{
var newContent = document.getElementById("News").innerHTML;

var InnerContent = document.getElementById("InnerContent");
InnerContent.innerHTML = newContent;
}[/font]
[font="Arial"][/html]
[/font]
[font="Arial"]
[/font]

Share this post


Link to post
Share on other sites
Advertisement
thanks for the link, I had heard and seen some stuff about JQuery but had hoped to put off learning it a bit. I guess Ill get started. ApochPiQ there isnt much more other than some div tags given IDs. When I took the class in 2007 we didnt cover this stuff, hell we even used the frame tag and I heard its been depricated in Html 5.

Share this post


Link to post
Share on other sites
Yeah... my point is, if you post what you're actually working on, then someone can look at it and figure out why it doesn't work in some/all browsers.

Web development is a complete jungle of slightly different implementations of poorly followed standards. In some really pathologically common situations, it may be possible to divine the exact cause and solution for a given problem just by seeing a couple lines of JavaScript, but for the most part it takes more information than that to narrow down specific compatibility issues.

Share this post


Link to post
Share on other sites
Here it is.... Its got some formatting issues but thats not really what concerns me at this point. It would be good to know if this works in any one else's Chrome and Firefox Browsers because it could just be my script settings.

The Source............................................



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="Awesomness, Hotness" />
<meta name="Description" content="a learning test page Im constructing, just ignore it." />
<title>Learning Page </title>

<link rel="stylesheet" type="text/css" href="Style1.css" />

<script type="text/javascript" src="menuScript.js"></script>

</head>

<body >

<div id="Container">

<div id="Header">
<h1> Cheesy Header Logo Here </h1>
</div>

<div id="Navigation">
<ul id="Menu">
<li id="Welcome"> <a href="" onclick="DoNavigationWelcome()" >Welcome </a> </li>
<li> <a href="" onclick="DoNavigationThisWeek()">This Week </a> </li>
<li> <a href="" onclick="DoNavigationBios()">Bios </a> </li>
<li> <a href="" onclick="DoNavigationSwag()">Swag </a> </li>
<li> <a href="" onclick="DoNavigationContact()">Contact </a> </li>
</ul>

</div> <!-- end nav div -->

<div id="Content">
<div id= "InnerContent">
<!-- CONTENT -->
<div id="WelcomeContent" >
<p> Welcome Content </p>
</div>

<div class="Content" id="ThisWeek" >
<p> This Week Content </p>
</div>

<div class="Content" id="Bios" >
<p> Bios Content </p>
</div>

<div class="Content" id="Swag" >
<p> Swag Content </p>
</div>

<div class="Content" id="Contact" >
<p> Contact Content </p>
</div>


</div> <!-- end inner content -->

</div> <!-- end content -->

<div class="clear"> </div>

<div id="Footer">
<h4> bottom of page........ </h4>
</div>


</div> <!-- end container -->

</body>
</html>

The Script..............................................................................................



// JavaScript Document
var CurrentContentId = "WelcomeContent";

function DoNavigationWelcome()
{
document.getElementById("WelcomeContent").style.display = "block";

if(CurrentContentId != "WelcomeContent")
document.getElementById(CurrentContentId).style.display = "none";


CurrentContentId = "WelcomeContent";
}

function DoNavigationThisWeek()
{
document.getElementById("ThisWeek").style.display = "block";

if(CurrentContentId != "ThisWeek")
document.getElementById(CurrentContentId).style.display = "none";

CurrentContentId = "ThisWeek";

}

function DoNavigationBios()
{
document.getElementById("Bios").style.display = "block";

if(CurrentContentId != "Bios")
document.getElementById(CurrentContentId).style.display = "none";

CurrentContentId = "Bios";

}

function DoNavigationSwag()
{
document.getElementById("Swag").style.display = "block";

if(CurrentContentId != "Swag")
document.getElementById(CurrentContentId).style.display = "none";

CurrentContentId = "Swag";

}

function DoNavigationContact()
{
document.getElementById("Contact").style.display = "block";

if(CurrentContentId != "Contact")
document.getElementById(CurrentContentId).style.display = "none";

CurrentContentId = "Contact";

}

The CSS....................................................



@charset "utf-8";
/* CSS Document */

body {
margin: 0;
padding: 0;
}

h1, h2, h3, h4 {text-align:center;}

#Container {
width: 100%;
max-width: 1260px;
float: none;
margin: 0;
padding: 0;
background-color:#393;
}

#Header {
background-color: #C93;
height: 30%;
padding: 0;
}

#Navigation {
background-color:#393;
width: 20%;
float:left;
}

#Content {
background-color:#393;
width: 80%;
float:left;
padding: 0;

}
#InnerContent {width: 80%; float:left; padding: 0; background-color:#3F3;}


#Menu {
padding:0;
margin:0;
}

#Menu li{ list-style-type:none; }
#Menu a{text-decoration:none }

p { text-indent: 1em; margin: 5px; text-wrap:normal}

#Footer {background-color: #969;
padding: 0;
position: relative;
clear:both;
}

.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}

.Content {display: none;}

Share this post


Link to post
Share on other sites

Here it is.... Its got some formatting issues but thats not really what concerns me at this point. It would be good to know if this works in any one else's Chrome and Firefox Browsers because it could just be my script settings.



'<a href="">' loads a new page.

So each time you click a link, the current element is changed, then the page is reloaded.

To make a dummy link, put href='#', to indicate section on same page.


But this type of navigation is generally avoided since it breaks or hinders search engines and also breaks back/forward button.

Instead, make one page for each content, use hrefs for actual navigation. Alternatively, don't use 'a' tag. Again, very bad practice.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!