Well, hmm. Let’s see. A quick Google fixed this for me!

There is one CSS style that is required for .tabs() to work. It takes care of the hiding of non active tabs.

/*tabs
------------------------*/
.ui-tabs .ui-tabs-hide {
display: none;
}


Also, to get the tabs to line up horizontally, use a CSS style that says display: inline.

#rinatabs li {display:inline; padding:5px;}

function whatClicked(x) {
//z=(x) //this line works
//clickResult=alert("you clicked " + z) //this line works
x=parseInt(x); // see the value passed as a number
switch (x)
{
case 1:
alert("you clicked 1");
break;
case 2:
alert("you clicked 2");
break;
case 3:
alert("you clicked 3");
break;
case 4:
alert("you clicked 4")
break;
default:
alert("oops");
}
}

To use the switch with the x value that is being set in the a tag, the switch statement must be used in the same code block of the function that finds the value of x. So, basically, contain the swtich within the function. Also, the x=parseInt(x) line makes the value from the a tag that was clicked and sees it as a number instead of a string. So, if you passed the string “1abc” from the onclick in the a tag to the whatClicked function, using parseInt() would use only the number from that string.

The alerts within the switch cases will be replaced with the functionality I originally meant. This is just for testing. Now that I know it works to this point, I will begin adding some jQuery to take the bigSquare and move it around and resize when the a tags are clicked.

$(document).ready(function() {
$('#content1').hide();
});

//var bigSquareOrigin=$('.bigSquare').animate({left:"40%", top:"40%"})

// get a value from the a tag that will replace x
function whatClicked(x) {
//z=(x) //this line works
//clickResult=alert("you clicked " + z) //this line works
x=parseInt(x);

// if that x value equals one of these cases, do something and stop.
switch (x)
{
case 1:
$('.bigSquare').animate({left:"0px", top:"0px"}, function(){
$('#content1').show("slow");
})

break;
case 2:
alert("you clicked 2");
break;
case 3:
alert("you clicked 3");
break;
case 4:
alert("you clicked 4")
break;
case 5:
$('#content1').hide("fast", function(){
$('.bigSquare').animate({left:"40%", top:"40%"});
});

break;
default:
alert("oops");
}
} // end of function whatClicked

So, I got everything working the way I want. But, in case 1 of the switch, the animation of the big square and the showing of the content were happening at the same time. I needed to separate the effects in order to achieve a result that moved the big square first, then proceeded to show the content box.

Luckily, there is a way. You simply type a comma after the last animate bracket and write a function that contains the second part of the case. So, for my desired effect, I simply moved the showing of the content box into an inner function and it suddenly behave exactly as I intended.

Variable
if comparison
what to do if it IS true
what to do otherwise, if it IS NOT true.

if (comparison)
{what to do if comparison is ture }
else {what to do if comparison is false }

So, basically, the following examples sets values in javascript functions.

In the first function, we set up a function called “myMsg” and in parenthesis we put a placeholder for a value. We give that placeholder a value from one of the html elements. We do this by setting the html input element to reference “form.text1.value”. This comes from the parent object, “form” in this case. Then the value of the “name” attribute within the input element that we want to look at. Then we say “value”, which says “pull the value of” the element we’ve looked at.

So, we type something in the text field and hig Show Me. We get an alert that contains what we entered into the text field. Upon typing something in that field, we gave it a value. The javascript function contains code that says “give me an alert” and that alert will contain the value the user puts in the field.

Similarly, the second function contains code that says “set the document background to what the user types in the field”.

def my_javascript_snippet
  blog_post.should(be_highlighted)
end

Click to enlarge