I want to remove the image in .cartoon_right and replace new image in the same div, can you help please.
$('.cartoonsmart_right').animate({top:"-300"}, 200,function() {
$('.cartoon_right') */ Remove image in this div and replace new image /* ) .animate({top: "-400"}, 200, function() { $('.cartoon_right1').removeClass("none"); }) ;
});
with out seeing the rest of your code - you might try something like...
$('.cartoon_right').find('img').attr('src', new_image_source);
or if you insist on removing that one and adding a new one
$('.cartoon_right').find('img').after($("<img src='/images/myimage.jpg' />")).remove();
Related
I want to change dynamically an image by using the ID and a Ressource Bundle.
Element changedImage;
/* imageID is the Id for the previous image */
changedImage = Document.get().getElementById("imageId");
/* And myImageBundle is the resource Bundle and icon the new image*/
changedImage.setInnerHTML(myImageBundle.icon().getHTML());
But nothing happens , it's the same image . Did i miss something ?
Thanks a lot for answer(s) or suggestions(s).
-------- Solution ---------------
I've found a solution , it works properly, but somehow i think it's not the best one . Everything is on the next function :
private void switchImage( AbstractImagePrototype imageBundled) {
String newStyleFromImageBundle, value;
value = "style=";
newStyleFromImageBundle = extractStyle(value ,imageBundled.getHTML());
Element e = Document.get().getElementById("imageHeaderLogo");
// removing the current style
e.removeAttribute("style");
// setting the new style with the previous one retrieved from the image bundled's html
e.setAttribute("style",newStyleFromImageBundle );
}
Hope it helps, feel free to tell if there's a better way to do it or this the worst you 've ever seen .. :-) .
I think this is specifically what applyTo is for. Why don't you just do the following:
/*assuming that the element with id "imageId" is a real image
element and is not undefined:*/
myImageBundle.icon().applyTo(Image.wrap(Document.get().getElementById("imageId")));
//editted to use Image.wrap
The above should apply the image you have defined in icon() to the image with id "imageId"
I have an image loaded on the dom already, and I want to be able to drag that image into a canvas and drop it into the canvas and create a kineticjs object out of it.
I don't know how to make the image draggable, and I don't know how to make the canvas react to drag and drop events that already exist on the dom. Can someone show me how to do this?
Most of the tutorials show how to drag and drop from within the canvas, or the file system, I'm looking how to drag from the DOM to the canvas.
Background info:
I want to have a menu system or a bunch of thumbnails that a user can drag and drop into the canvas to expand the photo.
Thanks in advance!
No problem!
1 You have to use "drag and drop" from html5. Tutorial: http://www.html5rocks.com/en/tutorials/dnd/basics/
2 setup dom event to image:
var dragSrcEl = null;
//image
document.getElementById("yoda").addEventListener('dragstart',function(e){
dragSrcEl = this;
});
3 Events for container object:
var con = stage.getContainer();
con.addEventListener('dragover',function(e){
e.preventDefault(); // !!important
});
//insert image to stage
con.addEventListener('drop',function(e){
var image = new Kinetic.Image({
draggable : true
});
layer.add(image);
imageObj = new Image();
imageObj.src = dragSrcEl.src;
imageObj.onload = function(){
image.setImage(imageObj)
layer.draw()
};
});
And of course full example: http://jsfiddle.net/lavrton/n4w44/
I would like to be able to move around (on the greyed-out background, by dragging and dropping) the modal form that is provided by Bootstrap 2. Can anyone tell me what the best practice for achieving this is?
The bootstrap doesn't come with any dragging and dropping functionality by default, but you can add a little jQuery UI spice into the mix to get the effect you're looking for. For example, using the draggable interaction from the framework you can target your modal ID to allow it to be dragged around within the modal backdrop.
Try this:
JS
$("#myModal").draggable({
handle: ".modal-header"
});
Demo, edit here.
Update: bootstrap3 demo
Whatever draggable option you go for, you might want to turn off the *-transition properties for .modal.fade in bootstrap’s CSS file, or at least write some JS that temporarily disables them during dragging. Otherwise, the modal doesn’t drag exactly as you would expect.
You can use a little script likes this.
simplified from Draggable without jQuery UI
(function ($) {
$.fn.drags = function (opt) {
opt = $.extend({
handle: "",
cursor: "move"
}, opt);
var $selected = this;
var $elements = (opt.handle === "") ? this : this.find(opt.handle);
$elements.css('cursor', opt.cursor).on("mousedown", function (e) {
var pos_y = $selected.offset().top - e.pageY,
pos_x = $selected.offset().left - e.pageX;
$(document).on("mousemove", function (e) {
$selected.offset({
top: e.pageY + pos_y,
left: e.pageX + pos_x
});
}).on("mouseup", function () {
$(this).off("mousemove"); // Unbind events from document
});
e.preventDefault(); // disable selection
});
return this;
};
})(jQuery);
example : $("#someDlg").modal().drags({handle:".modal-header"});
Building on previous answers utilizing jQuery UI, this, included once, will apply to all your modals and keep the modal on screen, so users don't accidentally move the header off screen so they can no longer access the handle. Also sets the cursor to 'move' for better discoverability.
$(document).on('shown.bs.modal', function(evt) {
let $modal = $(evt.target);
$modal.find('.modal-content').draggable({
handle: ".modal-header",
containment: $modal
});
$modal.find('.modal-header').css('cursor', 'move')
});
evt.target is the .modal which is the translucent overlay behind the actual .modal-content.
jquery UI is large and can conflict with bootstrap.
An alternative is DragDrop.js: http://kbjr.github.io/DragDrop/index.html
DragDrop.bind($('#myModal')[0], {
anchor: $('#myModal .modal-header')
});
You still have to deal with transitions, as #user535673 suggests. I just remove the fade class from my dialog.
I'm trying to manipulate forms with Mootools. My purpose is to inject the response content of a form into a div element named result.
Here a code that works, but it replaces the content of the result div. This is not what I want : I want to ADD the form response content to the result div existing content. I just can't find on the web how to do this, and I've tried many things that are not working ... Please help
window.addEvent('domready', function() {
$('myform').addEvent('submit', function(e) {
e.stop();
var result = $('result').empty();
this.set('send',{
url: this.get('action'),
data: this,
onSuccess: function() {
result.set("html", this.response.text);
}
}).send();
});
});
If it's only text you want to add, just remove the empty method, and replace result.set() with result.appendText().
If you need to append an element tree, repeat the first step, and do:
onSuccess: function(){
Elements.from(this.response.text).inject(result);
}
Btw. It's all in the documentation - http://mootools.net/docs/core/Element/Element
I want to click on an image and therefore want to register (e.g.) a ClickHandler. The image I get from a ClientResource. This works so far to set the image into a table cell:
MyResources.INSTANCE.css().ensureInjected();
Image colorImage = new Image( MyResources.INSTANCE.colorImage() );
Element colorImageElement = colorImage.getElement();
colorImage.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
System.out.println( event );
}
} );
TableElement table = Document.get().createTableElement();
TableRowElement headRow = table.insertRow(-1);
headRow.insertCell(-1).appendChild( colorImageElement );
RootPanel.get().getElement().appendChild( table );
How can I add a listener to the icon? I tried ClickHandler and to put the image on a PushButton and get the Element from this PushButton but all don't work.
But mind, if I add the widget (Image is a Widget) to a panel it works!
RootPanel.get().add( colorImage );
But I am not working with widgets here but with the Element. So the handler disappears and that's the point I don't get how to preserve this added handler information.
In the end I would like to build a table with different rows where I can click on the icon I get a popup menu and thereby change the colour of the row.
You should be able to just add a ClickHandler (or a MouseDownHandler if that fits your needs better).
Like this:
colorImage.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
// Do something....
}
});
Don't unwrap your widget and append only the DOM elements. The Widget class allows your code to refer to both elements and events at the same time, and deals with possible memory leaks, as well as grouping your code in logical ways.
This might make sense for other frameworks, but in GWT you almost always want to work with the Widgets directly, adding them together, then appending them to the RootPanel.
If you really want to use a html table to build this up, look at the com.google.gwt.user.client.ui.HTMLTable subclasses, com.google.gwt.user.client.ui.Grid and com.google.gwt.user.client.ui.FlexTable. This probably should never be necessary, unless you are adding multiple items to the table - when trying to specify layouts, use actual layout classes.
did you tried to add image.sinkEvents( Event.ONCLICK | Event.MOUSEEVENTS )?
The image has to be inside a focus widget. I don't know why that is, but somewhere the events don't get propagated right and the DOM events don't fire.