I have a collapsible set in my jQuery mobile 1.4.0 I want to add a custom animation for this collapsible set when it expands like animation here
my collapsible set at JSFiddle
I have used the following styles to animate the collapsible but it didn't give me the same result.How can I apply this slide down/up animation to my collapsible when its expanded ?
please help me ..
.ui-collapsible-content {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
height: 2em;
overflow: hidden;
}
.ui-collapsible-content-collapsed {
display: block;
height: 0;
padding: 0 16px;
}
Here is my code
$("[data-role='collapsible']").collapsible({
collapse: function( event, ui ) {
$(this).children().next().slideUp(150);
},
expand: function( event, ui ) {
$(this).children().next().hide();
$(this).children().next().slideDown(150);
}
});
This code was tested with jquery mobile 1.4.0.
Thanks.
Related
If a jQuery UI draggable element (#box1) is dragged over an element (#box2) that has z-index set to -1 or below, mouseover and mouseout events won't fire. With z-index set to 0 or above they fire.
CSS:
#box1 {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
border: 1px solid blue;
}
#box2 {
position: absolute;
top: 100px;
left: 300px;
width: 100px;
height: 100px;
border: 1px solid red;
z-index: -1;
}
JavaScript:
$(function() {
$("#box1").draggable();
$("#box2").mouseover(function(e) {
$("#box2").css({
backgroundColor: "green"
});
});
$("#box2").mouseout(function(e) {
$("#box2").css({
backgroundColor: "transparent"
});
});
});
See: http://jsfiddle.net/TTwPj/11/
Without dragging mouseover and mouseout work fine with all z-index-values.
Is there a reason for this behaviour or is it a bug?
This "problem" has nothing todo with negative or positiv values of your z-index.
In this updated fiddle: http://jsfiddle.net/TTwPj/23/
#box1 {
z-index: 2;
}
#box2 {
z-index: 1;
}
you can see I set some positive values and the mousover still not firing. This is how z-index work.
If you want to achive a mouseover while dragging over the droppable element you can use the droppable event:
over: function( event, ui ) {}
to add a CSS class or style to show some visible "mouseover" effect.
I am rendering a jQuery combobox, but the height of input element does not match the height of toggle button as shown in screen shot below. This is happening in both, IE 9 and FireFox 13.
The style being used for jQuery combobox is as below.
<style>
.ui-combobox {
position: relative;
display: inline-block;
}
.ui-combobox-toggle {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
/* adjust styles for IE 6/7 */
*height: 1.7em;
*top: 0.1em;
}
.ui-combobox-input {
margin: 0;
padding: 0.3em;
}
.ui-autocomplete { height: 200px; overflow-y: auto; }
</style>
You should update your combo-box widget from the jqueryui page. and make sure that you use the latest jquery-ui (this issue was fixed recently).
this helped me...
I'm attempting to make a drop down navigation menu with some CSS3 transitions. However, when using visibility hidden/visible, iOS doesn't display the drop down (it just goes to the link). If I use display none/block, iOS will display the drop down menu on the first click of the parent element, but the transitions don't work in any browsers.
Is there a way to get these transitions to function correctly in browsers and the drop-downs to work in iOS without using javascript?
Drop down doesn't work in iOS:
nav ul li ul {
position: absolute; visibility: hidden; opacity: 0; left: 0; top: 50px; z-index: 99;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .25s ease-in-out;
-o-transition: all .35s ease-in-out;
-ms-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
}
nav ul li:hover > ul { visibility: visible; opacity: 1; top: 40px; }
Transitions don't work in browsers:
nav ul li ul {
position: absolute; display: none; opacity: 0; left: 0; top: 50px; z-index: 99;
-webkit-transition: opacity .35s ease-in-out, top .35s ease-in-out;
-moz-transition: opacity .35s ease-in-out, top .35s ease-in-out;
-o-transition: opacity .35s ease-in-out, top .35s ease-in-out;
-ms-transition: opacity .35s ease-in-out, top .35s ease-in-out;
transition: opacity .35s ease-in-out, top .35s ease-in-out;
}
nav ul li:hover > ul { display: block; opacity: 1; top: 40px; }
After thinking about this some more I found documentation that I hadn't seen before -- some of the weirdness you're experiencing might be because you are attaching behavior to a pseudo-element on something that isn't interactive by default (only anchors and form elements are clickable).
http://sitr.us/2011/07/28/how-mobile-safari-emulates-mouse-events.html
(Ignore my original comment about event.preventDefault...I forgot you were working with list items instead of anchors.)
I do, however, still think JS is the best approach since you can be very specific about events attached to any kind of element. You can just apply a CSS class and it will use the transition properties you already specified.
Like this:
// CSS
nav ul li > ul.visible { display: block; opacity: 1; top: 40px; }
// JS
// you could bind mouseover/out here too if you want it to work on both desktop & mobile
$('nav ul li').bind('click', function(){
$(this).children('ul').toggleClass('visible');
});
If you want to be extra awesome you could make it keyboard accessible by adding tabIndex="0" to the list items :)
I found a solution for this. Essentially ios does not bind the click to the hover for anything that is display:block/none or visibility:hidden/visible. So you need to just "hide" the dropdown using the "left" to compensate for <=ie8 that does not support opacity.
So essentially use your 2nd example with a minor tweak:
nav ul li ul {
position: absolute; opacity: 0; left: -888em; top: 50px; z-index: 99;
-webkit-transition: opacity .35s ease-in-out, top .35s ease-in-out;
-moz-transition: opacity .35s ease-in-out, top .35s ease-in-out;
-o-transition: opacity .35s ease-in-out, top .35s ease-in-out;
-ms-transition: opacity .35s ease-in-out, top .35s ease-in-out;
transition: opacity .35s ease-in-out, top .35s ease-in-out;
}
nav ul li:hover > ul {opacity: 1; top: 40px; left:0;}
Then just be sure not to use "all" in your transitions or it will animate the left attribute as well :)
The only issue with this method is that your transitions will only work on the way in not the way out.
How do I define the containment area for a draggable to have it draggable outside of its parent element? I have two droppable containers that have draggable divs in them. I want to drag the contained divs between the containers. But the divs drop under the border of the parent container instead of going across. I can only get the divs to go from one container to another if I set a very high z index, which causes the divs to not really be place in the container. This messes up the page display.
Here is the jsfiddle for this http://jsfiddle.net/gkvgn/8/. The relevant code in that jsfiddle is that function where the container divs are made draggable and droppable and where the contained div elements are made draggable with containment of 'document'.
$(function() {
$( "#editdiv" ).resizable();
$( "#editdiv" ).draggable();
$( "#editdiv" ).draggable("option", "handle", '#heading');
$( "#editdiv2" ).resizable();
$( "#editdiv2" ).draggable();
$( "#editdiv2" ).draggable("option", "handle", '#heading');
$( ".comurl" ).draggable();
$( ".comurl" ).draggable("option", "handle", '#dhandle');
$( "div.droppable" ).droppable({
drop: function( event, ui ) {
var $item = ui.draggable;
$item.fadeOut(function() {
$item.css( {"left":"", "top":"", "bottom":"", "right":"" }).fadeIn();
});
$item.appendTo( this );
}
});
$( ".comurl" ).draggable({ containment: 'document' });
});
If I change the containment to 'parent' or 'window' the draggable divs in the container seem to be more constrained than if I select 'document'.
Since I thought that z-index was an issue, I set the z-index for the ui-draggable-dragging class in the css.
.ui-draggable-dragging {
z-index: 999999;
background-color: red;
}
What must I fix to be able to drag an element div, e.g. Facebook.com from the first container to the second? Thanks.
Had to remove overflow: hidden;
.link_drop_box{
height:80%;
/* overflow:hidden; */
}
.comdiv {
position:absolute;
padding: 0;
border: 1px solid DarkKhaki;
border-radius: 3px 3px 0px 0px;
box-shadow: inset 0px 0px 10px DarkKhaki;
/* overflow-y: hidden;
overflow-x: hidden; */
}
http://jsfiddle.net/gkvgn/10/ .
When moving through the list of suggestions in IE the graphic indicating the currently selected item extends past the vertical scrollbar. Is there a way to keep it within the visible area of the list?
I'm using IE7 and jQuery UI 1.8.16.
I have the autocomplete styled like so:
.ui-autocomplete {
width: 190px;
max-height: 132px;
overflow-y: auto;
overflow-x: hidden;
padding-right: 20px;
}
* html .ui-autocomplete {
height: 132px;
}
.ui-autocomplete li {
font-size: 12px;
}
already tried overflow-y: scroll; ?
You can't use "auto" without setting a fixed height, and I think "max-height" didn't work on IE7.
Good luck!