CODEWITHSUNDEEP
javascriptjqueryhtmlcssmobile
uniqezor
uniqezor

Reputation: 179

Remove span with jquery

I'm trying to remove a span with class, using jquery. My goal is to remove this span, when screen smaller then 480px. I already tried with .remove(); but it does not remove the span, when screen is lower then 480px.

I am using CSS / media queries to control and customize the page.

This is my Fiddle: FIDDLE EXAMPLE

HTML

<span class="textbox">This is what we made of you!</span>

CSS

@media screen and (max-width: 368px) {
    .container{width: 368px;     margin: 0 auto;
    padding: 0; display: block;}

     span .textbox{display: none;}

    .nav{display: none;}

    .header{width: 368px;}
}

JQUERY

$(document).ready(function () {
     var words = [
                    'Special', 'Dynamic', 'Simple', 'Great', 'Better',
                    'Stronger', 'Stylish', 'Flawless', 'Envied',
                    'Strong', 'Sucessful', 'Grow', 'Innovate', 'Global',
                    'Knowledgable', 'Unique', 'Trusted', 'Efficient',
                    'Reliable', 'Stable', 'Secure', 'Sofisticated',
                    'Evolving', 'Colorful', 'Admirable', 'Sexy', 'Trending',
                    'Shine', 'Noted', 'Famous', 'Inspiring', 'Important',
                    'Bigger', 'Stylish', 'Expand', 'Proud', 'Awesome',
                    'Solid'
                    ], i = 0;
        var getRandomWord = function () {
        return words[Math.floor(Math.random() * words.length)];
        };

    setInterval(function(){
        $('.textbox').fadeOut(500, function(){
        $(this).html(getRandomWord()).fadeIn(500);
    });
    }, 5000);

});

Upvotes: 0

Views: 359

Answers (3)

Shomz
Shomz

Reputation: 37701

span .textbox{display: none;}

should be: 

span.textbox{display: none;}

because your original code would select all elements with a textbox class which have a span parent, and not the actual span element with the textbox class.

UPDATE

I didn't catch you're using fadeIn that will actually override your display: none property. The quickest fix (without having to check the window width in JS and all that...) is to animate the opacity instead of using fades because that won't change the display state of the element and your CSS rule will remain active.

So, your interval function should be: 

setInterval(function(){
    $('.textbox').animate({'opacity': 0}, 500, function(){
        $(this).html(getRandomWord()).animate({'opacity': 1}, 500);
    });
}, 3000);

See it in action here: http://jsfiddle.net/9B7vz/3/

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

Try

@media screen and (max-width: 480px) {
    .textbox {
        display: none;
    }
}

then

var interval;
function handler() {
    var width = $(window).width();
    //if window size is > 480 and there is no interval set then create a new interval
    if (width >= 480 && !interval) {
        interval = setInterval(function () {
            $('.textbox').fadeOut(500, function () {
                $(this).html(getRandomWord()).fadeIn(500);
            });
        }, 5000);
    } else if (width < 480 && interval) {
        //if window width < 480 and there is a interval clear it and hide the textbox
        clearInterval(interval);
        interval = undefined;
        $('.textbox').hide();
    }
}
handler();
//to handle resizing of window
$(window).resize(handler);

Demo: Fiddle

Upvotes: 0

flauntster
flauntster

Reputation: 2016

Your current CSS does actually hide the text when the width is reduced to below 480px, but the jQuery fadeIn function brings it back into view, as fadeIn will change the display property of that element.

Upvotes: 2

Related Questions