I am struggling in a specific problem. I actually have a draggable element based on a grid of 4 and I would like to create an event each time the draggable item reaches a specific position on this gird.
Here is the html of this grid,
<div class="selector">
<div class="title">
<h2>Vælg lånebeløb</h2>
</div>
<div class="draggable">
<h3 id="krd">kr</h3>
</div>
<div class="line">
<img src="./resources/images/line.png" alt="line">
</div>
<div class="legend">
<p>3.000</p>
<p>4.000</p>
<p>5.000</p>
<p>6.000</p>
</div>
</div>
and here is the jquery,
$("#krd").draggable({
grid: [ 190, 0 ],
cursor: "move",
containment: '.selector',
drag: function( event, ui ) {
if(ui.position.left = 190) {
$(".bluebox h2").text("3.000 Kr");
} else if (ui.position.left = 380) {
ect......
} {
}
}
});
What I am trying to do is that when we move the bar, it changes the text in the sidebar. I tried different options since but couldn't figure out what I am missing. Here is the link of the page on github of the project, maybe you will have an idea about it.
Here is the link of the code in github
https://github.com/erwanriou/goKredit---Frontpage/
and the render of the page to get a better idea of the problem.
https://erwanriou.github.io/goKredit---Frontpage/
Expanding upon my comment, I would advise using jQuery UI Slider. You will need to theme it, but the code would be:
$(function() {
$("#krd").slider({
min: 3,
max: 6,
value: 3,
slide: function(e, ui) {
$(".bluebox h2").text(ui.value + ".000 Kr");
}
});
});
Example (in progress): https://jsfiddle.net/Twisty/bjfuLjzL/2/
Related
I have a jQuery dialog with the following HTML:
<div class="left">
<div>CONTENT</div>
<div>CONTENT</div>
<div>CONTENT</div>
</div>
<div class="left">
<div>CONTENT</div>
<div>CONTENT</div>
<div>CONTENT</div>
</div>
CSS:
.left{float:left; width:50%;}
This makes two columns in my jQuery Dialog. How can I remove the CSS when the jQuery Dialog width goes below a certain number?
You could use the resizeStop event on initialization of the dialog, and throw in a check with the width you are looking for, and then simply remove the class "left" from the divs like so (I used #dialog as an example, just replace with your own, as well as change the 200 to a width you want):
$( "#dialog" ).dialog({
resizeStop: function(event, ui) {
if ($(this).outerWidth() < 200) {
$("#dialog > div").removeClass('left');
}
}
});
JSFiddle: http://jsfiddle.net/9Lc4y6s0/
Note: If you need to keep the class left, an alternative would be to simply alter the css instead of removing the class altogether (i.e. change float:none and width: initial)
What I ended up doing. Worked a bit smoother than the resizeStop. I added id's to the two <div> columns in my dialog.
$("#dialog").bind( "dialogresize", function(event, ui) {
if ($(this).outerWidth() <= 500) {
if ($("#col1").hasClass("left")) {
$("#col1").removeClass("left");
$("#col2").removeClass("left");
}
}
else {
if (!$("#col1").hasClass("left")) {
$("#col1").addClass("left");
$("#col2").addClass("left");
}
}
});
I'm working on making a custom button that drops down a jquery ui slider beneath it. The idea is you can slide the slider and it changes the background color of the button. For some reason, the slider isn't appearing and I cant figure out why.
<div id="button-container">
<div id="button">
<div id="inner_triangle_button"></div>
</div>
<div id="slider_container">
<div id="slider_container_triangle"></div>
<div id="shadow_slider"></div>
</div>
</div>
<script>
$('#button').click(function() {
if ( !$('#slider_container').is(":visible") )
$('#slider_container').fadeIn(100);
else
$('#slider_container').fadeOut(100);
});
$(function() {
$('.shadow_slider').slider({
min: 0,
max: 255,
change: updateColor,
slide: updateColor
});
});
function updateColor() {
var color = $('#shadow_slider').slider("value")
$('#button').css('background', '#'+color+'0000');
}
</script>
I've made a JSFiddle for the problem
http://jsfiddle.net/drs4/bpsb20wd/5/
Hadn't imported the jquery-ui.css file and the wrong selector was being used
For demonstration I've created this fiddle: http://jsfiddle.net/Lxmr1n4p/4/
In a web game I have several layers that are positioned absolute and layered one above another. In those layers there are droppable elements.
In the fiddle I made a black div as a draggable element. If I drop it on the big midgrey drop target, it alerts correctly, that it dropped on layer 2.
But if I drop it on the dark grey area, it says that dropped on layer 2 and when I click okay it also alerts that it dropped on layer 1, which I don't want, since (beside that it lays behind item in layer 2), the item in layer 1 has nothing to do with this action, a complete layer is above it.
This is the layout:
<div class="layer1">
<div class="r">
<div class="item"></div>
</div>
</div>
<div class="layer2">
<div class="r">
<div class="item"></div>
</div>
</div>
<div class="drag"></div>
div.r just makes a relative box.
And this is my javascript:
$(document).ready(function () {
$('.layer1 .item').droppable({
drop: function () {
greedy: true,
alert('dropped on item in layer 1');
}
});
$('.layer2 .item').droppable({
drop: function () {
greedy: true,
alert('dropped on item in layer 2');
}
});
$('.drag').draggable({});
});
Is there a way to tell jqueryui that I only want the uppermost item to trigger the drop event?
This example is not real game code, since it's way to big.
Hi you could disable the other dropable element(s) on hover:
over: function(event, ui){
$( ".layer1 .item" ).droppable( "disable" )
},
out: function(event, ui){
$( ".layer1 .item" ).droppable( "enable" )
}
http://jsfiddle.net/Lxmr1n4p/5/
I'm having an issue with jquery ui sortable where I can't drag certain items (i guess based because of the height of the item elements)
<div class="container">
<fieldset>
<legend>handle 1 THIS CAN'T BE DRAGGED BELOW HANDLE 2</legend>
<div>blah<br /></div>
</fieldset>
<fieldset>
<legend>handle 2 BUT I CAN DRAG THIS ABOVE HANDLE 1</legend>
<div style="display: none">blah<br /></div>
</fieldset>
$(".container").sortable({
axis: 'y',
handle: '> legend',
containment: 'parent',
/*cursorAt: {top: 1},
start: function(event, ui) {
ui.placeholder.height(ui.item.height());
$(this).sortable('refreshPositions');
},*/
});
see http://jsfiddle.net/ADyhR/10/
EDIT: It seems to work in jquery ui 1.8.9. is it just a bug in 1.8.18?
the commented out javascript lines are things that i've tried but haven't worked, but i figured I might just be slightly off in how i was using them.
You may use the tolerance option and set its value to tolerance: "pointer",. I have updated your DEMO and created a NEW DEMO.
Here is the JS code that works with tolerance option added:
$(".container").sortable({
axis: 'y',
tolerance: "pointer",
handle: '> legend',
containment: 'parent',
/*cursorAt: {top: 1},
start: function(event, ui) {
ui.placeholder.height(ui.item.height());
$(this).sortable('refreshPositions');
},*/
});
I'm having a problem with dragging a div inside an other div element.
HTML looks like this:
<div id="grid">
<div id="el1" style="width:300px"></div>
<div id="el2" style="width:100px"></div>
<div id="el3" style="width:100px"></div>
<div id="el4" style="width:100px"></div>
</div>
All elements are draggable and have the css style float:left;position:relative;.
When I drag el1 to the place of el3 it will work, but of course it will overlap the element el3.
The draggin jquery draggable is working fine but I want to insert div with id el1at the HTML code in this position.
That it will look like this:
<div id...>
<div id="el2...
<div id="el3...
<div id="el1...
<div id="el4...
</div>
My problem now is, that this is a grid. el1 has the width of '300' all other the width of '100'. Dragin el1 to the place of el3 should swap el2, el3 and el4 to the place of el1 and el1 to the place of el2, el3, el4.
To get this behaviour I think I'm needed to move the div HTML code after el4. But how to determine which element is the nearest?
------- UPDATED-------
I way trying to use sortable... see here http://jsfiddle.net/vwK5e/2/
But if you put the red box over number 3, the red box will be in the second line (correct) but number 4 should be next to number 3 cause of the empty space.
TIA
frgtv10
Refer to http://jqueryui.com/demos/sortable/#display-grid
I guess you want functionality like this.
Answer
A different kind of jquery sortable
My solution looks like this:
Instead of jQuerys draggable I'm now using sortable (link to sortable).
In addition to this I'm now getting the help of the jQuery plugin called masonry(link to masonry)
Example:
// Masonry
$('#container').masonry({
itemSelector: '.element',
isResizable: true,
columnWidth: 100
})
// Sortable
$('#container').sortable({
items: '.element',
forcePlaceholderSize: true,
placeholder: 'card-sortable-placeholder element',
tolerance: 'pointer',
handle: '.handle',
cursor: 'move',
cancel: '.notdrag',
start: function(event, ui) {
ui.item.addClass('dragging').removeClass('element');
ui.item.parent().masonry('reload')
},
change: function(event, ui) {
ui.item.parent().masonry('reload');
},
stop: function(event, ui) {
ui.item.removeClass('dragging').addClass('element');
ui.item.parent().masonry('reload');
}
});