11 Replies - 3438 Views - Last Post: 27 July 2007 - 03:23 PM

#1 eddieboy665  Icon User is offline

  • D.I.C Head

Reputation: 8
  • View blog
  • Posts: 113
  • Joined: 09-April 07

Various javascript problems

Posted 19 July 2007 - 11:12 AM

Hello,

I started work on a site for university but things seem to be going wrong so I have a few questions.

First of all here are the links to all of the relevant pages for the full code:
Index.html
Stylesheet
Javascript functions

Problems in Mozilla:
Both of these functions do not work correctly:
// function to darken navigation options - hopefully when this bit is working the buttons will fade darker onmouseover
function darkenNav(evt) {
	var evt = (evt)? evt: ((window.event)? window.event: null);
	var objectID = (evt.target) ? evt.target.id : ((evt.srcElement) ? evt.srcElement.id : null);
	if (objectID){
		var object = document.getElementById(objectID);
		if (navigator.appName.indexOf("Microsoft")!= -1 &&parseInt(navigator.appVersion)>=4){ // then IE
			object.style.filters.alpha.opacity = 0.90;
			alert('Browser is IE');
			}
		else {
			object.style.opacity = 0.90;
			}
		}				
	}
// function to lighten navigation - hopefully when this bit is working the buttons will fade lighter onmouseout
function lightenNav(evt) {
	var evt = (evt)? evt: ((window.event)? window.event: null);
	// get objectID that triggered event
	var objectID = (evt.target) ? evt.target.id : ((evt.srcElement) ? evt.srcElement.id : null);
	if (objectID){
		var object = document.getElementById(objectID);
		if (navigator.appName.indexOf("Microsoft")!= -1 &&parseInt(navigator.appVersion)>=4){ // then IE
			object.style.filters.alpha.opacity= 0.70;
			alert('Browser is IE');
			}
		else {
			object.style.opacity= 0.70;
			}
		}		
}


The idea is both functions will either lighten the navigation or darken when the mouse move over and off each (soon to be) link. The functions in both IE and Mozzilla receives the object correctly and will change the opacity - BUT - only for a split second in Mozilla. If you move the mouse over it flashes darker but then goes back to normal without waiting for the mouseout event. Why is this?? I want it to stay dark until the mouseout event. It also seems to flash dark onmouseout!

Now in IE there are more problems:
IE problems

1:
The functions above don't get as far in IE 7 (haven't tried it in older versions). It does nothing onmouseover or out but tells me in the error details that 'style.filter.alpha' is null or not an object? However those functions defiantly receive the object that caused the event correctly. What is wrong?

2:
(not CSS) The lines that change the password box (top right of page- input box) from displaying password as a default value and that should change it into password as the type (as opposed to the orginal text so that you could read password) produce an error: 'Could not get the type property, no supported' - any way of getting around this or is it just a no go in IE?
The function that doesn't work in IE but does in Mozilla:
// function to change password input box from text (so it can display "password" to password type
function change2password(obj){
	if (obj.type != 'password') obj.type = 'password';
}



3. ** EDIT ** Number 3 has been solved!

Hope I can get some of these problems fixed here and if you got this far, thanks for reading.

Many thanks,
Ed

This post has been edited by eddieboy665: 19 July 2007 - 03:26 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Various javascript problems

#2 eddieboy665  Icon User is offline

  • D.I.C Head

Reputation: 8
  • View blog
  • Posts: 113
  • Joined: 09-April 07

Re: Various javascript problems

Posted 20 July 2007 - 10:20 AM

please, any suggestions would be great.
Was This Post Helpful? 0
  • +
  • -

#3 serializer  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 110
  • Joined: 25-June 07

Re: Various javascript problems

Posted 20 July 2007 - 11:20 AM

Here's a couple of ideas:

1. Somehow extra mouseout events are getting fired which resets the opacity. I think that changing the opacity might in itself be triggering this. I'm currently struggling with something similar in one of my designs, and haven't worked out the best solution as yet. I'll let you know as and when I have any further ideas.

2. I'm not sure about the Javascript for changing the filter parameters in IE, I suspect it'll have to be accessed a little differently.

A better solution entirely might be to use the awesome jQuery library. This allows you to go $(obj).css("opacity",0.7); and it'll automagically work in IE or FF. I should stop plugging jQuery but it really does rock!

Alternately you could just add a :hover CSS rule and change the opacity there, no Javascript needed. Up to you.

To tackle the password box you could approach things a little differently. Make your input box *always* have type password (this will ensure that even with JS off the password mask will still be in effect). Then, have an extra label which you absolutely position over the top of the box (use Javascript to do this so that if it's switched off the box will be accessible). Attach an onmousedown event to the label which causes it to hide and set the focus to the password box.

HTH

--serializer
Was This Post Helpful? 0
  • +
  • -

#4 eddieboy665  Icon User is offline

  • D.I.C Head

Reputation: 8
  • View blog
  • Posts: 113
  • Joined: 09-April 07

Re: Various javascript problems

Posted 20 July 2007 - 02:10 PM

Hi, thanks for the response, I like your idea about keeping the type as password and having a layer ontop that then goes behind the rest - thanks.

As to the IE opacity problem; I was incorrect as you suggested, the correct way to write it is:
object.style.filter= "alpha(opacity=" + 90 + ")"


The reason I'm trying to use javascript as opposed to CSS as this won't be the finished product, found this in search of an answer which is excatly what I want:
http://www.aglasshal...menu-tests.html
Unfortunatly can't really make sense of much of the code as the person has used stupid variable names and I don't think it is as complex, in the way that he already knows which object's opacity to change. I have a choice of 5 however.

I've been working on it all day today and getting really fed up. I have realised it is not flashing but only recognising one very thin line of the div with event listeners attatched to it. Why is this?? Or is it that events are being triggered when they shouldn't be? Do all objects have to be positioned absolutley?

I am about to update where I am now online so the links should show you where I'm at:
www.things4free/biosoc
www.things4free/biosoc/javascript/main.js
www.things4free/biosoc/stylesheets/global.css

Here is some of the code relevant to my problem (isIE() function just checks if browser is IE):
// function to darken navigation options
function darkenNav(evt) {
	var evt = (evt)? evt: ((window.event)? window.event: null);
	var objectID = (evt.target) ? evt.target.id : ((evt.srcElement) ? evt.srcElement.id : null);
	var opacityStart = 0.70;
	var opacityEnd = 0.90;
	var opacityIncrement = 0.05;
	var opacityVal = opacityStart; 
	var object = document.getElementById(objectID);
	if (object){
		if (evt.type == 'mouseover') {
			changeOpacity (opacityStart, opacityEnd, opacityIncrement, object);
		}
		if (evt.type == 'mouseout') {
			opacityIncrement = -opacityIncrement;
			opacityStart = 0.9;
			opacityEnd = 0.7;
			changeOpacity (opacityStart, opacityEnd, opacityIncrement, object);
		}
	}
}
	
function changeOpacity (newOpacity, endOpacity, incrementAmount, object){
	if (newOpacity != endOpacity){
		if (isIE()){object.style.filter= "alpha(opacity=" + newOpacity*100 + ")";}
		else {object.style.opacity= newOpacity;}
		//alert('Opacity for the '+objectID+' objectID has just been set to ' +newOpacity);
		newOpacity += incrementAmount;
		//alert('the next opacity will be set to '+newOpacity);
		setTimeout ("changeOpacity("+newOpacity+")", 100);
	}
}

// Initiates variables and functions onload
function init(){
	var navElements = new Array(5); // new array with 5 elements
		// populate array with objects
		navElements[0] = document.getElementById('home');
		navElements[1] = document.getElementById('forum');
		navElements[2] = document.getElementById('events');
		navElements[3] = document.getElementById('news');
		navElements[4] = document.getElementById('commitee');
	for (var i = 0; i < navElements.length; i++){
		if (navElements[i].className != 'navOn'){
			navElements[i].onmouseover = darkenNav;
			navElements[i].onmouseout = darkenNav;
			}
		}
	}



Now I get a change in opacity if you mouseover the very thin line (bottom part of the div) but not as I would expect - it doesn't increment but changes to a darker value?!

Error messages in Mozzillas error console are: 'object has no properties' and tells me this line of code is incorrect:
else {object.style.opacity= newOpacity;}

(from the changeOpacity() function)

Any more suggestions?
Thanks for the help so far,
Ed

This post has been edited by eddieboy665: 20 July 2007 - 02:13 PM

Was This Post Helpful? 0
  • +
  • -

#5 serializer  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 110
  • Joined: 25-June 07

Re: Various javascript problems

Posted 21 July 2007 - 04:52 AM

The inner ("navText") div is actually 2px shorter than the outer div. So, the mouse is only over the outer ("nav") div on the 2px gap at the bottom. You can see this pretty clearly using Firebug (a plugin for Firefox which I find is utterly essential these days). I'm wondering, do you actually need the inner div?

The rest of the problem looks like it's in your setTimeOut line - you're not passing the rest of the properties (endOpacity, incrementAmount, object) when you retrigger the changeOpacity function - so the second time it calls it, it doesn't know which object to apply to or what to do next.

--serializer
Was This Post Helpful? 0
  • +
  • -

#6 eddieboy665  Icon User is offline

  • D.I.C Head

Reputation: 8
  • View blog
  • Posts: 113
  • Joined: 09-April 07

Re: Various javascript problems

Posted 22 July 2007 - 02:58 PM

Almost finished now, thanks a lot! And firebug is amazing!!

Had problems orginally passing multiple arguments throught the setTimeout() function but managed to find a way in the end,
http://ecmascript.st...meout-revisited and you were correct about the other div. No idea why I put it in, in the first place.

Now I'm struggling to change the naviagtion to hide the drop menu on a mouseout as opposed to a click, hopefully not hard to solve but complicated but the fact that there are lots of divs on top of the drop box with different opacitys.

Probably doesn't work in Safari yet either but it works in IE 7 & 6!! And of course Mozilla.

Anyway thanks for the help,
Ed
Was This Post Helpful? 0
  • +
  • -

#7 serializer  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 110
  • Joined: 25-June 07

Re: Various javascript problems

Posted 22 July 2007 - 03:36 PM

This might work: attach a mouseOver event to div.content, div#wrapper and div#header. Make this event hide ALL the menus. Hopefully this event will be triggered every time the mouse scrolls out of any part of the navigation bar and/or popups. Can't say for certain since I haven't tested it, and could still suffer problems related to opacity!

--serializer
Was This Post Helpful? 0
  • +
  • -

#8 sstchur  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 25-July 07

Re: Various javascript problems

Posted 25 July 2007 - 01:02 PM

View Postserializer, on 22 Jul, 2007 - 03:36 PM, said:

This might work: attach a mouseOver event to div.content, div#wrapper and div#header. Make this event hide ALL the menus. Hopefully this event will be triggered every time the mouse scrolls out of any part of the navigation bar and/or popups. Can't say for certain since I haven't tested it, and could still suffer problems related to opacity!

--serializer



You might also be interested in this:

http://ecmascript.st...me-a-fade-demo/

and towards the end of that blog entry is a fade demo, but here it is again for convenience:

http://ecmascript.st...gimme-fade-demo

Incidentally, Gimme, like jQuery can also manage opacity cross-browser for you:

g('#myElem').setStyle('opacity', .7);

-sstchur
Was This Post Helpful? 0
  • +
  • -

#9 serializer  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 110
  • Joined: 25-June 07

Re: Various javascript problems

Posted 27 July 2007 - 10:36 AM

I notice in that demo they use an Animation.end() function. Do you know if there is any way of doing this in jQuery? I've been wanting to exactly that in something I'm working on!

--serializer
Was This Post Helpful? 0
  • +
  • -

#10 sstchur  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 25-July 07

Re: Various javascript problems

Posted 27 July 2007 - 11:25 AM

View Postserializer, on 27 Jul, 2007 - 10:36 AM, said:

I notice in that demo they use an Animation.end() function. Do you know if there is any way of doing this in jQuery? I've been wanting to exactly that in something I'm working on!

--serializer



I honestly don't know. I'm not that familiar with jQuery -- just seen a few examples of it in use on the web. It's obviously very powerful, but naturally, I'm partial to my own library ;-)

-sstchur
Was This Post Helpful? 0
  • +
  • -

#11 serializer  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 110
  • Joined: 25-June 07

Re: Various javascript problems

Posted 27 July 2007 - 01:36 PM

View Postsstchur, on 27 Jul, 2007 - 11:25 AM, said:

I honestly don't know. I'm not that familiar with jQuery -- just seen a few examples of it in use on the web. It's obviously very powerful, but naturally, I'm partial to my own library ;-)


Absolutely :) jQuery is really awesome, but if it won't do what I want I'll give Gimme a shot. It looks very similar.

--serializer
Was This Post Helpful? 0
  • +
  • -

#12 sstchur  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 25-July 07

Re: Various javascript problems

Posted 27 July 2007 - 03:23 PM

View Postserializer, on 27 Jul, 2007 - 01:36 PM, said:

View Postsstchur, on 27 Jul, 2007 - 11:25 AM, said:

I honestly don't know. I'm not that familiar with jQuery -- just seen a few examples of it in use on the web. It's obviously very powerful, but naturally, I'm partial to my own library ;-)


Absolutely :) jQuery is really awesome, but if it won't do what I want I'll give Gimme a shot. It looks very similar.

--serializer



John Resig is an extremely talented Javascripter, and jQuery has been around with a community behind it for a while, so I have no doubt that it is probably excellent. Gimme was a project I had brewing in my head for over a year, but it took a while to get company approval to publish it open source (the only way I was willing to do it). It's still a "baby" really, but I'm actively developing and fixing bugs, so certainly feel free to test it out and don't hesitate to contact me if you have problems, comments, or suggestions: [email protected]

-sstchur
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1