i am trying to implement the slider from this site
http://bxslider.com/
i used the exact procedure what they said but still my code is not working
can you guys tell me how to fix it
i am providing my fiddle code blow
http://jsfiddle.net/v3efb/3/
http://jsfiddle.net/v3efb/3/embedded/result/
providing my code below
<ul class="bxslider">
<li><img src="http://maxcdn.webappers.com/img/2009/01/jquery-carousel.png" /></li>
<li><img src="http://maxcdn.webappers.com/img/2009/01/jquery-carousel.png" /></li>
<li><img src="http://maxcdn.webappers.com/img/2009/01/jquery-carousel.png" /></li>
<li><img src="http://maxcdn.webappers.com/img/2009/01/jquery-carousel.png" /></li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />
<script>
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>
jsFiddle DEMO
In your markup, you are using relative paths to jquery.min.js, bxslider.min.js and bxslider.css files.
That means those files are locally available in their respective subfolders.
However, jsFiddle does not know the complete URL path, aka the absolute path, to those files.
Change the paths so they are a complete URL.
Tip: In jsFiddle, you can import .js and .css files as assets using the Add Resources panel on left side.
Related
I am trying to include a jquery plugin in an MVC application via bundling css and js files.
But the functionality does not work.
I am aware about how to bundle the files with bundles.add(….)
What exactly am I doing wrong?
bundles.Add(new ScriptBundle("~/bundles/js").Include(
"~/js/rainbow.min.js",
"~/js/tiksluscarousel.js"));
bundles.Add(new StyleBundle("~/bundles/css").Include(
"~/css/animate.css",
"~/css/normalize.css",
"~/css/tiksluscarousel.css",
"~/css/github.css"));
#Styles.Render("~/bundles/css")
#Scripts.Render("~/bundles/js")
Global asax: BundleConfig.RegisterBundles(BundleTable.Bundles);
Index.cshtml:
<div id="fruits">
<ul>
<li><img src="~/images/fruits1.jpg" /></li>
<li><img src="~/images/fruits2.jpg" /></li>
<li><img src="~/images/fruits3.jpg" /></li>
<li><img src="~/images/fruits4.jpg" /></li>
<li><img src="~/images/fruits5.jpg" /></li>
<li><img src="~/images/fruits6.jpg" /></li>
<li><img src="~/images/fruits7.jpg" /></li>
<li><img src="~/images/fruits8.jpg" /></li>
</ul>
</div>
<script language="javascript">
$(document).ready(function(){
$("#fruits").tiksluscarousel({width:640,height:480,nav:'thumbnails',current:1,type:'zoom'});
});
</script>
After adding the files to a bundle you'll need to reference the bundle in your headers, and be sure to register your bundles in your Global.asax file i.e.
Global file:
// Registers default bundle collection
BundleConfig.RegisterBundles(BundleTable.Bundles);
You also need to split the bundles to register styles and scripts separately so in your headers you can run:
Layout Sheet:
#Styles.Render("~/bundleLocation/cssBundleName")
#Scripts.Render("~/bundleLocation/scriptBundleName")
The final item (which is what this one is), the bundle names can't be the same as the folder locations of the bundles so where there is
bundles.Add(new ScriptBundle("~/bundles/js").Include(
"~/js/rainbow.min.js",
"~/js/tiksluscarousel.js"));
bundles.Add(new StyleBundle("~/bundles/css").Include(
"~/css/animate.css",
"~/css/normalize.css",
"~/css/tiksluscarousel.css",
"~/css/github.css"));
You'll just need to rename the ScriptBundles to something other than /js and /css
i.e
bundles.Add(new ScriptBundle("~/bundles/jsScripts").Include(
"~/js/rainbow.min.js",
"~/js/tiksluscarousel.js"));
bundles.Add(new StyleBundle("~/bundles/cssStyles").Include(
"~/css/animate.css",
"~/css/normalize.css",
"~/css/tiksluscarousel.css",
"~/css/github.css"));
This is just a routing convention of MVC where it will be confused by the bundle name and attempt to link a non-existing folder
i am trying to use this Date time Picker in MVC, its been hours but picker screen is not showing up, i also tried this
BundelConfig.cs
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/moment.js",
"~/Scripts/bootstrap.js",
"~/Scripts/bootstrap-datetimepicker.min.js"
));
// other bundles here
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/site.css",
"~/Content/bootstrap.css",
"~/Content/bootstrap-datetimepicker.min.css"
));
// other bundles here
My View:
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/moment.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
_Layout:
<!DOCTYPE html>
<html>
<head>
#Scripts.Render("~/bundles/modernizr")
#Styles.Render("~/css/boostrap.css")
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
</head>
<body>
<div>
// here other divs
#RenderBody()
</div>
<script src="js/jquery.js"></script>
<script src="js/boostrap.min.js"></script>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
</html>
Expected output
http://jsfiddle.net/RR4hw/7/
i am not able to figure out what i am doing wrong ?, Any help would be appreciated.
You are including jQuery multiple times. Your bundle already included it, so you can remove this line in your layout:
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
and these lines from your view:
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/moment.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
This line in your Layout
#Scripts.Render("~/bundles/jquery")
is doing it all for you, because you added those scripts to that bundle.
Including the same script multiple times impacts negatively on performance, but wouldn't normally stop the code from working. However, in this case the different versions of jQuery that you've included are all different versions. I would check what is in your Scripts folder and see if it is up to date.
As an aside, it's also considered good practice to put styles (e.g. CSS) at the top of the page and scripts at the bottom, because that way the browser will load the page properly with styling, and not be slowed down by trying to load scripts halfway through (and if there's a problem with the script, the page still loads).
And as a final aside, you also look like you are a bit confused about the difference between .min.js and .js (I'm extrapolating from the fact you sometimes use the min version and sometimes don't; if you know all this already please excuse me!). The .min.js files are a minimised version (variable names as short as possible, comments deleted, whitespace reduced to minimum) that can be sent to the server. You may already have something like this
#if DEBUG
BundleTable.EnableOptimizations = false;
#else
// note: overrides compilation debug="true" in Web.config
BundleTable.EnableOptimizations = true;
#endif
in your Bundle.Config file. If not, it's handy to add because it means that the release version has the best performance (.min.js files) but the debug version is more human-readable (normal .js files) to help you debug it.
I seem to be having some trouble setting up and playing with jquery mobile. The issue is that if you hover over list items in a ul you get a huge delay in the animation, same with hovering on the tablet. My page is simple and almost exactly taken from a jQuery mobile tutorial. You can see the code below or visit : aliahealthcare.com/jquerymobile to reproduce the same environment. Thanks!
my Code:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="https://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Select a Class Type</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><a href="#">
<img height="100px" src="https://static.webresint.com/images/micro.hostel.com/gallery/34561.jpg">
<h2>Day Class</h2>
<p>Broken Bells</p></a>
</li>
<li><a href="#">
<img src="http://sweetclipart.com/multisite/sweetclipart/files/sunset_hills.png">
<h2>Evening Class</h2>
<p>Hot Chip</p></a>
</li>
<li><a href="#">
<img src="http://www.webweaver.nu/clipart/img/nature/planets/cartoon-moon.png">
<h2>Night Class</h2>
<p>Phoenix</p></a>
</li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
The problem is that you are using very large images and rescaling them in the browser. The biggest culprit is sunset_hills.png. Here's a jsFiddle with just that image commented out and and you will already notice a huge difference in performance.
Instead of resizing your images using css or img attributes, you should use smaller versions of the images (even better you should try and use css sprites). If you need to support multiple sizes based on the screen size then you can accomplish this by displaying your images using css media queries.
That said I'm not exactly sure why there is such a big difference in performance between chrome and other browsers.
As a side point you are linking to the css for jQuery mobile 1.0.1 but you are using jQuery Mobile 1.3.2. Also JQM 1.3.2 supports jQuery 1.9.1 (while you are linking to jQuery 1.6.4).
I've been trying to get a script that inserts a div of text after the first and second paragraph of an article to work in jQueryMobile. It works on the first pageload, but on the second it loads the content twice, and the third time it's loaded three times, and so on.
The jQueryMobile libraries and my script is loaded in the head:
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="myscript.js">
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
Then I have
<body id="mobile">
<div id="wrapper" data-role="page">
And then the content of the page
My script is executed as documented on jquerymobile.com
$("#wrapper").live('pageinit', function() {
Am I missing something? Any help will be deeply appreciated.
try adding data-dom-cache="false" it should look like this
<body id="mobile">
<div id="wrapper" data-role="page" data-dom-cache="false">
As Clarence commented, a better solution is to move the <script> tag outside of the <div> with data-role="page"
<body id="mobile">
<div id="wrapper" data-role="page">
<!-- stuff -->
</div>
<script>
$("#wrapper").live('pageinit', function() {
// more stuff
});
</script>
</body>
<div data-role="header" data-theme="e">
<a href="index.html" data-theme="b" data-icon='gear'>Switch</a>
<h1>Header</h1>
Home
</div>
No gear or home icons show. I dont get it. Here are files used, all newest.
<link rel="stylesheet" href="css/jquery.mobile-1.0.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
Any ideas? Thanks for your input.
You are hosting the CSS locally which means you need to also host the CSS images locally.
Either use the jQuery CDN for your CSS which will also use the CDN hosted images or make sure you have an image directory under your css directory: http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css
There should be an images directory under your css directory with the following files:
ajax-loader.png
icons-18-black.png
icons-18-white.png
icons-36-black.png
icons-36-white.png