<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#slider { margin: 10px; }
</style>
<input type="text" value="" id="rateToPost"/>
<script type="text/javascript">
var my = document.getElementById("rateToPost").onchange();
alert(my);
</script>
<div style="width:75px;height:48px;">
<div style="width: 5px;margin-left: 10px;">1</div>
<div style="width: 5px;margin-left: 38px;margin-top: -10px;">2</div>
<div style="width: 5px;margin-left: 70px;margin-top: -13px;">3</div>
<div style="width: 5px;margin-left: 98px;margin-top: -12px;">4</div>
<div style="width: 5px;margin-left: 124px;margin-top: -12px;">5</div>
</div>
<script>
$(document).ready(function() {
$("#slider").slider({
range: "min",
value: 2,
min: 1,
max: 5,
//this gets a live reading of the value and prints it on the page
slide: function( event, ui ) {
$( "#ratingResult" ).text( ui.value );
},
//this updates the value of your hidden field when user stops dragging
change: function(event, ui) {
$('#rateToPost').attr('value', ui.value);
}});
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="slider"></div>
</body>
</html>
In the above script I used a slider for rating. But what is the problem here is I have to fetch the text box value onchange and highlight the corresponding rating number background. But I cant fetch the value. Anyone can help to solve thisproblem. Thanks in advance
Try this using jQuery:
$('#rateToPost').on("change", function () {
alert($(this).val());
});
Since $('#rateToPost') is a form element: Use the val() method.
assign value: $('#rateToPost').val(ui.value);
read value: var res = $('#rateToPost').val();
$('#rateToPost').keyup(function(){
$('#slider').slider({value: this.value});
});
Demo http://jsbin.com/azosab/2/edit
Related
I am working on a price range slider. I am following the jQuery guide and use them as reference.
My problem is that I can't add dragable behavior on the actual slider. I've researched and have tried to add jquery.ui.touch-punch.min.js, however it did not solve my problem.
Please see below my code:
$(function() {
$("#slider-range-min").slider({
range: "min",
value: 400,
min: 400,
max: 2000,
slide: function(event, ui) {
$("#amount").val("£" + ui.value);
}
});
$("#amount").val("£" + $("#slider-range-min").slider("value"));
$('#slider-range-min').draggable();
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<p>
<label for="amount">Maximum price:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range-min"></div>
You will need to make sure you're correctly loading the:
<script src="jquery.ui.touch-punch.min.js"></script>
Your current code expects this file to be in the same folder as your HTML page, if it's hosted elsewhere you will need to change the link or use a CDN of some form.
I am doing a project using angularjs and in this project I am using a jquery slider. Using this slider I have to change a selectbox value its defined in one $scope array but its not working.
Here is an example code in this I just want to know how to change the scope value based on jquery slider
Html code
<html lang="en" ng-app="myapp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/layout.css" type="text/css" />
<script src="<?php echo base_url(); ?>assets/angular/angular.js" type="text/javascript"/></script>
</head>
<body ng-controller='CompositionController'>
<div class="thinkness-bar">
<div class="popupslider">
<div id="testslider" class="jquery-slider"></div>
<input type="text" id="testamount" class="progressnumber" value="500" >
<input type="hidden" id="testhdndfaltThick" name="testhdndfaltThick" value="50" />
</div>
</div>
</div>
{{value}}
</body>
<script src="<?php echo base_url(); ?>assets/includes/jquery.1.11.1.min.js"></script>
<script src="<?php echo base_url(); ?>assets/includes/jquery.1.10.2.js"></script>
<script src="<?php echo base_url(); ?>assets/includes/jquery.ui.1.11.1.js"></script>
</html>
script code
<script>
var myapp = angular.module('myapp', []);
myapp.controller('CompositionController', function ($scope,$http)
{
$scope.value =0
var sliderValue = [2,3,5,7,8,10,11,13,15,18,19];
$("#testslider").slider({
range: "min",
value: 8,
min: 1,
max: 20,
slide: function(event, ui)
{
if(sliderValue.indexOf(ui.value)===-1 ) return false;
$("#testamount" ).val( ui.value);
}
});
$( "#testamount" ).val( $( "#testslider" ).slider( "value" ) );
$scope.value =$( "#testamount" ).val();
});
</script>
Thanks in advance.
Since you're setting the value in a jquery event, angular doesn't know that something has been updated and you need to call
$scope.$apply();
after setting $scope.value.
PS: I really hope this is just a test and not actual production code.
Edit:
Well there were a few problems: ng-app was missing from the body tag, I assume you meant to change the value with the slider ...
I made a plunkr:
I have a slider in my code. when I click I click on it, it alerts a message "called". But the problem here is it is alerting the message only when the square on the slider is clicked but I want to alert a message after clicking anywhere on the slider.
Here is my code.
<html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$(function () {
$("#slider-1").slider({
range: true,
min: 0,
max: 500,
values: [0, 0],
slide: function (event, ui) {
$("#priceA").val("$" + ui.values[0] + " - $" + ui.values[1]);
},
stop: function () {
getValues();
}
});
});
$("#slider-1").click(function(){
alert('Called');
});
});
</script>
</head>
<p>
<label for="priceA">Price rangeA:</label>
<input type="text" id="priceA" style="border:0; color:#067ab4; font-weight:bold;">
</p>
<div id="slider-1" class="myClass"></div><br><br>
</html>
Do you want that even clicking randomly on the slider should alert a message:: then try this:
stop: function () {
alert('called');
getValues();
}
and here is DEMO LINK , check it out.
I can't get the Resize aspect of jQuery UI to work, everything else works just fine.
I've look at several solutions listed on this site, and I've tried them all. It seems like the re-sizeable classes, and all the required elements are being added. I never see a handle or have the actual ability to resize.
Please take a look and let me know what I'm missing... if anything.
<link rel="stylesheet" href="canvas.css">
<link rel="stylesheet" href="jquery-ui.css">
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script>
$(document).ready(function() {
var activeFrame = "#frame1";
$(function() {
$( "#assets" ).accordion();
});
$(".preview").click(function(event) {
console.log("Frame backdrop set to " + event.target.id);
$(activeFrame).removeClass();
$(activeFrame).addClass(event.target.id);
});
$(".prop").click(function(event) {
console.log("User added " + event.target.id + "_full");
$(activeFrame).append('<div id="' + event.target.id + '_full" class="drag "></div>');
propPrep();
});
function propPrep(event) {
$( ".drag" ).draggable({ containment: "parent" });
$( "#" + event.target.id + "_full").resizable({ aspectRatio: 16 / 9});
}
});
</script>
</head>
<body>
<div id="assets">
<h3>Backdrops</h3>
<div id="backdrops">
<div id="bd1" class="preview"></div>
<div id="bd2" class="preview"></div>
<div id="bd3" class="preview"></div>
</div>
<h3>Props</h3>
<div id="props">
<div id="garfield1" class="prop"></div>
</div>
<h3>Characters</h3>
<div id="characters">test</div>
</div>
<div id="strip">
<div id="frame1"></div>
<div id="frame2"></div>
<div id="frame3"></div>
</div>
</body>
Pass the argument event to the prop function
Change
$(".prop").click(function(event) {
..
propPrep();
});
to
$(".prop").click(function(event) {
....
propPrep(event);
});
here, I have code that enables dragging and dropping of accordian.
But what I want is when User clicks on edit, then content in accordian should be editable.
I have tried the answers from following link How to make an element's content editable with JavaScript (or jQuery). But not getting the result i want.
The script is:
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src=" http://code.jquery.com/jquery-2.0.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(document).ready(function () {
$('#accordion').accordion({
collapsible: true,
active: false,
height: 'fill',
header: 'h3'
}).sortable({
items: '.s_panel'
});
$('#accordion').on('accordionactivate', function (event, ui) {
if (ui.newPanel.length) {
$('#accordion').sortable('disable');
} else {
$('#accordion').sortable('enable');
}
});
$( ".sortable" ).sortable({
connectWith : ".sortable"
});
});
</script>
<script>
$('#btn1').click(function () {
$('#content1').attr('contenteditable', 'true');
});
</script>
</head>
The HTML is:
<body>
<br /><br />
<div id="source" style="width:345px;float:left; border:1px dotted ">
<div id="accordion" style="height:450px;width:300px; " class="sortable">
<div class="s_panel">
<h3 class="ui-state-default unassigned">About Us</h3>
<div id="data">
<div id="content1">This is about Us</div>
<form>
<input id="bt1" type="button" value="edit"/>
</form>
</div>
</div>
</div>
</div>
<div id="teams" style=" position:absolute; top: 100px; left:400px; width:600px;" >
<ul class="sortable" style="height:450px;width:550px; "></ul>
</div>
</body>
Working FIDDLE
$('#btn').click(function () {
$('#content1').attr('contenteditable', 'true');
});
<input id="btn" type="button" value="edit" />
New Edited :-
$( ".sortable" ).sortable({
connectWith : ".sortable"
});
FIDDLE 2