Home/ Questions/Q 9128447
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T07:30:57+00:00

Ok i know this has to be a topic discussed earlier, but all the

  • 0

Ok i know this has to be a topic discussed earlier, but all the answers I found were a little complicated considering I’m new and still in the process of learning javascript.

I have the following code in the head section of my html

<script>
function timedText() {
    setTimeout(function(){displayResult()},3000);
    setTimeout(function(){displayResult1()},7000);
    setTimeout(function(){displayResult2()},15000);
    setTimeout(function(){timedText()},18000);
}
</script>

<script>
function change() {
    setTimeout(function(){timedText()},1000);
}   
</script>

<script>
function displayResult() {
    document.getElementById("adimg_holder").style.bottom="0px";
    document.getElementById("button1").style.backgroundPosition="bottom";
    document.getElementById("button2").style.backgroundPosition="top";
    document.getElementById("button3").style.backgroundPosition="top";
}

function displayResult1() {
    document.getElementById("adimg_holder").style.bottom="370px";
    document.getElementById("button1").style.backgroundPosition="top";
    document.getElementById("button2").style.backgroundPosition="bottom";
    document.getElementById("button3").style.backgroundPosition="top";
}

function displayResult2() {
    document.getElementById("adimg_holder").style.bottom="739px";
    document.getElementById("button1").style.backgroundPosition="top";
    document.getElementById("button2").style.backgroundPosition="top";
    document.getElementById("button3").style.backgroundPosition="bottom";
}
</script>

and the following html

    <body onload="change()">
    <div class="banner_area">
    <div class="banner_wrapper">
        <img src="images/image_holder.png" />
        <div id="ad_holder">
            <div id="adimg_holder">
            <img class="ad_images" src="images/recruitment_banners.png" />
            <img class="ad_images" src="images/training_banners.png" />
            <img class="ad_images" src="images/staffing_banner.png" />
            </div>
        </div>
        <div id="ad_buttons">
        <div id="button1" style="background-image:url(images/buttonfirst.png);background-position:bottom;width:259px;height:41px" onclick="displayResult()"></div>
        <div id="button2" style="background-image:url(images/buttonsecond.png);width:259px;height:41px" onclick="displayResult1()"></div>
        <div id="button3" style="background-image:url(images/buttonthird.png);width:259px;height:41px" onclick="displayResult2()"></div>
    </div>
    </div>
    </div>

So the buttons toggle different positions, and the script cycles through the positions at time intervals

Now what I’m trying to achieve is that when the positions are being cycled through, if I click on one of the button, it jumps to the related position and stays that way for a while (say a few seconds) and then continue with the loop.

Hope I’ve made my motive easy to understand.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is how you can achieve this behavior: http://jsfiddle.net/PcZsT/12/

    Here is the JavaScript:

    function timedText() {
  setTimeout(function() {
    displayResult();
  },2000);
  setTimeout(function() {
    displayResult1();
  },6000);
  setTimeout(function() {
    displayResult2();
  },14000);
  setTimeout(function() {
    timedText();
  },15000);
}

(function change() {
  setTimeout(function() {
    timedText();
  },1000);
}());

var locked = false;

function button1Handler() {
  moveTop();
  lockFor(3);
}

function button2Handler() {
  moveBottom();
  lockFor(3);
}

function lockFor(seconds) {
  locked = true;
  setTimeout(function () {
    locked = false;
  }, seconds * 1000);
}

function displayResult() {
  if (locked) return;
  moveTop();
}

function moveTop() {
  document.getElementById("adimg_holder").style.bottom="0px";
  document.getElementById("button1").style.backgroundPosition="bottom";
  document.getElementById("button2").style.backgroundPosition="top";
  document.getElementById("button3").style.backgroundPosition="top";
}

function displayResult1() {
  if (locked) return;
  moveMiddle();
}

function moveMiddle() {
  document.getElementById("adimg_holder").style.bottom="370px";
  document.getElementById("button1").style.backgroundPosition="top";
  document.getElementById("button2").style.backgroundPosition="bottom";
  document.getElementById("button3").style.backgroundPosition="top";
}

function displayResult2() {
  if (locked) return;
  moveBottom();
}

function moveBottom() {
  document.getElementById("adimg_holder").style.bottom="739px";
  document.getElementById("button1").style.backgroundPosition="top";
  document.getElementById("button2").style.backgroundPosition="top";
  document.getElementById("button3").style.backgroundPosition="bottom";
}

    The functions above are the click handlers of respectively button1 and button2.

    I’ve also changed the change function to бe IIFE (Immediately Invoked Function Expression) but it’s not necessary, you don’t have to do it because you want to be invoked onload.

    • 0