Web CMS Designs: Forums
 

 
Post new topic Reply to topic
Message
Display posts from previous:       
PostPosted: Thu Sep 06, 2012 7:27 am
Reply with quote Back to top
spasticdonkey
Newbie
Newbie
Joined: Nov 18, 2010
Posts: 106
Location: Texas

View user's profile Send private message Visit poster's website
Thought I would take a moment to share a Sticky Scroll block, similar to the one used on this site. Took a look at many different scripts used to accomplish this, and the smoothest scrolling effect has to be the one from Remy Sharp. There were other solid candidates, such as ContainedStickyScroll but bouncy animations weren't important to me; and it would require other theme tweaks that are more involved.

Requirements

Arrow This block requires edits to all of your active themes as outlined in Unique IDs for RavenNuke Blocks

Arrow Block must always be the LAST block (on bottom) within the column, and is not intended for use as a center block

Arrow Do not use Flash or AdSense within this block, which could lead to errors on your site. If your theme has a particularly tall footer this script may not work for you.

Note there are a few settings with comments within the block, adjust as needed. Replace with your own content, remembering to keep the block relatively small in height and adjust the
$minheight
to be tall enough to accommodate both the block and the footer; plus some space.

php Code:
<?php


/************************************************************************/
/* Sticky Scroll Block */
/* =========================== */
/* Based on Fixed Floating Elements by */
/* Remy Sharp - http://twitter.com/rem */
/* jqueryfordesigners.com/fixed-floating-elements/ */
/* Requires Unique IDs for RavenNuke Blocks */
/* web-cms-designs.com/ftopict-18-unique-ids-for-ravennuke-blocks.html */
/************************************************************************/

if ( !defined('BLOCK_FILE') ) {
Header('Location: ../index.php');
die();
}

if (!isset($bid)) $bid = '';

/* $blockprefix = The prefix used for side block id's, if you followed the */
/* example when adding unique id's to your theme, no change is required. */
$blockprefix = 'sideblock';
/* $minheight = The minimum window height required for sticky scroll effect */
/* Must be large enough to display block at it's max height or block will */
/* be partially hidden from view. Ideally it should be used for a small */
/* block and $minheight should be greater than the height of footer + block.*/
/* Setting this too low will result in shuttering when you try to scroll to */
/* the bottom of some pages (only if blocks column is taller than content) */
$minheight = 650;
/* $multimode = only set to true if you run multiple themes and do not want */
/* the scroll effect and/or have not applied edits to some themes. Failing */
/* to provide a matching id and executing the script will result in errors */
$multimode = false;
/* $SliderThemes = themes to use the sticky scroll effect in. if you run */
/* multiple themes all active themes must have a matching $blockprefix */
/* and have edits applied as outlined @ url below */
/* web-cms-designs.com/ftopict-18-unique-ids-for-ravennuke-blocks.html */
/* Exclude any themes you do not want the effect in, or that do not have */
/* unique id's. Only used if $multimode = true; */
$SliderThemes = array('Your_Theme','Another_Theme');

/* The content for your block. Do not use flash or google ads within block */
$content = '<strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, ornare sit amet, wisi. Aenean fermentum <a href="#">Donec non enim</a>.';

/* Do not modify below unless you know what you are doing :) */
$LoadScript = true;
if($multimode){
$ThemeSel = get_theme();
if(!in_array($ThemeSel, $SliderThemes)) $LoadScript = false;
}
if($LoadScript){
$inlineJS = '
<script type="text/javascript">
$(function () {
var rnhigh = $(window).height();
if (rnhigh>' . $minheight . ') {
var top = $(\'#' . $blockprefix . $bid . '\').offset().top - parseFloat($(\'#' . $blockprefix . $bid . '\').css(\'margin-top\').replace(/auto/, 0));
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that below the form
if (y >= top) {
// if so, ad the stickyfixed class
$(\'#' . $blockprefix . $bid . '\').addClass(\'stickyfixed\');
} else {
// otherwise remove it
$(\'#' . $blockprefix . $bid . '\').removeClass(\'stickyfixed\');
}
});
}
});
</script>'."\n";
addJSToBody($inlineJS,'inline');
}
?>

To replace with your own content, you'll be looking for this line. Either edit for use with static html, or replace with the relevant code from your favorite block; just keep it short Smile

php Code:
/* The content for your block. Do not use flash or google ads within block  */

$content = '<strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, ornare sit amet, wisi. Aenean fermentum <a href="#">Donec non enim</a>.';

This also requires 1 line of CSS, which can be added to your style.css or elsewhere, as long as it is available for all active themes.

css Code:
.stickyfixed {position:fixed;top:10px}
spasticdonkeywebcmsdesigns
 
PostPosted: Fri Aug 15, 2014 3:08 pm
Reply with quote Back to top
Yerafzzz
Newbie
Newbie
Joined: Aug 15, 2014
Posts: 2

View user's profile Send private message
I feel like a lot of fun to read, good subject knowledge and make.
It is admirable to be carried out.
 
Post new topic Reply to topic Web CMS Designs Forum Index RavenNuke Blocks
Your AccountNew Members
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001-2008 phpBB Group
 
 
Clan Themes