Annoying HTML border problem

[xoggoth]

Cheers again Nick. I think my just changing the size a pixel has done the nudge it needed in this case but that's useful for further problems and has been added to my ever growing list of quirky things.

[NickFitz]

Sounds like a typical IE rendering failure. One thing that might give it a nudge and get it working is to use

// assume reference to your toggley thing is in variable "thing"
// as for example would be the result of
// var thing = document.getElementById("toggley_thing");

thing.className = thing.className;

or, if that doesn't work, try

thing.parentNode.className = thing.parentNode.className;

Sometimes IE seems to mess up calculating which bits of the document need repainting. Luckily, the developers never optimised for the case of a className assignment resulting in no change from the previous value, and as a changing className could cause all kinds of layout changes, IE proceeds to recalculate and repaint the element and its descendants, and anything else that's affected as a result.

It ought to do this for the visibility change anyway, but obviously it isn't in this case, so this just nudges it to have another try.

Also, sometimes it just gets it wrong again, but gets it right if the redraw starts at the parent of the problem object, or maybe at some containing element further up the tree; but start as far in as you can and only work out if you have to, as it has a deleterious effect on performance generally.

(Performance considerations might not seem so important nowadays, but as your stuff is for the educational market it's worth bearing in mind that schools and such often have rather crappy old machines that were built to cheap specs in the first place, so anything that helps avoid the risk of flickering redraws is a Good Thing.)

[fullyautomatix]

On its own your code works okay in my browser(s) but its maybe some other CSS that is interfering. Can you paste in any other CSS files you include ?

Also, agree with others that unobtrusive javascript is the best way to tackle this kind of event based dom manipulation.

[jmo21]

It's abstracting things... for all you know on one browser it maps directly to setting a property but on another to a whole wodge of nasty DOM/JS.

I'd echo that it's worth getting to grips with if you're not an expert HTML/CSS guy to start with (which seems not to be the case) as it will save you time down the line. Plus it's good to have on your CV

It's worth it for the cross browser compatability alone.

Thought it was ubiquitous amongst web devs now.

[VectraMan]

That's another reason I don't use jquery, depends what you're used to I suppose but the syntax of plain jscript seems a lot simpler to someone already used to C, C++ and Java. Jquery just seems to turn it into a different language for no obvious reason.

I agree. Plus I don't know how much this is true, but looking something up by string name just seems like it should be horribly inefficient to me.

And is there a good reason for not just doing:

info.style.visibility = "visible";

?

[xoggoth]

Plus it's good to have on your CV

Probably right in general, though bit past needing things on my CV personally.

[d000hg]

That's another reason I don't use jquery, depends what you're used to I suppose but the syntax of plain jscript seems a lot simpler to someone already used to C, C++ and Java. Jquery just seems to turn it into a different language for no obvious reason.

It's no problem assigning elements or their properties to a shorter variable name or a set of them to an array in jscript.

It's abstracting things... for all you know on one browser it maps directly to setting a property but on another to a whole wodge of nasty DOM/JS.

I'd echo that it's worth getting to grips with if you're not an expert HTML/CSS guy to start with (which seems not to be the case) as it will save you time down the line. Plus it's good to have on your CV

[Bunk]

That's another reason I don't use jquery, depends what you're used to I suppose but the syntax of plain jscript seems a lot simpler to someone already used to C, C++ and Java. Jquery just seems to turn it into a different language for no obvious reason.

One of the main benefits of jQuery was that it allowed you to select elements using CSS selectors instead of just getElementById and getElementsByTagName. That's less of a benefit now that you can use getElementsByClassName and querySelectorAll although as usual IE support is patchy.

[xoggoth]

That's another reason I don't use jquery, depends what you're used to I suppose but the syntax of plain jscript seems a lot simpler to someone already used to C, C++ and Java. Jquery just seems to turn it into a different language for no obvious reason.

It's no problem assigning elements or their properties to a shorter variable name or a set of them to an array in jscript.

[jmo21]

document.getElementById("info").style.visibility = "visible";

My first thought is why are you not using JQuery to do this kind of stuff.

$('#info').hide();

[xoggoth]

Ah! You obviously saw my previous thing when I said I had ballsed it up by duplicating the element. Actually I hadn't, I did that when I tried out the display thing, so it was my comment on that was the ballsed up bit. Anyway, cheers again.

Jquery appears very powerful, it's just that when doing the stuff I do, much of it not usual stuff, it's too complicated to look through an enormous library on the odd occasions when things don't work.

[wurzel]

I have to confess that I use jquery these days & just do something like $(control).toggle() but IIRC that is just switching the display attribute between display:block & display:none

[xoggoth]

Cheers for comment but can't get display:none to work. Then jscript halts with no error shown!

Noticed size looks slightly different on 2nd click. PS Have found a daft solution, set height to 1 pixel less than it should be then set it to what it should be on showing.

[wurzel]

Got a pop up result box:

<div id="info" class="info" onclick="hideinfo();"
style="z-index:16; visibility:hidden; background:white; padding:10px; border:3px solid red;
position:absolute; font-size:30px; line-height:30px;
left:216px; top:175px; width:400px; height:405px;">Correct! etc...</div>

When required, this is made visible in JS:

document.getElementById("info").style.visibility = "visible";

For some wierd reason, the first time this is set to visible in IE9, all or part of the border is missing. It's ok on 2nd or subsequent times in IE. It's always ok in Firefox etc and has a normal border if the element is set to visible in the HTML. Nowt else is being done to it in the jscript.

Any brill ideas? Ta.

What happens when you use display instead of visibility?

[xoggoth]

Got a pop up result box:

<div id="info" class="info" onclick="hideinfo();"
style="z-index:16; visibility:hidden; background:white; padding:10px; border:3px solid red;
position:absolute; font-size:30px; line-height:30px;
left:216px; top:175px; width:400px; height:405px;">Correct! etc...</div>

When required, this is made visible in JS:

document.getElementById("info").style.visibility = "visible";

For some wierd reason, the first time this is set to visible in IE9, all or part of the border is missing. It's ok on 2nd or subsequent times in IE. It's always ok in Firefox etc and has a normal border if the element is set to visible in the HTML. Nowt else is being done to it in the jscript.

Any brill ideas? Ta.