Good news, I hope

[The Rogue Tomato]

I figured out how to make Firefox (and hopefully at least the later versions of IE) work roughly the same as Chrome. 

Firefox should scale down images to the size of the window now.  If you expand the window and then reload the page, the image will expand up to its maximum size.  (Before, it was stuck at 800px.) 

If you use Chrome or any other webkit browser (the latest Opera for Windows is Chrome-based), the image will automatically expand when you expand your browser.  You do not have to reload for the change to take place.

 

[The Rogue Tomato]

whatever you did.... my pics just shrunk down to less than half their size again..... from 800px to i;m not even sure now.....

Are you using Firefox?  If so, it should show the image at the width of the post area minus 30 pixels (to leave room for quotes of the picture).  So if you expand your browser window and reload, you should see the picture size increase.

If you are using IE, I can't tell you what the behavior will be, since I'm currently running Linux, which doesn't do IE. 

My goal here is to allow everyone to be able to expand their browser and see the picture at its full size.  You couldn't do that with Firefox before.  Just in case I have to spell it out for you, I'm trying to please you with this change. 

 

[The Rogue Tomato]

whatever you did.... my pics just shrunk down to less than half their size again..... from 800px to i;m not even sure now.....

Are you using Firefox?  If so, it should show the image at the width of the post area minus 30 pixels (to leave room for quotes of the picture).  So if you expand your browser window and reload, you should see the picture size increase.

If you are using IE, I can't tell you what the behavior will be, since I'm currently running Linux, which doesn't do IE.

mac safari....

I don't have a Mac, so I can't test it on Safari.  But it should behave the same way as Chrome, I think.  Reload the page you're looking at, and see what it does.  If it doesn't expand the picture, let me know. 

EDIT: No, it doesn't work the same way as Chrome (I have Konqueror, which is what Safari is based on).  It works the same as Firefox for me.

 

[The Rogue Tomato]

By the way, with this code, if you SHRINK the window, it will also shrink the image to fit the post area when you reload Firefox, or IE, or perhaps Safari, too. 

So if you want to see the image in all its glory, maximize the window and reload.

 

[The Rogue Tomato]

Wait, Aleshanee, I forgot that you wrap your images in URLs, so your images will be stuck at the URL limit no matter how I treat the images.  The URL limit is 800px.  If you want your image to be able to resize to a larger size, just post an image, not wrapped in a URL. 

 

[The Rogue Tomato]

i loaded it with the same [ img ] format you loaded your takoyaki picture and it is still way below half its normal size.... the same size as all my pics are coming up now... which is even smaller than 800px....

That's very weird.  That shouldn't be happening.  I'll try to find a mac user to iron out the problem. 

Be sure to reload the pages to see if that makes a difference. 

 

[The Rogue Tomato]

The main thing is don't worry.  If I can't work this out for Safari on Mac, I can simply set it back to the way it was earlier today. 

I'm headed to bed.  Let me know.

 

[The Rogue Tomato]

Rogue... it appears you have successfully fixed the images.
Are you finished with the code?

Not yet.  I've completely redesigned how the image sizing works.  Right now it's working the way it did two days ago, but my goal is to make the images resize with the window no matter what browse you're using.  I've got it working perfectly using test HTML on my system (I can't run the forum on my system anymore because your forum has plugins I don't have).  But I'm still trying to make it work on the forum. 

There will be long pauses between what I do.  I've got food poisoning and am either "occupied" or sleeping a lot. 

Why did I do this?  I didn't notice that the div I gave a new ID already had an ID.  You can't have two IDs on a div.  That's why my previous attempt at making it work for every browser failed.  So I'm trying again, this time on a different div that had no previous ID.

 

[The Rogue Tomato]

Okay, here's how it stands.  This works perfectly for me (maximize the window, image expands.  restore window, image shrinks) on the following browsers:

Chrome for Windows
Safari for Windows (version 5)
Opera for Windows (version 15)

I added a check for Safari on the Mac, but I don't have a Mac to test it.

It does not work properly on Firefox.  Firefox has a resize bug that occurs when you restore a window from being maximized.  So pretty much it's stuck on 800px maximum size right now.  If I can find a workaround, I'll try it.  The behavior was pretty funny when I had it half-working.  It would maximize the image, but when you restored the size of the browser, the image stayed big.  If you expanded the window with the mouse, the image would get bigger.  But if you shrunk the window, the image would continue getting bigger.  LOL Firefox.  Don't. Use. It.

It does not work properly on IE 8 or below.  It may work on IE 9, but I don't have it, and I don't want to install it (sorry!).  LOL IE.  Don't. Use. It. (Unless you like viruses on your computer.)

Here is the new code, in case anyone is interested.

window.onload = set_initial_widths;
window.onresize = fix_them_sizes;

function set_initial_widths()
{
  if (is_chrome || is_webkit || is_safari || isSafari)
    createCSSSelector('.bbcimg', 'max-width: 100%; width: auto; height: auto;');
  else
    createCSSSelector('.bbcimg', 'max-width: 800px; width: auto; height: auto;');
}

function fix_them_sizes()
{
  if (!is_chrome && !is_webkit && !is_safari && !isSafari)
  {
    var iw = document.getElementById("parentpost");
    var twidth = iw.clientWidth - 50;
    document.getElementById("bbcimg").maxWidth=twidth+"px";
  }
}

The weirdest thing is that I stuck an alert (popup window) in there to make sure I was getting the right sizes.  It always returned the right numbers.  But on Firefox, it refused to use the numbers on various resize events.

 

[PappaBear]

I just got a pop-up window from the forum that said,

"Parent-post width 981"

Just an FYI

 

[The Rogue Tomato]

I just got a pop-up window from the forum that said,

"Parent-post width 981"

Just an FYI

Yeah, I'm checking the width to see if it's changing properly.  It is.  But it doesn't set the image properly in Firefox.  If you maximize Firefox, the image will expand.  But if you restore Firefox, the image doesn't go back to its original size.  You have to reload the page to get it to go back.  Given that the pop-up told me the numbers were always correct, I have no idea why Firefox behaves that way. 

I took out the popup, so just reload the page and it'll be gone.

 

[The Rogue Tomato]

Okay, I finally got it working with Firefox and IE. 

Here's the tradeoff.  I had to squish down the initial image size so that it doesn't push the ads on the right off screen.  I'm sure admin would like people to be able to see the ads, no?  I have adblock, so it wouldn't matter to me, but not everyone else uses it.  So I tested it on IE without adblock just to make sure it all works. 

The bottom line is that the initial image may look smaller to you than it did recently.  BUT -- if you maximize the window, it will expand.  And if you restore the window, it will shrink back. 

So now it works on all the browsers I was able to test.

It still works best on Chrome, Opera 15, and Safari for Windows (and maybe for Mac, I don't know). 

 

[The Rogue Tomato]

By the way, I have one thing left to do.  I want to make this all work with URL-wrapped images.  Once I get that working, I'm done, done, done. 

 

[The Rogue Tomato]

Looks like it's all working now.  Here is the final code.  I finally gave in and used jQuery.  It makes Javascript SO much easier to deal with.  This is in the body of the document:

<script type="text/javascript">
$( document ).ready( function(){
    set_initial_widths();
    setMaxWidth();
    $( window ).bind( "resize", setMaxWidth );

    function setMaxWidth() {
        var wwidth = $( window ).width() - 600;
        var cssObj = { "max-width" : wwidth "px", "height" : "auto", "width" : "auto" }
        if (!is_chrome && !is_webkit && !is_safari && !isSafari)
        {
            $( ".bbc_img" ).css(cssObj);
        }
        var lwidth = wwidth - 100;
        var cssObjLink = { "max-width" : lwidth "px", "display" : "inline-block", "text-overflow" : "ellipsis", "overflow" : "hidden", "white-space" : "nowrap" }
        $( ".bbc_link" ).css(cssObjLink);
        var cssObjCode = { "max-width" : wwidth "px", "display" : "block", "font-family" : "dejavu sans mono, monaco, lucida console, courier new, monospace", "font-size" : "x-small", "background" : "#eef", "border-top" : "2px solid #999", "border-bottom" : "2px solid #999", "line-height" : "1.5em", "padding" : "3px 1em", "overflow" : "auto",  "white-space" : "nowrap", "max-height" : "24em" } 
        $( ".bbc_code" ).css(cssObjCode);
    }

    function set_initial_widths()
    {  
      if (is_chrome || is_webkit || is_safari || isSafari)
      {
        var cssObjInit = { "max-width" : "100%", "height" : "auto", "width" : "auto" }
        $( ".bbc_img" ).css(cssObjInit);
      }
      else
      {
        var wwidth = $( window ).width() - 600;
        var cssObjInit = { "max-width" : wwidth "px", "height" : "auto", "width" : "auto" }
        $( ".bbc_img" ).css(cssObjInit);
      }
    }
});
</script>

The jQuery alternatives to createCSSSelector aren't simple enough to warrant a change, so I'm leaving that in.  So unless anyone has a problem, I'm done!  Woohoo!  if you can think of any more enhancements you'd like, I'd be glad to work on them!

 

[The Rogue Tomato]

Aleshanee, I'd be curious to know how the images are working for you now. 

Now that I've set the code to recognize the Mac Safari browser, you should be getting the best results for images that are not wrapped in URLs.  The images should appear well, and expand and contract well with the browser. 

They'll expand and contract with the browser even if you wrap them in URLs, but they will appear smaller at first until you expand the browser window.  That's due to the limitations of URL lengths.  There's nothing I can do about that without shoving the ads off the screen, and as much as many people might find that a good thing, I don't think the admin would like that.

That's all assuming what I've done works on your Mac.  It should, because Safari is based on Konqueror, and it tests beautifully in Konqueror.  I don't have a Mac for testing, so I'll have to rely on you (or any other Mac users out there) to let me know.

 

[FSSL]

Looks like it's all working now.  Here is the final code. 

Cool! Great job! Thank you!

As I do with every outside access, I changed the password. Now the onus is on me if there are complaints!

What files were created/modified?

 

[The Rogue Tomato]

Looks like it's all working now.  Here is the final code. 

Cool! Great job! Thank you!

As I do with every outside access, I changed the password. Now the onus is on me if there are complaints!

What files were created/modified?

I wrote it all up and sent it in a PM.  There's some junk changes left in there that's no longer necessary, but that won't hurt anything.  Just added IDs I ended up not using because the technique didn't work in Firefox or IE.  I explain all that in my writeup. 

Thanks for giving me the opportunity to help out!  It was fun.

Oh, I did forget to mention the files I added -- the jQuery files and jQuery CSS.  I'll list them for you here:

Themes/default/css/jquery-ui-1.10.3.custom.min.css
Themes/default/scripts/jquery-ui-1.10.3.custom.min.js
Themes/default/scripts/jquery.js

And that's it, unless I recall something else!

 

[Ransom]

I don't know if this is a side-effect to the code changes Rogue has made to the forum, but I've noticed that the orange "New" button doesn't take me to the latest post in the thread. Similarly, when I post something, I'm no longer directed right to my new post. In both cases, the browser seems to stop a few posts up the thread.

I generally use Firefox, and that's where I'm seeing this behaviour. Right now I'm in Chromium (Google Chrome for Linux) and it seems to be working properly.

 

[The Rogue Tomato]

I don't know if this is a side-effect to the code changes Rogue has made to the forum, but I've noticed that the orange "New" button doesn't take me to the latest post in the thread. Similarly, when I post something, I'm no longer directed right to my new post. In both cases, the browser seems to stop a few posts up the thread.

I generally use Firefox, and that's where I'm seeing this behaviour. Right now I'm in Chromium (Google Chrome for Linux) and it seems to be working properly.

Anything is possible, but I don't see how my changes could affect the "new" button.  I wouldn't even know where the code for the "new" button is without searching for it. 

 

[Ransom]

Anything is possible, but I don't see how my changes could affect the "new" button.

Do your changes cause the page to reflow itself after loading? Possibly that's what's happening - the page loads, showing the "proper" location, then reflows itself narrower, pushing the newer posts down.