Im trying to use ScrollTo and Lightbox2 on the same page but the Lightbox2 JS links knock out the ScrollTo JS files.
This is what I have:
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/lightbox.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js"></script>
<script type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="js/transition.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#links').localScroll({
target:'body'
});
});
<script type="text/javascript" src="js/transition.js"></script>
Where am I going wrong?
Hope someone can help!
Kind Regards
Matt
<script type="text/javascript"> $(document).ready(function() {
$('#links').localScroll({
target:'body'
});
});
I think you have a typo? You need to end this script with </script>
Related
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="/plugins/morris/morris.min.js"></script>
<script src="/plugins/sparkline/jquery.sparkline.min.js"></script>
<script src="/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="/plugins/knob/jquery.knob.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="/plugins/daterangepicker/daterangepicker.js"></script>
<script src="/plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="/plugins/bootstrap-wysihtml5/bootstrap3-wysiHtml5.all.min.js"></script>
<script src="/dist/js/pages/dashboard.js"></script>
<script src="/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/plugins/select2/select2.full.min.js"></script>
<script src="/plugins/input-mask/jquery.inputmask.js"></script>
<script src="/plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="/plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="/plugins/daterangepicker/daterangepicker.js"></script>
<script src="/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script src="/plugins/timepicker/bootstrap-timepicker.min.js"></script>
<script src="/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="/plugins/iCheck/icheck.min.js"></script>
<script src="/plugins/fastclick/fastclick.min.js"></script>
<script src="/dist/js/app.min.js"></script>
<script src="/dist/js/demo.js"></script>
here are my footer file that contain links of scripts i have tried
{!! Html::script('js/test.js') !!}
all these sulution in laravel blade but wrked fine for components but still getting the error message in console of not define.not define .
here i am attaching the blade file as well as console errors i have placed all the files in the
layout-blade-php.txt
public folder
<script> $.widget.bridge('uibutton', $.ui.button);</script>
That line must be placed under your script import statements.
Also your jquery script is commented out. Hope this helps.
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="/plugins/morris/morris.min.js"></script>
<script src="/plugins/sparkline/jquery.sparkline.min.js"></script>
<script src="/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="/plugins/knob/jquery.knob.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="/plugins/daterangepicker/daterangepicker.js"></script>
<script src="/plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="/plugins/bootstrap-wysihtml5/bootstrap3-wysiHtml5.all.min.js"></script>
<script src="/dist/js/pages/dashboard.js"></script>
<script src="/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/plugins/select2/select2.full.min.js"></script>
<script src="/plugins/input-mask/jquery.inputmask.js"></script>
<script src="/plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="/plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="/plugins/daterangepicker/daterangepicker.js"></script>
<script src="/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script src="/plugins/timepicker/bootstrap-timepicker.min.js"></script>
<script src="/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="/plugins/iCheck/icheck.min.js"></script>
<script src="/plugins/fastclick/fastclick.min.js"></script>
<script src="/dist/js/app.min.js"></script>
<script src="/dist/js/demo.js"></script>
<script> $.widget.bridge('uibutton', $.ui.button);</script>
I am trying to get Kendo Ui (Free Version working). I am trying to implement the date picker with the below code but alls I get is an empty input field. Does anyone have any suggestions on how to resolve this?
<!DOCTYPE html>
<html>
<head>
<link href="/Content/kendo/2015.3.1111/kendo.common.min.css" rel="stylesheet" />
<link href="/Content/kendo/2015.3.1111/kendo.default.min.css" rel="stylesheet" />
</head>
<body>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.core.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.calendar.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.popup.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.datepicker.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.data.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.list.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.combobox.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.dropdownlist.min.js></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.multiselect.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.validator.min.js"></script>
<input id="TimeSlot" name="TimeSlot" type="datetime" />
<script type="text/javascript">
$(document).ready(function () {
debugger;
$("#TimeSlot").kendoDatePicker();
//var datepicker = $("#datepicker").data("kendoDatePicker");
});
</script>
</body>
</html>
You need to reference all these javascript files in order for the DatePicker to work. You can use the Kendo UI Custom Download tool to find out which javascript files you need to reference and to download a custom javascript file that contains everything you need:
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.core.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.calendar.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.popup.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.datepicker.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.data.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.list.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.combobox.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.dropdownlist.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.multiselect.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.validator.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.aspnetmvc.min.js"></script>
UPDATE:
Your text-box's id is "TimeSlot", but in your script you're referring to #datepicker which doesn't even exist. Change your script to this:
<script type="text/javascript">
$(document).ready(function () {
$("#TimeSlot").kendoDatePicker();
//var datepicker = $("#TimeSlot").data("kendoDatePicker");
});
</script>
By the way, you won't need kendo.aspnetmvc.min.js if you don't want to use Kendo's Html Helpers, which is not something that I would recommend if you are using asp.net MVC. With kendo.aspnetmvc.min.js, you wouldn't even need the script, you could just replace your text-box (input tag) with this:
#(Html.Kendo().DatePicker().Name("TimeSlot"))
I am developing an asp.net mvc application and I use this template for my app. For js and css resources, I use URL.Content helper method, but the problem is that css resources referenced by template loads only in home/index action and when I go to other action, browser consoles says that it cant find the resources.
Here is what I have in my _layout.cshtml:
<script src="#Url.Content("~/Scripts/jquery-1.8.3.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/js/config.js")"></script>
<script src="#Url.Content("~/js/skel.min.js")"></script>
<script src="#Url.Content("~/js/skel-panels.min.js")"></script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<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>
<noscript>
<link rel="stylesheet" href="#Url.Content("~/css/skel-noscript.css")"/>
<link rel="stylesheet" href="#Url.Content("~/css/style.css")" />
<link rel="stylesheet" href="#Url.Content("~/css/style-desktop.css")" />
</noscript>
Here is what I can see in chrome Element tab:
<script src="/Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="/js/config.js"></script>
<script src="/js/skel.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/style-desktop.css">
<script src="/js/skel-panels.min.js"></script>
<style type="text/css"></style>
<script src="/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<noscript>
<link rel="stylesheet" href="/css/skel-noscript.css"/>
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" href="/css/style-desktop.css" />
</noscript>
And here is the error I got from console in broswer:
GET http:///myapp/test/css/style-desktop.css 404 (Not Found) skel.min.js:1
GET http://myapp/test/css/style.css 404 (Not Found) skel.min.js:1
All you have to do is set the "prefix" in "_skel_config" obj. to the right path of your styles.
window._skel_config = {
prefix: 'css/style',
};
Alaasdk is right, most of similar templates using skelJS come with something like this:
window._skel_config = {
prefix: '/css/style'
}
in their js/config.js file. So if you have controllers that handle URLs like this:
domain/users/10
domain/category/subcategory/article-slug
or similar, you only set it to relative URL like
prefix: '/css/style'
The stylesheet links you have in your snippet are in a <noscript> block and only apply to users who have javascript turned off.
As #marcus33cz and #alaasdk point out, you set the relative path in config.js.
In the latest version of skel, you set it in init.js like this:
global: { href: '/css/style.css', containers: 1400, grid: { gutters: ['2em', 0] } },
desktop: { media: '(max-width: 1680px)', href: '/css/style-desktop.css', containers: 1200 },
// and so on for all of your stylesheets
I am also trying the above code locally.
here is the code:
<html>
<head>
<script type="text/javascript" src="../JQuery/excanvas.js"></script>
<script type="text/javascript" src="../JQuery/jquery.js"></script>
<script type="text/javascript" src="../JQuery/jquery.jqplot.js"></script>
<script type="text/javascript" src="../JQuery/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="../JQuery/jqplot.barRenderer.js"></script>
<script type="text/javascript" src="../JQuery/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="../JQuery/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="../JQuery/jqplot.canvasAxisLabelRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="../JQuery/jquery.jqplot.css" />
<script type="text/javascript">
$(document).ready(function(){
var plot1 = $.jqplot ('chart3', [[3,7,9,1,4,6,8,2,5]]);
});
</script>
</head>
<body>
<div id="chart3" style="width:400px; height:300px;"></div>
</body>
</html>
But when I run this code, it gives me javascript error for "excanvas.js" file. like "parentnode" is null or not an object. I am using IE8.
I tried the code and it works fine.
To be 100% honest I run it in ie9 with compatibility mode of ie8, then ie7 (since I update my browsers regularly, I recommend doing the same and asking clients to do the same as well) and it works fine.
The only issue I might expect you can have here is that these scripts:
<script type="text/javascript" src="../JQuery/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="../JQuery/jqplot.barRenderer.js"></script>
<script type="text/javascript" src="../JQuery/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="../JQuery/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="../JQuery/jqplot.canvasAxisLabelRenderer.min.js"></script>
... are located in plugins folder which you should have if you downloaded the jqPlot from their site.
To test quickly if this is the issue you can simple delete the aforementioned scripts and the code should work just fine as it is not using them at all.
When I include the js for lightbox it prevents my other js from running; which means my jquery nav and slide down effects for divs stop working. Am I including the files in the correctly? I tried the endconflict() in the top of my script but that didn't work. Any help is greatly appreciated.
Thx
<link rel="stylesheet" type="text/css" href="jquery-lightbox-0.5/css/jquery.lightbox-0.5.css" media="screen" /> <link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap-responsive.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
***<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />***
<script type="text/javascript" src="js/jquery.js"></script>
<script src="javascript/jquery-1.7.1.min.js"></script>
<script src="javascript/bootstrap.js"></script>
***<script type="text/javascript" src="../lightbox2.05/js/prototype.js"></script>
<script type="text/javascript" src="../lightbox2.05/js/scriptaculous.js"></script>
<script type="text/javascript" src="../lightbox2.05/js/lightbox.js"></script>***
<script>
<a href="images/Screen Shot 2012-02-27 at 9.51.49 PM.png" rel="lightbox">
<img src="../../images/Screen Shot 2012-02-27 at 9.56.49 PM.png" height="180" width="460" alt="">
</a>
The problem is that lighbox uses pieces of Scriptaculous and Prototype, which are other javascript libraries like jQuery is. They don't play nicely with each, so you have to tell jQuery to avoid them.
Rather than the typical document ready setup that you normally put your jQuery code in:
$(document).ready(function() {
// Stuff to do as soon as the DOM is ready;
});
You will instead wrap your jQuery code in this:
jQuery(document).ready(function($){
// Stuff to do as soon as the DOM is ready;
});
You can read more about handling javascript library conflicts here: http://docs.jquery.com/Using_jQuery_with_Other_Libraries