can you guys tell me why my slider is not working
i have included all the resources in the js fiddle then also its not working
providing fiddle link below
http://jsfiddle.net/YakV7/2/
actual demo
http://tympanus.net/Development/ParallaxContentSlider/
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cslider.js"></script>
<script type="text/javascript">
$(function() {
$('#da-slider').cslider();
});
</script>
What do you mean by these lines?
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
<script type="text/javascript" src="js/jquery.cslider.js"></script>
Change it to the actual path.
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/ParallaxContentSlider/css/demo.css">
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/ParallaxContentSlider/css/style.css">
<script type="text/javascript" src="http://tympanus.net/Development/ParallaxContentSlider/js/modernizr.custom.28468.js"></script>
<script type="text/javascript" src="http://tympanus.net/Development/ParallaxContentSlider/js/jquery.cslider.js"></script>
Or add:
<base href="http://tympanus.net/Development/ParallaxContentSlider/" />
Same working fiddle: http://jsfiddle.net/YakV7/7/
Related
I'm trying to use JQuery UI slider in on of my carousel's items.
I attached JQuery UI files (css and js) and it's not showing up.
$("#slider").slider();
<div id="slider"></div>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
the link and script are at the bottom of my body tag. tried to move them to head and still not working.
The console shows:
jquery-3.3.1.slim.min.js:2 jQuery.Deferred exception: $(...).slider is not a function TypeError: $(...).slider is not a function
head tag:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/bootstrap-slider.js"></script>-->
<script src="bootstrap/js/bootstrap.js"></script>
<script src="jScripts/JavaScript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<!--<link href="Style/reset.css" rel="stylesheet" type="text/css" />-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<link href="bootstrap/css/bootstrap-reboot.css" rel="stylesheet" />
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
<link rel="shortcut icon" href="#">
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/css/bootstrap-slider.css" />-->
<link href="styles/myStyle.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Assistant" rel="stylesheet">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
You must define jquery-UI first.
When you calling $("#slider").slider();
'.slider()' function is not exist yet
Try to include jquery-UI library first.
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<div id="slider"></div>
$("#slider").slider();
I don't understand how are all the CSS and JS injected.
I find asset tags in main.gsp, but only for application.css and application.js
Nothing in the GSPs generated for the domain-classes.
But in the sources of the served pages I find them all:
<link rel="stylesheet" href="/assets/bootstrap.css?compile=false" />
<link rel="stylesheet" href="/assets/grails.css?compile=false" />
<link rel="stylesheet" href="/assets/main.css?compile=false" />
<link rel="stylesheet" href="/assets/mobile.css?compile=false" />
<link rel="stylesheet" href="/assets/application.css?compile=false" />
and
<script type="text/javascript" src="/assets/jquery-2.2.0.min.js?compile=false" ></script>
<script type="text/javascript" src="/assets/bootstrap.js?compile=false" ></script>
<script type="text/javascript" src="/assets/application.js?compile=false" ></script>
I red, that I can control them globally with includes and excludes.
Can I control them in main.gsp?
And where I'd decide them on a per page basis?
Thanks, Rawi
Using this plugin (http://plugins.krajee.com/file-input) for some basic file upload but it's causing me a headache design wise. Don't know what's wrong. Seem to have all required js and css files.
<link href="/Content/themes/base/jquery-ui.css" rel="stylesheet"/>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/themes/base/accordion.css" rel="stylesheet"/>
<link href="/Content/themes/base/all.css" rel="stylesheet"/>
<link href="/Content/themes/base/autocomplete.css" rel="stylesheet"/>
<link href="/Content/themes/base/base.css" rel="stylesheet"/>
<link href="/Content/themes/base/button.css" rel="stylesheet"/>
<link href="/Content/themes/base/core.css" rel="stylesheet"/>
<link href="/Content/themes/base/datepicker.css" rel="stylesheet"/>
<link href="/Content/themes/base/dialog.css" rel="stylesheet"/>
<link href="/Content/themes/base/draggable.css" rel="stylesheet"/>
<link href="/Content/themes/base/menu.css" rel="stylesheet"/>
<link href="/Content/themes/base/progressbar.css" rel="stylesheet"/>
<link href="/Content/themes/base/resizable.css" rel="stylesheet"/>
<link href="/Content/themes/base/selectable.css" rel="stylesheet"/>
<link href="/Content/themes/base/selectmenu.css" rel="stylesheet"/>
<link href="/Content/themes/base/slider.css" rel="stylesheet"/>
<link href="/Content/themes/base/sortable.css" rel="stylesheet"/>
<link href="/Content/themes/base/spinner.css" rel="stylesheet"/>
<link href="/Content/themes/base/tabs.css" rel="stylesheet"/>
<link href="/Content/themes/base/theme.css" rel="stylesheet"/>
<link href="/Content/themes/base/tooltip.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="/Scripts/jquery-2.1.4.js"></script>
<script src="/Scripts/jquery-ui-1.12.1.js"></script>
<script src="/Scripts/cldr.js"></script>
<script src="/Scripts/cldr/event.js"></script>
<script src="/Scripts/cldr/supplemental.js"></script>
<script src="/Scripts/cldr/unresolved.js"></script>
<script src="/Scripts/globalize.js"></script>
<script src="/Scripts/globalize/message.js"></script>
<script src="/Scripts/globalize/number.js"></script>
<script src="/Scripts/globalize/plural.js"></script>
<script src="/Scripts/globalize/date.js"></script>
<script src="/Scripts/globalize/currency.js"></script>
<script src="/Scripts/globalize/relative-time.js"></script>
<script src="/Scripts/globalize/unit.js"></script>
<script src="/Scripts/bootbox.js"></script>
<script src="/Content/bootstrap-fileinput/css/fileinput.min.css"></script>
<script src="/Content/bootstrap-fileinput/themes/gly/theme.js"></script>
<script src="/Scripts/plugins/canvas-to-blob.min.js"></script>
<script src="/Scripts/plugins/purify.min.js"></script>
<script src="/Scripts/fileinput.min.js"></script>
<script src="/Scripts/plugins/sortable.min.js"></script>
I have a intranet website where I have a page to add new products.
I use ckeditor because I need to save some links.
Now I had to change it into a Master detail form and so I decided to use Json2 and DataTables .
The strangest thing is that when I include
<script src="#Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript">
the ckeditor doesn't work anymore.
These are all the scripts I import
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
#*This is for CKEditor*#
<script src="#Url.Content("~/content/javascript/CKEditor/ckeditor.js")" type="text/javascript" ></script>
<script src="#Url.Content("~/content/javascript/CKEditor/adapters/jquery.js")" type="text/javascript" ></script>
#*This is for jquery*#
<script src="#Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
#*This is for JSON*#
<script src="#Url.Content("~/Scripts/json2.js")" type="text/javascript"></script>
#*These are for DataTables*#
<script src="#Url.Content("~/Scripts/DataTables-1.9.4/media/js/jquery.dataTables.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/DataTables-1.9.4/extras/TableTools/media/js/TableTools.js")"
type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/DataTables-1.9.4/extras/TableTools/media/js/ZeroClipboard.js")"
type="text/javascript"></script>
#*These are for styling Control*#
<link href="#Url.Content("~/Content/DataTables-1.9.4/extras/TableTools/media/css/TableTools.css")"
rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/DataTables-1.9.4/extras/TableTools/media/css/TableTools_JUI.css")"
rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
Any ideas??
You should add the reference to jquery before you add ckeditor. The adaptors are set to extend jquery.
All is in the title
I've tried:
config.serve_static_assets = true
I updated the gem and then: rails generate gmaps4rails:install
The map is perfectly showing in local mode but doesnt appear un production!
the is totaly empty...
Here is the content of my head:
<head>
<link href="/images/favicon.ico" rel="SHORTCUT ICON">
<link type="text/css" rel="stylesheet" media="screen" href="/stylesheets/gmaps4rails.css?1314057878">
<link type="text/css" rel="stylesheet" media="screen" href="/stylesheets/reset.css?1314057878">
<link type="text/css" rel="stylesheet" media="screen" href="/stylesheets/default.css?1314057878">
<link type="text/css" rel="stylesheet" media="screen" href="/stylesheets/buttons.css?1314057878">
<link type="text/css" rel="stylesheet" media="screen" href="/stylesheets/colorbox.css?1314057878">
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script>
<script type="text/javascript" src="/javascripts/application.js?1314057878"></script>
<script type="text/javascript" src="/javascripts/jquery.1.4.4.js?1314057878"></script>
<script type="text/javascript" src="/javascripts/jquery-ui.js?1314057878"></script>
<script type="text/javascript" src="/javascripts/jquery.colorbox-min.js?1314057878"></script>
<script type="text/javascript" src="/javascripts/jquery-ujs-1.4.4.js?1314057878"></script>
<script type="text/javascript" src="/javascripts/application.js?1314057878"></script>
<script type="text/javascript" src="/javascripts/active_scaffold/default/active_scaffold.js?1314057900"></script>
<script type="text/javascript" src="/javascripts/active_scaffold/default/jquery.editinplace.js?1314057900"></script>
<script type="text/javascript" src="/javascripts/active_scaffold/default/date_picker_bridge.js?1314057900"></script>
<link type="text/css" rel="stylesheet" media="screen" href="/stylesheets/active_scaffold/default/stylesheet.css?1314057900">
<!--[if IE]><link href="/stylesheets/active_scaffold/default/stylesheet-ie.css?1314057900" media="screen" rel="stylesheet" type="text/css" /><![endif]-->
<meta content="authenticity_token" name="csrf-param">
<meta content="/MYbif2q6UmcrXyAS7WyYtOViwkr8pyXjXQTTNYtQsc=" name="csrf-token">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript" src="http://maps.gstatic.com/cat_js/intl/fr_ALL/mapfiles/api-3/6/0a/%7Bmain,places%7D.js"></script>
<script type="text/javascript" charset="UTF-8" src="http://maps.gstatic.com/cat_js/intl/fr_ALL/mapfiles/api-3/6/0a/%7Bcommon,util%7D.js"></script></head>
Any idea?
I had the same problem with the pre 1.x, although it was fixed by calling each file individually in the manifest file after manually loading them into the vendor asset dir.
However, the latest gem worked as it said in the readme. From an older version update it via bundler, remove any of it's js files copied into the assets dir (like I had previously), run the install script again, and in the manifest file (I'm using vendor/assets/javascript/external.js) use the namespaced require statement for the files you need.
//= require gmaps4rails/googlemaps.js