Hi Guys.

I posted a thread on another website and the people on it are not really helping me with my problem.

I am just being given vague and not very 'to the point' answers.

Please bear in mind I am a jQuery newbie.

So if you can just give nice simple answers it would be really helpful.

Here is a link to my thread.

http://www.webdeveloper.com/forum/showthread.php?364927-jQuery-Won-t-work-in-firefox-but-will-work-in-other-brwosers-Plz-help!

... Could you please have a read of it and let me know how I can fix the problem I am having

Paul.

    What's supposed to trigger your opacity transition?

      Its hard to tell you what the exact code is.

      If you go tools -> web developer -> page source

      ...... all the code is there.

      I haven't put any of the JavaScript stuff inside the head element because (for what ever reason) it won't work.

      I had to put it at the bottom of the body element:

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
      <script src="js/jquery.waypoints.min.js"></script>
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src="js/bootstrap.min.js"></script>

          <script type="text/javascript">

	var $dipper = $('.topadvert');
	$dipper.waypoint(function () {
	$dipper.addClass('js-dipper-animate');
	}, { offset: '80%'});


	var $dipper2 = $('.topadvert2');
	$dipper2.waypoint(function () {
	$dipper2.addClass('js-dipper-animate2');
	}, { offset: '80%'});

      </script>

      And these are the HTML elements which are being targeted:

      <div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 topadvert" style="border: 1px solid black; border-radius: 15px; text-align: center; margin-top: 30px;">

      <div style="padding-top: 30px; padding-bottom: 20px;" id="topadvert">
      <p style="font-size: 20px; font-weight: bold; font-family: century gothic; color: black;">A Leading 'Soda Blasting' Company In Manchester!</p></div>
      </div>

      .................. which doesn't work in firefox

      and:

      <div class="col-lg-5 col-lg-offset-1 col-md-5 col-md-offset-1 col-sm-10 col-sm-offset-1 topadvert2">
      <p style="font-size: 25px; color: #00f; line-height: 150%; font-family: century gothic;" class="sidetext">Soda blasting is the answer to difficult cleaning problems. Delicate fixtures and glass cannot be sandblasted or media blasted because of etching.</p>
      </div>

      .............. which does work in firefox.

      And below is the asscioted css:

      .topadvert {
      display: block;
      opacity: 0;
      transition: all 1000ms ease-in;
      }

      .js-dipper-animate {
opacity: 1;
}




.topadvert2 {
display: block;
opacity: 0;
transition: all 1000ms ease-in;
}

.js-dipper-animate2 {
opacity: 1;
}

      Its making me pull my hair our!

      Works in every browser apart from firefox

      What am I doing wrong?

        I see it both in Chrome and in Firefox here. Firefox fades in real quick, some people might not notice the fade.

          Thanks man.

          I checked it on my mum's computer and it worked on hers!

          I even tried uninstalling firefox and re-installing it and it still doesn't work the way it should.

          By the way -- I am viewing it on a pc laptop and I have windows 10.

          It seems to me like a browser issue.

          Do you think I need to change a setting in my browser?

            Write a Reply...