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>

Insert D3 Graph into a div in CMS

I'm using Bludit CMS to build a simple website. The only task I could handle is to add a D3 Graph into the site. My Graph and the code looks pretty like this: http://bl.ocks.org/mbostock/1093130
The graph is displayed at the position, where I insert the script tag of the graph. The problem is, that I'm not able to add a script tag in Bludit CMS, only HTML.
Now, I thought about adding an empty div tag with an id to my CMS editor like
<div id="myGraph">
</div>
and add the graph programmatically to this div. How can I do that?
One further note: I want to try to do it only with Javascript without using jQuery. I don't want to include jQuery to my page only to add a graph to my website.

If you can't add JavaScript to a page you won't be able to use D3.
If you can load in code from an external file then use:
<script src="myfile.js"></script>
If you can only add it to every page rather than just one then check for your id and then execute the code.
if( d3.select("#myGraph") ) {
var svg = d3.select("#myGraph")
.append( "svg")
.attr("width", 1000)
.attr("height", 1000);
// Do stuff with SVG.
}

Make script load faster than html content

I'm creating a splash page using canvas and javascript that includes an "erasable" layer on top of HTML. The erasable canvas layer completely covers the html content in the background, and it is not to be visible until the user starts erasing.
However, upon loading, the html content shows up first and then the erasable layer appears. Is there a way for the erasable canvas layer to show up first without the user seeing the html content until erased?
I tried putting the erasable canvas and the script used by it before the HTML content, and it still does not work.
Any suggestions on how to solve this?
Thanks!

You could try making all your HTML content hidden and then with your JavaScript code make it visible when needed.

What looks like your problem is that your script is loaded before your HTML is being parsed. You could have several options like:
1) Have your JavaScript create your HTML content but also make sure it creates the erasable canvas first. You could do this several ways or even use XMLHttpRequest() to go fetch the HTML content.
2) As mentioned by #Beans, you can have something like this:
<script>
document.body.addEventListener('load', function () {
// your canvas code here (make sure it get displayed on top of body)
document.body.style.display = null;
});
</script>
<body style="display: none">
Some stuff here
</body>

Does external css get applied to the pdfs generated by jsPDF

I have started making some demos using jspdf. I have a html file and my css is in external file.
I have written the below code to generate my pdf
$('#pdfButton').on('click', function(){
var pdf = new jsPDF('p','in','letter')
, source = $('#main')[0]
, specialElementHandlers = {
'#bypassme': function(element, renderer){
return true
}
}
pdf.fromHTML(
source // HTML string or DOM elem ref.
, 0.5 // x coord
, 0.5 // y coord
, {
'width':700 // max width of content on PDF
, 'elementHandlers': specialElementHandlers
}
)
pdf.output('dataurl');
});
});
where main is the id of the div whose content I want to export as pdf.
The content is exporting as pdf but not the entire content(the pdf gets cut). It can be dynamic content. Also the css I have in external files are not getting applied , styles like table-row, background-color, etc are not getting applied.
How can I get my external css applied to the pdf before it is generated?
Is it even possible with jsPDF..? Any suggestions please.
Thanks in advance

As far as I know jsPDF doesnt take external css. It infact doesnt even take inline css. It is currently not suitable to use jspdf for converting html to pdf.
Hope this helps.

Bear in mind that when you are PDF'ing things in HTML, it is essentially printing them to a file. This means you need to create a print stylesheet ideally, but also bear in mind that print stylesheets mean that it ignores things like background color. The way around this would be to have a background image in your print stylesheet that is the color.
Also see this article, http://css-tricks.com/dont-rely-on-background-colors-printing/
Hope that helps

amCharts - Not displaying in jQuery tabs

I searched a solution for this problem and I came to this: http://blog.amcharts.com/2012/08/displaying-javascript-charts-in-tabs-or.html which seems easy enough. But when I apply that piece of code according to the example, the tabs stop working, I can't switch between them.
In URL there is some change according on what tab I clicked, but content isn't switching, tabs are not also. I can't figure it out even after two days of searching. Structure of my code is like that:
I got file with html code, JS code for tabs (just like in the example on amCharts site), plus function for loading content to the tabs from another files:
$("#zalozka_kalkulace").click(function(){
$("#detail_ceny_switch_ceny").addClass("open");
$("#detail_ceny_switch_ceny").removeClass("rucka");
$("#detail_ceny_switch_ceny").css({ 'height' : '478px', 'margin-bottom' : '-360px', 'margin-right' : '-475px', 'float' : 'left', 'top' : '-360px', 'width' : '871px' });
if($("#detail_ceny_grafy_kalkulaci").html() == ""){
$("#detail_ceny_grafy_kalkulaci").load('./safe/kalkulace_grafy_all.php?k_stupen=<? echo $k_stupen; ?>&k_polozka=<? echo $co; ?>',function(){
$("#detail_ceny_grafy_kalkulaci").removeClass("hidden");
});
}else{
$("#detail_ceny_grafy_kalkulaci").removeClass("hidden");
}
});
I got another file which contains everything that is displayed in the tab. That means div in which the chart should be displayed, plus JS code for chart data and chart itself (just like in the example on amCharts site)
Do you have any idea how to fix this? I got everything like in that example (I copied that) but just separated in the two files.

I don't think it will work like that. The JavaScript code loaded through jQuery.load does not get executed.
The solution would be to load HTML and JavaScript part separately using two AJAX requests: jQuery.load for HTML and jQuery.getScript for JavaScript part. Or, even better, modify the loaded script to include the HTML items, too.
I.e.:
In the main script:
$.getScript("./safe/kalkulace_grafy_all.php?k_stupen=<? echo $k_stupen; ?>&k_polozka=<? echo $co; ?>',function(){
$("#detail_ceny_grafy_kalkulaci").removeClass("hidden");
});
In the loaded script:
$("#detail_ceny_grafy_kalkulaci").html('<div id="chartdiv"></div>');
var chart = new AmCharts.AmSerialChart();
....
chart.write("chartdiv");