I am having difficulties copying properties from one fram and create a similar one (See picture below). The picture to the left, flower-ish, Is the properties I want. I wanna add this to the image to the right ( blue one). I have tried using the google chrome edit component but I can't figure it out.
I only want the image to the right to have the same properties (size and frame) as the left image.
The URL to this scenario
Looking your page, i think you should do something like this (I'm using jQuery).
$(document).ready(function(){
var img = $('.attachment-shop_catalog');
var width = img.width();
var height = img.height();
//give an id or a class to identify your target img, i'm using id target-img
$('#target-img').css('width',width+'px');
$('#target-img').css('height',height+'px');
});
Related
I need help with positioning a child window created using
var win:myWindow = new myWindow();
where myWindow.mxml contains <s:Window.......
The child window does open as desired. However I would like to place it at a specific (x,y) position with reference to the WindowsApplication.
I have tried
var parentWindowHandle:* = nativeApllcaition.nativeApplication.openedWindows[0];
win.x = parentWindowHandle.x + 200;
However, this does not work. The content of the myWindow gets shifted by 200. (myWindow.mxml contains only a label. This label shifts by 200 to the right. Not exactly what I wanted).
The parentWindowHandle is correct. I have checked it using Alert.show(parentWindowHandle.title) which is displayed correctly.
I am pretty new to Adobe AIR.
EDIT:
I tried to do win.x=200 as suggested. However the content seems to be moving not the window.
for moving the window :
win.nativeWindow.x = 200;
I am writing a simple jQuery page with two images shown. Clicking on one of them triggers a CSS3 transformation, which should end zooming on the image.
The page has to be viewed on iPad, thus I must use CSS3 3D Transformation in order to use the hardware acceleration and keep the transition smooth.
I wrote a simple demo script here: http://jsfiddle.net/andrearota/KAdmV/4/
E.g. here is how I zoom in, using scale factor. Please note that I use the z property trying to get the div over the closed one:
Carousel.prototype.openLeft = function (callback) {
var that = this;
if (this.leftStatus != 'open') {
this.left.transition({
z: '+=100',
scale: 2
}, function () {
that.leftStatus = 'open';
if (callback) callback();
});
} else {
if (callback) callback();
}
};
As you can see, if you clic on the left image, the image is zoomed in and goes over the right one. When you click on the right one, vice versa. But then, if you click again on the left one, you can see an issue on image stacking as the left zoomed image goes under the minimized right one.
Any hint?
It looks like you can remove the transform on the second image and it will go back behind the first one. So in other words, on image click I would probably first remove all occurrences of the transform property before applying to the clicked image.
Or you could also set both images to position:relative and then on click set the z-index to something like 5 and set all other images to something below it such as 3. But again, you'll need to clear these inline styles so that when another image is clicked there are remnants from before that give you un-clear results.
I write page, which shows sellers of used items. There is many short info elements on the map with price, state of item and period of availability of seller. I want to reduce free space of info windows so more of them can fit the screen. I try new functionality in 6.5.0 of wicket-stuff gmap3 - "panels inside info windows", but no luck - picture shows result of css:
border : 1px solid black ;
margin : 0;
padding : 0;
How can i minimize free space of info winfo window and fit it to content?
P.S. It will be best if i can make clickable group of digits with pointer. But info window not clickable, so there is markers. Idea - user first make brood choice based on main properties displayed in info windows, then click his choice and complete info displayed somewhere else on the page.
P.P.S. Hmm, i have one more idea now - i don't need digit with state. I just can paint info in different colors(green = "like new", blue="used hard, but works", red = "garbage") :).
Quick and dirty
var infowindow = new google.maps.InfoWindow({
content: '<div id="iw_content">3434 4 18-9</div>'
});
google.maps.event.addListener(infowindow,'domready',function(){
var el = document.getElementById('iw_content');
//* Get and set a class for the main content containers container
el = el.parentNode.parentNode;
el.setAttribute('class','iw_content_container_container');
//* Get and set a class for the div containing the close window image
closeEl = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
closeEl.setAttribute('class','closeInfoWindow');
//* Get and set a class for the div containing the close and main content
el = el.parentNode;
el.setAttribute('class','closeInfoWindowContainer');
//* Get and hide the troublesome background
el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
el.style.display = "none";
//* Get and hide the top image of the arrow
el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
el.style.display = 'none';
//* Get and hide the shadow (hiding commented out for now as not strictly requested)
el = el.parentNode.parentNode;
el = (el.previousElementSibling)?el.previousElementSibling.previousElementSibling:el.previousSibling.previousSibling;
//el.style.display = 'none';
});
That might work for you to put some hooks in the code which you can then address with css
#iw_content{background:#fff}
.iw_content_container_container{height:auto!important;text-align:center}
.closeInfoWindow {top:22px!important;right:22px!important}
.closeInfoWindowContainer{position:absolute;top:52px;height:auto!important}
You may want to mess about with the .closeInfoWindowContainer top value as this is dependant on the amount of text. Basically tested with just that one line of yours.
I tried actually removing widths and heights in the code itself (so adding/changing within the javascript) but Maps have an annoying habbit of putting them back in again depending on state and position of cursor when loading.
...
Info Windows are clickable. They are just a normal div element in the page and can be treated as such. I have made the various values in your example hyperlinks to show this.
Sorry it isn't wicketstuff but I thought I should still post a solution.
I've two different stages on top of another.
And, I'm adding layers to them and placed two image objects.
Now, I've given "click" event to those image objects.
However, since recently added layer is on top of other layers, Only top layer is triggering the events.
Problem : Clicking on purple indicator , I'm getting the alert. But, yellow indicator does not trigger any event since it is behind the layer.
(Check JSFiddle Link which is provided at the bottom)
How to overcome this issue..?
Here is the code sample that I'm using to add & position the image.
Working JS Fiddle Link : http://jsfiddle.net/v4u2chat/aqf9Y/8/
NOTE : Use the Slider to change the position of the image.
Image Positioning Code
$function positionImage(stage,centerX,centerY,radius,startingAngle,endingAngle,targetValue4ImagePositioning,divIdvalue)
{
var imgLayer = new Kinetic.Layer();
var angleInDegress = 360*targetValue4ImagePositioning-90-5;
var angleInRadians = (Math.PI/180)*angleInDegress;
imgLayer.rotate((Math.PI/180)*(360*targetValue4ImagePositioning));
var arcEndX = centerX+ ((radius+25)*Math.cos(angleInRadians));
var arcEndY = centerY+ ((radius+25)*Math.sin(angleInRadians));
imgLayer.setX(arcEndX);
imgLayer.setY(arcEndY);
var kineticImage = new Kinetic.Image(
{
x: 0
,y: 0
,width:18
,height:22
,image: $('#'+divIdvalue)[0]
,id:'kineticImage_'+divIdvalue
});
kineticImage.on("click", callBackFn);
imgLayer.add(kineticImage);
stage.add(imgLayer);
}
Thanks **Steve** for your input.
The actual problem lies in Stage. I'm using two different stages which is not required.
Now, I changed my code to single Stage and it works like charm :)
Layer will not occupy the whole canvas area. It'll occupy only the area of the shape for which we have created the layer. So, No fuss or problem with Layers.
Updated JS Fiddle can be found from the below mentioned link.
http://jsfiddle.net/v4u2chat/aqf9Y/9/
I have a table that is dynamically created using DIVs. Each row of the table has two images. I want to set the height for the div (that represents a particular row) to the height of image that is greater of the two images being displayed in that particular row. The images to displayed will always change, and they are from an external server.
How do I set the height for my div so that I can fit images?
If you are trying to dynamically resize a couple of divs in a row within a table, you maybe better off using a html table instead and having each image within a td tag. This will make tr tag resize accordingly for the image in each cell.
this.img = new Image();
this.img.src = url;
alert(this.img.width);
gives the width while
var img = new Image();
img.src = url;
alert(img.width);
doesnt..
dunno why.
You can:
Not specify the height of the div, and let it expand automatically
Once the image is loaded do:
document.getElementById("myDiv").height = document.getElementById("myImage").height
We'll need a little more info to be very useful. You can get the height & width of an image after the page loads via Javascript (info), then you could resize the height of the div after loading. Otherwise, you're really out of luck since HTML itself doesn't have anything.
If you're using PHP, there's getimagesize(), which you can use if you're building the site dynamically with PHP. There are similar functions for other languages, but we'd need a little more info.
If you want the browser to do layout based on the height of an image, before it fetches the image, you need to send that height to the browser somewhere. This will require something server-side. The fastest thing would be to insert in into the html directly. Slower but more elegant would be to fetch it image by image with <script src=> statements that get instructions from a special bit of javascript-generating cgi. (The speed difference comes from network round trips.)
If you're willing to resize after the data arrives, it's much simpler. Either slap an onload handler on the images or stick them in normal dom (e.g. an actual table, though you can do it with divs and css) and let the layout engine do the work.
This question has been answered in multiple ways, and you asked the additional question "Won't this make the UI look bad?"
The answer to that question is Yes. The best thing for you to do in most cases will be to set the height of your div to something that looks good, then scale the images down to fit. This will make the rendering faster, and the final product will look better and more professional.
But that's just my own opinion, though. I have no empirical data to back that up.
Pre-load them into javascript image objects then just reference the height and width.
Might take some clever devilry to work in all browsers...
function getSize(imgSrc){
var aImg = new Image();
aImg.src = imgSrc;
aHeight = newImg.height;
aWidth = newImg.width;
}