8 Replies - 1745 Views - Last Post: 11 December 2012 - 08:51 AM

#1 jensozzie  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 06-December 12

Need help with Java/CSS animation

Posted 06 December 2012 - 02:29 PM

Ok, so I'm working on a project for school, for which I have to create a website with HTML, CSS, Jquery and Java, the first 3 all work, the latter does not. After countless hours of Google searches and trial and error, I decided to try my luck here.

I have to get 3 rectangular, colored boxes with CSS (works so far), that change color when they are clicked (through Java, this part does not work).

The CSS is as follows:

#rood{
width:20px;
height:20px;
background-color:rgb(255, 0, 0);
position:absolute;
top:10px;
left:640px;
cursor:pointer;
}
#blauw{
width:20px;
height:20px;
background-color:rgb(0, 0, 255);
position:absolute;
top:40px;
left:640px;
cursor:pointer;
}
#groen{
width:20px;
height:20px;
background-color:rgb(0, 255, 0);
position:absolute;
top:70px;
left:640px;
cursor:pointer;
}



These are, respectively, a red, green and blue box.
The intention is that when the box on top (red in this example) is clicked, it changes to the color at the bottom, the middle one becomes red and the bottom one becomes the color the middle one was, in other words, each color has to move down one space, except for the one at the bottom, which goes to the top.
This has to work, no matter which box you click on.

So I got started on the Java, but this is where it gets complicated, as I have never worked with Java before, and my teacher tells us to Google it and look on w3schools. Sadly, I can't find any solutions here.

This is the code I have so far:

if($('#rood').css('background-color')=='rgb(255, 0, 0)')
{
('#rood').css('background-color')=='rgb(0, 255, 0)')
}
else
{
if($('#rood').css('background-color')=='rgb(0, 255, 0)')
{
}
else
{
if($('#rood').css('background-color')=='rgb(0, 0, 255)')
{
}
}
}


I have tried solving it with Jquery, with every Java command I could find, but I'm at a total loss. Anyone who could offer some help to at least get me started on finding a solution?

Much appreciated.

Jens

Is This A Good Question/Topic? 0
  • +

Replies To: Need help with Java/CSS animation

#2 macosxnerd101  Icon User is offline

  • Self-Trained Economist
  • member icon




Reputation: 10447
  • View blog
  • Posts: 38,690
  • Joined: 27-December 08

Re: Need help with Java/CSS animation

Posted 06 December 2012 - 02:40 PM

Note that jQuery is Javascript, a totally different language than Java. I'll move this to the jQuery forum for better visibility. :)
Was This Post Helpful? 0
  • +
  • -

#3 jensozzie  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 06-December 12

Re: Need help with Java/CSS animation

Posted 06 December 2012 - 03:37 PM

View Postmacosxnerd101, on 06 December 2012 - 02:40 PM, said:

Note that jQuery is Javascript, a totally different language than Java. I'll move this to the jQuery forum for better visibility. :)/>

Well, if that doesn't show my knowledge, I don't know what does :)
Was This Post Helpful? 0
  • +
  • -

#4 jensozzie  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 06-December 12

Re: Need help with Java/CSS animation

Posted 09 December 2012 - 09:33 AM

Ok, I worked on the code a little, and ended up getting the first click to work, the problem is, after that, it does nothing, and I can't find why, can anyone here see it?
if($('#rood').css('background-color')=='rgb(255, 0, 0)')
{
	$(".my_right_box").click(function(){
		$("#rood").css('background-color', 'rgb(0,255,0)')
		$("#blauw").css('background-color', 'rgb(255, 0, 0)')
		$("#groen").css ('background-color', 'rgb(0, 0, 255)')
		}
	);
	
}
else
{
if($('#rood').css('background-color')=='rgb(0, 255, 0)')
{
	$(".my_right_box").click(function(){
		$("#rood").css('background-color', 'rgb (0, 0, 255)')
		$("#blauw").css('background-color', 'rgb (0, 255, 0)')
		$("#groen").css('background-color', 'rgb (255, 0, 0)')
	}
	);
}
else
{
if($('#rood').css('background-color')=='rgb(0, 0, 255)')
{
	$(".my_right_box").click(function(){
		$("#rood").css('background-color', 'rgb (255, 0, 0)')
		$("#blauw").css('background-color', 'rgb (0, 0, 255)')
		$("#groen").css('background-color', 'rgb (0, 255, 0)')
	});
}
}
}


Was This Post Helpful? 0
  • +
  • -

#5 jensozzie  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 06-December 12

Re: Need help with Java/CSS animation

Posted 09 December 2012 - 12:26 PM

I tried 2 new ways, neither of which work... I'm really at a loss here.

First I tried a more Javascript approach..
function onclick
{
if($('#rood').css('background-color')=='rgb(255, 0, 0)')
{
$("#rood").css('background-color', 'rgb(0,255,0)')
		$("#blauw").css('background-color', 'rgb(255, 0, 0)')
		$("#groen").css ('background-color', 'rgb(0, 0, 255)')
		}
else
if($('#rood').css('background-color')=='rgb(0, 255, 0)')
{
$("#rood").css('background-color', 'rgb (0, 0, 255)')
		$("#blauw").css('background-color', 'rgb (0, 255, 0)')
		$("#groen").css('background-color', 'rgb (255, 0, 0)')
}
else

if($('#rood').css('background-color')=='rgb(0, 0, 255)')
{
	$("#rood").css('background-color', 'rgb (255, 0, 0)')
		$("#blauw").css('background-color', 'rgb (0, 0, 255)')
		$("#groen").css('background-color', 'rgb (0, 255, 0)')




Which didn't work, I'm sure this is clear to some of you why it doesn't work, but keep in mind, I don't know the first thing about Javascript.

Then I tried a similar approach to the one in the last post, but tagging a different div in the different lines of code, the result is sadly the same though..

$(document).ready(function(){
    $(".answer").toggle();
    $(".askme").live("click", function () {
        var el = $(this).parent();
        
        if (el.hasClass("min")) {
            el.removeClass("min").addClass("plus");
        } else {
            el.removeClass("plus").addClass("min");
        }
        $(".answer", el).toggle();
        return false;
    });
	 $("li").click(function(){
  $(this).css('color', 'blue')
  });
   $("li").click(function(){
  $(this).css('font-weight', 'bold')
  });
    if($('#rood').css('background-color')=='rgb(255, 0, 0)')
{
	$(".my_right_box").click(function(){
		$("#rood").css('background-color', 'rgb(0,255,0)')
		$("#blauw").css('background-color', 'rgb(255, 0, 0)')
		$("#groen").css ('background-color', 'rgb(0, 0, 255)')
		}
	);
	
}

if($('#blauw').css('background-color')=='rgb(255, 0, 0)')
{
	$(".my_right_box").click(function(){
		$("#rood").css('background-color', 'rgb (0, 0, 255)')
		$("#blauw").css('background-color', 'rgb (0, 255, 0)')
		$("#groen").css('background-color', 'rgb (255, 0, 0)')
	
	});
}

if($('#groen').css('background-color')=='rgb(255, 0, 0)')
{
	$(".my_right_box").click(function(){
		$("#rood").css('background-color', 'rgb (255, 0, 0)')
		$("#blauw").css('background-color', 'rgb (0, 0, 255)')
		$("#groen").css('background-color', 'rgb (0, 255, 0)')
}

)
}
}
)


Was This Post Helpful? 0
  • +
  • -

#6 amit.soni  Icon User is offline

  • D.I.C Head

Reputation: 26
  • View blog
  • Posts: 73
  • Joined: 19-November 10

Re: Need help with Java/CSS animation

Posted 10 December 2012 - 01:44 AM

are you looking for something like this...

http://jsfiddle.net/amit_7soni/ApGu9/
Was This Post Helpful? 1
  • +
  • -

#7 jensozzie  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 06-December 12

Re: Need help with Java/CSS animation

Posted 10 December 2012 - 12:18 PM

Yes, that is exactly what I need, thank you!

Just one question, how do I change that code so it scrolls down on click instead of up?
Was This Post Helpful? 0
  • +
  • -

#8 amit.soni  Icon User is offline

  • D.I.C Head

Reputation: 26
  • View blog
  • Posts: 73
  • Joined: 19-November 10

Re: Need help with Java/CSS animation

Posted 11 December 2012 - 04:40 AM

ok...
here's the another try.. this seems to be more easy...
if u find any problem ..let me know...

http://jsfiddle.net/amit_7soni/LcuAH/


Happy Coding :)
Was This Post Helpful? 1
  • +
  • -

#9 jensozzie  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 06-December 12

Re: Need help with Java/CSS animation

Posted 11 December 2012 - 08:51 AM

Thanks man, this is awesome. I'll edit your code to fit my webpage, then try to learn how it works so I can do it myself in the future. Thanks a ton.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1