Attention:

Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
This will help ensure your support issue will be attended to in a quick and efficient manner.

  ClosedNew TopicNew Poll

 Scrolling with mousewwheel not working [SOLVED]
#
Hi there,

We have two versions of an application. The CSS for these are in the skin style sheet to minimise members "breaking" the code. However, we have noted that the Free Form application writing sample will scroll with a mouse wheel yet the traditional Application will only scroll if the scroll bar is dragged by the mouse while left clicking.

This is being viewed on a Google chrome browser.

Free form application HERE

Traditional Application HERE

I suspect it is something in the traditional app CSS but I can't put my finger on it.

Any help is appreciated as the issue seems to affect viewing on a phone as well in the same way.

Thanks! http://files.b1.jcink.com/html/emoticons/smile.gif


CSS code:

CODE
/* FEV app template */
.FEV-CTW { width: 502px; height: 402px; border: 1px solid #422600; padding: 3px; background-image: url(http://oi60.tinypic.com/jpiwb7.jpg);}.FEV-CTW1 { width: 500px; height: 400px; position: relative; } #glide { border: 1px solid #422600; position: relative; width: 210px; height: 310px; left: -145px; overflow: hidden; } #glide:hover .hover { top: 0px; } .hover { width: 200px; height: 300px; background-color: #fafafa; position: relative; top: 300px; -webkit-transition-duration: .7s; -moz-transition-duration: .7s; -o-transition-duration: .7s; overflow: hidden; } .FEV-CTW5 { position: relative; width: 200px; height: 230px; left: -50px; font-family: 'Special Elite', sans-serif; font-size: 13px; color: #422600; text-align: center; overflow: hidden; padding: 5px; top: 25px; margin-left: 45px;} .FEV-CTW5 font { display: block; text-align: center; line-height: 70%; margin-bottom: 25px; color: #422600;} .FEV-CTW5 i { font-family: 'Roboto Condensed', sans-serif; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; border-top: 1px solid #d8d8d8; padding: 5px; } .FEV-CTWimg1 img { position: absolute; width: 200px; height: 270px; left: 25px; top: 24px; } .FEV-CTW2 { position: absolute; width: 270px; top: -312px; height: 399px; right: 0px; border: 1px solid #422600; background-color: #fafafa; text-align: justify; } .FEV-CTW6 { position: relative; width: 510px; height: 20px; font-family: 'Rye', sans-serif; font-size: 15px; text-transform: uppercase; text-align: center; color: #422600; overflow: hidden; margin-bottom: 3px; } .FEV-CTW3 { width: 235px; height: 360px; padding: 15px; font-family: 'Roboto Condensed', sans-serif; font-size: 13px; color: #422600; letter-spacing: 1px; line-height: 15px; text-align: justify; text-transform: none; overflow: auto; } .FEV-CTW3::-webkit-scrollbar { width: 3px;} .FEV-CTW3::-webkit-scrollbar-track {background-color: #fafafa; } .FEV-CTW3::-webkit-scrollbar-thumb {background-color: #422600;} .FEV-CTWtab1 { position: relative; height: 500px; width: 500px; clear: both; } .FEV-CTWtab2 label { display: block; position: absolute; width: 200px; height: 12px; border: 1px solid #422600; background-color: #fafafa; padding: 5px; right: 288px; padding-top: 7px; top: 5px; font-family: 'Roboto Condensed', sans-serif; font-size: 9px; color: #422600; text-transform: uppercase; letter-spacing: 3px; text-align: center; line-height: 100%; } .FEV-CTWtab2 [type=radio] { display: none; } [type=radio]:checked ~ label { z-index: 0; color: #a99883; font-style: italic; } [type=radio]:checked ~ label ~ .FEV-CTW2 { z-index: 1; opacity: 1; }

.FEV-CTW3 font { display: block; } .FEV-CTW3 b { font-size: 10px; text-transform: uppercase; letter-spacing: 2px; margin-right: 4px; } .CTWsample { margin-top: 10px; width: 500px; height: 200px; padding: 3px; font-family: 'Roboto Condensed', sans-serif; font-size: 10px; text-align: justify; line-height: 13px; overflow: auto; } .CTWsample font { display: block; width: 490px; border-bottom: 1px solid #3B170B; padding: 5px; font-family: 'Special Elite', sans-serif; font-size: 10px; color: #3B170B; font-weight: bold; letter-spacing: 5px; line-height: 7px; text-align: center; margin-bottom: 5px; overflow: hidden; } .CTWsample::-webkit-scrollbar { width: 3px;}.CTWsample::-webkit-scrollbar-track {background-color: #fafafa;}.CTWsample::-webkit-scrollbar-thumb {background-color: #6e491d;}

.FEV-CTW7 { position: relative; width: 212px; height: 84px; margin-top: 6px; left: -146px; line-height: 100%; overflow: hidden; } .FEV-CTW7 font { display: inline-block; width: 101px; height: 16px; background-color: #fafafa; border: 1px solid #f2f2f2; font-family: 'Roboto Condensed', sans-serif; font-size: 9px; color: #848484; text-transform: uppercase; letter-spacing: 2px; line-height: 10px; padding-top: 7px; margin-bottom: 2px; overflow: hidden; }

.FEV2-CTW2 { position: absolute; width: 270px; top: 0px; height: 399px; right: 0px; border: 1px solid #f2f2f2; background-color: #fafafa; text-align: justify; }


/* FEV freeform app template */
.FEV-CTW3 font { display: block; } .FEV-CTW3 b { font-size: 10px; text-transform: uppercase; letter-spacing: 2px; margin-right: 4px; }
PM
#
This one is really tough. It's definitely CSS, and what's happening is some kind of "over flow" is blocking mouse input. I see this sometimes with other elements. For me, I can get it to highlight the scrollbar when my mouse is about 125% to the right of the bar. So it's just not "picking up" the input.

Here's what I would do. Work backward a bit - remove each class one by one above until the issue disappears. Then post back when you have found the bit that's causing it.

signature
email: admin@jcink.com :: blog: John C.
#
Thanks for your help!

I found it!

There were a few errors in the Div Class for the tab names in the doHtml template.
But the scroll blocker was this bit:


CODE
.FEV-CTWtab1 { position: relative; height: 500px; width: 500px; clear: both; }


The height should have been 12px not 500px!

So thank you for your guidance! http://files.b1.jcink.com/html/emoticons/biggrin.gif

This post has been edited by charlotte1912: Mar 31 2016, 08:20 AM
PM
#
Ahh what a pain that can be sometimes to find or spot but yep, you got it. Thanks for sharing the solution, will mark as solved.

signature
email: admin@jcink.com :: blog: John C.
#
This topic has been solved. If you need anymore help please post a new thread. Thanks for choosing Jcink services.

signature
email: admin@jcink.com :: blog: John C.
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

Options ClosedNew TopicNew Poll