Fellow programmers,
I have 2 draggable div's with unique id's. I need to change the text on a droppable div to a specific text based on which draggable is dropped.
HTML:
<div id="drag1" class="ui-widget-content">
<p>Great</p>
</div>
<div id="drag2" class="ui-widget-content">
<p>Poor</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>You Chose</p>
</div>
jQuery code:
$( "#drag1, #drag2" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui )
{
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html(ui.draggable[0].id);
}
});
I used your code snippet and it seems to work that way.
I've added data-info attribute as an option to pass some text to the droppable div.
$( "#drag1, #drag2" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html($('#'+ui.draggable[0].id).data('info'));
}
});
.ui-widget-content {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<div id="drag1" data-info="My great div was chosen" class="ui-widget-content">
<p>Great</p>
</div>
<div id="drag2" data-info="My poor div was chosen" class="ui-widget-content">
<p>Poor</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>You Chose</p>
</div>
Change the ids of your draggable elements to "drag_great" and "drag_poor", instead of "drag1" and "drag2" to match what you have in the jQuery code.
Related
I have code something like that :
<div class="fieldset clearfix">
<h2 class="fieldset_title">Title <i class="indicator glyphicon pull-right glyphicon-chevron-down"></i></h2>
<div class="fieldsgroup_info"></div>
<div class="fieldsgroup">
....
</div>
</div>
When I do in jquery
$('.fieldset_title').click(function(){
$( this ).closest( ".fieldsgroup" ).hide();
});
Seems not working, do you have an idea why it doesn't work?
Thanks
.fieldsGroup is the sibling of .fieldset_title not its parent, so replace
$( this ).closest( ".fieldsgroup" ).hide();
with siblings
$( this ).siblings( ".fieldsgroup" ).hide();
Or as suggested by A.Wolff in his comment below
$( this ).nextAll(".fieldsgroup").first().hide();
I am very new to JS so please try to be as elaborate as possible. I am implementing bootstrap tabs in my html page. There I have a slider using the jquery ui. Before implementing the tabs the slider was working perfectly. But now the slider is invisible. I can move it if I click at the right place. All I can see now is the value of the slider instead of the whole thing.
Tried to reload the slider script after the tab is clicked but it doesn't help. And another weird thing is that, when I remove the tabs altogether now and try to just have the slider, the result is still the same ie. I see only the slider value and the entire div is invisible.
Please ask for any further clarification if needed. Any help would be appreciated. Thanks in advance.
js:
$(document).ready(function(){
alert("Inside slider");
$( "#slider" ).slider({
value:<%-tasks["priority"]%>,
min: 0,
max: 10,
step: 1,
slide: function( event, ui ) {
// alert(ui.value);
$( "#priority" ).val( ui.value );
},
start: function( event, ui ) {alert("started")}
});
$( "#priority" ).val( $( "#slider" ).slider( "value" ) );
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
alert("here")
$( "#slider" ).slider();
});
$('#tab_control a[href="#basic"]').tab('show');
})
html:
<ul class="nav nav-tabs" role="tablist" id="tab_control">
<li class="active">Basic</li>
<li>Advanced</li>
</ul>
<div class="tab-pane active basic-tab" id="basic">
<label for="inputPassword3" class="col-sm-2 control-label">Priority</label>
<div class="col-sm-10">
<div id="slider" ></div>
<p><input type="text" id="priority" name="priority" readonly style="border:0; color:#f6931f; font-weight:bold;"></p>
</div>
</div>
<div class="tab-pane advanced-tab" id="advanced">
</div>
update:
The slider is now working perfectly! All I did was load these files:
<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
Previously I was loading them from my local disk like this :
<link href="/css/jquery-ui.min.css" rel="stylesheet">
<script src="/js/jquery.js"></script>
<script src="/js/jquery-ui.min.js"></script>
They are of these versions:
jquery-ui.min.css : jQuery UI - v1.11.2
jquery.js : jQuery v1.11.1
jquery-ui.min.js : jQuery UI - v1.11.2
So any ideas as to what was the problem?? Its really baffling me.
HTH
Basic
Advanced
<div class="tab-pane active fade in basic-tab" id="basic">
<label for="inputPassword3" class="col-sm-2 control-label">Priority</label>
<div class="col-sm-10">
<div id="slider" ></div>
<p><input type="text" id="priority" name="priority" readonly =""/> </p>
</div>
</div>
<div class="tab-pane fade advanced-tab" id="advanced">
testing
</div>
$( "#slider" ).slider({
value:"",
min: 0,
max: 10,
step: 1,
slide: function( event, ui ) {
$( "#priority" ).val( ui.value );
},
start: function( event, ui ) {alert("started")}
});
$( "#priority" ).val( $( "#slider" ).slider( "value" ) );
http://jsfiddle.net/jz5r5dsw/1/
I started some time studying javascript, and I have some questions and was wondering if you can do this.
I have a div:
<div class="category"> </div>
it automatically repeats everytime I create a new category in a forum system. this is default "so there is no possibility to manually"
So wanted it to be added numbering for each category. thereby:
<div class="category1"> </div>
<div class="category2"> </div>
<div class="category3"> </div>
<div class="category4"> </div>
and so on, all this through jquery or javascript.
If it is possible what is the way?
jQuery solution:
$( ".category" ).each( function( index ) {
$( this ).addClass( "category"+(index+1) );
});
Result:
<div class="category category1"> </div>
<div class="category category2"> </div>
<div class="category category3"> </div>
<div class="category category4"> </div>
Solution 2:
$( ".category" ).each( function( index ) {
$( this ).removeClass( "category" ).addClass( "category"+(index+1) );
});
Result:
<div class="category1"> </div>
<div class="category2"> </div>
<div class="category3"> </div>
<div class="category4"> </div>
FIDDLE
HTML
<button id="category-button">Add Category</button>
<div id="category-container"></div>
Javascript
$('#category-button').on('click', function() {
var $container = $('#category-container'),
$elem = $('<div/>', {
"class": "category" + ($container.children().length + 1)
});
$container.append($elem);
});
I have a bit of a problem with jQuery UI Sortable and would need some help: I have the following html code:
<div class="sortable">
<div class="item">
<p>title1</p>
<div class="sort">sort 1</div>
</div>
<div class="item">
<p>title2</p>
<div class="sort">sort 2</div>
</div>
<div class="item">
<p>title3</p>
<div class="sort">sort 3</div>
</div>
</div>
There's a container with 3 divs. Each has a title and a defintion - the 3 definitions should be sortable, but the title above should always remain unchanged.
Here's the js:
$(".sortable").sortable({
items: ".sort"
});
If I specify in the sortable options to sort only the specified items, they are sorted, but taken out of the div structure I want - each inside one of the parent ".item" elements.
Here's a fiddle with the behaviour: http://jsfiddle.net/wPtjM/
Is there a way to achieve what I need with jQuery Sortable? All the examples I saw & tried lack such an outcome. Many thanks in advance!
Looking for something like this?
var dropped;
var titleDrop;
var titleChange;
$(function() {
$(".sortable").sortable({
items: ".sort",
stop: function( event, ui ) {
if(titleDrop != titleChange)
dropped.append(ui.item);
},
change: function(event, ui){
titleChange = ui.placeholder.parent().find('p').text();
}
});
$( ".item" ).droppable({
accept: ".sort",
drop: function( event, ui ) {
dropped = $(this);
titleDrop = $(this).find('p').text();
}
});
});
FIDDLE
Update
Incorporates switching places:
FIDDLE2
<div class="player-tab">
<div class="img-wrap" draggable="true">
<img src="assets/player.png" alt="">
</div>
<div class="img-wrap" draggable="true">
<img src="assets/player.png" alt="">
</div>
<div class="add-recording"> + Add Recording
</div>
</div>
In this code anyone can add recording and a player image show them after add. I want to img-wrap draggable to each other.
I means I upload 1 record and 2 record. I can sort it to 2nd first and 1st later. This way it's can be sorting in format as user want. Someone know any good idea to implement this feature.
You can use jQuery:
$(function() {
$( "#divid" ).draggable();
});
see this:http://jqueryui.com/draggable/
I think you want this:
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
check here:http://jqueryui.com/sortable/