how to get two jquery ui slider on a a page , when i used id slider for than one div only first slider is shown
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href="css/style.css" rel="stylesheet" />
<link rel="stylesheet" href="css/jquery-ui.css" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
.
.
.
.
.
<div id="left_panel">
<div id="panel_title">
Left Panel
</div>
<textarea id="txt" > </textarea>
<input type="checkbox" name="right_to_left" value="Bike">
Right to Left
<br/>
<div id="font_family">
<!--[if !IE]> -->
<div class="notIE">
<!-- <![endif]-->
hello
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
<!--[if !IE]> -->
</div>
<!-- <![endif]-->
</div>
<br/>
Size:<div class="font_size" class="slider"></div>
Opacity:<div class="font_opacity" class="slider"></div>
</div>
<div id="middle_panel">
I am in middle
</div>
</div>
</div>
</body>
Please suggest?html
You can add as many as you want in one page and to make them work independently you should use uniques selectors and id is the best one.
Here is a fiddle to make it clear.
use by class , don't use with id, id must be unique
Size:<div class="font_size slider"></div>
Opacity:<div class="font_opacity slider"></div>
Related
I am implementing an online form-builder type thing. I need to use Jquery-ui drag and drop in angular-dragdrop.
I have two containers, one on the left that keeps all the controls and on the right is the place where I can drop them. Now what I need is I don't want to get removed the original control from left container. I tried simple code uptil now as:
<!DOCTYPE html>
<html ng-app="myapp">
<head lang="en">
<meta charset="utf-8">
<title>Angular drag and drop</title>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css" rel="stylesheet"> -->
<script src="../components/jquery.min.js"></script>
<script src="../components/jquery-ui.js"></script>
<script src="../components/angular.js"></script>
<script src="../src/angular-dragdrop.js"></script>
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" ng-controller="mainCtrl" style="height:600px;">
<div class="col-sm-4" style="background-color:green" data-drag="true" data-drop="false" data-jqyoui-options="{revert: revertCard}" jqyoui-draggable="{animate:true}">
<div>
<button class="btn btn-primary">Hello world</button>
</div>
</div>
<div class="col-sm-8" style="background-color:grey; height:100%" data-drop="true" data-jqyoui-options jqyoui-droppable="{multiple: true}">
</div>
</div>
</body>
</html>
<script>
var app = angular.module('myapp', ['ngDragDrop']);
app.controller('mainCtrl', function ($scope) {
});
</script>
I tried helper:clone in data-jqyoui-options but it did not work. It did not allow me to drag the element. The control is dragged but it comes back to its original place.
Requirement:
I need control to be copied to right container keeping the original.
In my current case my original control can be dragged anywhere on the webpage. I just want to restrict it in it's parent container or the droppable right container.
PLNKR example of problem
The label reads Group By, but the letters are all superimposed for some reason.
Here is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Label font</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure.css">
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="//builder.yaas.io/public/js/vendor/bootstrap/dist/css/bootstrap.min.css">
</head>
<body ng-app="app">
<div ng-controller="UICtrl">
<form class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-g">
<div class="pure-u-md-1">
<label for="graphType">Group By: </label>
<select id="graphType" class="pure-input-1">
<option disabled selected value> -- Select a Graph Type --</option>
<option> Graph type 1 </option>
</select>
</div>
</div>
</fieldset>
</form>
</div>
</body>
</html>
The problem goes away if I don't use the Pure CSS library. Is there anyway I can have the label font without messing up while keeping the Pure CSS?
You can customize your label css
label {
letter-spacing: 0.1em;
}
I've spent 4 hours trying to get through this, and I couldn't find a solution yet so far. Basically what I'm trying to do is add a description to each picture in the slide. So, when the picture switches, the description must switch as well. So far I've tryed a lot of stuff but nothing seems to trigger the changes. This is what i've done now
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
<title>Nivo Slider Demo</title>
<link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/bar/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
dev7studios
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" id="foto1" />
<img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" id="foto2" />
<img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" id="foto3" />
<img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" id="foto4" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with a link.
</div>
</div>
</div>
<!-- my Code -->
<div class="descriptionOff" id="first">
Description 1
</div>
<div class="descriptionOff" id="second">
Description 2
</div>
<div class="descriptionOff" id="third">
Description 3
</div>
<div class="descriptionOff" id="fourth">
Description 4
</div>
<!-- :::::::::::::: -->
<script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="scripts/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<script type="text/javascript" src="scripts/andri.js"></script>
So, I've put some div with the descriptions and added some ID on the pictures;
.Description{
display:block;
}
.descriptionOff{
display:none;
}
In the css I've added these 2 classes that the descriptions have to use to show or not themselves;
if($("#foto1").hasClass("nivo-main-image")){
$("#first").toggleClass("Description");
}
And this is the simple line of code I've added in (a different file of) js: basically, if the first photo has class nivo-main-image (which is the class that shows the pictures in the slide), it should toggle the class of the first description to show it (the if statement is not complete, of course I would have done the same for the other descriptions). But nothing happens, the class doesn't switch. So, I ask you for help, or if you have any other solution and if you share it, I would appreciate that a lot.
I haven't really tested this, but have you tried wrapping your slider images in spans and adding your caption inside it (after the img)?
Like so:
<div id="slider" class="nivoSlider">
<span><img src="slide1.jpg" /><p>This is my non-default caption!</p></span>
<img src="slide2.jpg" />
<img src="slide3.jpg" />
</div>
Code as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My God Man Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link href="/Content/bootstrap/bootstrap.css" rel="stylesheet"/>
<link href="/Content/bootstrap/bootstrap-responsive.css" rel="stylesheet"/>
<link href="/Content/fontawesome/font-awesome.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="/Content/IE9FixScripts"></script>
;
<![endif]-->
</head>
<body>
<div id="wrap">
<div class="container">
<!-- Main content any sections which need to be filld in and then body -->
<div class="container">
<div class="jumbotron">
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h3>Home Page.</h3>
<h4> Welcome GodMan, if you click on the above link where it says [Needs Role] and if it works then you are good else you see a custom 401 message.</h4>
</hgroup>
</div>
</section>
<!-- footer section here needs customisation.-->
<div id="footer">
<footer>
<div class="row">
<div class="col-lg-12">
<ul class="list-unstyled">
<li class="pull-right">Back to top</li>
<li><a id="testingID" href="#"data-placement="left" data-toggle="tooltip" class="btn btn-default" type="button" data-original-title="Tooltip on left">Tool Tip Left</a></li>
<li>Tool Tip Right</li>
<li>Tool Tip Bottom</li>
<li>Tool Tip Top</li>
<li>PopOver</li>
<li>PopOver2</li>
</ul>
</div>
</div>
</footer>
</div>
<!-- footer ends-->
</div>
</div>
<script src="/Scripts/jquery-2.0.3.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script type="text/javascript">
$.ready(function () {
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover({trigger: "hover"});
$('#testingID').tooltip('show');
//$().tooltip({
// selector: "[data-toggle=tooltip]",
// container: "body"
//})
});
</script>
</body>
</html>
Looked at the other link which [https://stackoverflow.com/questions/18410922/bootstrap-3-0-popovers-and-tooltips]
did what it says but ain't working.
what is the mistake what i am making.
am i forgetting to add a reference to something?
or my JQuery verion is not good should i go back?
Tried the fiddler example with JQ 2.X edge on the example above mentioned in post. and it works there.
but not for me. Strange. it may be some thing really small. but cant seem to get it.
Any help is appreciated.
I made a JS fiddle based on your code which can be found here - http://jsfiddle.net/w2gTy/
For the jQuery dependency I used 2.0.2, hopefully that isn't the difference. That said, you were missing 'document' in your $.ready declaration. Without it the tooltips never appeared.
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover({trigger: "hover"});
$('#testingID').tooltip('show');
//$().tooltip({
// selector: "[data-toggle=tooltip]",
// container: "body"
//})
});
That said, you could also even omit the $(document).ready() section and leave just the .tooltip initializers and that would work as well.
Okay, So I'm new to using frameworks and js libraries and I'm wanting to us bootstrap and bootstrap datepicker for a form and I have no clue if I have the file order correct but the links is how the files are setup, and I know very little about javascript, pretty much all I code in is php but I need this for a form.
Here's my testing form for the bootstrap datepicker:
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<meta charset="utf-8">
<link rel="stylesheet" href="_css/datepicker.css">
<link rel="stylesheet" href="_css/bootstrap.css">
<link rel="stylesheet" href="_css/bootstrap-responsive.css">
<script type="text/javascript" src="datepicker/bootstrap-datepicker.js"></script>
</head>
<body>
<center>
<h1>BootStrap Datepicker</h1>
<form>
<div class="well span12 main">
<input type="text" id="dp1" class="span2 datepicker" placeholder="Date..."
name="date"> <br>
</div>
<input type="submit" value="Search" class="btn">
</form>
</center>
<!-- JAVAscript ----------------------------------------------------------------->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="_js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="_js/bootstrap.js"></script>
</body>
</html>
What exactly am I doing wrong?
You should include bootstrap-datepicker.js after bootstrap.js and you should bind the datepicker to your control.
$(function(){
$('.datepicker').datepicker({
format: 'mm-dd-yyyy'
});
});
man you can use the basic Bootstrap Datepicker this way:
<!DOCTYPE html>
<head runat="server">
<title>Test Zone</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="Css/datepicker.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="../Js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#pickyDate').datepicker({
format: "dd/mm/yyyy"
});
});
</script>
and inside body:
<body>
<div id="testDIV">
<div class="container">
<div class="hero-unit">
<input type="text" placeholder="click to show datepicker" id="pickyDate"/>
</div>
</div>
</div>
datepicker.css and bootstrap-datepicker.js you can download from here on the Download button below "About" on the left side.
Hope this help someone, greetings.
I believe you have to reference bootstrap.js before bootstrap-datepicker.js
Just add this below JS file
<script type="text/javascript">
$(document).ready(function () {
$('your input's id or class with # or .').datepicker({
format: "dd/mm/yyyy"
});
});
</script>
Couldn't get bootstrap datepicker to work until I wrap the textbox with position relative element as shown here:
<span style="position: relative">
<input type="text" placeholder="click to show datepicker" id="pickyDate"/>
</span>