Can I make the click display property use transition?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Can I make the click display property use transition?

Post by simonmlewis »

....how? that's the funny thing about jFiddle, if you are not use to it, you see the code, but it doesn't show the jQuery to attach.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Can I make the click display property use transition?

Post by Celauran »

simonmlewis wrote:....how? that's the funny thing about jFiddle, if you are not use to it, you see the code, but it doesn't show the jQuery to attach.
It does. Click the cog in the JS pane. At least in this case, though, the particular version of jQuery doesn't much matter. Whatever you're already using on the site is probably fine.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Can I make the click display property use transition?

Post by simonmlewis »

Code: Select all

  <script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.js"></script>
  <script>
  $('.faq-tile input').change(function(event) {
	if ($(this).is(':checked')) {
  	$(this).parent().css('background-color', 'pink');
  } else {
  	$(this).parent().css('background-color', '#F5F5F5')
  }
});
  </script>
???
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Can I make the click display property use transition?

Post by Celauran »

You'll want to wrap it in a document ready, but that's the gist of it, yeah.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Can I make the click display property use transition?

Post by simonmlewis »

Sorry for being thick:

Code: Select all

  <script>
  var mydocument = function() {
  $('.faq-tile input').change(function(event) {
	if ($(this).is(':checked')) {
  	$(this).parent().css('background-color', 'pink');
  } else {
  	$(this).parent().css('background-color', '#F5F5F5')
  }
});}
  </script>
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Can I make the click display property use transition?

Post by Celauran »

Code: Select all

$(document).ready(function() {
    $('.faq-tile input').change(function(event) {
        if ($(this).is(':checked')) {
            $(this).parent().css('background-color', 'pink');
        } else {
            $(this).parent().css('background-color', '#F5F5F5')
        }
    });
});
or just

Code: Select all

$(function() {
    $('.faq-tile input').change(function(event) {
        if ($(this).is(':checked')) {
            $(this).parent().css('background-color', 'pink');
        } else {
            $(this).parent().css('background-color', '#F5F5F5')
        }
    });
});
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Can I make the click display property use transition?

Post by Celauran »

Again, though, you should probably have your JS split out into their own files and the various listeners grouped into a single doc ready block.

Code: Select all

$(document).ready(function() {
    // Stuff here...
    $('.faq-tile input').change(function(event) {
        if ($(this).is(':checked')) {
            $(this).parent().css('background-color', 'pink');
        } else {
            $(this).parent().css('background-color', '#F5F5F5')
        }
    });
    // More stuff down here...
});

Code: Select all

        ...
        <script src="//code.jquery.com/jquery-2.2.4.js"></script>
        <script src="/assets/js/your-script.js"></script>
    </body>
</html>
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Can I make the click display property use transition?

Post by simonmlewis »

gotcha ta.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
lucky_garg11
Forum Newbie
Posts: 7
Joined: Thu Oct 20, 2016 6:33 am

Re: Can I make the click display property use transition?

Post by lucky_garg11 »

Yes i appreciate with all information . w3school.com is also very informative site to get html, css, javascript knowledge..
Post Reply