JavaScript calling show hide methods - javascript

I'm a complete newbie to JavaScript trying to understand simple things....
Please look at complete code below. It's simple, show and hide.
I'm doing something wrong due to which it's not working.
http://jsbin.com/esokic/edit#javascript,html,live
Would appreciate any help..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Close</title>
<SCRIPT type="text/javascript" src="jquery.all.min.js"></SCRIPT>
<style type="text/css">
.header-nav-outer {
float: left;
}
.get-daily-alerts-outer {
background: rgb(161, 8, 8); border-width: 0px 2px 2px; border-style: solid; border-color: rgb(0, 0, 0); padding: 2px 10px 20px 20px; border-radius: 0px 0px 8px 8px; width: 477px; height: 88px; display: none; position: absolute; z-index: 1000; -moz-border-radius: 0 0 8px 8px; -webkit-border-radius: 0 0 8px 8px;
}
span.close {
background: url("/img/snapdeal/sprite/snapdeal.png?v=1") no-repeat -674px -748px; padding: 1px 0px 1px 16px; color: rgb(255, 255, 255); font-size: 10px; cursor: pointer;
}
.get-daily-alerts-head {
color: rgb(224, 220, 220); padding-bottom: 10px; font-size: 19px; font-weight: bold;
}
.get-daily-alerts-head span {
font-size: 13px; font-weight: normal;
}
.header-top-nav {
background: url("/img/snapdeal/sprite/snapdeal-x.png?v=1") repeat-x left -73px; margin: 0px 0px 3px 170px; width: 592px; height: 32px; overflow: hidden;
}
.get-deal-alerts {
background: url("/img/snapdeal/sprite/snapdeal.png?v=1") no-repeat -565px -803px rgb(161, 8, 8); padding: 3px 5px; width: 115px; color: rgb(255, 255, 255); font-size: 11px; float: left; cursor: pointer; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px;
}
.csupport-drop-outer {
float: right;
}
.csupport-drop {
width: 120px !important; display: block;
text-align: left;
color: #C7C5C5;
font-size: 11px;
font-weight: normal;
cursor: pointer;
}
span.selected-city {
background: url("/img/snapdeal/sprite/snapdeal.png?v=1") no-repeat right 3px; padding-right: 20px;
}
.cust-support-outer {
margin: 0px; width: 121px; height: auto;
background: rgb(255, 255, 255); border-width: 0px 2px 7px; border-style: solid; border-color: rgb(0, 0, 0); margin: 0px; padding: 5px 2px; position: absolute; z-index: 1000 !important; border-radius: 0px 0px 7px 7px; -moz-border-radius: 0 0 7px 7px; -webkit-border-radius: 0 0 7px 7px;
}
ul.cust-support {
background: rgb(255, 255, 255); list-style: none; margin: 0px; padding: 0px; color: rgb(94, 94, 94); font-size: 12px;
}
ul.cust-support li {
margin-top: 1px;
margin-right: 5px;
border-bottom-color: #888484;
border-bottom-width: 1px;
border-bottom-style: dotted;
}
ul.cust-support li a {
list-style: none;
margin: 0px 0px 1px;
padding: 3px;
color: #5E5E5E;
font-size: 12px;
display: block;
cursor: pointer;
_cursor: hand;
}
.active-drop-tab {
background: rgb(255, 255, 255); border-width: 2px 2px 0px; border-style: solid; border-color: rgb(0, 0, 0); color: rgb(51, 176, 212); cursor: default; -moz-border-radius: 8px 8px 0 0; -webkit-border-radius: 8px 8px 0 0;
}
</style>
<script type="text/javascript">
this.init=function(){
$(".csupport-drop").click(function(){
$(".csupport-drop").addClass("active-drop-tab");
$(".cust-support-outer").show();
return false
});
$(".close").click(function(){
$(".get-daily-alerts-outer").hide();
return false
});
$(".get-deal-alerts").click(function(){
$(".get-daily-alerts-outer").show();
return false
});
};
</script>
</head>
<body>
<DIV class="header-nav-outer">
<DIV class="get-daily-alerts-outer">
<DIV align="right"><SPAN class="close">Close</SPAN></DIV>
<DIV class="get-daily-alerts-head">Get The Best Deals <SPAN>Everyday in your
mailbox</SPAN></DIV>
</DIV>
<DIV class="header-top-nav">
<DIV class="get-deal-alerts">Get daily deal alerts</DIV>
<DIV class="csupport-drop-outer">
<DIV class="csupport-drop"><SPAN class="selected-city">Customer
Support</SPAN></DIV>
<DIV class="cust-support-outer" style="display:none;">
<UL class="cust-support">
<LI><A><SPAN id="orderStatus">Order Status</SPAN></A></LI>
<LI><A><SPAN id="voucherResend">Resend Voucher</SPAN></A></LI>
<LI><A href="http://www.snapdeal.com/info/contactus" target="_blank">Contact
Us</A></LI></UL></DIV>
</DIV>
</DIV>
</body>
</html>


You never actually call init() so your click handlers are never being applied.
$(function() { init(); });


Try:
$(document).ready(function() {
$(".csupport-drop").click(function() {
$(this).addClass("active-drop-tab");
$(".cust-support-outer").show();
});
$(".close").click(function(){
$(".get-daily-alerts-outer").hide();
});
$(".get-deal-alerts").click(function(){
$(".get-daily-alerts-outer").show();
});
});


The problem is on this line:
this.init=function(){
What you want there instead of defining an init function is a document.ready handler, so
$(document).ready(function(){
and then at the end of the code block where you've got:
};
you need to close off the call to ready( that was opened above, so:
});
Or just leave your existing code as is and add a separate document.ready handler that calls your init function:
$(document).ready(init);
// OR, if you need to do other things in your document ready:
$(document).ready(function() {
// other stuff here
init();
// other stuff here
}
Updated demo: http://jsbin.com/esokic/6/edit

Related

How to make dropdown menu

I find this dropdown menu on internet.The problem is dropdown is always open and it doesnt work.When i paste all default code from http://codepen.io/Jeplaa/pen/IzAvx
it doesn't work.Please can you help me.How i can make when user click button it show dropdown menu and stay until user click on button again.
I include 2 scripts
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="assets/js/menu.js"></script>
Also the the code of dropdown menu:
$( ".cog, .admin-text" ).on( "click", function()
{
$( ".menu" ).stop().fadeToggle( "fast" );
});
/*MENU CSS------------*/
.top {
background-color:#F8F8F8;
width:100%;
height:60px;
-webkit-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
-moz-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
}
.profile_img {
max-width: 28px;
max-height: 32px;
margin-top:5px;
}
.content
{
position: relative;
top: 5px;
width: 250px;
margin-left:30px;
}
.user_text {
display:inline-block;
margin-left:20px;
vertical-align:20%;
font-family: "Open Sans", sans-serif;
font-size: 15px;
}
.admin-panel
{
background: #F8F8F8;
width: 240px;
height: 40px;
color: #888;
border: none;
border-radius: 3px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
line-height: 41px;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
margin-bottom: 7px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
}
.down
{
position: absolute;
top: 0;
right: 0;
padding: 10px 14px 0 0;
border: none;
color: #888888;
font-size: 20px;
}
.down:hover { color: #555555; }
.user_text { cursor: pointer; }
.menu a
{
display: block;
background: #F8F8F8;
width: 240px;
height: 40px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #000000;
color: rgba( 0, 0, 0, 0.4 );
line-height: 40px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
font-family: "Open Sans", sans-serif;
font-size: 13px;
}
.menu a:nth-child( 2 )
{
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.menu a:last-child
{
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.menu a:hover { color: #555555; }
.menu a:hover > .octicon { color: #555555; }
.arrow
{
width: 0;
height: 0;
margin-left: 15px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 9px solid #F8F8F8;
}
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300">
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<div class="top">
<div class="content">
<div class="admin-panel"><img src="http://i.imgur.com/wmyOI5f.jpg" class="profile_img"><b class="user_text">Curtis Jackson</b></div> <span class="down"><img src="http://i.imgur.com/bLXw2RL.png"></span>
<div class="menu">
<div class="arrow"></div>
Edit User
Worker Statistics</span>
Settings</span>
Logout
</div>
</div>
</div>

Replace this line:
$( ".cog, .admin-text" ).on( "click", function()
With this line:
$( ".admin-panel" ).on( "click", function()
... and it will work.
You can check it on Codepen: http://codepen.io/catalin586/pen/LRbELV
You may also want to add a display none by default to your menu:
.menu {display: none;}

you use in JQ
$( ".cog, .admin-text" ).on( "click", function()
{
$( ".menu" ).stop().fadeToggle( "fast" );
});
.cog and .admin-text do not exist in your HTML . i guess you want your .menu to appear ( fadeIn ) after you click the .arrow or on the text with class ".user_text"
also you say that the .menu always appears, ofcourse that happens if you don't hide it. in this example i've hidden it by setting {display:none} in CSS
see code below
let me know if this is what you want.
$(".down,.user_text").click(function(){
$(".menu").fadeToggle( "fast" );
})
.top {
background-color:#F8F8F8;
width:100%;
height:60px;
-webkit-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
-moz-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
}
.profile_img {
max-width: 28px;
max-height: 32px;
margin-top:5px;
}
.content
{
position: relative;
top: 5px;
width: 250px;
margin-left:30px;
}
.user_text {
display:inline-block;
margin-left:20px;
vertical-align:20%;
font-family: "Open Sans", sans-serif;
font-size: 15px;
}
.admin-panel
{
background: #F8F8F8;
width: 240px;
height: 40px;
color: #888;
border: none;
border-radius: 3px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
line-height: 41px;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
margin-bottom: 7px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
}
.down
{
position: absolute;
top: 0;
right: 0;
padding: 10px 14px 0 0;
border: none;
color: #888888;
font-size: 20px;
}
.down:hover { color: #555555; }
.user_text { cursor: pointer; }
.menu a
{
display: block;
background: #F8F8F8;
width: 240px;
height: 40px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #000000;
color: rgba( 0, 0, 0, 0.4 );
line-height: 40px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
font-family: "Open Sans", sans-serif;
font-size: 13px;
}
.menu a:nth-child( 2 )
{
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.menu a:last-child
{
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.menu a:hover { color: #555555; }
.menu a:hover > .octicon { color: #555555; }
.arrow
{
width: 0;
height: 0;
margin-left: 15px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 9px solid #F8F8F8;
}
.menu { display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
<div class="content">
<div class="admin-panel"><img src="http://i.imgur.com/wmyOI5f.jpg" class="profile_img"><b class="user_text">Curtis Jackson</b></div> <span class="down"><img src="http://i.imgur.com/bLXw2RL.png"></span>
<div class="menu">
<div class="arrow"></div>
Edit User
Worker Statistics
Settings
Logout
</div>
</div>
</div>

.down & .user_text
Try it:
$( ".down, .user_text" ).on( "click", function() {
$( ".menu" ).stop().fadeToggle( "fast" );
});
/*MENU CSS------------*/
.top {
background-color:#F8F8F8;
width:100%;
height:60px;
-webkit-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
-moz-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
}
.profile_img {
max-width: 28px;
max-height: 32px;
margin-top:5px;
}
.content
{
position: relative;
top: 5px;
width: 250px;
margin-left:30px;
}
.user_text {
display:inline-block;
margin-left:20px;
vertical-align:20%;
font-family: "Open Sans", sans-serif;
font-size: 15px;
}
.admin-panel
{
background: #F8F8F8;
width: 240px;
height: 40px;
color: #888;
border: none;
border-radius: 3px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
line-height: 41px;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
margin-bottom: 7px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
}
.down
{
position: absolute;
top: 0;
right: 0;
padding: 10px 14px 0 0;
border: none;
color: #888888;
font-size: 20px;
}
.down:hover { color: #555555; }
.user_text { cursor: pointer; }
.menu a
{
display: block;
background: #F8F8F8;
width: 240px;
height: 40px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #000000;
color: rgba( 0, 0, 0, 0.4 );
line-height: 40px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
font-family: "Open Sans", sans-serif;
font-size: 13px;
}
.menu a:nth-child( 2 )
{
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.menu a:last-child
{
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.menu a:hover { color: #555555; }
.menu a:hover > .octicon { color: #555555; }
.arrow
{
width: 0;
height: 0;
margin-left: 15px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 9px solid #F8F8F8;
}
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300">
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<div class="top">
<div class="content">
<div class="admin-panel"><img src="http://i.imgur.com/wmyOI5f.jpg" class="profile_img">
<b class="user_text">Curtis Jackson</b>
</div>
<span class="down">
<img src="http://i.imgur.com/bLXw2RL.png">
</span>
<div class="menu">
<div class="arrow"></div>
Edit User
Worker Statistics</span>
Settings</span>
Logout
</div>
</div>
</div>

Remove the .cog and change .admin-text to .admin-panel
$( ".cog, .admin-text" ).on( "click", function()
to
$( ".admin-panel" ).on( "click", function()
Hope it helps!
$( ".admin-panel" ).on( "click", function()
{
$( ".menu" ).stop().fadeToggle( "fast" );
});
/*MENU CSS------------*/
.top {
background-color:#F8F8F8;
width:100%;
height:60px;
-webkit-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
-moz-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
}
.profile_img {
max-width: 28px;
max-height: 32px;
margin-top:5px;
}
.content
{
position: relative;
top: 5px;
width: 250px;
margin-left:30px;
}
.user_text {
display:inline-block;
margin-left:20px;
vertical-align:20%;
font-family: "Open Sans", sans-serif;
font-size: 15px;
}
.admin-panel
{
background: #F8F8F8;
width: 240px;
height: 40px;
color: #888;
border: none;
border-radius: 3px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
line-height: 41px;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
margin-bottom: 7px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
}
.down
{
position: absolute;
top: 0;
right: 0;
padding: 10px 14px 0 0;
border: none;
color: #888888;
font-size: 20px;
}
.down:hover { color: #555555; }
.user_text { cursor: pointer; }
.menu a
{
display: block;
background: #F8F8F8;
width: 240px;
height: 40px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #000000;
color: rgba( 0, 0, 0, 0.4 );
line-height: 40px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
font-family: "Open Sans", sans-serif;
font-size: 13px;
}
.menu a:nth-child( 2 )
{
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.menu a:last-child
{
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.menu a:hover { color: #555555; }
.menu a:hover > .octicon { color: #555555; }
.arrow
{
width: 0;
height: 0;
margin-left: 15px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 9px solid #F8F8F8;
}
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300">
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<div class="top">
<div class="content">
<div class="admin-panel"><img src="http://i.imgur.com/wmyOI5f.jpg" class="profile_img"><b class="user_text">Curtis Jackson</b></div> <span class="down"><img src="http://i.imgur.com/bLXw2RL.png"></span>
<div class="menu">
<div class="arrow"></div>
Edit User
Worker Statistics</span>
Settings</span>
Logout
</div>
</div>
</div>

You are not having any elements with classes either cog or admin-text. You are using onclick on these. The codePen example which you have provided contains an element with admin-text class

you can use fadeIn and fadeOut in jquery
see the documentation in jquery

Add close button div to close the boxing

Here is my JSFiddle
Preview is shown in div box. I want to add close option on right top. How could be done so that when user click on it box should be disabled.
Code Snippet
.duyurular {
background-color: rgba(255, 255, 255, 0.8);
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
color: #212121;
height: 42px;
line-height: 42px;
padding: 0 16px;
}
.duyurular > i {
background-color: #27ae60;
border-radius: 4px 0 0 4px;
color: #fff;
float: left;
font-size: 16px;
height: 42px;
line-height: 42px;
margin: 0 16px 0 -16px;
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
width: 42px;
}
.otomesaj {
float: left;
font-family: "Exo 2",sans-serif;
font-size: 13px;
margin: 1px auto 0;
padding: 0 5px;
width: 680px;
}
.otomesaj ul {
margin: 0;
padding: 0;
}
.duyurus {
color: #212121;
display: none;
list-style: outside none none;
text-align: left;
}
<div class="duyurular" original-title="">
<i class="fa fa-bullhorn" original-title=""></i>
<div class="otomesaj" original-title="">
<ul>
<li class="duyurus" style="display: list-item;">Temamız yapım aşamasındadır sürekli yenilenmekte ve geliştirilmektedir.</li>
<li class="duyurus" style="display: none;">denem amaçlı yazılmıştır gerekli değişiklikleri header kısmından yapabilirsiniz...</li>
<li class="duyurus" style="display: none;">deneme için yazıldı temamız özel yapım bir temadır kesinlikle emek temasıdır saygı duyalım.</li>
</ul>
</div>
</div>

try this code,this may help you
$(document).ready(function(){
$('.right').click(function(){
$(this).parent().hide('slow');
})
})
.duyurular {
background-color: rgba(255, 255, 255, 0.8);
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
color: #212121;
height: 42px;
line-height: 42px;
padding: 0 16px;
}
.duyurular > i {
background-color: #27ae60;
border-radius: 4px 0 0 4px;
color: #fff;
float: left;
font-size: 16px;
height: 42px;
line-height: 42px;
margin: 0 16px 0 -16px;
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
width: 42px;
}
.otomesaj {
float: left;
font-family: "Exo 2",sans-serif;
font-size: 13px;
margin: 1px auto 0;
padding: 0 5px;
width: 680px;
}
.otomesaj ul {
margin: 0;
padding: 0;
}
.duyurus {
color: #212121;
display: none;
list-style: outside none none;
text-align: left;
}
.right{
position:relative;
text-align:right;
left:350px;
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="duyurular" original-title="">
<i class="fa fa-bullhorn" original-title="">s</i>
<div class="otomesaj" original-title="">
<ul>
<li class="duyurus" style="display: list-item;">Temamız yapım aşamasındadır sürekli yenilenmekte ve geliştirilmektedir.</li>
<li class="duyurus" style="display: none;">denem amaçlı yazılmıştır gerekli değişiklikleri header kısmından yapabilirsiniz...</li>
<li class="duyurus" style="display: none;">deneme için yazıldı temamız özel yapım bir temadır kesinlikle emek temasıdır saygı duyalım.</li>
</ul>
</div>
<button class="right">x</button>
</div>

Add it this way.
<style>
#preview {
height: 70%;
width: 70%;
position: fixed;
z-index: 1;
top:30;
left: 20;
background-color: #ff00ff;
overflow-x: hidden;
padding-top: 60px;
}
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px !important;
margin-left: 50px;
}
</style>
<body>
<div id="preview">
<a href="javascript:void(0)" class="closebtn"
onclick="closePreview()">x</a>
<p style="text-align:center" >Your Content</p>
</div>
<script>
function closePreview(){
var btn = document. getElementById("preview");
btn.style.display="none"
}
</script>
</body>

I updated your Fiddle :)
http://jsfiddle.net/djxnznen/3/
http://jsfiddle.net/djxnznen/4/
$(document).ready(function(){
$('.right').click(function(){
$(this).parent().hide('slow');
})
})
.duyurular {
background-color: rgba(255, 255, 255, 0.8);
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
color: #212121;
height: 42px;
line-height: 42px;
padding: 0 16px;
}
.duyurular > i {
background-color: #27ae60;
border-radius: 4px 0 0 4px;
color: #fff;
float: left;
font-size: 16px;
height: 42px;
line-height: 42px;
margin: 0 16px 0 -16px;
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
width: 42px;
}
.otomesaj {
float: left;
font-family: "Exo 2",sans-serif;
font-size: 13px;
margin: 1px auto 0;
padding: 0 5px;
width: 680px;
}
.otomesaj ul {
margin: 0;
padding: 0;
}
.duyurus {
color: #212121;
display: none;
list-style: outside none none;
text-align: left;
}
.right{
position:relative;
text-align:right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="duyurular" original-title="">
<i class="fa fa-bullhorn" original-title="">s</i>
<div class="otomesaj" original-title="">
<ul>
<li class="duyurus" style="display: list-item;">Temamız yapım aşamasındadır sürekli yenilenmekte ve geliştirilmektedir.</li>
<li class="duyurus" style="display: none;">denem amaçlı yazılmıştır gerekli değişiklikleri header kısmından yapabilirsiniz...</li>
<li class="duyurus" style="display: none;">deneme için yazıldı temamız özel yapım bir temadır kesinlikle emek temasıdır saygı duyalım.</li>
</ul>
</div>
<div class="right">x</div>
</div>
They are all the same, but my mouse hates me(I click 1 time and he perform a click storm...).

you should give an id to your div and add an onlcick event on it here i gave the id myDiv
var myDiv = document.getElementById("myDiv");
myDiv.onclick = function() { myDiv.style.display = 'none'; };
here the fiddle

jQuery-UI resizable bug with slide animation

I cannot seem to figure out what the jQueryUI resizable function is doing to cause the anchor point of the "chat box" div element I've created. The problem is that when you resize this element by dragging the top right corner, it does resize correctly, but when you press the close button to play the jQuery animation to collapse it, it will collapse in the wrong direction. If you do not resize the box at all then this collapse animation works correctly.
There seems to be another problem where resizing it causes the box to jump higher on the page, but this only seems to happen on Google Chrome, Firefox works fine, and not sure why!
Try resizing the box and then closing it to see the problem:
$(document).ready(function() {
// controls resizing of the chat box
$('.chat_box').resizable({
handles: 'n, e, ne',
minWidth: 300,
minHeight: 100,
maxWidth: 700,
maxHeight: 500,
});
});
function minimize(chatId) {
var bottom_bar = document.getElementById("bottom_bar");
var box = bottom_bar.getElementsByClassName("chat_box")[chatId];
var bar = bottom_bar.getElementsByClassName("chat_bar")[chatId];
bar.className = "chat_bar chat_box_minimized";
$(box).stop().animate({
height: "0px",
width: bar.offsetWidth,
},
'normal', function() {
$(box).hide();
}
);
}
#bottom_bar {
position: fixed;
z-index: 10;
bottom: 0px;
left: 0px;
right: 0px;
max-height: 40px;
background-color: #0042b3;
padding: 2px 20px;
}
div.chat_box {
position: fixed;
width: 350px;
height: 180px;
margin: 0px 4px;
bottom: 45px;
}
div.close_btn {
position: absolute;
top: 0px;
right: 0px;
width: 30px;
height: 100%;
}
div.close_btn:before {
content: 'x';
display: block;
text-align: center;
vertical-align: middle;
line-height: 25px;
font-weight: bold;
font-family: Arial, sans-serif;
pointer-events: none;
}
div.close_btn:hover {
background-color: rgba(0, 9, 26, 0.8);
cursor: pointer;
}
div.chat_box_maximized {
background-color: white;
width: 350px;
margin: 5px 0px;
padding: 2px;
border: 3px solid #0045cc;
border-radius: 5px;
display: inline-block;
}
div.chat_box_maximized input {
width: 100%;
border: none;
}
div.chat_box_maximized p {
display: none;
}
div.chat_box_minimized {
background-color: #002266;
;
max-width: 200px;
min-width: 80px;
margin: 5px 0px;
padding: 2px;
border: 3px solid #002266;
;
border-radius: 5px;
display: inline-block;
}
div.chat_box_minimized:hover {
background-color: #3378ff;
border: 3px solid #3378ff;
cursor: pointer;
}
div.chat_box_minimized form {
display: none;
}
div.chat_box_minimized p {
margin: 0px 5px;
font-size: 10pt;
color: white;
font-weight: bold;
pointer-events: none;
}
.light_container,
.dark_container {
-webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.57);
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.57);
border: 1px solid #005eff;
padding: 1px;
}
.light_container {
background-color: rgba(0, 34, 102, 0.9);
}
.dark_container {
background-color: rgba(0, 9, 26, 0.9);
}
.light_container .body,
.dark_container .body {
padding: 5px;
}
div.basic_title {
position: relative;
width: 100%;
background-color: #005eff;
padding: 4px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
div.basic_title p {
margin: 0px;
pointer-events: none;
}
div.basic_panel div.basic_title {
font-size: 14px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="bottom_bar">
<div class="chat_box dark_container">
<div class="basic_title">
<p>Chat Box</p>
<div class="close_btn" onclick="minimize(0)"></div>
</div>
<div class="body"></div>
</div>
<div class="chat_bar chat_box_maximized">
<p>Chat Box</p>
<form>
<input type="text" placeholder="send a message">
</form>
</div>
</div>

When you resize from top handle, it changes top coordinate and height. Since you set the position with bottom, normally on animate the height will change but not bottom coordinate. But as soon as resizable sets top coordinate, then the animation will be made but with top coordinate remaining.
What you can do is use resize callback to prevent top coordinate to be set when you resize. Then it'll keep the proper direction on animation, and the resize will work as well.
$(document).ready(function() {
// controls resizing of the chat box
$('.chat_box').resizable({
handles: 'n, e, ne',
minWidth: 300,
minHeight: 100,
maxWidth: 700,
maxHeight: 500,
resize: function(event, ui) {
ui.helper.css('top', '');
}
});
});
function minimize(chatId) {
var bottom_bar = document.getElementById("bottom_bar");
var box = bottom_bar.getElementsByClassName("chat_box")[chatId];
var bar = bottom_bar.getElementsByClassName("chat_bar")[chatId];
bar.className = "chat_bar chat_box_minimized";
$(box).stop().animate({
height: "0px",
width: bar.offsetWidth,
},
'normal', function() {
$(box).hide();
}
);
}
#bottom_bar {
position: fixed;
z-index: 10;
bottom: 0px;
left: 0px;
right: 0px;
max-height: 40px;
background-color: #0042b3;
padding: 2px 20px;
}
div.chat_box {
position: fixed;
width: 350px;
height: 180px;
margin: 0px 4px;
bottom: 45px;
}
div.close_btn {
position: absolute;
top: 0px;
right: 0px;
width: 30px;
height: 100%;
}
div.close_btn:before {
content: 'x';
display: block;
text-align: center;
vertical-align: middle;
line-height: 25px;
font-weight: bold;
font-family: Arial, sans-serif;
pointer-events: none;
}
div.close_btn:hover {
background-color: rgba(0, 9, 26, 0.8);
cursor: pointer;
}
div.chat_box_maximized {
background-color: white;
width: 350px;
margin: 5px 0px;
padding: 2px;
border: 3px solid #0045cc;
border-radius: 5px;
display: inline-block;
}
div.chat_box_maximized input {
width: 100%;
border: none;
}
div.chat_box_maximized p {
display: none;
}
div.chat_box_minimized {
background-color: #002266;
;
max-width: 200px;
min-width: 80px;
margin: 5px 0px;
padding: 2px;
border: 3px solid #002266;
;
border-radius: 5px;
display: inline-block;
}
div.chat_box_minimized:hover {
background-color: #3378ff;
border: 3px solid #3378ff;
cursor: pointer;
}
div.chat_box_minimized form {
display: none;
}
div.chat_box_minimized p {
margin: 0px 5px;
font-size: 10pt;
color: white;
font-weight: bold;
pointer-events: none;
}
.light_container,
.dark_container {
-webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.57);
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.57);
border: 1px solid #005eff;
padding: 1px;
}
.light_container {
background-color: rgba(0, 34, 102, 0.9);
}
.dark_container {
background-color: rgba(0, 9, 26, 0.9);
}
.light_container .body,
.dark_container .body {
padding: 5px;
}
div.basic_title {
position: relative;
width: 100%;
background-color: #005eff;
padding: 4px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
div.basic_title p {
margin: 0px;
pointer-events: none;
}
div.basic_panel div.basic_title {
font-size: 14px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="bottom_bar">
<div class="chat_box dark_container">
<div class="basic_title">
<p>Chat Box</p>
<div class="close_btn" onclick="minimize(0)"></div>
</div>
<div class="body"></div>
</div>
<div class="chat_bar chat_box_maximized">
<p>Chat Box</p>
<form>
<input type="text" placeholder="send a message">
</form>
</div>
</div>

Styling JQuery UI Autocomplete

Fiddle
I'm trying to style the sections inside the AutoComplete, but I don't know what to put in the CSS for the sections. I'm specifically trying to make:
color: #96f226;
border-radius: 0px;
border: 1px solid #454545;
Any suggestions???

Are you looking for this selector?:
.ui-menu .ui-menu-item a{
background:red;
height:10px;
font-size:8px;
}
Ugly demo:
http://jsfiddle.net/zeSTc/
Just replace with your code:
.ui-menu .ui-menu-item a{
color: #96f226;
border-radius: 0px;
border: 1px solid #454545;
}
demo: http://jsfiddle.net/w5Dt2/

Bootstrap styling for jQuery UI Autocomplete
.ui-autocomplete {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
float: left;
display: none;
min-width: 160px;
padding: 4px 0;
margin: 0 0 10px 25px;
list-style: none;
background-color: #ffffff;
border-color: #ccc;
border-color: rgba(0, 0, 0, 0.2);
border-style: solid;
border-width: 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
*border-right-width: 2px;
*border-bottom-width: 2px;
}
.ui-menu-item > a.ui-corner-all {
display: block;
padding: 3px 15px;
clear: both;
font-weight: normal;
line-height: 18px;
color: #555555;
white-space: nowrap;
text-decoration: none;
}
.ui-state-hover, .ui-state-active {
color: #ffffff;
text-decoration: none;
background-color: #0088cc;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
background-image: none;
}

Based on #md-nazrul-islam reply, This is what I did with SCSS:
ul.ui-autocomplete {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
float: left;
display: none;
min-width: 160px;
margin: 0 0 10px 25px;
list-style: none;
background-color: #ffffff;
border: 1px solid #ccc;
border-color: rgba(0, 0, 0, 0.2);
//#include border-radius(5px);
#include box-shadow( rgba(0, 0, 0, 0.1) 0 5px 10px );
#include background-clip(padding-box);
*border-right-width: 2px;
*border-bottom-width: 2px;
li.ui-menu-item{
padding:0 .5em;
line-height:2em;
font-size:.8em;
&.ui-state-focus{
background: #F7F7F7;
}
}
}

You can overwrite the classes in your own css using !important, e.g. if you want to get rid of the rounded corners.
.ui-corner-all
{
border-radius: 0px !important;
}

CSS & JQuery: Better Usability

I would like to improve my user experience of the following code:
HTML:
<div class="news-item">
<div class="main-content">
<div class="header"> Header 1 </div>
<div class="content"> lorum ipsum </div>
<div class="time"> time </div>
</div>
</div>
<div class="news-item">
<div class="main-content">
<div class="header"> Header </div>
<div class="content"> lorum ipsum </div>
<div class="time"> time </div>
</div>
</div>​
JavaScript:
jQuery(document).ready(function() {
$(".header").click(function () {
$(this).parent().toggleClass("expand");
});
});​
CSS:
body {
background-color: whitesmoke;
}
.header{
font-size: 20px;
padding-bottom: 20px;
cursor:pointer;
}
.main-content {
margin: 0 0 12px 70px;
padding: 0;
background: rgb(251, 251, 251);
width: 80%;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
position:relative;
margin-left: 20px;
margin-top: 20px;
background-color: white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 22px;
height: 20px;
overflow: hidden;
}
.expand {
height: 200px;
}​
Demo: http://jsfiddle.net/9UJ7f/4/
As you may notice, when you click the Header, the box expands or collapses.
However, this only works when we click the Header, e.g. when we click the box's border (in collapsed mode) nothing happens.
To eradicate "void-clicks", I would like it to be like this:
A. In Collapsed Mode:
If you click anywhere on the box (.main-content class), the item will expand
B. In Expanded Mode:
If you click only the .Header class, the item contracts again.
What would be the best approach to do this ?
UPDATE:
OK, you were right. The CSS was a bit off.
I choose sandeep's solution as it was the most minimalistic but best working solution.
But also thanks to everyone else who helped. Especially the JS solutions from thecodeparadox & Arif. (though it still has some "void clicks" around the border).
You are awesome, guys. I'll give you all a thumbs up.

jQuery(document).ready(function() {
$('.header').click(function(e) {
e.stopPropagation();
$(this).parent().toggleClass('expand');
})
$(".main-content").click(function() {
if (!$(this).hasClass('expand')) {
$(this).addClass("expand");
}
});
});
Perfect working sample

Give padding to heading DIV. Write like this:
.main-content {
margin: 0 0 12px 70px;
padding: 0;
background: rgb(251, 251, 251);
width: 80%;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
position:relative;
margin-left: 20px;
margin-top: 20px;
background-color: white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding-bottom: 22px;
height: 42px;
overflow: hidden;
}
.header ~ div{
margin:22px;
}
.header{
font-size: 20px;
padding: 22px;
cursor:pointer;
}
Check this http://jsfiddle.net/9UJ7f/14/

demo
<div class="main-content">
<h2 class="header"> Header 1 </h2> <!-- you can use h2 -->
<div class="content"> lorum ipsum 1 </div>
<div class="time"> time 1</div>
</div>
Just remove the padding from the container (.content) and play with your children elements padding.
.main-content {
position:relative;
overflow: hidden;
margin-left: 20px;
margin-top: 20px;
width: 80%;
height: 50px;
background: rgb(251, 251, 251);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
background-color: white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
h2.header, .content, .time{
padding:3px 22px;
}
h2.header{
padding:13px 22px;
font-size: 20px;
cursor:pointer;
}
.time{ padding-bottom:20px; }

This should work for you: DEMO
Here's the new javascript:
jQuery(document).ready(function() {
$(".news-item").click(function () {
if( !$('.main-content', this).hasClass('expand') )
$('.main-content', this).toggleClass("expand");
});
$('.news-item .main-content.expand .header').live('click',function () {
$(this).parent().toggleClass("expand");
});
});​
This does what you describe. It only expands an item if .news-item has no .expand class. If it does have one, then clicking the header is the only thing that will close it.

Your js is correct. Change you css with
body {
background-color: whitesmoke;
}
.header{
font-size: 20px;
cursor:pointer;
padding: 22px 22px 20px 22px;
}
.content { padding: 0 22px; }
.time { padding: 0 22px; }
/* thanks to raingroove for the main styling ! */
.main-content {
margin: 0 0 12px 70px;
padding: 0;
background: rgb(251, 251, 251);
width: 80%;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
position:relative;
margin-left: 20px;
margin-top: 20px;
background-color: white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
height: 66px;
overflow: hidden;
}
.expand {
height: 200px;
}
see http://jsfiddle.net/9UJ7f/25/

small addition to #thecodeparadox answer
jQuery(document).ready(function()
{
$('.header').click(function(e) {
e.stopPropagation? e.stopPropagation() : e.cancelBubble = true; //e.stopPropagation() does not work for all browsers
$(this).parent().toggleClass('expand');
})
$(".main-content").click(function() {
if (!$(this).hasClass('expand')) {
$(this).addClass("expand");
}
});
});

Categories

Resources