Question

I found code for a text loop here:

Fade in & out text loop – jQuery

It works in that demo, and even if I copy and paste ALL of my code into the jsfiddle, the Jquery works.

When I do it in Dreamweaver, it does NOT work. If I open up an new document and put the information in exactly as it is, it still doesn’t work. So I feel like I must be missing something simple.

Here’s a link to the page:

http://divingdog.com/_hairofdog/

Here’s my code for it:

.hours
{
display:none;
float:right;
font-size:20px;
padding-top:5px;
z-index:100000;

}

<div class="hours">
Monday – Thursday: 9 AM – 8 PM
</div>

<div class="hours">
Friday – Saturday: 9 AM – 9 PM (8 PM Jan-Mar)
</div>

<div class="hours">
Sunday: 10 AM – 6 PM
</div>

<script>
(function() {

    var hours = $(".hours");
    var hoursIndex = -1;

    function showNextHours() {
        ++quoteIndex;
        hours.eq(hoursIndex % hours.length)
            .fadeIn(2000)
            .delay(2000)
            .fadeOut(2000, showNextHours);
    }

    showNextHours();

})();

</script>

The script is at the end of the body tag (inside it), and the CSS is on an external sheet.

The fading text should be showing up to the right of the phone number at the top.

I have no idea why it isn’t working. 🙁

Answer 1

I think your missing jquery. Adding this to the top of the page should fix it:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>