Question

I’ve got a following problem. So there are two lists – each one displays pictures (features of products). One displays every feature smaller than 150px, and the other every feature bigger than 150px. Now, we’ve got three cases (depending on features of a certain product):
1. Both bigger and smaller pictures are displayed.
2. Only small pictures are displayed.
3. Only big pictures are displayed.
In first case, pictures are divided into two columns – smaller in left, and bigger in right. There’s also a div (with position:absolute) between them, which serves as vertical border.
I would like to change the way they are displayed, when we’ve got case 2 or 3 – with only small or big picture, there shouldn’t be this vertical border, and that certain UL which is visible should be 100% width. What is the best way to achieve that? Pure CSS? jQuery? PHP? BTW. those lists are foreached via Smarty.

Please look at the code:

---

jQuery:

$(document).ready(function() {
    $("#idTab1Tags li").each(function() {
        var $this = $(this);
        $this.css({width: 'auto', height: 'auto'});
        var pic_real_width = $this.width();
        var pic_real_height = $this.height();
        if(pic_real_width<150){
                $(this).addClass("imgSmall");
        }
        else {
                $(this).addClass("imgBig");
        }
    });
 });

---

HTML/Smarty:

{if $tags}
        <div id="idTab1Tags">
            <div id="idTab1TagsContainer">
                <ul id="tagsicons" class="tagsicons tagsSmall">
                    {foreach from=$tags item=tag}
                    <li>
                        {if $tag.link}<a href="{$tag.link}">{/if}

                        <img src="{$base_dir}modules/tagsicons/images/{$tag.id}.{$tag.extension}" onselectstart="return false;" ondragstart="return false;" alt="{$tag.tag|escape:'htmlall':'UTF-8'}" />

                        {if $tag.link}</a>{/if}


                        {if $tag.description}<span>{$tag.description}</span>{/if}
                    </li>
                    {/foreach}
                    <div class="clear"></div>
                </ul>
                <ul id="tagsicons" class="tagsicons tagsBig">
                    {foreach from=$tags item=tag}
                    <li>
                        {if $tag.link}<a href="{$tag.link}">{/if}

                        <img src="{$base_dir}modules/tagsicons/images/{$tag.id}.{$tag.extension}" onselectstart="return false;" ondragstart="return false;" alt="{$tag.tag|escape:'htmlall':'UTF-8'}" />

                        {if $tag.link}</a>{/if}


                        {if $tag.description}<span>{$tag.description}</span>{/if}
                    </li>
                    {/foreach}
                    <div class="clear"></div>
                </ul>
                <div class="clear"></div>
                <div id="idTab1TagsContainerBorder"></div>
            </div>
        </div>
    {/if} 

---

CSS:

ul#tagsicons {
    clear: both;
    list-style: none;
    padding-left: 0;
    width:456px;
    display:inline-block;
}
#idTab1Tags { margin:15px 0 0 0; }
ul#tagsicons li { display:inline-block; vertical-align:middle; position:relative; }
.tagsSmall { margin:0 7px 0 0; }
.tagsSmall li { margin:0 13px 13px 0; }
.tagsBig li { margin:0 0 13px; }
#idTab1TagsContainer {
    padding:0 0 0 20px;
    position:relative;
}
#idTab1TagsContainerBorder {
    position:absolute;
    background:#F5F5F5;
    width:1px;
    height:100%;
    top:0;
    left:459.5px;
}
.tagsSmall .imgBig, .tagsBig .imgSmall { display:none !important; }

---

So the border is #idTab1TagsContainerBorder , small images are inside .tagsSmall, and big ones inside .tagsBig

Thanks for your help.

EDIT:

In the meantime I found the solution:

jQuery:

var big = $( ".tagsBig li" );
var small = $( ".tagsSmall li" );
if (big.is(":visible")){ 
} else {
    $(".tagsSmall").addClass("wideSmall");
    $('#idTab1TagsContainerBorder').hide(1);    
}
if (small.is(":visible")){ 
} else {
    $(".tagsBig").addClass("wideBig");
    $('#idTab1TagsContainerBorder').hide(1);    
}

CSS:

.wideSmall { width:100% !important; }
.wideBig { width:110% !important; }
.wideBig li { margin:margin:0 7px 13px 0 !important; }

The solution below by Serious also works.

Answer 1

You could store each type of image, then check which ones are present, then hide some part of the UI :

var smallImages = [];
var bigImages = [];

$("#idTab1Tags li").each(function()
{
    var $this = $(this);

    $this.css({width: 'auto', height: 'auto'});
    var pic_real_width = $this.width();
    var pic_real_height = $this.height();
    if(pic_real_width<150)
    {
        smallImages.push($this);
        $(this).addClass("imgSmall");
    }
    else
    {
        bigImages.push($this);
        $(this).addClass("imgBig");
    }
}

if (smallImages.length == 0)
{
    $("ul .tagsSmall").hide();
}
if (bigImages.length == 0)
{
    $("ul .tagsBig").hide();
}
if (smallImages.length == 0 || bigImages.length == 0)
{
    $("#idTab1TagsContainerBorder").hide();
}