Is it possible to get transition flip effects when showing a div manually, similar way as we get when using functions like
$(':mobile-pagecontainer').pagecontainer("change", "create_an_account.html?UUID=" + UUID, {
transition: 'flip'
});
This is my fiddle
http://jsfiddle.net/EwNRJ/2265/
Could you please let me know how to achieve this??
jQM uses CSS transitions for this. for flip, you can use the existing classes called ".flip .in" to flip in and ".flip .out" to flip out.
$('#target')
.append('<span>1. Append</span>')
.prepend('<span>2. Prepend</span>')
.before('<span>3. Before</span>')
.after('<span>4. After</span>')
.show()
.addClass("flip in")
.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).removeClass("flip in");
});
You use addClass to add the transition classes (.addClass("flip in") ), then handle the animationend event to remove the classes when the transition is complete. To hide the DIV with a flip:
$('#target')
.addClass("flip out")
.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).removeClass("flip out");
$(this).hide();
});
Add the flip and out classes and on animationend, remove the classes and call hide().
DEMO
NOTE: For more interesting transitions, you can use animate.css with similar code:
https://daneden.github.io/animate.css/
Related
Part of an ajax code:
success: function(data) {
$('#dg1').dialog({
modal:true,
draggable: false
});
}
Is there a way to keep modal = true option but without entire screen fade overlay when dialog appears?
In CSS, the modal element has a jQuery UI Class of ui-widget-overlay. You could adjust this like so:
CSS
.ui-widget-overlay {
background: transparent;
}
This effectively makes it clear, yet still there to do it's job.
I'm trying to integrate this plug-in into my site so I can swipe to delete. The problem however is that this plugin is triggered with a 'swiperight', the same swipe event is used to reveal my panel. I managed to separate the events using event.target.tagName. When it's a A(link), I want to activate the swipe to delete button and otherwise I want my panel to slide in.
With other words the pageinit event is triggered twice so the swipe to delete button starts to appear then the same event is triggered again. I want to somehow cancel one action but i can't make it work. I already tried:
event.stopImmediatePropagation();
event.stopPropagation();
event.preventDefault();
I also tried to use some solutions given here but with no luck:
jQuery Mobile: document ready vs page events
A demo of my problem can be found snip and my current pageinit function is this:
$(document).on('pageinit', function() {
//Activate horizontal swipe after x px.
$.event.special.swipe.horizontalDistanceThreshold = 80;
$('div[data-role="content"]').on("swiperight", function(event) {
//If tagname is 'A' you probably want slide to delete not the panel
if(event.target.tagName != 'A') {
$.mobile.activePage.find("#menu").panel("open");
} else {
//Cancel swipe
event.stopImmediatePropagation();
}
});
//Swipe to delete
$("#swipe li").swiper( {
corners: false,
label: "Verwijder",
swipe: function(event, ui) {
alert('trigger');
},
click: function(event, ui) {
var $item = $(this);
//console.log($(this));
$item.fadeOut(250, function() {
$item.remove();
});
}
});
});
Fixed issue using the following plugin: TouchSwipe which has the ability to simple exclude elements from the events.
I am trying to change the opacity of the image after I click the red button
instead of adding the different image, and I should not see the red button on the new image
My JS code is below.
http://jsfiddle.net/mwPeb/7/
<script>
$(document).ready(function () {
$(".specialHoverOne").hover(function () {
// alert("i am here");
$(".ctaSpecialOne").css("visibility", "visible");
},
function () {
$(".ctaSpecialOne").css("visibility", "hidden");
});
$(".ctaSpecialOne").click(function (e) {
alert("clicked");
e.preventDefault();
//$(this).closest('.specialHoverOne').unbind("mouseenter").end().parent().siblings('a').children("img").attr("src", //"http://imgs.zinio.com/magimages/62898189/2012/416242497_200.jpg");
$(this).css({
'opacity': 50
});
});
});
</script>
I'd spend some quality time cleaning up the coding here, it's a bit difficult to find anything and the structure is a bit hard to follow.
If I'm understanding correctly, I believe this is the line you need to make the image above the red button change opacity when said red button is clicked.
$(this).parent().prev().prev().css({'opacity':.5});
More specifically;
$(".ctaSpecialOne").click(function (e) {
e.preventDefault();
$(this).parent().prev().prev().css({'opacity':.5});
});
http://jsfiddle.net/mwPeb/11/
You want the opacity of the red button to change on click? Or the image above it? For starters, to set the opacity, you would change your line:
$(this).css({'opacity':50});
to:
$(this).css({ opacity: 0.5 });
In your current fiddle, you'll see that sets the opacity of the red button. If you want it to set something else, you now have the syntax.
Update:
Instead of wiring up a bunch of .click() events that repeat the same code, might be best to create a function
function setThisOpacity(id) {
$("#" + id).css({ opacity: 0.5 });
//do other stuff if you need to
}
And then in your html markup, just add an onclick="setThisOpacity(someID);" where someID is an actual ID to the item you want to set the opacity.
I am trying to add a 'blur' event to a jQuery combobox using the code below, but its always not firing. What would be the right way of attaching a 'blur' event to a jQuery combobox?
$(document).ready(function() {
$("#dropdown_sel").combobox();
$($('.ui-combobox-input')[0]).css('width', '500px');
$("#toggle").click(function() {
$("#dropdown_sel").toggle();
});
$("#dropdown_sel").blur(function() {
alert('on blur of combo');
});
});
I even tried the code below but it fails to fire, where I use focusout event rather than blur event. I am using IE 8.x.
$("#dropdown_sel").focusout(function () { alert('on blur of combo'); });
You can test the code at this link, where I already have combobox code set up for focusout event: http://jsfiddle.net/vZwRk/79/
Try using event-change:
$( "#dropdown_sel" ).bind( "autocompletechange", function(event, ui) {
alert('on blur of combo');
});
I won't to give a different hover colors to my jquery dialog buttons. For example when the user will hover over the "Ok" button the hover color will be blue and when he hovers over the cancel button the hover color will be gray.
Can anyone tell me how can I do it?
$(document).ready(function() {
$(":button").hover(function() {
$(this).css('background', 'url(' / images / buttons / green_26.png ')');
});
$(":button").mouseout(function() {
$(this).css('background', 'url(' / images / buttons / grey_26.png ')');
});
});
Basic theory: use one or more css classes which you add to your html object dynamically on mouse-in, and remove on mouse-out. You can take a look at the jQuery hover event and some examples of how to work with attributes in jQuery to get an idea of how to do it.
In detail: There are two different ways to approach this that I can immediately think of, depending on where you want to make the ok/cancel button "decision".
Add two different classes to your stylesheet with different background colors, and add one class to each element. That means you'll need two very similar jQuery methods, but most of it can be factored out to avoid duplication.
Hard-code different class names on your buttons (or use button id's or someting) and make two different css selectors, for example something like .ok .hover { your style here } and .cancel .hover { your style here }. Then you just need one jQuery call, that hits both buttons with the jQuery selector and adds/removes the hover class.
You can use this function:
function changeButtonClass(buttonIndex, classes) {
var selector = 'div[class^=ui-dialog-buttonpane] > button';
var buttonConcerned;
if (buttonIndex >= 0) {
buttonIndex++;
buttonConcerned = $(selector + ':nth-child(' + buttonIndex + ')');
} else {
return;
}
buttonConcerned.removeClass();
buttonConcerned.addClass(classes[0]);
buttonConcerned.
hover(
function() {
$(this)
.removeClass()
.addClass(
classes[1])
},
function() {
$(this)
.removeClass()
.addClass(
classes[0])
})
.focus(
function() {
$(this)
.removeClass()
.addClass(
classes[2])
})
.blur(
function() {
$(this)
.removeClass()
.addClass(
classes[0])
});
}
And then call your function with this (for a 3 buttons dialog):
var classes = new Array('myClass', 'myClass2', 'myClass2');
changeButtonClass(0, classes);
var classes = new Array('myClass3', 'myClass4', 'myClass4');
changeButtonClass(1, classes);
changeButtonClass(2, classes);
And so it works ;)