JQuery/CSS Parent-Child Inheritance NIGHTMARE

Question

I am having a problem with trying to implement specific JQuery effects into a Bootstrap framework (with its already HUGE CSS that is creating problems).

I have created a sterile, test file called testjquery.html which works fine, connected to a stylesheet that defines a hidden element, and then activates the fade in of this element via JQuery. Here is CSS:

#homepageframex > div > h1 {
    display: none;
    width: 250px;
    margin; 20px;
    z-index:100;
}

And here is the HTML that connects to this CSS which works fine:

<!DOCTYPE html>
<!-- BEGIN HTML Document -->

<!-- BEGIN Head -->
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title></title>
    <link media="all" href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/customstylesheet.css" rel="stylesheet">


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


</head>
<!-- END Head -->

<!-- BEGIN Body -->
<body> 

<p><a href="#" class="fadein-link">Fade In</a></p>

<div id="homepageframex">
    <div><img src="images/photo1.jpg" height="2000" width="1014" alt="" class="img-responsive" />
    <h1 class="gillsanslight50pt" style="color: #53585f;">Test text here</h1>
</div>

</div>

<script type="text/javascript">

(function( $ ) {   // closure to prevent JQuery conflicts




    $('.fadein-link').click(function(){
        $('#homepageframex div h1').fadeIn(3000);



    });




})(jQuery);</script>

</body>
<!-- END Body -->

<!-- END HTML Document -->
</html>

Now this works fine. The problem is when I try to implement this same code into a very complicated Bootstrap layout:

<!-- BEGIN DIV for homepageframe1 -->
<div id="homepageframex" class="pad-section">
  <div class="container">
    <div class="row-fluid">

      <div id="content" class="col-xs-12 text-center">

       <h1 class="gillsanslight50pt" style="color: #53585f;">Test text here</h1>
      </div>
    </div>
  </div>
</div>
<!-- END DIV for homepageframe1 -->

And here is the corresponding JQuery code and CSS code changed for the nested DIV tags - but this doesn't work!! Does anyone know why?

<script type="text/javascript">

(function( $ ) {   // closure to prevent




    $('.fadein-link').click(function(){
        $('#homepageframex div div div h1').fadeIn(3000);


    });




})(jQuery);</script>


#homepageframex > div > div > div > h1 {
    display: none;
    width: 250px;
    margin; 20px;
    z-index:100;
}

Can anyone help and let me know why this is not working for me? What is it that is conflicting?

Thanks.

And here is the complete code of page that is not working:

<!DOCTYPE html>
<!-- BEGIN HTML Document -->

<!-- BEGIN Head -->
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title></title>
    <link media="all" href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/customstylesheet.css" rel="stylesheet">
    <script src="js/jquery.min.js" type="text/javascript"></script>



</head>
<!-- END Head -->

<!-- BEGIN Body -->
<body>
<!-- BEGIN NAV BAR -->
<div id="navigationbartop" class="pad-section">
      <div class="container" style="background-color: #FFFFFF;">
        <div class="row">

            <div class="col-xs-10 text-center"></div>

            <div class="col-xs-1 text-center">
                <a href="about.html" style="font-family: gillsanslight;"><p class="gillsanslight20pt" style="color: #3c3c3b;">About</p></a>
            </div>

            <div class="col-xs-1 text-center">
                <a href="contactus.html" style="font-family: gillsanslight;"><p class="gillsanslight20pt" style="color: #3c3c3b;">Contact Us</p></a>
            </div>
        </div>
      </div>
</div>
<!-- END NAV BAR -->

<!-- BEGIN HEADER -->
<!-- <header> -->
  <!-- BEGIN container for HEADER DIV -->
    <!-- BEGIN DIV for top header DIVs -->
    <div id="headerdivs" class="pad-section">
      <div class="container">
        <div class="row-fluid">
           <div class="col-xs-2 text-center">
             <p class="lead"></p>
           </div>

          <div class="col-xs-2 text-center">
             <p class="lead"></p>
           </div>     

          <div class="col-xs-4 text-center">
            <span class="logotop"><a href="index.html"><img src="images/logo.png" height="200" width="168" alt="" /></a></span>
          </div>

          <div class="col-xs-2 text-center">
            <p class="lead"></p>
          </div>

          <div class="col-xs-2 text-center">
             <p><a href="#" class="fadein-link">Fade In</a></p>
          </div>      
        </div>
      </div>
    </div>
    <!-- END DIV for top header DIVs -->
  <!-- END container for HEADER DIV -->
<!-- </header> -->
<!-- END HEADER -->



<!-- BEGIN DIV for homepageframe1 -->
<div id="homepageframex" class="pad-section">
  <div class="container">
    <div class="row-fluid">
      <div id="content" class="col-xs-12 text-center">
       <h1 class="gillsanslight50pt" style="color: #53585f;">Test text here</h1>
      </div>
    </div>
  </div>
</div>
<!-- END DIV for homepageframe1 -->

<!-- BEGIN DIV for arrow down1 -->
<div id="arrowdownX" class="pad-section">
  <div class="container">

    <div class="row-fluid">



      <div class="col-xs-5 text-center">
         <p class="lead"></p>
       </div>

      <div class="col-xs-2 text-center">
        <img src="images/arrowdown.png" height="90" width="68" alt="" class="img-responsive" />
      </div>

      <div class="col-xs-5 text-center">
        <p class="lead"></p>
      </div>


    </div>
  </div>
</div>
<!-- END DIV for arrow down1 -->


<!-- BEGIN DIV for homepageframe2 -->
<div id="homepageframe2" class="pad-section">
  <div class="container">
    <div class="row">
      <div id="testimage1" class="col-xs-12 text-center">
        <img src="images/photo1.jpg" height="2000" width="1014" alt="" class="img-responsive" />
        <p id="testtext1" class="gillsanslight40pt" style="color: #FFFFFF;">
            Test text here also
        </p>
      </div>
    </div>
  </div>
</div>
<!-- END DIV for homepageframe2 -->

<!-- BEGIN DIV for arrow down2 -->
<div id="arrowdown2" class="pad-section">
  <div class="container">

    <div class="row-fluid">



      <div class="col-xs-5 text-center">
         <p class="lead"></p>
       </div>

      <div class="col-xs-2 text-center">
        <img src="images/arrowdown.png" height="90" width="68" alt="" class="img-responsive" />
      </div>

      <div class="col-xs-5 text-center">
        <p class="lead"></p>
      </div>


    </div>
  </div>
</div>
<!-- END DIV for arrow down2 -->


<!-- BEGIN DIV for homepageframe2 -->
<div id="homepageframe2" class="pad-section">
  <div class="container">
    <div class="row">
      <div id="testimage2" class="col-xs-12 text-center">
        <img src="images/photo2.jpg" height="3000" width="1655" alt="" class="img-responsive" />
        <p id="testtext2" class="gillsanslight40pt" style="color: #FFFFFF;">
            Test text three
        </p>
      </div>
    </div>
  </div>
</div>
<!-- END DIV for homepageframe2 -->


<!-- BEGIN DIV for arrow down3 -->
<div id="arrowdown3" class="pad-section">
  <div class="container">

    <div class="row-fluid">

       <div class="col-xs-4 text-center">
         <p class="lead"></p>
       </div>

      <div class="col-xs-1 text-center">
         <p class="lead"></p>
       </div>

      <div class="col-xs-2 text-center">
        <img src="images/arrowdown.png" height="90" width="68" alt="" class="img-responsive" />
      </div>

      <div class="col-xs-1 text-center">
        <p class="lead"></p>
      </div>

      <div class="col-xs-4 text-center">
         <p class="lead"></p>
      </div>      
    </div>
  </div>
</div>
<!-- END DIV for arrow down3 -->


<!-- BEGIN DIV for homepageframe4 -->
<div id="homepageframe4" class="pad-section">
  <div class="container">
    <div class="row">
      <div class="col-xs-12 text-center">
        <img src="images/photo3.jpg" height="3000" width="1655" alt="" class="img-responsive" />
      </div>
    </div>
  </div>
</div>
<!-- END DIV for homepageframe4 -->

<!-- BEGIN DIV for arrow down4 -->
<div id="arrowdown4" class="pad-section">
  <div class="container">

    <div class="row-fluid">

       <div class="col-xs-4 text-center">
         <p class="lead"></p>
       </div>

      <div class="col-xs-1 text-center">
         <p class="lead"></p>
       </div>

      <div class="col-xs-2 text-center">
        <img src="images/arrowdown.png" height="90" width="68" alt="" class="img-responsive" />
      </div>

      <div class="col-xs-1 text-center">
        <p class="lead"></p>
      </div>

      <div class="col-xs-4 text-center">
         <p class="lead"></p>
      </div>      
    </div>
  </div>
</div>
<!-- END DIV for arrow down4 -->

<!-- BEGIN DIV for homepageframe5 -->
<div id="homepageframe5" class="pad-section">
  <div class="container">
    <div class="row">
      <div class="col-xs-12 text-center">
        <img src="images/photo3.jpg" height="3000" width="1655" alt="" class="img-responsive" />
      </div>
    </div>
  </div>
</div>
<!-- END DIV for homepageframe5 -->



<!-- BEGIN DIV for homepageframe7 -->
<div id="homepageframe7" class="pad-section">
  <div class="container">
    <div class="row-fluid">

       <div class="col-xs-4 text-center">
         <p class="lead"></p>
       </div>


      <div class="col-xs-4 text-center">
        <img src="images/logo_bottom.png" height="380" width="320" alt="" class="img-responsive" />
      </div>



      <div class="col-xs-4 text-center">
         <p class="lead"></p>
      </div>      
    </div>
  </div>
</div>
<!-- END DIV for homepageframe7 -->


<!-- BEGIN FOOTER -->
<footer>
  <!-- BEGIN container for NEWSLETTER DIV -->
  <div class="container">

    <!-- BEGIN DIV Newsletter -->
    <div id="newsletterX" class="pad-section">
      <div class="container">

        <div class="row">
          <div class="col-sm-12 text-center">
            <h3 class="gillsanslight28pt">Leave your e-mail address to find out more</h3>

          </div>

          <div class="col-sm-12 text-center" style="color: red;">
                <form class="form-horizontal">


                <!-- BEGIN DIV for Form Group Line 2 -->
                <div class="form-group">

                    <div class="col-xs-2">

                    </div>

                    <div class="col-xs-7">
                        <span><input type="email" class="form-control" id="contact-email" placeholder="[email protected]">

                    </div>

                    <div class="col-xs-1">
                       <input type="image" src="images/send.png" height="38" width="52" alt="Send" class="mybutton"></span>
                    </div>

                    <div class="col-xs-2">

                    </div>

                </div>
                <!-- END DIV for Form Group Line 2 -->
                </form>
          </div>
        </div>
      </div>
    </div>
    <!-- END DIV Newsletter section -->

  </div>
  <!-- END container for NEWSLETTER DIV -->


</footer>
<!-- END FOOTER -->



<!-- BEGIN JavaScript that WORKS rebuilt from individual parts from above script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="js/jquery.scrollmagic.js"></script>
<!-- <script src="js/main.js"></script>This causes the Google Map to disappear -->
<!-- END JavaScript that WORKS -->

<!-- BEGIN JavaScript for Font -->
<script type="text/javascript">
var MTUserId='5b20f3d6-ea3d-4870-9117-9e155b029f7b';
var MTFontIds = new Array();

MTFontIds.push("693341"); // Gill Sans® W01 Light 
MTFontIds.push("692628"); // Gill Sans® W01 Roman 
(function() {
var mtTracking = document.createElement('script');
mtTracking.type='text/javascript';
mtTracking.async='true';
mtTracking.src=('https:'==document.location.protocol?'https:':'http:')+'//fast.fonts.net/lt/trackingCode.js';

(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(mtTracking);
})();
</script>
<!-- END JavaScript for Font -->


<script type="text/javascript">

(function( $ ) {   




    $('.fadein-link').click(function(){
        $('#content').fadeIn(3000);
        //$('#c div').css({
        //  width:1000,
        //  height:1000,
        });


    });




})(jQuery);</script>

</body>
<!-- END Body -->

<!-- END HTML Document -->
</html>

Minor detail - you have a typo in your css: margin; 20px; should be margin: 20px; — matthias_h
– matthias_h, Commented Dec 28, 2014 at 19:34
Hi, I found the edit option. I reposted the code (i.e. the complete page) below the pieces of code that I showed as example for easy reference. The JQuery is not included twice. It is once on each page (i.e. test page + regular page). — Jerusalem Programmer
– Jerusalem Programmer, Commented Dec 28, 2014 at 20:36
I removed the reference to the Jquery.min.js file - still not working, so this is not the problem. — Jerusalem Programmer
– Jerusalem Programmer, Commented Dec 28, 2014 at 20:47

Community · Accepted Answer · 2017-05-23 10:29:58Z

1

I just set up a bootply with your code - Bootply - and it's working after removing the 'closure to prevent' comment from

(function( $ ) {   // closure to prevent

I've added a <div class="fadein-link">fade in</div> to trigger the fade-in.

Update:
To summarize additional information from comments after the complete html having the issue was added in the OP: jquery was included twice, once in the header (as js/jquery.min.js so it's not possible to know which version), and once in the footer as <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>.

Though it's possible to use different versions of jQuery - for details check http://api.jquery.com/jquery.noconflict/ - it's not recommended and maybe isn't necessary at all. It could be necessary to use 2 different jQuery versions. e.g. if included plugins would only work with a specific version, but this doesn't seem to be the case. Removing one of the jquery.js includes didn't solve the issue.

If not already done, I recommend to check if there are any javascript errors by opening the web developer tools, as previously there must have been some errors because of e.g. additional closing )}; which was already removed.
If unfamiliar with web dev tools, find some details for Firefox here: https://developer.mozilla.org/en-US/docs/Tools/Web_Console and for Chrome here: https://developer.chrome.com/devtools/docs/console

Additional test could be to include the jquery/jquery.ui/bootstrap version from the working bootply instead of the current includes:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

Aside - Because OP is new to SO - extended discussions should be avoided, for details https://meta.stackexchange.com/questions/95937/why-must-we-avoid-discussions-in-comments. It's possible to move such an extending discussion from the comments to chat, but it's necessary to have at least 20 reputation for that. Just as explanation as I'm deleting some of my comments to clean this up (which OP could do, too).

edited May 23, 2017 at 10:29

CommunityBot

11 silver badge

answered Dec 28, 2014 at 19:56

matthias_h

11.4k9 gold badges24 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Jerusalem Programmer Over a year ago

Thanks for the comment. However, this JQuery/JavaScript comment does not affect either the working TESTJQUERY.HTML file (i.e. it still works), and neither does it affect the code as I have given here.

matthias_h Over a year ago

@JerusalemProgrammer Then it's not easy to figure out what's happening because the bootply contains all html, css and js given in your question. Problem has to be somewhere else. You e.g. don't get any console errors?

Jerusalem Programmer Over a year ago

Yes, indeed, the problem is somewhere else that I can't figure out. I just tested out the code as you isolated it, and yes, this does work also for me in the test file...the issue is that there is a conflict somewhere that I can't figure out what is causing it. Complete code is above. Any ideas? Thanks.

matthias_h Over a year ago

@JerusalemProgrammer If the above code is complete, than the error could be that you maybe don't include the bootstrap.js.

Jerusalem Programmer Over a year ago

sorry, not complete - I only gave you relevant code. Let me see about providing complete code in a couple of minutes.

|

Collectives™ on Stack Overflow

JQuery/CSS Parent-Child Inheritance NIGHTMARE

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related