How can I use easyslider in grails? - javascript

how can I implement easyslider 1.7 in grails? I know that you have to include the g:javascript tags, but how do I modify the code for this part:
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
numeric: true
});
});
</script>
I am new to grails, and would really appreciate your help! Thanks!

The easiest way is to create application resources in conf/ApplicationResources.groovy.
modules = {
'slider_resources' {
resource url: 'css/slider.css'
resource url: 'js/slider.js'
}
}
Which can be easily included in your GSP files with:
<r:require module="slider_resources" />
To use this mechanism the resources plugin needs to be installed.
See http://grails.org/plugin/resources

Related

Add script tags on child templates in ASP.NET MVC 5 [duplicate]

I was trying to put FullCalendar 2.1.1 but it is not working:
<link href='/css/fullcalendar.css' rel='stylesheet' />
<link href='/css/fullcalendar.min.css' rel='stylesheet' />
<link href='/css/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='/js/moment.min.js'></script>
<script src='/js/jquery.min.js'></script>
<script src='/js/fullcalendar.min.js'></script>
<script src="/js/jquery-ui.custom.min.js"></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultDate: '2014-09-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
});
});
</script>
When I go to try open it I get the following errors:
SyntaxError: missing ) after argument list ..."'").replace(/"/g,""").replace(/\n/g,"")}function P(t){returnt.replace(/
TypeError: $(...).fullCalendar is not a function
eventLimit: true, // allow "more" link when too many events
I have followed the Basic Usage Documentation but it still doesn't work.
I think you have problem with js try the below urls it may solve your problems,
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/moment.min.js'></script>
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery.min.js'></script>
<script src="http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery-ui.custom.min.js"></script>
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/fullcalendar.min.js'></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultDate: '2014-09-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
});
});
</script>
If the above code works then download the js files used in script tag
I also had same problem and it was because the HTML jQuery file was loading twice, hence it was giving me error.
I've solved the problem simply changing order of my scripts. You must be set:
moment.min.js after jquery.min.js look this:
<script src='/js/jquery.min.js'></script>
<script src='/js/moment.min.js'></script>
<script src='/js/fullcalendar.min.js'></script>
For anyone coming across this, there was only one solution working for me. I'm using webpack to compile my scripts and nothing was working for me, no matter what order I had require('fullcalendar') placed in my main.js file.
I had to downgrade to version 3.4.0. It instantly solved the problem.
npm install --save fullcalendar#3.4.0
If using ES6 syntax, just add this at the start of your file:
import "fullcalendar";
I had the same problem. I used sitemesh and decorators.
the problem solved when I injected the JS script's links twice both in the decorator and the webpage!
The order is important too ,use following order :
<script src="../../resource/bower_components/jquery/dist/jquery.min.js"></script>
<script src="../../resource/bower_components/jquery-ui/jquery-ui.min.js"></script>
<script src="../../resource/dist/js/demo.js"></script>
<script src="../../resource/bower_components/moment/moment.js"></script>
<script src="../../resource/bower_components/fullcalendar/dist/fullcalendar.min.js"></script>
I got this issue when working with node version 14. Use node version 15 to resolve this issue.
I might be late to the party but I was having a similar issue and I resolved it.
The versions that I was using in my Angular 6 Project were:
#angular/animations": "^6.0.9",
"#angular/cdk": "^6.4.7",
"#angular/common": "^6.0.9",
"#angular/compiler": "^6.0.9",
"#angular/core": "^6.0.9",
"fullcalendar": "^3.10.1",
"jquery": "^3.3.1",
.....
I changed the version for fullcalendar to 3.9.0 along with jquery to ^3.4.1 and it happily resolved my issue.
(fullcalendar v5.5.0)
Seems fullCalendar() is not available anymore(not 100% sure).
I wanted to refresh when onchange event so I tried below first,
$('#calendar').fullCalendar('refetchEventSources', sources);
but got the same error message as above ( ~ not a function)
tried all answers on google but not for me.
finally below solved my problem.
$('select').change(function() {
var newSource = {
url: myUrl,
type: 'POST',
extraParams: {
myParam: newParam
}
}
// remove original source
var orgSource = calendar.getEventSources();
orgSource[0].remove();
// add new source
// new events will be immediately fetched from this source
// and placed on the calendar.
calendar.addEventSource(newSource);
// this is not working
//$('#calendar').fullCalendar('refetchEventSources', newSource);
}
please also check below official site:
https://fullcalendar.io/docs/Calendar-addEventSource

How to install these js libraries

I've got html site with little help of css.
I Never tried to use javascript, but I found one that called simplr-smoothscroll which requires jQuery Mouse Wheel Plugin.
When I downloaded both of them I got jquery.mousewheel.js and jquery.simplr.smoothscroll.js. When I searched google how to install them in my site, I found that I need to put them in the site directory and refer to them in the html like this:
<script src="js/jquery.mousewheel.js"></script>
<script src="js/jquery.simplr.smoothscroll.js"></script>
I did that and nothing happened. What should i do?
PS: there are some tips which i really don't understand in the github links of the project :)
You also need to include jQuery itself for those libraries to work.
You can download jQuery as well and put it there, on the top of the other two, or you can reference it from a CDN.
Most of the libraries require you to write some codes as well. You can read their documentation and see how you can use them.
simplr-smoothscroll for example, you need to add the code below to your page and put your configuration inside in order to get it to work.
<script>
$(function () {
$.srSmoothscroll({
// defaults
step: 55,
speed: 400,
ease: 'swing',
target: $('body'),
container: $(window)
})
})
</script>
First of all, you should put your jquery.mousewheel.js and jquery.simplr.smoothscroll.jsin js folder which is same hierarchical level with your index.html.
Second, did you add the JavaScript which is provided in your link?
$(function () {
$.srSmoothscroll({
// defaults
step: 55,
speed: 400,
ease: 'swing',
target: $('body'),
container: $(window)
})
})
you should add this between <script> ... </script>.
Include jquery js file first .here using cdn path you can download latest version and give accpording path
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
Then include mousewheel js
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.0.6/jquery.mousewheel.min.js" type="text/javascript" charset="utf-8"></script>
Include mooth scroll js
Use Follwing code:
<script type="text/javascript" charset="utf-8">
$(function () {
$.srSmoothscroll()
})
</script>
You can set option also ,refering to document :
https://github.com/simov/simplr-smoothscroll

Implementing HTML-minifier Plugin with JS

I'm looking for a way to minify my HTML code that's retrieved with Javascript like this
document.getElementById("content").innerHTML;
The HTML is very disorganized and poorly indented but its w3c validated. I came across this plugin https://github.com/kangax/html-minifier But need help implementing with raw JS/jQuery because it only provides instructions for node.js, and my app isn't server-based.
Include the file from dist directory in your page and use minify function. For reference see the options and the demo they provide.
Below I implemented it into a quick demo that removes the attribute value quotes:
$("#input").on("input", function() {
$("#output").val(minify($(this).val(), {
removeAttributeQuotes: true,
collapseWhitespace: true
// other options
}));
});
<script src="https://rawgit.com/kangax/html-minifier/50fad6e3a7a77f37671afae6782f557bd686bc8b/dist/htmlminifier.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Input</h1>
<textarea id="input"></textarea>
<h1>Output</h1>
<textarea id="output"></textarea>

Flex Grid not rendering in Orchard CMS

I dont understand why Flex Grid is not rendering in my orchard cms project. same code is running in separate project but does not work here. below is the code for page. i have verified the path for scripts and style sheet and both are correct.
View
#{
Script.Include("navigation-admin.js");
Script.Require("jQuery");
Script.Require("jQueryUI");
Script.Require("flexgrid");
Style.Include("flexgrid.css");
Style.Include("flexgrid.pack.css");
}
<table id="jobListing" style="display: none"></table>
#using (Script.Foot()) {
<script type="text/javascript">
$(document).ready(function () {
$('#jobListing').flexigrid({
url: '/Member/List',
dataType: 'json',
colModel: [
{
display: 'Caption',
name: 'Caption',
width: 180,
sortable: true,
align: 'left'
}, {
display: 'Name',
name: 'Name',
width: 180,
sortable: true,
align: 'left'
}, ]
});
});
</script>
}
ResourceManifest
public void BuildManifests(ResourceManifestBuilder builder)
{
// Create and add a new manifest
var manifest = builder.Add();
manifest.DefineScript("flexgrid").SetUrl("flexigrid.pack.js", "flexigrid.js");
}
Currently showing
Should show layout like this (not data or columns)
Console Errors
I think you need to move your $('#jobListing').flexigrid({ .. }); to the document ready part.
Also, to give you some tips:
You should add your scripts and styles to the ResourceManifest
If your don't use the ResourceManifest, use Script.Include("PathToScript") instead
You should use Script.Require("jQuery") instead of requiring it yourself (it probably is injected twice)
I don't think there is a section called Scripts in Orchard. Use the following instead:
#using (Script.Foot()) {
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
[.....your code here.....]
});
//]]>
</script>
}
EDIT:
Looking at your console errors, I'd say you miss the web.config in the Scripts and Styles folder.
"By default, Orchard is setup to restrict folder permissions. This is usually overriden by adding a web.config to each folder as required (in this case, your scripts folder).
If you use the codegen module to generate your module, then this is done for you as part of the generation. If not, then you need to add the web.config yourself."
source: Orchard CMS : Javascript file returns 404 not found even though it exists

Using JQuery with Wordpress the Right Way?

I've been messing around with my custom(not a plugin) jquery slide for Wordpress. I've been searching the whole day for how to integrate javascript in Wordpress but seem to come across many different ways. So my main question is which way is the proper, fastest way to code the script.
From what I read it looks like I should use Wordpress enqueue so that the script is only called on the page it is needed on which in my case is the index.php. But I am not sure of the proper way to do it. Also, should I add something to my functions.php?
Here is the script:
<script src="Js/js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="Js/js/jquery.zaccordion.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#example4 ul").zAccordion({
slideWidth: 600,
width: 900,
height: 250,
timeout: 5000,
slideClass: "frame"
});
});
</script>
And this is what I have now in my header.php:
<?php wp_enqueue_script('jquery'); ?>
<?php wp_head();?>
<script type="text/javascript"
src="<?php bloginfo("template_url"); ?>/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript"
src="<?php bloginfo("template_url"); ?>/js/jquery.zaccordion.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#slider ul").zAccordion({
slideWidth: 600,
width: 800,
height: 250,
timeout: 5000,
slideClass: "frame"
});
});
</script>
My advice (and solution):
WordPress Plugin Development - Beginner's Guide
Packtlib press
This is a really good book, very clear, simple, and there are tons of good samples you can use with jQuery.
Moreover you have the real things everybody should do when writing Wordpress plugins ;)
If you don't want to create a plugin then the second best solution is to install the Headspace2 plugin which allow you to add any JS or CSS file to any page from the Wordpress Admin Edit page/post screen.
Also I would turn your inline JS into a external JS file (mycustom.js) and then include it just like you do your other JS files, but that is my personal preference.
Here's a couple things I can suggest:
Don't include your .js because you're already enqueueing them
Register your jquery.zaccordion.js using wp_register_script and then enqueue it like you did with jquery
You don't need to include jQuery.noConflict(); since WordPress' jQuery has that declared already. Only when you include your own jQuery do you need to
You can include jQuery in your theme file and call it the functions.php file. In my case the script was in the js folder (your_theme/js/).
The right way to load scripts in WordPress is to use the function wp_enqueue_script.
In functions.php in your theme type:
/**
* Load jQuery script
*/
if (!is_admin()) {
function register_my_jquery() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', get_bloginfo('template_directory') . "/js/jquery.min.js" );
wp_enqueue_script( 'jquery' );
}
add_action('init', 'register_my_jquery');
}

Categories

Resources