Invoke JavaScript upon the loading of the page or a specific element

Question

Invoke JavaScript upon the loading of the page or a specific element

I need help with a script that changes the color of each character in an element ("logo p") to a random color when hovered over. How can I modify this script to run automatically on page load, so that all characters have random colors at all times?

$(document).ready(function() {
    // COLOURS ARRAY
    var colours = Array("#B0171F", "#FF3E96", "#FF00FF", "#8B008B", "#9400D3", "#BF3EFF",     "#B22222", "#FF0000", "#800000", "#8E388E", "#bc8f8f"), idx;
    $("#logo p").hover(function(){
        var header = $(this); 
        var characters = header.text().split('');
        header.empty();  
        var content = '';
        for(var i = 0; i < characters.length; i++) {
            idx = Math.floor(Math.random() * colours.length);
            content += '<span style="color:'+colours[idx]+'">' + characters[i] + '</span>';
        }
        header.append(content);
    }, function() {
        $(this).find('span').contents().unwrap();
    });
});

javascript jquery css

Answer 1

Answer №1

If you replace the use of hover with mouseenter and mouseleave, and trigger the mouseenter event on target elements during page load by using .trigger('mouseenter');, you can try the following:

$(function(){
    var colours = Array( "#B0171F", "#FF3E96", "#FF00FF", "#8B008B", "#9400D3", "#BF3EFF", "#B22222", "#FF0000",          "#800000", "#8E388E", "#bc8f8f" );
    $("#logo p").on('mouseenter', function(){
        var header = $(this), characters = (header.text()).split(''), content = '';
        header.empty();  
        for(var i = 0; i < characters.length; i++) {
            var idx = Math.floor(Math.random() * colours.length);
            content += '<span style="color:'+colours[idx]+'">' + characters[i] + '</span>'; 
        }
        header.append(content);
    })
    .on('mouseleave', function(){
        $(this).find('span').contents().unwrap();
    }).trigger('mouseenter');
});

Check out the demo here.

This code will work both on page load and when using hover(mouseenter/mouseleave), eliminating the need for separate handlers for load and hover.

Answer 2

If you replace the use of hover with mouseenter and mouseleave, and trigger the mouseenter event on target elements during page load by using .trigger('mouseenter');, you can try the following:

$(function(){
    var colours = Array( "#B0171F", "#FF3E96", "#FF00FF", "#8B008B", "#9400D3", "#BF3EFF", "#B22222", "#FF0000",          "#800000", "#8E388E", "#bc8f8f" );
    $("#logo p").on('mouseenter', function(){
        var header = $(this), characters = (header.text()).split(''), content = '';
        header.empty();  
        for(var i = 0; i < characters.length; i++) {
            var idx = Math.floor(Math.random() * colours.length);
            content += '<span style="color:'+colours[idx]+'">' + characters[i] + '</span>'; 
        }
        header.append(content);
    })
    .on('mouseleave', function(){
        $(this).find('span').contents().unwrap();
    }).trigger('mouseenter');
});

Check out the demo here.

This code will work both on page load and when using hover(mouseenter/mouseleave), eliminating the need for separate handlers for load and hover.

Answer 3

Answer №2

Give .each a shot!

<script type="text/javascript">
$(document).ready(function() {
// ARRAY OF COLORS
var colors = Array("#B0171F", "#FF3E96", "#FF00FF", "#8B008B", "#9400D3", "#BF3EFF",     "#B22222", "#FF0000", "#800000", "#8E388E", "#bc8f8f"), idx;
$("#logo p").each(function(){
    var header = $(this); 
    var characters = header.text().split('');
    header.empty();  
    var content = '';
    for(var i = 0; i < characters.length; i++) {
        idx = Math.floor(Math.random() * colors.length);
        content += '<span style="color:'+colors[idx]+'">' + characters[i] + '</span>'; 
    }
    header.append(content);
}, function() {
    $(this).find('span').contents().unwrap();
});
});
</script>

Answer 4

Give .each a shot!

<script type="text/javascript">
$(document).ready(function() {
// ARRAY OF COLORS
var colors = Array("#B0171F", "#FF3E96", "#FF00FF", "#8B008B", "#9400D3", "#BF3EFF",     "#B22222", "#FF0000", "#800000", "#8E388E", "#bc8f8f"), idx;
$("#logo p").each(function(){
    var header = $(this); 
    var characters = header.text().split('');
    header.empty();  
    var content = '';
    for(var i = 0; i < characters.length; i++) {
        idx = Math.floor(Math.random() * colors.length);
        content += '<span style="color:'+colors[idx]+'">' + characters[i] + '</span>'; 
    }
    header.append(content);
}, function() {
    $(this).find('span').contents().unwrap();
});
});
</script>

Answer 5

Answer №3

Transform this into a reusable function and invoke it when the page loads:

$(document).ready(function () {

    function updateTextColors() {
        // AVAILABLE COLORS
        var colors = Array("#B0171F", "#FF3E96", "#FF00FF", "#8B008B", "#9400D3", "#BF3EFF", "#B22222", "#FF0000", "#800000", "#8E388E", "#bc8f8f"),
            index;
        $("#logo p").each(function(){
            var header = $(this);
            var characters = header.text().split('');
            header.empty();
            var content = '';
            for (var i = 0; i < characters.length; i++) {
                index = Math.floor(Math.random() * colors.length);
                content += '<span style="color:' + colors[index] + '">' + characters[i] + '</span>';
            }
            header.append(content);
        }, function () {
            $(this).find('span').contents().unwrap();
        });
    }
    updateTextColors();
});

Answer 6

Transform this into a reusable function and invoke it when the page loads:

$(document).ready(function () {

    function updateTextColors() {
        // AVAILABLE COLORS
        var colors = Array("#B0171F", "#FF3E96", "#FF00FF", "#8B008B", "#9400D3", "#BF3EFF", "#B22222", "#FF0000", "#800000", "#8E388E", "#bc8f8f"),
            index;
        $("#logo p").each(function(){
            var header = $(this);
            var characters = header.text().split('');
            header.empty();
            var content = '';
            for (var i = 0; i < characters.length; i++) {
                index = Math.floor(Math.random() * colors.length);
                content += '<span style="color:' + colors[index] + '">' + characters[i] + '</span>';
            }
            header.append(content);
        }, function () {
            $(this).find('span').contents().unwrap();
        });
    }
    updateTextColors();
});

Answer 7

Answer №4

Perhaps I may not fully comprehend the question, but you can simply run your code on document ready like this:

    $(document).ready(function() {
    var colors = Array("#B0171F", "#FF3E96", "#FF00FF", "#8B008B", "#9400D3", "#BF3EFF","#B22222", "#FF0000", "#800000", "#8E388E", "#bc8f8f"), index;
    var heading = $("#logo p");
    var textArray = heading.text().split('');
    heading.empty();  
    var newText = '';
    for(var i = 0; i < textArray.length; i++) {
        index = Math.floor(Math.random() * colors.length);
        newText += '<span style="color:'+colors[index]+'">' + textArray[i] + '</span>'; 
    }
    heading.append(newText);
});

Here is the Fiddle link

If you desire to have the colors constantly changing, you could place your code inside setInterval

Check out this updated Fiddle for that.

Answer 8

Perhaps I may not fully comprehend the question, but you can simply run your code on document ready like this:

    $(document).ready(function() {
    var colors = Array("#B0171F", "#FF3E96", "#FF00FF", "#8B008B", "#9400D3", "#BF3EFF","#B22222", "#FF0000", "#800000", "#8E388E", "#bc8f8f"), index;
    var heading = $("#logo p");
    var textArray = heading.text().split('');
    heading.empty();  
    var newText = '';
    for(var i = 0; i < textArray.length; i++) {
        index = Math.floor(Math.random() * colors.length);
        newText += '<span style="color:'+colors[index]+'">' + textArray[i] + '</span>'; 
    }
    heading.append(newText);
});

Here is the Fiddle link

If you desire to have the colors constantly changing, you could place your code inside setInterval

Check out this updated Fiddle for that.

Invoke JavaScript upon the loading of the page or a specific element

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

PHP for Instant NotificationsInstant notifications feature using PHP

I am encountering errors when running NPM start

Deploying NextJS to IISNode without the need for a custom server: A step-by-step guide

The jQuery .load method is having trouble loading a local HTML file within a Cocoa WebView

What is the best way to combine jQuery objects in order to apply CSS styles collectively?

The kick command doesn't seem to be working on my Discord bot as it's not responding

javascript function not being invoked

Toggling the `toggleClass` on a fixed element when clicking a link (such as in an off canvas menu) can

When the dropdown form options in HTML are clicked, they appear disproportionately large compared to the initial select box

Make sure to allow the async task to complete before beginning with Angular JS

Prevent MUI Autocomplete from closing when the option menu is opened with blur

Upon transmitting the information to the server, an error message pops up saying 'Uncaught TypeError: Illegal invocation'

jQuery - Enclose selected text with <span> tags - resolving duplicate instance issue

Trouble with nested components not refreshing correctly within VueJs

Attempting to align or position the wrapper div in the center or using a float with a width of

Using jQuery and AJAX to pass a string as a parameter in an onclick event

Executing a jQuery function in vb.net codeBy utilizing vb.net, the jQuery

Attaching my CSS file to my Django Project

What is the reason for the faster deletion performance of objects compared to arrays when using the splice method

Utilizing Java's IE/Chrome HTML-Renderer or managing file storage with JavaScript