Image Height and Width

ok - I'm a complete n00b at this - so bear with me.

i need to make an autosizing popup window. Here's the current javascript i'm using just to do the popup window:

HTML Code:

---

    <script language="Javascript">
  function PopupPic(sPicURL) {

    window.open(sPicURL, "TEST", 
    "resizable=1,status=0,HEIGHT=200,WIDTH=200");
  }
  </script>

---

As you can see - all I have is the path to the image. I've seen ways of doing window.open("popup.htm?" + sPicURL ..... and then parsing it in the actual popup.htm page and getting the dimensions that way, but I can't actually access a new page like that - for reasons that are too tedious to mention.

So i was wondering if there was a way of calculating the image width and height on this page and then passing those dimensions as i create the popup window?

Don't open the image directly.

Open a page to which you pass the url of the image.

In the page, display just that image, and then in javascript

Code:

---

function resizewindow() {
                var intWidth;
                var intHeight;
                if (window.innerWidth){
                    intWidth = window.innerWidth;
                    intHeight = window.innerHeight;
                }else{
                    intWidth = document.body.clientWidth;
                    intHeight =document.body.clientHeight;
                }
                intWidth = document.images[0].width - intWidth;
                intHeight = document.images[0].height - intHeight;
                window.resizeBy(intWidth, intHeight);
            }

---

Thanks for the post Mendhak - that's the sort of code I've seen around the web, the problem is I can't use it in this case :cry:

The website I'm trying to get this to work on (it's a JShop website if that means anything to anyone) has a template editor - you then assign the templates to the different shop sections which you create with the admin frontend. The sorting out of what links to what is all done server-side and neatly presented to the user. I've been messing around, but I can't get it to access the templates directly - so unfortunately I can't pop-up a specific html file :mad:

Their documentation is only just about good enough to wipe your arse with - so I'm just left stumbling along in the dark :rolleyes:

Is there any way of working out the dimensions whilst keeping all the c0d on this page?

Load the image on the main page itself. Using the javascript above, get its height and width. Store them in variables. When you open the window, you can pass the height and width values to window.open.

Don't open a window. It is pretty much never guaranteed success any more, what with popup blockers and so on.

Instead, (and this is something that's also being abused, but nevermind) you should add a "popup" element to the current page. That gives you the benefit of not having to mess around with window properties and manually resizing to the image size.

Code:

---

function PopupPic(sPicURL)
{
  var i = document.createElement('img');
  i.setAttribute('src', sPicURL);
  i.style.position = 'absolute';
  i.style.visibility = 'hidden';
  document.body.appendChild(i);

  // centre the image
  i.style.left = (document.body.offsetWidth / 2 - i.offsetWidth / 2).toString() + 'px';
  i.style.top = (document.body.offsetHeight / 2 - i.offsetHeight / 2).toString() + 'px';

  // show
  i.style.visibility = 'visible';
}

---

Mendhak: Yeah, that's what I've been trying to do. Only problem is that the pictures seem to be being loaded asynchronously so that the popup window has already popped up before the height and width have been assertained. I thought I could get round that be just doing the below - but the window won't popup - (i got the basics of this code from somewhere else)

HTML Code:

---

    <script language="Javascript">
    function getWidthAndHeight() {
        this.height;
        this.width;
        //alert(this.height + " "+ this.width);
        window.open(sPicURL, "", "resizable=1,status=0",HEIGHT=" + this.height + ",WIDTH=" + this.width);
        return true;
    }
    function loadFailure() {
        alert("'" + this.name + "' failed to load.");
        return true;
    }
    function PopupPic(sPicURL) {
        iheight = 0;
        iwidth = 0;
        var myImage = new Image();
        myImage.name = sPicURL;
        myImage.onload = getWidthAndHeight;
        myImage.onerror = loadFailure;
        myImage.src = sPicURL;
        //window.open(sPicURL, "", "resizable=1,status=0")
    }
    </script>

---

pen: That would probably be a better solution - but I've got some queries:

How do I get it to 'close' - so the user can just click on it and it'll either be hidden or destroyed.
Also, in IE (not Fx), a combobox near the centre of the screen appears over the image - is this just a matter of ZOrdering the image? (gee - how obvious is it that I've never done this before :lol: )

Is it possible to add a border to the image? I can edit the pictures if need be - i just thought I'd find out if there was a c0d way.


cheers guys

Additions additioned.

Code:

---

function PopupPic(sPicURL)
{
  var i = document.createElement('img');
  i.setAttribute('src', sPicURL);
  i.style.position = 'absolute';
  i.style.visibility = 'hidden';

  // border (CSS rule)
  i.style.border = '2px solid black';

  // click to close
  if (window.addEventListener)
    i.addEventListener('click', doPopupClick, false);
  else if (window.attachEvent)
    i.attachEvent('click', doPopupClick);

  document.body.appendChild(i);

  // centre the image
  i.style.left = (document.body.offsetWidth / 2 - i.offsetWidth / 2).toString() + 'px';
  i.style.top = (document.body.offsetHeight / 2 - i.offsetHeight / 2).toString() + 'px';

  // show
  i.style.visibility = 'visible';
}

function doPopupClick(e)
{
  var obj = e.target || e.srcElement;
  obj.parentElement.removeChild(obj);
}

---

Forgot the zorder.

Code:

---

i.style.zIndex = '999';

---

cheers for thw quick reply, however it's still not working :(

I added in the zorder stuff - but it was still under the combobox :confused:

the click events also weren't functioning. I put an alert in the doPopupClick function. In Fx it was firing - but the picture wasn't being removed.

In IE it wasn't even firing :sick:

Here's the page if it helps - http://www.gymnasticexpress.co.uk/sh...rod=39&xSec=16

the JShop thing generates most of it - i'm only messing around with javascript in above the Title.

Hey ho. I rushed that one a bit.

Fix 1:

Code:

---

  // click to close
  if (window.addEventListener)
    i.addEventListener('click', doPopupClick, false);
  else if (window.attachEvent)
    i.attachEvent('onclick', doPopupClick);

---

Fix 2:

Code:

---

function doPopupClick(e)
{
  var obj = e.target || e.srcElement;
  obj.parentNode.removeChild(obj);
}

---

See if those work. I don't know offhand how to fix the combo box problem. I think that may be a bug in IE.

those changes work great :thumb:

shame about the ZOrder - I've decided to ignore the issue by moving the image to the top-left corner.

I'd like to make the cursor a hand when it's over picture (to signify it's clickable) - is this something that can be set through a property? Or will I have to add mouseover & mouseout events and modify the cursor accordingly?

Code:

---

i.style.cursor = 'pointer';

---

:)

thanks :)

you're right about it being a bug. I've seen it suggested that you can use an iframe (2) - so i figured I could just create an object like you did for the pic and position it but MSDN says i can't create iframes programmatically

Any thoughts?

Edit: btw, I'm afraid I've got to spread it around a bit :(

Dunno. Maybe have a hidden iframe in the code already, and position it above the select box and set it to visible when required. However, I don't know if that will be stretching the limits of your template system ;)