Dynamic content

JavaScript
1

Hello,

I am new to web stuff, all I know is a little of HTML/CSS and a little more of PHP. Unfortunatelly I didn’t start learning JS yet and I need to do something with it now.

What I want to do is very simply use javascript to display some content dynamically.

So what I want to have is two links:

Link1 | Link2

When user clicks Link1, the pre-defined content1 displays bellow, when he clicks Link2, content1 is replaced by pre-defined content2.

Something like Tabs. Also, should I use AJAX to do this?

2

I just wrote something like this. It fades divs in and out without using a js library

Here’s the markup

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Opacity Rotator</title>


<link rel="stylesheet" type="text/css" href="css/opacity.css" />
</head>

<body>

<div id="stackcontainer">
    <div id="stack1">
        <img src="images/slide1.jpg" alt="slide 1" />
    </div>
    <div id="stack2">
        <img src="images/slide2.jpg" alt="slide 2" />
    </div>
    <div id="stack3">
        <img src="images/slide3.jpg" alt="slide 3" />
    </div>
    <div id="stack4">
        <img src="images/slide4.jpg" alt="slide 4" />
    </div>
</div>

<div id="nav">
    <div id="button1">
    	<a href="#" title="stack1" onclick="switchToStack('stack1')"><img src="images/button1.jpg" alt="button 1" /></a>
    </div>
    <div id="button2">
        <a href="#" title="stack2" onclick="switchToStack('stack2')"><img src="images/button2.jpg" alt="button 2" /></a>
    </div>
    <div id="button3">
    	<a href="#" title="stack3" onclick="switchToStack('stack3')"><img src="images/button3.jpg" alt="button 3" /></a>
    </div>
    <div id="button4">
    	<a href="#" title="stack4" onclick="switchToStack('stack4')"><img src="images/button4.jpg" alt="button 4" /></a>
    </div>
</div>

<script type="text/javascript" src="js/opacityfunctions.js"></script>
<script type="text/javascript">
	clearStacks();
	imgRotation();
</script>
</body>
</html>

And here’s the js

/************************************************
* Caution: This program sucks. Use at your own  *
* terrible horrible risk. You have been warned  *
* of the suck of this program.   			    *
*											    *
* p.s. yeah yeah there's global variables, get  *
* off my back MOM							    *
*************************************************/

function clearStacks() {
	var stack1 = document.getElementById("stack1");
	var stack2 = document.getElementById("stack2");
	var stack3 = document.getElementById("stack3");
	var stack4 = document.getElementById("stack4");	
	stack2.style.opacity = 0;	
	stack3.style.opacity = 0;	
	stack4.style.opacity = 0;	
}

function SetOpacity(elem, opacityAsInt) {
	var opacityAsDecimal = opacityAsInt;
	
	if (opacityAsInt > 100)
		opacityAsInt = opacityAsDecimal = 100; 
	else if (opacityAsInt < 0)
		opacityAsInt = opacityAsDecimal = 0; 
	
	opacityAsDecimal /= 100;
	if (opacityAsInt < 1)
		opacityAsInt = 1; // IE7 bug, text smoothing cuts out if 0
	
	elem.style.opacity = opacityAsDecimal;
	elem.style.filter  = "alpha(opacity=" + opacityAsInt + ")";
}

function FadeOpacity(elemId, fromOpacity, toOpacity, time, fps) {
	var steps = Math.ceil(fps * (time / 1000));
	var delta = (toOpacity - fromOpacity) / steps;
	
	FadeOpacityStep(elemId, 0, steps, fromOpacity, delta, (time / steps));
}

function FadeOpacityStep(elemId, stepNum, steps, fromOpacity, delta, timePerStep) {
    SetOpacity(document.getElementById(elemId), Math.round(parseInt(fromOpacity) + (delta * stepNum)));

    if (stepNum < steps)
        setTimeout("FadeOpacityStep('" + elemId + "', " + (stepNum+1) + ", " + steps + ", " + fromOpacity + ", " + delta + ", " + timePerStep + ");", timePerStep);
}

function switchToStack(stackId) {
	stopRotation();
	var currentStack = document.getElementById("stackId");
	FadeOpacity("stack1", 0.0, 0.0, 10, 10);	
	FadeOpacity("stack2", 0.0, 0.0, 10, 10);
	FadeOpacity("stack3", 0.0, 0.0, 10, 10);
	FadeOpacity("stack4", 0.0, 0.0, 10, 10);

	
	
	FadeOpacity(stackId, 30, 100, 500, 25);
	
}

var rotationIsOn = 0;
var tr, vr, ar, br, cr, dr, er, fr, gr;

function imgRotation() {
	
	if (!rotationIsOn) {
	rotationIsOn = 1;
	tr=setTimeout("FadeOpacity('stack1', 0.0, 100, 500, 20);", 1);  //fade in box 1
	vr=setTimeout("FadeOpacity('stack1', 100, 0.0, 200, 20);", 7000); //fade out box 1
	
	ar=setTimeout("FadeOpacity('stack2', 0.0, 100, 500, 25);", 7000); //fade in box 2
	br=setTimeout("FadeOpacity('stack2', 100, 0.0, 200, 20);", 14000); //fade out box 2
	
	cr=setTimeout("FadeOpacity('stack3', 0.0, 100, 500, 25);", 14000); //fade in box 3
	dr=setTimeout("FadeOpacity('stack3', 100, 0.0, 200, 20);", 21000); //fade out box 3
	
	er=setTimeout("FadeOpacity('stack4', 1.0, 100, 500, 25);", 21000); //fade in box 4
	fr=setTimeout("FadeOpacity('stack4', 100, 0.0, 200, 20);", 28000); //fade out box 4
	rotationIsOn = 0;
	gr=setTimeout("imgRotation()", 28050); //start the whole thing again
	}
};


function stopRotation() {
		
	tr = clearTimeout(tr);
	vr = clearTimeout(vr);
	ar = clearTimeout(ar);
	br = clearTimeout(br);
	cr = clearTimeout(cr);
	dr = clearTimeout(dr);
	er = clearTimeout(er);
	fr = clearTimeout(fr);
	gr = clearTimeout(gr);
	
	rotationIsOn = 0;
}

Good luck! :smiley:

3

Oh, and i should probably mention: by default it starts rotating when the page loads. to disable this, comment out “imgRotation();” in the HTML with a //

-Madison

4

Thanks. As I want it simpler I will just use bits of your code (no rotating/opacity).

Will tell how it goes.

5

Oh, for sure. I would expect you to hack it up; just be gentle! It wasn’t built to be robust. Just don’t change the links or the IDs of the divs and you should be alright.

Whatever is inside the divs however can 100% be changed.

6

Doesnt work for me.

7

anything more specific than “it doesn’t work”? any console errors?

8

Fixed it. The div needed style="display:block; and style="display:none; as well as to hide/show I used
document.getElementById(id).style.display = ‘none’;
and
document.getElementById(id).style.display = ‘block’;

9

oh yeah! forgot to give you the CSS file >< my bad