[jQuery] Clicking a div, doesn't resize it's child

[Aeonix]

https://jsfiddle.net/fg1mfn2m/2/

I don't understand jQuery. Or any programming language for that matter.

I'm trying to get to resize a child of a div, as soon as said DIV is clicked. Nothing is triggered. Except my nerves. Previous time I asked for help of jQuery, I got the right code (which required few changes), but unfortunately no explanation why my code sucked.

So please, this time when you provide solution, could you tell where I messed up? I won't learn from copy-pasting code, I will improve if I will detect problem by it's description. Thanks.

[jkon]

Hello Aeonix. I strongly believe that programming is a great way to build character. To become patient , to read and study but always making your own tests , an endless exploration journey. Moving to your question , you don't have any reason to share code from fiddles here , daniweb has an excellent code / code snippet editor.

The answer is quite simple and I will give it right away and then I have some comments
you wrote:

    $(this).children("span.display_1_title").animate({"font-size": "2em", "padding": "1%"}, 800);

this is inside a $("div.projects").click(function (){}); block
So does div.projects have childrens that are span.display_1_title ? No . When we say "childrens" in DOM we mean exactly down of them in the DOM tree (it couldn't be any other way).

A div.projects in your example has a div as a children that it has a span.display_1_title as its own children , so it will be:

$(this).children("div").children("span.display_1_title")

That is the answer but lets move in things that might make your life easier. First of all you don't have any reason to alert all the time , there is the window.console.log that you can log what ever you like. You could even make a function lets call it _l to make it easier , e.g:

function _l(msg)
{
    window.console.log(msg);
}

Don't use jQuery animate when you don't have any reason to, now we have transition in CSS. Lets see your example with transitions , e.g:
CSS:

div.projects {
    background-color: black;
    color: #FFF;
    font-family: "Calibri";
    padding: 2%;
    cursor: default;
    transition:height 800ms ease-in;
    -webkit-transition:height 800ms ease-in;
}

div.projects span.display_1_title
{
    transition:all 800ms ease-in;
    -webkit-transition:all 800ms ease-in;   
}

div.projects.on {
    height: 140px;
}

div.projects.on span.display_1_title
{
    font-size: 2em;
    padding: 1%;
}

JS:

$(document).ready(function()
{
    $("div.projects").click(function()
    {
        $(this).addClass("on");
    });
});

I didn't changed anything in your code , just separate the concerns , use CSS inside a CSS file as mutch as it is possible to do so avoiding to have it inside JS

Previous time I asked for help of jQuery, I got the right code (which required few changes), but unfortunately no explanation why my code sucked.
So please, this time when you provide solution, could you tell where I messed up? I won't learn from copy-pasting code, I will improve if I will detect problem by it's description. Thanks.

I'm assuming that this is directed at me, from trying to help with the .animate() method. I think I isolated the issue for you, but I'm not a js freak so couldn't explain further. Good luck with it.

[Aeonix]

you don't have any reason to share code from fiddles here , daniweb has an excellent code / code snippet editor.

Link on Fiddle.NET, allows clicking a link and immediately showing the effect. Posting code on DaniWeb kind of forces people to copy 3 chunks of code from 3 different boxes into 3 different files they manually have to make up, and then manually add links from one another (linking them together).

$(this).children("div").children("span.display_1_title")

Oh, I thought $(this).children("span.display_1_title") stood for this span.display_1_title { }.

Don't use jQuery animate when you don't have any reason to, now we have transition in CSS. Lets see your example with transitions , e.g:

Are there any performance issues to this? I still feel like doing animate({}). It's there for a reason. If your method (which is absolutely correct and fine, don't mind me) would be better than animate({}) what would be reason to have animate({}) at all? What would be reason for using your method over animate({}) and vice versa?

Also, thanks you told me that jQuery .addClass() is able to animate transition:; in CSS. Didn't know that. Also, YOU CAN STACK CLASSES IN CSS?!?!? Wow! Didn't know that.

[jkon]

If your method (which is absolutely correct and fine, don't mind me) would be better than animate({}) what would be reason to have animate({}) at all? What would be reason for using your method over animate({}) and vice versa?

Ok , lets take it one by one. JavaScript is a client side programming language , jQuery is a framework written in JavaScript (one of many) , CSS is Cascading Style Sheets and it is the way we can format styles inside our DOM , DOM is Document Object Model. There is no “antagonism” between those , each one serves a different purpose.

Once upon a time (not very long time ago) there weren't transitions in CSS. What we done then was to create our own or / and use a JavaScript framework like jQuery to manipulate a specific DOM element style. That had two main downside effects (many , but I will stick to two).

First and most important , it wasn't clean. You had CSS inside your JS files. It was mixed with JS code , just to understand why a DOM element changed position you would have to find out where in the JS code you have done that. Except for maintenance problems , you were spending a lot of time programming in JS how DOM elements should change styles. After CSS3 all that have gone away (in most cases) and now you can write clean and easy readable code in both JavaScript and CSS , and separate concerns.

Of course there is also the performance issue , but I don't find it nowhere as close as the “clean code” issue. Forcing JS to make all those calculations each time you do something really simple (e.g. move over a button) doesn't make any sense. But as I wrote this is not as important as to learn for what is JavaScript for and for what is CSS.

And closing few comments , don't you want to use DaniWeb code editor (you could just have a line above that this is CSS , this is JS , this is HTML (not that is needed)) don't use it , I can't speak for anybody else but I personally thought that you didn't knew it , if I knew that you know it but you don't care I wouldn't care also to reply.

If you haven't understood an answer ask more about it, in each own context , there was no reason for that “Previous time I asked for help ...” . Did you asked for explanations than and none given ? You wrote about your nerves , we are here to help in a calm and joyful environment , I got it as humor and its fine with me , but just think that this is a community after all.