Develop Reference

trying to hide div with content on javascript call

I Have been trying to use this http://www.gloucesterwebdesign.com/showhidecontent/
but instead of hitting a link I want some JavaScript to call this function
like
if(input == true){
toggleLayer('id');
}
else if(input == false){
toggleLayer('id2');
}
the script call the toogleLayer function, but nothing happens, and curse
the input value is place within a other script there runs at page load up. I'm been wondering if this is the problem. anyone who like to comment on this?
-- Update --
So i was ask for more of the code,
http://pastebin.com/UD3tjz1s
The value in the localStorage is set on a other page, so you only get this page after that. this is only to show what kind of data im using
im a bit of a javaScript noob, so hope it's not to hard to read

Okay, I did a quick test and this will do it. Just replace your current function iwht this, it;s a lot cleaner and simpler. Also, document.getElementById(id) is supported in every current browser and goes back to IE6, so unless you want netscape support you don't; need all the extra code your resource provided.
function toggleLayer(id){
// get the element (this is supported in all modern browsers)
var element = document.getElementById(id);
// set the style display of this element to none if its set to be
// anything else than none, otherwise set it to block
element.style.display = element.style.display != "none"
? "none"
: "block";
}
I tested this and it worked.
Edit - [different thing!]
Okay, sorry I sort of misunderstood but I found a way to fix it. Heres what it comes down to: Because your javascript code is above your DIV elements, it gets executed BEFORE the DIV elements are created by the page. So javascript will look for the elements, and it will return undefined because, well, they aren't defined yet. SO you will have to either move your script to just before the ending tag, or add the following to the code (please not I also added an interval to see your function working):
window.onload = function(){
setInterval(setSize,1000);
// the rest of your functions here - the above interval is so you can see it toggling
}
// function toggleLater(){...} here
You might also want to move ToggleLayer OUTSIDE of the window.onload function, as you can't trigger it from the page otherwise (again, the function is now defined INSIDE window.onload and outside of the scope for DIV elements...).

Struggling with onmouseover and onmouseout

I am struggling with onmouseover and onmouseout.
Every site I have been to shows this syntax almost exactly. I practically copied pasted it from Mozilla. The problem I’m having is that it calls the largeDiv and smallDiv functions immediately. (Eventually, I am hoping to apply a new class to the div when during the mouseover event, and return to the old class when mouseout.) I am pretty sure that my mouse events are to blame. I was also wondering if my onload function caused any problems, but when I commented it out, the only thing that changed was the small div did not load, as expected.
I tried to use an event listener, thinking I wasn’t calling the event properly, but that did not work at all, although I am not sure I coded it properly, and didn’t spend more than an hour on the damn thing! I have tried numerous tweaks, camelcasing onmouseover, using parenthesis, etc… Anyway, here is the code:
var introEl = document.getElementById("intro");
//display large div by default and
//use small div with js enabled
window.onload = function(){
introEl.className = "small";
}
function largeDiv(){
console.log("It Worked");
};
function smallDiv(){
console.log("Mouse Out!");
};
introEl.onmouseover = largeDiv();
introEl.onmouseout = smallDiv();
I coded this in my browser and when I copied it to jsFiddle to ask this question it wouldn’t load the small div on load, but it did log the statements. I put it on CodePen and it worked as I have described. Not sure what caused this but this is the second time this has happened.
By the way, if you go to CodePen or jsFiddle, I know my design skills are lacking. I am just doing this for a playground, and for a place to keep code that works, like a notebook. I promise you it will get much much worse.
As always, any help is appreciated.

var introEl = document.getElementById("intro");
//display large div by default and
//use small div with js enabled
window.onload = function(){
introEl.className = "small";
}
function largeDiv(){
console.log("It Worked");
};
function smallDiv(){
console.log("Mouse Out!");
};
introEl.onmouseover = largeDiv; // here you don't need "()" with your defined functions
introEl.onmouseout = smallDiv; // here you don't need "()" with your defined functions

Please go to following fiddle i have made some small changes and its working fine for me
fiddle
Also You could have used
<div id="intro" onmouseover="largeDiv();" onmouseout="smallDiv();">
Mouse over this text
</div>
See working example here fiddle 2

Destroying a function when exiting a matched breakpoint with enquire.js

This is probably basic to most reading, but I can't seem to figure it out.
I have a little test function that I want to execute if under a certain width. When the screen rotates or gets resized above that width, I want the function to cease to work. Here is some example code for simplicity sake.
enquire.register("screen and (max-width:500px)",{
match : function() {
$(".block .block-title").click(function(){
alert("Hello World!");
});
}
}).listen();
So if the page loads above 500px, it works as intended. Clicking won't execute. If the page loads at 500px or below, the click function executes. Only problem is that if you resize the viewport or change orientation to something above 500px, the function still executes. I'd like to be able to disable that.
The real world scenario I'm actually trying to do here is I have an un-ordered list of 4 items. Above a certain width they are displayed right away. If under a certain width, I just want to hide them and on click show them. I know there are a few ways to do it (.toggle(), .toggleClass("myclass"), etc).
I have done this a bunch of times but I always get caught with the entering / exiting break points and things not being reset, or working as intended. Usually it doesn't matter, but lately in some of my use cases it has mattered.
I know of the unmatch option but I'm not sure how to really kill the matched function above.
enquire.register("screen and (max-width:500px)",{
match : function() {
$(".block .block-title").click(function(){
alert("Hello World!");
});
},
{
unmatch : function() {
// what do I do here do kill above?
}
}
}).listen();
Any help would be appreciated. I am pretty sure it will help my current situation but will also help me expand my knowledge of enquire.js for other things.
Thanks.
edit: I forgot to mention... if you load the page under 500px, then resize or orientate wider then 500px, then go BACK under 500px, the click function won't work again.. which confuses me also. I basically was hoping it would work no matter what when under 500px, and not work at all when over 500px.

I'm the author of enquire.js, so hopefully I'll be able to help you ;-)
Basically, you want to add an event handler on match and remove event handler on unmatch. You seem to have the gist of how to do this above, but you've got the syntax a little wrong. Once the syntax is corrected it's just some jQuery knowledge to remove the click handler.
So let's look at how the syntax should be:
enquire.register("screen and (max-width:500px)", {
match: function() {
//match code here
},
unmatch: function() {
//unmatch code here
}
}).listen();
Notice that match and unmatch are part of a single object supplied to register.
Ideally you should be putting this in your document ready callback. To assign your click handler use jQuery's on method, as this allows you to use the off method to unassign:
$(".block .block-title").on("click", function() {
alert("hello");
});
$(".block .block-title").off("click");
This is great because you can even namespace your events, read up on the jQuery docs for more details on this. So to put it all together, we would have this:
$(document).ready(function() {
var $target = $(".block .block-title");
enquire.register("screen and (max-width:500px)", {
match: function() {
$target.on("click", function() {
alert("Hello World!");
});
},
unmatch: function() {
$target.off("click");
}
}).listen();
});​
You can find a working example here: http://jsfiddle.net/WickyNilliams/EHKQj/
That should then be all you need :) Hope that helps!

JavaScript changes to style being delayed

I'm running into a little problem that's driving me crazy, and I'd welcome any thoughts as to the cause. At this point I feel like I'm just going 'round in circles.
I have the following code:
function JSsortTable(phase) {
dynaLoadingDivShow();
createSortArray();
dataArr = do2DArraySort(dataArr, orderList, orderDir);
sortArrayToRs();
dynaListTable.tableControl.refreshTableViaObjects(rsDynaList, colObjs);
dynaLoadingDivHide();
}
function dynaLoadingDivShow() {
document.getElementById('dynaReportGuiWorking').style.display = 'block';
document.getElementById('dynaReportGuiWorking').style.visibility = 'visible';
}
function dynaLoadingDivHide() {
document.getElementById('dynaReportGuiWorking').style.display = 'none';
document.getElementById('dynaReportGuiWorking').style.visibility = 'hidden';
}
<div style="visibility:hidden; display:none; z-index:25;" class="tableControlHeader" id="dynaReportGuiWorking">
Working...
</div>
I call JSsortTable as an onclick event. When I run the above code as is, I never see the div in question. The JSsortTable function takes some 800-2500 ms to run so it's highly unlikely I just missed it the 10+ times I tried. If I change the style of the div to start out visible, then it will remain visible until after JSsortTable has finished running and then disappear; exactly as expected. So I figured the problem was in dynaLoadingDivShow.
Now, I tried removing dynaLoadingDivHide to see what would happen and found something completely unexpected. The div will not appear when you the JSsortTable function fires. Instead, after all the other code has been run, when JSsortTable finishes, the div becomes visible. It's alomst as though IE (version 8) is saving up all the changes to the DOM and then waiting until the end to paint them. This is, obviously, not the desired behavior.
Anyone have any thoughts on this? I'm only allowed to have IE at work so I haven't tried this on other browsers. I have enough CSS/JS knowledge to be dangerous, but am by no means an expert yet. ;)
Thanks!

You'll need to use a timeout:
function JSsortTable() {
dynaLoadingDivShow();
setTimeout(JSortTableWork);
}
function JSortTableWork()
createSortArray();
dataArr = do2DArraySort(dataArr, orderList, orderDir);
sortArrayToRs();
dynaListTable.tableControl.refreshTableViaObjects(rsDynaList, colObjs);
dynaLoadingDivHide();
}
Note that I took out the parameter phase because it's not used in the function. If you do need the parameter then you'll need to modify the timeout as
setTimeout(function(){JSortTableWork(phase);});
and also add the parameter to JSortTableWork

Event handling issues

I have a couple of, what may end up being for this forum, overly-novice questions regarding unobtrusive event handling.
As I understand it, a properly set-up document would look something like this:
<html>
<head>
<title>Title</title>
<script src="jsfile.js" type="text/javascript></script>
</head>
<body>
//Body content, like some form elements in my case
</body>
</html>
Jsfile.js would look something like this:
function a() {
//code;
}
function b()...
window.addEventListener('load', a, false);
document.getElementById("id").addEventListener('click', b, false);
document.myForm.typeSel.addEventListener('change', c, false);
//or to use better browser-compatible code...
function addEvent(obj,evt,fn) {
if (obj.addEventListener)
obj.addEventListener(evt,fn,false);
else if (obj.attachEvent)
obj.attachEvent('on'+evt,fn);
}
addEvent(window, 'load', a);
addEvent(document.getElementById('id'), 'click', b);
addEvent(document.myForm.typeSel, 'change', c);
As I understand it, while in the head the browser will load this JavaScript code, adding each of those event handlers to their respective elements. HOWEVER... While the window handler is added properly, none of the others are. But if placed within a function, the (for instance) getElementById method of accessing an element works just fine, and the event handler is added. So I could conceivably make a loadEvents() function which is called via window onload, which contains all of the addEvent() functions for the other document elements for which I need event handlers. But as I understand the whole thing, I shouldn't have to do this.
In addition, if I were to stick the addEvent code within the body along with the element it addresses, such as:
<input type="checkbox" id="test" />
<script type="text/javascript>
document.getElementById("test").onclick = func;
</script>
...then it works fine. But of course it also violates the whole reason for removing inline event handlers!
So question being: In order to use *element*.addEventListener('click',func,false), addEvent(*element*,'click',func), or even *element*.onclick = func - how can I successfully reference an element at the end of a script file in the head, without having to stick it in another function? Why does getElementById and other such methods not work outside of a function in the head?
Or, is there some flaw in my underlying understanding?

Putting <script> in the <head> used to be the wisdom. But nowadays, with heavy ajax pages, <script> is more and more often but in the body, as far down below as possible. The idea is that the loading and parsing of the <script> keeps the rest of the page from loading, so the user will be looking at a blank page. By making sure the body is loaded as fast as possible, you give the user something to look at. See YAHOO best practices for a great explanation on that issue: http://developer.yahoo.com/performance/rules.html
Now, regardless of that issue, the code as you set it up now, can't work - at least, not when the elements you attempt to attach the handlers to aren't created yet. For example, in this line:
document.getElementById("id").addEventListener('click', b, false);
you will get a runtime error if the element with id="id" is inside the body. Now, if you put the <script> in the body, way below, after the content (including the lement with id="id", it will just work, since the script is executed after the html code for those elements is parsed and added to the DOM.
If you do want to have the script in the head, then you can do so, but you'll need to synchronize the adding of the event handlers with the rendering of the page content. You could do this by adding them all inside the document or window load handler. So, if you'd write:
//cross browser add event handler
function addEventHandler(obj,evt,fn) {
if (obj.addEventListener) {
obj.addEventListener(evt,fn,false);
} else if (obj.attachEvent) {
obj.attachEvent('on'+evt,fn);
}
}
addEventHandler(document, 'load', function(){
//set up all handlers after loading the document
addEventHandler(document.getElementById('id'), 'click', b);
addEventHandler(document.myForm.typeSel, 'change', c);
});
it does work.

The reason why window.addEventListener works while document.getEle...().addEventListener does not is simple: window object exists when you're executing that code while element with id="abc" is still not loaded.
When your browser downloads page's sources the source code is parsed and executed as soon as possible. So if you place script in head element - on the very beginning of the source - it's executed before some <div id="abc">...</div> is even downloaded.
So I think now you know why
<div id="test">Blah</div>
<script type="text/javascript">document.getElementById("test").style.color = "red";</script>
works, while this:
<script type="text/javascript">document.getElementById("test").style.color = "red";</script>
<div id="test">Blah</div>
doesn't.
You can handle that problem in many ways. The most popular are:
putting scripts at the end of document (right before </body>)
using events to delay execution of scripts
The first way should be clear right now, but personally I prefer last one (even if it's a little bit worse).
So how to deal with events? When browser finally download and parse whole source the DOMContentLoaded event is executed. This event means that the source is ready, and you can manipulate DOM using JavaScript.
window.addEventListener("DOMContentLoaded", function() {
//here you can safely use document.getElementById("...") etc.
}, false);
Unfortunately not every browser support DOMContentLoaded event, but as always... Google is the anwser. But it's not the end of bad news. As you noticed addEventListener isn't well supported by IE. Well... this browser really makes life difficult and you'll have to hack one more thing... Yes... once again - Google. But it's IE so it's not all. Normal browsers (like Opera or Firefox) supports W3C Event Model while IE supports its own - so once again - Google for cross-browser solution.
addEventListener might seems now the worst way to attach events but in fact it's the best one. It let you easly add or remove many listeners for single event on single element.
PS. I noticed that you consider of using Load event to execute your scripts. Don't do that. Load event is execute too late. You have to wait till every image or file is loaded. You should use DOMContentLoaded event. ;)
EDIT:
I've forgotten... dealing with cross-browser event model is much easier when you're using some framework like very popular jQuery. But it's good to know how the browsers work.

are you familiar with jQuery?
its a javascript library featuring some really awesome tools.
for instance if you want to have some js action done just after your page if fully loaded and all DOM elements are created (to avoid those annoying exceptions) you can simply use the ready() method.
also i see you want to attach click \ change events jQuery takes care of this too :) and you don't have to worry about all those cross-browser issues.
take a look at jQuery selectors to make your life easier when attempting to fetch an element.
well thats it, just give it a shot, its has a very intuitive API and a good documentation.