Post Closed as "duplicate" by fuxia of
5 deleted 299 characters in body
source | link

Can someone help me utilize native wordpress jquery to run my function? I describe the problem in the video linked at the bottom of this post. The only working test i have done is to load an external jquery resouce via the chrome dev console and then add my function to the inspect element console.

WORKING TEST: add this to the console:

if(!window.jQuery||confirm('Overwrite\x20current\x20version?\x20v'+jQuery.fn.jquery))    
(function(d,s){s=d.createElement('script');
s.src='https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js';
(d.head||d.documentElement).appendChild(s)})(document);

THEN ADD MY FUNCTION TO THE CONSOLE:

$(function() {
    var $sidebar   = $("#post-43 > div > div > div.row.caldera-clarity-row.caldera-clarity-row-1 > div.caldera-clarity-column.col-sm-3"), 
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
});

THE QUESTION: Can you help me achieve the same functionality by way of Wordpress' native jquery library? The function just needs to work on the /Lessons page. I am unsure if my function is supported by native wp jquery or if i'm just incorrrectly adding it to the page.

Video: https://gust.box.com/s/vkcodic92bmxl316vpwy0p9k2r0sc513

  • 15 - 45 seconds i demo it working in the Inspect Element mode
  • 58 seconds to 1:20 i demo my inability to include the function to the /Lessons page

Assume that i have read these 2 articles: code.tutsplus.com/articles/the-complete-guide-to-proper-javascript-usage-with-wordpress--wp-32172 http://codex.wordpress.org/Function_Reference/wp_register_script#Handles_and_Their_Script_Paths_Registered_by_WordPress

Thanks so much,

Can someone help me utilize native wordpress jquery to run my function? I describe the problem in the video linked at the bottom of this post. The only working test i have done is to load an external jquery resouce via the chrome dev console and then add my function to the inspect element console.

WORKING TEST: add this to the console:

if(!window.jQuery||confirm('Overwrite\x20current\x20version?\x20v'+jQuery.fn.jquery))    
(function(d,s){s=d.createElement('script');
s.src='https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js';
(d.head||d.documentElement).appendChild(s)})(document);

THEN ADD MY FUNCTION TO THE CONSOLE:

$(function() {
    var $sidebar   = $("#post-43 > div > div > div.row.caldera-clarity-row.caldera-clarity-row-1 > div.caldera-clarity-column.col-sm-3"), 
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
});

THE QUESTION: Can you help me achieve the same functionality by way of Wordpress' native jquery library? The function just needs to work on the /Lessons page. I am unsure if my function is supported by native wp jquery or if i'm just incorrrectly adding it to the page.

Video: https://gust.box.com/s/vkcodic92bmxl316vpwy0p9k2r0sc513

  • 15 - 45 seconds i demo it working in the Inspect Element mode
  • 58 seconds to 1:20 i demo my inability to include the function to the /Lessons page

Assume that i have read these 2 articles: code.tutsplus.com/articles/the-complete-guide-to-proper-javascript-usage-with-wordpress--wp-32172 http://codex.wordpress.org/Function_Reference/wp_register_script#Handles_and_Their_Script_Paths_Registered_by_WordPress

Thanks so much,

Can someone help me utilize native wordpress jquery to run my function? The only working test i have done is to load an external jquery resouce via the chrome dev console and then add my function to the inspect element console.

WORKING TEST: add this to the console:

if(!window.jQuery||confirm('Overwrite\x20current\x20version?\x20v'+jQuery.fn.jquery))    
(function(d,s){s=d.createElement('script');
s.src='https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js';
(d.head||d.documentElement).appendChild(s)})(document);

THEN ADD MY FUNCTION TO THE CONSOLE:

$(function() {
    var $sidebar   = $("#post-43 > div > div > div.row.caldera-clarity-row.caldera-clarity-row-1 > div.caldera-clarity-column.col-sm-3"), 
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
});

THE QUESTION: Can you help me achieve the same functionality by way of Wordpress' native jquery library? The function just needs to work on the /Lessons page. I am unsure if my function is supported by native wp jquery or if i'm just incorrrectly adding it to the page.

Assume that i have read these 2 articles: code.tutsplus.com/articles/the-complete-guide-to-proper-javascript-usage-with-wordpress--wp-32172 http://codex.wordpress.org/Function_Reference/wp_register_script#Handles_and_Their_Script_Paths_Registered_by_WordPress

Thanks so much,

4 deleted 4 characters in body
source | link

Can someone help me utilize native wordpress jquery to run my function? I describe the problem in the video linked at the bottom of this post. Theres spaces in the video URL because i dont have enough reputation on stackexchange to post with 2 links. :) The only working test i have done is to load an external jquery resouce via the chrome dev console and then add my function to the inspect element console.

WORKING TEST: add this to the console:

if(!window.jQuery||confirm('Overwrite\x20current\x20version?\x20v'+jQuery.fn.jquery))    
(function(d,s){s=d.createElement('script');
s.src='https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js';
(d.head||d.documentElement).appendChild(s)})(document);

THEN ADD MY FUNCTION TO THE CONSOLE:

$(function() {
    var $sidebar   = $("#post-43 > div > div > div.row.caldera-clarity-row.caldera-clarity-row-1 > div.caldera-clarity-column.col-sm-3"), 
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
});

THE QUESTION: Can you help me achieve the same functionality by way of Wordpress' native jquery library? The function just needs to work on the /Lessons page. I am unsure if my function is supported by native wp jquery or if i'm just incorrrectly adding it to the page.

Video: https:// gust. box. com /s/vkcodic92bmxl316vpwy0p9k2r0sc513https://gust.box.com/s/vkcodic92bmxl316vpwy0p9k2r0sc513

  • 15 - 45 seconds i demo it working in the Inspect Element mode
  • 58 seconds to 1:20 i demo my inability to include the function to the /Lessons page

Assume that i have read these 2 articles: code.tutsplus.com/articles/the-complete-guide-to-proper-javascript-usage-with-wordpress--wp-32172 http://codex.wordpress.org/Function_Reference/wp_register_script#Handles_and_Their_Script_Paths_Registered_by_WordPress

Thanks so much,

Can someone help me utilize native wordpress jquery to run my function? I describe the problem in the video linked at the bottom of this post. Theres spaces in the video URL because i dont have enough reputation on stackexchange to post with 2 links. :) The only working test i have done is to load an external jquery resouce via the chrome dev console and then add my function to the inspect element console.

WORKING TEST: add this to the console:

if(!window.jQuery||confirm('Overwrite\x20current\x20version?\x20v'+jQuery.fn.jquery))    
(function(d,s){s=d.createElement('script');
s.src='https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js';
(d.head||d.documentElement).appendChild(s)})(document);

THEN ADD MY FUNCTION TO THE CONSOLE:

$(function() {
    var $sidebar   = $("#post-43 > div > div > div.row.caldera-clarity-row.caldera-clarity-row-1 > div.caldera-clarity-column.col-sm-3"), 
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
});

THE QUESTION: Can you help me achieve the same functionality by way of Wordpress' native jquery library? The function just needs to work on the /Lessons page. I am unsure if my function is supported by native wp jquery or if i'm just incorrrectly adding it to the page.

Video: https:// gust. box. com /s/vkcodic92bmxl316vpwy0p9k2r0sc513

  • 15 - 45 seconds i demo it working in the Inspect Element mode
  • 58 seconds to 1:20 i demo my inability to include the function to the /Lessons page

Assume that i have read these 2 articles: code.tutsplus.com/articles/the-complete-guide-to-proper-javascript-usage-with-wordpress--wp-32172 http://codex.wordpress.org/Function_Reference/wp_register_script#Handles_and_Their_Script_Paths_Registered_by_WordPress

Thanks so much,

Can someone help me utilize native wordpress jquery to run my function? I describe the problem in the video linked at the bottom of this post. The only working test i have done is to load an external jquery resouce via the chrome dev console and then add my function to the inspect element console.

WORKING TEST: add this to the console:

if(!window.jQuery||confirm('Overwrite\x20current\x20version?\x20v'+jQuery.fn.jquery))    
(function(d,s){s=d.createElement('script');
s.src='https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js';
(d.head||d.documentElement).appendChild(s)})(document);

THEN ADD MY FUNCTION TO THE CONSOLE:

$(function() {
    var $sidebar   = $("#post-43 > div > div > div.row.caldera-clarity-row.caldera-clarity-row-1 > div.caldera-clarity-column.col-sm-3"), 
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
});

THE QUESTION: Can you help me achieve the same functionality by way of Wordpress' native jquery library? The function just needs to work on the /Lessons page. I am unsure if my function is supported by native wp jquery or if i'm just incorrrectly adding it to the page.

Video: https://gust.box.com/s/vkcodic92bmxl316vpwy0p9k2r0sc513

  • 15 - 45 seconds i demo it working in the Inspect Element mode
  • 58 seconds to 1:20 i demo my inability to include the function to the /Lessons page

Assume that i have read these 2 articles: code.tutsplus.com/articles/the-complete-guide-to-proper-javascript-usage-with-wordpress--wp-32172 http://codex.wordpress.org/Function_Reference/wp_register_script#Handles_and_Their_Script_Paths_Registered_by_WordPress

Thanks so much,

3 Fixed code formatting
source | link

WORKING TEST: add this to the console: if(!window.jQuery||confirm('Overwrite\x20current\x20version?\x20v'+jQuery.fn.jquery))(function(d,s){s=d.createElement('script');s.src='https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js';(d.head||d.documentElement).appendChild(s)})(document);

if(!window.jQuery||confirm('Overwrite\x20current\x20version?\x20v'+jQuery.fn.jquery))    
(function(d,s){s=d.createElement('script');
s.src='https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js';
(d.head||d.documentElement).appendChild(s)})(document);

THEN ADD MY FUNCTION TO THE CONSOLE: $(function() {

$(function() {
    var $sidebar   = $("#post-43 > div > div > div.row.caldera-clarity-row.caldera-clarity-row-1 > div.caldera-clarity-column.col-sm-3"), 
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
});

});

WORKING TEST: add this to the console: if(!window.jQuery||confirm('Overwrite\x20current\x20version?\x20v'+jQuery.fn.jquery))(function(d,s){s=d.createElement('script');s.src='https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js';(d.head||d.documentElement).appendChild(s)})(document);

THEN ADD MY FUNCTION TO THE CONSOLE: $(function() {

var $sidebar   = $("#post-43 > div > div > div.row.caldera-clarity-row.caldera-clarity-row-1 > div.caldera-clarity-column.col-sm-3"), 
    $window    = $(window),
    offset     = $sidebar.offset(),
    topPadding = 15;

$window.scroll(function() {
    if ($window.scrollTop() > offset.top) {
        $sidebar.stop().animate({
            marginTop: $window.scrollTop() - offset.top + topPadding
        });
    } else {
        $sidebar.stop().animate({
            marginTop: 0
        });
    }
});

});

WORKING TEST: add this to the console:

if(!window.jQuery||confirm('Overwrite\x20current\x20version?\x20v'+jQuery.fn.jquery))    
(function(d,s){s=d.createElement('script');
s.src='https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js';
(d.head||d.documentElement).appendChild(s)})(document);

THEN ADD MY FUNCTION TO THE CONSOLE:

$(function() {
    var $sidebar   = $("#post-43 > div > div > div.row.caldera-clarity-row.caldera-clarity-row-1 > div.caldera-clarity-column.col-sm-3"), 
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
});
2 edited tags
| link
1
source | link