Newbie over here looking for some help. I'm having trouble implementing the Slick carousel on my site. I would like to use "Slider Syncing" found at http://kenwheeler.github.io/slick/
Please see my code here: http://jsfiddle.net/g1xd6vtx/
The site I'm building is a C# .NET MVC4 project built in Visual Studio 2012.
Sample HTML:
<div class="slider slider-for">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div class="slider slider-nav">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
CSS (which I have placed in the head section):
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
Javascript (which I have placed in the scripts section):
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
centerMode: true,
focusOnSelect: true
});
Thank you for any help! :)
A little late, but this might help others:
I noticed that you have to have a block or inline-block element inside .slider-nav DIV. In this case I added an H1. Then style it to cover the parent DIV, then add text-align:center; to the parent DIV.
CSS
.slider-nav h1{
display:inline-block;
width:100%;
height:80px;
}
.slider-nav .slick-slide{
height:80px;
color:#fff;
background:green;
cursor:pointer;
text-align:center;
margin:0 10px;
}
HTML
<div class="slider-nav">
<div><h1>1</h1></div>
<div><h1>2</h1></div>
<div><h1>3</h1></div>
<div><h1>4</h1></div>
<div><h1>5</h1></div>
</div>
Demo:
http://jsfiddle.net/g1xd6vtx/2/
Related
I am a noob at jQuery, so please help me out.
I am using Visual Studio 2005 with ASP.net 2 (I know, we're planning an upgrade soon!)
I am simply trying to embedd the DateBox FlipBox control on my website, as the users will be using the website via their iPads.
How do I go about getting this to work? Will it work?
I have placed this in my master page.
<head runat="server">
<link href="http://cdn.jtsage.com/jtsage-datebox/-4.0.0/jtsage-datebox-4.0.0.jqueryui.min.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.jtsage.com/jtsage-datebox/-4.0.0/jtsage-datebox-4.0.0.jqueryui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.flipbox.min.js"></script>
<script type="text/javascript" src="http://cdn.jtsage.com/jtsage-datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
<title>Tec-NQ Boarding Register</title>
<asp:ContentPlaceHolder id="ContentPlaceHolderHead" runat="server">
</asp:ContentPlaceHolder>
</head>
And in my ASPx page I've simply put an <input> statement, as per the sample instructions here.
<input type="text" data-role="datebox" data-options='{"mode":"calbox"}'>
But all I get is a textbox! Where/how do I get the date control to show up?
I had a closer look at that link, and there are heaps of <div> statements outlining the actual control and a calendar icon.
<div class="input-group"><input type="text" data-options="{"mode":"calbox", "useInline":false, "useInlineAlign": "right"}" data-role="datebox" id="in1" class="form-control" readonly="readonly"><div class="input-group-addon" title="Open Date Picker"><span class=" glyphicon glyphicon-calendar"></span></div></div>
I've even tried to paste that code directly into my ASPX page, but I get a whole heap of junk.
How do you get this thing to work please? It's driving me nuts.
Thanks
The answer was staring at my face!
https access priveleges
Once I downloaded the js files directly and stored them locally, everything worked off the bat!
i am using jquery drag and drop selection to pick up selected cells in a table. However the drag select can be done all over the web. Is there a code or method that i can restrict the drag to a particular space or DIV
Any sample code or advise to Share
Thanks so Much
Like this
$(function() {
$( "#draggable" ).draggable();
});
#draggable, #notdraggable { width: 150px; height: 50px; padding: 0.5em; }
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
<div id="notdraggable" class="ui-widget-content">
<p>Cant Drag me around</p>
</div>
I created jquery popup dialog and asp.net dropdownlist control in my aspx page.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript" ></script>
<script src="//code.jquery.com/ui/1.10.0/jquery-ui.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function () {
$('#div_popup').dialog({
resizable: true,
height: 300,
width: 300,
position: 'center',
zIndex: 10000
});
});
</script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" type="text/css" />
<style type="text/css" >
#div_dropdownlist
{
margin-left : 50%;
margin-top : 50%;
z-index: -1;
}
#div_popup
{}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="div_dropdownlist">
<asp:DropDownList runat="server" ID="ddlList" Width="200px"></asp:DropDownList>
</div>
<div id="div_popup">
My test Popup
</div>
</form>
</body>
</html>
My purpose is to show jquery dialog popup over every other controls when you drag it over other controls.
Everything work well in every browsers but IE6.
I tried css zIndex. But it has no effect in IE6.
So, please let me know how I can make it correct in IE6.
Updated
I changed my div popup style to
#div_popup
{
z-index: 10000;
}
and I had changed my jquery dialog css style to
$('#div_popup').dialog({
...
zIndex: 10000
});
But in IE6, that jquery popup cannot display over asp.net dropdown list box when I drage over that control.
For your reference , here is my_source_code.
As mentioned in http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
There is an ie bug and the select boxes shows on top.
I would hide the select box as suggested or use an shim for ie6.
My Code:
#using Telerik.Web.Mvc.UI;
#using Telerik.Web.UI;
#{
ViewBag.Title = "Home Page";
}
<script type="text/javascript" src="~/Scripts/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-ui-1.8.11.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-ui-1.8.20.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-ui-1.9.0.custom.min.css"></script>
<script type="text/javascript" src="~/Scripts/jquery-ui-1.9.0.custom.css"></script>
<script type="text/javascript">
console.log($)
</script>
#(Html.Telerik().DatePicker()
.Name("DatePickerDOB")
.HtmlAttributes(new { style = "width: 140px; " })
)
#section featured {
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>#ViewBag.Title.</h1>
<h2>#ViewBag.Message</h2>
</hgroup>
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">
http://asp.net/mvc</a>. The page features <mark>videos, tutorials,
and samples</mark> to help you get the most from ASP.NET MVC. If you have
any questions about ASP.NET MVC visit <a href="http://forums.asp.net/1146.aspx/1?MVC"
title="ASP.NET MVC Forum">our forums</a>.
</p>
</div>
</section>
}
<h3>We suggest the following:</h3>
<ol class="round">
<li class="one">
<h5>Getting Started</h5>
ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
enables a clean separation of concerns and that gives you full control over markup
for enjoyable, agile development. ASP.NET MVC includes many features that enable
fast, TDD-friendly development for creating sophisticated applications that use
the latest web standards. <a href="http://go.microsoft.com/fwlink/?LinkId=245151">Learn
more</a></li>
<li class="two">
<h5>Add NuGet packages and jump start your coding</h5>
NuGet makes it easy to install and update free libraries and tools. <a href="http://go.microsoft.com/fwlink/?LinkId=245153">
Learn more</a></li>
<li class="three">
<h5>Find Web Hosting</h5>
You can easily find a web hosting company that offers the right mix of features
and price for your applications. <a href="http://go.microsoft.com/fwlink/?LinkId=245157">Learn
more</a></li>
</ol>
I don't know what I have to do further for displaying the DatePicker when I am clicking the datepicker text field. Please Help. Thanks.
There's nothing wrong with
#(Html.Telerik().DatePicker()
.Name("DatePickerDOB")
.HtmlAttributes(new { style = "width: 140px; " })
)
It works fine in my project (although the calendar opens when clicking the icon, not the textbox, but I don't think that's actually your question at this point).
Check to be certain that
#(Html.Telerik().ScriptRegistrar()
is being called. Noramlly this is in _Layout, but can be put directly in the file using a Telerik control.
On a side note (I don't think it's causing your problem, but certainly isn't helping anything), these lines are wrong:
<script type="text/javascript" src="~/Scripts/jquery-ui-1.9.0.custom.min.css"></script>
<script type="text/javascript" src="~/Scripts/jquery-ui-1.9.0.custom.css"></script>
.css files aren't scripts. They should be referenced like this:
<link href="~/Scripts/jquery-ui-1.9.0.custom.min.css" rel="stylesheet" type="text/css"/>
And you don't seem to actually be using any jQuery on this page, so you probably don't need to import all those scripts and css files anyway. Telerik uses its own jQuery scripts, that's what the script Registrar is for.
I'm trying to integrate my error handling with facebox to show my errors in a cleaner way. The problem that is occurring is that when I try to call jQuery.facebox, it is telling me that it is not a function. But I am able to use facebox's rel on links throughout my application.
Head:
<script language="javascript" src="http://code.jquery.com/jquery-latest.js" type="text/javascript" />
<script language="javascript" src="/Resources/js/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="/Resources/js/jquery-1.2.2.pack.js" type="text/javascript"></script>
<link href="/Resources/css/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="/Resources/js/facebox.js" type="text/javascript" />
Then from my codebehind on the masterpage Im calling facebox like this:
ScriptManager.RegisterStartupScript(Page, typeof(string), "ErrorMessage", "jQuery.facebox({ div: '#error' });", true);
And the error div is down towards the end of the masterpage:
<div id="error" style="display:none;">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" style="background-color:#5F92CB; color:#fff; padding:6px; font-weight:bold;" align="left">Error Occurred while processing request</td>
</tr>
<tr>
<td style="padding:4px;" class="boldText"><asp:Label ID="lblErrorMessage" runat="server" /></td>
</tr>
</table>
</div>
Any help would be greatly appreciated. thanks
If you really need to use multiple versions of jquery on the same page, which is doable but not always preferable (may give headaches), you will have to use jQuery's noconflict mode. Check for more info and implementation details the following urls: link 1, link 2
It's important to know which plugins use which version of jQuery. This is because you will have to load them in the right order. You will need to load the older version plugins before the new jQuery version.
That said it's beter to run scripts when the DOM is loaded, just like Brian said, use the following snippet to accomplish that:
$(document).ready(function() { jQuery.facebox({ div: '#error' }); })
Try wrapping it in document.ready as in:
ScriptManager.RegisterStartupScript(Page, typeof(string), "ErrorMessage", "$(document).ready(function() { jQuery.facebox({ div: '#error' }); });", true);
The reason it's failing is because it's running before the facebox plugin is ready most likely.