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();
Related
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
I'd purchased this Metronic Theme and I'm trying to implement it in VS 2013 ASP.NET MVC. I did tried but all went wrong, is there any one who can guide me with this
Just put blank page content to _Layout.cshtml.
For example i copied Assets to under Content folder so i changed link like that:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#*#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")*#
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css" />
<link href="~/Content/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css" />
<link href="~/Content/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN THEME STYLES -->
<link href="~/Content/assets/global/css/components.css" id="style_components" rel="stylesheet" type="text/css" />
<link href="~/Content/assets/global/css/plugins.css" rel="stylesheet" type="text/css" />
<link href="~/Content/assets/admin/layout/css/layout.css" rel="stylesheet" type="text/css" />
<link id="style_color" href="~/Content/assets/admin/layout/css/themes/darkblue.css" rel="stylesheet" type="text/css" />
<link href="~/Content/assets/admin/layout/css/custom.css" rel="stylesheet" type="text/css" />
<!-- END THEME STYLES -->
<link rel="shortcut icon" href="favicon.ico" />
and javascripts are below the page (just before closing body tag):
#*#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)*#
<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<!-- BEGIN CORE PLUGINS -->
<!--[if lt IE 9]>
<script src="../../assets/global/plugins/respond.min.js"></script>
<script src="../../assets/global/plugins/excanvas.min.js"></script>
<![endif]-->
<script src="~/Content/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="~/Content/assets/global/plugins/jquery-migrate.min.js" type="text/javascript"></script>
<!-- IMPORTANT! Load jquery-ui.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
<script src="~/Content/assets/global/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
<script src="~/Content/assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="~/Content/assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
<script src="~/Content/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="~/Content/assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="~/Content/assets/global/plugins/jquery.cokie.min.js" type="text/javascript"></script>
<script src="~/Content/assets/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<script src="~/Content/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<script src="~/Content/assets/global/scripts/metronic.js" type="text/javascript"></script>
<script src="~/Content/assets/admin/layout/scripts/layout.js" type="text/javascript"></script>
<script src="~/Content/assets/admin/layout/scripts/quick-sidebar.js" type="text/javascript"></script>
<script src="~/Content/assets/admin/layout/scripts/demo.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function () {
Metronic.init(); // init metronic core components
Layout.init(); // init current layout
QuickSidebar.init(); // init quick sidebar
Demo.init(); // init demo features
});
</script>
<!-- END JAVASCRIPTS -->
and to show views content in layout put RenderBody here:
<!-- BEGIN PAGE CONTENT-->
<div class="row">
<div class="col-md-12">
#RenderBody()
</div>
</div>
<!-- END PAGE CONTENT-->
You can check http://www.aspnetzero.com/
It's an ASP.NET Startup project which uses Metronic as UI theme.
It's not a simple startup template but also a strong architecture and framework.
After deploying my rails app to heroku, there are no dropdown menus!
When running locally, my source looks like this :
<link href="/assets/application.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.core.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.theme.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.accordion.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.menu.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.autocomplete.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.button.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.datepicker.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.resizable.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.dialog.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.progressbar.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.selectable.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.slider.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.spinner.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.tabs.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.tooltip.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.base.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.all.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/foundation_and_overrides.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/admins.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/associates.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/custom.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/dasharea.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/database.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/members.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/sessions.css?body=1" media="screen" rel="stylesheet" />
<script src="/assets/vendor/custom.modernizr.js?body=1"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="anbyACcBlOI2Zpa9E2TImosNiBYN5KFTC8heYI1TE+I=" name="csrf-token" />
<script src="/assets/jquery.js?body=1"></script>
<script src="/assets/jquery.ui.core.js?body=1"></script>
<script src="/assets/jquery.ui.widget.js?body=1"></script>
<script src="/assets/jquery.ui.accordion.js?body=1"></script>
<script src="/assets/jquery.ui.position.js?body=1"></script>
<script src="/assets/jquery.ui.menu.js?body=1"></script>
<script src="/assets/jquery.ui.autocomplete.js?body=1"></script>
<script src="/assets/jquery.ui.button.js?body=1"></script>
<script src="/assets/jquery.ui.datepicker.js?body=1"></script>
<script src="/assets/jquery.ui.mouse.js?body=1"></script>
<script src="/assets/jquery.ui.draggable.js?body=1"></script>
<script src="/assets/jquery.ui.resizable.js?body=1"></script>
<script src="/assets/jquery.ui.dialog.js?body=1"></script>
<script src="/assets/jquery.ui.droppable.js?body=1"></script>
<script src="/assets/jquery.ui.effect.js?body=1"></script>
<script src="/assets/jquery.ui.effect-blind.js?body=1"></script>
<script src="/assets/jquery.ui.effect-bounce.js?body=1"></script>
<script src="/assets/jquery.ui.effect-clip.js?body=1"></script>
<script src="/assets/jquery.ui.effect-drop.js?body=1"></script>
<script src="/assets/jquery.ui.effect-explode.js?body=1"></script>
<script src="/assets/jquery.ui.effect-fade.js?body=1"></script>
<script src="/assets/jquery.ui.effect-fold.js?body=1"></script>
<script src="/assets/jquery.ui.effect-highlight.js?body=1"></script>
<script src="/assets/jquery.ui.effect-pulsate.js?body=1"></script>
<script src="/assets/jquery.ui.effect-scale.js?body=1"></script>
<script src="/assets/jquery.ui.effect-shake.js?body=1"></script>
<script src="/assets/jquery.ui.effect-slide.js?body=1"></script>
<script src="/assets/jquery.ui.effect-transfer.js?body=1"></script>
<script src="/assets/jquery.ui.progressbar.js?body=1"></script>
<script src="/assets/jquery.ui.selectable.js?body=1"></script>
<script src="/assets/jquery.ui.slider.js?body=1"></script>
<script src="/assets/jquery.ui.sortable.js?body=1"></script>
<script src="/assets/jquery.ui.spinner.js?body=1"></script>
<script src="/assets/jquery.ui.tabs.js?body=1"></script>
<script src="/assets/jquery.ui.tooltip.js?body=1"></script>
<script src="/assets/jquery.ui.all.js?body=1"></script>
<script src="/assets/jquery_ujs.js?body=1"></script>
In Heroku, it look like this :
<script src="/javascripts/jquery.js"></script>
<script src="/javascripts/jquery.ui.all.js"></script>
<script src="/javascripts/jquery_ujs.js"></script>
But the links in Heroku return not found!
For a special reason, I included the jquery in my head manually like this :
<%= javascript_include_tag 'jquery' %>
<%= javascript_include_tag 'jquery.ui.all' %>
<%= javascript_include_tag 'jquery_ujs' %>
Is this the reason things are failing? How to fix it without removing these from the head?
In (most) production setups, only the files in public/assets are available for use directly in link or script tags.
When you push to Heroku, it precompiles app/assets/javascripts/application.js by merging and compressing all javascript files required in application.js into a single file at public/assets/application-xxxxxx.js. Individual files, such as jquery.js, are not available. Therefore, it's recommended to use
<!-- HTML -->
javascript_include_tag 'application'
// inside app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
However, if you insist on including jquery manually without requiring it in application.js, you can add it to config.assets.precompile.
# config/environments/production.rb
config.assets.precompile += ['jquery.js', 'jquery_ujs.js']
(Note: A friend told me that Heroku doesn't read production.rb during precompilation. If that's the case, try adding the above to config/application.rb instead.)
When you push to Heroku and precompile your assets, you should see
$ rake assets:precompile
I, [] INFO -- : Writing public/assets/jquery-36fecc5eda81b43bdf4f92ce2d874df2.js
I, [] INFO -- : Writing public/assets/jquery_ujs-02181b3e64cd9e4e8548cad033516231.js
On Heroku, the script tags should now look like
<script src="/assets/jquery-36fecc5eda81b43bdf4f92ce2d874df2.js"></script>
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/
I have a layout page thusly
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<link href="#Url.Content("~/content/main_layout.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/content/menu.css")" rel="stylesheet" type="text/css" />
#RenderSection("JS", required:false)
#RenderSection("CSS", required:false)
</head>
<body>
#RenderBody()
</body>
</html>
And then a view like so
#{
ViewBag.Title = "Home";
Layout = "~/views/shared/_layout.cshtml";
}
#using RS.Common.HtmlHelpers;
#section JS
{
<script src="#Url.Content("~/scripts/fue.js")" type="text/javascript"></script>
<script src="#Url.Content("~/scripts/jquery.flexslider-min.js")" type="text/javascript"></script>
}
#section CSS
{
<link href="#Url.Content("~/content/hp.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/content/hp_form.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/content/flexslider.css")" rel="stylesheet" type="text/css" />
}
<h4>Test!</h4>
The page loads fine as I expect. However, I am getting 3 warnings:
Validation (XHTML 1.0 Transitional): Element 'link' cannot be nested within element 'link'
This error, one for each of the tags in the CSS section on the view.
It is only really an annoyance at this stage, but I wondered what the cause (and thus solution) for this error might be?
You have specified HTML5 DOCTYPE and yet trying to validate as XHTML 1.0 Transitional. I suppose that the final rendered HTML looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<link href="/content/main_layout.css" rel="stylesheet" type="text/css" />
<link href="/content/menu.css" rel="stylesheet" type="text/css" />
<script src="/scripts/fue.js" type="text/javascript"></script>
<script src="/scripts/jquery.flexslider-min.js" type="text/javascript"></script>
<link href="/content/hp.css" rel="stylesheet" type="text/css" />
<link href="/content/hp_form.css" rel="stylesheet" type="text/css" />
<link href="/content/flexslider.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h4>Test!</h4>
</body>
</html>
You might want to invert the order of the two RenderSection in your layout so that the links and scripts are grouped together. Or you might also consider moving the script declarations to the end of the page:
Like this:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/content/main_layout.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/content/menu.css")" rel="stylesheet" type="text/css" />
#RenderSection("CSS", required:false)
</head>
<body>
#RenderBody()
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
#RenderSection("JS", required:false)
</body>
</html>