Develop Reference

Hide HTML Form Before the page loads using javascript

I would like to hide a HTML Form before even the page loads using javascript.
I was able to use display='none' style property to hide the form using javascript but the form content loads visible for a second before disappearing.
var searchbar = document.getElementById("searchform");
searchbar.style.display = 'none';
I have read many solutions in stackoverflow adding some css code in the page and display the content later using removeClass.
Problem is I do not have access to code behind the web page to add the CSS content. However I can add some custom javascript code only in header or a footer.(cannot use jQuery as well).
Please let me know if its possible hiding the form element as expected.
I am quite new to javascripting. Please provide your valuable suggestions.

edit: Sorry, if you only can use some javascript and cannot access the html or css there is probably no solution for your problem.

You can store all you form in a javascript variable, and write it in your div when the page is ready
Simple example :
function showForm(){
var container = $('#formContainer');
var form = '<input type="text" name="myInput">'; // Or you can load it from an external file
container.html(form);
}
$(document).ready(function(){
showForm();
});
But the best way is adding a css rule to hide your form, and show it when the page is loaded.

Web browser first render HTML. It takes time, while browser download css or js file. Best apprach would be to use inline display='none', not in css file.
<form style="display:none;">
...
</form>

How to dynamically attach javascript to ahref?

I have the following link, which I need to use in a Wordpress/OptimizePress based site.
Click Me
The problem is that the OptimizePress LiveEditor will strip out the javascript. So you are left with this:
<a>Click Me</a>
I'd like to attach the above javascript after the page has loaded. I have three such links (forms) on this page. Each will have the same javascript. I was thinking maybe provide unique IDs for each but I'm not sure what is the best way to do this. Any ideas?

You can get onClick attribute value on Dom ready & store it into any global var.
var clickAttr;
$(document).ready(function(){
clickAttr = $('form a').attr('onClick');
});
After that on Window load you can add attribute onClick
$(window).load(function(){
$('form a').attr('onClick',clickAttr);
});
I am not sure that your requirement is satisfy with this code or not, but you can try this.
Note: I am writing for A tag which is inside form without id or class, you can add a class or id to A tag.

Try after load:
var $a = $('Click Me')
$( "a:contains('Click Me')" ).replaceWith($a)

Javascript Run Action on click of a Hyperlink

My Javascript knowledge is extremely low, so sorry for this stupid question, but I have searched everywhere.
I'm using a single page scrolling script, but trying to add a navigation bar. The documentation references this for changing to a page:
$(".main").moveTo(3);
How do I make a link to run this? I just want a Hyperlink that runs this when clicked, but cannot work out how to do it.

You can use the selector for the hyperlink as
$('a').click(function () {
// paste your function here..
})
You can use a specific selector such as its class as
$('a.move').click(function () {
// function
}
Where its HTML will be as
Click Me

No, you don't. If the hyperlink does not link to a resource, it's not a hyperlink and you should not use the <a> tag. What you're describing is a "click to do something" element, which is the <button> element. Simply use this:
<button onclick="$('.main').moveTo(3)">click this</button>
And then use some CSS to make the button look like whatever you need it to look like (button default styling is just CSS, so turn off the border and background color, and now it looks like plain text)

How to create image buttons that activate jQuery/js function

I'd need to have like buttons inside tr elements to do js/jQuery things when clicked.
Strangely I'm having a hard time finding good knowledge on how to execute jQuery/js from inline html/image button.
Here's what I had in mind:
first create a custom function for the like button
jQuery.fn.likebutn = function(theword, wordnumber) {
//check if button is lighted up and if it is break
//change button to lighted up
jQuery(this).attr("src", "http://i46.tinypic.com/n18g3q.png");
//add word to a div element
jQuery('#cntrldiv0').append("<p>theword<p>");
//ajax like.php file with the word and username/id
jQuery.post('like.php', {theword:theword, userid: userid});
};
then dynamically insert the function call and it's parameters (as the table is being created in PHP) in the image button element (so inline in html)
likebutn({theword: ${'row' . $wordnumber}, wordnumber:$wordnumber});
Which outputs
likebutn(theword:foraminated, wordnumber:1)
for example.
So how do I evoke the function like that from html?
And on a side note, why is there so much event listening in jQuery/js image buttons I'm seeing when surfing the web (instead of what I'm suggesting), isn't that slower than evoking inline in html?
Here's how the construct would look: http://jsfiddle.net/Bc64R/

Unless you have a variable called foraminated, this is incorrect:
likebutn(theword:foraminated, wordnumber:1)
should be:
likebutn(theword:"foraminated", wordnumber:1)
from html:
<... onclick="jQuery(this).likebutn(...)">

Prefixing a URL in an window.open function jQuery

I have this HTML:
Track Your Package »
Somebody on this site was able to provide me with a script to prefix the URL with the domain http://www.example.com/ Here's the script:
$(document).ready(function(){
$('a[onclick^="window.open(\'TrackPackage.asp"]').attr('onClick', $('a[onclick^="window.open(\'TrackPackage.asp"]').attr('onClick').replace("window.open('", "window.open('http://www.example.com/"));
});
However, I am having a little trouble with this:
The first issue is where there is multiple instances of the element. Here's a fiddle: http://jsfiddle.net/VMmZx/
Instead of one anchor being signed with ID=4 and the other with ID=5 as intended, they're both being signed with ID=4.
The idea is, each window.open function should be prefixed with http://www.example.com however, the remainder of the URL should remain intact...
The second problem I'm encountering is when the element does not exist on a page, the remainder of the jQuery fails...
Here's another fiddle: http://jsfiddle.net/VPf32/
The <a> should get the class foo, but since the element does not exist on the page, the jQuery does not execute.
Since the JavaScript is being included in the HTML template of the ASP.NET server, this can create many problems.
I hope I've been clear and you can help me. Thanks.

You can use .each() to iterate over each matching element and change them individually:
$('a[onclick^="window.open(\'TrackPackage.asp"]').each(function(index, element) {
element = $(element);
element.attr('onclick', element.attr('onclick').replace(/open\('/, 'open(\'http://www.example.com/'));
});​
However, I don't think using links with a href of # and an onclick opening a window is as semantic as it could be. If possible, try changing the markup to this:
Track Your Package »
Now if someone is curious where it will lead them, the browser can show something useful in the status bar when you hover over it.
If you need to adjust the behavior further, add a class and bind for the click event. When they click, prevent the default action and open the window yourself, as you did before.

Why are you doing the click even inline like that? I would just output the links like:
Link Text
And then:
$('a[target=_blank]').click(function(){
var prefix = 'http://domain.com';
window.open(prefix + $(this).attr('href'));
});