We Keep Coding

How to make a cross close sign in popup

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/

Jquery AddClass and RemoveClass

I wish to addclass and removeclass when I click the tab, when click the tab on the first time, shopiteminfo_content_mobile_label add a class call activetab , if I click again the tab or click others tab , the class activetab will remove. Reason to do this is because i want the active tab have a special css. Any idea how to do this ? AddClass and RemoveClass ... Thanks
$(function () {
$('.shopiteminfo_content_mobile_label').click(function () {
$(this).removeClass("activetab");
$(this).addClass("activetab");
$(this).next('.shopiteminfo_content_mobile_content').slideToggle();
$(this).parent().siblings().children().next().slideUp();
return false;
});
$('.shopiteminfo_content_mobile_label').bind('touchstart', function (e) {
$(this).trigger('click');
e.preventDefault();
});
});
.shopiteminfo_content_mobile_container {
position:relative;
clear:both;
font-family:'Raleway';
margin-bottom:10px;
color:#000;
}
.shopiteminfo_content_mobile_container li{
display: block;
text-align: center;
text-decoration: none;
list-style:none;
color: #888;
border: 1px solid #ddd;
background: #fff;
cursor:pointer;
}
.shopiteminfo_content_mobile_label{
cursor:pointer;
display:block;
text-align:left;
font-size:14px;
color:#000;
padding:10px;
}
.shopiteminfo_content_mobile_content {
display:none;
font-size:15px;
text-align:justify;
background:#fff;
color:#000;
}
.shopiteminfo_content_mobile_content:last-of-type {
}
.shopiteminfo_mobile_productsdetail_inner_container{
width:95%;
border-bottom:1px dashed #ccc;
margin-bottom:10px;
margin-left:10px;
padding-bottom:10px;
}
.shopiteminfo_mobile_productsdetail_inner_container .shopiteminfo_mobile_label{
display:list-item;
list-style:none;
font-weight:bold;
font-size:13px;
padding:3px;
}
.shopiteminfo_mobile_productsdetail_gallery_container{
padding:0px 10px 10px 10px;
}
.shopiteminfo_mobile_productsdetail_gallery_container img{
width:auto;
height:auto;
display:block;
margin:0 auto;
padding-top:10px;
padding-bottom:10px;
}
.shopiteminfo_mobile_productsdetail_galleryname{
background:#09c;
color:#fff;
text-transform: uppercase;
padding:10px;
text-align:center;
margin-top:5px;
width:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shopiteminfo_content_mobile_container">
<li class="shopiteminfo_content_mobile_tobeclick">
<label class="shopiteminfo_content_mobile_label">A</label>
<div class="shopiteminfo_content_mobile_content">
test
</div>
</li>
<li class="shopiteminfo_content_mobile_tobeclick">
<label class="shopiteminfo_content_mobile_label">B</label>
<div class="shopiteminfo_content_mobile_content">
test
</div>
</li>
<li class="shopiteminfo_content_mobile_tobeclick">
<label class="shopiteminfo_content_mobile_label">C</label>
<div class="shopiteminfo_content_mobile_content">
test
</div>
</li>
</div>

you should use toggleClass
$(this).toggleClass("activetab");
This would remove the css class if its already present or add it if its not.

Is this what you want?
http://jsfiddle.net/fh6tg75s/2/
$(function () {
$('.shopiteminfo_content_mobile_label').click(function () {
$(this).next('.shopiteminfo_content_mobile_content').slideToggle();
$(this).parent().siblings().children().next().slideUp();
$(this).toggleClass("activetab");
$('.shopiteminfo_content_mobile_label').not(this).removeClass("activetab");
return false;
});
$('.shopiteminfo_content_mobile_label').bind('touchstart', function (e) {
$(this).trigger('click');
e.preventDefault();
});
});

Replace the below
$(this).removeClass("activetab");
$(this).addClass("activetab");
to which uses $.fn.toggleClass
$(this).toggleClass("activetab");
Add or remove one or more classes from each element in the set of
matched elements, depending on either the class's presence or the
value of the state argument.

Just for a try you can use the ternary operator ?: which also may referred to as ternary if. In just a single line of code check if your element has the active class or not. If it has then on click remove it and if it doesn't have then add this. Here's the code,
HTML :
<div id="mainDiv">Click Here</div>
CSS :
.activeDiv{
background-color : green;
}
jQuery :
$("#mainDiv").on("click", function(){
$(this).hasClass("activeDiv") ? $(this).removeClass("activeDiv") : $(this).addClass("activeDiv")
});
jsFiddle

Need a curved vertical line using HTML and CSS

I need a curved vertical line with 5 dots like this -
On hovering over each dot, text should slide besdide it from left to right, and text should disappear on taking away the mouse.
So far I have only been able to indent and place those 5 dots by means of modifying margin-leftproperty for each item in the list. I am not able to get the curved line. How do I achieve that?

Background:
Border-radius is really great for creating the appearance of curves. The problem is that anything inside an container which is curved using this style ignores said curving. As you pointed out, we need to use margins. However, by keeping everything symmetric, we can keep the margin-lefts to three sets, one of which doesn't require a class.
Answer:
We can get away with a very simple structure here:
<ul>
<li><span>Text</span></li>
</ul>
We have the ul as the outer wrapper with the top and bottom horizontal borders. We use a ::before pseudo-element attached to the wrapper, to create the curved line. Each li is the menu entry. The blue circles are created with ::before pseudo-elements attached to the li, and we can achieve the text animation via the span inside. We could get away with not having a span, but we'd need to declare the actual text content in the CSS, and I think it belongs in the HTML.
The CSS isn't too bad. We curve the ul::before and give it the border. We make it larger than 100% because the curve you show cuts off the top and bottom.
Screenshot:
Code:
ul {
height:300px;
width:300px;
margin:0;
padding:0;
list-style:none;
position:relative;
border-top:solid 2px black;
border-bottom:solid 2px black;
overflow:hidden;
}
ul::before {
height:133%;
width:133%;
border-radius:50%;
border:solid 2px black;
display:block;
position:absolute;
top:-18%;
left:10px;
content:"";
}
li {
margin:28px 0;
color:lightblue;
font-style:italic;
font-weight:bold;
overflow:hidden;
}
li::before {
height:20px;
width:20px;
content:"";
display:inline-block;
background-color:lightblue;
border-radius:50%;
position:relative;
top:4px;
margin-right:6px;
}
li.right {
margin-left:30px;
}
li.middle {
margin-left:6px;
}
li span {
position:relative;
left:-100%;
transition: left 200ms ease-in;
}
li:hover span {
left:0;
}
<ul>
<li class="right"><span>Anecdotes</span></li>
<li class="middle"><span>Interviews</span></li>
<li><span>Records</span></li>
<li class="middle"><span>Recent Stats</span></li>
<li class="right"><span>Recent Snaps</span></li>
</ul>
Success! As mentioned, this might be better using Canvas, or possible SVG. But if you want to stay strictly with HTML & CSS, this should help.
Second Method
Another way we can do this, staying with HTML & CSS, is to use transform:translate. I thought this might be easier and more reliable, but it turns out it requires more CSS and more classes. However, I got it working so I'm going to post it here anyway, because despite that it's pretty cool I think.
ul {
height:300px;
width:300px;
margin:0;
padding:0;
list-style:none;
position:relative;
border-top:solid 2px black;
border-bottom:solid 2px black;
overflow:hidden;
}
ul::before {
height:133%;
width:133%;
border-radius:50%;
border:solid 2px black;
display:block;
position:absolute;
top:-17.5%;
left:10px;
content:"";
}
li {
margin:0;
color:lightblue;
font-style:italic;
font-weight:bold;
overflow:hidden;
position:absolute;
top:50%;
left:50%;
line-height:30px;
margin-top:-15px;
}
li::before {
height:20px;
width:20px;
content:"";
display:inline-block;
background-color:lightblue;
border-radius:50%;
position:relative;
top:4px;
margin-right:6px;
}
li.one {
transform: translate(60px) rotate(-140deg) translate(208px) rotate(140deg);
}
li.two {
transform: translate(60px) rotate(-160deg) translate(208px) rotate(160deg);
}
li.three {
transform: translate(60px) rotate(-180deg) translate(208px) rotate(180deg);
}
li.four {
transform: translate(60px) rotate(-200deg) translate(208px) rotate(200deg);
}
li.five {
transform: translate(60px) rotate(-220deg) translate(208px) rotate(220deg)
}
li span {
position:relative;
left:-100%;
transition: left 200ms ease-in;
}
li:hover span {
left:0;
}
<ul>
<li class="one"><span>Anecdotes</span></li>
<li class="two"><span>Interviews</span></li>
<li class="three"><span>Records</span></li>
<li class="four"><span>Recent Stats</span></li>
<li class="five"><span>Recent Snaps</span></li>
</ul>

Here's how you can achieve the curve, dots, and text display below. You have to adjust it to suit your need.
#arch {
border-left: solid 2px black;
border-radius: 50%;
height: 500px;
width: 300px;
margin-left: 100px;
padding-top: 100px;
margin-top: -80px;
}
#arch-outer {
/* serves as a blade to cut off overly curved area */
height: 450px;
width: 300px;
overflow: hidden;
/* Cuts off the overly cured area */
}
#arch li {
font-size: 76px;
height: 85px;
color: rgb(153, 217, 234);
}
#arch li:nth-of-type(1) {
margin-left: 20px;
}
#arch li:nth-of-type(4) {
margin-left: 15px;
}
#arch li:nth-of-type(5) {
margin-left: 40px;
}
#arch li a {
font-size: 20px;
line-height: 76px;
vertical-align: middle;
color: rgb(153, 217, 234);
}
<div id="arch-outer">
<div id="arch">
<ul>
<li>One
</li>
<li>Two
</li>
<li>Three
</li>
<li>Four
</li>
<li>Five
</li>
<ul>
</div>
<!-- End arch -->
</div>
<!-- End arch outer -->
View on jsfiddle

You can create 1 blank <div class="curve"></div> and display only left border of that div as below:
.curve{
border-left:2px solid #000;
height:200px;
width:100px;
border-radius:50px; /*see how much you want to curve*/
}
OR else
create 1 curve image and apply to that background div and with help of position float your dot div on it and with hover effect show your text.
check here http://jsfiddle.net/Lz97rgyf/2/

Using onblur and setTimeout to close a sub menu

I want to use onblur to close a sub-menu. I've got it to "hide" the sub-menu, but it does just that. I want the menu to go back to its original state. I would also like to set a timeout on the menu so it will close after 5-10 seconds.
P.S I tried to make a jsfiddle for this, and it didnt function. Also, this is for a mobile site.
HTML
<div class="smenu_div"">
<ul>
<li>
<a class="menu-title" href="#" onblur="hidemenu()" onclick="showsub()">Menu</a>
<ul id='hiddenMenu'>
<li>Home</li>
<li>Trucks</li>
<li>Equipment</li>
</ul>
</li>
</ul>
</div>
CSS
.smenu_div ul
{
padding:0px;
margin-top:5px;
margin-right:40px;
font-family:georgia;
font-size:70px;
color:#ffffff;
list-style:none;
text-indent:15px;
text-align:center;
width:40%;
overflow:hidden;
position: relative;
display: block;
float:right;
}
.smenu_div ul li
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: rgba(0,0,0,0);
line-height:justified;
margin-top: 10px;
position:relative;
}
/* Changed this so that your hidden menu is hidden by default */
.smenu_div li ul
{
z-index: 50;
display: none;
position: relative;
width: 100%;
background: transparent;
float:none;
}
.smenu_div ul li a
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-decoration:none;
color:#ffffff;
background: #000000;
display:block;
position:relative;
}
/* #new */
.smenu_div ul li a.menu-title
{
padding-right: 50px;
background: #000000 url('plus.png') no-repeat right center;
background-size: 75px 75px;
}
.menu-open .smenu_div ul li a.menu-title
{
background-image: url('minus.png')
}
JavaScript
var hidden = true;
function showsub() {
document.getElementById('hiddenMenu').style.display = (hidden) ? 'block' : 'none';
document.body.classList.toggle('menu-open');
hidden = !hidden;
};
function hidemenu() {
document.getElementById('hiddenMenu').style.display = 'none';
document.body.classList.toggle('plus');
hidden = !hidden;
};

there's a mistake in your html code <div class ="smenu_div""> has one too many quotes, so it breaks jsfiddle.
You almost have it, literally all you're missing in code is
setTimeout(hidemenu,10000);
from showsub. Note, if you want to prevent it from closing after 10s, if the user keeps pressing on stuff, you'll need some extra code, but if you're ok with it closing 10s after the user clicks on menu no matter what then it's ok.
here's the fiddle

how to change the parent div's height?

I am new to CSS. I want to apply background color for div. But the div height is zero. div has child elements too.
Here is my code. I added float to that ul,li elements.I searched so many sites I applied clear to the div ,but its not changing.
<div id="menulinks">
<ul class="dropdown">
<li>
projectCategoraization
<div id="submenu_pc">
<ul class="submenu">
<li>dgfdg</li>
<li>tutyu</li>
<li>ert45</li>
<li>7y56uty</li>
</ul>
</div>
</li>
</ul>
</div>
style
#submenu_pc {
width:240px;
display:none;
position:absolute;
}
.dropdown {
float:left;
}
.dropdown li {
float:left;
list-style:none;
}
.submenu {
position:absolute;
}
.dropdown ul li {
float:none;
}
script is
$(function(){
$(".dropdown li").hover(function(){
//alert("soumya");
$(this).addClass("hover");
$('#submenu_pc').css('display', 'block');
});
});

.submenu has position: absolute which means its parent has a height of 0. Remove position: absolute and assign a background color to the parent; that should do it.
jsFiddle

Adding background color to the UL with class of submenu
.submenu
{
background-color:aqua;
}

Add this CSS and remove the script completely!
#menulinks{
overflow:hidden;
background: red; // choose your color
}
#submenu_pc {
width:240px;
display:none;
}
.dropdown li:hover #submenu_pc{
display: block;
}
.dropdown {
float:left;
}
.dropdown li {
float:left;
list-style:none;
}
.dropdown ul li {
float:none;
}