CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
user2481398
user2481398

Reputation:

Remove a tag in Runtime

I have this code: 

<h1 id="logo">
    <a class="brand" href="/cgi-bin/koha/opac-main.pl">                           
        CSU Library                            
    </a>
</h1>

When my browser width is 701px and above, I don't want this to be seen (edit clarification: the element should be deleted from my html code); otherwise, the tag can be seen normally when my browser width is below 701px.

Is there any way I can do that? I don't know where to go from this code.

@media only screen and (min-width: 701px){
    ....??
}

Upvotes: 1

Views: 190

Answers (5)

Chad
Chad

Reputation: 1549

According to the asker's comment... "but it leaves a blank space, and that's not what I want. I wanted it to be totally deleted from my html."

Yes, it is possible, but you'll need to use javascript. It is very simple with jQuery:

$("#logo").remove();

Upvotes: -1

Kartikeya Khosla
Kartikeya Khosla

Reputation: 18873

One method is to use media queries and another way is with jquery as :

$(document).ready(function(){
    if($(window).width() > 701)
    {
       $("#logo").hide()
    }
    else
    {
       $("#logo").show()
    }
});

OR

$( window ).resize(function() {
    if($(window).width() > 701)
        $("#logo").hide()
    else
        $("#logo").show()
 });

Upvotes: -1

kefy
kefy

Reputation: 535

Try this as css

#logo { display : none; }
@media only screen and (min-width: 701px){
#logo { display : block; }
}

Upvotes: 0

rizzy
rizzy

Reputation: 162

This can be easily achieved in CSS if this is a responsive website you are building.

@media (min-width: 700px) { 
   #logo {
       display: none;
    }
}

Upvotes: 3

Arun P Johny
Arun P Johny

Reputation: 388316

For Modern browsers and IE9 and above you can use media queries like

#logo {
    display: none;
}
@media (max-width: 701px) {
  #logo {
    display: block;
  }
}

Upvotes: 1

Related Questions