WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Javascript not functioning properly on wordpress (3 posts)

  1. kmurrayfrgraphics
    Member
    Posted 4 months ago #

    A few weeks ago I added this javascript to my website and had it properly working on my website, but now it seems to not be functioning.

    http://working.frgraphicsolutions.com/services/

    The script is called:

    tooltips.js

    ***It is a javascript that will make the <abbr> tag to become responsive so when a person is viewing the site on a mobile device they can click instead of hover over the object and it will allow them to see the information.***

    Unfortunately even though the page is calling the javascript it is not preforming it's function. So the viewer will not be able to see the information at all when on a phone or tablet.

    The code reads like this:

    jQuery( document ).ready( function($)
        {
        var targets = $( '[rel~=tooltip]' ),
            target  = false,
            tooltip = false,
            title   = false;
    
        targets.bind( 'mouseenter', function()
        {
            target  = $( this );
            tip     = target.attr( 'title' );
            tooltip = $( '<div id="tooltip"></div>' );
    
            if( !tip || tip == '' )
                return false;
    
            target.removeAttr( 'title' );
            tooltip.css( 'opacity', 0 )
                   .html( tip )
                   .appendTo( 'body' );
    
            var init_tooltip = function()
            {
                if( $( window ).width() < tooltip.outerWidth() * 1.5 )
                    tooltip.css( 'max-width', $( window ).width() / 2 );
                else
                    tooltip.css( 'max-width', 340 );
    
                var pos_left = target.offset().left + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ),
                    pos_top  = target.offset().top - tooltip.outerHeight() - 20;
    
                if( pos_left < 0 )
                {
                    pos_left = target.offset().left + target.outerWidth() / 2 - 20;
                    tooltip.addClass( 'left' );
                }
                else
                    tooltip.removeClass( 'left' );
    
                if( pos_left + tooltip.outerWidth() > $( window ).width() )
                {
                    pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
                    tooltip.addClass( 'right' );
                }
                else
                    tooltip.removeClass( 'right' );
    
                if( pos_top < 0 )
                {
                    var pos_top  = target.offset().top + target.outerHeight();
                    tooltip.addClass( 'top' );
                }
                else
                    tooltip.removeClass( 'top' );
    
                tooltip.css( { left: pos_left, top: pos_top } )
                       .animate( { top: '+=10', opacity: 1 }, 50 );
            };
    
            init_tooltip();
            $( window ).resize( init_tooltip );
    
            var remove_tooltip = function()
            {
                tooltip.animate( { top: '-=10', opacity: 0 }, 50, function()
                {
                    $( this ).remove();
                });
    
                target.attr( 'title', tip );
            };
    
            target.bind( 'mouseleave', remove_tooltip );
            tooltip.bind( 'click', remove_tooltip );
        });
        });

    I created a function.php for the child theme that has the code only called to on this specific page:

    <?php
        if ( !function_exists( 'tool_tips' ) ) {
        function tooltips() {
        if ( is_page( 'services' ) ) {
        wp_enqueue_script( 'tooltips', get_stylesheet_directory_uri() . '/js/tooltips.js', '', '1.0', true );
        }
        }
        }
        add_action( 'wp_enqueue_scripts', 'tooltips' );
    
        ?>

    Like I stated earlier, it has been functioning the past few weeks with no issues (I even checked it over this past weekend) and today I noticed it stopped working.

    Since the page is actually calling the script, but it is not functioning I believe there is something wrong with my script or another script is effecting it. I am new to jQuery, so it is harder for me to find issues through the code when I know many here can see pretty easily.

    Thank you very much.

    [Moderator Note: Please ensure that you are embedding links correctly in your posts.]

  2. Steven Jones
    Member
    Posted 4 months ago #

    Can you confirm the following:

    • It is being loaded on the page
    • It is being loaded after jQuery
    • There are no errors in the console
  3. kmurrayfrgraphics
    Member
    Posted 4 months ago #

    So my site is hosted through godaddy and I took the liberty of reverting back to an older version of wordpress then re-updating it to the current version.

    Godaddy or WordPress managed to pull from an old database and delete created pages (still keeping my file manager intact though) and now the jQuery has no problem loading.

    I am completely unsure what the issue was since the script was being loaded. I am unsure if it was being unloaded after jQuery, but no errors were showing when I ran Inspector on FireFox.

Reply

You must log in to post.

About this Topic