I can not get the html4Mode option to work for me.
I am using the ajaxify script (https://github.com/browserstate/ajaxify) on a very simple two page app. Everything works fine in html5 capable browsers, but if I want to force the html4 fallback for testing purposes nothing changes, it seems history ignores the options and continues to use html5 push state urls.
To force the fallback I just changed the ajaxify script adding (on DOM ready):
History.options.html4Mode = true;
(I am using the v1.8b1 jquery html4+5 bundle script )
Is there a way to get this working?
To properly initialize the options for history.js, the options must be set before the script is included on the page. This could look similar to the following:
<script type="text/javascript" language="javascript">
window.History = { options: { html4Mode: true} };
</script>
<script src="/scripts/jquery.history.min.js" type="text/javascript"></script>
If it is a requirement that the HTML4 flag be set on DOM ready, then you can use the delayInit option in the same way. Just note that you must call History.init() manually when you're ready:
<script type="text/javascript" language="javascript">
window.History = { options: { delayInit: true} };
</script>
<script src="/scripts/jquery.history.min.js" type="text/javascript"></script>
...
<script type="text/javascript" language="javascript">
$(document).ready(function () {
var userInput = true;
//some code gathering user input or something
window.History.options.html4Mode = userInput;
window.History.init();
);
</script>
Sources:
https://github.com/browserstate/history.js/pull/195
https://github.com/browserstate/history.js/issues/303
Note: I've successfully used the method demonstrated in the first example. The second I have not tested personally.
Related
Current:
<head>
<script src="Custom.JS">
<script src="jQuery.JS">
</head>
Need:
<head>
<script src="jQuery.JS">
<script src="Custom.JS">
</head>
I can't edit the document, but I can edit the script files. Any way to do this?
This is a bad scenario and the root cause should be fixed, however.. there are some "approaches".
Here is one that I am presenting. It assumes that jQuery.js cannot (and should not) be modified and should still contain all the relevant jQuery code, but Custom.js is fair-game and the code it runs can be treated asynchronously.
Consider if Custom.js looks like so (modify/fix as required):
(function (fn) {
if (window.jQuery) {
// jQuery already loaded, don't reload/reevaluate it
fn(window.jQuery);
} else {
// Use of document.write because document.head is not supported before IE9.
// (If IE9+ was the minimum version I would recommend doing the script
// insertions via DOM and using onload, as these would be available then.)
window.__CustomJs_OnLoad = function () {
// This now runs after jQuery is loaded (from the injected script)
del window.__CustomJs_OnLoad;
fn(window.jQuery);
};
// Script.onload could be used IE8+, but why not go all-the-way awesome?
// These scripts are guaranteed to run synchronously in document-order.
document.write("<script src=jQuery.js></sc" + "ript>");
document.write("<script>__CustomJs_OnLoad()</sc" + "ript>");
}
}(function ($) {
// The rest of Custom.js here - which should already be nicely wrapped
// in a function/module anyway, no?
}));
You can have enclose the entire body of custom.js in a function and then edit jQuery.js so that when it's done with its work it calls that function in custom.js, effectively switching their execution order.
Or, If you don't have control over jQuery.js, you can just copy and paste it's contents into the to of custom.js. That easy you'll have access to the jQuery functions, and when the jQuery.js file loads, it'll still be ok (it'll just redefine everything)
Try
<head>
<script src="jQuery.JS">
</head>
js
$.holdReady(true);
$.getScript("Custom.JS", function(script) {
$.holdReady(false);
})
$(document).ready(function) {
// do stuff
});
I am building simple site, in which I can create graph and use some algorithms on it. It is possible, that there will be many algorithms, so I have to think about way, how I will output so much data.
I have some html code (some fieldsets, inputs, buttons etc) for part of setting up graph and same for part of algorithms.
I had divided different parts to different tabs.
On first tab, where I set up graph, I have to use jQuery (to get value of inputs, to block/unblock some fields etc), on another tabs I have simple text at the moment.
The problem is: when I just had loaded page, all tabs working properly. When I click different tabs, data in div is chaging. But if I, firstly, try to create some vertexes or edges or do anything with graph and after that I will try to activate another tab, error is appearing. Look at the image, please:
It says:
TypeError: elem.nodeName.toLowerCase is not a function
var noData = elem.nodeName && jQuery.noData[ elem.nodeName.toLowerCase() ];
It refers to 3378 row of jquery-1.10.2.js file.
NOTE that if I did nothing on first tab (didn't try to manage vertexes/edges/etc) and pressing on any tab all is working fine.
It is not my error. Looks like it is error of compatibility. I don't understand. Can you clarify this for me? What can cause this error and how I can remove it? Thank you.
This is head part of my html code:
<!-- for tabs -->
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- for graph dracula framework -->
<script type="text/javascript" src="js/raphael-min.js"></script>
<script type="text/javascript" src="js/dracula_graffle.js"></script>
<script type="text/javascript" src="js/dracula_graph.js"></script>
<!-- my files -->
<script type="text/javascript" src="settings.js"></script>
<script type="text/javascript" src="algorithms.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
It will work fine if I rewrite part of code around 3378 row in jquery script. Rewrited acceptData method:
// A method for determining if a DOM node can handle the data expando
acceptData: function( elem ) {
if ( elem.nodeName ) {
var match = false;
if (typeof elem.nodeName.toLowerCase != 'undefined')
match = jQuery.noData[ elem.nodeName.toLowerCase() ];
if ( match ) {
return !(match === true || elem.getAttribute("classid") !== match);
}
}
return true;
}
If we handle error there, all working fine. It is very dirty solution, but it is just lab work, so I don't care :) I hope this answer will help somebody.
This is how I'm trying to hook into the mobileinit event:
$(document).bind("mobileinit", function() {
console.log("Mobile init");
});
But this doesn't work on Chrome (Latest version), Ripple v0.9.1 and on a BlackBerry bold 9790 running OS7.0.
Note: I also tried using .on() instead of .bind() but no luck. Both jQuery mobile versions (1.0.1 and 1.1.0) failed.
I've used this and it does work.
Is it possible something else is breaking the script or the mobileinit isn't being fired?
Does Chrome fire mobileinit?
I just found some code I used in jQuery Mobile 1.0 and we just upgraded to 1.1.0 and it works.
You're making sure to also include regular ol' jQuery, right?
jQueryMobile's docs do it, so I'm sure it works. Something else must be wrong. Sorry I'm not much help. Do you have any more info? Or try with a different device.
[edit] On that same self page, it says "Because the mobileinit event is triggered immediately, you'll need to bind your event handler before jQuery Mobile is loaded. Link to your JavaScript files in the following order:"
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script> <!-- Note your script before jqm -->
<script src="jquery-mobile.js"></script>
Looks like the script order can matter.
Here is another simple example that works with me (for android and ios)
<script type="text/javascript" src="files/resources/lib/jquery/jquery-1.8.2.js"> </script>
<script type="text/javascript">
$(document).bind("mobileinit", function()
{
if (navigator.userAgent.toLowerCase().indexOf("android") != -1)
{
// your logic here
$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';
}
if (navigator.userAgent.toLowerCase().indexOf("msie") != -1)
{
// your logic here
$.mobile.allowCrossDomainPages = true;
$.support.cors = true;
}
});
</script>
<script type="text/javascript" src="files/resources/lib/jquerymobile/1.3.2/jquery.mobile-1.3.2.js"></script>
include the main jquery file
bind mobileinit before jquery mobile
include jquery mobile js file
I'm creating a site which uses Cufon and is particularly heavy in terms of page-weight due to a large amount of Javascript. Therefore I'm trying to load in the script asynchronously with head.js ( http://headjs.com/ ) like so:
head.js("http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js", function() {
head.js("/js/libs/cufon-yui.js", function() {
head.js("/js/shared/Stag_Bold_700.font.js" , function() {
Cufon.replace('h1', { fontFamily: 'Stag Bold' });
});
});
});
So Jquery is downloaded first, the subsequent cufon lib file and cufon font are downloaded in sequence and then Cufon is finally called to replace the H1. Obviously, this is a trimmed down example with fewer replacements but this still doesn't work when just attempting to replace the H1.
The problem is that ONLY in Internet Explorer (6/7/8), the text is not replaced but I can see that Cufon has definitely been called. I can ascertain this because the tag has the class "cufon-active cufon-ready" added to it. When I inspect the markup using the IE Developer toolbar, the cufon/cufoncanvas tags are there inside the selected elements but are, for want of a better word, invisible.
In IE9, the script behaves as intended similar to Chrome and Firefox. I have tried adjusting the Cufon drawing engine and have updated to the latest 1.09i version for good measure. If I move the Cufon calling statements to the document ready event instead of loading asynchronously, it works but I am trying to optimize page load and my site will be using a number of Cufon fonts as well as many other JS plug-ins. I've also tried using both labs.js and head.js to load the appropriate files asynchronously.
I had the same problem - I addressed this by using the browser detection of head.js to do the following:
if (head.browser.mozilla || head.browser.webkit || head.browser.opera ||
(head.browser.ie && (head.browser.version == '9.0'))) {
head.js('script/jquery.min.js',
'script/cufon.js', function () {
head.js('script/bebas_neue_400.font.js', function () {
Cufon.replace('h1', {
textShadow: '1px 1px rgba(0, 0, 0, 0.2)'
}).now();
// or a head.js('scripts/file.with.cufon.replacement.js');
});
});
} else {
// here we load scripts depending on GZIP support for this browser
document.write('\x3Cscript type="text/javascript" src="script/jquery.min.js">\x3C/script>');
document.write('\x3Cscript type="text/javascript" src="script/cufon.js">\x3C/script>');
document.write('\x3Cscript type="text/javascript" src="script/bebas_neue_400.font.js">\x3C/script>');
document.write('\x3Cscript type="text/javascript" src="script/file.with.cufon.replacement.js">\x3C/script>');
}
You could also use conditional comments (I didn't because I am also doing GZIP support detection in JavaScript and needed to adjust the scripts which are loaded dynamically.)
It's a hack, but should be useful enough until it's addressed within the library itself.
(I have also posted GIST with a more complete example here)
try calling
<script type="text/javascript"> Cufon.now(); </script>
just before </body> tag closes.
Try adding Cufon.now() after the Cufon.replace call, like so:
Cufon.replace('h1', { fontFamily: 'Stag Bold' });
Cufon.now();
I solved this in a way similar to CameraSchoolDropout's approach, except instead of using Document.write, I'm using IE conditional tags, and YepNope.js.
This issue on github says that they had problems using document.createElement('script'), and I just felt better using IE conditionals.
You can see an example page that I created at http://epraxadev.com/yepnope/
<head>
<style type="text/css">
#txt { visibility:hidden; }
</style>
<!--[if lte IE 8]>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="js/cufon-yui.js"></script>
<script src="js/adventor.cufon.js"></script>
<![endif]-->
<script src="js/modernizr.custom.js"></script>
<script>
yepnope([{
test: window.jQuery,
nope: {
'yJ': '//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js',
'yCufon': 'js/cufon-yui.js',
'yFont': 'js/museo.font.js'
},
callback: {
'yJ': function(){
console.log("YepNope loaded jQuery! This isn't IE!");
}
},
complete: function() {
console.log('All browsers, including IE, will show this');
Cufon.replace('h1');
$(document).ready(function(){
$('#txt').css('visibility', 'visible');
});
}
}]);
</script>
<noscript>
<style type="text/css">
#txt { visibility:visible; }
</style>
</noscript>
</head>
For now just load jQuery and Cufón using regular <script> tags and load the subsequent files using a script loader.
Using document.write is a bad approach since it will only work if the script is loaded/executed before DOMReady and using browser sniffing to do it isn't a good approach either since it can give false results.
Conditional comments aren't a good solution either because you may need to update the scripts in the future and you will have to remember to update it in 2 different places which is bad for maintainability.
Follow this issue on GitHub to know when the bug is fixed.
I've just stared using JQuery and SoundManger2, and I have noticed that SoundManager has problems in certain situations where JQuery is used. And it also depends if Firefox (3.6.13) or IE(8.0.7600) is being used.
All I'm trying to test is weather I can play a sound or not. In each example I will show the code first and after the code I will identify if IE and FireFox succeeded or failed.
<html>
<head>
<title></title>
<script type="text/javascript" src="/Project/PublicWebSite/Scripts/soundmanager2.js"></script>
<script type="text/javascript" src="/Project/PublicWebSite/Scripts/jquery-1.5.js"></script>
<script type="text/javascript">
soundManager.debugMode = true;
soundManager.defaultOptions.volume = 50
soundManager.debugFlash = true; // enable flash debug output for this page
soundManager.url = '/Project/PublicWebSite/Scripts/swf/soundmanager2.swf';
soundManager.flashVersion = 8; // optional: shiny features (default = 8)
soundManager.useFlashBlock = false; // optionally, enable when you're ready to dive in
//enable HTML5 audio support, if you're feeling adventurous. iPad/iPhone will always get this.
//soundManager.useHTML5Audio = true;
soundManager.onready(function () {
soundManager.createSound('helloWorld', '/Project/PublicWebSite/Content/Sounds/Chime.mp3');
soundManager.play('helloWorld');
});
</script>
</head>
<body>
</body>
</html>
IE: Success; FireFox: Success
In following code everything is the same except I add the configuration for SoundManager in JQuery document load.
<html>
<head>
<title></title>
<script type="text/javascript" src="/Project/PublicWebSite/Scripts/soundmanager2.js"></script>
<script type="text/javascript" src="/Project/PublicWebSite/Scripts/jquery-1.5.js"></script>
<script type="text/javascript">
$(function () {
soundManager.debugMode = true;
soundManager.defaultOptions.volume = 50
soundManager.debugFlash = true; // enable flash debug output for this page
soundManager.url = '/Project/PublicWebSite/Scripts/swf/soundmanager2.swf';
soundManager.flashVersion = 8; // optional: shiny features (default = 8)
soundManager.useFlashBlock = false; // optionally, enable when you're ready to dive in
//enable HTML5 audio support, if you're feeling adventurous. iPad/iPhone will always get this.
//soundManager.useHTML5Audio = true;
soundManager.onready(function () {
soundManager.createSound('helloWorld', '/Project/PublicWebSite/Content/Sounds/Chime.mp3');
soundManager.play('helloWorld');
});
});
</script>
</head>
<body>
</body>
</html>
IE: Success; FireFox: Fail
Changed the order of JQuery and SoundManger script references
<html>
<head>
<title></title>
<script type="text/javascript" src="/Project/PublicWebSite/Scripts/jquery-1.5.js"></script>
<script type="text/javascript" src="/Project/PublicWebSite/Scripts/soundmanager2.js"></script>
<script type="text/javascript">
$(function () {
soundManager.debugMode = true;
soundManager.defaultOptions.volume = 50
soundManager.debugFlash = true; // enable flash debug output for this page
soundManager.url = '/Project/PublicWebSite/Scripts/swf/soundmanager2.swf';
soundManager.flashVersion = 8; // optional: shiny features (default = 8)
soundManager.useFlashBlock = false; // optionally, enable when you're ready to dive in
//enable HTML5 audio support, if you're feeling adventurous. iPad/iPhone will always get this.
//soundManager.useHTML5Audio = true;
soundManager.onready(function () {
soundManager.createSound('helloWorld', '/Project/PublicWebSite/Content/Sounds/Chime.mp3');
soundManager.play('helloWorld');
});
});
</script>
</head>
<body>
</body>
</html>
IE: Fail; FireFox: Success
If all I was doing was making static web pages this wouldn't be a problem. I'm creating code in asp.net MVC using layers and such and the order of how things get loaded is imporant. This is how I orginally stumbled upon this problem.
Since I'm a noob to JQuery and SoundManger, there is a very good possibility that I'm doing something wrong. If anyone has any comments of how to do this better, I would appricate any answers. I banged my head against my keyboard for a good while, before I figured this out and hope this will help someone else.
Update
When sound doesn't play I get the following info from SoundManager2
-- SoundManager 2 failed to load (security/load error) --
soundManager.disable(): Shutting down
soundManager: Failed to initialise.
soundManager: Verify that /Project/PublicWebSite/Scripts/swf/soundmanager2.swf is a valid path.
soundManager: No Flash response within expected time. Likely causes: Loading soundmanager2_debug.swf may have failed (and/or Flash 8+ not present?), Flash blocked or JS-Flash security error. See SWF output for more debug info.
soundManager: Getting impatient, still waiting for Flash...
soundManager::initMovie(): Waiting for ExternalInterface call from Flash..
soundManager::initMovie(): Got EMBED element (created via JS)
soundManager::createMovie(): Trying to load ./soundmanager2_debug.swf
-- SoundManager 2 V2.97a.20110123 (AS2/Flash 8), normal polling --
I noticed in Firebug and Fiddler that when I get this error, SoundManger tries to find
soundmanager2_debug.swf # /project/PublicWebSite/static/. The problem is that my swf files are not located there. This is where my HTML file is located.
Update
Simon, that pointed me in the correct direction. I didn't have to change anything in the soundmanger2.js file as mentioned at http://www.schillmania.com/projects/soundmanager2/doc/getstarted/#lazy-loading .
I just remove the refernce to the SoundManger script and dynamicly loaded the script using JQuery ajax call.
<html>
<head>
<title></title>
<script type="text/javascript" src="/Project/PublicWebSite/Scripts/jquery-1.5.js"></script>
<script type="text/javascript">
$(function () {
$.ajax({
url: '/Project/PublicWebSite/Scripts/soundmanager2.js',
dataType: 'script',
success:
{
soundManager.debugMode = true;
soundManager.defaultOptions.volume = 50
soundManager.debugFlash = true; // enable flash debug output for this page
soundManager.url = '/Project/PublicWebSite/Scripts/swf/soundmanager2.swf';
soundManager.flashVersion = 8; // optional: shiny features (default = 8)
soundManager.useFlashBlock = false; // optionally, enable when you're ready to dive in
//enable HTML5 audio support, if you're feeling adventurous. iPad/iPhone will always get this.
//soundManager.useHTML5Audio = true;
soundManager.onready(function () {
soundManager.createSound('helloWorld', '/Project/PublicWebSite/Content/Sounds/Chime.mp3');
soundManager.play('helloWorld');
});
}
});
});
</script>
</head>
<body>
</body>
</html>
IE: Success; FireFox: Success
BarDev
The problem here is not the use of jquery in particular but the fact, that you are binding the configuration of Soundmanager2 to the DOM-ready event. Soundmanager2 itself also binds its loading routines to this event, so if your configuration code is not executed until this event occurs, it could already be too late, depending on the ordner in which the browser calls those event handlers.
I am no SM2 expert (never used it), but I've just stumbled upon a "lazy loading" feature of the manager, that could help, as it should allow you to defer the loading process of Soundmanager2 and explicitly load it after your configuration code has been called:
http://www.schillmania.com/projects/soundmanager2/doc/getstarted/#lazy-loading
i recently released an audio player framework that leverages SoundManager2 AND integrates w/ jQuery as a $.fn. -- very simple to use and/or customize.. similar to jPlayer in the front-end design, but w/ additional playback capabilities (eg RTMP streaming, full HTML5 support), examples, tests etc:
https://github.com/APMG/APMPlayer