I've got a weird problem. I'm using Bootstrap for a website that has to be optimized for IE8. When i test the html prototype in a real IE8 (no IE emulation) the javascript seems to be executed before the website is rendered.
To prevent this I placed the javascript at the bottom of the body and the script is surrounded by a window load function.
Do i miss something? I don't want to use a SetTimeout.
A short js code example.
$(window).load(function() {
// for example a function that resets the sliders offset
function reset_slider() {
$('.slider-main').css({'margin-top': '0px'});
}
reset_slider();
}
All Browsers beside IE8 execute this script after the site is rendered.
Thanks in advance
Marcus
Set your js function to load after the page has.
window.onload = yourfunction
or you could use:
<body onload="yourfunction();">
Related
Ok, I have a Jquery script, its function is to determine the width of the window, onload. If the width is greater than 642px it calls .load() to load an image slider. The reason for this is mobile devices will neither be served the images or js required for the slider.
This worked fine when jquery was loaded in the head. Upon moving to the footer its breaking. The code is included from the index.php. Could this be whats causing it? I would have thought once php built the page jquery parsed the content?
It appears the code is parsed before the jquery is loaded. Can anyone suggest a way to get round this please?
I have thought of creating the code as pure JS or using a delayed load, but I cant seem to figure out how to get it working.
There must be much better solutions? I feel like I’m missing something very obvious..
contents of the included script:
<script type="text/javascript">
$(window).bind("load", function() {
// code here
$(window).width(); // returns width of browser viewport
var width = $(window).width();
if (width >= 642) {
$('.slider-content').load("templates/include/slider.php", function () {
$('.slider-content').show(200);
});
}
else {
//alert('small')
}
});
</script>
Thanks,
Adam
In some environments, you must use jQuery() instead of $(). See this question.
Other than that, your problem might have to do with the document not being complete yet or binding to an event that has already passed. Try this instead:
jQuery(document).ready( function($) {
// Your code goes here. (You can safely use the $() function inside here.)
});
I included a script into my document's head that contains the following jquery code:
$('.unappreciatedIcon').click(function() {
alert('JS Works!');
});
In the body of my document I have following:-
<span class="unappreciatedIcon">.....</span>
But there is no alert displayed when I inserted the script into the document head from an external js file. When I had put this script in body simply below the target elements this worked flawlessly.
Thanks to you all:
I am getting this to work with the following code:
$(document).ready(function(){
$('.unappreciatedIcon').click(function() {
alert('fds');
})
});
Did you wrap your jquery in a $(document).ready(function() { // your code // }); ?
If not your jquery code is executing immediately and the browser has not loaded your span. You need to wait for the document to be ready (using the code above) before assigning events.
Update
$(document).ready(function() {
$('.unappreciatedIcon').click(function() {
alert('JS Works!');
});
});
When your script ran, it looked for an element having the class unappreciatedIcon. Nothing was found because the document is still being parsed and there was no node having the class unappreciatedIcon available in the document so far. The DOM is being constructed incrementally.
But when you put your script after the span element occurs, then $('.unappreciatedIcon') was found because it has been parsed and added to the DOM, so the click handler was tied to it.
Either run your code in a ready callback. The ready callback basically runs when the entire HTML has been parsed and the DOM is fully constructed which is usually a safe point to start running your JavaScript code that depends on the DOM.
$(document).ready(function() {
$('.unappreciatedIcon').click(...)
});
or put your code after the element occurs (don't need to wrap it inside the ready callback in this case),
<span class="someClass">..</span>
..
<script>
$('.unappreciatedIcon').click(...)
</script>
just going to go with basics but did you make sure to include the jquery library? If it doesn't work and it's in the code you can also open in firefox with firebug go to the console tab and see what error you have.
The javascript is being processed before the page has finished rendering. As Erik Philips suggested, you need to put this statement inside your $(document).ready() function to ensure the page is loaded before the statement is evaluated.
$(document).ready(function(){
$('.unappreciatedIcon').click(function() {
alert('JS Works!');
});
});
here is the fiddle http://jsfiddle.net/Pf4qp/
Since HTML loads from top to bottom, the head loads before the rest of the page. You could solve this problem by putting the link to your js file right before the end tag. However, its generally better practice to put the javascript link in the head.
A better alternative is to use the defer attribute in the script tag.
For example:
<script type="text/javascript" src="script.js" defer></script>
or
<script type="text/javascript" src="script.js" defer="defer"></script>
The second option is kind of unneccessary though. This attribute is pretty well supported. Internet Explorer has supported it since version 5.5 though apparently it is "buggy" through IE9. It has been fully supported since FireFox 3.5, Chrome 8.0, Safari 5.0. It also works with all current mobile browsers. I guess it is not supported by any Opera browsers though.
I'm trying to do some simple jQuery stuff 'dynamically' from within a MediaWiki content page. Its really just to 'beauty up' some different features.
I've done the following:
http://www.mediawiki.org/wiki/JQuery
http://www.mediawiki.org/wiki/Manual:$wgRawHtml (mainly for Paypal buttons initially)
The below code does not work. This is put in a blank content page.
<html>
<script>
$j(document).ready(function(){
$j('#test').hover(
function(){
$j('#test').attr('background-color','red');
},
function(){
$j('#test').removeAttr('background-color');
}
);
});
</script>
<div id="test">Howdy</div>
</html>
Nothing happens...
Any ideas?
Update:
I have attempted this simple solution with no result.
example.com/wiki/index.php?title=MediaWiki:Common.js
$j('#jTest-Howdy').hover(
function(){
$j('#jTest-Howdy').addClass('jTest-red');
},
function(){
$j('#jTest-Howdy').removeClass('jTest-red');
}
);
example.com/wiki/index.php?title=MediaWiki:Common.css
.jTest-red { background-color: red; }
example.com/wiki/index.php?title=jQueryTest
<html>
<div id="jTest-Howdy">Howdy</div>
</html>
as you can see here, this code should work IF jQuery was being loaded properly...
http://jsfiddle.net/5qFhv/
but it is not working for me... any help?
If you're using the jQuery that's loaded by MediaWiki 1.17, be aware that most JavaScript is loaded after page content. An inline <script> element is executed immediately when it's reached, so $j would not be defined at this time -- you'll probably see some errors in your JavaScript error console to this effect.
(Offhand I'm not sure about the jQuery that's included with 1.16; versions of MediaWiki prior to that as far as I know did not include jQuery.)
Generally what you want to do here is to either put JavaScript code modules into the 'MediaWiki:Common.js' page and let that hook up to your HTML markup, or create a MediaWiki extension -- which you can then invoke from your pages, and which will let you create any fun HTML and JavaScript output you like.
http://www.mediawiki.org/wiki/Manual:Interface/JavaScript
http://www.mediawiki.org/wiki/Manual:Developing_extensions
Code you put in your 'MediaWiki:Common.js' page will be loaded after other UI initialization, ensuring that code and variables are present so you can call into jQuery etc.
I don't know much about MediaWiki, but to me it looks like some simple javascript mistakes.
In the first sample you are trying to set an attribute on the element,
when you need to set the css or style attribute.
$j('#test').css('background-color', 'red');
In both samples you are binding an event to an element that doesn't exist yet in the DOM, so it will fail. You could use the live method, which will work for existing and future elements introduced in the DOM.
$j.('#test').live('mouseover', function(){
$j(this).addClass('hover-class');
}).live('mouseout', function(){
$j(this).removeClass('hover-class');
});
Hope that helps.
Try putting all your custom jQuery code in its own file, then load it as a module with ResourceLoader, after jQuery.
http://www.mediawiki.org/wiki/ResourceLoader/Migration_guide_for_extension_developers
Also, as a debugging method: completely load your site in Firefox, then enter your custom jQuery code in the console. If it works, your problem is a race condition. If it doesn't, jQuery isn't loading for some reason.
RESOLVED
I found the issue and am sorry to say it is quite idiotic. On some pages there was an extra closing bracket after the script type=javascript. Apparently Chrome and Firefox ignore the issue but Safari and IE threw up display errors. Thank you to everybody for the excellent support and guidance on the matter. of note, i decided to go with the .show() method as it seemed most logical.
I have the following javascript snippet at the top of my page which validates 2 fields within a login form:
<script type="text/javascript">
$(function() {
$('#submit').click(function () {
$('#login_form span').hide();
if ($("input#user").val() == "") {
$("span#user").show();
$("input#user").focus();
return false;
}
if ($("input#pw").val() == "") {
$("span#pw").show();
$("input#pw").focus();
return false;
}
var overlay = $('<div id="overlay">');
$('body').append(overlay);
});
});
</script>
When a form is submitted (submit is clicked) the function is run which checks to make sure the 2 fields: pw and user have some content. If they do, it opens an overlay script to cover the screen. The function above sits at the top of my screen (in the head)
The CSS for the overlay is:
#overlay { background:#000 url(../images/loader.gif) center no-repeat; opacity:0.5; filter:alpha(opacity = 50); width:100%; height:100%; position:absolute; top:0; left:0; z-index:1000; }
In Chrome:
The function works well but the 'loading' image within the overlay does not show.
In Firefox:
Nearly the same as Chrome but the loading image DOES work if the javascript call is made at the bottom of the page.
In IE:
if the function stays in the head, my page is completely blank (though no server errors). Once I move to the bottom of the page, the loading image appears randomly and if it does, it is VERY slow in its animation.
perhaps I am doing something wrong but trying to build for all three browsers on something this simple is making me bonkers.
Any suggestions for improvement?
Thanks ahead of time.
UPDATE
First off thank you all for your suggestions so far. I have tried and number and get various results from each (as well as different results when run locally versus on our apache server).
One page in particular that seems to be of fury is this one:
https://www.nacdbenefits.com/myadmin/password-reset
In IE, the page just opens to a grey screen. I have updated the code to imbed the div id in the page itself and simply 'show' on a submit but apparently something else is catching a long the way.
UPDATE 2
Something else must be causing this to malfunction. When i strip the code even to:
<script type="text/javascript">
$(function() {
});
</script>
unless I move the code to the bottom of the page, IE just shows a dark screen with nothing there (no server errors again and no JS errors at page bottom).
I would have the overlay already existant in the page's HTML but hidden (display: none;), so that the background image is preloaded. Then, once my button is clicked, I would .show() it.
I think your code has a bug. I'm suprised Firefox manages to make something out of it. According to .append() you should pass it a string or an element. You're attempting to pass it a jQuery selector result (and a broken one at that). Remember, in jQuery $() is a function call! Compare your code (condensed):
$('body').append($('<div id="overlay">'));
with this (no $() call):
$('body').append('<div id="overlay" />');
or this (note closing the div tag):
$('body').append($('<div id="overlay" />'));
Have you considered having the overlay as part of your page's code, but simply display: none by default, and then simply .show()ing it when you want it to appear?
The head/bottom-of-page inconsistency can be fixed by running your binding when the DOM is ready, like this:
<script type="text/javascript">
$(document).ready(function() {
$('#submit').click(function () {
// code omitted for brevity
});
});
</script>
The following onload function call was working:
<script type="text/javascript">
function frameloaded() {
if (parent.leftframe) {
parent.leftframe.reportRightFrameReloaded();
}
}
</script>
</head>
<body onload="frameloaded();">
.... etc.
until I added an external javascript reference
<script type="text/javascript" src="sorttable.js"></script<
immediately before it. Then suddenly it started giving me "Object expected" in IE (I have IE8) and simply stopped working in Firefox (3.6.3). I figured there was a duplicate function name in the included file, so I gave it a random name and it still failed. I tried using
onload="this.frameloaded();"
and
onload="document.frameloaded();"
with no luck.
I tried moving my function above the included statement, but just got an empty frame.
Any ideas?
Thanks!
#Hamish was right. The problem was in sorttable.js. It uses window.onload, which conflicted with my BODY onload. In sorttable.js, there were several window.onload statements within some elaborate logic, so I couldn't just use the recommended solution in such cases, which would be to trigger all the required onload functions in the BODY onload event.
Instead, my solution, which I am not entirely comfortable with, is to put the contents of my frameloaded() method at the bottom of the BODY, but not inside a function. This way it executes as late as possible during the load process. This works (i.e. it runs after the tables that have to be loaded first have been loaded) in IE and Safari, but I am having trouble with the other browsers.