SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: Dynamic content

  1. #1
    SitePoint Zealot
    Join Date
    Feb 2010
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dynamic content

    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. #2
    SitePoint Member
    Join Date
    May 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just wrote something like this. It fades divs in and out without using a js library

    Here's the markup

    Code:
    <!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


    Code:
    /************************************************
    * 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!

  3. #3
    SitePoint Member
    Join Date
    May 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Zealot
    Join Date
    Feb 2010
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. As I want it simpler I will just use bits of your code (no rotating/opacity).

    Will tell how it goes.

  5. #5
    SitePoint Member
    Join Date
    May 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jan1024188 View Post
    Thanks. As I want it simpler I will just use bits of your code (no rotating/opacity).

    Will tell how it goes.
    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&#37; be changed.

  6. #6
    SitePoint Zealot
    Join Date
    Feb 2010
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Doesnt work for me.

  7. #7
    SitePoint Member
    Join Date
    May 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    anything more specific than "it doesn't work"? any console errors?

  8. #8
    SitePoint Zealot
    Join Date
    Feb 2010
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #9
    SitePoint Member
    Join Date
    May 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh yeah! forgot to give you the CSS file >< my bad


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •