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>
Related
I want the calendar to show as soon as I click the input textbox. I searched everywhere but couldn't get any help. I would be really appreciated if you will help me as I am a beginner.
Here is my code:
<link href="CSS_File/StyleSheet.css" rel="stylesheet" />
<link href="CSS_File/pickmeup.min.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
$(function () {
$('.Reservation .demo').pickmeup({ flat: true });
var input= $('input');
input.pickmeup({ position: 'right', before_show: function(){
input.pickmeup('set_date', input.val(), true);
}, change: function(formated){
input.val(formated);
}});
});
});
</script>
This is my asp.net code
<div class="Reservation">
<p style=" float:left; font-size:24px;">Check In:</p>
<input type="text" style="width: 160px; height: 22px" value="17-11-2013" />
</div>
I've gone through with your code and this library, now the mistake you are making is you are using this library as jQuery plugin, this is not jQuery based plugin, that's why if you want to initialize the calendar with your input then use it like this: pickmeup('input', <optionObj>);,
Also one of your line is not making any kind of sense, as your requirement is to display the calendar when user click on input, and the line of code which you written :
$('.Reservation .demo').pickmeup({ flat: true })
first of all there is no demo class under Reservation dom, and another thing is as per the pickupme framework, if you want to show a calnder on UI (which will replace your UI element with the calander) then you need to initilize it same not as jquery plugin, below example
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://rawgit.com/nazar-pc/PickMeUp/master/css/pickmeup.css" rel="stylesheet"/>
<script type='text/javascript' src="https://rawgit.com/nazar-pc/PickMeUp/master/dist/pickmeup.min.js" ></script>
<script type="text/javascript">
$(document).ready(function () {
pickmeup('.Reservation',{ flat: true });
});
</script>
This is my asp.net code
<div class="Reservation"></div> <!-- it will replaced as calander on UI -->
BTW, here your Code, which I refined and it is started showing calendar:
Solution:
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://rawgit.com/nazar-pc/PickMeUp/master/css/pickmeup.css" rel="stylesheet"/>
<script type='text/javascript' src="https://rawgit.com/nazar-pc/PickMeUp/master/dist/pickmeup.min.js" ></script>
<script type="text/javascript">
$(document).ready(function () {
//$('.Reservation .demo').pickmeup({ flat: true });
var input= $('input');
pickmeup('input',{ position: 'right', before_show: function(){
input.pickmeup('set_date', input.val(), true);
}, change: function(formated){
input.val(formated);
}});
});
</script>
This is my asp.net code
<div class="Reservation">
<p style=" float:left; font-size:24px;">Check In:</p>
<input type="text" style="width: 160px; height: 22px" value="17-11-2013" />
</div>
I hope this will reach your requirement.. apply css for styles.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
Yes, i know this is a duplicate, but all the answers i've read didn't help me, i have a side by side working example, from w3school, it works, and mine doesn't, what i am trying to do is show a tooltip warning the user to use numbers only, but instead, it just refreshes the page.
This is my full html page code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" media="screen" href="Css/style.css"> /*---not using the bootstrap css because it messes up the form layout, so i copied every tooltip referenced block to my style.css instead.---*/
<script type="text/javascript" src="js/tooltip.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var previous;
$(document).ready(function(){
$('.btn').tooltip();
});
//Buy Button JS code
$(function () {
$("#searchform").bind('submit', function () {
var str = $('#search-form').val();
if (str.match(/^[0-9]*$/)) {
$('#search-form').tooltip({title="You did good :)"});
}
else
{
$('#search-form').tooltip({title="Please enter numbers ONLY !"});
}
});
});
</script>
</head>
<body>
<div class="box">
<form class="search-form" method="post" id="searchform">
<input type="text" id="search-form" name="textbox" placeholder="Please enter your code" required/>
<button type="submit" name="submit" class="btntxt">Validate</button>
<div id="search_results"></div>
</form>
</div>
</body>
</html>
I didn't put the data-toggle:"tooltip" neither a title:"sometitlehere" in the element's options, because i don't really need it.
There are few mistakes in your code,
//it should be title: and not title=
$('#search-form').tooltip({title:"You did good :)"});
The above line initializes the tooltip once your code excutes.
After that if the tooltip title is updated, the tooltip is needed to be destroyed and re-initialized with new title.
var previous;
//Buy Button JS code
$(function () {
$("#searchform").bind('submit', function () {
var newTooltip="";
var str = $('#search-form').val();
if (str.match(/^[0-9]*$/)) {
newTooltip = "You did good :)";
}
else
{
newTooltip = 'Please enter numbers ONLY !';
}
$('#search-form').attr('title', newTooltip).tooltip('fixTitle').tooltip('setContent').tooltip('show');
setTimeout(function(){
$('#search-form').tooltip('hide').tooltip('destroy');
}, 1500);
});
});
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
/*---not using the bootstrap css because it messes up the form layout, so i copied every tooltip referenced block to my style.css instead.---*/
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="box">
<form class="search-form" method="post" id="searchform">
<input type="text" id="search-form" name="textbox" placeholder="Please enter your code" required/>
<button type="submit" name="submit" class="btntxt">Validate</button>
<div id="search_results"></div>
</form>
</div>
You are using form so you need to return true or false on validate action so your code should be like
if (str.match(/^[0-9]*$/)) {
$('#search-form').tooltip({title="You did good :)"});
return true;
}
else
{
$('#search-form').tooltip({title="Please enter numbers ONLY !"});
return false;
}
are you initialising the tooltip in the js? - tooltips won't show unless you have this in the code:
$(function(){
$("[data-toggle=tooltip]").tooltip();
})
ok - I just looked at your code - you have :
$('.btn').tooltip();
listed in theree, but your button has the class "btntxt" and you are also trying to get a tooltip on the search form - but that has the id of "search-form" - neither of which will be affected by your tooltip declaration. Best to use the one I gave in the is post so that all elements with tooltips can display them. Setting them to individual classes or ids is too restrictive if you forget that your class or id is not the same as the one listed in the js.
you have this order to your scripts:
<script type="text/javascript" src="js/tooltip.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Does the tooltip.js require jquery? - if so you may need to invert that order
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/tooltip.js"></script>
Can any of you have a look on my code, because I am not sure why it isn't working.
My current situation is that when you tick the radio button, it will show you an output. For example"You selected Table A".
Unfortunately for my case,it just did nothing when I clicked the radio button.
I'm thinking maybe the displacement of my JavaScript function. But I don't see anything wrong there.
<!DOC HTML>
<html>
<TITLE></TITLE>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-
1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src ="jquery-1.11.0.min.js"></script>
<script src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$('input[type="radio"]').click(function () {
$('.frame-wrapper').eq( $(this).index() -1 ).fadeIn();
});
</script>
<style type="text/css">
.frame-wrapper {
display: none;
float: left;
width: 32%;
margin-top: 20px;
margin-right: 1%;
background-color: #eee;
}
</style>
</head>
<body>
<b>Please select an option</b>
A <input type="radio" name="Option" />
B <input type="radio" name="Option" />
C <input type="radio" name="Option" />
<div style="clear: both;"></div>
<div id="tblA" class="frame-wrapper">
You selected A, table tblA is shown
<frame src="http://www.huawei.com" />
</div>
<div id="tblB" class="frame-wrapper">
You selected B, table tblB is shown
<frame src="https://www.google.com/" />
</div>
<div id="tblC" class="frame-wrapper">
You selected C, table tblC is shown
</div>
</body>
</html>
You should put your code within:
$(document).ready(function(){
//...
});
Also, you are using more than one jQuery source file, you should use only one. Read more about ready event.
Your script runs before the DOM has been applied. Move script tags to bottom or wrap in onload function. Test this by console.log'ing the results from your initial selector.
console.log($('input[type="radio"]'));
http://api.jquery.com/ready/
I have the java script code.But i want to add some thing more.
I would like to highlight a date & add message to that date when I drag the mouse on it.
the code is
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DatePicker</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="Js/JScript1.js" type="text/javascript"></script>
<script src="Js/JScript2.js" type="text/javascript"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function () {
$("#datepicker").datepicker({ minDate: 0 });
// $("#datepicker").datepicker({ minDate: -60, maxDate:0 });
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="height: 220px">
<div style="height: 191px; width: 1156px">
<asp:TextBox ID="datepicker" runat="server"></asp:TextBox>
</div>
</div>
</form>
</body>
</html>
I want it should display a message on the date. Ex:- We declared that 15th july is a holiday.When I hover the mouse on the 15th in the calender,a small message will display(ex:-today is holiday)when I remove the mouse the message will dis appear.
You should handle the hover event of the element you want to drag your cursor on. In the handler you can change the style of other elements, as you need.
I am using Jörn Zaefferer's jquery autocomplete plugin, and I can't seem to figure out how to make it work when I clone an autocomplete field. It almost works, in that the cloned autocomplete field displays the choices when the I type in text, but I cannot select items. At first I thought it was a browser-compatibility issue, but it happens in both FF3 and Safari, so I'm guessing there's a gotcha I've missed.
Here is a working example of what I'm doing:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Autocomplete Clone Demo</title>
<style>
body {
margin: 40px;
}
.hide_element {
display: none;
}
</style>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
<script type="text/javascript">
function setAutocomplete()
{
var users = [
{ name: "Fred", id: "1" },
{ name: "Barney", id: "2" },
{ name: "Wilma", id: "3" }
];
$(".user_selector").autocomplete(users,
{
mustMatch: true,
matchContains: true,
minChars: 2,
formatResult: function(row) { return row.name; },
formatItem: function(row, i, max) { return row.name; }
}
);
}
var current= 0;
var addParticipantFields = function()
{
current++;
$newParticipant = $("#template").clone(true);
$newParticipant.removeAttr("id");
$newParticipant.removeClass("hide_element");
$prefix = "extra" + current;
$newParticipant.children("div").children(":input").each(function(i) {
var $currentElem= $(this);
$currentElem.attr("name",$prefix+$currentElem.attr("name"));
});
$newParticipant.appendTo("#participantsField");
setAutocomplete();
}
$(document).ready(function() {
setAutocomplete();
$("#addParticipant").live("click", addParticipantFields);
});
</script>
</head>
<body>
<h1>Test Autocomplete Cloning</h1>
<form id="demo" method="post" action="">
<fieldset id="participantsField">
<label>Participants</label>
<div class="participant">
<input class="user_selector" name="user" size="30"/>
</div>
</fieldset>
<!-- This is the template for adding extra participants -->
<div class="participant hide_element" id="template">
<input class="user_selector" name="_user" size="30"/>
</div>
<p><input type="button" id="addParticipant" value="Add Another Participant"></p>
<p><input class="button" type="submit" value="Submit"/></p>
</form>
</body>
</html>
Make
$newParticipant = $("#template").clone(true);
like so
$newParticipant = $("#template").clone();
Your example works for me in FF when you don't clone events on #template.
first of all:
$newParticipant.children("div").children(":input").length == 0
so there is no children returned by this line.
Use
$newParticipant.children()
instead. It returns 1 chield instead. But steel don't work for me. Have to think more.