Login

fugo · (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

I hope someone can push me in the right direction.
TIA
Tim

Kapelius · (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>

fugo · (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

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(); ?> &mdash; <?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(); ?>

Kapelius · 2014-11-30, 01:03:22

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(); ?> &mdash; <?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!
[Image: 5479dfe5a098c.png]

fugo · 2014-11-30, 01:31:34

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?

Kapelius · (This post was last modified: 2014-11-30, 01:55:27 by Kapelius.)

Okay, try my template.
Iridium

fugo · (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 Huh

Update:

it was the plugin FancyBoxPlugin Angry

I deaktivate it and now it works.
Sorry my fault

***shawn_a*** · 2014-11-30, 02:58:09

You have 2 versions of jquery, that plugin includes its own

fugo · 2014-11-30, 06:09:29

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>

***shawn_a*** · 2014-11-30, 07:19:42

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.

Login
Username:
Password:	Lost Password?
	Remember me