I've created a custom modal popup box. To show or hide the modal box, I've used JQuery code. Below is my CSS style code and JQuery code
CSS
.overlay {
position: fixed;
background: #000;
opacity: .8;
height: 100%;
width: 100%;
display:none;
z-index: 999
}
.modal {
position: absolute;
margin: 30px auto;
background: #fff;
display:none;
height: 200px;
width:600px;
top: 60px;
}
JQuery Code:
function showModal(){
$('.overlay').show();
$('.modal').fadeIn(100);
}
HTML Code:
<div class="overlay"></div>
<div class="modal">
<div class="modal_title">My Title</div>
<div class="modal_inner">
My Modal Content
</div>
</div>
Now, it's showing below output.
I want to remove this disturbance from UI. But need to know why it's appearing?
Is my code wrong? or Is there any other possibilities of this issue? How can I solve it?
This is definitely not something caused by your code, but by the browser. Confirm by trying to use other browsers too.
There unfortunately isn't much you can do. You can wait for them to fix it, or you can try a different approach which happens to not screw up with the rendering, but those are the only options as I see it.
I suppose that you want to achieve something like this:
$('.overlay').show(400, function() {
$(this).append($('.modal'));
$('.modal').fadeIn(1000)
});
.overlay {
position: fixed;
background: #000;
opacity: .8;
height: 100%;
width: 100%;
display: none;
z-index: 999;
}
.modal {
position: absolute;
margin: 30px auto;
background: #fff;
display: none;
height: 200px;
width:600px;
top: 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay"></div>
<div class="modal">
<div class="modal_title">My Title</div>
<div class="modal_inner">
My Modal Content
</div>
</div>
You should use callbaks in order to make it work consecutively like overlay -> modal. That disturbance is related to fading in your modal - it is hapenning at the same time as the overlay appeares. They overlap and get animated so we see some weird visual effect related to page rendering while animating.
Related
I'm wanting to create a div panel with a link which when clicked slides a panel in from the right, I have this working fine but I want to have the clickable link pushed out with the div panel and it's this I cannot figure out although i'm guessing it's really simple.
The html I have is:
<div class="quick-contact">
<div class="slide-toggle">Slide Toggle</div>
<div class="box">
<div class="box-inner">
content goes here
</div>
</div>
</div>
the css is this:
quick-contact {
background: #ccc;
float:right;
}
.box{
float:right;
overflow: hidden;
background: #f0e68c;
display: none;
}
.slide-toggle {
float: right;
position: relative;
right: 0;
}
/* Add padding and border to inner content for better animation effect */
.box-inner{
width: 400px;
padding: 10px;
border: 1px solid #a29415;
}
and the jquery is:
// use this docu ready //
jQuery(function($) {
$(".slide-toggle").click(function(){
$(".box").animate({
width: "toggle"
});
});
}); // end
I can get the panel to slide when I click the link but the clickable link just sits above the panel when it slides in, I need it to slide out with the panel, I need it to work like this http://www.sanwebe.com/assets/floating-contact-form/ The reason i'm not using that example is because I need to slidein panel to slide in the header div and not the body div like this example does.
Just place your <div class="slide-toggle">...</div> after <div class="box">...</div> (because you are using float: "right";). Make it look like this:
<div class="quick-contact">
<div class="box">
<div class="box-inner">
content goes here
</div>
</div>
<div class="slide-toggle">
Slide Toggle
</div>
</div>
Working example: http://codepen.io/anon/pen/GoPPPE
Here's a working example: https://jsfiddle.net/ruo8r7o8/2/
Essentially, what you want to do is:
Lose the float .. it complicates calculations
Animate the whole box, not just one part
Javascript action:
$(function(){
$('.slide-toggle').click(function(){
$('.quick-contact').animate({
right: $('.quick-contact').css('right') == '0px' ? "100px": "0px"
})
});
});
CSS action:
.quick-contact {
position: absolute;
right: 0;
}
.slide-toggle {
position: relative;
background-color: red;
}
.box {
position: absolute;
right: -100px;
width: 100px;
background-color: green;
}
I have two divs. I want the left div to hide and show automatically according to the window size, i.e. I want it to be responsive.
On the other hand, I want to hide/show the left div manually if necessary. I added a black separator in the middle. When the separator is clicked the left div hides and the right div takes the whole width.
Until now, everything is ok.
BUT. When I hide/show the left div manually, it ceases to react to the responsive code.
Please check this JSFiddle and lend me some help.
Thank you very much.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.div1 {
background-color: #ffee99;
width: 300px;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
.separator {
border-left: 3px solid #000000;
border-right: 3px solid #000000;
width: 0px;
height: 100%;
position: absolute;
top: 0px;
left: 300px;
z-index: 100;
}
.div2 {
background-color: #99eeff;
width: calc(100% - 300px);
height: 100%;
position: absolute;
top: 0px;
left: 300px;
}
#media screen and (max-width: 500px) {
.div {
display: none;
}
.separator {
left: 0px;
}
.div2 {
width: 100%;
left: 0;
}
}
</style>
<script>
$(function() {
function hideLeftDiv() {
$('.div1').hide();
$('.div2').css('width', '100%').css('left', 0);
$('.separator').css('left', '0px');
}
function showLeftDiv() {
$('.div1').show();
$('.div2').css('width', 'calc(100% - 300px)').css('left', '300px');
$('.separator').css('left', '300px');
}
$('.separator').click(function() {
$('.div1').is(":visible") ? hideLeftDiv() : showLeftDiv();
});
});
</script>
</head>
<body>
<div class="div1"></div>
<div class="separator"></div>
<div class="div2"></div>
</body>
</html>
Have a play with having two classes for identifying whether something is hidden or not i.e. desktop and mobile. You can then check whether its actually hidden with is(':hidden') and respond accordingly.
Check this fiddle for a quick demo http://fiddle.jshell.net/tmx3p6ts/31/
Read this: getbootstrap.com/css/#grid You can use the grid system to make a page like you have, but when the screen is getting to small, you can getbootstrap.com/css/#responsive-utilities use this link to know when to hide things.
So to help you maybe a step in the right direction:
<div class="container">
<div class="col-sm-4 hidden-xs">
This is the left div.
</div>
<div class="col-sm-8 col-sm-12">
This is the left div.
</div>
</div>
Something like this should work. Check out this fiddle: Fiddle with bootstrap
You can adjust the classes to any style you want.
This is my first question here and I've tried to search for quite some time now and I haven't found any question that is the same as mine or touches the same problem.
I want to do a CSS popup that has a background-div covering the whole website and a centered div showing actual content.
My problem is that only the centered div is showing up when I'm clicking the button that is supposed to show them both. Even when I comment out the display:none - attribute in my css-file, the background div simply doesn't have any color or style attached to it. If I fill it with text, the text shows up on the website where the div is "supposed" to be if there weren't any style sheet attached to it.
I've gotten the code from coders answer in this question.
Here it is:
Script:
$("#btn-update").click(function() {
document.getElementById("light").style.display="block";
document.getElementById("blackground").style.display="block";
});
html:
<button type="button" id="btn-update">Button!</button>
<div id="light" class="white_content">This is the lightbox content. Close</div>
<div id="blackground" class="black_overlay"></div>
CSS:
.black_overlay{
/*display: none;*/
position: absolute;
top: 10%;
left: 10%;
width: 100%;
height: 100%;
background-color: #000000;
z-index:1001;
/*-moz-opacity: 0.8;*/
/*opacity:.80;*/
/*filter: alpha(opacity=80);*/
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 15%;
height: 15%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
Here's the fiddle-demo so you can play around as well
I've tried changing the attributes, commenting them out, making the div visible from the get go but it always seems to not show properly (while the white_content always do).
Also: the JS-fiddle is having problems showing the white content, but the black overlay is showing just fine when you remove the display:none attribute.
Thank you so much in advance for any help. Been stuck for a while now
You need to attach the jquery plugin in jsfiddle http://jsfiddle.net/dhana36/K57DH/12/
After update http://jsfiddle.net/dhana36/K57DH/20/
UPDATE:
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<style>
.black_overlay{
/* display: none;*/
position: absolute;
top: 10%;
left: 10%;
width: 50%;
height: 50%;
background-color: #000000;
z-index:1001;
/* -moz-opacity: 0.8;*/
/* opacity:.80;*/
/* filter: alpha(opacity=80);*/
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 15%;
height: 15%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn-update").click(function() {
document.getElementById("light").style.display="block";
document.getElementById("blackground").style.display="none";
//document.getElementById("blackground").style.background-color="#555555";
});
});
</script>
</head>
<body>
<div id="light" class="white_content">
This is the lightbox content.
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('blackground').style.display='block'">
Close
</a>
</div>
<div id="blackground" class="black_overlay"></div>
<button type="button" id="btn-update">Button!</button>
</body>
</html>
Add the script before closing </body> not inside </head> Same code doesn't work when wrapped inside head
http://jsfiddle.net/K57DH/18/ edit in left panel
Mozilla.com has this tab on the top of their site that you can click and a menu drops down. I have a client who wants me to do the same thing but upside down, from the bottom half of the page. Apparently this is a really hard request. How do I make something like tabzilla that goes up and either overlaps or pushes the content away? Thanks!
Update: I love you guys.
Edit: http://hemakessites.com/mayukh/4/ Why does the top "Sign In/Register" pop down and the "Toggle" on the bottom pops up? I'm not seeing the difference besides 'top' and 'bottom' in the css. How does that change the direction of the popup?
Also, clicking the '337-9147' will expand the menu. I only want the button region to be clickable. How can I accomplish this?
You guys are awesome and I'm going to return the favor by answering some questions on here when I get time.
I took a similar approach as others, in that you set a div to have a fixed, or absolute position at the bottom of the screen (depending on whether the tab should always be visible, or only at the very bottom). Then, you can write some very simple javascript to vary the height of the element, and as the bottom is fixed, it will cause the tab to rise into the screen.
Essentially all you need is
.container{
position: absolute;
bottom: -1px;
}
And
$('.container').toggle(function(){
$(this).animate({height:'205px'}, 500)
},function(){
$(this).animate({height:'20px'}, 200)
});
Here's a jsfiddle demo.
Here's a jQuery solution, which is smoother than css3:
So, you'll want to do something like this jsfiddle (NOTE: This requires jQuery):
http://jsfiddle.net/cFkn2/
$(document).ready(function() {
$('#tab').click(function() {
if ($('#tab').css('height') == '20px') {
$('#tab').animate({
height: '100px'
}, 1000);
}
else {
$('#tab').animate({
height: '20px'
}, 1000);
};
});
});
and
#tab{
position: absolute;
bottom: 0;
width: 100%;
background-color: red;
height:20px;
}
and
<div id="tab">CONTENT</div>
Style, edit, and add easing to taste.
I was lazy to make here click handler, so it is css3 only hover sample
I used fixed position with {top: 100%}, transition for animation, margin <0 to show;
HTML
<div id="menu">
<div id="handler">handler</div>
<div id="menucontent">
menu menu<br>
menu menu<br>
</div>
</div>
<div id="content">
<div> text text text</div>
<div> text text text</div>
<!-- many of them -->
<div> text text text</div>
<div> text text text</div>
<div> text text text</div>
</div>
CSS:
#content > div {
font-size: 2em;
height: 2.1em;
border: 1px solid black;
margin-top: 10px;
}
#menu {
left: 30px;
position: fixed;
font-size: 20px;
width: 300px;
height: 300px;
top: 100%;
border: 1px solid red;
background: white;
-webkit-transition: all 1s;
-mozilla-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
#menu #handler {
position: absolute;
top: -40px;
background: green;
font-size: 30px;
height: 40px;
padding-left: 5px;
padding-right: 5px;
left: 10px;
}
#menu:hover {
margin-top: -300px;
}
with click, or
JS:
$(function() {
$('#menu #handler').click(function() {
$('#menu').toggleClass('shown');
});
});
in css change hover to class shown
#menu.shown {
margin-top: -300px;
}
I'm having trouble animating this item using PHP and CSS and Javascript (with jQuery).
I want a div that slides out from the left side of the screen when its tab bar is hovered over.
I have three divs: the container, the contents, and the tab.
Here's the Javascript and HTML:
<div id="LeftSidebar">
<div id="LeftSidebarTab" class="">
Left sidebar tab
</div>
<div id="LeftSidebarContents" class="">
Left sidebar contents
</div>
<script type="text/javascript">
$("#LeftSidebar").mouseenter(function()
{
$("#LeftSidebar").animate(
{
left: 0px
});
});
$("#LeftSidebar").mouseleave(function()
{
$("#LeftSidebar").animate(
{
left: -100px
});
});
</script>
</div>
Here's the CSS:
#LeftSidebar
{
position: absolute;
display: block;
z-index: 12;
top: 220px;
left: 0px;
background-color: green;
height: 500px;
}
#LeftSidebarTab
{
float: right;
background-color: red;
width: 20px;
height: 100%;
}
#LeftSidebarContents
{
background-color: blue;
width: 100px;
height: 100%;
}
I'm new to Javascript, HTML, and et al.
The code isn't doing what I expect it to do.
I expect it to, when hovered over, gradually move the 'left' CSS property to 0px, and when the mouse moves off of the contents, move the 'left' CSS property to -100px.
When I hover over it, I see no visible change to the div. I can't even tell if the 'mouseenter()' or 'mouseleave()' functions are even being triggered.
Questions:
1) How can I check if the function is being triggered or not? Can I output some text or something, using Javascript? Maybe pop up a dialog box for debugging?
2) Will mouseenter/mouseleave be triggered for 'LeftSidebar', even though LeftSidebarContents and LeftSidebarTab completely cover every pixel of LeftSidebar?
3) Am I making any obvious mistakes in the above code that's causing it not to work as I expect?
You probably want to put some single quotes around the 0px.
Check this: http://api.jquery.com/animate/
Copy their example and get theirs working them modify it to your needs.
As for alerts to check if the event is being triggered:
alert("Thanks for visiting!");
Use ff with firebug or chrome to debug your script. Put a pointer on the functions, this will cause the browser to pauze execution of your script so you can step over it and see what happens.
A quick and dirty test to figure out if an event is being triggered is to use the alert function. For example:
$("#LeftSidebar").mouseenter(function()
{
alert("Mouse Enters Region");
});
Also this is how I would do your css file:
#LeftSidebar
{
position: fixed;
display: block;
z-index: 12;
top: 220px;
left: -100px;
background-color: green;
width:120px;
height: 500px;
}
#LeftSidebarTab
{
position:absolute;
background-color: red;
width: 20px;
height: 500px;
left:100px;
top:0px;
}
#LeftSidebarContents
{
background-color: blue;
position:absolute;
left:0px;
top:0px;
}
I would recommend learning more about the CSS Box Model and probably just reading up on HTML/CSS in general.