Mouseover calls multiple scripts - javascript

I am using 2 different scripts for a site of mine. One for modern browsers and one for IE.
Both use mouseover. How do I call both scripts? My code is:
onmouseover="mouseoversound.playclip(); playSound(0);"
That does not work yet I am unsure how to call both.

you can detect the IE like this,
onmouseover="Play()"
In Play function detect the browser ( http://www.javascriptkit.com/javatutors/navigator.shtml ) and call relevant function,
function Play(){
if (navigator.appName == 'Microsoft Internet Explorer'){
//your function for IE
}else{
// your function for other browsers
}
}

Related

javascript works on all browsers except IE

I have some web pages that load an external JavaScript file like this:
<script src="sorttable.js"></script>
This package comes from here: sorttable
I reference it in an onload function like this:
<script type="text/javascript">
window.onload = function() { sorttable.innerSortFunction.apply(document.getElementById("Symbol-2"), []); }
</script>
This works perfectly on Firefox and Chrome, but on IE version 9.0.2 it fails with these messages:
HTML1113: Document mode restart from IE9 Standards to Quirks
SEC7111: HTTPS security is compromised by javascript:void(0)
SCRIPT5007: Unable to get value of the property 'apply': object is null or undefined
This is an internal website, and 9.0.2 is the version my company deploys, and I cannot upgrade to a newer version.
Can I make this work on IE as well as the other browsers?
It looks like the SortTable library is using some sort of hacky browser detection in an attempt to initialize the library at the earliest possible time:
(excerpt from library source code)
/* for Internet Explorer */
/*#cc_on #*/
/*#if (#_win32)
document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
if (this.readyState == "complete") {
sorttable.init(); // call the onload handler
}
};
/*#end #*/
It looks like IE is rejecting this because of the attempt to use a script with the URL javascript:void(0) on a page accessed over HTTPS.
The library also has a catchall to use the onload handler if it doesn't have a browser-specific approach for the initialization:
window.onload = sorttable.init;
but you are overwriting the onload handler with your own, so this never executes.
I think the simplest solution is just to modify your onload handler to perform the initialization:
window.onload = function() {
sorttable.init();
sorttable.innerSortFunction.apply(document.getElementById("Symbol-2"), []);
};
and you should be all set. The init() method has an internal check to prevent it from performing the initialization twice, so you don't need to worry about issues from calling it if it has already been called.
You most likely need to set your doctype correctly. If you're using <!DOCTYPE html>, then try adding
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
or
<meta http-equiv="X-UA-Compatible" content="IE=9">
to your <head>.
Also, make sure there is nothing occurring before the doctype. Including whitespace and newlines. Check the output of the html, not the source from your server-side code.
Otherwise fall back to a different doctype and re-test your other browsers.
It is a security issue with IE although this might fix it:
<script type="text/javascript">
sorttable.innerSortFunction.apply(document.getElementById("Symbol-2"), []);
</script>
scripts are already synchronous, but if that doesn't work try moving the script to after the body tag

Javascript/jQuery not working in IE

This code works in all browsers except for IE. Anything I can do to add support for it?
<script type="text/javascript">
$(document).ready(function() {
var currentArrayNum = 2;
$('#names').on({
blur: function() {
currentArrayNum += 1;
var name = $("<p><input class='input' type='text' name='guests[]' value='' /></p>");
var nullFields = 0;
$(this).closest('div#names').find('input.input').each(function(){
if($(this).val() == ""){
nullFields++;
}
});
console.log(nullFields);
if(nullFields <= 1){
$('#names').append(name.fadeIn(500));
$('#leftbox').scrollTop($('#leftbox')[0].scrollHeight);
}
}
}, 'input');
});
</script>
It should mean that extra input fields are added. You can see it in action (in FF, Chrome, Safari etc) under 'Enter names for the guestlist' here.
EDIT
Tested in IE9 but doesn't work for me.
I should also ask if there's a way of testing in different versions of IE (and othe browsers) on a Mac?
Note that in some (all?) versions of IE, you need to have developer ("F12") tools open for console.log to work, otherwise console is undefined and so console.log() throws an error.
That may be your issue.
I know your question is about a week old but Im not sure if you found a solution or the reason for the cross-browser issues. I was recently working on a custom modal pop up window and I needed to find my scrollTop. Trust me, I love jQuery to death and I use it everyday but sometimes you need to use some good ol' javaScript. I.E accesses the body of the DOM differently than say Chrome or FF.
//I.E.
document.documentElement.scrollTop;
//Chrome, FF, etc.
document.body.scrollTop;
Basically, create a script that detects the user's browser and then include a conditional statement that will assign the value the appropriate way.
//Detect Browser
if (clientBrowser == "IE") {
currTopPos = document.documentElement.scrollTop;
} else {
currTopPos = document.body.scrollTop;
}
I created a script for one of the current projects Im working on, let me know if you would like to take a look at it.

Getting unload to work cross-browser's with a button

I am wondering if I can have the unload method in Javascript do a button.click; or a document.getElementById('target').click(), now I am working on different methods for different browsers but I can't seem to get them it working together.
The reason for this is I want to clear the information in the browser but I can't seem to get the unload method to work right. But I don't even know if the unload method is capable of doing a button.click or a document.getElementById('target').click(); Is there like a list of things this method can or cannot do? Here is the code I am trying to get working:
window.onunload=leave;
function leave() {
// For Internet Explorer only.
if (navigator.appName == "Explorer"){
document.getElementById('kioskform:broswerCloseSubmit').click();
}
// For Chrome only
if (navigator.appName == "Chrome"){
// add code for Chrome to use.
}
// for Safari only
if (navigator.appName == "Safari"){
// add code for Safari to use
}
// for Firefox only
if (navigator.appName == "Firefox"){
// add code for Firefox to use
}
}
So far the only thing working is IE but the other web browsers are not liking the code in the document. But I want to try other methods for the other browsers I am working with. But I can't seem to get browser detection to work at all, any idea's or suggestions or advice is greatly appreciated thank you.
Some browsers (Chrome / FF) does not support the window.onunload method.
See: http://bugs.jquery.com/ticket/10509

attachEvent / addEventListener to Window onload / load - preferred way

I have a script that starts when the page loads and I had been using this code below to start it:
if (window.addEventListener) {
window.addEventListener('load', otherRelatedParts, false);
}
else if (window.attachEvent) {
window.attachEvent('onload', otherRelatedParts );
}
but today I tried with a self invoking function like this:
(function() {
otherRelatedParts();
}())
It seems to work, in all browsers and is less code. Is this the preferred way to add events to the window load?
Your self invoking function will execute earlier than window.onload. It will execute at the moment the browser reads it. In most cases it actually does not make any difference so you can use it this way. Window.load is normally raised when all objects (images, JavaScript files etc) have been downloaded. $(document).ready() triggers earlier than window.onload - when the DOM is ready for manipulation.
I guess the above if clause is written to cover some cross browser issues. You should factor these things out of your code.
As other people have done this before, you might as well use some library as jQuery. You should look for .ready() there.

ExternalInterface.addCallback doesn't work on firefox?

i'm trying to call a method inside a flash movie from js, every time the mouse leaves the "div".
It works on Internet Explorer, but not in firefox. any ideas?
here is the html script:
<script type="text/javascript">
window.onload = function(e){
init();
}
function init(){
document.getElementById('div').onmouseout = function(e) {
method();
}
}
function method(){
flashid.anothermethod();
}
</script>
and the flash script:
import flash.external.ExternalInterface;
function outdiv(){
//do something;
}
ExternalInterface.addCallback('anothermethod', outdiv);
Any ideas what's wrong?
EDIT: here is example of the problem, there is an alert for the js and the flash should be able to remove the swf (see a gray background? it works! see a image, flash didn't receive the call):
http://complexresponse.com/out/addcallback_ff.html
this should work with internet explorer / safari / chrome (pc/mac) only firefox seams to reject this.
the problem is that the event probably doesn't fire because of the flash. try to handle the mouseout event in the flash on your main movieclip and see if it fires
Ensure that you're embedding flash with wmode set to "transparent". If not you won't get JavaScript events for DOM objects behind the flash object.

Categories

Resources