I am using jQuery UI to make selections. I'm having an ul-list that I made selectable. The li-items contains icons and texts. It seems that the selectable comment not only makes the li-items selectable, but also the elements in the li-items. This gives some unexpected results.
I tried to make an example in jsFiddle: http://jsfiddle.net/eJSGU/
If you click several times on the edges of the icon, you will see that there is sometimes something selected that is bigger than the li-block.
<li class="ui-widget-content">
<div class="img"><img src="http://bib.arts.kuleuven.be/bibliotheek/images/icon_facebook.jpg"></div>
<div class="lbl">Item 1<div>
</li>
Anyone an idea how I can avoid this?
I suggest to use the filter option of the selectable. In your case you want only the li elements to be selectable so you set filter: $('selector').children()'.
<script>
$(function() {
$( "#selectable li" ).selectable({
filter: $('#selectable').children('li')
});
});
</script>
Here is an updated fiddle.
Related
I have an LI with A tag in it.
<li title="LI TEXT" id="test">
ELEMENT WITH HREF HREF
</li>
I want to create jquery tooltip for the LI and default tooltip for its child elements. But this does it both for the jquery elements for LI and its childs.
$("#test").tooltip();
http://jsfiddle.net/k45emuhg/
Okay, what you've described is quite easy with the items option. Simply include a selector restriction for the items you want to show their tooltips, e.g. the same as the original selector that you're calling .tooltip() on:
$("#test").tooltip({items: "#test"});
The question doesn't make this explicit, but you probably also want to show only one (rather than 2) tooltips when you hover over the children element. To do that, you can disable and reenable the parent's tooltip on the mouseenter and mouseleave events. JQuery provides a nice shortcut for that with the hover function:
$("#test a").hover(function() {
$(this).parent().tooltip("disable");
}, function() {
$(this).parent().tooltip("enable");
});
Note that you can use any relevant selector, not necessarily $(this).parent(), depends on how your HTML is structured
Here's the example fiddle updated: http://jsfiddle.net/957r8x51/
I am using jquery ui draggable, and eventually droppable to make it possible to reorder pictures into different boxes.
When I drag a picture out of the box it appears under all the other elements once it leaves its direct container.
While googling I was able to found to add:
helper: 'clone',
appendTo: "body"
This makes it so what is being dragged appears on top of all elements, but it leaves the original copy still in the box and I do not want that.
Is there a way I can make the element stay on top of everything when being dragged? I have tried a high z-index to no avail.
Here is a jsfiddle that shows the first draggle element behind behind the second. it is not an issue the other way around.
i am not able to change the position relative on the containing divs without breaking a lot of other things.
http://jsfiddle.net/cBWhX/6/
I found a few issues with your code, I think I've worked them out and got it working.
Working Example
First fix your HTML:
<div id="container1" style="background-color:red;padding:20px">
<div class="draggableContainer">
<div class="draggable" style="background-color:blue;width:200px;height:200px;"></div>
</div>
<div class="draggableContainer">
<div class="draggable" style="background-color:yellow;width:200px;height:200px;"></div>
</div>
<div class="draggableContainer"></div>
</div>
Next You'll probably want to use the stack option:
$('.draggable').draggable({
revert: "invalid",
snap: ".draggableContainer",
stack: ".draggable"
});
$('.draggableContainer').droppable()
From the API documentation:
Stack
Controls the z-index of the set of elements that match the selector, always brings the currently dragged item to the front.
Though there is an option - 'stack' existing while initiating draggables, but it is not working properly, So I have wrote a small library dragToFront playing with z-index. Following is the plunkr link
https://embed.plnkr.co/mJqkxSJhf1Umg7r2oLQN/
Stack wasn't working for me either. I was able to correct the z-index issue by using the appendTo property.
function setupDraggableFields($elements) {
$elements.draggable({
helper: "clone",
handle: ".field-sort-handle",
appendTo: ".section-container"
});
}
I have a <p> in a jQuery UI accordion that appears:
<p class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="height: 184px " role="tabpanel">
Earlier, when I had several text links in there, it fit perfectly. However, now I have image links, and the images are sharply clipped.
I can duct tape the matter by adding additional <br /> tabs to get more space, but I'd like the accordion panel to include all images, one above the other, and correctly sized.
In If I understand your question correctly you need to tell the accordion to base its height off the content.
$(function() {
$( "#accordion" ).accordion({
heightStyle: "content"
});
});
This is stated and shown on the jQuery UI site here: http://jqueryui.com/accordion/#no-auto-height
Hopefully this is what you are looking for.
I had the same problem with the jQuery Accordion, and I just found the fix!
Simply add this CSS code at the top of your page. It will override the auto crop happening on the thumbnails:
.ui-accordion-content {
min-height:auto !important;
}
I thought the basic syntax for a slider was:
<div id="slider"></div>
$("#slider").slider()
But that doesn't make a visible slider. Inspecting the div element, I see that some stylings were applied, but the slider isn't visible.
Here's a fiddle: http://jsfiddle.net/yqNcn/
You have not included the CSS for jQuery UI so classes are applied but styles are not (there are actually none to apply). Here's an edited fiddle that includes the styles (look at the Resources panel); the slider is visible as it should be.
First Import your javascript Files* jquery.s and import Jquery UI widget Jquery-ui.js
Then
Put Your Css Div Tag with id <div id="slider"></div> this Example
<div id="slider"></div>
then Call Jquery slider function....
<script>
$(function() {
$( "#slider" ).slider();
});
</script>
I have a page with several sections of significantly varying length within a jQuery UI Accordion. If I open a new section (which collapses one of the longer sections above), I'm left at the bottom of the page. Because the sections are of significantly different heights, I can't use the autoheight feature without it looking very strange. Is there any way to use something like scrollto to automatically go to the top of the section I've just expanded?
You can bind a function to the accordionchange event and use jQuery scrollTop():
JavaScript
$(function () {
$("#accordion").accordion({
autoHeight: false,
header: "h3"
});
$('#accordion').bind('accordionchange', function (event, ui) {
$(window).scrollTop(ui.newHeader.offset().top);
});
});
HTML
<div id="accordion">
<div id="accordion-one">
<h3>First</h3>
<div>Some lengthy text</div>
</div>
<div id="accordion-two">
<h3>Second</h3>
<div>Less lengthy text</div>
</div>
<div id="accordion-three">
<h3>Third</h3>
<div>Other text</div>
</div>
</div>
I tested this in FF8.
Links
Accordion change event
jQuery scrollTop()