Databases
StackOverflow2013
Postsdbo
POImplementing scroll bar, but cursor is not moving at all? Also, if you could please let me know how to embed mouse-scroll in this?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POImplementing scroll bar, but cursor is not moving at all? Also, if you could please let me know how to embed mouse-scroll in this?
    primarykey
    data
    text
    <p><strong>my css code :</strong> This is for the scrollbar view, and the movement of the bar</p> <pre><code>#updateHolder { /*this describes the outer structure of the scroll bar */ width: 300px; /* &lt;= For Width: change the width value */ color: #333; /***/ margin-top: 10px; /***/ overflow: hidden; /***/ border:0px solid #CCCCCC; /***/ } #updateContainer { /***/ background-color: white; /***/ position: relative; /***/ cursor: pointer; /***/ } #updateContent { background: #fff; position: absolute; padding-right: 12px; } #updateScollBar { /***/ background: #F2F2F2; /***/ border-left: 1px solid #DADADA; /***/ position: absolute; width: 10px; /***/ right: 0; /***/ bottom: 0; /***/ cursor: default; zoom: 1; filter: alpha(opacity=25); /* For IE8 and earlier */ opacity: 0.25; } #updateScollScrubber { background-color: 909090; width: 9px; height: 100px; position: absolute; border-left:1px solid #676767; border-top:1px solid #676767; } #updateScollBar, #updateContainer, #updateHolder { height: 300px; /* &lt;= For Height: change the height value */ } </code></pre> <p><strong>Javascript code :</strong> Though I mentioning it differently, I have embedded it in my html code which i have pasted just below it</p> <pre><code>$(document).ready(function(){ //This code doesnt enable mouse-scrolling var _offsetY = 0, _startY = 0, scrollStep = 10, isScrollBarClick = false, contentDiv, scrubber, scrollHeight, contentHeight, scrollFaceHeight, initPosition, initContentPos, moveVal, scrubberY = 0; element = document.getElementById("updateHolder"); if (element.addEventListener) /** DOMMouseScroll is for mozilla. */ element.addEventListener('DOMMouseScroll', wheel, false); /** IE/Opera. */ element.onmousewheel = document.onmousewheel = wheel; // To resize the height of the scroll scrubber when scroll height increases. setScrubberHeight(); contentDiv = document.getElementById('updateContainer'); scrubber = $('#updateScollScrubber'); scrollHeight = $('#updateScollBar').outerHeight(); contentHeight = $('#updateContent').outerHeight(); scrollFaceHeight = scrubber.outerHeight(); initPosition = 0; /***/ initContentPos = $('#updateHolder').offset().top; /***/ // Calculate the movement ration with content height and scrollbar height moveVal = (contentHeight - scrollHeight)/(scrollHeight - scrollFaceHeight); $('#updateHolder').bind('mousewheel', wheel); $("#updateScollScrubber").mouseover(function() { // Enable Scrollbar only when the content height is greater then the view port area. isScrollBarClick = false; if(contentHeight &gt; scrollHeight) { // Show scrollbar on mouse over $(this).animate({opacity: 1}); scrubber.bind("mousedown", onMouseDown); } }).mouseout(function() { isScrollBarClick = false; if(contentHeight &gt; scrollHeight) { // Hide Scrollbar on mouse out. $(this).animate({opacity: 0.25}); $('#updateHolder').unbind("mousemove", onMouseMove); scrubber.unbind("mousedown", onMouseDown); } }); $("#updateScollBar").mousedown(function(){ /***/ isScrollBarClick = true; /***/ }).mouseout(function(){ isScrollBarClick = false; /***/ }).mouseup(function(event) { if( isScrollBarClick == false ) return; if ((event.pageY - initContentPos) &gt; (scrollHeight - scrubber.outerHeight())) { scrubber.css({top: (scrollHeight - scrubber.outerHeight())}); }else{ scrubber.css({top: (event.pageY - initContentPos) - 5}); } $('#updateContent').css({top: ((initContentPos - scrubber.offset().top) * moveVal)}); }); function onMouseDown(event) { $('#updateHolder').bind("mousemove", onMouseMove); $('#updateHolder').bind("mouseup", onMouseUp); _offsetY = scrubber.offset().top; _startY = event.pageY + initContentPos; // Disable the text selection inside the update area. Otherwise the text will be selected while dragging on the scrollbar. contentDiv.onselectstart = function () { return false; } // ie contentDiv.onmousedown = function () { return false; } // mozilla } function onMouseMove(event) { isScrollBarClick = false; // Checking the upper and bottom limit of the scroll area if((scrubber.offset().top &gt;= initContentPos) &amp;&amp; (scrubber.offset().top (initContentPos + scrollHeight - scrollFaceHeight)) { scrubber.css({top: (scrollHeight-scrollFaceHeight-2)}); $('#updateContent').css({top: (scrollHeight - contentHeight + initPosition)}); } $('#updateHolder').trigger('mouseup'); } } function onMouseUp(event) { $('#updateHolder').unbind("mousemove", onMouseMove); contentDiv.onselectstart = function () { return true; } // ie contentDiv.onmousedown = function () { return true; } // mozilla } function setScrubberHeight() { /***/ cH = $('#updateContent').outerHeight(); sH = $('#updateScollBar').outerHeight(); if(cH &gt; sH) { // Set the min height of the scroll scrubber to 20 if(sH / ( cH / sH ) &lt; 20) { $('#updateScollScrubber').css({height: 20 }); }else{ $('#updateScollScrubber').css({height: sH / ( cH / sH ) }); } } } function onMouseWheel(dir) { scrubberY = scrubber.offset().top + (scrollStep * dir) - initContentPos; if ((scrubberY) &gt; (scrollHeight - scrubber.outerHeight())) { scrubber.css({top: (scrollHeight - scrubber.outerHeight())}); }else { if(scrubberY &lt; 0) scrubberY = 0; scrubber.css({top: scrubberY}); } $('#updateContent').css({top: ((initContentPos - scrubber.offset().top) * moveVal)}); } /** This is high-level function. * It must react to delta being more/less than zero. */ function handle(delta) { if (delta &lt; 0) { onMouseWheel(1); } else { onMouseWheel(-1); } } /** Event handler for mouse wheel event. /***/ */ function wheel(event){ /***/ var delta = 0; /***/ if (!event) /* For IE. */ /***/ event = window.event; /***/ if (event.wheelDelta) { /* IE/Opera. */ delta = event.wheelDelta/120; } else if (event.detail) { /** Mozilla case. */ /** In Mozilla, sign of delta is different than in IE. * Also, delta is multiple of 3. */ delta = -event.detail/3; } /** If delta is nonzero, handle it. * Basically, delta is now positive if wheel was scrolled up, * and negative, if wheel was scrolled down. */ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ if (delta) handle(delta); /** Prevent default actions caused by mouse wheel. * That might be ugly, but we handle scrolls somehow * anyway, so don't bother here.. */ if (event.preventDefault) event.preventDefault(); event.returnValue = false; } }); </code></pre> <p><strong>HTML code goes here</strong> I am not sure but I think I am making some mistake here</p> <pre><code> &lt;link rel="stylesheet" type="text/css" href="Css_file.css" media="screen" /&gt; &lt;div id="updateHolder"&gt; &lt;div id="updateContainer"&gt; &lt;div id="updateContent"&gt; //Placing my content here Dummy Text &lt;img src="http://articles.tutorboy.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"&gt; msg orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. &lt;/div&gt; &lt;div id="updateScollBar"&gt; &lt;div id="updateScollScrubber"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Really sorry for poor html representation as I could not represent the tags properly. ANY HELP WOULD BE REALLY APPRECIATED. THANKS</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USSandBag_1996
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POImplementing scroll bar, but cursor is not moving at all? Also, if you could please let me know how to embed mouse-scroll in this?
      1. This table or related slice is empty.
      1. VTDownMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload