We Keep Coding

Uncaught ReferenceError: parentsCheck is not defined

I am very new to JS, but am trying to create a checkbox that when checked will reveal a div with an id of "second_row", and when unchecked will hide it (unchecked by default). Am I missing some code? Is my syntax incorrect? I could really use some help. Thanks for givin a newbie a hand!
Html:
<input type="checkbox" name="under_18" id="under_18" class="check" value="under_18" form="contest_form" onclick="parentsCheck()" />
JavaScript:
<script>
function parentsCheck()
{
var check1 = document.getElementById('under_18'),
if (check1.checked === true) {
document.getElementById('second_row').style.display = 'block';
}
else if (check1.checked === false) {
document.getElementById('second_row').style.display = 'none';
}
}
</script>
P.S. Dont know if it matters, but the checkbox is in a table cell.

Your , at the end of the var statement should be a ;.
It's causing a SyntaxError, causing the JavaScript block to be effectively ignored, so parentsCheck() is never defined.
var check1 = document.getElementById('under_18');
http://jsfiddle.net/tYv28/
As an aside, check1.checked will always return a boolean, so you don't need to do the === true and === false comparison; the following will work just fine:
function parentsCheck()
{
var check1 = document.getElementById('under_18');
if (check1.checked) {
document.getElementById('second_row').style.display = 'block';
} else {
document.getElementById('second_row').style.display = 'none';
}
}

When using event handler attributes, JavaScript only recognizes functions in the global scope. Try defining the event handler in your JavaScript, which also has the benefit of being unobtrusive:
var el = document.getElementById('under_18');
el.onclick = parentsCheck; // <---- This
jsFiddle
Also, you need to change the , into a ;.

Am I using the correct jQuery syntax?

I have the following code -
$(window).resize(function () {
if ($(window).width() >= 1023) {
for (var i = 0; i < seatInfo.length; i++) {
if (seatInfo[i].data == 'true') {
document.getElementById('Btn1').style.visibility = "visible";
break;
} else {
document.getElementById('Btn1').style.visibility = "hidden";
}
}
if (nameInfo[0].data == "true") {
document.getElementById('Btn2').style.visibility = "visible";
}
}
if ($(window).width() <= 1022) {
document.getElementById('Btn2').style.visibility = "hidden";
}
});
Is this is the correct way to write it? I notice that it contains a JavaScript and jQuery mix.

If you are specifically asking about the jQuery syntax then the answer is no. You are using the native JavaScript methods instead of the much shorter jQuery methods.
Take a look at some jQuery selectors. For instance:
An element with an id attribute of foo can be found using jQuery's id attribute selector #:
var element = $( "#foo" ); // match the element
Changing an elements visibility attribute is the same as changing any other css attribute:
element.css( "visibility", "visible" ); // change css properties
A great feature of jQuery is it's many shortcut methods. There are a few shortcut method to display and hide elements (and toggle them):
element.show()
element.hide()
element.toggle()

Why stop using jQuery half-way?
For document.getElementById('Btn1') use $('#Btn1').
For .style.visibility = "visible" use .show() (or, if you want to be very precise, .css('visibility', 'visible'))
There is lots of good documentation on the official jQuery site.

You can use $('#some-id').hide() and $('#some-id').show(). Instead of document.getElementById('some-id') with style.visibility = "visible" or style.visibility = "hidden".

you can use .css from jquery and set it as json structure to define one or multiple CSS attributes, this is more easier for me to remember.
$('#Btn1').css({
'property': 'value',
'property': 'value'
});
or just use it like this for a single attribute
var btn1 = $('#Btn1'),
btn2 = $('#Btn2'),
window = $(window);
window.resize(function () {
if (window.width() >= 1023) {
for (var i = 0; i < seatInfo.length; i++) {
if (seatInfo[i].data == 'true') {
btn1.css('visibility','visible');
break;
} else {
btn1.css('visibility','hidden');
}
}
if (nameInfo[0].data == "true") {
btn2.css('visibility','visible');
}
}
if (window.width() <= 1022) {
btn2.css('visibility','hidden');
}
});

jQuery div class changes

#myDiv is a clickable box, if #myDiv is clicked, there is a class .opened will be added. my jQuery reads
if ($('#myDiv').hasClass('open')){
var myValue = "1";
}else{
var myValue = "2";
}
Apparently, after the page completed loaded, myValue always equals 2, but after clicking #myDiv, myValue is still 2. what event should I use to detect whether my elements change? I'd like to support IE7+ as well. thanks!

try this solution : http://jsfiddle.net/charaf11/Emv8L/
function containOpen(){
if ($('#myDiv.open').length==1){
var myValue = "1";
}
else{
var myValue = "2";
}
}

You would have to rerun the code, there is no way for that code to change just because a class has been added/removed.
So when the click happens you would need to call a function that will set the value.

In your click event listener, suscribe your element a custom trigger $('#myDiv').trigger('openedClassAdded').
Then
$('#myDiv').on('openedClassAdded', function () {
myValue = '2';
});

How to determin that javascript has finished doing something

JS on ios is rather slow. For example in this piece of code, the Js adds the class before being able to add the block style. This breaks an animation i have on the page.
comments.style.display="block";comments.className = "show";
I have a workaround that fixes the issue on ios but just feels wrong:
comments.style.display="block";setTimeout(function(){comments.className = "show";},1)
Is there any way to determine if the block style has been set and only then trigger the second part?
Thanks for your suggestions!

Can't you just use an if?
<div id="foo" style="display: none;">foo</div>
var div = document.getElementById( "foo" );
if ( div.style.display == "none" ) {
div.style.display = "block";
}
If you want to listen to a class change (or a style change) "event", you can try these links:
Event detect when css property changed using Jquery <= this solves the problem without jQuery
jQuery - Fire event if CSS class changed
Trigger event using Jquery on CSS change?
Is it possible to listen to a "style change" event?
I think the first one will solve your problem. Here is the code:
document.documentElement.addEventListener( "DOMAttrModified", function( evt ){
if ( evt.attrName === "style" ) {
if ( evt.newValue.indexOf( "block" ) != -1 ) {
alert( "do something!" );
}
}
}, false );
document.getElementById( "foo" ).style.display = "block";

This is a glorious mess of a hack that may work:
comments.blockStyleEvent = function() {
if ( this.style.display === "block" ) {
this.onBlockStyleEvent.apply(this);
}
};
comments.onBlockStyleEvent = function() {
this.className = "show";
};
setInterval(function(){
comments.blockStyleEvent();
}, 1);
You could also create two css classes one show and another showAsBlock for example then you could do this:
// somewhere else
comments.className = "hide";
// ...then
comments.className = "showAsBlock";

Unable to make an Image blink getting ) expected error

I am trying to make an image blink which is a part of my web part on sharepoint.
<asp:ImageButton ID="imgbtn1" onclick="imgbtn1_Click" ImageUrl="~/xxxxx.gif" runat="server" onload="Javascript:return blink();" />
function blink() {
var e = document.getElementById("imgbtn1");
e.style.visibility = (e.style.visibility == 'visible') ? 'hidden' : 'visible';
setTimeout("blink();", 500);
}
Whenever I try to load the page with the image, i get ) expected error. Is there something wrong with my syntax? please let me know...

Use OnClientClick instead of OnClick. OnClick is for server-side:
I think this should work:
<asp:ImageButton ID="imgbtn1" OnClientClick="blink(); return false;" ImageUrl="~/xxxxx.gif" runat="server" />
function blink() {
var e = document.getElementById("<%=imgbtn1.ClientID%>");
e.style.visibility = (e.style.visibility == 'visible') ? 'hidden' : 'visible';
setTimeout("blink();", 500);
}
Notice how I changed the part where you get a reference to imgBtn. You need to use <%=imgBtn.ClientID%>
EDIT
Apparently I misunderstood the purpose of your OnClick
This should do it then:
<asp:ImageButton ID="imgbtn1" OnClick="imgbtn1_Click" ImageUrl="~/xxxxx.gif" runat="server"/>
window.onload=blink;
function blink() {
var e = document.getElementById("<%=imgbtn1.ClientID%>");
e.style.visibility = (e.style.visibility == 'visible') ? 'hidden' : 'visible';
setTimeout("blink();", 500);
}
If you think doing window.onload=blink is a big deal, then do this on Page_Load:
Page_Load()
{
imgBtn.Attributes.Add("onload","blink();");
}

You can't use the OnLoad attribute of <asp:ImageButton /> to execute JavaScript because that is used for setting a server-side event handler for the control's Load event. Here's a workaround:
In your server-side Page_Load handler:
imgbtn1.Attributes["onload"] = "blink()";

Check this out
http://msdn.microsoft.com/en-us/library/asz8zsxy.aspx
http://forums.asp.net/t/1038225.aspx/1
http://msdn.microsoft.com/en-us/library/aa479011.aspx
http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientid.aspx
always use
"<%=id.ClientID%>"
when you use getelementbyid in JavaScript if you are combining the asp and JavaScript because asp will change the id at run time so the server element id will be different and the client id which you are expecting will be different.