I have jQuery UI Slider which goes a lot over from the right side.
How can I get it to stop at the same spot as it stops at the left?
JSFiddle
https://jsfiddle.net/gqb7z9tx/
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Slider - Default functionality</title>
</head>
<body>
<div class="slider-wrapper">
<div id="slider">
<div id="custom-handle" class="ui-slider-handle">
</div>
</div>
</div>
</body>
</html>
Jquery
$( function() {
var handle = $( "#custom-handle" );
$( "#slider" ).slider({
create: function() {
handle.text( $( this ).slider( "value" ) + " €" );
},
min: 1000,
max: 1000000,
step: 1000,
slide: function( event, ui ) {
handle.text( ui.value + " €");
}
});
} );
CSS
.slider-wrapper {
padding: 50px;
}
#custom-handle {
width: 5em;
height: 1.6em;
top: 50%;
margin-top: -0.8em;
text-align: center;
line-height: 1.6em;
}
Related
I am trying to create two panels using jQuery UI layout plugin, and then being able to drag & drop images between the two panels, on the right, the dropped image should maintain the position where it was dropped (and be able to drag it and keep the position anywhere on that right panel), then when drag & dropping from right to left panel the image should align like the originals.
This is the code im working on https://jsfiddle.net/Lwbka9ww/4/:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Layout Container</title>
<link type="text/css" rel="stylesheet" href="external/layout/layout-default.css" />
<style type="text/css">
html, body {
background: #666;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: auto; /* when page gets too small */
}
#container {
background: #999;
height: 100%;
margin: 0 auto;
width: 100%;
max-width: 1200px;
min-width: 700px;
_width: 700px; /* min-width for IE6 */
}
.pane {
display: none; /* will appear when layout inits */
}
</style>
<script type="text/javascript" src="external/jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="external/layout/jquery.layout.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#container').layout({
west: { size: "20%" }
});
var $left = $( ".ui-layout-west" ), $right = $( ".ui-layout-center" );
$( ".ui-layout-west .drag" ).draggable({
cancel: "a.ui-icon",
revert: "invalid",
containment: "#container",
cursor: "move",
helper: function () { return $(this).clone().appendTo('body').css('zIndex',5).show(); }
});
$right.droppable({
accept: ".ui-layout-west .drag",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
$(".accept").append(ui.draggable);
$(ui.draggable).css("position", "absolute");
}
});
/*$( ".ui-layout-center .drag" ).draggable({
cancel: "a.ui-icon",
revert: "invalid",
containment: "#container",
cursor: "move",
helper: function () { return $(this).clone().appendTo('body').css('zIndex',5).show(); }
});
//$( "li", $('.ui-layout-center') ).draggable();
function imageDropped( $item ) {
$item.fadeOut('fast', function() {
var $list = $( "ul", $right ).length ? $( "ul", $right ) : $( "<ul class='gallery ui-helper-reset'/>" ).appendTo($right);
$item.appendTo( $list ).fadeIn('fast');
});
}*/
});
</script>
<style>
.drag {
cursor: move;
clear: both;
padding-top: 10px;
padding-bottom: 10px;
}
</style>
</head>
<body>
<div id="container">
<div class="pane ui-layout-center">
<div class="accept"></div>
</div>
<div class="pane ui-layout-west">
<div class="drag">
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLEBYPEhAQDRsNFQ8WIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6IyszODM4NzQtLisBCgoKDQwOFw8PGjclHyQ3ODcsLDc3LDcsLCw0LCwrNywsKywuKywrLDcrNysrKysrKysrKyssLCsrKyssKysrK//AABEIADwAPAMBIgACEQEDEQH/xAAaAAADAQEBAQAAAAAAAAAAAAADBAUGAgEH/8QAMxAAAQMDAgMGBAUFAAAAAAAAAQIDEQAEIQUSEzFBBiJRYXGBIzKxwRVSkaHwFGJjcvH/xAAZAQACAwEAAAAAAAAAAAAAAAABAgADBQT/xAAgEQACAgICAgMAAAAAAAAAAAAAAQIRAxITMSFRBBRB/9oADAMBAAIRAxEAPwAbNmu82tqPDbRGIO5ccsz9PKm+K2ygIBMIH+0n8s0y4Qi3Q8pKdyjEyTCRzgx60mu4ZO5S1fERK0tgBRSfzEePj1EjrWzsombTY4y2pQClCJAx59aJwqlp1+2t7dKY4j3IpGAD6+Y/fnyrm37VW75RtYUkOQUzmByM/YUn3MSpWTil2VuDXnB8qaS6wptLocSEK5Enb/yhruWR8nf9Dj9aueaC8tgWOT6QEs15wfKnNOUxqFwi3bdDTrh2jeOR9Ote2iVPs8RSUpO5QgT0JH2qLNFukwvFJdoyq9Rc4oaQ+kW20N71Snu9dsT1nP6GmE6nplsw6tK0uXC0wn4Z7p6EgkTyEnMmoT3ZnWFMpS01cvKSDHdCJPgciPUUBvsj2lTBNskbgAd1wiE+OAryGKwH8uck2jtWFE3UX9lwuFLB3Ak4gT4n3NJLu30vpDM7k9E972qvd9ldUbuW3bhyYzySoDwEgn6QMZrxq0TbWPFVx27jjltTaWFDe3tBKiYHMkgZ6cq5oqN9llI0Wh6nqSrVFmli3ULgb1EthawkK2nmMZmEzyPnT+gMXurai5ZsOBtLLhDh4YKggKKSoePIGOWakaVrDyUtotbpTTSG7gRxSiVjKRBjOBHXNB0ztOdN7TtXC0lttx075UUwgnMnqPLl1q3kp0PS/C1qVi8zqNwyzdp4La4DqylW4YyB16043dIaTsbuwhIJwlwczkmtIdF0fXrGz1By0Qwu6PHWULO4nwJBznniDUDtXoDH4uo2ejKcZKEwWypKRjpBq7kpeBaPnuma7ePtpQLcKUmExvCYAxk1Yt7u6d+azSAf8gM+lYBu6uFOQxLqlEY2Tu9o9KrN37wILrYG0ZBBUE9P54VwZMPoQ27bjpg7EgjpumP2plK8d4EH0NYpGrrBG19iR/Yr251QRrD6DDrlsoYgBYBI9M1RxSQbNGtLSxC2woeaQr9opdzTdOeUC5YsqUORLY+tTW9bMgFrcD1BKp94pn8SbIG4lKsY2kn6UEpIljStPsS2ho2qNjY2pAnujnjPjJoS9I01yCpo4ECFKwP1rpL2+YX4D5TM0QboxtIpt5ew7tGUbZeBAdtuIgKkEEpJ9Rn6U0xauNugpCuGobY3/KPYU8lwnBAPtTLcqMEnBileQFE620ptq4U4E7t35hO30I+4ozukW7m5TXw1K6bRk9ckY9qeUIRIJn1rlszM+Jo7MOpPTpCG1DYp0Dr3yM+uOVMIsJIi4V495wrmm0ErQdxoavhqOzEJn3qW2Cgf9MW3Mvr2icSaZTs2jBV5wK4BK8qzQXEgEfzrUJR//9k=" />
</div>
<div class="drag">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKDplYgDLBnlw0jBK06LriNY4eTqQtsf25U5VV95zAJBB9EavVhQ" />
</div>
<div class="drag">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR-uqB0D8Xnjcao1kZ0W2P-uftmFxJlq6fTATe0YCJX3tdFaL8H" />
</div>
</div>
</div>
</body>
</html>
My main problem is keeping the initial position and maintaining drag changes on the left panel, I haven't worked on right to left drag & drop yet.
While increasing height and width of the table the font-size should also be increased and vice versa.
<!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.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>
<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 class="ui-widget-content">
<table id="resizable">
<tr>
<th>I want to resize this font-size, directly proportionally while resizing this table</th>
</tr>
</table>
</div>
</body>
</html>
http://jsfiddle.net/frozentoor/nguk1tfu/1/
Maybe you like this approach
http://jsfiddle.net/nguk1tfu/11/
$(function() {
$( "#resizable" ).resizable();
old_width = $( "#resizable" ).width();
old_height = $( "#resizable" ).height();
$( "#resizable" ).resize(function(){
current_widht = $( "#resizable" ).width();
current_height = $( "#resizable" ).height();
// this shoud the de index for font decrease or increase
r = (current_widht/old_width) * (current_height/old_height);
if( r >= 1)
{
r = r*2; // you can change this
$( "#resizable" ).css('font-size', 11 + r);
}
else
{
r = r*2;
$( "#resizable" ).css('font-size', 11 - r);
}
});
});
Then you can use font-size in viewport unit for example:
p{
font-size: 1vw;
}
Look for different viewport unit:
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
See more on css tricks
So I am making a weather widget for the iPhone and was wondering how to be able to be able to 'scroll' to another page per se. What should I include in order to be able to scroll to the right? How do I make it so I'll be able to scroll sideways? I've already tried doubling the width but nothing happened... Please be as detailed as possible :) Thank you!
<html>
<title>Forecast</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/drag.js"></script>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<meta name="viewport" content="width=320, height=583, initial-scale=1, maximum-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<span id="time" style="position:absolute;
width: 320px;
height: 200px;
left: -209
text-align: center;
z-index: +4;
top: 22.5px;
font-family: HelveticaNeue-UltraLight;
color:white;
font-size: 41px;
font-weight: 100;">
</span>
<span id="dates" style="position: absolute;
top: 27px;
width: 320px;
height: 60px;
left: -17px;
text-align:right;
font-family:HelveticaNeue-Light;
font-weight:100;
font-size: 17px;
color: white;">
</span>
<span id="dattes" style="
position: absolute;
top: 47px;
width: 320px;
left: -17px;
height: 60px;
text-align:right;
font-family:HelveticaNeue-Light;
font-weight:100;
font-size: 17px;
color: white;
">
</span>
</body>
</html>
I made little demo that works in computer browser and mobile too..
DEMO: http://mediakuu.fi/mobile_demo/
Add this to your html header to prevent user resizing your site:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
To make things work smooth and easy:
Use this plugin (hammer.js) http://eightmedia.github.io/hammer.js/ to get user gestures.
Use this plugin (jquery.transit) http://ricostacruz.com/jquery.transit/ to create smooth movement
Full source:
<!DOCTYPE html>
<html>
<head>
<title>MOBILE SCROLL DEMO</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<style type="text/css">
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
#wrapper {
position: absolute;
left: 0px;
top: 0px;
}
.section {
position: absolute;
top: 0px;
}
#section1 {
background: #226633;
}
#section2 {
background: #992211;
}
#section3 {
background: #773344;
}
#section4 {
background: #993344;
}
</style>
<script src="js/jquery.js"></script>
<script src="js/jquery.hammer.min.js"></script>
<script src="js/jquery.transit.min.js"></script>
<script>
$(document).ready(function() {
var
ww = 0,
wh = 0,
current_x = 0,
current_section = 0,
new_section = 0,
$wrapper = $('#wrapper');
function resizeElements() {
// Get window dimensions
ww = $(window).width();
wh = $(window).height();
// Resize sections to match window size
$(".section").css({
width : ww + 'px',
height : wh + 'px'
});
$(".section").each(function(ind) {
$(this).css({
'left': (ind * ww) + 'px'
});
});
}
// Check for window resize (user changing device orientation)..
$(window).bind('resize orientationchange', function() {
resizeElements();
});
// Resize elements once document loaded
resizeElements();
// Use plugin called hammer.js to get touch gestures
$wrapper.hammer().on("dragright dragleft dragend", function(ev) {
switch(ev.type) {
case "dragleft":
case "dragright":
//User is dragging horizontally, calculate current x from section index
current_x = 0 - (ww * current_section);
// Use transit plugin to move wrapper with CSS3 animation
$wrapper.transition({
x : current_x + parseInt(ev.gesture.deltaX)
}, 0, 'linear');
break;
case "dragend":
// User released finger. Check if dragged
// over 30% of screenwidth or if user made quick swipe..
// deltaX can be > 0 or < 0 so use abs to get positive value
if ((Math.abs(ev.gesture.deltaX) / ww) > 0.3 || ev.gesture.velocityX > 1.5) {
// Scroll to next or previous section
new_section = (ev.gesture.deltaX > 0 ? current_section - 1 : current_section + 1);
// If scrolling over section index.. scroll back to old..
if (new_section < 0 || new_section > $('.section').length-1)
new_section = current_section;
} else {
// Not scrolled that much.. animate back to old section
new_section = current_section;
}
// Calculate section x position
current_x = 0 - (ww * new_section);
// Animate wrapper to new position.. animation length 400 millisecods
// with "linear" easing..
$wrapper.transition({
x : current_x
}, 400, 'linear', function() {
// Set new section as current when animation
// completes
current_section = new_section;
});
break;
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<div class="section" id="section1">
<p>section1</p>
</div>
<div class="section" id="section2">
<p>section2</p>
</div>
<div class="section" id="section3">
<p>section3</p>
</div>
<div class="section" id="section4">
<p>section4</p>
</div>
</div>
</body>
</html>
I have 2 draggable div's in a html document and I have 1 droppable div next to the 2 draggable one's.
When you drag one of the draggable div's onto the droppable div the droppable div shows some text and the draggable div reverts back to where is was.
My question is how can I change the text in the droppable div according to the which draggable div I have dropped onto the droppable div?
I hope this makes sense, below is my code.
Many thanks
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Droppable - Revert draggable position</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<style>
#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#draggable, #draggable1 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable({ revert: "valid" });
$( "#draggable1" ).draggable({ revert: "valid" });
$( "#droppable" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>I revert when I'm dropped</p>
</div>
<div id="draggable1" class="ui-widget-content">
<p>I revert when I'm dropped</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop me here</p>
</div>
</body>
</html>
Using the example you provided, try this:
$(function() {
$( "#draggable" ).draggable({ revert: "valid" });
$( "#draggable1" ).draggable({ revert: "valid" });
$( "#droppable" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( ui.draggable[0].id );
}
});
});
DEMO:
http://jsfiddle.net/dirtyd77/SLGdE/23/
You can get the id of the draggable element (the dragged element) from the ui object like so:
drop: function( event, ui ) {
ui.draggable[0].id
}
Fiddle
Your full drop callback would look like this in your example:
drop: function (event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped! " + ui.draggable[0].id);
}
I'm using the drag and drop libraries found here: http://threedubmedia.com/code/event/drop/
But I can't seem to get it to work more than once for elements added dynamically.
I've made a jsfiddle to demonstrate the issue.
http://jsfiddle.net/Rn9gQ/
Here you can click the button to add new divs, and you can drag the mouse to select some of them, but you can't select again after finishing dragging the mouse. Even if you make no selection the first time.
Now sure where I'm going wrong, and any help would be greatly appreciated :)
*Edit: Added code below
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="http://threedubmedia.com/inc/js/jquery-1.7.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drag-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drag.live-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drop-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drop.live-2.2.js"></script>
<title>Testpage</title>
</head>
<body>
<script type="text/javascript">
jQuery(function($){
$('#foo').click(function(){
$('#main').append($('<div class="drop">foo</div>'))
});
$( document )
.drag("start",function( ev, dd ){
return $('<div class="selection" />')
.css('opacity', .65 )
.appendTo( document.body );
})
.drag(function( ev, dd ){
$( dd.proxy ).css({
top: Math.min( ev.pageY, dd.startY ),
left: Math.min( ev.pageX, dd.startX ),
height: Math.abs( ev.pageY - dd.startY ),
width: Math.abs( ev.pageX - dd.startX )
});
})
.drag("end",function( ev, dd ){
$( dd.proxy ).remove();
})
.on("dropstart", ".drop", function(){
$(this).addClass("active");
})
.on("drop", ".drop", function(){
$(this).toggleClass("dropped");
})
.on("dropend", ".drop", function(){
$(this).removeClass("active");
});
$.drop({ multi: true });
});
</script>
<h1>Live adding of selectable elements</h1>
<p>Click and drag to select any number of dashed boxes.</p>
<input type="button" id="foo" value="Add a box"/>
<div id="main"></div>
<style type="text/css">
.selection {
position: absolute;
border: 1px solid #89B;
background: #BCE;
background-color: #BEC;
border-color: #8B9;
}
.drop {
float: left;
border: 1px dashed #888;
background: #EEE;
text-align: center;
padding: 20px;
margin: 0 10px 10px 0;
}
.dropped {
background-color: #EBC;
border-color: #B89;
}
.active {
background-color: #CEB;
border-color: #9B8;
}
</style></body>
</html>