How to stop a div above the footer

How to stop a div above the footer - javascript

I have read many posts about this issue, but none of them are helping aid the issue I am having. I want to get the nav_bar on the side of the page to stop right about the footer (exactly where the content div ends.) I am sorry, I am not very good with javascript/jQuery. haha
Here is my code for the nav:
<div id="section">
<div id="navbar">
<div id="navbar_contents">
<ul>
<li><img src="images/nav_bar/nav_top.jpg" width="107" height="55" alt="top"></li>
<li><img src="images/nav_bar/nav_portfolio.jpg" width="107" height="55" alt="portfolio"></li>
<li><img src="images/nav_bar/nav_about.jpg" width="107" height="55" alt="about"></li>
<li><img src="images/nav_bar/nav_contact.jpg" width="107" height="55" alt="contact"></li>
<li><img src="images/nav_bar/nav_resume.jpg" width="107" height="55" alt="resume"></li>
</ul>
</div>
</div>
<div id="content">
<h1>THE TOP</h1>
<div id="clear">
</div>
</div>
</div>
and the CSS:
#section #navbar {
background-color: #FFF;
height: auto;
width: auto;
border: 1px solid #000;
float: left;
-moz-box-shadow: 0px 0px 25px 2px #000000;
-webkit-box-shadow: 0px 0px 25px 2px #000000;
box-shadow: 0px 0px 25px 2px #000000;
-webkit-border-radius: 8px;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius: 8px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
border-radius: 8px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
padding-right: 23px;
position: fixed;
}
#section #navbar #navbar_contents {
width: auto;
height: auto;
}
#section #navbar ul {
list-style-type: none;
}
#section #content {
background-color: #FFF;
height: 2000px;
width: 610px;
border: 1px solid #000;
float: left;
margin-left: 200px;
-moz-box-shadow: 0px 0px 25px 2px #000000;
-webkit-box-shadow: 0px 0px 25px 2px #000000;
box-shadow: 0px 0px 25px 2px #000000;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
margin-bottom: 20px;
padding-left: 40px;
padding-top: 30px;
}
Thank you so much for you help!

Update
Change your CSS:
#section {
width: 940px;
height: 1500px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-left: 0px;
}
The margin-top you had was causing the nav-bar to be pushed down slightly too far.

Related

can't maximize or toggle chatbox, autoscroll not working

My chatbox won't maximize, autoscroll or return to bottom for new input. and also, is there any way to make the popup avatar act as android facebook messenger app, with onclick function to minimize and maximize? any help will really be appreciated here. thanks in advance.
<html>
<head>
<title>chatbox</title>
<style>
.popup-wrap {
top: 100px;
cursor: pointer;
width: 80px;
height: 110px;
position: fixed;
right: 40px;
}
.popup-avatar {
top: 11px;
left: 11px;
background: url(../images/ella1.jpg);
position: absolute;
height: 78px;
width: 78px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border-radius:45px 45px 45px 45px
}
.shell-1 {
right: 20px;
background: #583983;
height: 80px;
width: 80px;
padding: 5px;
margin: 5px;
-moz-border-radius:25px 25px 25px 25px;
border-radius:45px 45px 45px 45px
}
.shell-2 {
background: white;
height: 78px;
width: 78px;
padding: 0px 0px 2px 2px;
margin: 0px;
-moz-border-radius:25px 25px 25px 25px;
border-radius:45px 45px 45px 45px
}
.tinyBanner {
background: #583983;
color: white;
height: 24px;
width: 100px;
display: inline-block;
text-align: center;
padding-top:5px;
border-radius: 15px 0px 15px 0px;
}
.msgbox_wrap {
background:white;
width:250px;
height:400px;
position:fixed;
right:20px;
padding:2px 2px 2px 2px;
bottom:0px;
display: none;
border: 1px solid #b0b0b0;
border-radius:10px 10px 0px 0px;
}
.msgbox_wrap-on {
display: block !important;
}
.msg_head{
cursor:pointer;
background:#583983;
padding:15px;
color:white;
bottom:0px;
border-radius:10px 10px 0px 0px;
}
.close{
float:right;
color:white;
}
.msg_wrap{
background:url(../images/m3-act.jpg);
min-width:250px;
height:355px
}
.chatlog {
height:300px;
}
.botMessage {
background-color: #ffffff;
position: relative;
padding: 5px;
margin: 5px;
display: inline-block;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
}
.userMessage {
background-color:#583983;
position: relative;
color: #FFF;
padding: 5px;
margin: 5px;
display: inline-block;
float: right;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
}
.convo {
height: 290px;
padding: 5px;
border-style: solid;
border-width: 1px;
border-color: #eeeeee;
}
.scroll {
overflow-y: auto;
overflow-x: hidden;
}
.msg_input {
background:#583983;
height: 42px;
padding: 5px;
border-style: solid;
border-width: 1px;
border-color: #eeeeee;
}
</style>
</head>
<body>
<div class="popup-wrap">
<a href="#" id="addClass">
<div class="shell-1">
<div class="shell-2">
<div class="popup-avatar"></div>
</div>
</div>
</a>
<div class="tinyBanner">Talk to Ella</div>
</div>
<div class="msgbox_wrap" id="qnimate">
<div class="msg_head">Talk to Ella
<div class="close">X</div>
</div>
<div class="msg_wrap">
<div class="convo scroll">
<div id="chatlog"></div>
</div>
<div class="msg_input">
<form method="post" name="talkform" id="talkform" action="index.php">
<form id="talkform" class="talkform">
<input id="say" name="say" placeholder="You say...." type="text" style="background: #white; height: 41px; width: 237px; font-color: #B1B1B1; font-size: 14px; font-weight: 400; border-radius:5px 5px 5px 5px;">
</form>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
// This minimize and close
$(document).ready(function(){
$('.msg_head').click(function(){
$('.msgbox_wrap').animate({height:45},'slow');
});
$('.close').click(function(){
$('.msgbox_wrap').hide();
});
});
</script>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
//popup chat fromm avatar icon
$(document).ready(function(){
$("#addClass").click(function () {
$('#qnimate').addClass('msgbox_wrap-on');
});
});
</script>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
//This autoscrolls
setInterval(function(){
$('.msg_wrap').load('convo scroll');
$('#chatlog').animate({scrollTop: $('msg_wrap')[0]}, 1000);
});
</script>
</body>
</html>

Nothing in your code animates the chat box back to full height. You set it to 45px and never do anything else.
$('.msgbox_wrap').animate({height:200},'slow');

HTML easy (and touch compatible) drag and drop?

<!DOCTYPE HTML>
<html>
<head>
<style>
p {
font-family: "Comic Sans",sans-serif;
}
#div1 {
width: 7.5%;
height: 100px;
margin-left: 10px;
margin-right: 12px;
padding: 3%;
border-bottom: 4px solid black;
border-radius: 0px 0px 25px 25px;
background-color: white;
float:right;
position: absolute;
display: block;
right: 0px;
}
#div2 {
width: 7.5%;
height: 100px;
margin-left: 10px;
margin-right: 15%;
padding: 3%;
border-bottom: 4px solid black;
border-radius: 0px 0px 25px 25px;
background-color: white;
position: absolute;
display: block;
right: 0px;
}
#div3 {
width: 7.5%;
height: 100px;
margin-left: 10px;
margin-right: 30%;
padding: 3%;
border-bottom: 4px solid black;
border-radius: 0px 0px 25px 25px;
background-color: white;
position: absolute;
display: block;
right: 0px;
}
#div4 {
width: 101px;
height: 101px;
margin-left: 15%;
padding: 1%;
border-bottom: 4px solid black;
border-radius: 0px 25px 25px 0px;
background-color: white;
}
#div5 {
height: 101px;
padding: 10px;
border-bottom: 4px solid black;
border-radius: 0px 25px 25px 25px;
background-color: white;
margin: 1.5%;
}
#text {
border-bottom: 4px solid black;
padding: 1px;
width: 13%;
height: 50px;
border-radius: 25px 25px 0px 0px;
background-color: white;
margin-left: 1.5%;
color: #417cb8;
text-align: center;
}
#tag1 {
border-bottom: 4px solid black;
padding: 1px;
margin-right: 12px;
width: 13%;
height: 50px;
border-radius: 25px 25px 0px 0px;
background-color: white;
float: right;
position: absolute;
margin-right: 5px;
font-family: "Comic Sans",sans-serif;
right: 0px;
text-align: center;
color: #417cb8;
}
#tag2 {
margin-right: 15%;
padding: 5px;
border-bottom: 4px solid black;
width: 13%;
height: 50px;
border-radius: 25px 25px 0px 0px;
background-color: white;
position: absolute;
font-family: "Comic Sans",sans-serif;
text-align: center;
display: block;
right: 0px;
color: #417cb8;
}
#tag3 {
margin-right: 30%;
padding: 5px;
border-bottom: 4px solid black;
width: 13%;
height: 50px;
border-radius: 25px 25px 0px 0px;
background-color: white;
position: absolute;
font-family: "Comic Sans",sans-serif;
text-align: center;
display: block;
right: 0px;
color: #417cb8;
}
#tag4 {
float: left;
padding: 5px;
border-bottom: 4px solid black;
width: 10%;
height: 101px;
border-radius: 25px 0px 0px 25px;
background-color: white;
position: absolute;
font-family: "Comic Sans",sans-serif;
text-align: center;
display: block;
margin-left: 1.5%;
color: #417cb8;
padding: 1%;
}
#element {
float: left;
}
img.object {
border: 1px solid #6496c8;
background-color: white;
border-radius: 25px;
padding: 10px;
height: 101px;
width: 101px;
}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
$('#element').draggable();
$( "#div1" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "isDropped" )
.html( "Dropped!" );
}
});
});
</script> <script>
function allowDrop(ev, div) {
ev.preventDefault()
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id)
}
function drop(ev, div) {
ev.preventDefault()
if(div == 'div4')
{
var data = ev.dataTransfer.getData("text")
var element = document.getElementById(data)
element.parentNode.removeChild(element)
}
else if (div == 'div5') {
if(document.getElementById(div).innerHTML <= 5)
{
var data = ev.dataTransfer.getData("text")
ev.target.appendChild(document.getElementById(data))
}
}
else if (div == 'element')
{
}
else
{
if(document.getElementById(div).innerHTML <= 5)
{
var data = ev.dataTransfer.getData("text")
ev.target.appendChild(document.getElementById(data))
}
}
}
</script>
</head>
<div style="border: 1px solid black; border-radius: 30px; background-color: #6496c8;">
<body>
<h2 style="float: center; text-align: center; border-bottom: 4px solid black; width: 275px; height: 65px; border-radius: 25px 0px 0px 0px; background-color: white; margin-left: 1.5%;"><font style="text-align:center;" face="verdana" color="#417cb8" size=30>Organiser</font></h2>
<div id="tag1"><font size="7">Now</font></div><br><br><br><br>
<div id="div1" ondrop="drop(event, 'div1')" ondragover="allowDrop(event, 'div1')"></div>
<div id="tag2"><font size="7">Next</font></div><br><br><br><br>
<div id="div2" ondrop="drop(event, 'div2')" ondragover="allowDrop(event, 'div2')"></div>
<div id="tag3"><font size="7">After</font></div><br><br><br><br>
<div id="div3" ondrop="drop(event, 'div3')" ondragover="allowDrop(event, 'div3')"></div>
<br><br><br><br><br><br><br><br>
<p id="text"><font size="7">To Do</font></p>
<p id="div5" ondrop="drop(event, 'div1')" ondragover="allowDrop(event, 'div1')" overflow="Scroll">
<img class="object" src="ABC.png" draggable="true" ondragstart="drag(event)" id="drag1" width="100" height="100">
<img class="object" src="pencil.png" draggable="true" ondragstart="drag(event)" id="drag2" width="100" height="100">
<img class="object" src="recycle.png" draggable="true" ondragstart="drag(event)" id="drag3" width="100" height="100">
<img class="object" src="apple.png" draggable="true" ondragstart="drag(event)" id="drag4" width="100" height="100">
<br><br><p><div id = "tag4"><font size="10">Done</font></div></p>
<div id="div4" ondrop="drop(event, 'div4')" ondragover="allowDrop(event, 'div4')"><img src="https://cdn3.iconfinder.com/data/icons/tools-solid-icons-vol-2/72/59-512.png" height=100px width=100px></div><br>
</body>
</div>
</div>
</html>
When I try to drag and drop on a mobile device, it does not do anything... Is it an apple specific problem or is it a problem with the code? It works on a PC and MAC... I tried to search but have found no real answers that are simple to implement (I dont wanna rewrite 90% of the code)

Here are a few errors that I can see:
draggable="true" is an HTML5 tag that can which makes the element draggable. Also the events that you've attached to it, the drag Events (namely dragstart, drag, dragenter, dragleave, dragover, drop, dragend) work only on mouse enabled devices. For touch devices (mobile/surface) you have touch events (namely touchstart, touchmove, touchend, touchcancel)
Since you're using jQueryUI, you should checkout their way using draggable() and droppable(). I don't know why you've mixed HTML5 drag with jQueryUI's method of drag and drop.
Touch Punch library works with elements which are made draggable using jQueryUI's functions.
I don't see any div with id="element" in the whole page. Element on which you've attached .draggable() and .droppable()
I found the following links helpful in understanding the drag and drop:
HTML5: https://www.html5rocks.com/en/tutorials/dnd/basics/
jQueryUI DnD: https://jqueryui.com/draggable/ (The Documentation is self explanatory. Also the demos are straight forward)
Pure JS based drag and drop: https://github.com/lukasolson/drag-n-drop-js
Hope that helps

Why slideToggle is going downwards and out of the screen?

I am writing some code to toggle a div class. I want to slide down the div up to the bottom of the page and slide up when clicked again.
My HTML code contains:
<div class="chat-sidebar">
<div class="chat_head">
<h4 align="center"><b>Online Users</b></h4>
</div>
<div class="chat_body">
<div class="sidebar-name" ></div>
</div>
</div>
and the CSS for this HTML :
.chat-sidebar{
width: 200px;
position: fixed;
height: 370px;;
right: 10px;
bottom: 0px !important;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid rgba(29, 49, 91, .3);
border-radius:5px 5px 0px 0px;
}
.sidebar-name{
padding-left: 10px;
padding-right: 10px;
margin-top : 0.8cm;
font-size: 20px;
}
.chat_head{
background:#f39c12;
color:white;
padding:2px;
font-weight:bold;
cursor:pointer;
border-radius:5px 5px 0px 0px;
margin-top: -10px;
}
and now I am sliding the main chat-sidebar DIV using jQuery function like :
$(document).ready(function() {
$('.chat_head').click(function(){
$('.chat-sidebar').slideToggle('slow');
});
});
slideToggle is working fine when click the .chat_head div. But it is going down too far so that it is not visible anymore (out of the screen). What am I missing here?

You need to slideToggle the .chat_body instead of the whole wrapper div. So just remove the height from .chat-sidebar and move it to .chat_body. Now apply the slideToggle() function on .chat_body:
$(document).ready(function() {
$('.chat_head').click(function() {
$('.chat_body').slideToggle('slow');
});
});
.chat-sidebar {
width: 200px;
position: fixed;
right: 10px;
bottom: 0px !important;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid rgba(29, 49, 91, .3);
border-radius: 5px 5px 0px 0px;
}
.sidebar-name {
padding-left: 10px;
padding-right: 10px;
margin-top: 1px;
font-size: 20px;
}
.chat_head {
background: #f39c12;
color: white;
padding: 2px;
font-weight: bold;
cursor: pointer;
border-radius: 5px 5px 0px 0px;
margin-top: -10px;
}
.chat_body {
height: 120px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="chat-sidebar">
<div class="chat_head">
<h4 align="center"><b>Online Users</b></h4>
</div>
<div class="chat_body">
<div class="sidebar-name"></div>
</div>
</div>

Try this :
$(document).ready(function() {
$(".head").on("click",function(){
$(".chat-sidebar").slideToggle("slow");
})
})
.wrapper {
border: 1px solid gray;
width: 200px;
position: fixed;
right: 10px;
bottom: 0;
min-height: 50px;
border-radius:3px 3px 0px 0px;
}
.head {
background:#f39c12;
color:white;
font-weight:bold;
cursor:pointer;
position: absolute;
width: 200px;
height: 50px;
border-radius:5px 5px 0px 0px;
}
.chat-sidebar {
background-color: #fff;
height: 200px;
}
<div class="wrapper">
<div class="head">
<h4 align="center"><b>Online Users</b></h4>
</div>
<div class="chat-sidebar"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Highlight bootstrap row on hover

Here I have used bootstrap row to show my content.
Originally it's height is less, on mouse hover I want to highlight by increase height and highlighting watmore ... attractively.
Is there any bootstrap class for this?
Example on Fiddle
<div class="c1">
<div class="row">
<div class="col-md-12">
<div class="item">
<img class="media-object" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRzqEv5GXTFGZ1jOzAMNldPJAB6qCU2LRaiiWsld9o7zN1gz_jKaQ" height="50" width="125">
<div class="descriptionContainer">
<h6>Title of page</h6>
</div>
<a class="pillBtn" style="background: '.$color.' !important;" href="#">50 </a>
<a class="moreBtn" href="'.$url.'" target="_blank">&nbsp wat more?...
<img class="smileyImg" src="http://www.mlvwrites.com/wp-content/uploads/2010/10/smiley-face.png" height="20" width="25">
</a>
</div>
</div>
</div>
</div>

You can use CSS hover to d this
Fiddle: Example
.item:hover h6 {
margin-top: 20px;
font-size: 14px;
}
.item:hover .moreBtn img {
margin-top: 4px;
}
.item:hover .moreBtn {
position: relative;
font-size: 16px;
margin-right: 10px;
margin-top: 40px;
color: red;
text-shadow: 0px 1px 0px;
font-family: Helvetica;
font-weight:bold;
text-style:italic;
}
.item:hover .pillBtn {
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
background:#7CDD97;
padding: 21px 70px 21.0px 70px;
color: #FFF;
font-weight: bold;
font-size: 20px;
text-decoration: none;
}
.item:hover {
background:#F3F3F3;
height: 70px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
.item:hover .media-object {
height: 70px;
width: 140px;
}

Using jquery you can do this very easily
$('.moreBtn').mouseover(function(){
$(this).css({
'color' :'red',
//other styles
})
});
or Using css
.moreBtn:hover{
color:red ;
//other styles
}

Jquery and css click open menu and show active menu

I am try to make a jquery dropdown menu like facebook notification menu. But i have one problem with javascript code.
This is my JSFiddle example . My problem is when i click menu will open but menu has a icon for example like facebook. Facebok notification when you click notification menu icon is automatically white but when you click other area icon is different color. I want only background color will be change. but if you check this link you can understand What is my problem.
This is my HTML Code :
<div class="msdv">
<a class="account"><span></span></a>
<div class="bubble">
<div class="xstr"><div class="gks">lorem</div><div class="yms">lorem</div></div>
<div class="xstrs">
<ul class="root">
<li><a href="#mesajınızvar" role="button">
<div class="usrxmsg">
<div class="xtreaimage"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t5/1115776_100001145177906_1788754675_q.jpg" width="50" height="50" /></div>
<div class="msinf">
<div class="msisndoknk">
<div class="msis">lorem</div>
<div class="msisok"></div>
</div>
<div class="mxsg">loremloremloremloremloremlorem</div>
<div class="msdtm">14:38</div>
</div>
</div></a>
</li>
<li><a href="#mesajınızvar" role="button">
<div class="usrxmsg">
<div class="xtreaimage"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t5/1115776_100001145177906_1788754675_q.jpg" width="50" height="50" /></div>
<div class="msinf">
<div class="msisndoknk">
<div class="msis">loremloremlorem</div>
<div class="msisok"></div>
</div>
<div class="mxsg">loremloremloremloremloremloremlorem.</div>
<div class="msdtm">14:38</div>
</div>
</div></a>
</li>
<li><a href="#mesajınızvar" role="button">
<div class="usrxmsg">
<div class="xtreaimage"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t5/1115776_100001145177906_1788754675_q.jpg" width="50" height="50" /></div>
<div class="msinf">
<div class="msisndoknk">
<div class="msis">loremloremloremlorem</div>
<div class="msisok"></div>
</div>
<div class="mxsg">loremloremloremloremloremloremlorem</div>
<div class="msdtm">14:38</div>
</div>
</div></a>
</li>
<li><a href="#mesajınızvar" role="button">
<div class="usrxmsg">
<div class="xtreaimage"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t5/1115776_100001145177906_1788754675_q.jpg" width="50" height="50" /></div>
<div class="msinf">
<div class="msisndoknk">
<div class="msis">loremloremloremloremlorem</div>
<div class="msisok"></div>
</div>
<div class="mxsg">lorem</div>
<div class="msdtm">14:38</div>
</div>
</div></a>
</li>
<li><a href="#mesajınızvar" role="button">
<div class="usrxmsg">
<div class="xtreaimage"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t5/1115776_100001145177906_1788754675_q.jpg" width="50" height="50" /></div>
<div class="msinf">
<div class="msisndoknk">
<div class="msis">loremloremloremloremlorem</div>
<div class="msisok"></div>
</div>
<div class="mxsg">loremloremloremloremlorem</div>
<div class="msdtm">14:38</div>
</div>
</div></a>
</li>
<li><a href="#mesajınızvar" role="button">
<div class="usrxmsg">
<div class="xtreaimage"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t5/1115776_100001145177906_1788754675_q.jpg" width="50" height="50" /></div>
<div class="msinf">
<div class="msisndoknk">
<div class="msis">loremlorem</div>
<div class="msisok"></div>
</div>
<div class="mxsg">loremloremloremloremloremloremloremlorem</div>
<div class="msdtm">14:38</div>
</div>
</div></a>
</li>
<li><a href="#mesajınızvar" role="button">
<div class="usrxmsg">
<div class="xtreaimage"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t5/1115776_100001145177906_1788754675_q.jpg" width="50" height="50" /></div>
<div class="msinf">
<div class="msisndoknk">
<div class="msis">loremloremloremloremlorem</div>
<div class="msisok"></div>
</div>
<div class="mxsg">loremloremloremloremloremloremloremlorem</div>
<div class="msdtm">14:38</div>
</div>
</div></a>
</li>
<li><a href="#mesajınızvar" role="button">
<div class="usrxmsg">
<div class="xtreaimage"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t5/1115776_100001145177906_1788754675_q.jpg" width="50" height="50" /></div>
<div class="msinf">
<div class="msisndoknk">
<div class="msis">loremloremlorem</div>
<div class="msisok"></div>
</div>
<div class="mxsg">loremloremloremloremloremloremloremloremloremlorem</div>
<div class="msdtm">14:38</div>
</div>
</div></a>
</li>
<li><a href="#mesajınızvar" role="button">
<div class="usrxmsg">
<div class="xtreaimage"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t5/1115776_100001145177906_1788754675_q.jpg" width="50" height="50" /></div>
<div class="msinf">
<div class="msisndoknk">
<div class="msis">loremloremlorem</div>
<div class="msisok"></div>
</div>
<div class="mxsg">loremlorem</div>
<div class="msdtm">14:38</div>
</div>
</div></a>
</li>
<li><a href="#mesajınızvar" role="button">
<div class="usrxmsg">
<div class="xtreaimage"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t5/1115776_100001145177906_1788754675_q.jpg" width="50" height="50" /></div>
<div class="msinf">
<div class="msisndoknk">
<div class="msis">loremloremlorem</div>
<div class="msisok"></div>
</div>
<div class="mxsg">lorem</div>
<div class="msdtm">14:38</div>
</div>
</div></a>
</li>
</ul>
</div>
<div class="xstrdob">loremloremlorem</div>
</div>
</div>
And also this is my Css code:
.msdv {
float:left;
width:30px;
height:40px;
background-color:#2a3542;
color:#fff;
text-align:center;
line-height:40px;
margin-left:130px;
}
.bubble
{
float:left;
position: relative;
width: 330px;
height: auto;
padding: 0px;
border:1px solid #d8dbdf;
background: #f4f4f4;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-top:50px;
margin-left:-87px;
display:none;
-webkit-box-shadow: 0px 10px 16px 0px rgba(46, 50, 50, 0.47);
-moz-box-shadow: 0px 10px 16px 0px rgba(46, 50, 50, 0.47);
box-shadow: 0px 10px 16px 0px rgba(46, 50, 50, 0.47);
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #e7eaee transparent;
display: block;
width: 0;
z-index: 1;
top: -14px;
left: 134px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #d8dbdf transparent;
display: block;
width: 0;
z-index: 0;
top: -15px;
left: 134px;
}
.msdv ul li a {
width:325px;
height:50px;
color:#000;
display:block;
font-family:arial;
font-weight:bold;
padding:3px 2px;
cursor:pointer;
text-decoration:none;
border-bottom:1px solid #d8dbdf;
}
.msdv ul li a:hover {
background:#edeff4;
color:#000;
text-decoration:none;
}
a.account {
font-size: 16px;
line-height: 40px;
color: #fff;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(../icons/arrow3.png) 1px 9px no-repeat;
cursor:pointer;
}
.root
{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 1px 0 0 0px;
border-top:1px solid #d8dbdf;
}
.xstr {
background:#e7eaee;
height:30px;
line-height:30px;
border-radius: 3px 3px 0px 0px;
-moz-border-radius: 3px 3px 0px 0px;
-webkit-border-radius: 3px 3px 0px 0px;
border: 0px solid #d8dbdf;
text-align:left;
color:#333333;
text-indent:7px;
font-weight:bold;
font-size:12px;
}
.bubble.xstr {
width:285px;
height:5px;
text-align:left;
}
.gks {
float:left;
text-align:left;
width:135px;
}
.bubble.gks{
height:30px;
line-height:30px;
}
.yms{
float:right;
color:#4e69a2;
text-align:left;
text-indent:35px;
width:150px;
font-size:13px;
font-weight:normal;
}
.xstr.yms{
float:left;
height:30px;
line-height:30px;
}
.xstrdob{
background:#e7eaee;
height:30px;
line-height:30px;
border-radius: 0px 0px 3px 3px;
-moz-border-radius: 0px 0px 3px 3px;
-webkit-border-radius: 0px 0px 3px 3px;
border: 0px solid #d8dbdf;
-webkit-box-shadow: 0px -3px 2px 0px rgba(46, 50, 50, 0.14);
-moz-box-shadow: 0px -3px 2px 0px rgba(46, 50, 50, 0.14);
box-shadow: 0px -3px 2px 0px rgba(46, 50, 50, 0.14);
color:#3b5998;
font-size:13px;
font-weight:bold;
}
.bubble.xstrdob{
width:285px;
margin: 0 auto;
}
.xstrs{
overflow-y: scroll;
height:400px;
}
.bubble.xstrs {
float:left;
width:280px;
}
.bubble.xstrs::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 2px;
background-color: #F5F5F5;
}
.bubble.xstrs::-webkit-scrollbar
{
width: 2px;
background-color: #F5F5F5;
}
.bubble.xstrs::-webkit-scrollbar-thumb
{
border-radius: 2px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
.usrxmsg{
float:left;
width:315px;
height:50px;
}
.xtreaimage{
float:left;
width:50px;
height:50px;
background-color:#0000;
}
.msinf{
float:left;
width:265px;
height:50px;
text-align:left;
}
.msisndoknk{
float:left;
width:265px;
height:15px;
}
.msis{
float:left;
width:252px;
height:15px;
color:#333333;
line-height:15px;
text-indent:10px;
}
.msisok{
float:left;
width:13px;
height:15px;
background-image:url(../icons/okundu.png);
background-repeat:no-repeat;
}
.mxsg{
float:left;
width:265px;
height:18px;
text-indent:10px;
line-height:18px;
font-weight:normal;
color:#808080;
}
.msdtm{
float:left;
width:265px;
height:18px;
text-indent:10px;
line-height:18px;
font-weight:normal;
color:#808080;
}
.msdv.open .account {
cursor: pointer;
width: auto;
display: inline-block;
padding-left: 7px;
padding-top: 4px;
padding-bottom: 4px;
padding-right: 22px;
border: 1px solid #AAA;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
font-weight: bold;
color: #717780;
line-height: 16px;
text-decoration: none !important;
background: white url("http://ttb.li/dump/buttons/dropdown_arrow.png") no-repeat 100% 0px;
}
.msdv.open .account {
border: 1px solid #3B5998;
color: white;
background: #6D84B4 url("http://ttb.li/dump/buttons/dropdown_arrow.png") no-repeat 100% -26px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 2px 2px 0px 0px;
border-radius: 2px 2px 0px 0px;
border-bottom-color: #6D84B4;
}
.msdv .account img {
height: 14px;
margin-top: 1px;
margin-bottom: 1px;
float: left;
margin-right: 5px;
}
and the last time javascript function code is here:
$(document).ready(function()
{
$(".account").click(function()
{
var X=$(this).attr('id');
if(X==1)
{
$(".bubble").hide();
$(this).attr('id', '0');
}
else
{
$(".bubble").show();
$(this).attr('id', '1');
}
});
//Mouseup textarea false
$(".bubble").mouseup(function()
{
return false
});
$(".account").mouseup(function()
{
return false
});
//Textarea without editing.
$(document).mouseup(function()
{
$(".bubble").hide();
$(".account").attr('id', '');
});
$(function(){
$('.msdv').each(function(){
$(this).find('.account').bind('click',function(){
if($(this).parent().hasClass('open')){
$(this).parent().removeClass('open');
}else{
$('.account.open').removeClass('open');
$(this).parent().addClass('open');
}
});
});
$('.msdv li').each(function(){
$(this).bind('click',function(){
$('.account.open').removeClass('open');
});
});
$(document).on('click', function(e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("msdv")){
$('.account.open').removeClass('open');
}
});
});
});

For me, replacing
$('.account.open').removeClass('open');
with $('.msdv').removeClass("open");
is enough :
$(document).on('click', function(e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("msdv")){
$('.msdv').removeClass("open");
}
});

I've simplified your jsfiddle to get a better understanding of it. In this fiddle if you click on the icon it brings up the menu and if you click on the background or the icon again it will disappear. Is this what you wanted?
jsFiddle
$(document).ready(function()
{
$(".account").click(function()
{
if($(".bubble").css('display')=='none')
{
$(".msdv").addClass('open');
$(".bubble").css('display','block');
}
else
{
$(".bubble").css('display','none');
$(".msdv").removeClass('open');
}
});
$(document).click(function(e)
{
if($(e.target).attr('class')!='account')
{
if($(".bubble").css('display')=='block')
{
if($('.msdv').hasClass('open'))
{
$('.msdv').removeClass('open');
}
$(".bubble").css('display','none');
}
}
});
});

You can simply add $('.msdv').removeClass("open"); to the end of your document click event like so:
$(document).on('click', function(e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("msdv")){
$('.account.open').removeClass('open');
$('.msdv').removeClass("open");
}
});

Your problem is with the css code here try this.
.msdv {
float:left;
width:30px;
height:40px;
background-color:#2a3542;
color:#fff;
text-align:center;
}
.bubble
{
float:left;
position: relative;
width: 330px;
height: auto;
padding: 0px;
border:1px solid #d8dbdf;
background: #f4f4f4;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-top:50px;
margin-left:-87px;
display:none;
-webkit-box-shadow: 0px 10px 16px 0px rgba(46, 50, 50, 0.47);
-moz-box-shadow: 0px 10px 16px 0px rgba(46, 50, 50, 0.47);
box-shadow: 0px 10px 16px 0px rgba(46, 50, 50, 0.47);
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #e7eaee transparent;
display: block;
width: 0;
z-index: 1;
top: -14px;
left: 134px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #d8dbdf transparent;
display: block;
width: 0;
z-index: 0;
top: -15px;
left: 134px;
}
.msdv ul li a {
width:325px;
height:50px;
color:#000;
display:block;
font-family:arial;
font-weight:bold;
padding:3px 2px;
cursor:pointer;
text-decoration:none;
border-bottom:1px solid #d8dbdf;
}
.msdv ul li a:hover {
background:#edeff4;
color:#000000;
}
a.account {
font-size: 16px;
line-height: 40px;
color: #fff;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(../icons/arrow3.png) 1px 9px no-repeat;
cursor:pointer;
}
.root
{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 1px 0 0 0px;
border-top:1px solid #d8dbdf;
}
.xstr {
background:#e7eaee;
height:30px;
line-height:30px;
border-radius: 3px 3px 0px 0px;
-moz-border-radius: 3px 3px 0px 0px;
-webkit-border-radius: 3px 3px 0px 0px;
border: 0px solid #d8dbdf;
text-align:left;
color:#333333;
text-indent:7px;
font-weight:bold;
font-size:12px;
}
.bubble.xstr {
width:285px;
height:5px;
text-align:left;
}
.gks {
float:left;
text-align:left;
width:135px;
}
.bubble.gks{
height:30px;
line-height:30px;
}
.yms{
float:right;
color:#4e69a2;
text-align:left;
text-indent:35px;
width:150px;
font-size:13px;
font-weight:normal;
}
.xstr.yms{
float:left;
height:30px;
line-height:30px;
}
.xstrdob{
background:#e7eaee;
height:30px;
line-height:30px;
border-radius: 0px 0px 3px 3px;
-moz-border-radius: 0px 0px 3px 3px;
-webkit-border-radius: 0px 0px 3px 3px;
border: 0px solid #d8dbdf;
-webkit-box-shadow: 0px -3px 2px 0px rgba(46, 50, 50, 0.14);
-moz-box-shadow: 0px -3px 2px 0px rgba(46, 50, 50, 0.14);
box-shadow: 0px -3px 2px 0px rgba(46, 50, 50, 0.14);
color:#3b5998;
font-size:13px;
font-weight:bold;
}
.bubble.xstrdob{
width:285px;
margin: 0 auto;
}
.xstrs{
overflow-y: scroll;
height:400px;
}
.bubble.xstrs {
float:left;
width:280px;
}
.bubble.xstrs::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 2px;
background-color: #F5F5F5;
}
.bubble.xstrs::-webkit-scrollbar
{
width: 2px;
background-color: #F5F5F5;
}
.bubble.xstrs::-webkit-scrollbar-thumb
{
border-radius: 2px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
.usrxmsg{
float:left;
width:315px;
height:50px;
}
.xtreaimage{
float:left;
width:50px;
height:50px;
background-color:#0000;
}
.msinf{
float:left;
width:265px;
height:50px;
text-align:left;
}
.msisndoknk{
float:left;
width:265px;
height:15px;
}
.msis{
float:left;
width:252px;
height:15px;
color:#333333;
line-height:15px;
text-indent:10px;
}
.msisok{
float:left;
width:13px;
height:15px;
background-image:url(../icons/okundu.png);
background-repeat:no-repeat;
}
.mxsg{
float:left;
width:265px;
height:18px;
text-indent:10px;
line-height:18px;
font-weight:normal;
color:#808080;
}
.msdtm{
float:left;
width:265px;
height:18px;
text-indent:10px;
line-height:18px;
font-weight:normal;
color:#808080;
}
.msdv.open .account {
cursor: pointer;
width: auto;
display: inline-block;
padding-left: 7px;
padding-top: 4px;
padding-bottom: 4px;
padding-right: 22px;
border: 1px solid #AAA;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
font-weight: bold;
color: #717780;
line-height: 16px;
text-decoration: none !important;
background: white url("http://ttb.li/dump/buttons/dropdown_arrow.png") no-repeat 100% 0px;
}
.msdv.open .account {
border: 1px solid #3B5998;
color: white;
background: #6D84B4 url("http://ttb.li/dump/buttons/dropdown_arrow.png") no-repeat 100% -26px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 2px 2px 0px 0px;
border-radius: 2px 2px 0px 0px;
border-bottom-color: #6D84B4;
}
.msdv .account img {
height: 14px;
margin-top: 1px;
margin-bottom: 1px;
float: left;
margin-right: 5px;
}
I am sure other formatting you can do.Is this what you were looking for?

Develop Reference

JavaScript is the programming language of the Web.

How to stop a div above the footer - javascript

Update Change your CSS: #section { width: 940px; height: 1500px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-left: 0px; } The margin-top you had was causing the nav-bar to be pushed down slightly too far.

Related

can't maximize or toggle chatbox, autoscroll not working

HTML easy (and touch compatible) drag and drop?

Why slideToggle is going downwards and out of the screen?

Highlight bootstrap row on hover

Jquery and css click open menu and show active menu

Categories

Resources