Jump to content

a (hopefully) simple error


cmuluna

Recommended Posts

Here are the links for this post: Prototype pageJavascript for prototype page This portfolio site that I'm making will consist of many pieces of artwork thatJess Brilli has created. We want to change the color on the navigation in thetop and left sides in order to reflect where the user is in the hierarchy.Thus, if you clicked on "stereovision" and then on "5," both "stereovision" and"5" would become darker. (See halpernphotography.com as an example). I triedwriting a switch statement and giving the page an id number. Unfortunately, though, nothing isworking right now. This is my first solo attempt at Javascript or HTML DOM, soI'm assuming that I'm just making stupid syntactical errors, or that I am justignorant of both of these concepts. Either way, can you offer suggestions onhow to get this to work? Eventually, I'm envisioning 30 or so switch statements(however many pages we end up with) to control which parts of the nav getsdarker. But for now, if I can get this one page to work, that would be great.Then I can just copy and paste, more or less.Thanks!

Link to comment
Share on other sites

It look like on there that they've just literally done it per page.. so colored the "3" black when you're on page 3, etc.It really depends how you're writing your page. Will you be having a separate HTML page per number, or will it be done in PHP?If it's just HTML, you could do something like:var currentPage = 0if(location.href.match(/brilli\/(\d+).html/) != null){ currentPage = RegExp.$1}in Javascript, which would look for pages like brilli/01.html and brilli/45.html, and then color from there.

Link to comment
Share on other sites

Blue,Thanks for your reply! Yes, I am planning on using HTML and not PHP. I understand, in theory, what that code means. However, what would I write after that code in order to color the text that I want to color? I have an extremely elementary level understanding of Javascript and HTML DOM.Thanks for the help! I appreciate it.

It look like on there that they've just literally done it per page.. so colored the "3" black when you're on page 3, etc.It really depends how you're writing your page.  Will you be having a separate HTML page per number, or will it be done in PHP?If it's just HTML, you could do something like:var currentPage = 0if(location.href.match(/brilli\/(\d+).html/) != null){  currentPage = RegExp.$1}in Javascript, which would look for pages like brilli/01.html and brilli/45.html, and then color from there.

Link to comment
Share on other sites

too bad you dont want to use PHP, because it'd be easier. But to answer your question you can change the styles of your page with something like:document.getElementById('myIdName').style.color="black";so you'd give each number it's own id, probably corresponding to the number ex:<a id="05" href="05.htm">05</a>and in java script:document.getElementById('05').style.color="black";and I'm not totally sure, but you might need to use the onLoad event in the body tag to make it work properly... ex:<body onLoad="ChangeColorFunction();">but then again you might not need that...EDIT:I also just wanted to mention that PHP is not a replacement for HTML, it works side-by-side with it like javascript. Just mentioning this because it seemed weird to me when you said you were "using html not php".

Link to comment
Share on other sites

Thanks Actionsketch. Yes, my reply about the PHP would show my ignorance there, as well. Ultimately, I am looking for a way to write the nav once (so that it can be easily updated in the future) and then use Javascript or PHP or whatever to automatically change the color depending on what page the user is on. Could you show me how it would be easier in PHP?Also, I wrote some Javascript similar to what you suggested. You can view it at http://www.interfacelanguages.com/brilli/brilli_script.js. The page where I tried to import the script is http://www.interfacelanguages.com/brilli/jess1.html. I tried writing just the DOM lines (no switch statement) at first, and it didn't work then, either. I'm wondering what I'm doing incorrectly.Thanks again for your help!

Link to comment
Share on other sites

This looks awfull :(

  <div id="text_nav">     <ul>      <li><a href="/painting" id="painting">painting</a>         <ul>          <li><a href>stereovision</a>             <ul>              <li><a href>contact</a>                 <ul>                  <li><a href>home</a></li>                </ul>              </li>            </ul>          </li>        </ul>      </li>    </ul>  </div>
You should do it like this inside your stylesheet:
li { display:inline; padding:10px; }
And then this:
  <div id="text_nav">     <ul>      <li><a href="/painting" id="painting">painting</a></li>      <li><a href>stereovision</a></li>      <li><a href>contact</a></li>      <li><a href>home</a></li>    </ul>  </div>
--------Second, you might write a loop for the adjusting to the nav's, instead of writing everyone after one another :) This could be the total scriptfile:
function colorNavs(CurrentPage,Total) {for (c=1; c<Total; c++){  var NavObject = document.getElementById(/Nav/ + c) if (c == CurrentPage) {  NavObject.style.color = "black" // The NavObject that represents the page_id } else {  NavObject.style.color = "blue" // All other NavObjects }}}
Then, just before </body> at the html-document, insert this script:
<script type="text/javascript">colorNavs(define page_id, the total number of nav elements you have)</script>
Don't forget to edit the coloured.And all your navigation elements you want to color should have an ID specified, but ALL like id="Nav1". The number is 1 for the first nav, 2 for the second etc...So: when you have done all this, you should only have to edit the blue line above at every document with this navigation, to the number that page represents :) Edited by Dan The Prof
Link to comment
Share on other sites

var currentPage = 0if(location.href.match(/brilli\/(\d+).html/) != null){currentPage = Math.floor(RegExp.$1) - 1;}

You'd basically put the above in the header of your document, then this in the footer:document.getElementById('Menu_With_Links').getElementsByTagName('A')[currentPage].style.color='#000000';So.. if you've got the bar:<div id="Menu_With_Links"> <a href="...">01</a> <a href="...">02</a> <a h....</div>Etc etc inside your menu, it'll just pick out your link without needing to ID each of them (although, you could do that if you wish). You could write a switch for the names, as this method wouldn't work with numbers, unless, for say painting, you had the url:brilli/0/01.htmland for stereovision, it was:brilli/1/01.html^^ notice how it works?If you need more help with this, reply back and i'll try and explain it a bit better!

Link to comment
Share on other sites

My sollution would work too, wouldn't it :)With what I wrote above, you should manually define the current page for every document, that should be coloured differently, but it does work so that only one of the navs is coloured differently.With Blue's code you have to write more to colour the currentpage nav, and for other pages you have to write it again, you only have to write

colorNavs(1, 5)
When there are five nav elements and the current is one, with my code.And you won't want to write this over and over again:
document.getElementById('Menu_With_Links').getElementsByTagName('A')[currentPage].style.color='#000000'
Edited by Dan The Prof
Link to comment
Share on other sites

Mine's automatic, perhaps you should read the code more carefully. With yours, you'd end up with:colorNavs(1, 5)colorNavs(2, 5)colorNavs(3, 5)colorNavs(4, 5)in the footer, which cmuluna may aswell revert to her original switch code, as that's pretty much what you're doing with yours.By matching from the URL and storing the values in variables at the top of the page, and cycling through the list of objects in the DIV, it solves you needing to switch...

Link to comment
Share on other sites

No, you got that wrong. Theres only need for ONE colorNavs() per document! Because the loop colours everything.What I meant, is that there should be one for every document that has that navigation. Example:Homepage.html >> colorNavs(1, 4)MyForums.html >> colorNavs(2, 4)Paintings.html >> colorNavs(3, 4)Galery.html >> colorNavs(4, 4)It looks like what you say, many lines in the footer, but that is not true :D It is only ONE per file :( Else there would be no need for a looping, would there :) In fact, the function has a plural name.Why I do NOT recommend your way:When she uses your code, she can only save her files with a special number as a name, which is not common and bad in use. Filenames should be named discribingly, unlike with numbers. My code is filename-independant anyway :)But I don't like this, being a bit annoyed, shall we be friends again? :)

Edited by Dan The Prof
Link to comment
Share on other sites

Blue and Dan,Thanks for your posts! Since my ultimate goal for posting in this forum is to learn, I've tried both methods so that I can learn them. Right now I'm having some problems implementing them both. I'll give you each a respective address. (Also, I've put the script into the HTML for now, so that we have to look at only one page.) I have a basic Javascript question for both of you. Do you call the script at the end of the body tag so that the script will override the CSS?Blue: http://www.interfacelanguages.com/brilli2/01.htmlRight now, the first arrow is turning black instead of the "01" turning black. Do the <li>s have something to do with that? I'm trying to not only implement a functional code, but also understand what is really going on.Dan: http://www.interfacelanguages.com/brilli/jess1.htmlAt first I didn't see any changes when I implemented your script. Then, I was wondering if the CSS gray text color was overriding the change to black. I don't know if that was a correct assessment, but when I took away the color command for "a" in the CSS, I got two different colors, as was the intent. However, the colors weren't gray and black; they are blue and purple. Additionally, while I get two different colors in the top, textual nav, I get only blue in the numbered subnav on the left. Could you take a look at the script to see if I implemented it correctly?Again, thank you both for your continued help. Forums like this greatly assist people like me, people who are trying to teach themselves new concepts.

Link to comment
Share on other sites

I think I know what's wrong. The nav links practically have the same HREF, besides, in your CSS there does is a color definition of element "a", only "none" specified.You might remove the color property of a-element completely, and give the anchors theirself each their own link. Even the targets do not exist yet, just for testing :)For the rest, the code seems to be valid and correctly implemented as far as I can see. I haven't tested it yet by myself though, I may do that later.

Link to comment
Share on other sites

No, you got that wrong. Theres only need for ONE colorNavs() per document! Because the loop colours everything.What I meant, is that there should be one for every document that has that navigation. Example:Homepage.html >> colorNavs(1, 4)MyForums.html >> colorNavs(2, 4)Paintings.html >> colorNavs(3, 4)Galery.html >>  colorNavs(4, 4)It looks like what you say, many lines in the footer, but that is not true :D It is only ONE per file :( Else there would be no need for a looping, would there :) In fact, the function has a plural name.Why I do NOT recommend your way:When she uses your code, she can only save her files with a special number as a name, which is not common and bad in use. Filenames should be named discribingly, unlike with numbers. My code is filename-independant anyway :)But I don't like this, being a bit annoyed, shall we be friends again? :)

To be honest, I thought the whole idea of this was for it to be automatic. If she wanted to do it manually, like your way, she may-aswell just edit the links on each page to include:< ... style="color: #000000;" ... and not bother with your code....
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...