The little popup window appears in the middle of the original page.
The original page is covered by grey shade if not by the popup window.
The underneath original page can still be scrolled up and down.
Follow these steps:
1) Create this CSS rule:
.overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
opacity: 0.5;
background: #666;
filter: alpha(opacity=50); /* opacity for IE browsers */
}
2) Add this code to your jQuery:
$("body").prepend("<div class='overlay'></div>");
3) When done, remove it like this:
$(".overlay").remove();
Didn't test this, but it should work (maybe with very minor modifications). This is one way, if you prefer doing it by yourself. You can, however, use existing solutions such as Twitter's Bootstrap lib which is cool, and I recommend it.
http://twitter.github.com/bootstrap/
Regards.
You could use the JQueryUI dialog widget http://jqueryui.com/dialog/#modal
This is easy enough to achieve with some simple CSS...
The overlay (the grey background) is fixed in place and covers everything below:
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0;
filter: alpha(opacity=0);
z-index: 2; // above content
}
The "dialog" itself is similar in style, but smaller:
#dialog {
display: none;
position: fixed;
width: 500px;
height: 250px;
background-color: #fff;
z-index: 3; // above 'overlay'
}
The top and left attributes can be calculated with simple JavaScript, so that the dialog can be positioned in the center of the browser:
positionDialog = function() {
if (typeof window.innerHeight != 'undefined') {
dialog.top = parseInt(window.innerHeight / 2) - dialog.height;
dialog.left = parseInt(window.innerWidth / 2) - dialog.height;
}
}
And also upon window resize:
$(window).resize(function() {
positionDialog();
}
Notice how the CSS sets these DIVs to display: none. They are hidden until called, which is done by setting them to display: block.
These days, I find that it's much simpler and more robust to rely on jQuery UI's excellent dialog widget.
It's called a light box. There's a way that you can do it using only CSS:
http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/
The key for darkening the background is the CSS opacity property of a box that you cover the background with, which you can set a black background and use this CSS for transparency:
-moz-opacity: 0.8;
opacity:.80;
You could take a look at the modal included in Twitter Bootstrap: http://twitter.github.com/bootstrap/javascript.html#modals
Related
I am running a form from a third-party. The content is at: https://safefuturesct.org/donatenow/
My donation button has somehow become a hidden hover button at the top of the page. Any suggestions on how I can get the donation button back under the form showing permanently?
<div id="bbox-root">
<script type="text/javascript">
window.bboxInit = function ()
{
bbox.showForm('ed52b736-7342-4bc3-a24d-8d669eb3d316');
};
(function () {
var e = document.createElement('script'); e.async = true;
e.src = 'https://bbox.blackbaudhosting.com/webforms/bbox-min.js';
document.querySelector('head').appendChild(e);
} ());
</script>
</div>
Your page is including some CSS at this URL:
https://safefuturesct.org/wp-content/themes/psychologycare/style.css
One of the rules is:
input[type="submit"]{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
border: 1px solid;
cursor: pointer;
z-index: 1;
}
The opacity: 0 makes your button completely see-through, and it also contains the positioning rules that are making it appear on the top.
This rule is what's making the hover make it show up, from a different CSS file:
.BBFormContainer[data-bbox-part-id="ed52b736-7342-4bc3-a24d-8d669eb3d316"] .BBFormSubmitbutton:hover {
opacity: .85;
}
The best way to debug what is causing certain styles to show up is to use your developer tools and look at the computed styles; that will point you to what the effective styles are for an element and where the rules live that are applying those styles.
To make the button not be transparent, you'll have to either edit, remove, or override the styles.
Update
You could try something like this to your CSS to override the offending styles. It's hard to verify/test since this is CSS and there could be lots of things affecting your styles:
input.BBFormSubmitbutton[type="submit"] {
position: static;
left: auto;
top: auto;
width: auto;
height: auto;
opacity: 1;
z-index: auto;
}
I created this demo:
http://cristiantraina.altervista.org/boxfall/
When you click, it creates a red falling box.
The problem is that using only css there are no ways to detect the size of the screen, in fact in my demo I specify that the box has to fall for 1000px, regardless of the actual height of the screen.
This is the code of the keyframe:
#include keyframes("fall"){
to{
top: 1000px;
}
}
I can't use bottom:0px; because I wouldn't know from where to start the fall, and I didn't solve my main problem.
This is the FallBox.js script:
function FallBox(x, side, parent){
this.x = x;
this.parent = parent || $("body");
this.side = side || Math.random()*200;
this.createBox();
this.fall();
}
FallBox.prototype.createBox = function(){
box = document.createElement('div');
$box = $(box); // I hate brackets
$box.addClass("box");
$box.css({
width: this.side+"px",
height: this.side+"px",
left: this.x+"px",
top: "-"+(this.side+5)+"px"
});
this.box = $box;
}
FallBox.prototype.fall = function(){
this.parent.append(this.box);
this.box.addClass("fall");
}
I know that I could use overflow:hidden; in the parent div, but I don't think that this is the ideal solution. First because a user can have got a screen with a superior height, then because I want to the box stops when it meets the edge, as the border was ground and it shouldn't pass through.
Another solution that I found on the web, it's to use the CSSOM API, but not even mozilla developers are sure of the compatibilty of these.
So, how can I stop an animation when it meets the screen edge, since javascript fails to inject properties?
Thank you.
If you're looking for a css-only solution, you could use the css calc feature (http://caniuse.com/#feat=calc) in combination with vh (http://caniuse.com/#search=vh).
document.querySelector(".box").addEventListener("click", function() {
this.classList.toggle("is-dropped");
})
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.box {
position: absolute;
top: 0;
left: 200px;
width: 100px;
height: 100px;
background: red;
transition: top 2s;
}
.box.is-dropped {
top: calc(100vh - 100px);
}
<div class="box"></div>
You coul use the translatey() CSS transform function to shift each div up by 100% of its own height. That way you would just need 2 rules to change the value of the top position without having to worry about height in each case.
(function(d,M){
var div=d.createElement("div"),
wait=0,size;
d.body.addEventListener("click",function(){
if(!wait){
wait=1;
div=div.cloneNode(1);
div.classList.remove("go");// necessary so that newly created divs don't just get added to the bottom of the page
size=M.max(M.floor(M.random()*200),50);
div.style.height=div.style.width=size+"px";
div.style.left=M.max(M.floor(M.random()*this.offsetWidth)-size,0)+"px";
this.appendChild(div);
setTimeout(function(){
div.classList.add("go");// adding this class starts the animation.
wait=0;
},5);
}
},0);
})(document,Math);
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%}
div{
background:#000;
border:1px solid #fff;
transition:top 2s linear;
position:absolute;
top:0;
transform:translatey(-100%);
}
div.go{
top:100%;
}
ORIGINAL SOLUTION
As the height of the box is being set dynamically in your JavaScript, your CSS isn't going to know the height of each box but that doesn't stop you using the CSS calc() function to set the top position you want to animate each to, much like you currently do to set its starting top position. Here's a quick, rough example, with an alternative solution in the comments that doesn't use calc(), if you'd prefer.
var div=document.createElement("div"),
wait=0,size;
document.body.addEventListener("click",function(){
if(!wait){
wait=1;
div=div.cloneNode(0);
size=Math.max(Math.floor(Math.random()*200),50);
div.style.height=div.style.width=size+"px";
div.style.left=Math.max(Math.floor(Math.random()*this.offsetWidth)-size,0)+"px";
div.style.top="-"+size+"px";
this.appendChild(div);
setTimeout(function(){
div.style.top="calc(100% - "+size+"px)"; /* This is the important bit */
// div.style.top=document.body.offsetHeight-size+"px"; /* Alternative solution, without using calc() */
wait=0;
},5);
}
},0);
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%}
div{
background:#000;
border:1px solid #fff;
transition:top 2s linear; /* Using a transition instead of an animation */
position:absolute;
}
I am trying to create a page that has before and after images that use a slider based on mouse movement to show both images. I need to have multiple sliders on the page and can not seem to get them to work. Below are a couple of different examples I have found and the challenges I am having.
http://codepen.io/dudleystorey/pen/JDphy - This works well with mobile but I can not seem to add a second version without adding css for every image since the background image is embedded in the css.
div#inked-painted {
position: relative; font-size: 0;
-ms-touch-action: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
}
div#inked-painted img {
width: 100%; height: auto;
}
div#colored {
background-image: url(https://s3-us-west2.amazonaws.com/s.cdpn.io/4273/colored-panel.jpg);
position: absolute;
top: 0; left: 0; height: 100%;
width: 50%;
background-size: cover;
}
http://codepen.io/ace/pen/BqEer - Here is the other example that does not work as well with mobile. I can add the second image but the slider works all the images simultaneously and not individually when a second image is added.
Can anyone help with adding the second image. I am sure both of these are very workable but I am missing something in my css/javascript knowledge that is not allowing multiple images.
You need to loop though all classes to be able set the eventhandlers individual. Your codepen example could be change to this to work with individual images at once:
var blackWhiteElements= document.getElementsByClassName("black_white");
for (i = 0; i < blackWhiteElements.length; i++) {
initCode($(blackWhiteElements[i]));
}
function initCode($black_white) {
var img_width = $black_white.find('img').width();
var init_split = Math.round(img_width/2);
$black_white.width(init_split);
$black_white.parent('.before_after_slider').mousemove(function(e){
var offX = (e.offsetX || e.clientX - $black_white.offset().left);
$black_white.width(offX);
});
$black_white.parent('.before_after_slider').mouseleave(function(e){
$black_white.stop().animate({
width: init_split
},1000)
});
}
codepen here: http://codepen.io/anon/pen/mJPmKV
Your first attempt is near sufficient.
Assign the background-image inline in the html to avoid extra classes
<div id="colored" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/colored-panel.jpg);"></div>
change background-size on #colored to background-size: auto 100%; to reduce the "shaky" effect
background-size: auto 100%;
Having a problem in trying to copy the height of a responsive image to my mask on first load and on every time the window is resized. I've tried a few js scripts, but still I cant make it happen.
It is really a responsive image slider with a div(mask) exactly over it whatever the viewport screen size is.
this is my jQuery script:
function maskInit(){
var offsetDots = $("#slide").offset().top + $("#slide").height() + "px";
$("#mask").height() = offsetDots;
}
$(document).ready(function() {
maskInit();
});
$(window).resize(function(){
maskInit();
});
and my CSS:
#slide{
height: 10vw; /* to simulate a responsive image */
width: 100%;
margin: 0;
padding: 0;
background: red;
z-index: 0;
}
#mask{
position: absolute;
z-index: 1;
top: 0;
right: 0;
left: 0;
background: gray;
opacity: 0.8;
}
I've setup a jsFiddle here to simulate my problem
There is something wrong with your script.
You are NOT setting the mask height with this:
$("#mask").height() = offsetDots;
Check jQuery .height()
Instead use it this way:
$("#mask").height(offsetDots);
or you can set via css:
$("#mask").css({"height":offsetDots});
Here's your updated jsFIDDLE demo
.height() is a function so you can not do $("#mask").height() = offsetDots; use $("#mask").height(offsetDots); or by .css({"height":offsetDots}) to set height.
This is the HTML code:
<div id="dialog" title="lala" style="display:none;">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
This is the JavaScript
$bb('#addTopicButton').live('click',function() {
$bb( "#dialog" ).dialog({ modal:true, closeOnEscape: false, draggable:false, resizable:false });
});
Why modal is not working? When it is opened I still can click other links on the page and do things in the background.
Thanks a lot
UPDATE:
It seems to be working though. Only the links are active in the background and working. How can I disable everything, including links?
You probably just need to include the jQuery UI CSS to your page.
Google has this on its CDN here:
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css
The modal option on the dialog creates an overlay under your dialog but over the rest of the content. This overlay needs the jQuery UI CSS to function correctly.
Just had the same issue. I needed the CSS, but I didn't want all of it. So I just copy pasted this part in my own CSS code:
.ui-widget-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #aaaaaa;
opacity: 0.3;
}
Adding only .ui-widget-overlay to your css will make the overlay appear on the complete top, and even the dialog will be unusable.
Therefore, the .ui-front class too should be added:
.ui-widget-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ui-front {
z-index: 100;
}
I had the same problem I solved it in nearly the same way I went into the 'jquery-ui.theme.css' file searched for '.ui-widget-overlay' and changed the block from:
.ui-widget-overlay {
background: #A9BCD0;
opacity: 1;
filter: Alpha(Opacity=100); /* support: IE8 */
}
to
.ui-widget-overlay {
background: #A9BCD0;
opacity: .3;
filter: Alpha(Opacity=30); /* support: IE8 */
}