Question

I made a gallery using jquery and css.
I made function of changing image and it’s resize upon “hover/unhover/click” so it will fit the output “div”. It works prefect on Chrome, but FireFox mess this a bit. It applys the dimensions resize only after another “hover/unhover/click”.

This is the HTML of the output div “Slides”

<div class="leftPart">
    <div class="onFlyActualView">
        <div class="Slides"><img src="ecchi/000-Girl.jpg" alt="#" /></div>
    </div>
    <div class="onFlyDescription"></div>
</div>

This is the minimized items:

<div class="rightPart">
    <div class="onFlyMiniView">
        <ul class="oFMVLines">
            <li>
                <ul class="oFMVItems">
                    <li>0</li>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </li>
            <li>
                <ul class="oFMVItems">
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                </ul>
            </li>
        </ul>
      </div>
    </div>

This is the CSS of “.Slides” class:

.Slides {
height: auto;
width: auto;    
margin: 0px auto;
position: static;
vertical-align: middle;
}

.Slides img
{
border: 1px solid #0F0;
display: block;
position: static;
margin-top: 5px;
margin-right: auto;
margin-bottom: 5px;
margin-left: auto;
height: auto;
width: auto;
}

Here is the JQuery for resize (curH,curW are global variables):

function onFlyResize(iImage) {

    var max_size = 590;
    var divNum;
    var h, w;


    $(iImage).css({ height: 'auto', width: 'auto' });
    //$(iImage).css({ height: '0', width: '0' });
    $(iImage).each(function () {
        curH = parseFloat($(this).attr('height'));
        curW = parseFloat($(this).attr('width'));


        console.log('w: ' + curW + '; h: ' + curH);
        //$(this).css({ height: curH, width: curW });
        if (curH > curW) {
            //var h = max_size;
            divNum = curH / max_size;
            h = max_size;
            w = Math.ceil(curW / divNum);
            //alert("Height larger!");
        } else {
            divNum = curW / max_size;
            h = Math.ceil(curH / divNum);
            w = max_size;
            var tempVar = 0;
            tempVar = Math.ceil((max_size - curH) / 2);
            //alert("Width larger!");
        }
        $(this).css({ height: h, width: w });
    });
};

Here is the JQuery that calles it upon “hover/unhover/click”:

function onFlyGalleryImplement() 
{
var CurrImg = $(".Slides").find('img:first').attr('src');
var cur_li_cont = "0";
$(".oFMVItems li").hover(
    function () {
        $(this).css({ border: "solid 2px #06C", margin: "-1px 1px 0px 3px" }).show(400);
        cur_li_cont = $(this).text();
        var set_img_to = "ecchi/00" + cur_li_cont + "-Girl.jpg";
        $(".Slides").find('img:first').attr({ src: set_img_to });
        $(".Slides").find('img:first').attr("alt", $(".Slides").find('img:first').attr("src"));
        $(".onFlyDescription").text("Height: " + $(".Slides img").attr('height') + " Width: " + $(".Slides img").attr('width') + ".");
        onFlyResize($(".Slides img"));
    },
    function () {
        $(this).css({ border: "solid 1px #333", margin: "0px 2px 0px 4px" });
        $(".Slides").find('img:first').attr("src", CurrImg);
        $(".onFlyDescription").text("Height: " + $(".Slides img").attr('height') + " Width: " + $(".Slides img").attr('width') + ".");
        onFlyResize($(".Slides img"));
    });
    onFlyResize($(".Slides img"));

$(".oFMVItems li").click(function () {
        cur_li_cont = $(this).text();
        var set_img_to = "ecchi/00" + cur_li_cont + "-Girl.jpg";
        $(".Slides").find('img:first').attr('src', set_img_to);
        CurrImg = set_img_to;
        $(".onFlyDescription").text("Height: " + $(".Slides img").attr('height') + " Width: " + $(".Slides img").attr('width') + ".");
        onFlyResize($(".Slides img"));
    });
    onFlyResize($(".Slides img"));
};

$(window).load(function () {
onFlyResize($(".Slides img")); //A fix to start image resied for the output restrictions.
});

$("document").ready(function () {
onFlyGalleryPreloadModule(); //Function for images preload.
onFlyGalleryImplement(); // Function that runs all gallery core.
});

So that’s it… Working on it already for almost 30 hours and can’t find out what’s the issue. If anybody knows why it happense so he will save me a hip of time.

p.s.: sry for bad enlish.

Answer 1

Instead of this:

$(this).css({ height: h, width: w });

Try this instead:

$(this).height(h);
$(this).width(w);

So your jQuery resize code will become:

function onFlyResize(iImage) {

    var max_size = 590;
    var divNum;
    var h, w;


    $(iImage).css({ height: 'auto', width: 'auto' });
    //$(iImage).css({ height: '0', width: '0' });
    $(iImage).each(function () {
        curH = parseFloat($(this).attr('height'));
        curW = parseFloat($(this).attr('width'));


        console.log('w: ' + curW + '; h: ' + curH);
        //$(this).css({ height: curH, width: curW });
        if (curH > curW) {
            //var h = max_size;
            divNum = curH / max_size;
            h = max_size;
            w = Math.ceil(curW / divNum);
            //alert("Height larger!");
        } else {
            divNum = curW / max_size;
            h = Math.ceil(curH / divNum);
            w = max_size;
            var tempVar = 0;
            tempVar = Math.ceil((max_size - curH) / 2);
            //alert("Width larger!");
        }
        $(this).height(h).width(w);
    });
};

The reasons why $(this).css({height: h, width: w}); won’t work are:

• you cannot simply supply a numeric value for height and width, you must append ‘px’

Tell me if it still doesn’t work.