JavaScript problem

Thompy · Post by **Thompy** » October 14th, 2011, 20:03

I need to write a small bit of JS but I've only learnt HTML and CSS. I don't have the time to start learning JS properly, so I've tried to skim some tutorials and pull code from examples to achieve what should be very very simple. But I can't get the damn thing to work.

I need an expanding menu system but first I was practising on something even simpler to see the principle work.

HTML:

Code: Select all

<html>

<body>
<p id="para" onclick="toggle()">Paragraph</p>
</body>

</html>

CSS:

Code: Select all

#para {
color:red;
}

JS:

Code: Select all

function toggle() {
if (document.getElementById("para").style.color=="red") {
document.getElementById("para").style.color="green" }
else {
document.getElementById("para").style.color="blue" }
}

I know there are multiple things wrong with that like event handlers and style changes, but it serves the purpose of understanding. Normally the "else" would go back to red but I put blue for debugging.

Firstly I can only ever get one change to happen, "else" never kicks in. With "==" it goes to changes to blue, and with only a single "=" in the condition it goes green. Even if I write a load of jibberish in the condition it still changes colour, so it seems to ignore the "if" also.

I'm not sure about the whole document. bit either. Like I say, I've not started learning from the beginning because I don't have time, but I thought it'd be simple enough. Guess not.

Halp?

Post by **ProfHawking** » October 14th, 2011, 20:57

You want to toggle showing/hiding menu stuff? If you can explain a little more about what you need, we'll prob be able to help better.
But anyway, how about using jquery? Makes things easier:

Code: Select all

<html>
	<head>
	
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

		<script type="text/javascript">
			// wait until dom is loaded
			$(document).ready(function(){
				// catch mouse over menu li
				$("ul.menu li").hover(function(){
					// show any ul in this li
					$(this).children("ul").show("fast");
				},function(){
					// hide any ul in this li
					$(this).children("ul").hide("fast");
				});
			});
		</script>
		
		<style type="text/css">
			.menu ul {
				display: none;
			}
		</style>
		
	</head>
	<body>
		
		Some page
		
		<ul class="menu">
			<li><a href="#">Thing!</a>
				<ul>
					<li><a href="#">thing1</a></li>
					<li><a href="#">thing2</a></li>
					<li><a href="#">SubTing!</a>
						<ul>
							<li><a href="#">SubTing1</a></li>
							<li><a href="#">SubTing2</a></li>
							<li><a href="#">SubTing3</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li><a href="#">Bling!
				<ul>
					<li><a href="#">bling1</a></li>
					<li><a href="#">bling2</a></li>
					<li><a href="#">bling3</a></li>
				</ul>
			</li>
		</ul>
		
	</body>
</html>

Thompy · Post by **Thompy** » October 14th, 2011, 21:16

Trouble with using hover for a vertical list is if you have a short sub menu below a long one, it'll immediately close. Add a few more <li> under "thing2" to see what I mean. I'd rather it was a toggle because of that.

I found this with shows code from a tutorial that uses bad practices, and corrects it to this. However the JS seems overly complicated and the "bad" one still functions and is much simpler. It's also closer to a tutorial from Google, but that uses extra unexplained JS to function.

As for not using jQuery, despite not wanting to get into learning JS right now I'd like to have a full understanding of what I do end up writing. Also, as much as anything I just want to know why my code above fails, as it's the best way to understand and improve.

Also also, sodding IE doesn't like the jQuery code.

Stoat · Post by **Stoat** » October 15th, 2011, 0:54

That's odd -much of jQuery's code is for making it work in IE

For ease, I'd go with checking for CSS classes rather than colours - they're simple to detect, you can can add and remove them easily and you can style them differently while you're debugging.

also: handy tool for working/collaborating in: http://jsfiddle.net

Thompy · Post by **Thompy** » October 15th, 2011, 21:36

I didn't explain properly perhaps - I know virtually nothing. I'm trying brute horse and trial and error to get things to work and I can't.

I tried follow some codehere, but I can't adapt it to my needs, even though they are virtually the same.

Also, I tried jsfiddle and a piece of code that simply added a class (taken from above above link) worked, but when I pasted the HTML, CSS and JS into my own test page it doesn't work.

Never has "I'm in way over my head" been more apt.

If I explain about my menu a bit more. It's a simple nested list vertical menu, pure text, and I need the nested <ol>'s to change between display:none and display:block when the <li> they are nested in is clicked on. Couldn't be much simpler.

Stoat · Post by **Stoat** » October 15th, 2011, 22:44

Here's basically how I'd do it. If I was putting it on a site with other scripts I'd wrap it all in an object so it doesn't conflict, but this should outline the method. Javascript is not my forte though, so there's likely a tidier way.
http://jsfiddle.net/24nAv/1/

Thompy · Post by **Thompy** » October 16th, 2011, 3:09

Thanks, Stoat, works a treat.

It was breaking some other styling I had at first but I figured the "hide list items on first run" code needed changing to += and with a space before the class name. Felt a fucking genius figuring that one out

Also made some modifications without everything breaking all to hell which made a nice change.

However, after all that I gave it a run in IE, and "Nope!".

If you have a fix that'd be great, but otherwise I'll let it go. This isn't a website for public viewing, it's just a vehicle to showcase some project material completely unrelated to web design.

Thanks again for the code so far though.

Stoat · Post by **Stoat** » October 16th, 2011, 14:11

Of course it doesn't work in <IE8, it's the Internet.

http://jsfiddle.net/24nAv/9/
This should work in IE7+.
- addEventListener (IE9+ only)
+ onclick (universal)
+ workaround for getElementsByClassName (IE9+ only)

Post by **ProfHawking** » October 16th, 2011, 17:42

Yep IE support is a bitch, which is why I love Jquery - as Stoat says, they've done quite a lot of work to make it cross-browser compatible.

The reason I used hover originally is that you can still use the top level menus as links. If you dont care about that, it makes it simpler.
I've fiddled with the fiddle to adapt it, see if this works better in your IEs. Also adds capability of sub-sub menus
http://jsfiddle.net/24nAv/25/

Stoat · Post by **Stoat** » October 16th, 2011, 18:49

Oh jQuery, you so pretty.

Post by **ProfHawking** » October 16th, 2011, 18:59

Thompy · Post by **Thompy** » October 16th, 2011, 19:33

This is what I have http://jsfiddle.net/24nAv/28/.

I trimmed all the actual content out, and I didn't update it with the IE compliant code yet, but it shows the menu. As you can see there is a lot of styling on the menu, so I'm guessing that jQuery would be hard to adopt?

I'm pretty happy with that as it is anyway, but a few more things would make it awesome.

1) Every time you click a link to load a page the menu will reset to fully hidden. Any way to keep it open where you left it? I could use an iframe for the content but I'm not sure how acceptable that is.

2) It would be nice if when you navigate to a page via another link (in the content perhaps) and not the menu, for the menu to unfold so show the link for that page. That would take care of number 1 at the same time.

3) Could it be so that if you have a sub menu shown, when you click to open another one, the previous one closes? It's quite a long list of links, so it'd confusing having links going all the way down the page.

That's bonus stuff though, I've meant my basic needs as it is.

buzzmong · Post by **buzzmong** » October 16th, 2011, 19:42

You haven't closed the div with the "container" id.

/Helpful comment

Thompy · Post by **Thompy** » October 16th, 2011, 20:00

Was because I deleted a load of content and accidentally took one out.

Post by **ProfHawking** » October 16th, 2011, 21:04

WereRabbit wrote:This is what I have http://jsfiddle.net/24nAv/28/.

I trimmed all the actual content out, and I didn't update it with the IE compliant code yet, but it shows the menu. As you can see there is a lot of styling on the menu, so I'm guessing that jQuery would be hard to adopt?

Nope, the code i put up there should drop straight in:
http://jsfiddle.net/24nAv/30/
Styling doesn't really affect anything, it only uses the category class.

To get it to open at the right menu between page views, you are going to need something to remember the state. An easy enough solution if you have anything like PHP would be to use a session cookie, is that an option?
Personally, i would try to avoid using iframes, although having the menu in one or the page in one (and specifying the target on the links) would work i suppose.

Thompy · Post by **Thompy** » October 16th, 2011, 21:43

ProfHawking wrote:Styling doesn't really affect anything, it only uses the category class.

It doesn't apply styles though. I made Stoat's code also add the class "c" to change the colours when a sub menu was open. It's pretty superficial though and I can make an alternate design.

IE9 still doesn't like the jQ

I presume it loads in external scripts the usual way i.e. <script type="text/javascript" src="jquery.js"></script>?

I don't have the back end knowledge for cookies either. I wish I had the time/motivation to learn all this, honestly.

However, I was downloading jQ and saw from their docs section that a long vertical list menu isn't bad at all, and would suit the style of my project as it's a kind of enclyclopedia. So I might have a rethink here about what to do. I appreciate all the input of course.

Post by **ProfHawking** » October 16th, 2011, 22:33

ah sorry, missed that. No worries tho, can be done with an add the class when clicked, and a simple callback to remove the class if its then hidden: http://jsfiddle.net/24nAv/37/

i'll have a play with your cookie conundrum

Stoat · Post by **Stoat** » October 16th, 2011, 22:57

I notice you've ID'd the body as bluepage. If each category has its own body ID, cookies shouldn't be necessary.

Thompy · Post by **Thompy** » October 16th, 2011, 23:19

That should be a class actually, which would be on various categories under the same general area, so I don't think that would work. Don't think I'm using it now anyway. It's purpose was to colour headings without having to add classes to every one.

The reason I looked at JS was because what I have now is nested lists for menus that don't even exist on pages that aren't in that category. So to access those sub menus it meant navigating to a new page where the list did exist. Trouble is often I had no content to write there, so it'd just be a blank page. It could have navigated to the first page within that sub menu instead, but I thought that might be confusing to a viewer. That's why I thought of an expanding menu so you didn't have to leave the page you're on to navigate to the next one.

Also because of all the variations in styles, the fact that I wanted the menu to highlight the current page you were on, and the volume of pages, it was becoming a bitch to manage. I was having to go through loads of pages pasting lines and adding classes when I made a new page. So I thought if I had a self contained menu system I could just copy the entire thing into each page should I make an update (but that'd still mean 50+ pages). So better yet use an iframe to call it (or the content bit) in so I only had one place to update it. Or If I could call it in with JS then all the better, but of course, I don't know how.

It's also becoming clear how hard it is to work on someone else site, even a simple one like I have, when you don't have all the files to hand, and don't have a full briefing on what to do. I didn't anticipate the cascade of problems. So sorry that you're throwing all this potentially great stuff at me for me to constantly add in more reasons why it won't work. Don't work too hard

Post by **ProfHawking** » October 16th, 2011, 23:31

Righto, i have a State-Saving version working: http://jsfiddle.net/24nAv/39/

This uses a 3rd party plugin for jquery: https://github.com/carhartl/jquery-cookie/
The only problem is, I think IE9 has an issue with it...

5punk

JavaScript problem

JavaScript problem

Re: JavaScript problem

Re: JavaScript problem

Re: JavaScript problem

Re: JavaScript problem

Re: JavaScript problem

Re: JavaScript problem

Re: JavaScript problem

Re: JavaScript problem

Re: JavaScript problem

Re: JavaScript problem

Re: JavaScript problem

Re: JavaScript problem

Re: JavaScript problem

Re: JavaScript problem

Re: JavaScript problem

Re: JavaScript problem

Re: JavaScript problem

Re: JavaScript problem

Re: JavaScript problem