Develop Reference

How to make Javascript load on pageload

I want to make this JS function go from a button to a page load
I am integrating a jira issue collector into our webpage.
Bug Report
<script type="text/javascript" src=""></script>
<script type="text/javascript">window.ATL_JQ_PAGE_PROPS = {
"triggerFunction": function(showCollectorDialog) {
//Requires that jQuery is available!
jQuery("#myCustomTrigger").click(function(e) {
e.preventDefault();
showCollectorDialog();
});
}};</script>
To load when the page reloads I used the window.onload but that didnt work

Add a document complete jquery handler:
$(document).ready(function(){
showCollectorDialog();
});
This will run as soon as the document is fully loaded.

here you can do it it with jquery just like like this.You can place this at the end of your html file.And also include jquery cdn in script tags in your html file.
$(document).ready ( function(){
alert('hello world');
});​
or you can do this like this
function functionName() {
alert('hello world');
}
window.onload = functionName;

Looking for an easy answer, nothing works from existing googles.
No custom triggers needed.
Put this into your html head and it will trigger the form, I just tested it ;-)
<script type="text/javascript">
setTimeout(function() {
$('#atlwdg-trigger').trigger('click');
},100);
</script>
 

jQuery load() can not work with syntaxhighlighter

I use syntaxhighlighter in my page and it works well.
<pre id="code" class="brush:js">
some code here
</pre>
But it doesn't work when I save to a html file then use jquery load function to load them.
$(function(){
$("#code").load("test.html");
});
Everything is displayed well except the code scope. Could some one tell me why? Thx!
I figured it out, the solution is:
$(function(){
$("#code").load("test.html", function(){
SyntaxHighlighter.highlight();
});
});

Change #test into #code:
$(function(){
$("#code").load("test.html");
});

You will probably have to run this code to initialize the syntax highlighter after you have dynamically loaded your code.
SyntaxHighlighter.all()
this could probably be done by the following
$(function(){
$("#code").load("test.html", function() {
SyntaxHighlighter.all();
});
});

Load Un-clossable Jquery Modal on Page load

I am trying to force a user to first fill a form which will be in a un-closable modal and once the user enters the data he can get access to the website.
I am refering to this example.
-Example 5: the un-closable window
The modal is working exactly the way I want it but I am unable to make it load with the page.
I dont understand Javascript much thus I am stuck here.
I tried using this -
<script type="text/javascript">
$(document).ready(function() {
$("#ex5").dialog({modal: true});
});
</script>
But this didn't work.
Any help would really be appreciated.
Also please suggest any other un-closable popup modal which I can use instead of the one I have mentioned.

According to the jQuery UI Documentation, you can add the no-close class to the modal dialog to hide the close button.
Also, if your javascript is running too soon with $(document).ready(), you could try $(window).load().
Code included inside $( document ).ready() will only run once the page
Document Object Model (DOM) is ready for JavaScript code to execute.
Code included inside $( window ).load(function() { ... }) will run
once the entire page (images or iframes), not just the DOM, is ready.
http://learn.jquery.com/using-jquery-core/document-ready/
So you could try something like this, and make sure that there is an element with id="ex5".
<script type="text/javascript">
$(window).load(function() {
$("#ex5").dialog({modal: true,
dialogClass: 'no-close'});
});
</script>

Use this code to open modal with page load
<script type="text/javascript">
$(document).ready(function() {
$('#ex5').modal('show');
});
</script>
You find the detailed instructions about Bootstrap modal here http://getbootstrap.com/javascript/#modals

you Have to code like this, refer this coding,
$(document).ready(function () {
var outerThis = this, isCloseable = false;
$('#close-button').on('click', function (e) {
e.preventDefault();
if(outerThis.isCloseable) {
$('#ex5').hide();
outerThis.isCloseable = false;
}
});
});

How do you add $(document).ready(function() to joomla

I need to add this to joomla I've tried adding it to the template index.php file but it doesn't work any ideas?
<script type="text/javascript">
$(document).ready(function() {
$("nav#menu").mmenu(
{
classes: "mm-light"
});
});
</script>

You're Joomla site is importing jQueury in noConflict mode, therefore you must either use the jQuery alias, or pass the $ through the function, like so:
$doc = JFactory::getDocument();
$doc->addScriptDeclaration('
jQuery(document).ready(function($) {
$("nav#menu").mmenu({
classes: "mm-light"
});
});
');
The above code is PHP so you can place it anywhere in your template within PHP tags.
I've also noticed on your site that the responsive menu is now working. Tested in Chrome and Firefox.

4 lines of Javascript is ruining my page

I have this piece of Javascript on my page. I include it from an external js-file.
$( document ).ready(function() {
$.noConflict();
jQuery(".dato").fitText(1.2);
});
But it ruins some of the javascript in Twitter Bootstrap in TYPO3.
I can't see what is wrong.
If I comment it all out, there is no errors on the page.

You are mixing $ and jQuery selectors. Maybe this causes a conflict.
Try this:
$(".dato").fitText(1.2);
Check the HTML element which has the class "dato".