A&M Studio http://anmstudio.com Web Design & Development Sun, 22 Jan 2012 01:23:07 +0000 en hourly 1 Thesis Theme and jsScrolling http://anmstudio.com/blog/installing-jsscrolling-into-thesis http://anmstudio.com/blog/installing-jsscrolling-into-thesis#comments Fri, 05 Mar 2010 07:04:03 +0000 admin http://aaronguldager.com/?p=7 Nathan Faubion’s awesome jsScrolling script as opposed to doing ‘overflow: auto’ with my main content window. Normally this is rather plug and play but it took me a few minutes to correctly implement it into the Thesis theme. Here’s what I did: First you need to download the files off his website. Next, add this to your header scripts under ‘Thesis Options’:
<script type=”text/javascript” src=”http://www.aaronguldager.com/js/Scrolling.Scroller.js”></script> <script type=”text/javascript” src=”http://www.aaronguldager.com/js/Scrolling.Scrollbar.js”></script> <script type=”text/javascript” src=”http://www.aaronguldager.com/js/Scrolling.ScrollTween.js”></script> <script type=”text/javascript”> var scrollbar; function scrollbarPressed (o, c, e) { o.className += “-Pressed”; }; function scrollbarReleased (o, c, e) { o.className = o.className.replace(“-Pressed”, “”); }; window.onload = function () { var content = document.getElementById(“content-Content”); var scrollb = document.getElementById(“content-Scrollbar”); scrollbar = new Scrolling.Scrollbar ( scrollb, new Scrolling.Scroller (content, 720, 635), new Scrolling.ScrollTween() ); scrollbar.onMouseDown = scrollbarPressed; scrollbar.onMouseUp = scrollbarReleased; }; </script>
Pay attention to the items in red. Those are items you will need to edit to fit your theme. Assuming it’s all default Thesis, you should be able to copy/paste the majority of that. You will need to set the proper width/height attributes to fit your layout. Note that you will need to change the path to the js files to wherever you upload them. I would recommend using absolute paths. Add this to your custom_functions.php:
<?php function scrollbar2 () { ?> <div id=”content-Content”> <div class=”Scroller-Container”> <?php } add_action(‘thesis_hook_before_content’, ‘scrollbar2′); ?> <?php function scrollbar3 () { ?> </div> </div> <?php } add_action(‘thesis_hook_after_content’, ‘scrollbar3′); ?> <?php function scrollbar () { ?> <div id=”content-Scrollbar”> <div class=”Scrollbar-Up”></div> <div class=”Scrollbar-Down”></div> <div class=”Scrollbar-Track”> <div class=”Scrollbar-Handle”></div> </div> </div> <?php } add_action(‘thesis_hook_after_content’, ‘scrollbar’);
Last but not least, add this to your custom.css file:
#content {position: relative;width: 735px;height: 500px;} #content-Content {position: absolute;top: 10px; width: 720px;height: 635px;overflow: hidden;} #content .Scroller-Container {position: absolute;top: 0px; left: 0px;} #content p {} #content-Scrollbar {position: absolute;left: 725px; top: 18px;} #content .Scrollbar-Up,.Scrollbar-Up-Pressed {position: absolute;width: 15px; height: 15px;background-color: #444;font-size: 0px;} #content .Scrollbar-Down,.Scrollbar-Down-Pressed {position: absolute;top: 591px;width: 15px; height: 15px;background-color: #444;font-size: 0px;} #content .Scrollbar-Track,.Scrollbar-Track-Pressed {width: 15px; height: 560px;position: absolute;top: 20px;background-color: #EEE;} #content .Scrollbar-Track-Pressed {background-color: #DDD;} #content .Scrollbar-Handle,.Scrollbar-Handle-Pressed {position: absolute;width: 15px; height: 45px;background-color: #444;} #content .Scrollbar-Handle-Pressed,.Scrollbar-Down-Pressed, .Scrollbar-Up-Pressed {background-color: #AAA;} #content .Scrollbar-Disabled {display: none;}
Once again, you will need to edit some of the height/width/color properties to your liking to fit your page, and you may need to tweak the positioning of #content-Scrollbar so that it appears in the proper spot. Enjoy!]]> http://anmstudio.com/blog/installing-jsscrolling-into-thesis/feed 12 ANMSTUDIO4.0 / AARONGULDAGER.COM http://anmstudio.com/blog/website-facelift-rebrand http://anmstudio.com/blog/website-facelift-rebrand#comments Thu, 04 Mar 2010 22:37:24 +0000 admin http://aaronguldager.com/?p=1 ANMSTUDIO.COM. When I first started my website 1 1/2 years ago, I felt that I needed to give off the professional impression of a design studio. After some real-world experience, I realize that my work and referrals are the biggest assets I could ask for. No “front” is needed. So, alas, here I am!]]> http://anmstudio.com/blog/website-facelift-rebrand/feed 8