Add Vertical Scrollbar to crawlerca5.js

[saltydog]

1) Script Title: Text and Image Crawler v1.53 (crawlerca5.js)

2) Script URL (on DD):

3) Describe problem: Scrollbars... I would like to add the scrollbar option on hover/mouseover for the users whom are only accustomed with scrollbar controls.
I have managed to get the hand/grab cursor to work with the following code:

<div class="marqueev" id="fishingcharters" onmouseover="this.className='grab'" onmouseup="this.className='grab'" onmousedown="this.className='grabbing'">

and

.grab {
   font-size:15px;
   cursor: grab;
   cursor:-webkit-grab;
   cursor:-moz-grab;
   cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important;
}

.grabbing {
   cursor: grabbing;
   cursor:-webkit-grabbing;
   cursor:-moz-grabbing;
   cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
}

I like this feature that i have added with hand/grab and want to keep it.
I have also added the following code to my stylesheet and get a slight rendering of a custom scrollbar on hover but nothing functional or traditional looking:

.grab:hover {
	overflow-y: scroll !important;
	width: 545px !important;
}
	  
.grab::-webkit-scrollbar-track {
	display:none;
}

.grab::-webkit-scrollbar {
	width: 15px;
	background-color: #000000;
}

.grab::-webkit-scrollbar-thumb{
	border:1px solid black;
  	border-radius: 10px;
	background-color: #D40000;
	background-image: -webkit-linear-gradient(90deg,
											  transparent,
											  rgba(0, 0, 0, 0) 80%,
											  transparent,
											  transparent)
}

I tried to implement FaceScroll Custom scrollbar but i can't get it to work at all.
I have a wordpress site... I am using a Tabby plugin/ for the content... inside the tabbed content is where i have the crawler and trying to achieve scrollbar results.
The site were i am working on this is http://saltwater-fishing-charters.com

All advice is welcome.

[vwphillips]

http://www.vicsjavascripts.org/AAMou...er/140628A.htm

[saltydog]

I have tried the code... very clever how it works to be cross browser compatible... I liked the above draggable feature but okay to sacrifice it for the sidebar. I spent about 4 hours trying to implement your script but to no prevail my whole page crashes when i call the function:

<script type="text/javascript">
zxcMouseBeltSlider.init({
ParentID:'fishing_charters',
MoveEdge:100,
MaxSpeed:5,
MinSpeed:.5,
Wrap:true,
ScrollBarID:'scrollbar',
OnScroll:function(o,p,m){
}
});
</script>

[saltydog]

I also tried to find a page that outlines instructuctions, on the what, where, why, any info and can't find any. Thanks for sharing but useless to me with out instructions.

[vwphillips]

view the source of the page I linked to for the main code, and example CSS and HTML

written instructions

/*

**** The HTML and CSS Code.

** The Parent DIV Element
The parent DIV element must be defined in the HTML code and assigned a unique ID name.
This DIV must have a CSS style position of 'relative' or 'absolute', overflow of 'hidden'
and width and height defined by CSS class rule or inline style.

** The 'Belt' DIV Element
The 'Belt' DIV Element must be the first nested DIV element of the parent DIV element must be defined in the HTML code and assigned a unique ID name.
This DIV must have a CSS style position of 'absolute' defined by CSS class rule or inline style.

** The Elements to Display
The Elements to display must be nested in the 'Belt' DIV Element.

** The Scoll Bar DIV Element
The Scoll Bar DIV element must be defined in the HTML code and assigned a unique ID name.
This DIV must have a CSS style position of 'relative' or 'absolute' and width and height defined by
CSS class rule or inline style.

** The Scoll Bar Slider DIV Element.
The 'Slider' DIV Element must be the first nested DIV element of the Scoll Bar Slider DIV Element and must be defined in the HTML code
This DIV must have a CSS style position of 'absolute' and width and height defined by CSS class rule or inline style.

**** Initialising the Script

Each instance of the script must be initialised after the page has loaded by calling function 'zxcMouseBeltSlider.init'
passing script options as an object.
e.g.
zxcMouseBeltSlider.init({
ParentID:'tst', // the unique ID name of the belt parent DIV. (string)
MoveEdge:100, //(optional) the edge distance to scroll the belt. (number, default = parent size/4)
MaxSpeed:5, //(optional) the maximum scroll speed. (number, default = 5)
MinSpeed:.5, //(optional) the mouseout scroll speed. (number, default = 0)
Wrap:true, //(optional) true = the belt will wrap from first to last. (boolean, default = false = the belt will not wrap)
ScrollBarID:'scrollbar', //(optional) the unique ID name of the scroll bar. (string, default = no scroll bar)
OnScroll:function(o,p,m){ //(optional) a function to call when the belt moves. (function, default = no function call)
// o = the intance object
// p = the belt position
// m = the minimum belt position
}
});

*/

or post a link to the page you are using the DD script on and I will try and convert it

[saltydog]

When comparing the instructions you included above and viewed source of the http://www.vicsjavascripts.org/AAMou...er/140628A.htm (specifically the vertical scroller in question) there is another DIV ".cmotion" that your instructions in the previous post does not outline.

Also i do not see instructions for all the available optional settings for the javascript call. There does appear to be some brief annotations to the right but are vague. Do you have more?

last the site i am working on is http://saltwater-fishing-charters.com

Thanks for you help and input.

[saltydog]

update:
I finally got it to work. Some advice that may help others...

1) if you use wordpress... Wordpress auto inserts closing tags with in the JS. That will make whole page crash. Have to make separate .js file and call it in your head or header.php. I used = <script type="text/javascript" src="http://saltwater-fishing-charters.com/wp-content/themes/garage1/js/beltslider.js"></script>

2) I also made separate css file & called it from head as well = <link rel="stylesheet" type="text/css" href="/wp-content/themes/garage1/css/beltslider.css" media="all" />

3) in my page i was having issues with it scrolling horizontal even after using the CSS tagged elements ending in V. Your height value must be greater value than the width to scroll vertically on the cmotion div.

my html i am using is as follows:
<div class="parentV" onmouseover="document.getElementById('scrollbarFC').style.visibility='visible';" onmouseout="document.getElementById('scrollbarFC').style.visibility='hidden';">
<div id="FC" class="cmotionV">
<div class="belt">
<div id="scrollcontent"><p> Welcome to the Gulf Coast's premiere Saltwater Fishing Charters and Fishing Guides Service "Salty Dog Fishing Charters". We are conveniently located in Orange Beach, roughly one block west of Perdido Pass bridge only minutes from Gulf Shores and Perdido Key servicing saltwater sport and recreational anglers alike for well over 20 years. We specialize in every aspect of Saltwater Fishing in every Fishing Charter adventure or excursion that we offer. We would like to encourage you to read more about our history with more specific details on our <a title="About Salty Dog Fishing Charters" href="http://saltwater-fishing-charters.com/about-salty-dog-fishing-charters/">About Us</a> page.</p></div>
<div id="scrollcontent"><p> For the recreational fisherman and families alike enjoy our fishing charters for Inshore Fishing the Pass, Bays, Bayous, Coves and along the jetties fishing for Sheepshead, Pompano, Bonefish, Speckled Sea Trout, Tripletail, Flounder and allot more. See more details here about out <a title="InShore Fishing Charters" href="http://saltwater-fishing-charters.com/gulf-coast-fishing-charters/fishing-charter-prices/inshore-fishing-charters/">Inshore Fishing Charters</a>...</p></div>
<div id="scrollcontent"><p> Fishing Charters in the Gulf of Mexico NearShore Fishing close to our pristine beaches typically within 3 miles from the shoreline looking for migrating fish species like Red Drums (aka Redfish), Cobia (aka Lemonfish or Ling) &amp; Mackerels and more when <a title="NearShore Fishing Charters" href="http://saltwater-fishing-charters.com/gulf-coast-fishing-charters/fishing-charter-prices/nearshore-fishing-charters/">NearShore Fishing Charters</a>...</p></div>
<div id="scrollcontent"><p> Choose a Fishing Charter excursion Offshore Fishing the largest Artificial Reef Fishing system along the Gulf Coast for reeling in Snappers, Jacks, &amp; Groupers and more when you are on one of our <a title="Off-Shore Fishing Charters" href="http://saltwater-fishing-charters.com/gulf-coast-fishing-charters/fishing-charter-prices/offshore-fishing-charters/">Offshore Fishing Charters</a>...</p></div>
<div id="scrollcontent"><p> For the serious saltwater Sport Angler would rather to go way out in the Deep Sea Fishing Charters adventure in the deep blue also known as open waters where the depths are many fathoms targeting those huge Tuna family &amp; Monster Billfish like Marlin, Swordfish, Sailfish, Mahi-Mahi (aka Dolphinfish) and more when you are on one of our <a title="Deep Sea Fishing Charters" href="http://saltwater-fishing-charters.com/gulf-coast-fishing-charters/fishing-charter-prices/deep-sea-fishing-charters/">Deep Sea Fishing Charters</a>...</p></div>
</div>
</div>
<div id="scrollbarFC" class="scrollbarV" style="visibility:hidden;">
<div class="slideV" onmouseover="this.className='slideVgrab'" onmousedown="this.className='slideVgrabbed'" onmouseup="this.className='slideVgrab'">
</div>
</div>
</div>

it works pretty well...

My only complaint is it initiates in the wrong direction. It scrolls up vs scroll down when page loads. How to get tit to start scrolling in the opposite direction?

can see script in action at = http://saltwater-fishing-charters.com

[vwphillips]

My name is Paul Dove. I posted for some script help in a post on dynamic drive forum... http://www.dynamicdrive.com/forums/s...-crawlerca5-js

I have made three follow up post and for some reason the moderator has not approved them to be published to the forum. Here is my most recent post... your help is greatly needed and appreciated. just let me know what you need to be compensated for and we will make it so.


I have successfully, deciphered the instructions and have gained the same functionality as the demo you provided. Only have a few questions/request...

1) I have to make the cmotionV div width less than the height to get it to scroll vertically. By adding another Parent Div with overflow:hidden & i have achieved the desired dimensions i wanted and the vertical scrolling does work, however i loose some functionality on the mouseover directional scroll on the bottom of the div and the scrollbar doesn't scroll past the hidden overflow.

2) When page loads the scrolling initiates in the wrong direction. It scrolls the content down the div vs the desired up like the crawler script has. Also when you mouseout of the div the beltslider script does not remember the default up direction and continues on the users last input direction. again the crawler script gives either or option.

3) I appreciate your help trying to get the desired look and feel. Can you modify your beltslider.js to provide those few features the crawler.js does offer?

4) Alast this is my third attempt to try to post more questions and for some reason it never makes it to the forum. I don't understand why but it would be helpful if someone could clue me in why?

my site where i am having the issues is... http://saltwater-fishing-charters.com/


reply

I have added a function to control the scroll bar visibility
Mode options to control Horizontal or Vertical display
option to fix the minimum speed

http://www.vicsjavascripts.org/AAMou...er/140719A.htm