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");
}
});
});
Related
I've got this strange thing where the text in a div goes below it after I update from the original text in a script function. Example below ("Hello World" is default, "test" is the updated text)
CSS
#footer {
height: 50px;
left: 0px;
top: 800px;
background: rgb(40, 40, 40);
border-radius: 0px 10px 10px 0px;
padding: 0px 15px;
font-size: 40px;
position: absolute;
overflow: visible;
color: #ac962a;
-webkit-box-shadow: 0px 10px 10px #383838;
box-shadow: 0px 5px 10px #383838;
}
HTML
<div id="footer">
<span id="botEvent">Hello World</span>
</div>
The botEvent id is what I am updating, and after the update the text goes below the original background box.
Any help is appreciated, thank you in advance and have a good day :)
do you have something else going on that's causing the problem? If you are using a p tag set margin and padding to 0
document.getElementById('botEvent').textContent = 'TEST';
#footer {
height: 50px;
left: 0px;
top: 20px;
background: rgb(40, 40, 40);
border-radius: 0px 10px 10px 0px;
padding: 0px 15px;
font-size: 40px;
position: absolute;
overflow: visible;
color: #ac962a;
-webkit-box-shadow: 0px 10px 10px #383838;
box-shadow: 0px 5px 10px #383838;
}
p{
margin:0;
padding:0;
}
<div id="footer">
<p id="botEvent">Hello World</p>
</div>
I'm trying to animate the div to extend width (like slide out animation) but I've gotten that to work, however I'm also trying to remove the border radius as this happens but when I do this the entire function doesn't work like.
Thank you for any help!
//-----------ENQUIRY-FORM----------
$('#enquiry-shown').click(function() {
$(this).animate({
width: "950px",
border - radius: "0px"
}, 1000);
$('#enquiry-form').slideToggle('slow');
});
/*--------ENQUIRIES---------*/
#enquiry-container {
text-align: center;
margin-bottom: 25px;
}
#enquiry-shown {
background-color: white;
padding: 10px 0;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
width: 210px;
border: solid 1px #d8d8d8;
border-radius: 50px;
margin: 0 auto;
transition: width ease 1s;
}
#enquiry-name {
font-family: "calibri light";
font-size: 30px;
text-align: center;
margin: 0;
display: inline;
padding: 0 0 0 10px;
}
#enq-arrowdown {
width: 25px;
height: 16px;
float: right;
padding: 10px 19px 0 0;
display: inline-block;
}
#enquiry-form {
width: 950px;
height: 400px;
background-color: white;
margin: 0 auto;
display: none;
border-bottom: solid 1px #d8d8d8;
border-right: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="enquiry-container">
<div id="enquiry-shown">
<h2 id="enquiry-name">Enquiries</h2>
<img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png">
</div>
<div id="enquiry-form">
</div>
</div>
just change border-radius: "0px"; to borderRadius: "0px"
//-----------ENQUIRY-FORM----------
$('#enquiry-shown').click(function() {
$(this).animate({
width: "950px",
borderRadius: "0px"
}, 1000);
$('#enquiry-form').slideToggle('slow');
});
/*--------ENQUIRIES---------*/
#enquiry-container {
text-align: center;
margin-bottom: 25px;
}
#enquiry-shown {
background-color: white;
padding: 10px 0;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
width: 210px;
border: solid 1px #d8d8d8;
border-radius: 50px;
margin: 0 auto;
transition: width ease 1s;
}
#enquiry-name {
font-family: "calibri light";
font-size: 30px;
text-align: center;
margin: 0;
display: inline;
padding: 0 0 0 10px;
}
#enq-arrowdown {
width: 25px;
height: 16px;
float: right;
padding: 10px 19px 0 0;
display: inline-block;
}
#enquiry-form {
width: 950px;
height: 400px;
background-color: white;
margin: 0 auto;
display: none;
border-bottom: solid 1px #d8d8d8;
border-right: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="enquiry-container">
<div id="enquiry-shown">
<h2 id="enquiry-name">Enquiries</h2>
<img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png">
</div>
<div id="enquiry-form">
</div>
</div>
You also can change the function like this: Notice "border-radius":"0px"
$(this).animate({
"width": "950px",
"border-radius": "0px"}, 1000);
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
I created an id wrapper in CSS:
#wrapper {
position: relative;
background: yellow;
-webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
width: 960px;
padding: 40px 35px 35px 35px;
margin: 0px auto;
}
class box in CSS:
float: left;
width: 170px;
height: 190px;
margin: 10px;
border: 3px solid #8AC007;
border-radius: 5px;
right: auto;
HTML:
<div id="wrapper"><div class="box">
<p>ini box 1</p>
</div> </div>
The problem is the box is out from the wrapper. What is the soultion?
Remove the float:left style from box css
.box {
width: 170px;
height: 190px;
margin: 10px;
border: 3px solid #8AC007;
border-radius: 5px;
right: auto;
}
Add overflow: auto to wrapper to clear the float of box.
I always recommend a clearing element after floats, old IE especially behaved unpredictably without them
<div id="wrapper">
<div class="box">
<p>ini box 1</p>
</div>
<div class='clr'></div>
</div>
additional CSS
.clr {
clear:both;
height:0px;
}
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