I want to create a fixed position button that will run on my site, either on the left hand side or as a popout panel (see http://uservoice.com/fullservice for a cool popout button at the bottom of the screen). Clicking on the button will launch a popup window that my company uses for contact and feedback information.
Is there a basic example CSS for these types of buttons? I am a JS guy and created the popup window with no problems, but I don't have the CSS skills to get the button to activate my window.
the css would be:
.button {
position: fixed;
bottom: 0;
right: 0; //or left: 0; depending on where you want it to be.
}
with html being:
<div class='button'> button text here </div>
Try something like this:
#feedback-button {
position: fixed;
bottom: 0px;
right: 0px;
}
Related
I come from a C# background so bear with me I already know the way I'm going about this isn't ideal:
But I need to do this:
Create a centered popup that scrolls with the page when the user clicks on some text the code must be embedded JavaScript in a HTML page(s), nothing server side (other than maybe css).
-preferably text links to popups need to be reusable I don't want to embed a bunch of code each for each link.
-I've looked at a lot of "pop-up" tutorials/exmaples but since I need embedded client side javascript it limits what works.
The result I would like to have a webpage with premade popups that I can reference from other webpages like OpenPopup(webpage.getElement(popupNumber12)) or have arrays with popup titles, descriptions that I can pass though.
Sounds like you're looking have to a modal rather than a popover since you don't want it to close after interacting with the page. I would just have a modal open with an onClick event and then describe its position as:
.modal {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}
Assuming the width of the modal you want to display is 300px.
If you're working with SCSS
$width = 300px
$height = 300px
.modal {
width: $width;
height: $height;
position: absolute;
left: calc(50% - $width)
top: calc(50% - $height)
}
My Website : http://calisyo.com/product-category/?product=?/jacket-2-poche/
i have problem with my menu when i scrool hes scroll also
in this page I want the top menu to stay on the top of the page when a user/member scrolls.
so looking at your site, when I played around in the Dev tools if i commented out the "banner--stick" css it stayed at the top the whole time. I would only use the position fixed and try not to mess with JS to change the css class you the page is scrolled
use below css
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
margin-top: 0;
Try adding this CSS rule:
header#masthead.banner--stick {
margin-top: 0;
}
So I have a div that is formatted to essentially be a "pop-up" on my website. So on the website, you can scroll. But then when you click an icon to trigger the pop-up, the pop-up itself will allow scrolling (and the scrolling of the website will be disabled). But now I have an image for the "close" button which I want to be fixed in a certain position on (and only on) this div. How would I accomplish this? I don't want the close image to show up at all until the popup is shown, and it disappears when the popup is closed. Currently, I'm using "position:absolute" and it only shows for the popup, and goes away when the popup is closed. But the user has to scroll back up to see the close button again.
Fiddle Here
Using absolute position is a fine idea in this situation. The key is to make sure that the close button isn't inside the scrollable pane, but on the same level as the wrapper.
HTML
<div class="popup">
<div class="popup-content-wrap">
<div class="popup-content"></div>
</div>
<div class="close">close</div>
</div>
CSS
.popup {
position: fixed;
background-color: blue;
left: 50px;
right: 50px;
bottom: 50px;
top: 50px;
}
.popup-content-wrap {
height: 100%;
width: 100%; overflow: auto;
}
.popup-content {
height: 1000px;
}
.close {
position: absolute;
bottom: 20px;
right: 20px;
}
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.
OK, So i have this snippet http://jsfiddle.net/8vFEd/ here;
whenever the popup comes up, I either want to disable the background, so that users can't click on another language until they close the first popup, or how would I accomplish that, whenever users click on second language, the first popup disappears and its corresponding popup appears.
My suggestion would be to put an overlay over the background which will "catch" clicks through to the rest of the page. Add the following to your $('.prop a').click() function, before the <div class='lang'> append call:
$("body").append('<div class="modalOverlay">');
and this to your css:
.modalOverlay {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: rgba(0,0,0,0.3); /* black semi-transparent */
}
Then in your code for handling "close" clicks, remove this .modalOverlay from the DOM. Remember to add the overlay before your popup window so it sits behind the window (or add "z-index: 5" to your overlay css and "z-index: 6" to your popup css)
I would also suggest modifying your .lang css rule to be position: absolute; or fixed instead of relative.
Add this at beginning of your onclick
$(".lang").remove();
That will remove or clear the div with lang class before repainting the DOM with a new one.