I had someone create me a cool little plugin that allows me to input a CSS element ID and that element will float to the top of the page and stick there when the site is scrolled. Much like the top of Facebook.
It works great on my homepage, my posts, and my pages. But for some reason the javascript doesn't work on my custom post type single template pages.
Examples: (keep your eyes on the three main-menu links at the top as well as the floating social share bar on the side, those are the things that don't work.)
<strong>Working here:</strong>
http://theseattlevine.com/wordpress2013/ (home page)
http://theseattlevine.com/wordpress2013/artisanship/9855/dyed-mosaic-artwork-bursts-with-color/ (regular post single template)
<strong>Not working here:</strong>
http://theseattlevine.com/wordpress2013/u/video/interview-with-artist-michael-harrison/ (custom post type "user_video")
http://theseattlevine.com/wordpress2013/event/1426-s-jackson-street-studios-annual-open-studios/ (custom post type "event")
The page templates are very similar and do not have any inline scripts which would effect the plugin.
Can anyone take a look and figure out what I need to fix to make this work?
Thanks in advance.
Giri answers:
Disable wordpress debugging.
Edit wp-config.php
Change this value
define('WP_DEBUG', true);
to
define('WP_DEBUG', false);
Zac Eckstein comments:
I have debugging on on purpose because I'm developing the site. This is not the issue.
Giri comments:
Ok I got it.. This is happening because your custom post types missing the offset css class.
This is the class that determine css offset.
]
.wpsr_floatbts_anchor
Pages that has the following code works perfectly.
<span class="wpsr_floatbts_anchor" data-offset="15"></span>
You custom post type missing that code.
You should edit your file just search for that code.
Or edit your post using editor goto html tab.. Add this code in the place where you want the scrolling begin...
<span class="wpsr_floatbts_anchor" data-offset="15"></span>
Zac Eckstein comments:
Thank you. Yes, I had just figured this out as well! Thanks for doing the research.
Luis Abarca answers:
You have some errors on your CPT.
This is how it looks your source code
<script type="text/javascript">
jQuery(function($){
$('.mainlink').sticky({topSpacing:0});
});
</script>
<br />
Notice: Undefined variable: socialbt_processed in /home/seavine/public_html/wordpress2013/wp-content/plugins/wp-socializer/includes/wpsr-socialbuttons.php on line 361<br />
<br />
Notice: Undefined variable: socialbt_processed in /home/seavine/public_html/wordpress2013/wp-content/plugins/wp-socializer/includes/wpsr-socialbuttons.php on line 361<br />
Zac Eckstein comments:
Socialbt is part of a a plugin. Those are just notices so they shouldn't have any effect on anything else. I was told there was javascript errors on my site and I'm trying to figure out what they are and how to fix them.
Luis Abarca comments:
You have javascript errors, "Uncaught TypeError: Cannot read property 'top' of undefined" on wp-socializer-floating-bar-js.js
Looks like a HTML element is missing.
Zac Eckstein comments:
OK. I'm sorry, I really don't understand JS so I'm looking for some actual help on how to solve the problem. What would be helpful, should I post the offending JS file for you to take a look at? Here it is (below).
Thanks.
/*
* Copyright 2013 Aakash Chakravarthy - www.aakashweb.com
* Created for WP Socializer - Wordpress Plugin
* v1.4
*/
if(typeof jQuery == 'undefined'){
if(typeof document.getElementsByClassName == 'function'){
document.getElementsByClassName('wpsr-floatbar-float_left')[0].style.display = 'none';
console.log('WP Socializer float bar: There is a Javascript error in the page and the floatbar is hidden');
}
}
jQuery(document).ready(function(){
var $floatbar = jQuery(".wpsr-floatbar-float_left");
var $anchor = jQuery('.wpsr_floatbts_anchor');
// Init effects
$floatbar.hide().fadeIn(2000);
// Position the left float bar to the anchor
var wpsr_position_floatbar = function(){
anchorOffset = jQuery('.wpsr_floatbts_anchor').offset();
barDistance = jQuery('.wpsr_floatbts_anchor').attr('data-offset');
$floatbar.css({
position: "absolute",
top: anchorOffset.top + "px",
left: (anchorOffset.left - $floatbar.outerWidth() - barDistance)
});
}
// On window scroll
if(jQuery(".wpsr-floatbar-movable").length > 0){
jQuery(window).scroll(function(){
var b = jQuery(window).scrollTop();
var d = anchorOffset.top;
var c = $floatbar;
if(b>d-30){
c.css({position:"fixed", top: "30px"});
}else{
if(b<=d){
c.css({position:"absolute", top: anchorOffset.top + "px"});
}
}
});
}
// MINIMIZE THE FLOATING BAR
jQuery('.wpsr_shareminbt').click(function(){
$floatbar.fadeToggle();
});
// **
jQuery(window).resize(function(){
wpsr_position_floatbar();
minLeftShareBar(); // Since v2.4.9
});
// **
var minLeftShareBar = function(){
if(typeof window.innerWidth !== 'undefined' && window.innerWidth < 800 ){
$floatbar.addClass('wpsr_floatbt_min').hide();
jQuery('.wpsr_shareminbt').fadeIn();
}else{
$floatbar.removeClass('wpsr_floatbt_min').fadeIn();
jQuery('.wpsr_shareminbt').hide();
};
}
// ONLOAD POSITIONING
if(window.addEventListener){
window.addEventListener("load", wpsr_position_floatbar, false);}
else if (window.attachEvent){
window.attachEvent("onload", wpsr_position_floatbar);
}
// INITS
wpsr_position_floatbar();
minLeftShareBar();
// BOTTOM FIXED MINIMIZING
var shareBarWidth = jQuery('.wpsr-floatbar-bottom_fixed').width();
var hideShareBar = function(){
var $this = jQuery('.wpsr_hidebt');
$this.siblings().fadeOut('slow', function(){
$this.parent().animate({
width: '20px'
}).attr('data-hidden', 1);
});
};
var showShareBar = function(){
var $this = jQuery('.wpsr_hidebt');
$this.parent().animate({
width: shareBarWidth
}, function(){
$this.siblings().fadeIn('slow');
}).attr('data-hidden', 0);
};
jQuery('.wpsr_hidebt').click(function(){
if(jQuery(this).parent().attr('data-hidden') == 1){
showShareBar();
}else{
hideShareBar();
}
});
});
Luis Abarca comments:
No, i can see the source code from your site, i think the PHP Notice is breaking some code on your site and avoid to run the rest of the scripts, can you hide all the PHP errors ?, cause the error is from WP Socializer plugin.
Zac Eckstein comments:
I just figured it out. The plugin uses the_content to figure out where to place the floating bar on the left. My custom post types don't use the_content because they are made up entirely of custom fields. I've contacted the plugin author to see if there is a way to change this so it doesn't need to use the_content.
Thanks for trying to help though, I'll give you the $10 for sticking with me few a while!
Luis Abarca comments:
Thanks Zac! and please, let me know if i can help you later in this issue.
Kyle answers:
It doesn't have to do with the js I believe. You have an error on your template wp-content/plugins/wp-socializer/includes/wpsr-socialbuttons.php on line 361 which is blocking the element
Zac Eckstein comments:
But it's working fine on most pages/posts. So I don't think this is the issue.