The response has about 500 records and it looks ugly in auto-complete. If more than 10 suggestion then is there any change make the list look like combobox instead of very long list?
Thanks
<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>
<script type="text/javascript">
$(document).ready(function()
{
$('#textbox_postcode').autocomplete(
{
source: 'search-db.php',
minLength: 3
});
});
</script>
</head>
<body>
<input type="text" id="textbox_postcode" value="" />
</body>
</html>
add the following to your .css file.
.ui-autocomplete {
max-height: 100px !important;
overflow-y: scroll;
}
max-height can be whatever you would like.
Related
I have draggable div with saving positions to database... I am moving picture but can I make only one area where i can click and move div or it need to be whole div? Because Now i can click anywhere on div and move it and I want to click on only one spot for moving div...
if you are using jqueryui draggable,then you can use handle option.
check the documentation
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
#draggable {
width: 100px;
height: 100px;
}
#draggable p {
cursor: move;
}
</style>
<script>
$(function() {
$("#draggable").draggable({
handle: "p"
});
});
</script>
<div id="draggable" class="ui-widget-content">
<p class="ui-widget-header">handle</p>
</div>
How to change the alert box size?
I use the following coding.
In Firefox the alert box resize automatically but it not change in chrome?
Kindly give a solution.
window.alert("You answered all questions. Press OK to continue.");
You can't change the size/formatting/title (default settings) of the Javascript Alert Box. Instead you should check out JQuery Alert Box.
The Resizable JQuery Alert Box
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
</body>
</html>
To clarify: When you use window.alert() you are using resources of your browser, not of your web page. It's the browser then who is responsible for creating the alert box, and thus you cannot influence its properties (like size etc.)
I placed a single space in a new line at the end of my string which increased the length to a standard Windows message box.
Alert ("Hello World\n ");
There is my code so far. The issue is that the popup seems to be working perfect in Chrome but in Firefox it sticks to the top of the window after entering and in IE the popup does not even appear.
<html>
<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.10.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<div id="dialog" title="My Dialog Title" style="display:none">
<p>This is My Dialog box Description/Content</p>
</div>
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function(){
$(function () {
$("#dialog").dialog({
show: {
effect: 'drop',
direction : 'up',
distance: 1000,
duration: 2000,
},
});
});
}, 2000)
});
</script>
<style>
.ui-dialog-titlebar {display:none;}
#other_content {width:200px; height:200px;background-color:grey;}
#dialog_content{display:none;}
</style>
</body>
</html>
I want the popup to behave in the same manner as it is in Chrome with all the browsers.
http://jsfiddle.net/fakhruddin/x39Rr/14/
Web Page Link
Please guide.
Try to add:
<body style="height:100%">
The solution is simple! Add to the begin of file:
<!DOCTYPE HTML>
I have some code for a tootlip in a calendar. i want to be able to display html in the tool tip is this possible? every time i try and change it to accept html it crashes it only allows text right now and i do not understand how to change it to allow for html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script type='text/javascript' src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<style type='text/css'>
.pink > a {
background-color: pink !important;
background-image:none !important;
}
.green > a {
background-color: green !important;
background-image: none !important;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var Event = function(text, className) {
// would like to convert this to allow for html
this.text = text;
// this.html = text; // does not work
this.className = className;
};
var events = {};
events[new Date("01/01/2013")] = new Event("New Years Day", "pink");
events[new Date("12/25/2012")] = new Event("<B>Merry</b> Christmas", "green");
console.dir(events);
$("#dates").datepicker({
beforeShowDay: function(date) {
var event = events[date];
if (event) {
return [true, event.className, event.text];
}
else {
return [true, '', ''];
}
}
});
});//]]>
</script>
</head>
<body>
<div id="dates"></div>
</body>
</html>
thank you in advance for any code or help you may provide
Johnny
The title attribute does not allow html code.
But there are several frameworks out there that allow you to modify the hover.
I used jQuery Tooltip
<script src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js"></script>
$('*').tooltip();
Here you will see that they tooltip has been modified and the bold is in place.
http://jsfiddle.net/Morlock0821/WqrMK/
I've got a problem with working JS in the Ajax call.
The JS works normaly until I get the new data from database or when I get ajax call.
Ajax call works normaly, just Javascript does not load.
Please help.
Here is the example index.php.
<!-- library -->
<script type="text/javascript" src="js/deleting_data.js"></script>
<link href="css/forme.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="js/funkcije.js"></script>
<link rel="stylesheet" type="text/css" href="css/dinamicno_iskanje.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.ausu-autosuggest.min.js"></script>
<div id="load" align="center"><img src="images/loading.gif" width="28" height="28" align="absmiddle"/> Loading...</div>
<div id="seek">//here comes refreshed data, with ajax call
<table class="content" style="border-collapse: separate; border-spacing: 0px 5px; ">
<?php
while($row=mysql_fetch_array($query))
{
//data from database
</table></div>
<div id="delete"></div> //ajax call for deleting data
And here is the refreshed_data.php
<!-- library -->
<script type="text/javascript" src="js/deleting_data.js"></script>
<link href="css/forme.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="js/funkcije.js"></script>
<link rel="stylesheet" type="text/css" href="css/dinamicno_iskanje.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.ausu-autosuggest.min.js"></script>
<div id="load" align="center"><img src="images/loading.gif" width="28" height="28" align="absmiddle"/> Loading...</div>
<table class="content" style="border-collapse: separate; border-spacing: 0px 5px; ">
<?php
while($row=mysql_fetch_array($query)
{
//refreshed data
?>
</table>
<div id="delete"></div>//ajax call for deleting data
And here is the deleting_data.js, whick works normaly when the page is loaded.
$(document).ready(function () {
//$(".gumb").live("click",function(){
$('#load').hide();
$('#brisanje').hide();
});
$(function () {
//$(".gumb").click(function() {
$(".gumb").live("click", function () {
$('#load').fadeIn();
$('#brisanje').fadeIn();
$(this).parent().parent().fadeOut(1000, function () {
$(this).remove();
});
$('#load').fadeOut();
$('#brisanje').fadeOut(1000);
});
});
If you are looking for javascript to fire based on an elemenet created from an AJAX call, you need to remember your order of operations. For example: If you fired a .click event assignemnt at time 0, and then ajax some content at time 4 which produces a type that matches the parameters of the click event, it will not have the .click property assigned. It is because the script to assign the click event was not applied to that element. It would need to be reapplied by calling that .click function again.
live() is depracated since jQuery 1.7
Try to use on() instead, like this :
$('rootselector').on('click', 'selector', function(){
...
});
With your code :
$(document).on('click', '.gumb', function() {
// your stuff
})
And for the record, you're including jQuery twice :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>