Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Help request: Javascript to display HTML image elements

HTML timer element

  • Please log in to reply
6 replies to this topic

#1 Fae

Fae

    CC Resident

  • Advanced Member
  • PipPipPipPip
  • 77 posts

Posted 27 September 2010 - 11:24 AM

Hi all, I have something here that's been vexing me for days.

Basically, I'm writing a javascript script to sit on the fro9nt page of a website. This script will read the news page using XMLHTTPRequest, get the news item titles and first image source for each title, and display the top four one after the other, while allowing users to scroll through these with buttons. I've got everything nailed pretty much, except the fact that the images display in full instead of only a small section of each image.

the goal here is to leave some HTML that is easy to edit for non-technical users, and the Javascript will use the existing content to update the website as it is edited.

so yeah, my problem is that images will vary in size, and I want to account for that. I have a table cell that I want to use for the pictures, however, any time a new picture goes in, it'll automatically resize the table cell to the size of the image, which ruins the rest of the page. I've tried adding the Overflow attribute, but to no avail. My plan is to show the middle of the picture, and 'clip' the rest behind the other elements. Initially, I wanted Javascript to manipulate the image directly, unfortunately, it can't do anything like that :) so, I settled on just loading the image and clipping it to the area of the table cell (the full image would have to load anyways for on-the-fly editing, so I'm not really overusing that much bandwidth).

Anyways, enough details. Here's the relevant code:

function slideshow (url) {

url = "../"+url;

imageNode = document.createElement("IMG");
imageNode.setAttribute("ID", "imageNode");
imageFile = new Image();
aTags = document.createElement("A");
document.getElementById('imagePane').appendChild(aTags);
aTags.appendChild(imageNode);

textNode = document.createTextNode("");
document.getElementById("textPane").appendChild(textNode); 

if (window.XMLHttpRequest) {    //for non-IE browsers
    try {doc = new XMLHttpRequest() }
    catch (e) { doc = false; }
}    //end detecting non-IE browsers

if (window.ActiveXObject) {    //for IE
    try { doc = new ActiveXObject ("MSXML2.XMLHTTP"); }
    catch (e) { try { doc = new ActiveXObject("Microsoft.XMLHTTP"); }
        catch (e) {doc = false;}
    }
}    //end detecting IE

doc.onreadystatechange = function() {
    if (doc.readyState == 4 && doc.status == 200) {
        try {
            processHTML(doc.responseText);
            currentLoc = 0;
            textNode.nodeValue = text[currentLoc];
            aTags.setAttribute("HREF", "#");
            [B]imageFile.src = img[currentLoc];
            imageNode.setAttribute("SRC", img[currentLoc]);
            imageNode.setAttribute("STYLE", "Overflow: hidden; position: absoloute; top: "+ (-((imageFile.height / 2) - (imageNode.clientHeight / 2)))+"; Left: "+(-((imageFile.width / 2) - (imageNode.clientWidth / 2)))+";");[/B]
            document.writeln("Image src = "+imageFile.src);
            document.writeln("Image height = "+imageFile.height);
            document.writeln("Image width = "+imageFile.width);
            document.writeln("box height = "+ imageNode.clientHeight);
            document.writeln("box width = "+ imageNode.clientWidth);
            ssTimer = window.setTimeout(slideNext, 10000);
        }    //end try
        catch (e) {
            }    //end catch
    }    //end if
}    //end onReadyStateChange function

doc.open("GET", url, true);
doc.send();

}    //end newsSlideShow

Quick explaination... I've italicised the parts that are the most relevant.

ProcessHTTP(String) is a method used to retrieve the image sources and story headers, and store them in an array for later.

imageNode.setAttribute("STYLE", "Overflow: hidden; is supposed to put the CSS overflow property in, which it does (I'veseen in FireBug and Chrome Console), but still the image does notoverflow under the rest of the table like expected.

position: absoloute; top: "+ (-((imageFile.height / 2) - (imageNode.clientHeight / 2)))+"; Left: "+(-((imageFile.width / 2) - (imageNode.clientWidth / 2)))+";");
is meant to get the image size and height and the size and height of the table cell (based on the client computer's screen and how it displays the element) and center the image, so while most of it will be clipped, the very center would be visible, as far as the edges of the table cell on the client computer.

The document.writelns underneath are for me to test the values being used in the positioning (the height and width of the table cell element and of the image as a whole) they all return 0, making the image display starting with the top-left corner.

tl;dr: This code initialises the slideshow of images, however, the image is still displayed as full size despite me trying to 'clip' the sides of the image by having the image centered in the center of the tablecell it is displayed in, and not displaying the parts of the image that do not fall inside the table cell by using Overflow: Hidden;. Also, the image displays from top left (as default) as the image.height etc... consistently return 0.

I'm at a severe loss here, please help me out!

As always, thanks in advance ^^

~Fae

Edited by Fae, 27 September 2010 - 11:25 AM.
Italicised is tough to see in code tags. Made it bold instead :)

  • 0
I'll ask a lot of questions (most of them probably stupid stuff). Bear with me, i'm still learning! ^_^ Also, I'll try to answer as many questions as I can as well, but I'm not very good yet. I'm sure I'll be of more use once I get better :)

#2 gokuajmes

gokuajmes

    CC Devotee

  • Senior Member
  • PipPipPipPipPipPip
  • 483 posts

Posted 27 September 2010 - 08:34 PM

What does this line look like in the source of the page when compiled,
imageNode.setAttribute("STYLE", "Overflow: hidden; position: absoloute; top: "+ (-((imageFile.height / 2) - (imageNode.clientHeight / 2)))+"; Left: "+(-((imageFile.width / 2) - (imageNode.clientWidth / 2)))+";");

could you post a screenshot / html source after the Ajax request is made
  • 0

#3 Fae

Fae

    CC Resident

  • Advanced Member
  • PipPipPipPip
  • 77 posts

Posted 28 September 2010 - 12:15 AM

Sure.

<img id="imageNode" src="Images/Hair.jpg" style="overflow: hidden; top: 0pt; left: 0pt;">

from Firefox's Firebug

<img id="imageNode" src="Images/Hair.jpg" style="Overflow: hidden; position: absoloute; top: 0; Left: 0;">

from Chrome's console.
It seems to do the calculation right and everything, but the values for img height and width and the td element's childHeight and childWidth all seem to return 0, so ( (0 / 2) - (0 / 2) ), ( (0 / 2) - (0 / 2) ) are the coordinates of the top and left parts of the image.

Thanks for the help again, :)
  • 0
I'll ask a lot of questions (most of them probably stupid stuff). Bear with me, i'm still learning! ^_^ Also, I'll try to answer as many questions as I can as well, but I'm not very good yet. I'm sure I'll be of more use once I get better :)

#4 gokuajmes

gokuajmes

    CC Devotee

  • Senior Member
  • PipPipPipPipPipPip
  • 483 posts

Posted 28 September 2010 - 01:17 AM

Well are you trying to align all images inside the table cell staking one behind the other? something like the images showed in the facebook like plugin i have in my webpage here
http://labs.deeptechtons.net
, if yes then you need to specify a float:left on the children[ image's]. Also specify a image height and width [not the position ] make all your images sized to 32px or 48px or even 64px based on your screen area
  • -1

#5 Fae

Fae

    CC Resident

  • Advanced Member
  • PipPipPipPip
  • 77 posts

Posted 28 September 2010 - 01:49 AM

Actually, I'm thinking more along the lines of this:

Posted Image

the image slideshow is a component of the top menu, it displays a portion of the image in the relevant box (which is a table cell in this case), while keeping the rest of the image hidden. In the example above, the full image size is denoted by the pink box, wheras the only part of the image that is displayed appears in the Red box. the Blue box is the relevant text from the same story, and the Yellow box contains scroll buttons that allow the user to scroll through the stories.

The (imageFile.Height \ 2) - (imageNode.childHeight / 2) etc; part of the code is supposed to line up the image so that the very center of the image is in the center of the text box, regardless of the screen resolution of the client.

Instead, this happens:

Posted Image

...where the image displaces everything, because it won't hide any overflow or be positioned in the correct place.

I've spent the morning adding / changing CSS rules to see if I can nail it, but so far nothing's worked. In theory, if I get the right rules, I can write them in using the JS. No joy so far... Also, the monitor I have for work is only 1280x1024, and the largest picute I'm using to test this is 2592x1944. My thinking is that when I'm done and I leave the non-technical people here to maintain the site, I doubt they'd be very confident doing anything but the basics in HTML (and I doubt they'd be very confident in that, either), nevermind having to resize an image and put it in a certain location etc etc... to keep the news bar working. I want them to be able to do as little as possible when it comes to maintainence.

Thanks again, Gokuajmes :)
  • 0
I'll ask a lot of questions (most of them probably stupid stuff). Bear with me, i'm still learning! ^_^ Also, I'll try to answer as many questions as I can as well, but I'm not very good yet. I'm sure I'll be of more use once I get better :)

#6 Fae

Fae

    CC Resident

  • Advanced Member
  • PipPipPipPip
  • 77 posts

Posted 28 September 2010 - 02:20 AM

OMG double post... hehe...

Anyways, I've just discovered the wonderful world of the CSS Clip property, which will probably do the trick, assuming I can get correct values for the image file height and width, and the size of the image table cell as displayed on the client.

...so yeah, ignore the overflow and my naïvity... if you have any advice on getting the heights and widths properly, that would be great!

Thanks again :)
  • 0
I'll ask a lot of questions (most of them probably stupid stuff). Bear with me, i'm still learning! ^_^ Also, I'll try to answer as many questions as I can as well, but I'm not very good yet. I'm sure I'll be of more use once I get better :)

#7 Fae

Fae

    CC Resident

  • Advanced Member
  • PipPipPipPip
  • 77 posts

Posted 28 September 2010 - 08:34 AM

Hi all, just posting to say this has been resolved. For the correct element height and width of the table box, I used element.offsetHeight and offsetWidth,a nd they worked.

As for the image clipping, I had issues until I learned to spell the word 'Absolute' (I kept spelling it 'Absoloute'... v_v; ), as clipped images MUST be in an absoloute-positioned element to function. Now I realise that, it's all working, with the exception of positioning it properly on the page.

So yeah, thanks for the help Gokuajmes, and for anyone who finds this thread looking for the same answers I was, hope this clears it all up :)

Got to run now, but if requested, I'll post the working source code.
  • 0
I'll ask a lot of questions (most of them probably stupid stuff). Bear with me, i'm still learning! ^_^ Also, I'll try to answer as many questions as I can as well, but I'm not very good yet. I'm sure I'll be of more use once I get better :)





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download