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.
Related
Is there any way to get rid of the border around the close (x) button on google maps info windows?
Screenshot.
I have tried everything I can find on stack overflow.
This doesn't work:
.gm-style .gm-style-iw + div {
display: none; /* <-- this will generally work on the fly. */
visibility: hidden; /* this 2 lines below are just for hard hiding. :) */
opacity: 0;}
Nor does this:
.gm-style-iw + div {display: none;}
Maybe replacing the image in the info window would be an alternate solution? Is there any way to do that?
In my case was the button focus, solved like this:
.gm-style-iw button:focus {
outline: 0;
}
Based on the Infowindow documentation:
The InfoWindow class does not offer customization.
I would suggest that you use the customized popup as this doesn't contain the close button in the creation of the popup.
function Popup(position, content) {
this.position = position;
content.classList.add('popup-bubble');
// This zero-height div is positioned at the bottom of the bubble.
var bubbleAnchor = document.createElement('div');
bubbleAnchor.classList.add('popup-bubble-anchor');
bubbleAnchor.appendChild(content);
// This zero-height div is positioned at the bottom of the tip.
this.containerDiv = document.createElement('div');
this.containerDiv.classList.add('popup-container');
this.containerDiv.appendChild(bubbleAnchor);
// Optionally stop clicks, etc., from bubbling up to the map.
google.maps.OverlayView.preventMapHitsAndGesturesFrom(this.containerDiv);
}
You may see the example here
Note: Please don't forget to add your API key in the sample.
Right now there looks to be quite a bit of padding around the x in the screenshot. I'd inspect the element and see if there are any styles from parent elements or related classes overriding changes you make on its border or outline. If not, have you tried the following selectors?
outline: none
border-radius: 0
Try this, in side of InfoWindow.
<div style="position: absolute; top: 0px; right: 0px; width: 20px; height: 20px; background-color: white; z-index: 2;"></div>
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...
I'm trying to achieve an effect similar to the one seen here on Dropbox's landing page. Notice that there's a link at the bottom of your browser viewport ('learn more'). This is always at the bottom of the page on first load. However, it's not fixed to the bottom of the window as you can scroll past it.
Any idea how to achieve this? A CSS or jquery solution is fine.
It's a link within a div which has the following CSS (the div's):
position: absolute;
bottom: 50px;
left: 0;
width: 100%;
text-align: center;
cursor: pointer;
The important parts there are position:absolute and bottom:50px
I have some expanding content in my #main (or) #panel (got this from a template) div, but when you expand it, it pops to the unknown, under the page...
How could I make my main div expand with my content.
CSS
#main
{
position: relative;
overflow: hidden;
}
I also have some JS/Ajax scripts that expand the page to the right size when you switch page, could they affect...?
See live demo here! (The (i) button)
The divs expand when you click on them.
A few times it worked on another computer, but very randomly..
Tell me if you need the scripts or more code.
Basically, everything's wrapped in .main -> .panel
Simple: When the div is expanded, expand the main div's height to fit it.
.panel
{
position: relative;
display: table-cell;
width:100px;
vertical-align:middle;
}
The problem is not with the main div, but the class panel.
.panel {
padding: 3.5em 2.5em 3.5em 2.5em;
position: absolute; // I'm the problem
top: 0;
left: 0;
width: 45em;
}
This is also a problem.
#me .pic img {
position: relative; // I'm evil
display: block;
height: 100%;
}
My debugging may have been awry though, since it doesn't want to play nice and stick with what I want it to do sometimes.
Let me know if this helps in some way, and if you need help debugging anything from there.
EDIT
Your problem may just be a matter of recalling the Script that you use to re-size the main div when the script that displays the hidden divs content goes off. That should re-size the page to fit the new content.
I can't locate where this script goes off, so if you can provide it, I could figure it out.
If your question is actually "how do I make my main div's height change dependent on it's contents" then all you need to do is remove overflow: hidden; from the css class.
I'm essentially trying to create a div which is an image of a button, and when the user clicks it a function is executed. For some reason the div is not showing up at all! What in the world am I setting wrong?
CSS:
#customizeButton
{
background-image:url('images/customizeButton.png');
position:absolute;
top:35%;
left:25%;
width:370px;
height:350px;
background-repeat:no-repeat;
-webkit-background-size:100% auto;
z-index: 150;
}
HTML:
<div id ="customizeButton"></div>
It has to be something with the CSS side. I've got almost identical code for another "button" which I use as an exit button, but it uses a text character instead of an image. It works just fine...
Here's the code for reference:
CSS:
#statSheetExitButton
{
width: 40px;
height: 40px;
position: absolute;
font-weight: bold;
top: 17%;
left: 74%;
font-size: 150%;
font-style: normal;
color: black;
z-index: 50;
}
HTML:
<div id ="statSheetExitButton">X</div>
And again, the question is why the customizeButton is not showing up.
EDIT: ANSWER The problem was that I had the html code for my initial Stat Sheet components in another html file in the same folder, and my program was only listening to that file.
Is this the correct path to your image?
background-image:url('customizeButton.png');
This would only work if the img was in the same directory as the css.
You are absolute positioning your element. Could you be positioning it on top of a relative positioned element that is causing it to be placed outside of the viewport of the browser screen. Use the inspector tools in Chrome, Firefox or Safari to find out where the div is. That'll get you on the right track.
I think your div is empty so that,s why div is not showing, try to write some text or some thing else in div
My thoughts:
display: block; missing
you don't need background-repeat(nor -webkit-background-size), because you are giving it a height & width
if you are only positioning this container, you do not need z-index
Make sure your button is inside a positioned element, which isn't itself hidden.