• Resolved idomosko

    (@idomosko)


    Hi

    I copy this code from the wpbeginner site:

    jQuery(document).ready(function($) {
    /**
    * Configuration
    * The container for your sidebar e.g. aside, #sidebar etc.
    */

    var sidebarElement = $(‘div#secondary’);

    // Check if the sidebar exists
    if ($(sidebarElement).length > 0) {

    // Get the last widget in the sidebar, and its position on screen

    var widgetDisplayed = false;
    var lastWidget = $(‘.widget:last-child’, $(sidebarElement));
    var lastWidgetOffset = $(lastWidget).offset().top -100;

    // Hide the last widget
    $(lastWidget).hide();

    // Check if user scroll have reached the top of the last widget and display it
    $(document).scroll(function() {

    // If the widget has been displayed, we don’t need to keep doing a check.

    if (!widgetDisplayed) {
    if($(this).scrollTop() > lastWidgetOffset) {
    $(lastWidget).fadeIn(‘slow’).addClass(‘wpbstickywidget’);
    widgetDisplayed = true;
    }
    }
    });
    }
    });

    The code didnt work and the inspect element tool informed me that:
    “Uncaught TypeError: Cannot read property ‘top’ of undefined”.

    The problem is in line 17.

    Can you guys tell me how to fix the issue?

    Thank you

Viewing 10 replies - 1 through 10 (of 10 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You didn’t check if this element exists:

    $('.widget:last-child', $(sidebarElement));

    Thread Starter idomosko

    (@idomosko)

    Mmmm,

    Where do I paste it?

    Can you paste all the code together for me?

    Thank you

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Oh, if you don’t know what that means then you need to link us the Webpage with the problem.

    Thread Starter idomosko

    (@idomosko)

    Ok

    I would like it to appear in the last widget of the #widgets sidebar.

    You can see the sidebar here

    Thank you very much

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You have no elements on that page with the ID of “sidebar”, I don’t understand how that’s going to work in the first place

    Thread Starter idomosko

    (@idomosko)

    I followed the tutorial here.

    The div of my sidebar is #widgets

    I need to change:
    var sidebarElement = $(‘div#secondary’);
    to this:
    var sidebarElement = $(‘div#widgets’);

    Well, I did so, but the only problem is line 17

    Do you know what I mean?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Then again, you have no elements with the class of “widget” inside your sidebar

    var lastWidget = $('.widget:last-child', $(sidebarElement));

    Thread Starter idomosko

    (@idomosko)

    Ohh OK

    are you able to generate me the right code?

    I just want to make my last widget in the sidebar to fade in.

    Thank you for the help man

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    jQuery(document).ready(function($) {
    
        // Fade in the last sidebar widget
    
        var sidebarElement = $('#widgets'),
            widgetDisplayed = false,
            lastWidget,
            lastWidgetOffset; 
    
        // Check if the sidebar exists
        if (sidebarElement.length > 0) {
    
            // Get the last widget in the sidebar, and its position on screen
    
            lastWidget = $('> div:last-child', sidebarElement);
            lastWidgetOffset = lastWidget.offset().top - 100;
    
            // Hide the last widget
            lastWidget.hide();
    
            // Check if user scroll have reached the top of the last widget and display it
            $(document).scroll(function() {
    
                // If the widget has been displayed, we don't need to keep doing a check.
    
                if (!widgetDisplayed) {
                    if ($(this).scrollTop() > lastWidgetOffset) {
                        lastWidget.fadeIn('slow').addClass('wpbstickywidget');
                        widgetDisplayed = true;
                    }
                }
            });
        }
    });

    It’s more appealing for someone to help when they’re not doing all the work for you.

    Thread Starter idomosko

    (@idomosko)

    Works like a charm
    Thank you very much!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Problem with a code, Hope you can help me with that’ is closed to new replies.