Results 1 to 8 of 8

Thread: Add Vertical Scrollbar to crawlerca5.js

  1. #1
    Join Date
    Jun 2014
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Add Vertical Scrollbar to crawlerca5.js

    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:
    Code:
    <div class="marqueev" id="fishingcharters" onmouseover="this.className='grab'" onmouseup="this.className='grab'" onmousedown="this.className='grabbing'">
    and
    Code:
    .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:
    Code:
    .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.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,807
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Jun 2014
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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>

  4. #4
    Join Date
    Jun 2014
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  5. #5
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,807
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    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
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  6. #6
    Join Date
    Jun 2014
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  7. #7
    Join Date
    Jun 2014
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  8. #8
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,807
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    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
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Similar Threads

  1. Facescroll -- vertical scrollbar not appearing
    By DDmUSA in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 04-07-2014, 08:12 PM
  2. How to get rid of vertical scrollbar for dhtml window
    By vishalcu in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 06-22-2012, 12:35 PM
  3. Vertical Scrolling Image/s + Scrollbar?
    By trumpdown in forum Looking for such a script or service
    Replies: 0
    Last Post: 10-09-2008, 03:17 PM
  4. Replies: 1
    Last Post: 05-10-2006, 09:16 AM
  5. How to enable vertical right scrollbar...?
    By hktvb2001 in forum JavaScript
    Replies: 0
    Last Post: 10-20-2005, 12:29 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •