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>
Related
How to open a link from the same page, or should I say display the content of that link on the same page where the link is, I haven't tried anything yet cause I really don't know what this sort of thing is called, I'm new at web developing I really need this one cause it can make the website that I'm working on right now look more professional
here is an accurate picture/explanation for what I want:
Picture of what I want to do
You could do it using some jquery:
Take the code below as a reference:
$('#link1').on('click',function(){
$('#content1').css('display', 'inline');
$('#content2').css('display', 'none');
});
$('#link2').on('click',function(){
$('#content1').css('display', 'none');
$('#content2').css('display', 'inline');
});
.wrapper {
background: #cacaca;
width: 350px;
height: 150px;
}
.container {
display: relative;
float: left;
background: #9A9ACA;
width: 200px;
height: 150px;
}
#content1, #content2 {
position: absolute;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container">
<div id="content1">
Some content
</div>
<div id="content2">
Other stuff
</div>
</div>
<div>Link1</div>
<div>Link2</div>
</div>
Hope it helps
Use a browser side application like jQuery to change the CSS class or id from hidden to shown 'onmousedown'. Place your div style as hidden initially, then write jQuery to show the div on press of your mouse button.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggle demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button>Toggle</button>
<p>Hello</p>
<p style="display: none">THE AWESOME SAUCE!</p>
<script>
$( "button" ).click(function() {
$( "p" ).toggle();
});
</script>
</body>
</html>
You need to do some studying up on JQuery for this purpose, luckily there are a lot of examples of this very topic out there for you to research, I suggest starting here:
http://api.jquery.com/toggle/
you can redirect the page by simply typing .....
header("Location: file_name");
or you can give the HTML content by simply giving
<a href ="localhost/8000/file_name">
I want to show loading icon until pdf is loaded into the webpage.I have pasted what I have tried but loading icon keeps on displaying even the pdf is loaded fully. So, I concluded $iFrame.load(function() doesn't trigger anything. Got this code from JSFiddle. But in JSFiddle it is working.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
iframe {
width: 100%;
height: 100%;
border: 5px solid green;
}
</style>
<script>
$(function(){
var $iFrame = $('iframe');
$iFrame.load(function(){
$('h3').html('PDF Loaded!');
});
$('h3').html('Loading PDF...');
$iFrame.attr('src', 'http://listic.ru/jQuery_Cookbook.pdf');
});
</script>
</head>
<body>
<h3></h3>
<iframe></iframe>
</body>
</html>
I need to do an additional check for caches files (who fired the event, just before added an event handler listening for it). I tried the following jquery and it worked fine.
$iFrame.on('load', function() {
$('h3').html('PDF loaded...');
}).each(function() {
if(this.complete) $(this).load();
});
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 ");
I'm building this web page and I want the news to appear in jquery.modal, but with sharing functionality, that means with the URL. I found PJAX for the solution and then I wanted to put the link in URL and show the content in the modal window.
After days of googling I stumbled on this, and if you click on the page it opens in modal, but shows the URL, but I can't find how it works. Here is the link: http://rigaspots.blogspot.com/
Here is my code.
<link rel="stylesheet" href="../jquery.modal.css">
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/jquery.pjax.js"></script>
<script src="../js/jquery.modal.js"></script>
<script type="text/javascript">
var direction = "right";
$(document).ready(function(){
$('a').pjax({
container: '.modal'
});
$('.modal').on('pjax:start', function() {
$(this).addClass('loading')
})
$('.modal').on('pjax:end', function() {
$(this).removeClass('loading')
})
});
</script>
<style>
#main {
font-family:Helvetica,Arial,sans-serif;
width:30%;
opacity: 1;
transition: opacity 0.20s linear;
}
#main.loading {
opacity: 0.5;
}
h2 {margin-left:200px;}
ul{padding-left:15px; list-style:none;}
</style>
</head>
<body>
<p ><strong style='color:green'> 2012-10-25 16:52:13</strong> (Time should only change on refresh!)</p><div id="main">
<h1>PJAX using PHP</h1>
<ul class='header'>
<li>Tyrannosaurus</li>
<li><a href='kong.php' data-pjax='modal' rel="modal:open" >King Kong</a></li>
</ul>
</div>
You can see it here: http://supervalters.mplab.lv/source/
Any help would be appreciated. Thanks.
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.