CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user6934446
user6934446

Reputation: 23

Jquery & secton is not hiding my logo div id

I'm trying to hide my logo only on one div and show it on another. In one of my sections, I have a video so I do not need to show my logo. I cant however do it at all. It either just hides forever or just does not want to hide at all.

I have tried both style="" inside the div and jquery. None of which works.

My HTML structure:

<!-- HEADER -->
<header id="header" class="header-left">        
    <div class="header-inner clearfix">

        <!-- LOGO -->
        <div id="logo" class="logo-left">
            <a href="index.html">
                     <img id="dark-logo" src="files/uploads/logo_dark.png" srcset="files/uploads/logo_dark.png 1x, files/uploads/[email protected] 2x" alt="Logo Dark">
                     <img id="light-logo" src="files/uploads/logo_light.png" srcset="files/uploads/[email protected] 1x, files/uploads/[email protected] 2x" alt="Logo Light">
            </a>
        </div>

        <!-- MAIN NAVIGATION -->
        <div id="menu" class="clearfix">            

            <div class="menu-actions">
                <div class="menu-toggle"><span class="hamburger"></span></div>
            </div> <!-- END .menu-actions -->

            <div id="menu-inner">
                <nav id="main-nav">
                    <ul>
                        <li><a href="index.html">xxx</a>
                        </li>
                        <li><a href="#">xxx</a>
                        <ul class="sub-menu">
                        <li><a href="xxx.html">xxx</a></li>
                        <li><a href="xxx.html">xxxx</a></li>
                        <li><a href="xxx.html">xxx</a></li>
                        </ul>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
     </div>
    <span class="pseudo-close header-close"></span>
</header>

Ok so before I show the source, here is what works:

 <style>#logo img{opacity:0;visibility:hidden;}</style>

Pretty standard right? So I tried hiding the logo in this same way into a section and it did not work. Example:

<section id="page-body" class="fullwidth-section text-dark" style="#logo img{opacity:0;visibility:hidden;}">

....

</section>

I then tried jQuery to hide the logo as a test. This did not work at all. Example:

<script src="files/js/jquery-1.12.4.min.js"></script>

<script>

$(document).ready(function(){


$("#logo").css({
display: "none",
visibility: "hidden"
});

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

</script>

What I was hoping to do is hide the logo in a single div then show it for the rest of the page. I had an idea to do this with jQuery or a section. Anyone have any ideas on how to do this?

Upvotes: 0

Views: 285

Answers (2)

Prasanna Venkatesh
Prasanna Venkatesh

Reputation: 402

You can't write inline style to another element.Inline styles are applicable to the element itself.

This is the right way

<style>#logo img{opacity:0;visibility:hidden;}</style>

This is not possible 

<section id="page-body" class="fullwidth-section text-dark" style="#logo img{opacity:0;visibility:hidden;}">

....

</section>

Try

section #logo img{opacity:0;visibility:hidden;}

Upvotes: 0

Koby Douek
Koby Douek

Reputation: 16675

style="#logo img{opacity:0;visibility:hidden;}"

This is not a valid HTML style attribute. It's a selector for CSS that should be nested under the HTML's <style> tag.

When setting an element's style attribute, you only need to write the style properties. This is how it should look:

style="opacity:0;visibility:hidden;"

Your jQuery attempt to hide the logo should work when you remove the logo element's style tag. Doing $('#logo').hide(); should work and is enough.

A few notes:

  1. Using opacity:0; with visibility:hidden; doesn't make sense. Use either one of them, both make the element invisible.
  2. You can just write $('#logo').hide();, no need to the whole $("#logo").css({ section.
  3. You can shorthand $(document).ready(function(){ to just $(function() {
  4. Keep in mind using visibility:hidden; keeps the element inline the page, but invisible. If you want to make it disappear completely, use display:none;

Upvotes: 1

Related Questions