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 add These HTML Tag in $('body').append Script?

Javascript developer,
i have this script which i display html dynamically in my template :
$(document).ready(function() {
var credits= $('body').append('<div id="wrap"><div id="wrapp-inner"><div id="wrapleft"></div><div id="wrapright">Designed Templatezy</div></div></div>');
});
Now i want to add <a expr:href='data:blog.homepageUrl'><data:blog.title/>™</a> to that wrapleft div but its not working to display the blog title and nor it add the url of site.
Hint: this is a <a expr:href='data:blog.homepageUrl'> html/expression tag in blogger template which create link for your site homepage. like http://example.com where as <data:blog.title/> is a tag which display your blog title like "Stack Overflow". it is easy to add in a template but i found it hard when adding it to that append script.
I tried like below but thats not working:
$(document).ready(function() {
var credits= $('body').append('<div id="wrap"><div id="wrapp-inner"><div id="wrapleft"><a expr:href='data:blog.homepageUrl'><data:blog.title/>™</a></div><div id="wrapright">Designed Templatezy</div></div></div>');
});
So please anyone help me to add this <a expr:href='data:blog.homepageUrl'><data:blog.title/>™</a> after the wrapleft div in that append script. thanks.
Updates: i can add as general link in the script: like a href stackoverflow.com
$(document).ready(function() {
var credits= $('body').append('<div id="wrap"><div id="wrapp-inner"><div id="wrapleft">stackoverflow</div><div id="wrapright">Designed Templatezy</div></div></div>');
});
and this work, but how to add <a expr:href='data:blog.homepageUrl'><data:blog.title/>™</a> in the script to work, it is simple to add in template and display title of site with title, but how to add in that script inside append after leftwrap. i add it but it comes as plain texts.

A possible solution:
You can add <a expr:href='data:blog.homepageUrl'><data:blog.title/>™</a> in your template as:
<div id="blogHomepageUrlLink" style="display: none;">
<a expr:href='data:blog.homepageUrl'><data:blog.title/>™</a>
</div>
So your template handler can process it.
Then with your jQuery:
$('body').append('<div id="wrap"><div id="wrapp-inner"><div id="wrapleft"></div><div id="wrapright">Designed Templatezy</div></div></div>');
You should be able to add the link with:
$("#wrapleft").html($("#blogHomepageUrlLink").html());
Or combined:
$('body').append('<div id="wrap"><div id="wrapp-inner"><div id="wrapleft">'+$("#wrapleft").html($("#blogHomepageUrlLink").html())+'</div><div id="wrapright">Designed Templatezy</div></div></div>');

Since you are using a template language, the template language might be processed before the output reaches the browser. If it is not, if it is somehow handled after it reaches the browser, then jQuery might be attempting to strip unwanted code from .html() and instead may not recognize the tags. You can also use .text() if you want something a little more cut-and-dry.
However, to answer your question in the purest form (via jQuery).
In your second example you wrapped everything in a div tag but this can be accomplished using .wrap() ... what you should do is use the selector to locate what segment of the page you want. Also, please note you wrote "wrapp-inner" not "wrap-inner" ...
Let's go back to your original issue. You want append a link to the bottom of a page. In the doc ready function:
$('body').append("somehtml"); // append to body
However, to maintain sanity, instead you should create a "target" div to populate. Example:
HTML (in body):
<div id="credits"></div>
In Document Ready:
$('#credits').append("somehtml");
See this jsfiddle which demonstrates both.
https://jsfiddle.net/83fbnwe4/
And this shows the distinction between .html() and .append, as well as a way to .html() to effectively append:
https://jsfiddle.net/83fbnwe4/2/
Update
To include the other answer with some additional approach, basically you could display it from the jump and hide it with CSS, or hide it with jQuery:
$('#mylink').hide();
If you want to make the href dynamic -- populate it later than the time the code is rendered by your template parser - or if including content based on an AJAX request or simply via javascript event in some way, you can change it after the fact using DOM parsing.
// Simple:
$("#mylinkid").attr('href', 'http://www.live.com/');
//Complicated:
$("a[href^='http://stackoverflow.com']").each(function() {
this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/,
http://stackoverflow.com");
});
(borrowed from How to change the href for a hyperlink using jQuery #179713)

Change all external links using jQuery

I want to change all external links on my blog (blogspot here, that's why I'm looking for jQuery code) without changing the posting of my blog because I need a lot of work if I do that.
For example, my website is example.com.
I want to change all external links to
http://example.com/p/go.html?url=http://externallink.com
without need for any changes on my blog post. I don't have any idea to start with.
SOLVED: https://gist.github.com/2342509 Thanks everyone :D I just need to change it a bit.

In jQuery you can try:
// DOM ready
$(function(){
$('a[target="_blank"]').prop('href', 'http://example.com/p/go.html?url=http://externallink.com');
});
Ofcourse this will only work if you have set the target="_blank" property/attribute in HTML and if you want all links to open the same url. This idea derives from the fact you want to have external links open automatically in a different tab/window.
If this is not the required functionality, you can use a custom data- attribute in a similar way. Only difference is you will need to loop each link, and get the data from it.
// DOM ready
$(function(){
$('a[data-href]').each(function(){
var anc = $(this),
href = anc.prop('href'),
dataHref = anc.data('href');
anc.prop('href', href + '?url=' + dataHref);
});
});
HTML example:
external link
And now you will probably need to add more information if that is still not what you want.

Going off of #Tim Vermaelan's answer, you could try this, which will check for every link that doesn't start with your website's URL without relying on it being target="_blank":
$('a:not([href^="http://yoursite.com"])').prop('href', 'http://example.com/p/go.html?url=http://externallink.com');

Is there a way to make images inside display:none not get downloaded by the browser?

I want the browser (mobile webkit especially) to NOT download images that are inside display:none divs. Right now, they get downloaded and not rendered.
Is there a jquery plugin to do this?

you can use data-* attributes. that way, you can have jQuery load them on demand:
<img data-source="image_path">
//this one gets all images and loads them
$('img').each(function(){
//loads the source from data-source
this.src = this.getAttribute('data-source');
});
<img data-source="image_path" class="foo">
<img data-source="image_path" class="foo">
//this one gets all images that have class foo and loads them
$('img.foo').each(function(){
//loads the source from data-source
this.src = this.getAttribute('data-source');
});
ofcourse you need to wrap this in a function so that you can call which images on demand. like:
function loadImg(selector){
$(selector).each(function(){
this.src = this.getAttribute('data-source');
});
}
//load images with class foo:
loadImg('.foo');

I don't think so. To be sure, you would need your original HTML DOM to exclude the hidden images, which you could do with server-side programming based on user agent sniffing (although that is not recommended). Modifying the DOM after document.ready or document.load will mean that the browser has already had a chance to request assets from the server even if they might not be displayed.
It would be unusual but if you still want to use jQuery you could follow #Pointy's advice and make all images placeholders in your markup. Then replace the :visible placeholders with the images you want using an attribute as the data source. No plugin is needed, just use something like replaceWith() or attr() to swap out the placeholder node for the image you want downloaded or change the src attribute.
I would use a 1x1 transparent gif as the placeholder with the correct height and width attributes rather than no source <img> for a placeholder. That way the page flow will be determined correctly when the page renders so it won't jump around as your images lazily load.

HTML buttons in javascript codes

I am working in a software which has its interface written in JavaScript
I am trying to add an HTML button to the interface by defining a button in the HTML main code, check how I did this http://dpaste.com/691324/
The problem is,, the button appears before the page loads, maybe because the HTML loads before the JS files, I don't know exactly !!! But it really looks ugly, when the button show before the page, and I want to find some trick that can delay the button or to be loaded at the same time with the javascripts..how is this possible?

I am not a javascript person, but if you are using JQuery, it should go something like this
$(document).ready(function() {
document.getElementById('divId').innerHtml = '<input type="button" value="button">';
});
'divId' would be id of Div tag (place holder) covering input tag.
Or you can also call some plain javascript function which sets innerHtml of 'divId' on 'Body' tag's onload event,

Well I think is that you should use an anchor instead, and if you want, style it as a button. Here is the way to create the button with pure JS:
var anchor = document.createElement('a');
anchor.setAttribute('href', '/opentripplanner-tripArabic/index.html');
anchor.setAttribute('class', 'please use CSS'); //inline styling is dirty
anchor.innerHTML = 'use the Arabic interface';
document.getElementById('header').appendChild(anchor);
I recommend to use anchors because you are not using a form, and you only pretend to redirect the user to another page. Either way if you want still the button, you can use document.createElement('button'); and asign the property onclick: button.onclick = function(){... instead of the href setting.
Another thing you can do is to hide the button with CSS: display:none and on load wet the element and remove the style: button.style.setProperty('display', ''); or either way use the CSS propperty visibility: hidden.