I want a page to display the datepicker in french or Italian. To do so i import the datepicker and set it's default.
This is the imports :
...
<script src="/assets/jquery.ui.datepicker.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.datepicker-it.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.datepicker-fr.js?body=1" type="text/javascript"></script>
...
And in the body there is the following code:
<script type="text/javascript">
//<![CDATA[
$.datepicker.setDefaults($.datepicker.regional['it'])
//]]>
</script>
Despite it, the datepicker is in french.
However, if I type $.datepicker.setDefaults($.datepicker.regional['it']) in the JS console of firefox, my datepicker is now in italian.
I think the code is called because if i put a stop on it in the debugger, it is executed.
Why does the code embedded in the page is not called at the right time?
Related
I am creating a widget that will eventually sit on a clients site, and I need to create my own jQuery variable, so that the jquery versions don't conflict. Currently I have the following code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> // Clients own jquery.
<script type="text/javascript" src="sf_content/js/jquery-1.11.2.min.js"></script> // My jQuery.
<script type="text/javascript">
var $sf_jquery = $.noConflict(true);
</script>
Everything else works just fine, but jQuery slider stopped working when I changed to my own jquery:
TypeError: $sf_jquery(...).slider is not a function
Is the problem with the jQuery slider, or am I missing something else here?
Good plain javascript slider -tips are welcome as well!
Edit: Everything the widget needs, is inside function call like this:
$sf_jquery(function(){ // all of the code here });
Edit: The jQuery Ui is imported aswell. Just forgot to add it here. The importing looks like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> // Clients own jquery.
<script type="text/javascript" src="sf_content/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
var $sf_jquery = $.noConflict(true);
</script>
<script type="text/javascript" src="sf_content/js/jquery-ui.min.js"></script>
Edit, Solution!
Dummy me didn't think that the slider isn't part of the native jQuery. The noConflict must be after the jQueryUI, like this:
<script type="text/javascript" src="sf_content/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="sf_content/js/jquery-ui.min.js"></script>
<script type="text/javascript">
var $sf_jquery = $.noConflict(true);
</script>
You aren't including jQueryUI code (at least in your example).
Slider is part of jQueryUI and is not native to jQuery alone. (https://jqueryui.com/slider/)
Your "noconflict" function must be called before the second jQuery call.
I have included moment.min.js in my page
<script src="js/jquery.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/fatcalc.js"></script>
I can call
<script>document.write(moment());</script>
and it displays the date fine on my page.
But, when I call it from within fatcalc.js
var date = moment();
I get the error:
'moment' is not defined.
Why can my html page see it, but not the fatcalc.js file?
Well, I figured it out. Seems to be some issue with Jshint I don't understand but adding this to the top of my script fixed it.
/*global moment:true */
I have placed the following JQuery script in my HTML site header just to test if it works:
//in the header
<script src="modules/mod_djmenu/assets/js/catimage.js" type="text/javascript"></script>
//This is inside the script, it does load according to Chrome Developer Tools
$(document).ready(function(){
$("#navbar").hide();
});
navbar does not hide and I get the error (in Chrome Developer Tools):
Uncaught TypeError: Object # has no method 'ready'
Have I placed the script in the wrong place? I use Joomla for my site btw.
Site: europebathroom.com
Thanks in advance!
Include Jquery Library in head section
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src="modules/mod_djmenu/assets/js/catimage.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#navbar").hide();
});
</script>
Seems like you havent include jquery in your code. Include the jquery, either by refering online or save it as local.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="modules/mod_djmenu/assets/js/catimage.js" type="text/javascript"></script>
//This is inside the script, it does load according to Chrome Developer Tools
$(document).ready(function(){
$("#navbar").hide();
});
Add this below script. before your script as you need to add jquery script before it.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript">
I just installed the very basic level of ckeditor and noticed that it takes quite a while to load on each page load.
Here's a (HTML5) gif of the loading (this is slightly faster than normal): gif here
I'm not doing anything that would pop out as problematic so I'm not sure why it takes so long to load. Is there any way to have the textarea never show up, so that it doesn't look as if it's "popping" into the ckeditor like it does in the gif?
These are the only JS scripts that I have on this page:
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="ckeditor/ckeditor.js"></script>
Please help
Replace those scripts with:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ckeditor/4.3.2/ckeditor.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ckeditor/4.3.2/adapters/jquery.min.js" type="text/javascript"></script>
Remove the current <textarea> and replace your current CKEDITOR.replace(...) script with this:
<script>
$('<textarea/>').attr('id', 'text_field').css('visibility', 'hidden').appendTo('#ckeditorArea').ckeditor(function(textField) {
$(textField).css('visibility', 'visible');
});
</script>
This uses the jQuery adapters method .ckeditor() to initialize the editor on the new element, rather than using the traditional CKEDITOR.replace() method.
Initially the textarea will be in the page but hidden, then will be visible once the CKEditor interface is applied.
CKEditor Loading performance details:
http://ckeditor.com/blog/CKEditor-Loading-performance-details
I'm having some issues with prettyPhoto on one of my clients website. Here is the link for reference: http://www.browardmicrofilm.com/pages/kodak-vizit-essential.html
I've used prettyPhoto on multiple other websites without issue. However for some reason, this website just doesn't want to perform the script properly. Instead of opening an image in the lightbox clone, it simply opens it in a new page. Perhaps it has something to do with the hosting but either way, wanted to see what professionals like you think!
I'm using Firefox 26 (Mac version) and I used Firebug to determine the error:
TypeError: $ is not a function
$(document).ready(function(){
I've tried numerous solutions, including one that made me change "$" to "window.jQuery and then for some reason the next line in the code creates the same error.
Here's the my code for those of you that wish to skip the entire page source code:
In my header:
<link href="../prettyPhoto.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
The final script just before the closing body tag:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({
theme: 'light_rounded',
});
});
</script>
I know my links are good, which is why I'm not including them.
Vanilla jquery needs to be declared before any library built on top of it
<!--first, jquery-->
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
<!--then the rest-->
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
Error below is saying that jQuery is not loaded.
TypeError: $ is not a function
$(document).ready(function(){
Check your resources, my guess is that your paths are case sensitive and libraries are not being properly loaded.
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
Check your resources.
Make sure that jQuery is loaded before the plugin is loaded.
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
Ultimately I abandoned the prettyPhoto javascript and went with an alternative. Lightbox 2.0:
http://lokeshdhakar.com/projects/lightbox2/
It works just as I'd like and no problems.