Posts: 12
Threads: 1
Joined: May 2012
2014-11-28, 03:42:56
(This post was last modified: 2014-11-30, 06:12:25 by fugo.)
Hello
I want to use the jQuery datepicker widget. How can I activate it with GS 3.3.4 and Iridium template?
I installed the fanybox plugin.
On the jQuery site it says
Code:
!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<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="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
Where should I put the code
Code:
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
I'm not a php or js script coder I understand a bit but that's it
![Rolleyes Rolleyes](http://get-simple.info/forums/images/smilies/rolleyes.gif)
I hope someone can push me in the right direction.
TIA
Tim
Posts: 8
Threads: 1
Joined: Nov 2014
2014-11-29, 21:32:28
(This post was last modified: 2014-11-29, 21:41:24 by Kapelius.)
Hello, i'm tested and fixed your code. And it's works.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<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="/resources/demos/style.css">
<script>
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
Posts: 12
Threads: 1
Joined: May 2012
2014-11-29, 23:33:16
(This post was last modified: 2014-11-30, 00:45:50 by fugo.)
(2014-11-29, 21:32:28)Kapelius Wrote: Hello, i'm tested and fixed your code. And it's works.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<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="/resources/demos/style.css">
<script>
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
Thank you a lot
![Exclamation Exclamation](http://get-simple.info/forums/images/smilies/exclamation.gif)
I will try out this now and wil give you a note.
Update:
It is not working. I get (with chrome) this error:
Code:
Uncaught TypeError:
undefined is not a function (index):31
(anonymous function) (index):31
fire jquery-1.10.2.js:3048
self.fireWith jquery-1.10.2.js:3160
jQuery.extend.ready jquery-1.10.2.js:433
completed jquery-1.10.2.js:104
This is the head.inc.php from Iridium:
Code:
<?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); }
/****************************************************
*
* @File: head.inc.php
* @Package: GetSimple
* @Action: Iridium theme for GetSimple CMS
*
*****************************************************/
?>
<!-- Site Title -->
<title><?php get_page_clean_title(); ?> — <?php get_site_name(); ?></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!--[if lte IE 8]><script src="<?php get_theme_url(); ?>js/html5shiv.js"></script><![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="<?php get_theme_url(); ?>/js/skel.min.js"></script>
<script src="<?php get_theme_url(); ?>/js/skel-panels.min.js"></script>
<script> var prefixUrl = '<?php get_theme_url(); ?>'; </script>
<script src="<?php get_theme_url(); ?>/js/init.js"></script>
<noscript>
<link rel="stylesheet" href="<?php get_theme_url(); ?>/css/skel-noscript.css" />
<link rel="stylesheet" href="<?php get_theme_url(); ?>/css/style.css" />
<link rel="stylesheet" href="<?php get_theme_url(); ?>/css/style-desktop.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="<?php get_theme_url(); ?>css/ie/v8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="<?php get_theme_url(); ?>css/ie/v9.css" /><![endif]-->
<link href='http://fonts.googleapis.com/css?family=Vollkorn|Arvo|Bitter:400,700,400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
<?php get_header(); ?>
Posts: 8
Threads: 1
Joined: Nov 2014
Special for you, i installed Iridium and insert datepicker. Use my complete code.
All Head.inc.php
Code:
<?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); }
/****************************************************
*
* @File: head.inc.php
* @Package: GetSimple
* @Action: Iridium theme for GetSimple CMS
*
*****************************************************/
?>
<!-- Site Title -->
<title><?php get_page_clean_title(); ?> — <?php get_site_name(); ?></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!--[if lte IE 8]><script src="<?php get_theme_url(); ?>js/html5shiv.js"></script><![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="<?php get_theme_url(); ?>/js/skel.min.js"></script>
<script src="<?php get_theme_url(); ?>/js/skel-panels.min.js"></script>
<script> var prefixUrl = '<?php get_theme_url(); ?>'; </script>
<script src="<?php get_theme_url(); ?>/js/init.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<noscript>
<link rel="stylesheet" href="<?php get_theme_url(); ?>/css/skel-noscript.css" />
<link rel="stylesheet" href="<?php get_theme_url(); ?>/css/style.css" />
<link rel="stylesheet" href="<?php get_theme_url(); ?>/css/style-desktop.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="<?php get_theme_url(); ?>css/ie/v8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="<?php get_theme_url(); ?>css/ie/v9.css" /><![endif]-->
<link href='http://fonts.googleapis.com/css?family=Arimo:400,700' rel='stylesheet' type='text/css'>
<script>
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
<?php get_header(); ?>
For example template.php
Code:
<p>Date: <input type="text" id="datepicker"></p>
It's work!
Posts: 12
Threads: 1
Joined: May 2012
WTF
I did exactly the same as you.
I use your head.inc.php.
I put the
Code:
<p>Date: <input type="text" id="datepicker"></p>
directly in the template and get :
Code:
TypeError: $(...).datepicker is not a function
could be because GS is living in a folder not in the root of the site? (Because there is an old site I want to make it pretty with GS).
But nice urls are working, fontawesome worked.
What next?
Posts: 8
Threads: 1
Joined: Nov 2014
2014-11-30, 01:45:54
(This post was last modified: 2014-11-30, 01:55:27 by Kapelius.)
Okay, try my template.
Iridium
Posts: 12
Threads: 1
Joined: May 2012
2014-11-30, 02:07:05
(This post was last modified: 2014-11-30, 02:13:06 by fugo.)
(2014-11-30, 01:45:54)Kapelius Wrote: Okay, try my template.
Iridium
It is not working
Update:
it was the plugin FancyBoxPlugin
![Angry Angry](http://get-simple.info/forums/images/smilies/angry.gif)
I deaktivate it and now it works.
Sorry my fault
Posts: 6,266
Threads: 181
Joined: Sep 2011
You have 2 versions of jquery, that plugin includes its own
Posts: 12
Threads: 1
Joined: May 2012
With a lot of help from
Kapelius I get both - datepicker and fancybox running.
In very short:
- install fancybox from http://fancyapps.com/fancybox/
- in template 'head.inc.php put new links and scripts.
- if you installed the fancybox plugin deactivate and delete it
- put the right classes or id's on your images in the html code
like this:
head.inc.php:
Code:
.
.
<script>
$(document).ready(function() {
$("#datepicker").datepicker();
$("a#fb").fancybox();
$('.fancybox').fancybox();
});
</script>
Posts: 6,266
Threads: 181
Joined: Sep 2011
I'm sure it works fine with the version of jquery in fancybox but you also need jqueryui.
Also you should not be doing any jquery stuff outside of a on load handler aka ready function.
That is probably why it wasn't working. Jquery was not yet loaded cause of the order of scripts.