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 have an image with some text positioned over it.
When I hover the cursor over the image, I change the color of box-shadow.
Unfortunately, when the cursor reaches the text overlaid on top of the image, the background image loses the hover effect.
How can I keep the hover effect on the image, while the cursor is on the nephew text element?
HTML
<div class="col-xs-6 col-sm-3">
<a href="#">
<img src="http://via.placeholder.com/270x200.png">
<div class="text-overlay">
<h2><span>Example</span><br>Overlay<br>Text</h2>
</div>
</a>
</div>
CSS
img {
margin-top: 20px;
border-radius: 10px;
box-shadow: 0px 0px 0px 2px #b2b2b2;
}
img:hover {
box-shadow: 0px 0px 0px 2px #f47c20;
}
.text-overlay {
color: #fff;
position: absolute;
top: 40px;
left: 32px;
}
Example codepen: https://codepen.io/Washable/pen/bLGqbP
Make the hover on the a tag :
Codepen : https://codepen.io/anon/pen/rJNyQp
img {
margin-top: 20px;
border-radius: 10px;
box-shadow: 0px 0px 0px 2px #b2b2b2;
}
a:hover img {
box-shadow: 0px 0px 0px 2px #f47c20;
}
.text-overlay {
color: #fff;
position: absolute;
top: 40px;
left: 32px;
}
<div class="col-xs-6 col-sm-3">
<a href="#">
<img src="http://via.placeholder.com/270x200.png">
<div class="text-overlay">
<h2><span>Example</span><br>Overlay<br>Text</h2>
</div>
</a>
</div>
If you want to just show the text, you can use pointer-events:none to the text class .text-overlay.
Stack Snippet
img {
margin-top: 20px;
border-radius: 10px;
box-shadow: 0px 0px 0px 2px #b2b2b2;
}
img:hover {
box-shadow: 0px 0px 0px 2px #f47c20;
}
.text-overlay {
color: #fff;
position: absolute;
top: 40px;
left: 32px;
pointer-events: none;
}
<div class="col-xs-6 col-sm-3">
<a href="#">
<img src="http://via.placeholder.com/270x200.png">
<div class="text-overlay">
<h2><span>Example</span><br>Overlay<br>Text</h2>
</div>
</a>
</div>
Recommendation
Never put div within a tag, you need to use inline elements.
Inline elements ( a, span, strong, em among others ) can contain other inline elements and text nodes. An anchor can contain a span, which can contain a text node. Reference
Set the HOVER to your a element.
The following code snippet uses the text-overlay class on your h2 tag.
img {
margin-top: 20px;
border-radius: 10px;
box-shadow: 0px 0px 0px 2px #b2b2b2;
}
a:hover img {
box-shadow: 0px 0px 0px 2px #f47c20;
}
.text-overlay {
color: #fff;
position: absolute;
top: 40px;
left: 32px;
}
<div class="col-xs-6 col-sm-3">
<a href="#">
<h2 class='text-overlay'><span>Example</span><br>Overlay<br>Text</h2>
<img src="http://via.placeholder.com/270x200.png">
</a>
</div>
You need to some changes in your css
img {
margin-top: 20px;
border-radius: 10px;
box-shadow: 0px 0px 0px 2px #b2b2b2;
}
a:hover img {
box-shadow: 0px 0px 0px 2px #f47c20;
}
.text-overlay {
color: #fff;
position: absolute;
top: 40px;
left: 32px;
display:block;
}
First off, the text is not the child for the img, but a nephew (as it's the child of it's div sibling).
Anyway, you can fix that either by going
.text-overlay {
pointer-events:none;
}
or adjusting your html structure as described in other anwsers
Dropdown is hiding. I dont know what problem. If i give opacity and overflow visible it is not working. I have tried in inspect element, but it is not working.
Code for text box:-
<input class="typeahead form-control tt-input" id="search" placeholder="Location" type="text" spellcheck="false" dir="auto" aria-activedescendant="" aria-owns="search_listbox" role="combobox" aria-readonly="true" aria-autocomplete="list" style="position: relative; vertical-align: top;">
CSS:-
element.style {
position: relative;
vertical-align: top;
}
.form-control {
padding: 10px 22px;
border: 4px solid #938F94;
height: 47px;
}
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
}
Code for tt-menu:-(Dropdown)
element.style {
position: initial;
top: 100%;
left: 0px;
z-index: 100;
display: none;
}
.tt-menu {
width: 350px;
margin: 0;
padding: 8px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
How to make it overflow visible?
use this code if you are using bootstrap dropdown.
.dropdown{
z-index:9999;
}
I'm trying to implement a JQuery script to a php file, but so far it didn't work.
I'm very new to web programming (a couple weeks old) and this is my first real use of JQuery.
Here is part of what i want to do with this :
I'm trying to get the opacity of a span element gradually go from 1 to 0 for a login menu. The exact same thing as here.
And this is what i did : /** nevermind, not enough reputation for images **/
I have a some problems with this menu but my priority is to get that javascript to work. It is supposed to reduce the opacity to 0 of the icons in front of "username" and "password" (i'm just trying to have it work on password for now) but it doesn't.
This login form is part of my header.php and going to be all over the website.
Here are my codes (javascript / part of the css / part of my header.php) :
$( "#mdp" ).focusin(function() {
$( this ).find( ".mdp_icon" ).animate({"opacity":"0"}, 200);
});
$( "#mdp" ).focusout(function() {
$( this ).find( ".mdp_icon" ).animate({"opacity":"1"}, 300);
});
$(".login").submit(function(){
$(this).find(".submit i").removeAttr('class').addClass("fa fa-check").css({"color":"#fff"});
$(".submit").css({"background":"#2ecc71", "border-color":"#2ecc71"});
$(".feedback").show().animate({"opacity":"1", "bottom":"-80px"}, 400);
$("input").css({"border-color":"#2ecc71"});
return false;
});
input[type="submit"] {
width: 45px;
height: 45px;
display: block;
margin: 0 auto -15px auto;
background: #fff;
border-radius: 100%;
border: 1px solid #a6ba89;
color: #FFF;
font-size: 24px;
cursor: pointer;
box-shadow: 0px 0px 0px 7px
}
input#txt_identifiant, input#txt_mdp {
border-radius: 3px;
font-size: 14px;
height: 28px;
line-height: 28px;
width: 200px;
padding: 0 8px 0 30px ;
display: block;
border: 1px solid #DDDDDD;
transition: 0.3s ease-out;
}
input#txt_identifiant, input#txt_mdp {
:-webkit-transition: 0.3s ease-out;
:-moz-transition: 0.3s ease-out;
}
#txt_identifiant:focus {
padding: 0 8px 0 10px ;
border-color: #a6ba89;
outline: 0px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6)
}
#txt_mdp:focus {
padding: 0 8px 0 10px ;
border-color: #a6ba89;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6)
}
.error {
display: block;
color: #C85305;
font-size: 12px;
min-height: 12px;
}
.placeholder {color: #aaa}
::-webkit-input-placeholder {color: #aaa}
:-moz-placeholder {color: #aaa}
#identifiant {
text-align: center;
padding: 15px 15px 0 15px;
}
.identifiant_icon {
position: absolute;
display: block;
color: darken(#EDEDED, 10%);
left: 23px;
top: 18px;
font-size: 20px;
}
#mdp {
text-align: center;
padding: 15px 15px 0 15px;
}
.mdp_icon {
position: absolute;
display: block;
color: darken(#EDEDED, 10%);
left: 25px;
top: 65px;
font-size: 20px;
}
<!-- header -->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
.......
<div class="bubble">
<form method="post" action="login.php">
<div id="identifiant">
<input type="text" name="txt_identifiant" id="txt_identifiant" placeholder="username" required="" value="" />
<span class="identifiant_icon"><i class="fa fa-user"></i></span>
</div>
<div id="mdp">
<input type="password" name="txt_mdp" id="txt_mdp" placeholder="password" required="" />
<span class="mdp_icon"><i class="fa fa-lock"></i></span>
</div>
<div id="maintenir">
<input type="checkbox" name="chk_maintenir" id="chk_maintenir">
<label for="chk_maintenir"><span>Stay Connected</span></label>
</div>
<div id="soumettre">
<input type="submit" name="sub_login" id="sub_login" value="" style="" />
</div>
</form>
</div>
And so far when i load my page nothing happens regarding theses icons, while they are supposed to vanish the same way as in the exemple i linked (and i'm guessing the submit button wouldn't either so i didn't bother going farther).
So what did i miss here ?
Thank you ! Any help is appreciated, hope there is enough information and if not i will provide more.
-Apatik
edit1 : my whole script.js looks like this :
$(document).ready(function(){
$( "#mdp" ).focusin(function() {
$( this ).find( ".mdp_icon" ).animate({"opacity":"0"}, 200);
});
$( "#mdp" ).focusout(function() {
$( this ).find( ".mdp_icon" ).animate({"opacity":"1"}, 300);
});
$(".login").submit(function(){
$(this).find(".submit i").removeAttr('class').addClass("fa fa-check").css({"color":"#fff"});
$(".submit").css({"background":"#2ecc71", "border-color":"#2ecc71"});
$(".feedback").show().animate({"opacity":"1", "bottom":"-80px"}, 400);
$("input").css({"border-color":"#2ecc71"});
return false;
});
})
You're attaching an action to an element with the class login:
$(".login").submit(function(){
....
But nothing in your html has that class
Also, based on your comment where you said it works here but not in your own website, you may well have forgotten to include jQuery library - its done automatically here:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Edit: Your code is in an external file called script.js which is fine, but that code executes immediately. It needs to execute once the DOM has loaded, therefore change script.js to look like
$(function(){
// existing code here
});
That is a shortened version of
$(document).ready(function(){
// existing code here
});
Either way will ensure your code only executes after the DOM has loaded.
You have to put focusin/focusout events on inputs not on the parent.
$( "#mdp input" ).focusin(function() {
$("#mdp").find( ".mdp_icon" ).animate({"opacity":"0"}, 200);
}).focusout(function() {
$("#mdp").find( ".mdp_icon" ).animate({"opacity":"1"}, 300);
});
$(".login").submit(function(){
$(this).find(".submit i").removeAttr('class').addClass("fa fa-check").css({"color":"#fff"});
$(".submit").css({"background":"#2ecc71", "border-color":"#2ecc71"});
$(".feedback").show().animate({"opacity":"1", "bottom":"-80px"}, 400);
$("input").css({"border-color":"#2ecc71"});
return false;
});
input[type="submit"] {
width: 45px;
height: 45px;
display: block;
margin: 0 auto -15px auto;
background: #fff;
border-radius: 100%;
border: 1px solid #a6ba89;
color: #FFF;
font-size: 24px;
cursor: pointer;
box-shadow: 0px 0px 0px 7px
}
input#txt_identifiant, input#txt_mdp {
border-radius: 3px;
font-size: 14px;
height: 28px;
line-height: 28px;
width: 200px;
padding: 0 8px 0 30px ;
display: block;
border: 1px solid #DDDDDD;
transition: 0.3s ease-out;
}
input#txt_identifiant, input#txt_mdp {
:-webkit-transition: 0.3s ease-out;
:-moz-transition: 0.3s ease-out;
}
#txt_identifiant:focus {
padding: 0 8px 0 10px ;
border-color: #a6ba89;
outline: 0px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6)
}
#txt_mdp:focus {
padding: 0 8px 0 10px ;
border-color: #a6ba89;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6)
}
.error {
display: block;
color: #C85305;
font-size: 12px;
min-height: 12px;
}
.placeholder {color: #aaa}
::-webkit-input-placeholder {color: #aaa}
:-moz-placeholder {color: #aaa}
#identifiant {
text-align: center;
padding: 15px 15px 0 15px;
}
.identifiant_icon {
position: absolute;
display: block;
color: darken(#EDEDED, 10%);
left: 23px;
top: 18px;
font-size: 20px;
}
#mdp {
text-align: center;
padding: 15px 15px 0 15px;
}
.mdp_icon {
position: absolute;
display: block;
color: darken(#EDEDED, 10%);
left: 25px;
top: 65px;
font-size: 20px;
}
<!-- header -->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
.......
<div class="bubble">
<form method="post" action="login.php">
<div id="identifiant">
<input type="text" name="txt_identifiant" id="txt_identifiant" placeholder="username" required="" value="" />
<span class="identifiant_icon"><i class="fa fa-user"></i></span>
</div>
<div id="mdp">
<input type="password" name="txt_mdp" id="txt_mdp" placeholder="password" required="" />
<span class="mdp_icon"><i class="fa fa-lock"></i></span>
</div>
<div id="maintenir">
<input type="checkbox" name="chk_maintenir" id="chk_maintenir">
<label for="chk_maintenir"><span>Stay Connected</span></label>
</div>
<div id="soumettre">
<input type="submit" name="sub_login" id="sub_login" value="" style="" />
</div>
</form>
</div>
you use $( "#mdp" ).focusin(function(){}); on the id #mdp but your input field has the id #txt_mdp.
Try this
$( "#txt_mdp" ).focusin(function(){ ... });
instead.
It is quite easy to solve your problem, and I suggest two ways:
Javascript
I have simplified your JS to make it work (if I deleted anything of other purposes, well, put that back). I added a class to the group that contains the icon and the input, and then bind on focus and blur events, like this:
$(".fadeicon input").focus(function() {
$(this).next().animate({opacity: 0})
}).blur(function() {
$(this).next().animate({opacity: 1})
});
I have used the standard focus and blur events on your input elements, and then select the next element to fade in or out. Your icons' HTML now look like this:
<div class="fadeicon">
<input type="text" />
<span class="mdp_icon"><i class="fa fa-lock"></i></span>
</div>
The reason I added a class to the group is so you can easily select where you want this to take effect.
CSS
However, there is an even better way that rquires no javascript! It is a just css solution and it is two lines long:
.fadeicon input + span { opacity: 1; transition: opacity 400ms; }
.fadeicon input:focus + span { opacity: 0; }
Again, I used the fadeicon class to make it easily targeted, but as long as you can target them you can do this with CSS!
Examples
Here a jquery snippet:
$( ".fadeicon input" ).focus(function() {
$( this ).next().animate({opacity: 0})
}).blur(function() {
$( this ).next().animate({opacity: 1})
});
$(".login").submit(function(){
$(this).find(".submit i").removeAttr('class').addClass("fa fa-check").css({"color":"#fff"});
$(".submit").css({"background":"#2ecc71", "border-color":"#2ecc71"});
$(".feedback").show().animate({"opacity":"1", "bottom":"-80px"}, 400);
$("input").css({"border-color":"#2ecc71"});
return false;
});
input[type="submit"] {
width: 45px;
height: 45px;
display: block;
margin: 0 auto -15px auto;
background: #fff;
border-radius: 100%;
border: 1px solid #a6ba89;
color: #FFF;
font-size: 24px;
cursor: pointer;
box-shadow: 0px 0px 0px 7px
}
input#txt_identifiant, input#txt_mdp {
border-radius: 3px;
font-size: 14px;
height: 28px;
line-height: 28px;
width: 200px;
padding: 0 8px 0 30px ;
display: block;
border: 1px solid #DDDDDD;
transition: 0.3s ease-out;
}
input#txt_identifiant, input#txt_mdp {
:-webkit-transition: 0.3s ease-out;
:-moz-transition: 0.3s ease-out;
}
#txt_identifiant:focus {
padding: 0 8px 0 10px ;
border-color: #a6ba89;
outline: 0px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6)
}
#txt_mdp:focus {
padding: 0 8px 0 10px ;
border-color: #a6ba89;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6)
}
.error {
display: block;
color: #C85305;
font-size: 12px;
min-height: 12px;
}
.placeholder {color: #aaa}
::-webkit-input-placeholder {color: #aaa}
:-moz-placeholder {color: #aaa}
#identifiant {
text-align: center;
padding: 15px 15px 0 15px;
}
.identifiant_icon {
position: absolute;
display: block;
color: darken(#EDEDED, 10%);
left: 23px;
top: 18px;
font-size: 20px;
}
#mdp {
text-align: center;
padding: 15px 15px 0 15px;
}
.mdp_icon {
position: absolute;
display: block;
color: darken(#EDEDED, 10%);
left: 25px;
top: 65px;
font-size: 20px;
}
<!-- header -->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<div class="bubble">
<form method="post" action="login.php">
<div id="identifiant" class="fadeicon">
<input type="text" name="txt_identifiant" id="txt_identifiant" placeholder="username" required="" value="" />
<span class="identifiant_icon"><i class="fa fa-user"></i></span>
</div>
<div id="mdp" class="fadeicon">
<input type="password" name="txt_mdp" id="txt_mdp" placeholder="password" required="" />
<span class="mdp_icon"><i class="fa fa-lock"></i></span>
</div>
<div id="maintenir">
<input type="checkbox" name="chk_maintenir" id="chk_maintenir">
<label for="chk_maintenir"><span>Stay Connected</span></label>
</div>
<div id="soumettre">
<input type="submit" name="sub_login" id="sub_login" value="" style="" />
</div>
</form>
</div>
Heres the CSS snippet (example):
.fadeicon input + span {
-webkit-transition: opacity 500ms;
transition: opacity 500ms;
opacity: 1;
}
.fadeicon input:focus + span { opacity: 0;}
<div class="fadeicon">
<input type="text">
<span>Fade me out</span>
</div>
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");
}
});
});