Having a bit of trouble getting a Jquery event to work. When the slider moves it should update the referenced field with the value of the slider.
This doesn't currently work
Code can be found below and while it works at the jsfiddle link, it does not work at the second link, you can move the slider but the value of it does not display.
http://jsfiddle.net/j08691/2N4Y8/
Please ignore the double initiation of #slider.
I have tried to reproduce the code in jsfiddle as such:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css' rel='stylesheet' type='text/css'>
<script>
$(function () {
$('#slider').slider({
value: 50,
min: 10,
max: 100,
step: 10
});
$(document).on("click", "#show-slider", function () {
$('#slide').toggle("slow");
});
});
$("#slider").slider({
slide: function (event, ui) {
$("#slider-value").html(ui.value);
},
change: function (event, data) {
alert(data.value)
}
});
$("#slider-value").html($('#slider').slider('value'));</script>
<body>
<h5>You can alter the reading ease of the page using the slider below.<span id="show- slider"> To toggle it click here.</span></h5>
<h5>The current Flesch reading ease score is at : <span id="slider-value"></span> </h5>
</div>
<div id="slide">
<br />
<div id="slider"></div>
<br />
<br />
</div>
</body>
</html>
The results of which can be found at :
http://shavid.webfactional.com/
As you can see, as per hosted here it doesn't appear to work, any suggestions?
I checked your website and it worked lol.
The code:
$(function () {
$('#slider').slider({
value: 50,
min: 10,
max: 100,
step: 10,
slide: function (event, ui) {
$("#slider-value").html(ui.value);
},
change: function (event, data) {
alert(data.value)
$("#slider-value").html($('#slider').slider('value'));
}
});
$("#show-slider").click(function()
{
$('#slide').toggle("slow");
});
});
Here's the Fiddle. I just removed the one of the sliders initialization
The difference between the fiddle and your site is that JSFiddle is wrapping the code inside of $(window).load(function(){ /*code here*/ });
Related
How should an extra row be added to the jQueryUI Autocomplete results? I've implemented Add additional link to jquery ui autocomplete list as shown below, but it will not display the extra row if autocomplete doesn't have any matches.
What I have tried...
To append an extra row to the jQueryUI autocomplete results, I came up with the below script. The extra row is added using the following:
open: function( event, ui ) {
$('<li id="add-new">Add New</li>')
.on('click', function(event) {$("#dialog-add-new").dialog("open");})
.appendTo('ul.ui-autocomplete');
}
I have three problems with my implementation:
If no results match the selected text, the new row isn't displayed. Type "On" in the input and you will see it. Type "xx" in the input and it isn't displayed. I suppose I could just have the server populate it, but seems like a waste, and would rather do it client-side.
Maybe problems if I have two ul.ui-autocomplete on the page?
The added row doesn't have the same appearance as the autocomplete rows.
The first item is the most critical. How should an extra row be added to the jQueryUI Autocomplete results even if Autocomplete doesn't have any results?
Please see http://jsbin.com/quyexu/1/ for a live demo of the below script. You could ignore the part regarding the dialog as it seems to be working. Thank you
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing</title>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js" type="text/javascript"></script>
<style type="text/css">
</style>
<script type="text/javascript">
var source = [
{value: "one",id: 1},
{value: "two",id: 2},
{value: "three",id: 3}
];
$(function(){
$("#autocomplete").autocomplete({
source: source,
minLength: 1,
focus: function( event, ui ) {event.preventDefault();$(this).val( ui.item.label );},
select: function(event, ui) {
console.log(ui)
$(this).val('');//.blur();
event.preventDefault(); // cancel default behavior which updates input field
$("#my-list").append('<li data-id="'+ui.item.id+'">'+ui.item.value+'</li>');
},
open: function( event, ui ) {
console.log(event,ui,this);
$('<li id="add-new">Add New</li>')
.on('click', function(event) {$("#dialog-add-new").dialog("open");})
.appendTo('ul.ui-autocomplete');
}
});
$("#dialog-add-new").dialog({
autoOpen: false,resizable: false,height: 200,width: 380, modal: true,
open : function() {},
buttons : [
{
text : 'ADD NEW',
"class" : 'green wide',
click : function() {
//Use Ajax to save value and get associated ID
var name=$('#new-name').val();
var id=123;
$("#my-list").append('<li data-id="'+id+'">'+name+'</li>');
$("#autocomplete").val('').focus();
$(this).dialog("close");
}
},
{
text : 'CLOSE',
"class" : 'gray',
click : function() {$(this).dialog("close");}
}
]
});
});
</script>
</head>
<body>
<input type="text" id="autocomplete" />
<ul id="my-list"></ul>
<div id="dialog-add-new" class="dialog" title="Add New">
<form>
<input type="text" name="new-name" id="new-name" />
</form>
</div>
</body>
</html>
To add an extra row, use the response event. http://api.jqueryui.com/1.10/autocomplete/#event-response
http://jsbin.com/wokuma/1/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing</title>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js" type="text/javascript"></script>
<style type="text/css">
</style>
<script type="text/javascript">
var source = [
{value: "one",id: 1},
{value: "two",id: 2},
{value: "three",id: 3}
];
$(function(){
$("#autocomplete").autocomplete({
source: source,
minLength: 1,
focus: function( event, ui ) {event.preventDefault();$(this).val( ui.item.label );},
select: function(event, ui) {
console.log(ui)
$(this).val('');//.blur();
event.preventDefault(); // cancel default behavior which updates input field
if(ui.item.id===0){$("#dialog-add-new").dialog("open");}
else {$("#my-list").append('<li data-id="'+ui.item.id+'">'+ui.item.value+'</li>');}
},
response: function( event, ui ) {
console.log(event,ui,this);
ui.content.push({value:"Add New", id:0, label:"Add New"});
}
});
$("#dialog-add-new").dialog({
autoOpen: false,resizable: false,height: 200,width: 380, modal: true,
open : function() {},
buttons : [
{
text : 'ADD NEW',
"class" : 'green wide',
click : function() {
//Use Ajax to save value and get associated ID
var name=$('#new-name').val();
var id=123;
$("#my-list").append('<li data-id="'+id+'">'+name+'</li>');
$("#autocomplete").val('').focus();
$(this).dialog("close");
}
},
{
text : 'CLOSE',
"class" : 'gray',
click : function() {$(this).dialog("close");}
}
]
});
});
</script>
</head>
<body>
<input type="text" id="autocomplete" />
<ul id="my-list"></ul>
<div id="dialog-add-new" class="dialog" title="Add New">
<form>
<input type="text" name="new-name" id="new-name" />
</form>
</div>
</body>
</html>
I am working on a search functionality.I need to select min price and max price with a seekbar.
I have searched a lot in google, But I found seekbar with one value.Below is the code I got.
<!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.4/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>
<script>
$(document).ready(function () {
$("#slider").slider(
{
min: 0,
max: 100,
step: 1,
change: showValue
});
$("#update").click(function () {
$("#slider").slider("option", "value", $("#seekTo").val());
});
function showValue(event, ui) {
$("#val").html(ui.value);
}
});
</script>
</head>
<body style="font-size:62.5%;">
<p>
The jQuery UI Slider plugin makes selected elements into sliders. There are various options such as multiple handles, and ranges. The handle can be moved with the mouse or the arrow keys.
</p>
<p>
This sample demonstrates the simple usage of the slider seek to function.
For more information about slider, please procedd to http://docs.jquery.com/UI/Slider
</p>
<div id="slider"></div>
Seek To : <input id="seekTo" type="text" value="10" />
<input id="update" type="button" value="Update" />
Current Value : <span id="val">0</span>
</body>
</html>
Some one help me how to have both min and max values with single bar..
I am working on PHP website. If you have any example code in php , it will be helpful..
Additional One:
And one more doubt, If this is not a range of values,and if it is like A A+ B B+ C C+ ... How can we take them in this type of seekbar..
Use range: true option!
<!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.4/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>
<script>
$(document).ready(function () {
$("#slider").slider(
{
range: true,
min: 0,
max: 100,
step: 1,
values: [10, 50],
change: showValue
});
$("#update").click(function () {
$("#slider").slider("option", "values", [$("#seekTo1").val(), $("#seekTo2").val()]);
});
function showValue(event, ui) {
$("#val").html(ui.values[0] + " - " + ui.values[1]);
}
});
</script>
</head>
<body style="font-size:62.5%;">
<p>
The jQuery UI Slider plugin makes selected elements into sliders. There are various options such as multiple handles, and ranges. The handle can be moved with the mouse or the arrow keys.
</p>
<p>
This sample demonstrates the simple usage of the slider seek to function.
For more information about slider, please proceed to http://docs.jquery.com/UI/Slider
</p>
<div id="slider"></div>
Seek To : <input id="seekTo1" type="text" value="10" /> <input id="seekTo2" type="text" value="50" />
<input id="update" type="button" value="Update" />
Current Value : <span id="val">0 - 50</span>
</body>
</html>
I have a slider in my code. Right now if I click on the slider an alert will pop up. But I want to pop up that alert only if the slider is moved or its value has been changed compared to previous movement. Is it possible.
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('Changed');
});
});
</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>
jquery ui slider has a change event :
http://api.jqueryui.com/slider/#event-change
$( ".selector" ).slider({
change: function( event, ui ) {
console.log(ui.value);
}
});
The following code will only let me drag and drop ONE clone onto a droppable area. When I try and drop another clone on the droppable area it disappears. I am able to drag it however.
$(".shape").draggable({
helper: 'clone',
});
$("#wrapper").droppable({
accept: '.shape',
drop: function(event, ui)
{
$(this).append($(ui.helper).clone());
$("#wrapper .shape").addClass("item");
$(".item").removeClass("ui-draggable shape");
$(".item").draggable();
}
});
Following the comments from people and the jfiddle provided below, it appears as though this snippet of code is working in a typical setup, however, I am using this in combination with Phonegap and more specifically on an Android device.
I know this is more specific and harder to replicate for other people, but for some reason it will not allow me to drag another clone onto the wrapper still.
Here is my entire code, if someone can spot something, i'd really appreciate it!
<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>
<script src="jquery-1.7.min.js"></script>
<script src="jquery-ui-1.8.16.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="ff.css" />
<script type="text/javascript" charset="utf-8">
// Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
function onDeviceReady() {
var mouseEventTypes = {
touchstart : "mousedown",
touchmove : "mousemove",
touchend : "mouseup"
};
for (originalType in mouseEventTypes) {
document.addEventListener(originalType, function(originalEvent) {
event = document.createEvent("MouseEvents");
touch = originalEvent.changedTouches[0];
event.initMouseEvent(mouseEventTypes[originalEvent.type], true, true,
window, 0, touch.screenX, touch.screenY, touch.clientX,
touch.clientY, touch.ctrlKey, touch.altKey, touch.shiftKey,
touch.metaKey, 0, null);
originalEvent.target.dispatchEvent(event);
originalEvent.preventDefault();
});
}
$(".shape").draggable({
helper: 'clone',
});
$("#wrapper").droppable({
accept: '.shape',
drop: function(event, ui)
{
$(this).append($(ui.helper).clone());
$("#wrapper .shape").addClass("item");
$(".item").removeClass("ui-draggable shape");
$(".item").draggable();
}
});
$(".show").live('touchstart', function() {
if ($("#openCloseIdentifier").is(":hidden")) {
$("#slider").animate({
marginLeft: "-150px"
}, 500 );
$("#openCloseIdentifier").show();
} else {
$("#slider").animate({
marginLeft: "0px"
}, 1000 );
$("#openCloseIdentifier").hide();
}
});
}//onDeviceReady
</script>
</head>
<body>
<div id="wrapper">
<div id="navWrap">
<div id="openCloseIdentifier"></div>
<div id="slider">
<div id="sliderContent">
<img class="shape" src="images/150x150.gif" />
</div>
<div id="openCloseWrap">
<a href="#" class="topMenuAction" id="topMenuImage">
<img src="images/show.gif" class="show" />
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Figured it out.
I had the shape being cloned nester in the wrapper div. That won't work.
Took it out and it works!
I have a Bee image and I want to animate it using jQuery.
The idea is to move the image from left (outside of screen) to right (outside of screen) to create an effect like it's flying.
Your bee needs to be absolutely positioned, something like this:
<div id="b" style="position:absolute; top:50px">B</div>
I've used a div here, but it could just as well be an <img> tag. As meo pointed out, don't forget the top attribute, because some browsers don't work without it. Then you can animate it:
$(document).ready(function() {
$("#b").animate({left: "+=500"}, 2000);
$("#b").animate({left: "-=300"}, 1000);
});
Here is a jsfiddle demo.
If you want to have a continuous animation as Hira pointed out, put the animation code in functions, make sure the left and right movement is the same, and use the onComplete option of animate() to call the next animation:
function beeLeft() {
$("#b").animate({left: "-=500"}, 2000, "swing", beeRight);
}
function beeRight() {
$("#b").animate({left: "+=500"}, 2000, "swing", beeLeft);
}
beeRight();
And the fiddle for that.
Try spritely: http://spritely.net/
i would do something like this:
http://jsfiddle.net/Uwuwj/2/
var b = function($b,speed){
var beeWidth = $b.width();
$b.animate({ //animates the bee to the right side of the screen
"left": "100%"
}, speed, function(){ //when finished it goes back to the left side
$b.animate({
"left": 0 - beeWidth + "px"
}, speed, function(){
b($b, speed) //finally it recalls the same function and everything starts again
});
});
};
$(function(){ //document ready
b($("#b"), 5000); //calls the function
});
bee careful, this code only works with bee's :P
In case you want the bee to keep flying across the screen, try this :-)
<html>
<head>
<script type="text/javascript" src="jquery/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
function animateImage() {
console.log("Called");
$('#bee').css({right:'10%'});
$('#bee').animate({right: '-100%'}, 5000, 'linear', function(){animateImage();});
}
$(document).ready(function() {
animateImage();
});
</script>
</head>
<body>
<div style="width: 100%;"><img src="bee.jpg" id="bee" style="position:relative;"/></div>
</body>
<script type="text/javascript" src="jquery/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
function rgt() {
$('#sldr').animate({ left: "500" }, 10000, hider);
}
rgt();
function hider() {
$('#sldr').css('left', '0px');
rgt();
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img id="sldr" src="../Images/animated%20images/birds/rightfuglan.gif" style="position:absolute" />
</div>
</form>
</body
>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="../Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<title></title>
<script type="text/javascript">
$(document).ready(function () {
var k = $(window).width();
function rgt() {
$('#sldl').hide(1);
$('#sldr').animate({ left: "1000" }, 10000, hider);
}
rgt();
function hider() {
$('#sldr').css('left', '0px');
$('#sldr').hide(1);
$('#sldl').show();
lft();
}
function lft() {
$('#sldl').animate({ left: "0" }, 10000, hidel);
}
function hidel() {
$('#sldl').css('left', '1000px');
$('#sldr').show();
rgt();
}
});
</script>
<style type="text/css">
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<img id="sldl" src="../Images/animated%20images/birds/fuglan.gif" style="position:absolute; right:0px" />
<img id="sldr" src="../Images/animated%20images/birds/rightfuglan.gif" style="position:absolute" />
</div>
</form>
</body>`enter code here`