[jensozzie]

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

[macosxnerd101]

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

[jensozzie]

macosxnerd101, 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

[jensozzie]

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)')
	});
}
}
}

[jensozzie]

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)')
}

)
}
}
)

[amit.soni]

are you looking for something like this...

http://jsfiddle.net/amit_7soni/ApGu9/

[jensozzie]

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?

[amit.soni]

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

[jensozzie]

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.