I have used a popup script so that popup appear on my screen when I load my html file now I want a close sign on the top right corner on the popup screen like in the picture shown below
The code I have used is
("jsfiddle.net/sGeVT/10/")
this script code is an example of my code I have further modified it but the basic of the popup is same.
Hope you understand and can give solution.
(1) Add a span with a x inside, × the best looking one IMO.
<span class="deleteMeetingClose">×</span>
(2) Set up some styles for it.
.deleteMeetingClose {
font-size: 1.5em;
cursor: pointer;
position: absolute;
right: 10px;
top: 5px;
}
(3) Add it to the jQuery code along with other close triggers.
$('#overlay, .deleteMeetingCancel, .deleteMeetingClose').click(function () {
//close action
});
Updated demo: http://jsfiddle.net/zj0yL9me/
$('.deleteMeeting').click(function () {
$('#overlay').fadeIn('slow');
$('#popupBox').fadeIn('slow');
$('#popupContent').fadeIn('slow');
});
// added .deleteMeetingClose into the selectors
$('#overlay, .deleteMeetingCancel, .deleteMeetingClose').click(function () {
$('#overlay').fadeOut('slow');
$('#popupBox').fadeOut('slow');
$('#popupContent').fadeOut('slow');
});
$('.deleteMeetingButton').click(function () {
$('#popupContent').fadeOut('slow');
$('#deleteMeetingConfirmDeleted').fadeIn('slow');
$('#overlay').delay(1300).fadeOut('slow');
$('#popupBox').delay(1300).fadeOut('slow');
$('#deleteMeetingConfirmDeleted').fadeOut('slow');
});
#overlay {
display:none;
opacity:0.5;
background-color:black;
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
z-index: 999;
}
#popupBox {
display:none;
position: relative;
margin-left:auto;
margin-right:auto;
margin-top:100px;
width:600px;
height: 500px;
color: #000000;
border:5px solid #4E93A2;
-moz-border-radius:8px;
-webkit-border-radius:8px;
background-color:#FFFFFF;
z-index: 1000;
}
#popupContent {
display:none;
font-family:Arial, Helvetica, sans-serif;
color: #4E93A2;
margin-top:30px;
margin-left:30px;
margin-right:30px;
}
.deleteMeetingButton {
clear:both;
cursor:pointer;
width:90px;
height:30px;
border-radius: 4px;
background-color: #5CD2D2;
border:none;
text-align:center;
line-height:10px;
color:#FFFFFF;
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
}
.deleteMeetingCancel {
clear:both;
cursor:pointer;
width:90px;
height:30px;
border-radius: 4px;
background-color: #5CD2D2;
border:none;
text-align:center;
line-height:10px;
color:#FFFFFF;
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
content:"XXXX";
}
#deleteMeetingConfirmDeleted {
display:none;
}
/* added code below */
.deleteMeetingClose {
font-size: 1.5em;
cursor: pointer;
position: absolute;
right: 10px;
top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="content">Content Obscured By Overlay
<button class="deleteMeeting">Delete</button>
</div>
<div id="overlay"></div>
<div id="popupBox">
<div id="popupContent">
<i>Are you sure you want to delete this meeting?</i>
<br />
<span style="text-align:center;color:black;font-size:40px;">YO</span>
<br />
<button class="deleteMeetingButton">Delete</button>
<button class="deleteMeetingCancel">Cancel</button>
</div>
<div id="deleteMeetingConfirmDeleted">Meeting Deleted</div>
<span class="deleteMeetingClose">×</span> <!-- <= added this line -->
</div>
First, put in image element in your popup div
<img id="ClosePopup" src="insert-image-url-here"/>
Then, style it with position:absolute. Also, make sure the popup div has position:relative
#ClosePopup{
position: absolute;
right:0px;
}
Finally, attach your click handler
$('#ClosePopup').click(function(){
$('#overlay,#popupBox,#popupContent').fadeOut('slow');
});
See it working in this fiddle
If you want a pure css solution without images, see
Pure css close button
Simply create a span element containing × char for the x, put some style and bind the click event to the popup close action:
HTML
<span class="cancel-icon" >×</span>
CSS:
.cancel-icon{
float:right;
cursor:pointer;
}
JS
$('.cancel-icon').click(function () {
//Close the popup
});
Using your Fiddle: http://jsfiddle.net/sGeVT/118/
Related
I have made an animated profile card using CSS and JS, when hovered on it flips and stretches the name and role title up and around and shows the full backside card information. It works perfectly in Firefox and Chrome, but not in Safari.
It does flip around and shows all contact information when animating but at the end of the animation, the full contact information disappears and only reverts back to the original 'name and role title' on the frontside but upside-down.
The full code and live page can be found here: https://www.leap.co.uk/leadership/index-flip2.html
After reading a few articles, I have tried adding the '-webkit-backface-visibility:hidden;' to all 'backface-visibility:hidden;' css but this hasn't worked at all.
I also added a z-index to the 'back' section which fixes it and shows all information at the end of the animation but when it reverts back (after hover is taken off) it still shows instead of just the 'name and role title'.
<!-- HTML -->
<!-- language: lang-html -->
<body>
<div class="contact">
<div class="initials">RM</div>
<div class="flip back">
<div class="info">
<div class="name">Randy Marquardt</div>
<div class="title">Front End Developer</div>
<hr/>
<div class="phone">Phone<br/>
<span>(203)555-5555</span>
</div>
<hr/>
<div class="email">Email<br/>
<span>rmarquardt.1#gmail.com</span>
</div>
<hr/>
</div>
<div class="icon-set">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/874640/skype1.svg" class="skype"/>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/874640/delve1.svg" class="delve" />
</div>
</div>
<div class="flip front">
<div class="name">Randy Marquardt</div>
<div class="title">Front End Developer</div>
</div>
</div>
</body>
/* CSS */
<!-- language: lang-css -->
html {
height:100%;
}
body {
height:100%;
font-family:"Segoe UI";
background: -moz-linear-gradient(top, rgba(246,230,180,1) 0%, rgba(237,144,23,1) 100%);
background: -webkit-linear-gradient(top, rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%);
background: linear-gradient(to bottom, rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%);
}
#run {
position:absolute;
top:20px;
right:20px;
}
.contact {
position:absolute;
height:250px;
width:200px;
background:#37674b;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
text-align:center;
}
.contact .initials {
margin-top:33px;
color:#fff;
font-size:80px;
font-family:"Segoe UI Light";
margin-left:10px;
letter-spacing:10px;
}
.contact .flip {
width:198px;
border:1px inset #37674b;
}
.contact .front {
backface-visibility:hidden;
position:absolute;
background:#f0f0f0;
height:60px;
bottom:0;
text-align:center;
}
.contact .front .name {
margin-top:5px;
font-size:16px;
line-height:25px;
font-weight:600;
}
.contact .front .title {
font-size:12px;
font-style:italic;
}
.contact .back {
backface-visibility:hidden;
overflow:hidden;
background:#f0f0f0;
position:absolute;
bottom:0;
height:60px;
}
.contact .back .info {
padding:5px 10px;
}
.contact .back .info .name {
font-size:18px;
line-height:25px;
font-weight:600;
}
.contact .back .info .title {
font-size:12px;
font-style:italic;
/* margin-bottom:20px; */
}
.contact .back .info .phone, .contact .flip .info .email, .contact .flip .info .skype {
margin-top:20px;
font-size:14px;
font-weight:600;
}
.contact .back .info div span {
font-size:12px;
font-weight:normal;
}
.contact .icon-set {
height:45px;
position:absolute;
margin:auto;
bottom:0;
left:0;
right:0;
text-align:center;
}
.contact .icon-set img {
width:30px;
margin:0px 15px;
}
/* JS */
<!-- language: lang-js -->
TweenMax.set('.contact', {perspective:700});
TweenMax.set('.flip', {transformStyle:"preserve-3d"});
TweenMax.set('.back', {rotationY:-180, rotation:180});
$('.contact').hover(function(){
var flip = $(this).find('.flip');
var back = $(this).find('.back');
var front = $(this).find('.front');
TweenMax.to(flip, .7, {rotationX:180});
TweenMax.to([back, front], .7, {height:'100%'});
},
function(){
var flip = $(this).find('.flip');
var back = $(this).find('.back');
var front = $(this).find('.front');
TweenMax.to(flip, .7, {rotationX:0});
TweenMax.to([back, front], .7, {height:60});
});
I expect the full 'back' information to show on animation completion but when the hover event is taken off, for the 'front' information only to show. This works on all other browsers except safari.
I have a website where it is able to successfully detect whether you are using Chrome as your browser and it works perfectly.
The coding for this "element" is -
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
if(isChrome){
alert("Chrome is detected");
}
The other element is a transparent whole page pop up message. This also works perfectly when using a HTML button to activate the message. But I need the pop up to be activated in Javascript not on a button click, I want it activated, in the line alert("Chrome is detected"); up above. The coding for this element is below and you will see what I mean...
<!DOCTYPE html>
<head>
<style>
.button{ width: 150px; padding: 10px; background-color: #FF8C00; box-shadow: -8px 8px 10px 3px rgba(0,0,0,0.2); font-weight:bold; text-decoration:none;
}
#cover{ position:fixed; top:0; left:0; background:rgba(0,0,0,0.6); z-index:5; width:100%; height:100%; display:none;
}
#loginScreen{ height:380px; width:340px; margin:0 auto; position:relative; z-index:10; display:none; background-color: white; no-repeat; border:5px solid #cccccc; border-radius:10px;
}
#loginScreen:target, #loginScreen:target + #cover{ display:block; opacity:2;
}
.cancel{ display:block; position:absolute; top:3px; right:2px; background:rgb(245,245,245); color:black; height:32px; width:32px; font-size:30px; text-decoration:none; text-align:center; font-weight:bold; border-radius:36px;
}
</style>
</head>
<body>
<div id="top" align="center">
<!-- PLEASE DIRECT YOUR ATTENTION TO THE LINE BELOW -->
Click here to Log In <!-- THIS IS HOW THE POP UP IS ACTIVATED BUT I NEED TO ACHIEVE THIS LINE IN JAVASCRIPT -->
</div>
<div id="loginScreen">
<span style="font-size:30px">Attention User!</span>
×
</div>
<div id="cover" ></div>
</body>
</html>
Any help would be appreciated!
If you wants to open your popup when detected func if true, change your code like this :
if(isChrome){
// alert("Chrome is detected");
$("#exitbutton").trigger('click'); //
}
I dont think you will able to trigger click on an anchor tag with href.
You can use window.location.href
if(isChrome){
var href = $('#thebutton').attr('href');
window.location.href = href;
//alert("Chrome is detected");
}
JSFIDDLE
Please, Please answer / help me.
I have three divs with CSS and it is generated dynamically.
And I call them wincontainer, smalldiv and largediv. wincontainer is a container of smalldiv and largediv as we can see in the image.
properties of divs
<!-- wincontainer -->
<ol class="wincontainer" style="width: 938px;float: left;border: 2px solid #CCC;"></ol>
<!-- smalldiv -->
<div id="smalldiv" style="
width: 420px;
margin: 10px;
margin-top: 10px;
background-color: #ffffff;
font-size: 13px;
text-align: justify;
word-wrap: break-word;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
border: 1px solid #BFBFBF;
float: right;
clear: right;"> </div>
<!-- largediv -->
<div id="largediv" style="
width: 408px;
margin: 10px;
margin-top: 10px;
background-color: #ffffff;
font-size: 13px;
min-height: 50px;
text-align: justify;
word-wrap: break-word;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
box-shadow: 0px 1px 1px #CCC;
border: 1px solid #BFBFBF;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;">
As we can see we have 2 largedivs and 4 smalldivs which is dynamically generated yet
Question: I want to arrange small and large div in a proper way. As like this picture. fig (1). but they are coming like as fig (2)
As i said I cannot create sub wrappers because they are dynamically and very important serial wise generated...if i make the subwrapper then it cant be in serial wise
Note: I can not make another special div to contain smalldiv or largediv to separate it, because that small and large div is in a serial wise so we cant put them in a special container and they are dynamic.
In JSFIDDLE -> http://jsfiddle.net/jwy3c3n5/ when you delete the upper most smalldiv then it will work fine but when you add smalldiv on top it goes mad.. i want to fix it and make it proper way at unlimited div
a div will either be largediv or smalldiv, there will could be a variable number of each and can appear in any order. All largediv and smalldiv are contained within wincontainer. Additional markup is not allowed.
Here's an option that requires JavaScript:
$(document).ready(function(){
var containerTop = $('.container')[0].offsetTop,
lpos = containerTop,
rpos = containerTop;
$('.container > div').each(function(){
var $el = $(this),
el = $el[0];
if($el.hasClass('large')){
if(lpos < el.offsetTop){
$el.css('margin-top', (lpos - el.offsetTop) + "px");
}
lpos += $el.height();
}else if($el.hasClass('small')){
if(rpos < el.offsetTop){
$el.css('margin-top', (rpos - el.offsetTop) + "px");
}
rpos += $el.height();
}
});
});
.container{
}
.container > div{
width:50%;
box-sizing:border-box;
position:relative;
}
.container .large{
height:400px;
display:inline-block;
float:left;
clear:left;
position:relative;
}
.container .small{
height:150px;
display:inline-block;
float:right;
clear:right;
position:relative;
}
.red{background-color:red}
.blue{background-color:blue}
.green{background-color:green}
.yellow{background-color:yellow}
.purple{background-color:purple}
.orange{background-color:orange}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<div class='large red'></div>
<div class='small blue'></div>
<div class='small green'></div>
<div class='large yellow'></div>
<div class='small purple'></div>
<div class='small orange'></div>
</div>
note: I think it would be better to use a div for your "wincontainer" than an ordered list.
I haven't tried this in a similar stituation, but you could set display:inline-block on largediv and smalldiv. Maybe that would do it.
Edit: and remove the float attribute. But now that i think about it, depending on the order of the divs, this could not be the best solution.
You need to change the id's to classes on your dynamic divs, and then layout the code to flow in div order.
Your css and html worked really.
See the fiddle
http://jsfiddle.net/jwy3c3n5/2/
<div id="container">
<div id="leftwrapper">
<div class="large">test<br />test<br />test<br />test<br />test<br /></div>
<div class="large">testtest<br />test<br />test<br />test<br /></div>
</div>
<div id="rightwrapper">
<div class="small">test</div>
<div class="small">test</div>
<div class="small">test</div>
<div class="small">test</div>
</div>
</div>
#container {
width: 500px
}
#rightwrapper {
float: right;
width: 35%;
}
#leftwrapper {
float: left;
width: 55%;
}
.large {
background: gray;
margin-bottom:10px;
}
.small{
background: gray;
margin-bottom:10px;
}
I created a js-fiddle with the information you provided, plus a small edit on the margin for the large div, and the layout appears to be behaving the way you want it to.
Here is the example: http://jsfiddle.net/uaeb0Lmv/
I revised the margins as such:
#largediv {
margin: 10px 30px 30px;
}
For some reason, the follow-up top margin didn't override the original declaration. Let me know if that works for you. Otherwise, we may need more info on the div contents.
I understand your problem and i try to solve your problems. You can use this code. It is working.
Live Working Demo
HTML Code
<div id="main">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>
</div>
CSS Code:
#main
{
height:410px;
width:450px;
border:5px solid black;
}
#one
{
height:150px;
width:150px;
background-color:red;
border:5px solid black;
position:relative;
margin-left:20px;
margin-top:20px;
}
#two
{
height:150px;
width:150px;
background-color:green;
border:5px solid black;
margin-top:20px;
position:relative;
float:left;
margin-left:20px;
margin-top:20px;
}
#three
{
height:60px;
width:200px;
background-color:blue;
border:5px solid black;
margin-left:20px;
margin-top:10px;
position:relative;
float:left;
display:table-cell;
margin-top:-160px;
}
#four
{
height:60px;
width:200px;
background-color:gold;
border:5px solid black;
margin-left:20px;
margin-top:10px;
position:relative;
float:left;
display:table-cell;
margin-top:-60px;
}
#five
{
height:60px;
width:200px;
background-color:purple;
border:5px solid black;
position:relative;
float:left;
display:table-cell;
margin-top:40px;
margin-left:-210px;
}
#six
{
height:60px;
width:200px;
background-color:gray;
border:5px solid black;
margin-left:-210px;
margin-top:140px;
position:relative;
float:left;
display:table-cell;
}
Result:
I know this must be an easy fix but I've spent the better part of the morning trying to find a solution (before posting here) to no avail.
I have a very simple jQuery "slideToggle" script that, when clicked, slides a div to the bottom of the button to the height I want it to display. It fits to the width I want(400px), starting at the left of the top div size(130px) and stretching to the right. problem is, I need it to stretch to the left (The top "button" is set to the far right of the page and it stretches off the page).
Here's the code I have:
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<style type="text/css">
#cartBox {
width: 110px;
height: 90px;
position: absolute;
margin-left: 90%;
top: 28px;
border: 3px solid #800000;
background-color: #800000;
border-radius: 12px;
z-index: 999;
}
#cartDropMenu {
position:absolute;
z-index:999;
width: 130px; /* width of top items (img + text (Cart Items) */
float:right;
top: 0px;
right: 0px;
color: white;
font-family: Arial, Helvetica, Sans serif;
font-size: 12px;
text-align: left;
}
#cartDropMenu p {
margin:0;
padding-left:24px; /* moves text to the left of img */
cursor:pointer;
background-image:url('../img/open.png');
background-position:left; /* positions image to the left or right 300px(cartDropMenu width parameter) */
background-repeat:no-repeat;
text-align: left;
}
#cartDropMenu p.close {
background-image:url('../img/close.png');
}
#DropMenu {
position:absolute;
z-index:999;
background-color:#fff;
border:solid 1px rgb(220,220,220);
padding:12px;
width:400px; /* width of drop down box */
box-shadow:1px 1px 4px rgb(220,220,220);
top:90px; /* position of start point for drop down box */
left:8000; /* ??? */
display:none;
color: black;
font-family: Arial, Helvetica, Sans serif;
font-size: 12px;
}
</style>
<script>
$(document).ready(function() {
$('#cartDropMenu p').click(function() {
$('#DropMenu').slideToggle(300);
$(this).toggleClass('close');
});
}); // end ready
</script>
</head>
<body>
<div id="cartBox">
<div id="cartDropMenu">
<p>      Display Cart</p>
<div id="DropMenu">
Test line #1<br />
Test line #1<br />
Test line #1<br />
Test line #1<br />
Test line #1<br />
Test line #1<br />
Test line #1<br />
Test line #1<br />
</div>
</div>
</div>
</body>
</html>
Here's the link to jfiddle:
enter link description here
Try adding right: 0; to #DropMenu
Add right:0; to #DropMenu. This will make the dropdown to start from the right end of the
Display cart p tag.
I am having problems with some content not fixed into one place when I resize the window on a browser, I basically have 3 div id box elements placed next to each other.
They are positioned fine however when I resize the screen they seem to fall below one another.
I have min-width: 947px; in the body of the CSS however this does not do anything.
HTML:
<div id ="featured1">
</div>
<div id ="featured3">
</div>
<div id ="featured2">
</div>
CSS:
#featured1{
float:left;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
margin-left:150px;
border:1px solid black;
width:250px;
height:150px;
}
#featured2 {
display: inline-block;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
border:1px solid black;
width:250px;
height:150px;
}
#featured3 {
float:right;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
border:1px solid black;
width:250px;
height:150px;
margin-right:200px;
}
For some reason when I try resizing the screen with this code the elements fall below each other, I am looking for the content to completely remain the same and not resize at all.
Here is the working example: jsFiddle link
use
display: inline-block;
on all 3 divs, then they wont go down.
Note: this property will not work on IE7 and smaller versions.
You have given your body a min-width:947px but the actual width occupied by all divs including the margin and borders, etc is 1150px.
Thats why its breaking.
Please add vertical-align: top; property on all the divs
This should help. FYI. When writing in CSS make sure you minify the code. Google developer has a great section on this (https://developers.google.com/speed/pagespeed/service/MinifyCSS).
HTML:
<div id="container">
<div id="featured1">
Featured 1
</div>
<div id="featured2">
Featured 2
</div>
<div id="featured3">
Featured 3
</div>
</div>
CSS:
#container {
position: absolute;
width: 836px;
height: 190px;
}
#featured1, #featured2, #featured3 {
position: relative;
font-family: 'Lobster13Regular';
font-size: 35px;
float: left;
left: 20px;
top: 20px;
width: 250px;
height: 150px;
border: 1px solid #000;
overflow: hidden; /*Remove if you are not going to overflow text in each element*/
}
#featured2, #featured3 {
margin-left: 20px;
}