Having problem on tabbed menu plugin with images and not clock working together

I'm having a problem getting the tab widget to work the way I need it to. It works fine as long as all I have is text, clock and box fade out, in and move but when I add a looping 3 image display, strange things happen. First, the images are on all the tab pages, not just the one <div> I put them in and the images and the clock doesn't work together at all. I use the widget as the navigation of my site and each page has certain functions that need to happen. I added a tab, so there's 4 tabs. First tab is just text and no problem. 2nd tab is text and the image loop that causes problems, 3rd tab is a from with no problem and the 4th tab is where the fade out, move and fade in boxes are and move on click. The only problem here is that when I click the button to apply the box actions, the whole tabs widget moves right as well as the box. I can live with that as this is just a prototype. There is also a header that contains the clock and a footer. My question is how do I get the image loop to work nicely with everything? Is there some way that I can just call the images on load for that tab only? And if so, how would I do that? And will that knock out my clock if I call the images? I really like this plugin, it's short, simple to the point, and it looks good. I just hope I can get everything I want included to work together. Thank you for your help.

Whoops! I seem to be missing something to get your help with this. Here is the code for the 3 problems I am dealing with. It has the header, where the clock is, the jQuery plugin for the tab menu, the image loop, and the box actions. First, you'll notice that the clock isn't working, next you'll notice that the images are under the tab section above the footer instead of just on the about tab, and next you'll notice if you click the button to animate the boxes, the entire tab menu moves to the right, not just the box that's animated. Any ideas on how to fix this?

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />

<div class="container">
<div class="header"><center><a href="#header"><img src="header.jpg" align="middle" alt="Insert Logo Here" name="Insert_logo" width="400" height="150" id="Insert_logo" style="background: #C6D580; display:block;" /></a></center>
    <center><font color="navy", size="4">Reset Your Life At Overcoming Obstacles!</font></center>

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<BODY onLoad="startclock()">

<form name="clock" onSubmit="0">
<INPUT TYPE="text" NAME="face" SIZE=11 VALUE ="....Initializing....">
</form>
<p>Isn't it time <strong>YOU</strong> make a change?</p>
    </div>

<title>brunson index</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#gallery">Gallery</a></li>
</ul>

<div id="home">
</div>

<div id="about">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
    var pictureArchive = ['image1.jpg', 'image2.jpg', 'image3.jpg'];

    window.onload = function () {
        var o = document.createElement('img');
        o.setAttribute('id', 'image');
        o.setAttribute('src', pictureArchive[0]);
        o.setAttribute('alt', '');
        document.body.appendChild(o);
        rotate(pictureArchive.length);
    }

    function rotate(idx) {
        if (idx >= pictureArchive.length) {
            idx = 0;
        }
        document.getElementById('image').src = pictureArchive[idx++];
        timerID = setTimeout('rotate(' + idx + ')', 4000);
    }
</script>
</div>

<div id="contact">
</div>

<div id="gallery">
<script>
    $(document).ready(function () {
        $("button").click(function () {
            $("#div3").fadeOut(3000);
        });
    });
</script>
</head>

<body>
<p>Once you make a choice to make a change, old limiting beliefs seem to just fade away.</p></p>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>

<script>
    $(document).ready(function () {
        $("button").click(function () {
            $("div").animate({ left: '250px' });
        });
    });
</script>
</head>

<body>
<p>As nature abhors a vacuum, unlimited beliefs seem to jump to the fore!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
<br />
<br />
<br />
<br />
<br />
<br />

</body>
<script>
    $(document).ready(function () {
        $("button").click(function () {
            $("#div2").fadeIn(3000);
        });
    });
</script>
</head>

<body>
<p>Where once there was nothing but limits, suddenly everything is possible.</p>
<br><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:blue;"></div>
<button>Click to make changes in your life!</button>
</body>
</div>
<center><font face="Arial, Helvetica, Veranda" size="2">Copyright 2013, Overcoming Obstacles, LLC. All Rights Reserved. Phone: 702-XXX-XXXX Email: <a href="mailto:pat@mylvlifecoach.com">pat@mylvlifecoach.com</a></p></center>
</body>
</html>

Alternately, just helping me figure out how to call the contents of the 2nd tab to load when the tab is clicked will work just as well since everything else works and it's just this part that is giving me problems.

Topic Participants
pabvlnb

Having problem on tabbed menu plugin with images and not clock working together

Having problem on tabbed menu plugin with images and not clock working together

Topic Participants

pabvlnb