I'm trying to create an interaction on smartpphones (iOS and Android) that creates an image wherever someone has tapped on the screen. Using jQuery Mobile this is the js I have right now:
$('#container1').bind('tap', function(e) {
$('img').css({
position: 'absolute',
left: e.pageX,
top: e.pageY
});
$("#container1").append('<img src="image.png" />');
});
However this creates an instance of the image and keeps stacking them wherever the user taps. How do I combine the two chunks of code to create unique instances of the same image wherever someone taps with unique X and Y positions? Thanks!
Your code
$('img').css({
position: 'absolute',
left: e.pageX,
top: e.pageY
});
Is changing the position of all img tags on the page. You may want to manually set the style attribute of the image you add:
$('#container1').bind('tap', function(e) {
var image = '<img src="image.png" style="position:absolute;left:' + e.pageX +
';top:' + e.pageY';" />';
$("#container1").append(image);
}
Related
I'm building a phonegap mobile app with jqm 1.3.
I have a listview element, each list item have 2 actions, rename when swipe right, and delete when swipe left. What I want to achieve is a behavior like in gmail mobile application. When some list item is dragged aside (more than some threshold), another "layer" is shown with related buttons. currently I'm using code from jquery mobile swipe list demo, with popup on swipe event, but it is not fulfill my needs.
How this stuff can be implemented ?
Is there any plugin to achieve that functionality?
I tried to make something like this. The working demo is here - http://jsfiddle.net/Q9htn/19/
First HTML:
<ul id="list" data-role="listview"></ul>
Then some CSS. I am not very happy with having to define row height this way and I am sure there must be better ways how to do this fully dynamically, but hopefully it should be OK for this purpose. It makes sure that the row stays as it is during the animations which happen.
.row {
height: 1em;
}
.item {
position: absolute;
display: inline-block;
width: 100%;
right: -1em; /* This makes the item to fly out to the right */
}
.menu {
width: 100%;
display: inline-block;
text-align: center;
}
JavaScript:
var items = ["Audi", "Mercedes", "Skoda", "Rover", "Nisan", "Mazda", "Toyota"];
$.each(items, function(index, item) {
var li = $("<li class='row'>");
var contents = $("<span class='item'>" + item + "</span>");
contents.attr("data-customid", index); // Set some id
li.append(contents);
$("#list").append(li);
});
$("#list").listview("refresh");
// Attach swiperight handler on the list
$("#list").on("swiperight",">li",function(e){
var li = $(this);
var contents = $(li.children()[0]);
var item = contents.text(); // Get the item value
var itemId = contents.attr("data-customid");
var delButton = $("<a>").text("Yes").click(function(e){
// Delete handler, fade out menu and remove the row
menu.fadeOut(function(){
li.remove();
alert("Deleted " + item + " with ID = " + itemId);
});
});
var cancelButton = $("<a>").text("No").click(function(e){
// Cancel Handler, remove menu and show the item
menu.fadeOut(function(){
contents.animate({width: 'toggle'}, function(){
menu.remove();
});
});
});
// Create the menu
var menu = $("<span />").append("Sure? - ").append(delButton).append(" | ").append(cancelButton)
.css("display", "none")
.addClass("menu");
// Insert the menu
contents.after(menu);
// Slide the item
contents.animate({width: 'toggle'}, function(){
// And fade in the menu
menu.fadeIn();
});
});
What I want to do is track the (top, left, width, height, zIndex) style attributes. But since the element that holds these styles doesn't exist until after third party code gets pulled in, i can't do it the normal way.
Here's what I've got thus far:
my.Module = function (module) {
return {
top: ko.observable(200);,
left: ko.observable(100);,
width: ko.observable(100);,
height: ko.observable(100);,
zIndex: ko.observable(0);,
};
};
This would be the normal binding context:
<div data-bind="style:{width:width, top:top, left:left, height:height, zindex:zIndex}"></div>
But the third party stuff ends up wrapping the div i pass it within another, and this is something I cannot change. So instead I've started creating a custom bindinghandler:
ko.bindingHandlers.Window = {
init: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
//Do third party creation stuff here...
ko.applyBindingsToNode(elemToActuallyWatch, {
style: {
width: value.width() + 'px',
height: value.height() + 'px',
top: value.top() + 'px',
left: value.left() + 'px',
zIndex: value.zIndex()
}
});
},
Now this applies the above styles to the appropriate div, but i still need the above values to change when both the data changes and when the element changes.
I feel like the 'px' that i have to tack on the ends shouldn't be needed but that was the only way i could get them to apply.
Is there a way from this point on, that lets say I'm using jqueryUI draggable and resizable, and a user moves/resizes the element that the values will automatically update the viewmodel data? Of course a non jquery specific answer would be best.
style is a one-way binding, from model to view. It won't update the model from the view. You'll probably need to use the resize option and update the model from there.
I am still pretty "green" when it comes to web development and javascript/jQuery programming, so any help is appreciated. Here is what I want to do.
I want to do the same thing that a jQuery UI dialog box does where it puts a semi-transparent image over the entire page and disables clicking of any of the controls underneath.
I want to know how I might put some kind of spinner overlay on top to show that the website is working in the background. If I can use a animated GIF file that would be fine, but I'm not quite sure on the best approach to this.
Here is an example of the grayed-out effect with a dialog box:
jQuery UI Example. I want to know how to produce this effect without the dialog box on top. I do not have a good example of the spinner behavior.
All suggestions, website referrals, and code is appreciated.
EDIT: I do not mean a "spinner control". I will try to find an example of what I am thinking of by spinner.
EDIT: What I mean by "spinner" is a loading gif of some kind like the "Indicator Big" gif on this website: http://ajaxload.info/
I always like to use the jQuery BlockUI plugin:
http://malsup.com/jquery/block/
Check out the demos, you'll probably find something you're looking for there.
One way to do it is to have a div that is hidden by default and has properties to set the background colour to a grey (#666 for instance) and its transparency set to something like 0.8.
When you want to display use jQuery to get the size of the screen/browser window, set the size of your div and display it with a high zindex, so it displays on top. You can also give this div your spinner gif graphic (no repeat, and centered).
Code:
#json-overlay {
background-color: #333;
opacity: 0.8;
position: absolute;
left: 0px;
top: 0px;
z-index: 100;
height: 100%;
width: 100%;
overflow: hidden;
background-image: url('ajax-loader.gif');
background-position: center;
background-repeat: no-repeat;
}
Only things to watch out for are select elements in IE6, as these will show through the div, so you can either use jQuery bgframe to solve that, or what I have done in the past is just hide select elements when displaying the div and showing them again when hiding your div
Why don't you just use "modal:true"?
$(function () {
$("#dialog").dialog($.extend({}, dialogOptions, {
autoOpen: false,
width: 500,
modal: true,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "fade",
duration: 1000
}
}));
$("#profile_edit").click(function () {
$("#dialog").dialog("open");
});
$("#save_and_close").click(function () {
$("#dialog").dialog("close");
});
});
You can use something like this jquery code. Pass the id of the element that you want to stay on top of the page:
function startModal(id) {
$("body").prepend("<div id='PopupMask' style='position:fixed;width:100%;height:100%;z-index:10;background-color:gray;'></div>");
$("#PopupMask").css('opacity', 0.5);
$("#"+id).data('saveZindex', $("#"+id).css( "z-index"));
$("#"+id).data('savePosition', $("#"+id).css( "position"));
$("#"+id).css( "z-index" , 11 );
$("#"+id).css( "position" , "fixed" );
}
function stopModal(id) {
if ($("#PopupMask") == null) return;
$("#PopupMask").remove();
$("#"+id).css( "z-index" , $("#"+id).data('saveZindex') );
$("#"+id).css( "position" , $("#"+id).data('savePosition') );
}
you can use simple div and then ajaxstart and ajaxstop event
<div id="cover"></div>
$('#cover')
.hide()
.ajaxStart(function () {
$(this).fadeIn(100);
})
.ajaxStop(function () {
$(this).fadeOut(100);
});
I have a number of small icons which are draggable via jQuery which i clone, can i make the draggable icon larger when drag starts?
You could set the .height() and .width() using the start and stop events, something like this:
$(".icon").draggable({
start: function() {
$(this).height(100).width(100); //drag dimensions
},
stop: function() {
$(this).height(50).width(50); //original icon size
}
});
You can give it a try here, or a bit more compact:
$(".icon").draggable({
start: function() {
$(this).css({ height: 100, width: 100 });
},
stop: function() {
$(this).css({ height: 50, width: 50 });
}
});
Bind events to dragstart and dragend, see sample here:
Active Drag Demo (number 5)
And addClass() when dragging start with styles that couse image will be bigger, and removeClass() when drag stops.
I am using jquery-ui and at some point I use the show and hide functions quite heavily to animate changing images coming in and out.
From some reason, after a few tries all of a sudden the controls on my page stop responding to clicks. After a bit of poking arround using firebug I discovered my page is filled with div's of the class ui-effects-wrapper.
I have no idea why this happens or how to stop it. If I remove these divs I can no longer see the images I've been animating.
Any ideas?
ui-effects-wrapper was added by jquery UI effect plugin.
Here is some code taken from jquery.effects.core.js:
// Wraps the element around a wrapper that copies position properties
createWrapper: function(element) {
// if the element is already wrapped, return it
if (element.parent().is('.ui-effects-wrapper')) {
return element.parent();
}
// wrap the element
var props = {
width: element.outerWidth(true),
height: element.outerHeight(true),
'float': element.css('float')
},
wrapper = $('<div></div>')
.addClass('ui-effects-wrapper')
.css({
fontSize: '100%',
background: 'transparent',
border: 'none',
margin: 0,
padding: 0
});
element.wrap(wrapper);
wrapper = element.parent(); //Hotfix for jQuery 1.4 since some change in wrap() seems to actually loose the reference to the wrapped element
// transfer positioning properties to the wrapper
if (element.css('position') == 'static') {
wrapper.css({ position: 'relative' });
element.css({ position: 'relative' });
} else {
$.extend(props, {
position: element.css('position'),
zIndex: element.css('z-index')
});
$.each(['top', 'left', 'bottom', 'right'], function(i, pos) {
props[pos] = element.css(pos);
if (isNaN(parseInt(props[pos], 10))) {
props[pos] = 'auto';
}
});
element.css({position: 'relative', top: 0, left: 0, right: 'auto', bottom: 'auto' });
}
return wrapper.css(props).show();
},
In one function, I had some code that toggled the visibility of two buttons and employed effects such as fadeTo and bounce. Occasionally there would be a wrapper remaining.
I tried adding this to my method, the idea being that it removes the wrappers 1.1 seconds after the effects have been queued up.
setTimeout('$(".ui-effects-wrapper").children().unwrap();', 1100);
This removes the stale wrappers, but there is the chance that it can also remove subsequent wrappers that are being used for effects.
I'd be very interested in seeing any improvements on this technique.