CODEWITHSUNDEEP
javascriptjquerycssgridster
Medet Tleukabiluly
Medet Tleukabiluly

Reputation: 11930

Overflow hidden for text in css

I have an element with image and text,

enter image description here

Fiddle. Note: Resize preview enough to make grid big enough.

Here is my CSS:

 .gridster .gs-w .item{

     position: relative;
     width: 100%;
     height: 100%;
     overflow: hidden;
 }

.gridster .gs-w .item .obj{
    background-color: #00A9EC;

 }

.gridster .gs-w .item .itemIcon {
     height: 100%;
     width: 100%;
     float:left;
     overflow: hidden;
     z-index: 10;
}  

.gridster .gs-w .item .itemIcon {
    background-image: url(http://icons.iconarchive.com/icons/dakirby309/windows-8-metro/256/Apps-Calendar-Metro-icon.png);
    background-repeat:no-repeat;
    background-size:contain;
    align-content: center;
} 

.gridster .gs-w .item .itemText{
display: block;
width: 100%;
position: relative;
margin-right: 0px;
right: 0px;
text-align: right;
z-index: 9;
}


.gridster .gs-w .item .itemText a{
vertical-align: center;
text-align:right; 
color:white;
    padding-right: 10%;
    font-size: 14px;
    font-weight: 600;
    text-decoration:none;
    font-family: 'Segoe UI';
}

I want to show text when element is expanded, and hide when element is collapsed, I think I can achieve it by CSS, but it's not yet clear what is wrong.

enter image description here

and here it is collapsed

enter image description here

advise some CSS code, in case if possible to make in CSS.

what i need

Upvotes: 0

Views: 549

Answers (3)

Morpheus
Morpheus

Reputation: 9065

I think you are looking for media query:

@media all and (max-width: 760px) {
    .gridster .gs-w .item .itemText {
        display: none;
    }
}

Example

Upvotes: 2

user13500
user13500

Reputation: 3856

You can hook into resize.resize.

By checking data attribute data-sizex you get how many columns the cell spans. By this you can expand the init function to the following:

Sample fiddle.

public.init = function (elem) {
    container = elem;
    // Initialize gridster and get API reference.
    gridster = $(SELECTOR, elem).gridster({
        shift_larger_widgets_down: true,
        resize: {
            enabled: true,
            resize: function (e, ui, $widget) {
                var cap = $widget.find('.itemText');
                // Hide itemText if cell-span is 1
                if ($widget.attr('data-sizex') == 1) {
                    cap.hide();
                } else {
                    cap.show();
                }
            }
        }
    }).data('gridster');
    hookWidgetResizer();
}

Or cleaner, and likely preferable. Split it out to own function and say something like:

resize: capHide

Sample fiddle.

If you rather go for the solution proposed by your updated images, one way is to tweak the CSS on resize, using your resize_widget_dimensions function. Sure this can be done better, but as a starter you can have this:

Sample fiddle.

this.$widgets.each($.proxy(function (i, widget) {
    var $widget = $(widget);
    var data = serializedGrid[i];
    this.resize_widget($widget, data.size_x, data.size_y);
    // Find itemText
    var $it = $widget.find('.itemText');
    // Set CSS values.
    $it.css({width:this.min_widget_width, left:this.min_widget_width});
}, this));

Challenge is that the gridster is a very fluid cake where a lot of the dimensions and positioning is done by JavaScript rather then pure CSS. Anyhow, the above should give a direction on how to tweak it, and might even be good enough ;)

As a final treat you can resize the font according to cell size. I'm not sure how to best find the size you want as you divide the space between icon/image and text. But something like this:

Sample fiddle.

Where you have a hidden span to measure text:

<span id="font_sizer"></span>

With CSS:

#font_sizer {
    position: absolute;
    font-family:'Segoe UI';
    visibility: hidden;
}

And font measure by:

function szFont(w, t) {
    var s = 1, $fz = $('#font_sizer');
    $fz.text(t);
    $fz.css('fontSize', s + 'px');
    while ($fz.width() < w - 2)
        $fz.css('fontSize', ++s + 'px');
    return s;
}

You can set font size as:

var fontSize = szFont(this.min_widget_width - 10, 'Objects');

Where this.min_widget_width - 10 is the part where you set size available for text. Then you can say:

var $it = $widget.find('.itemText');
$it.css({fontSize: fontSize + 'px', width:this.min_widget_width, left:this.min_widget_width});

Other notes:

  • You have a typo in:

    var container,
    grister,      // <<-- Missing 'd' in gridster
    resizeTimer;

  • In extensions you have

    var data = serializedGrid[i];
this.resize_widget($widget, data.sizex, data.sizey);

    however a console.log of data show:

    data.size_x
data.size_y

    not sure how this fits in. The data attribute uses sizex / y but data property from serialize, (on object), it uses size_x / y with underscore.

Upvotes: 4

Pravin W
Pravin W

Reputation: 2521

You can hide text by using below type of CSS

.gridster .gs-w .item .itemText a.hide-text {
    text-align: left;
    text-indent: -99999px;
    display: inline-block;
}

now whenever you want to hide text you need to add this class i.e. hide-text on anchor element <a href="#">Objects</a> and vice versa to show text remove class

basically you need to try and figure out best possible solution to fit all requirements Good luck

Upvotes: 0

Related Questions