We Keep Coding

Show something that was hidden by default?

I have this code for a small jQuery game I'm making, and all the pictures (characters) are hidden by default. There's a question that says "Are you ready to play?" and a yes or no button. When you click the yes button, it hides the buttons and the text. It is also supposed to display the first image, which is #main. For some reason, it's not working.
Here's the jQuery code with the images under:
$(document).ready(function(){
$('#main,#batman,#car,#hobo,#knife,#gangfight,#ganggun,#gangknife,#blood').hide(-100);
var main=$('#main');
batman=$('#batman');
car=$('#car');
hobo=$('#hobo');
cop=$('#cop');
knife=$('#knife');
gangfight=$('#gangfight');
ganggun=$('#ganggun');
gangknife=$('#gangknife');
blood=$('#blood');
document.write('<title>LOAUP</title>');
document.write('<center><h1>The life of an unlucky person</h1></center>');
document.write('<center id="start">Are you ready to play?</center>');
document.write('<center><button id="yes">Yes</button><button id="no">No</button></center>');
$('#yes').click(function(){
$('#yes,#no').hide(function(){
$('#start').hide();
$('#main').show
});
});
$('#no').click(function(){
$('#yes,#no').hide();
$('#start').hide();
document.write('<center>Ok, come back another time then.</center>');
});
});
//Images below this (HTML)
<img id='main' src='/jquery/sprites/spritePerson.png' />
<img id='batman' src='/jquery/sprites/spriteBatman.png' />
<img id='car' src='/jquery/sprites/spriteCar.png' />
<img id='hobo' src='/jquery/sprites/spriteHobo.png' />
<img id='cop' src='/jquery/sprites/spriteCop.png' />
<img id='knife' src='/jquery/sprites/spriteKnife.png' />
<img id='gangfight' src='/jquery/sprites/spriteGangFight.png' />
<img id='ganggun' src='/jquery/sprites/spriteGangGun.png' />
<img id='gangknife' src='/jquery/sprites/spriteGangKnife.png' />
<img id='blood' src='/jquery/sprites/spriteBloodPuddle.png' />
Edit:
Here's the example:
http://jsbin.com/ocowas/1

In your #main click function change
$('#main').show
to
$('#main').show();
Your variable list should be comma seperated not colon seperated. and you may also want to rename your variables to make them more obvious and easier to read/remember by prefixing with a $ sign. For example when you store a selector as a variable use
var $element = $('#element'),
$element2 = $('#element2'),
$element23 = $('#element23');
Further, the hide() function does not take negative numbers as you have used. Just use hide() for an instant hide, or hide(100) for fast, hide(2000) for slow.. check: http://docs.jquery.com/Effects/hide
To append html to your document without using document.write, you can store the html as a variable, then select the body tag, or any other tag and append/prepend or replace the html to that, for example.
$('body').append(yourHTMLvar);
$('body').prepend(yourHTMLvar);
$('body').html(yourHTMLvar);
The 'title' tag should only appear between the 'head' tags of your html document. Use a heading tag instead, 'h1' to 'h6'.
The html 'center' tag is also deprecated as far as I know. Try using 'span', 'p' or even 'div' instead.

jquery animation issue in IE [duplicate]

i have jquery, but it is not going to next page, it always display images and waits, never proceed to next page.
HTML code:
<div id="toHide" class="pb-text-align-center">
<img style="display: inline" src="img/load.gif" />
<form wicket:id="safeForm" class="clearfix">
<input type="hidden" wicket:id="submitted" value="false" />
</form>
</div>
HTML view source:
<SCRIPT type="text/javascript">
var $ = jQuery.noConflict();
$('.toHide').show().doTimeout(100,function() {
$('.toHide').find('safeForma3').submit();});
</SCRIPT>
wicket code:
static private class SafeSubmitBehaviour extends AbstractBehavior{
public void onRendered( Component component ) {
super.onRendered( component );
StringBuffer buffer = new StringBuffer(200);
buffer.append("<script type=\"text/javascript\" >\n");
buffer.append("var $ = jQuery.noConflict();\n ");
buffer.append(" $('.toHide').show().doTimeout(100,function() { $('.toHide').find('");
buffer.append(component.getMarkupId()).append("').submit();});\n</script>");
component.getResponse().write(buffer);
}
}
buffer.append(component.getMarkupId()).append("').submit();});\n</script>");
i have tried with: $('.toHide').find('form').submit();});. But still no use.
After chaging $('.toHide') to $('#toHide'), page is going ot next page, but animation is not happening in IE6/7, it works fine in FF.

The "toHide" <div> has that string as it's id value, not it's class, so you need:
$('#toHide')
The selector ".toHide" looks for an element with "toHide" as part of the class, so that wouldn't find your <div> at all.
To find the form, you'd use
$('#toHide form').submit();

I think you should try this:
$('#toHide').find('form').submit();
Or if the form has an ID on it (I'm not familiar with Wicket) you can just use:
$('#safeForm').submit();
The ID selector uses a '#' charactor, not a '.', which is the class selector prefix.

There is no id named 'safeForm15' in your HTML, which is what your setTimeout is trying to select. In fact, the form has ID namespaced, which I believe is illegal to begin with.
Regardless, the quick fix is to cue off of 'toHide', and get rid of the component.getMarkupId bit.
$('#toHide').find('form').submit();
Added:
You need to change this:
buffer.append(" setTimeout(function(){ $(\"#").append(component.getMarkupId()).append("\").submit()}, 100);\n");
to this:
buffer.append(" setTimeout(function(){$('#toHide').find('form').submit();}, 100);\n");

This is a problem with IE, if you have a GIF that is not visible and then set it to visible the animation doesn't work.
Best thing to do is just used an empty image tag like this <img src='' /> and then when you want it to become visible set the src to the correct path i.e. <img src='AnimatingImg.gif' />.
It should work if you do it this way.
EDIT
You can do it like this:
<SCRIPT type="text/javascript">
var $ = jQuery.noConflict();
$('#toHide').show();
$('#loadingImg').attr('src', 'img/load.gif');
setTimeout(function() {
$('#toHide').find('safeForma3').submit();
}, 100);
</SCRIPT>
html code:
<div id="toHide" class="pb-text-align-center">
<img id="loadingImg" style="display:inline" src="" />
<form wicket:id="safeForm" class="clearfix">
<input type="hidden" wicket:id="submitted" value="false" />
</form>
</div>
Try that, might want a bit of fiddling though.

Others have mentioned the problem with your selector.
However, this code also appears naked between two script tags. This means that they will be executed as soon as they are parsed. This means that they could be executed before the whole DOM is loaded, rendering them ineffective.
You need to use something like this:
<SCRIPT type="text/javascript">
var $ = jQuery.noConflict();
$(document).ready(function(){
$('#toHide').show().doTimeout(100,function() {
$('#safeForma3').submit();
});
});
</SCRIPT>

Inline event handlers and anonymous functions

I have a need to dynamically include and run a script in a page. I am using an image onload event for this:
<img src="blank.gif" onload="DoIt" />
The DoIt function looks like this (just made up this example):
this.onload=' ';this.src='image.jpg';
I have no control on the page itself (I only control the HTML string that the page will call), so I need to include the DoIt function explicitly in the markup.
I tried using an anonymous function, but it didn't work:
<img src="blank.gif" onload="function(){this.onload=' ';this.src='image.jpg';}" />
Should I just write the script inline, like this:
<img src="blank.gif" onload="this.onload=' ';this.src='image.jpg';" />
And in this case are there any limitations (e.g. script length)?
Thanks for your help!

The this won't work inside the function since the function is called by the window object, therefore the this will refer to window.
If you want to wrap your code inside a function you must wrap that function, call it with the this set to the element or pass the this as a parameter:
<html>
<body>
<!-- call the function and set the this accordingly-->
<img src="foo.png" onload="(function(){...}).call(this)" />
<!-- pass the this as a parameter -->
<img src="foo.png" onload="(function(e){....})(this)" />
</body>
</html>
Yet this doesn't really make sense to me:
I have no control on the page itself (I only control the HTML string that the page will call),
Do you only have control over the img tags? If you can output abritary HTML, then why not just put something in a `script' tag?
Update
With a script block you could declare your function in there and then simply call it in the onload event.
<script>
function doIt(el) {
// code in here
console.log(el.id); // you could do stuff depending on the id
}
</script>
<img id="img1" src="foo.png" onload="doIt(this)" />
<img id="img2" src="foo.png" onload="doIt(this)" />
Now you need only one function for many images.
And if you need to get really fancy, you can setup your script tag to pull in jQuery or any other library.
<script src="somepathtojquery"></script>
<script>
// do jquery stuff in herep
If you need a lot of these handlers jQuery could do the job.
Still I'm asking my self when you have full control over the HTML why don't you use a library in the first place? :)

Try:
<img src="blank.gif" onload="(function(el){el.onload=' ';el.src='image.jpg';})(this)" />

Simpler DIV/JavaScript update?

This is a newbie question: Can the following HTML/JavaScript code be further simplified by just keeping the DIV to be updated + the INPUT button?
<div id="main_section" name="main_section">
<div id="update_div">Old stuff</div>
<input type="button" value="Update" id="update_button"/>
</div>
<script type="text/javascript" src="/jquery.js"></script>
<script type='text/javascript'>
$("#update_button").click(function() {
$("#update_div").html("New stuff");
})
</script>
Thank you.

You can even inline JavaScript code in your HTML but that is a horrible practice unless you know exactly what you're doing. Reads as:
<div id="update_div">Old stuff</div>
<input type="button" value="Update" onclick="$('#update_div').html('...')" />
If you want to encode the knowledge of what gets updated with that on click, then you can encode that knowledge in the HTML elements itself.
<div id='target'>Old</div>
<input type='button' value='Update' data-target='#target' date-value='New' />
In jQuery's onload, define this for all such buttons:
Since the data seems to be static here, a better global approach might be to define the data on the elements itself, and setup all handlers in one global sweep of the DOM.
$(function() {
$(':button').click(function() {
var dest = $(this).attr('data-target');
var value = $(this).attr('data-value');
$(dest).html(value);
});
});
The above code still requires external JavaScript but only need it once for all such button and div elements on the page.

jQuery replacement for onclick

I've just recently discovered the power of jQuery. Just a quick question though.
What is a replacement for onclick="DeleteSomething('THE ID NUMBER LOADED IN BY SERVER SIDE')" ?
Is there even a way somehow to pass custom information such as an ID to a jQuery onclick? Or do I have to stay with the old fashioned way?

I usually use a rel="" for some extra data i might need attached to the button or whatnot.
for example
<input class="btnDelete" rel="34" value="Delete" />
then in jquery
$('.btnDelete').click(function() {
DeleteMethod($(this).attr("rel"));
});

If you stick the ID of the object you want to delete in the rel parameter, you can do it this way:
<script type="text/javascript>
$('a.deleter').click(function(){
if($(this).attr("rel") != ""){
DeleteSomething($(this).attr("rel"));
}
});
</script>
Delete Widget

$(document).ready(function () {
$('#selector').click(function() {
//here goes your onclick code
});
);
Please, post some markup for more help.
Also, you should read the Getting started with jQuery resources, linked in the main page of the library.

In jQuery you would more likely do something like:
$('a').click(function(){
# code here
});
With 'a' being whatever selector you want to use to find the right link.
In response to your comment:
Probably the best way, as someone else mentioned, would be to provide the dynamic data in one of the attributes of the link:
<a rel="{id}" >
$('a').click(function(){
deleteFunction($(this).attr('rel'));
});

Instead of this:
<button onclick="DeleteSomething('THE ID NUMBER LOADED IN BY SERVER SIDE')">
Do this:
<button id="thing">
<script>
$(function() {
$("#thing").click(function() {
DeleteSomething('THE ID NUMBER LOADED IN BY SERVER SIDE');
}
}
<script>

It would much cleaner if you do it this way:
<tag class="someclass" prop1="id from serverside" />
$('.someclass').click(function(){
var prop1 = $(this).attr('prop1');
//DeleteSomething(prop1)
});

Use the server to replace {ID} with the actual ID.
HTML:
<form id="deleter">
<input type="hidden" name="id" value="{ID}" \>
<input type="submit" value="Delete" rel="{ID}" \>
</form>
jQuery:
$('form#deleter input[type="submit"]').click(function() {
var id = $(this).attr('rel');
DeleteSomething(id);
return false;
}
Don't forget to implement the deleting server-side also for people who don't have Javascript enabled!