I am trying to implement a drop-down menu containing notifications, like this page has: http://infinite-woodland-5276.herokuapp.com/index.html. The bullhorn icon in the top right part of the site, and it's menu, is what I am trying to recreate.
I have succesfully made a header menu icon, with a list of items. However I can't make the scrollbar work.
It's using the jquery plugin slimScroll, found here: http://rocha.la/jQuery-slimScroll.
The attatchment of the scrollbar seems extremely simple and straight forward, in the tutorials. Here is what I do:
$(document).ready(function(){
$('#main-navbar-notifications').slimScroll({
height : 250
});
});
After implementing this code, This code appears in my DOM:
<div class="slimScrollBar" style="width: 7px; position: absolute; top: 0px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 195.925px; background: rgb(0, 0, 0);"></div>
<div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; opacity: 0.2; z-index: 90; right: 1px; background: rgb(51, 51, 51);"></div>
These appear not inside the #main-navbar-notifications, as I would have expected, but subsequently. However, I found that the exact same DOM structure is present in the example I am trying to copy. Seems like it is as it should.
But my scrollbar simply does not work. If I hover the mouse over the div, nothing happens. I tried setting the scrollbar to always be visible, and still nothing happened. Then I went into the HTML itself, in chrome inspector, and manually set the scrollbar and rail to be visible. That worked for visibility, as they visually appeared exactly as I would have expected them to, but they still didn't react to any mouse actions.
The only info I have been able to find on the subject, is to make sure that my scrolling div is set to position: relative;, but that didn't do anything. There are no error messages, or any messages at all in my console either.
I've tried to recreate my problem in a fiddle, but I was unable to upload the slimscroll-library there.
Does anyone know what this error could be about? Or any strategies for figuring out what the problem actually is?
Turns out, I had manually copied a <div class="slimScrollDiv">, a wrapping div which is supposed to be generated from the plugin, for the scrolling pane. Once I removed that div, slimScroll worked perfectly...
Related
I'm working on a accessibility issue with an element. I need to hide this element so users can't click/tap it but without disabling the event. I don't want to disable it because voiceover will not be able to trigger the event if it's disabled. I'm using below css but there is still a small hitzone that I can't get rid of.
position: absolute;
left: 15px;
top: 36px;
width: 0;
height: 0;
opacity: 0;
What I have tried so far:
visibility:hidden;
z-index: -1;
onmousedown
It doesn't work as I would like :(
EDIT------------
So I tried to play around with the css and added below to simply relocate the select element and minimize the chance users will click/tap on it:
left: 0;
top: -36px;
z-index: 100;
So there is still a hitzone but it's nearly impossibly for someone to click/tap it. Voiceover can live with this and it doesn't change any behavior for users.
If you're using bootstrap, you could try using the class "sr-only".
If not, well, there's no harm in "borrowing" the style from that:
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
I borrowed this sample from this answer since I haven't got the bootstrap source to hand but it looks accurate to me.
You can find out more from the Bootstrap accessibility page
Have you tried display:none . Give it a shot. If not, please post your code here, so we can see the actual problem.
Why don't you just make the element transparent. That way users' won't be able to click or tap on it, and you will still get the events.
I am using the following plugin for alerts on my page: http://justindomingue.github.io/ohSnap/
I have the plugin working within all of my JS functions.
What is not happening though is the position. The alerts are supposed to be in the bottom right corner of the page, and stack on top of each other if there are multiple. They do stack. They are in the bottom right corner, BUT let's say the user scrolls down my page to submit a form. The notification DOES NOT appear in the new bottom right corner, but appears in the original position before the page was scrolled.
The CSS for the alerts position is:
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid #eed3d7;
border-radius: 4px;
position: absolute;
bottom: 0px;
right: 21px;
/* Each alert has its own width */
float: right;
clear: right;
}
I tried changing position to fixed, but got the same exact result.
I'm hoping someone here has used this plugin before and experienced the same results with solution.
UPDATE WITH SOLUTION
It turns out that the plugin page is lacking a piece of code used in the demo page source. After using the missing piece it works fine now.
I am working on this site http://www.group---me.my/national/
Please remove --- in the url.
For certain deals, there is options, and when you click on the BuyNow button, a popup comes up. I would like to dim (darken) the background, while the popup is shown.
To do this, on my local test site, I added the following div class:
.overlay{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 333%;
background-color: black;
z-index: 20;
opacity: 0.8;
filter: alpha(opacity=80);
}
Then on the Buy Now button, I added
onclick="javascript:document.getElementById('fade').style.display='block';"
I also have this in the site
<div id="fade" class="overlay"></div>
But the problem is, the overlay always hides all the layers, including the popup, regardless how high I set the popup div's z-index.
Any help is much appreciated. Thanks.
Which browser? Which version. I am getting it right here. It should hide right?
And it is prominent. What is that you wanna do here?
If you doesn't specify some parent element to be relative positioned, your overlay div will be positioned relative to body so it can be above all other content.
I have the following div set which only works in IE9. On Moz and Webkit the onclick will not fire. If I chaneg the z-index to 0, the onclick works, but I have visibility issues with other elements in the site. Is there a way to get onclick to fire with negative z-indices?
<div id="adbg" style="margin: 0pt auto; height: 1000px; width: 100%; position: fixed; cursor: pointer; z-index: -1;">
<div OnClick="window.open('/bgClicks/2');" style="background: #fff url('http://www.example.com/img/bg/w_1.jpg') no-repeat center top fixed; height: 100%; width: 100%; margin: 0pt auto; cursor: pointer;"></div>
</div>
<div id="wrapper">
Having a z-index of - here is definitely the problem. What is happening in Moz/Webkit is the outcome to be expected, you must have an invisible/transparent laying over the object that is picking up the click, thus not letting it go through to the actual link.
There are several things you can do..
1) Find the object that is over-lying it (Pretty easy in Chrome, just right click - inspect element, and usually the direct element under the mouse will be automatically highlighted in the inspector. Then for this element give a css rule of:
pointer-events: none;
This allows the click to register through it and to the object below.
Please note browser support for this isn't great, so I'd suggest another solution:
2) Restructure your code so that you don't run into this problem, in the logical world why would you have anything over the top of a link anyway, it's down to poor structuring really, re-think your margins/paddings, or make a jsfiddle so we can have a better look :).
I've been trying out a few lightboxes for my website using MooTools 1.4, and I found this one that works and looks really nice (with easy implementation):
http://andrewplummer.com/code/quickbox/
On the demo website, the lightbox works perfectly, clicking the image brings up the overlay and image, and clicking the overlay removes them.
On my website, when you click an image that's marked appropriately, the lightbox pops up and everything works properly, however, when you exit the lightbox by clicking the overlay or pressing q/x/esc, the overlay hides and everything looks great. The only problem with this is that for some reason, this is being embedded into the body of my code:
<div id="qbOverlay" style="display: block; width: 100%; height: 100%; opacity: 0; "></div>
The problem that this causes is that it isn't ever removed after the lightbox is closed, so the entire page is blanked in
#qbOverlay {
display: block;
position: absolute;
z-index: 100;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
cursor: pointer;
}
This is a problem because this makes the entire top of the page this overlay, and it's never removed after the lightbox is closed. When it's like this, I can't click any links or use any input boxes in the area that it's covering.
I have a feeling that the thing causing this problem is this:
close: function(){
this.quickBox.setStyle("display", "none");
this.quickBox.setStyle("cursor", "auto");
this.overlay.fade("out");
this.active = false;
}
I've tried using MooTools with compatibility mode and having every extra turned on, but with no luck.
This is an actual bug in mootools 1.4 https://github.com/mootools/mootools-core/issues/2074
Its about to be fixed this week in 1.4.1 (hopefully) but you can take the updated Fx.tween element shortcut protiotypes code for the fade here:
https://github.com/cpojer/mootools-core/commit/11b4257f12a51454bd513ab1ac32cd5239d66098
Alternatively, use a simple tween on opacity instead of .fade(), it allegedly works. You can also do a destroy on the overlay, which to me is the best fix