4
\$\begingroup\$

I'm just beginning web design, and I've come up with this code to scroll to a place in the same page.

I don't know if this can or should be improved much longer, so I'm asking for any tips that can make this code better.

I know it's messy, but I will clean it later. I just want to know if there's a better method.

$(document).ready(function(){
$('#Tecnologia').click(function(){
$(".ConHome").css('transition','all 0.4s ease');
$(".ConHome").css('transform','translateY(-50em)');
$("#BlankSpaceMenu").css('transition','all 0.4s ease');
$('#BlankSpaceMenu').css('transform','translateY(-50em)');
$(".ConTech").css('transition','all 0.4s ease');
$(".ConTech").css('transform','translateY(-50em)');
$(".TopHeader").css('transition','all 0.4s ease');
$(".TopHeader").css('border-bottom-color','rgba(0,0,255,1)');
})})
#BlankSpaceMenu{
position:relative;
height:7em;
width:100%;
background-color:rgba(0,0,255,1);
z-index:9;
}
.Container{
position:relative;
color:rgba(255,255,255,1);
}
.TopHeader{
 position:fixed;
background-color:rgba(255,153,0,1);
color:rgba(255,255,255,1);
height:7em;
width:100%;
z-index:10000;
border-bottom:rgba(0,0,0,1) dashed 10px;
}
.ConHome{
position: relative;
background-color: rgba(0,0,0,1);
color: rgba(255,255,255,1);
height: 50em;
width: 100%;
z-index:10;
}
.ConTech{
position: relative;
background-color:rgba(0,0,255,1);
color:rgba(255,255,255,1);
height: 50em;
width: 100%;
z-index:8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
<section class="Container">
<header class="TopHeader">
<nav id="NavBar">
<a id="Tecnologia">Tecnologia</a>
</nav>
</header>
<article class="ConHome">
....	
</article>
<section id="BlankSpaceMenu">
</section>
<article class="ConTech">
...
</article>
</section>
</body>

\$\endgroup\$
  • \$\begingroup\$ Is there are reason why you wouldn't want to move the whole .Container that contains #Tecnologia instead? \$\endgroup\$ – 200_success Dec 26 '13 at 18:20
  • 1
    \$\begingroup\$ Why not just toggle a class on and off and do your transitions in CSS? \$\endgroup\$ – elclanrs Dec 27 '13 at 3:33
  • \$\begingroup\$ @200_success I did that once on another site. I'm trying to use a new perspective this time... \$\endgroup\$ – Raph Turtle Dec 27 '13 at 19:22
  • \$\begingroup\$ @elclanrs I've tried that but the transitions weren't smooth enough... I've got a tip to shrink the code, using CSS selectors efficiently (that actually was a reply to this same question). You know those scrolls where the menu is fixed and the page goes up when you click the link? I wonder if there's a way to do that using the minimum coding possible... \$\endgroup\$ – Raph Turtle Dec 27 '13 at 19:28
4
\$\begingroup\$

You should declare these styles into classes, and use jQuery to toggle the classes. That way, you have good "separation of concerns". You end up with a smaller base code.

Additionally, one should not use the all for transition. It's bad for performance. Ideally, one should just indicate what property to transition.

There's also this neat trick that forces CSS to be hardware-accelerated. However, you should use it carefully. I read that there's drawbacks to excessive use, and instead of performance gains, you lose performance.

With what I know, here's how you can optimize that animation code:

CSS:

#BlankSpaceMenu.transition, 
.ConHome.transition, 
.ConTech.transition,
.TopHeader.transition{
  transition : all 0.4 ease
}

#BlankSpaceMenu.transform,
.ConHome.transform,
.ConTech.transform{
  transform : translateY(-50em)
}

.TopHeader.transform{
  border-bottom-color : rgba(0,0,255,1)
}

JS:

$(function () {

  // Cache the set, assuming they don't change.
  var animationSet = $('.ConHome, #BlankSpaceMenu, .ConTech, .TopHeader');

  $('#Tecnologia').click(function () {
    animationSet.addClass('transition transform');
  });

});
\$\endgroup\$
  • \$\begingroup\$ Hi Joseph! Thanks for the help. I liked specially the JS trick. That helped me save some lines of code. \$\endgroup\$ – Raph Turtle Jan 26 '14 at 19:31
4
\$\begingroup\$

As an addition to Joseph's answer some thoughts on your HTML/CSS.

HTML:

  • You use the section element as a container for your main content. This inappropriate. There is a HTML5 element just for that purpose: <main>.
  • You have an empty section element in between some articles. What is its purpose?

CSS:

  • I recommend you not using ID's for navigation items. Do you know about CSS specificity? The main culprit of ID's is their higher specificity. This means a rule #Tecnologica can't be overwritten by .TopHeader a.
  • You have quite a big problem with using rgba() with no transparency at all. Don't do this! Basically all browsers (rgba() will just ignore this declaration and therefor won't have a change in colors.

    If you have a declaration like rgba(255,255,255,1) you just need to change it to its hex format: #fff.

  • Also since writing hex-based color values is short as opposed to rgb() just use the hex values for colors if you don't need transparency.

  • Why are you using the position property so much? What are you trying to achieve? Can you give us a little demo?
\$\endgroup\$
  • \$\begingroup\$ Hello @kleinfreund! Thanks for the comments. About the section element, I really didn't know the main element, guess I've never paid attention to it. I was trying to use the other empty sections as targets for a scroll animation, but that didn't work quite well and I ended up using a the jQuery slide function. \$\endgroup\$ – Raph Turtle Jan 26 '14 at 19:37
  • \$\begingroup\$ About the CSS: Alphas are for background images I was planning to use. Positions, well, I was trying to make a website with fixed header and footer, and, when the user clicks the link, the pages would switch in between them, I had trouble with making them fit the end of the header. \$\endgroup\$ – Raph Turtle Jan 26 '14 at 19:50
  • \$\begingroup\$ About the color declarations, is it faster to use #fff or rgb(255,255,255)? (just a curiosity). \$\endgroup\$ – Raph Turtle Jan 26 '14 at 19:51
3
\$\begingroup\$

Another adition to Joseph answer

You don't really need to set the transition property in the CSS at the moment.

If you are not planning to make the changes in the element not transitioned at any time (and in your posted code you aren't), just leave the

transition: transform 0.4s ease; 

declaration permanently in the CSS.

\$\endgroup\$
2
\$\begingroup\$

I skimmed the answers and I haven't seen anyone mention this yet.

Please INDENT YOUR CODE

You need to indent your code, right now it is hard to read.

Take a look at this compared to your code

<body>
  <section class="Container">
    <header class="TopHeader">
      <nav id="NavBar">
        <a id="Tecnologia">Tecnologia</a>
      </nav>
    </header>
    <article class="ConHome">
        ....    
    </article>
    <section id="BlankSpaceMenu">
    </section>
    <article class="ConTech">
        ...
    </article>
  </section>
</body>

CSS

#BlankSpaceMenu{
    position:relative;
    height:7em;
    width:100%;
    background-color:rgba(0,0,255,1);
    z-index:9;
}
.Container{
    position:relative;
    color:rgba(255,255,255,1);
}
.TopHeader{
    position:fixed;
    background-color:rgba(255,153,0,1);
    color:rgba(255,255,255,1);
    height:7em;
    width:100%;
    z-index:10000;
    border-bottom:rgba(0,0,0,1) dashed 10px;
}
.ConHome{
    position: relative;
    background-color: rgba(0,0,0,1);
    color: rgba(255,255,255,1);
    height: 50em;
    width: 100%;
    z-index:10;
}
.ConTech{
    position: relative;
    background-color:rgba(0,0,255,1);
    color:rgba(255,255,255,1);
    height: 50em;
    width: 100%;
    z-index:8;
}

jQuery

$(document).ready(function(){
    $('#Tecnologia').click(function(){
        $(".ConHome").css('transition','all 0.4s ease');
        $(".ConHome").css('transform','translateY(-50em)');
        $("#BlankSpaceMenu").css('transition','all 0.4s ease');
        $('#BlankSpaceMenu').css('transform','translateY(-50em)');
        $(".ConTech").css('transition','all 0.4s ease');
        $(".ConTech").css('transform','translateY(-50em)');
        $(".TopHeader").css('transition','all 0.4s ease');
        $(".TopHeader").css('border-bottom-color','rgba(0,0,255,1)');
    })
})
  1. Much more readable
  2. Easier to debug
  3. When(if) you switch to Python (or VB) where there are no line terminators it is mandatory to use indentation (or Newlines) so that the compiler knows what is going on.
  4. If you need your JavaScript minified for some reason, get an application to do it for you, so that you don't fall into bad coding habits.
  5. Other people will be able to read your code with no issues if you keep similar formatting to the standards.
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.