hi friends my time picker is not working please some one help me
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"> </script>
<script type="text/javascript" src="../src/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.time').each(function () {
$('.time').timepicker({
hourGrid: 4,
minuteGrid: 10,
timeFormat: 'hh:mm tt'
});
});
});
You need to add timepicker library in your html
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.js">
</script>
<!-- Add this script tag -->
<script type="text/javascript" src="[timepicker_LOCATION]/jquery-ui-timepicker-addon.js">
</script>
https://github.com/trentrichardson/jQuery-Timepicker-Addon
Note: Also there is no need to loop through to each .time class
Remove the loop
$('.time').each(function ()
Related
Lightslider Jquery Code and mootols not working together if i remove jquery api code, so mootools working otherwise if i put jquery api code so then lightslider working (it is using jquery) but mootools not work then.
Mootools
<script language="javascript" type="text/javascript" src="/script/mootools-1.2.1-core.js"></script>
<script language="javascript" type="text/javascript" src="/script/mootools-1.2-more.js"></script>
<script language="javascript" type="text/javascript" src="/script/slideitmoo-1.1.js"></script>
<script language="javascript" type="text/javascript">
window.addEvents({
'domready': function(){
/* thumbnails example , div containers */
new SlideItMoo({
overallContainer: 'SlideItMoo_outer',
elementScrolled: 'SlideItMoo_inner',
thumbsContainer: 'SlideItMoo_items',
itemsVisible: 5,
elemsSlide: 2,
duration: 150,
itemsSelector: '.SlideItMoo_element',
itemWidth: 158,
showControls:1});
},
});
</script>
Lightslider
<link rel="stylesheet" type="text/css" href="/stylesheet/lightslider.css" />
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script src="/script/lightslider.js"></script>
<script>
$(document).ready(function() {
jQuery("#content-slider").lightSlider({
loop:true,
auto: true,
keyPress:true
});
});
</script>
I got my solution i was trying myself then it is working.
Just need to change two things one api link location 2nd $ will be jQuery
Like this
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script language="javascript" type="text/javascript" src="/script/mootools-1.2.1-core.js"></script>
<script language="javascript" type="text/javascript" src="/script/mootools-1.2-more.js"></script>
<script language="javascript" type="text/javascript" src="/script/slideitmoo-1.1.js"></script>
<script language="javascript" type="text/javascript">
window.addEvents({
'domready': function(){
/* thumbnails example , div containers */
new SlideItMoo({
overallContainer: 'SlideItMoo_outer',
elementScrolled: 'SlideItMoo_inner',
thumbsContainer: 'SlideItMoo_items',
itemsVisible: 5,
elemsSlide: 2,
duration: 150,
itemsSelector: '.SlideItMoo_element',
itemWidth: 158,
showControls:1});
},
});
</script>
<link rel="stylesheet" type="text/css" href="/stylesheet/lightslider.css" />
<script src="/script/lightslider.js"></script>
<script>
jQuery(document).ready(function() {
jQuery("#content-slider").lightSlider({
loop:true,
auto: true,
keyPress:true
});
});
</script>
i am using codeigniter bonfire for creating a web applicaion. i am using simple hide() and show() function of jquery but its not working. i will check all scripts no error on console..i cant understand why its not working.
I include jquery files are in ways :-
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/jquery-2.1.0.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/before.load.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/jquery-ui.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/jquery-migrate-1.2.1.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/bootstrap/js/bootstrap.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/richmarker-compiled.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/smoothscroll.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/bootstrap-select.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/jquery.hotkeys.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/jquery.nouislider.all.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/custom.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/maps.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/star-rating.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/jquery.gmap.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/locationpicker.jquery.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/bootstrap-editable.min.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/jquery.timeago.js" type="text/javascript" ></script>
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/jquery.magnific-popup.js" type="text/javascript" ></script>
All files are included correctly. There is no problem to including files.
Jquery code is-:
<script>
function regis_form() {
$('#is_owner').change(function() {
if (this.checked) {
$('#registration_fields').show();
} else
$('#registration_fields').hide();
});
}
</script>
And at a footer i am calling regis_form(); like :-
$(document).ready(function(){
regis_form()
});
Function is also calling correctly but div is not showing or hiding. Is any problem with sequence of including jquery files?
This below snippet seems to work for me,
<html>
<head>
<script src="https://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript" ></script>
<script>
function regis_form()
{
$('#is_owner').change(function () {
console.log("checked"+this.checked);
if(this.checked)
{
$('#registration_fields').show();
}
else
$('#registration_fields').hide();
});
}
</script>
</head>
<body>
<input type="checkbox" id="is_owner" />
<div id="registration_fields">
<p>Content visible</p>
</div>
<footer>
<script>
$(document).ready(function(){
regis_form();
});
</script>
</footer>
</body>
</html>
function regis_form() {
$('#is_owner').change(function() {
console.log("checked" + this.checked);
if (this.checked) {
$('#registration_fields').show();
} else
$('#registration_fields').hide();
});
}
$(document).ready(function() {
regis_form();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="is_owner" />
<div id="registration_fields">
<p>Content visible</p>
</div>
First below script put on your header file
then you will use it
Jquery('#id').hide();
or
Jquery('#id').show();
Reason:
Function called but the problem is event not fired.
Solution:
Include jquery
<script src="http://localhost/hungary_duniya/bonfire/themes/restaurant/assets/js/jquery-2.1.0.min.js" type="text/javascript" ></script>
put the code in $(document).ready function
$(document).ready(function(){
$('#is_owner').click(function () {
//console.log($(this).prop("checked));
if($(this).prop("checked") == true){
$('#registration_fields').show();
}else{
$('#registration_fields').hide();
}
});
});
Hope it helps.....
I need to have a jquery countdown, carousal and responsive menu on my site, but can't get all of them to work together.. I have tried using the google libraries but then one, two or all of the scripts stop working all together.
Here is the code without the noconflict as it was not working...
<script type="text/javascript" src="/Includes/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/Includes/jquery.jcarousel.min.js"> </script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});
</script>
<script type="text/javascript" src="/Includes/Resp_Menu_Files/js/jquery-1.10.1.min.js"> </script>
<script type="text/javascript" src="/Includes/Resp_Menu_Files/js/orion-menu.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery().orion({
speed: 500
});
});
</script>
Any suggestions?
<script type="text/javascript" src="/Includes/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/Includes/jquery.jcarousel.min.js"> </script>
<script type="text/javascript">
jq142 = jQuery.noConflict(true);
</script>
<script type="text/javascript" src="/Includes/Resp_Menu_Files/js/jquery-1.10.1.min.js"> </script>
<script type="text/javascript" src="/Includes/Resp_Menu_Files/js/orion-menu.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jq142('#mycarousel').jcarousel();
jQuery().orion({
speed: 500
});
});
</script>
The following results in: Uncaught TypeError: Cannot read property 'formatDate' of undefined
I have all three files in the same directory (jquery, jquery-ui and this html file):
<html>
<head>
<link rel="stylesheet" href="jquery-ui.min.css">
<script src="jquery-1.11.1.min.js"</script>
<script src="jquery-ui.min.js"</script>
<script>
$(document).ready(function(){
var $t = $.datepicker.formatDate("M dd", new Date("2014-12-01"));
console.log($t);
});
</script>
</head>
<body>
</body>
</html>
What am I doing wrong?
If this is your actual HTML, you should change
<script src="jquery-1.11.1.min.js"</script>
<script src="jquery-ui.min.js"</script>
into
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery-ui.min.js"></script>
You aren't loading the jquery-ui properly. You need a closing bracket.
HTML:
<input type="text" id="your_input" name="your_input" />
JS:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script>
$(function() {
$( "#your_input" ).datepicker();
});
</script>
Optional Fast load datapicker:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script>
$(function() {
$('body').on('focus',"#your_input", function(){
$(this).datepicker({ dateFormat: 'dd-mm-yy' });
});
});
</script>
I sloved the same error by using the FULL datepicker js file
<script src="/js/jquery.datetimepicker.full.js"></script>
available in
Git Datetimepicker/build/
I am getting javascript runtime error: Unable to get property 'regional' of undefined or null reference.
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.calendars.js"></script>
<script type="text/javascript" src="Scripts/jquery.calendars.plus.js"></script>
<script type="text/javascript" src="Scripts/jquery.calendars.picker.lang.js"></script>
<script type="text/javascript" src="Scripts/jquery.calendars.picker.lang.js"></script>
<script type="text/javascript" src="Scripts/jquery.calendars.picker-ar.js"></script>
<script type="text/javascript">
$(function ()
{
$('#TextBox1').calendars.picker($.extend( { calendar: $.calendars.instance('arabic', 'ar-EG') }, $.calendars.picker.regional['ar-EG'] ));
});
</script>
You need to download jquery lib for islamic calendar .
jquery.calendars.islamic.min.js
then use it like this:
$('#TextBox1').calendarsPicker({ calendar: $.calendars.instance('islamic') });