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>
Related
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');
I am creating Notification section, where the link is provided on Notification in dropdown menu, but the link on Notification is not working, it is showing the link which i provided in left bottom of the browser but it can't clickable?
HTML
<i class="fa fa-globe"><span class="badge badge-notify">.</span></i>
<div id="notificationContainer">
<div id="notificationTitle">Notifications</div>
<div id="notificationsBody" class="notifications">
<div class="col-sm-12 col-md-12 col-lg-12">
<a href="notifications.php#1" id="details-container-notification">
<ul class="area-notification">
<li>
<div class="profile-image-notification">
<div id="profile-container-notification">
<image id="profileImageNotification" src="../images/img_avatar.png" />
</div>
</div>
</li>
<li class="description-notification"><p>KEntury Fried Chicken, KFC is now following you is now following you, can you want to follow back him , Thanks.</p></li>
</ul>
</a>
</div>
</div>
</div>
CSS
#notificationContainer {
background-color: #fff;
border: 1px solid rgba(100, 100, 100, .4);
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: hidden;
position: absolute;
top: 40px;
margin-left: -250px;
width: 400px;
display: none;
z-index: 1;
}
#notificationTitle {
z-index: 1000;
padding: 8px;
font-size: 18px;
background-color: #ffffff;
width: 384px;
border-bottom: 1px solid #dddddd;
font-family:Bookman Old Style ;
}
#notificationsBody {
padding: 0px 0px 0px 0px !important;
min-height:100px;
font-family:Bookman Old Style ;
margin-bottom:0px;
}
#details-container-notification{
margin-top:0%;
text-decoration:none;
float:left;
width:100%;
margin-left:0%;
font-size: 14px;
word-spacing: 1px;
line-height: 150%;
color: darkblack;
text-decoration:none;
font-family:Bookman Old Style ;
border-bottom:1px solid #f5f8fa;
padding:10px;
}
#details-container-notification:hover{
background-color:#fafafa;
}
.area-notification{
width:100%;
}
#profile-container-notification {
float:left;
margin-left:0%;
margin-right:2%;
width: 60px;
height: 60px;
overflow: hidden;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
margin-bottom:15px;
}
#profile-container-notification img {
width: 60px;
height: 60px;
}
#notificationFooter{
background-color: #e9eaed;
text-align: center;
padding: 8px;
width:100%;
font-size: 18px;
border-top: 1px solid #dddddd;
text-decoration:none;
font-family:Bookman Old Style ;
}
.badge-notify{
background:#3897f0;
position:relative;
top: -10px;
left: -35px;
}
JSFIDDLE:- https://jsfiddle.net/r33osLt9/1/
i don't know exactly what your issue , if my thought is right remove
return false from you js , check with working fiddle
$("#notificationContainer").click(function() {
//return false
});
https://jsfiddle.net/r33osLt9/2/
just try with this also
$(function(){
$("#notificationLink").on('click', function(e){
e.preventDefault(); /* this will block the link */
e.stopPropagation();
$("#notificationContainer").slideToggle(300);
});
$("#settingLink").on('click', function(e){
e.preventDefault(); /* this will block the link */
e.stopPropagation();
$("#settingContainer").fadeToggle(300);
});
$(document).on('click', function(){
$("#notificationContainer").hide();
$("#settingContainer").hide();
});
});
.navigation {
width: 100%;
height: 70px;
background-color: #fafafa;
margin-bottom: 1%;
}
#notificationContainer {
background-color: #fff;
border: 1px solid rgba(100, 100, 100, .4);
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: hidden;
position: absolute;
top: 40px;
margin-left: 0px;
width: 400px;
display: none;
z-index: 1;
}
#notificationTitle {
z-index: 1000;
padding: 8px;
font-size: 18px;
background-color: #ffffff;
width: 384px;
border-bottom: 1px solid #dddddd;
font-family: Bookman Old Style;
}
#notificationsBody {
padding: 0px 0px 0px 0px !important;
min-height: 100px;
font-family: Bookman Old Style;
margin-bottom: 0px;
}
#details-container-notification {
margin-top: 0%;
text-decoration: none;
float: left;
width: 100%;
margin-left: 0%;
font-size: 14px;
word-spacing: 1px;
line-height: 150%;
color: darkblack;
text-decoration: none;
font-family: Bookman Old Style;
border-bottom: 1px solid #f5f8fa;
padding: 10px;
}
#details-container-notification:hover {
background-color: #fafafa;
}
.area-notification {
width: 100%;
}
#profile-container-notification {
float: left;
margin-left: 0%;
margin-right: 2%;
width: 60px;
height: 60px;
overflow: hidden;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
margin-bottom: 15px;
}
#profile-container-notification img {
width: 60px;
height: 60px;
}
#notificationFooter {
background-color: #e9eaed;
text-align: center;
padding: 8px;
width: 100%;
font-size: 18px;
border-top: 1px solid #dddddd;
text-decoration: none;
font-family: Bookman Old Style;
}
.badge-notify {
background: #3897f0;
position: relative;
top: -10px;
left: -35px;
}
#settingContainer {
background-color: #fff;
border: 1px solid rgba(100, 100, 100, .4);
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: hidden;
position: absolute;
top: 40px;
margin-left: 0px;
width: 180px;
display: none;
z-index: 1;
}
#settingsBody {
padding: 10px 0px 0px 0px !important;
height: 50px;
font-family: Bookman Old Style;
}
.area-setting {
width: 100%;
}
#details-container-setting {
text-decoration: none;
float: left;
width: 100%;
margin-left: 1%;
font-size: 18px;
word-spacing: 1px;
color: darkblack;
text-decoration: none;
font-family: Bookman Old Style;
line-height: 50%;
margin-bottom: 10px;
margin-top: 0%;
padding: 10px;
}
#details-container-setting:hover {
background-color: #fafafa;
}
.icon-bar a {
width: 50px;
float: left;
font-size: 30px;
color: black;
}
.icon1 {
display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="navigation">
<div class="icon-bar"> <i class="fa fa-search"><span></span></i> <i class="fa fa-envelope"><span class="badge badge-notify">.</span></i> <i class="fa fa-globe"><span class="badge badge-notify">.</span></i>
<div id="notificationContainer">
<div id="notificationTitle">Notifications</div>
<div id="notificationsBody" class="notifications">
<div class="col-sm-12 col-md-12 col-lg-12"> <a href="notifications.php#1" id="details-container-notification">
<ul class="area-notification">
<li>
<div class="profile-image-notification">
<div id="profile-container-notification">
<image id="profileImageNotification" src="http://www.w3schools.com/w3css/img_avatar3.png" />
</div>
</div>
</li>
<li class="description-notification">
<p>KEntury Fried Chicken, KFC is now following you is now following you, can you want to follow back him , Thanks.</p>
</li>
</ul>
</a> </div>
<div class="col-sm-12 col-md-12 col-lg-12"> <a href="notifications.php#2" id="details-container-notification">
<ul class="area-notification">
<li>
<div class="profile-image-notification">
<div id="profile-container-notification">
<image id="profileImageNotification" src="http://www.w3schools.com/w3css/img_avatar3.png" />
</div>
</div>
</li>
<li>
<p class="description-notification">KEntury Fried Chicken</p>
</li>
</ul>
</a> </div>
<div class="col-sm-12 col-md-12 col-lg-12"> <a href="notifications.php#3" id="details-container-notification">
<ul class="area-notification">
<li>
<div class="profile-image-notification">
<div id="profile-container-notification">
<image id="profileImageNotification" src="http://www.w3schools.com/w3css/img_avatar3.png" />
</div>
</div>
</li>
<li>
<p class="description-notification">KFC</p>
</li>
</ul>
</a> </div>
</div>
<a href="notifications.php" id="notificationFooter">
<p>See All</p>
</a> </div>
<i class="fa fa-cog"></i>
<div id="settingContainer">
<div id="settingsBody" class="setting">
<div class="col-sm-12 col-md-12 col-lg-12"> <a href="../edit-profile/edit-profile.php" id="details-container-setting">
<ul class="area-setting">
<li>
<p class="description-setting">Setting</p>
</li>
</ul>
</a> </div>
<div class="col-sm-12 col-md-12 col-lg-12"> <a href="../logout/logout.php" id="details-container-setting">
<ul class="area-setting">
<li>
<p class="description-setting">Logout</p>
</li>
</ul>
</a> </div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Your tag a needs to have display:block.
If not, the tag a cannot contain a block element. Because of a rule of html the unblock-level element cannot have the block-level element inside. If you do, the unblock-level one will not work well.
<!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
So basically, I'm building an app in Meteor, and I have the left navbar in a position: fixed; and left : -300px and want to slide it over to left : 300px, but have no idea about how to animate a transition in Meteor (somewhat the slide transition in jquery). I understand the basic JQuery aspect of thing, but for some reason, it doesnt seem to work when I put it under the if Meteor.isClient aspect of the script. Keep in mind, Im am fairly new to Meteor, inclusive javascript code would be much appreciated.
My current code is as follows.
HTML
<body>
<div class='topmenu'>
<div class='menubutton'>
<span class="icon-bar1"></span>
<span class="icon-bar2"></span>
<span class="icon-bar3"></span>
<!--Needs to be fixed so that we only need to use one icon-bar class!!!-->
</div>
<div class='BanditDiv'>
<h1 class='BanditName'>Bandit</h1>
</div>
</div>
<div class='leftnav'>
<div class='sitenav'>
<a class='internalnav' href="#">Home</a>
<a class='internalnav' href="#">Musicians</a>
<a class='internalnav' href="#">Recording Space</a>
</div>
</div>
<div class='main'>
</div>
</body>
CSS
body{
margin: 0px 0px 0px 0px;
}
.navitem:hover{
background-color: #000066;
}
.main{
background-color: rgb(128,128,128);
height: 200vh;
width: 100vw;
margin: 0px 0px 0px 0px;
overflow-x:hidden;
}
.topmenu{
position: fixed;
z-index: 10;
top: 0px;
width: 100vw;
height: 50px;
background: white;
border-bottom: 2px lightgray solid;
}
.BanditDiv{
position: fixed;
top: 0px;
height: 50px;
width: 30vw;
margin-left: 35vw;
float: center;
}
.BanditName{
text-align: center;
font: 400 25px/1.3 'Berkshire Swash', Helvetica, sans-serif;
color: #000066;
}
.menubutton{
position: fixed;
top: 5px;
left: 5px;
height: 40px;
width: 40px;
border: 1px #cccccc solid;
background-color: white;
border-radius: 5px;
}
.menubutton:focus{
outline: 0;
}
.icon-bar1 {
position: fixed;
top: 15px;
left: 10px;
margin: 0px 0px 0px 0px;
display: block;
width: 30px;
height: 2px;
background-color: #cccccc;
border-radius: 1px;
}
.icon-bar2 {
position: fixed;
top: 25px;
left: 10px;
margin: 0px 0px 0px 0px;
display: block;
width: 30px;
height: 2px;
background-color: #cccccc;
border-radius: 1px;
}
.icon-bar3 {
position: fixed;
top: 35px;
left: 10px;
margin: 0px 0px 0px 0px;
display: block;
width: 30px;
height: 2px;
background-color: #cccccc;
border-radius: 1px;
}
.leftnav{
position: fixed;
top: 0px;
left: -300px;
width: 300px;
height: 100vh;
z-index: 9001;
background-color: yellow;
}
So this is what I came up with for the solution that seemed to work.
I created an angular module inside the Meteor.isClient and that seemed to work well.
if (Meteor.isClient) {
angular.module('sidebar',['angular-meteor']);
angular.module('sidebar').controller('SidebarCtrl', ['$scope',
function ($scope) {
function Menu (callback){
$('.menubutton').on('click', function (){
$('.leftnav').css({"box-shadow" : "2px 2px 2px #888888"});
$('.leftnav').animate({left : "0px"}, 500, function(){
$('.main').click(function() {
$('.leftnav').animate({left: "-302px"}, 500);
$('.leftnav').css({"box-shadow" : "none"});
});
$('.leftnav').click(function(event){
event.stopPropagation();
});
});
});
}
Menu();
}]);
}
i have a problem :
there is in code , popup opens and close when the mouse hovers over the image, I want it to open and close when i press on the image .
photo on this code:
<a class="textlink" href="#" style="padding:10px 0;">
<img src="alert/images.gif" style="width: 21px;" />
<span id="mes">$count</span>
</a>
the full code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<style type="text/css">
a {
text-decoration: none;
color: #838383;
}
a:hover {
color: black;
}
#menu {
position: relative;
margin-left: auto;
top: -34px;
}
#menu ul {
list-style-type: none;
}
#menu li {
float: left;
position: relative;
text-align: center;
}
#menu ul.sub-menu {
position: absolute;
left: -10px;
z-index: 90;
display: none;
}
#menu ul.sub-menu li {
text-align: right;
}
#menu li:hover ul.sub-menu {
display: block;
}
.egg {
padding: 10px;
margin: 5px 5px 5px 5px;
position: relative;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
background-color: #fff;
border-radius: 3px 3px 3px 3px;
border: 1px solid rgba(100, 100, 100, 0.4);
}
.egg_Body {
border-top: 1px solid #D1D8E7;
color: #808080;
}
.egg_Message {
font-size: 13px !important;
font-weight: normal;
overflow: hidden;
}
h3 {
font-size: 13px;
color: #333;
margin: 0;
padding: 0;
}
.comment_ui {
border-bottom: 1px solid #e5eaf1;
clear: left;
float: none;
overflow: hidden;
padding: 6px 4px 3px 6px;
width: 331px;
cursor: pointer;
white-space: pre-line;
}
.comment_ui:hover {
background-color: #F7F7F7;
}
.comment_actual_text img {
margin: 0px 0px 0px 7px;
}
.dddd {
background-color: #f2f2f2;
border-bottom: 1px solid #e5eaf1;
clear: left;
float: none;
overflow: hidden;
margin-bottom: 2px;
padding: 6px 4px 3px 6px;
width: 331px;
}
.comment_text {
border-radius: 2px 2px 2px 2px;
padding: 2px 0 4px;
color: #333333;
}
.comment_actual_text {
display: inline;
padding-left: .4em;
}
ol {
list-style: none;
margin: 0 auto;
width: 500px;
margin-top: 20px;
}
#mes {
padding: 0px 3px;
border-radius: 3px 3px 3px 3px;
background-color: rgb(240, 61, 37);
background-color: #FF00CC;
font-size: 9px;
font-weight: bold;
color: #fff;
position: absolute;
top: 5px;
left: 73px;
}
.toppointer {
background-image: url(alert/top.png);
background-position: -82px 0;
background-repeat: no-repeat;
height: 11px;
position: absolute;
top: -11px;
width: 20px;
right: 276px;
}
.clean {
display: none
}
.textlink {
display: block;
width: 140px;
}
</style>
<span id="menu">
<ul>
<li>
<a class="textlink" href="#" style="padding:10px 0;">
<img src="alert/images.png" style="width: 21px;" />
<span id="mes">$count</span>
</a>
<ul class="sub-menu">
<li class="egg">
<div class="toppointer">
<img src="alert/top.png" />
</div>
<div id="view_comments"></div>
$all
<if condition="$count_all > 0 ">
<div class="bbbbbbb" id="view">
<div style="background-color: #F7F7F7; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; position: relative; z-index: 100; padding:8px; cursor:pointer;">
view all
</div>
</div>
</if>
</li>
</ul>
</li>
</ul>
</span>
Thank you very much !
Instead of the :hover pseudo-class, use the :active pseudo-class.
So the CSS block would look like this:
a:active {
color: black;
}
For more info, take a look at this: https://developer.mozilla.org/en-US/docs/Web/CSS/:active
Toggle with only CSS is a little bit tricky, but here is one way of doing it:
Demo: http://jsfiddle.net/DerekL/R5Bm5/
<input id="control" type="checkbox">
<label for="control"><span id="toggle">Toggle</span></label>
<div class="more">Here's more</div>
.more{
height: 0px;
overflow: hidden;
}
#control:checked ~ .more{
/*Do whatever you want here*/
height: 20px;
}
#control{
display: none;
}
#toggle{
color: blue;
text-decoration: underline;
cursor: pointer;
}
Of course, you can always toggle with JavaScript:
$("#toggle").click(function(){
$(".more").toggle();
});
A better demo according to your description: http://jsfiddle.net/DerekL/R5Bm5/2/