Explore our sites

Stack Exchange
tour help careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

I am still new to javascript (not to mention a designer, certainly not developer) so bear with me.

I wanted to use some random numbers in my CSS, and the only way I could find that fit the bill was to incorporate some Javascript to generate the random numbers and then modify the CSS. The idea is to get some slides to animate into view, rotate on hover, and animate away when clicking on another category.

I've managed to get it working in my document, both on load and called from buttons on click, but the only way I can get it to work is if I write out the full code for each instance. Each time it is the same, so when I need to change something, say a transition time, I have to do it over and over in multiple locations. It works for now but is certainly not ideal.

I wont put the full code in here (because it's absurdly long), but here's an example. I have this:

$(function() {
  $("#printLink").click(function() {

    $(".print").each(funtion() {
      $(this).css({
        "left":(Math.floor(Math.random()*10)-5),
        "bottom":(Math.floor(Math.random()*10)-5),
      });
    });

    $(".web, .motion").each(funtion() {
      $(this).css({
        "left":(Math.floor(Math.random()*200)-100) + '%',
        "bottom":(Math.floor(Math.random()*500)+500),
      });
    });

  });
});

Okay, so there's a button #printLink and separate groups of slides with classes .print, .web, and .motion (in the demo link below there are no slides in the motion section). The idea is that when I click on #printLink that the .print slides will move into view and the .web and .motion slides with move off screen. Like I said, I already have all of this working, but I have to specify all of the CSS again and again.

What I'd like to have is something like:

function moveIn(){
  $(this).css({
    "left":(Math.floor(Math.random()*10)-5),
    "bottom":(Math.floor(Math.random()*10)-5),
  });
}

function moveOut(){
  $(this).css({
    "left":(Math.floor(Math.random()*200)-100) + '%',
    "bottom":(Math.floor(Math.random()*500)+500),
  });
}
$(function() {
  $("#printLink").click(function() {
    $(".print").each(function() {
      moveIn();
    });
    $(".web, .motion").each(function() {
      moveOut();
    });
  });
});

This way I can just reference the same string of CSS each time, and minimize the chance for mismatched code.

Here's a reference link to give you a better idea of what I'm talking about.

share|improve this question
 
There's a typo here: funtion –  Asad Oct 30 '12 at 18:07
 
Good catch, and you're right, but it's not that way in my code. I had to re-write it in order to post. –  Eric Conrad Oct 30 '12 at 18:48
add comment

2 Answers

up vote 0 down vote accepted

Also, what's wrong with:

$(function() {
  $("#printLink").click(function() {
    $(".print").each(moveIn);
    $(".web, .motion").each(moveOut);
  });
});

the two functions you defined should work perfectly.

share|improve this answer
 
This did the trick. Cheers! –  Eric Conrad Oct 30 '12 at 19:03
add comment
up vote 0 down vote

If you want to embrace CSS3, and didn't have the need for random numbers, you could handle this with a few classes in your CSS...

.print, .web { 
    display: absolute;
    top: 500px; left: -1000px; 
    opacity: 0.0;
    -webkit-transition: all 0.5s ease-in-out; 
}
.printOn, .webOn { 
    top: 0px; left: 0px; 
    opacity: 1.0;
}

Then your links can just toggle these classes...

$(function() {
    var $print = $('.print'), $web = $('.web');
    $("#printLink").click(function(e) {
        $print.addClass('printOn');
        $web.removeClass('webOn');
        e.preventDefault();
    });
    $("#webLink").click(function(e) {
        $web.addClass('webOn');
        $print.removeClass('printOn');
        e.preventDefault();
    });
});

Note: The "transition" property is not very well supported as of this writing. But even in a browser that doesn't support it, the links should be shown and hidden - just without any animation.

share|improve this answer
 
Thanks,Luke. I was trying to stick with just CSS, but the random numbers were something I really wanted. The CSS the Javascript controls uses CSS3. And you're right, in non CSS3 browsers the slides "teleport" rather than animate. –  Eric Conrad Oct 30 '12 at 19:05
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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