can't maximize or toggle chatbox, autoscroll not working

can't maximize or toggle chatbox, autoscroll not working - javascript

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');

Related

why is My jquery code not working though i have the scripts intact?

let playing = false
let score
$(function() {
// start smash
$('startgame').click(function() {
if (playing == true) {
location.reload()
} else {
playing = true
score = 0
$('#scorevalue').html(score)
$('life').show()
}
})
})
html {
height: 100%;
background: skyblue;
}
#container {
height: 640px;
width: 700px;
background-color: white;
margin: 70px auto;
padding: 20px;
border-radius: 15px;
box-shadow: 0px 4px 3px 0px;
position: relative;
}
#scorebox {
height: 30px;
width: 90px;
background-color: powderblue;
text-align: center;
border-radius: 5px;
box-shadow: 0px 2.5px 4px 0px;
padding: 4px;
position: absolute;
left: 600px;
top: 10px;
}
#fruitsdisp {
height: 460px;
width: 560px;
background-color: ghostwhite;
padding: 10px;
border-radius: 15px;
position: relative;
left: 60px;
top: 60px;
box-shadow: 0px 1px 2px 0px;
}
#startgame {
height: 35px;
width: 200px;
background-color: powderblue;
border-radius: 5px;
box-shadow: 0px 2.5px 4px 0px;
font-family: fantasy;
font-size: 20px;
padding-top: 5px;
text-align: center;
position: absolute;
left: 280px;
top: 610px;
}
#gameover {
height: 260px;
width: 480px;
background-color: gainsboro;
padding: 10px;
border-radius: 15px;
position: absolute;
left: 120px;
top: 170px;
box-shadow: 0px 1px 2px 0px;
text-align: center;
font-size: 5em;
z-index: 2;
font-family: monospace;
display: none;
}
#life {
height: 35px;
width: 130px;
background-color: powderblue;
border-radius: 5px;
box-shadow: 0px 2.5px 4px 0px;
font-family: serif;
font-size: 20px;
padding-top: 5px;
text-align: center;
position: absolute;
top: 10px;
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fruit Smash</title>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1,user-scalable=yes"
/>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"
/>
</head>
<body>
<div id="container">
<div id="scorebox">score: <span id="scorevalue">0</span></div>
<div id="fruitsdisp"></div>
<div id="startgame">SMASH</div>
<div id="gameover">GAME OVER! YOUR SCORE IS <span>0</span></div>
<div id="life">life</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="jquery.js"></script>
</body>
</html>
I'm stuck here as my jquery code is not running.
Here is my html, css and jquery code.
As soon as I click the smash button, it should show the <div id="life">life</div> element But this is not happening and I don't know why.
I have been using brackets to run my code. Html and css are running ok but jquery isn't. I would like to know where I went wrong in this.

you are using the wrong selectors,
id selectors should be prefixed with "#"
var playing = false;
var score;
$(function() {
//start smash
$("#startgame").click(function(){
if(playing == true){
location.reload();
}else{
playing=true;
score=0;
$("#scorevalue").html(score);
$("#life").show();
}
});
});
html{
height: 100%;
background: skyblue;
}
#container{
height: 640px;
width: 700px;
background-color: white;
margin: 70px auto ;
padding: 20px;
border-radius: 15px;
box-shadow: 0px 4px 3px 0px;
position: relative;
}
#scorebox{
height: 30px;
width: 90px;
background-color: powderblue;
text-align: center;
border-radius: 5px;
box-shadow: 0px 2.5px 4px 0px;
padding: 4px;
position: absolute;
left: 600px;
top: 10px;
}
#fruitsdisp{
height:460px;
width: 560px;
background-color: ghostwhite;
padding: 10px;
border-radius: 15px;
position: relative;
left: 60px;
top: 60px;
box-shadow: 0px 1px 2px 0px;
}
#startgame{
height: 35px;
width: 200px;
background-color: powderblue;
border-radius: 5px;
box-shadow: 0px 2.5px 4px 0px;
font-family: fantasy;
font-size: 20px;
padding-top: 5px;
text-align: center;
position: absolute;
left: 280px;
top: 610px;
}
#gameover{
height:260px;
width: 480px;
background-color: gainsboro;
padding: 10px;
border-radius: 15px;
position: absolute;
left: 120px;
top: 170px;
box-shadow: 0px 1px 2px 0px;
text-align: center;
font-size: 5em;
z-index:2;
font-family: monospace;
display: none;
}
#life{
height: 35px;
width: 130px;
background-color: powderblue;
border-radius: 5px;
box-shadow: 0px 2.5px 4px 0px;
font-family:serif;
font-size: 20px;
padding-top: 5px;
text-align: center;
position: absolute;
top: 10px;
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fruit Smash</title>
<meta charset="utf-8">
<meta name = "viewport"
content = "width=device-width, initial-scale=1,user-scalable=yes">
<link rel="stylesheet"
href = "style.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
</head>
<body>
<div id ="container">
<div id = "scorebox">
score: <span id="scorevalue">0</span>
</div>
<div id="fruitsdisp">
</div>
<div id="startgame">SMASH
</div>
<div id="gameover">GAME OVER!
YOUR SCORE IS <span>0</span></div>
<div id="life">life
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js">
</script>
<script src="jquery.js">
</script>
</body>
</html>

Change the clicked element and save it in cookies

$(document).ready(function(){
$(".link").click(function(){ // when .link clicked
$(".elem").toggle(); // toggle .elem visibility
});
});
jQuery(function($){
$(document).mouseup(function (e){
var div = $(".link");
var second = $('.elem');
var close = $('.close');
if (!div.is(e.target)
&& (second.has(e.target).length == 0 || close.is(e.target))) {
second.hide();
}
});
});
.wrapper {
width: 1180px;
margin-right: auto;
margin-left: auto;
}
.elem {
display:none;
margin-top: 14px;
width: 480px;
height: 310px;
background-color: grey;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
position: relative;
box-shadow:0 2px 3px rgba(0,0,0,0.5);
transition: 0.4s;
}
.elem:after {
content: '';
position: absolute;
width: 0;
height: 0;
border-bottom: 10px solid grey;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
top: -10px;
left: 33px;
}
.title {
margin: 0px 0px 10px 10px;
padding-top: 15px;
position: relative;
}
.link {
margin-left: 13px;
}
.regions {
height: 50px;
display: inline-block;
}
.floating {
display: inline-block;
margin: 10px;
line-height: 0.4;
width: 20px;
}
a.floating {
text-decoration: none;
width: 24%;
}
a.floating:hover {
text-decoration: underline;
}
.otherregion {
margin: 0px 0px 10px 10px;
padding-top: 15px;
}
.edit {
border:1px solid #9E9E9E;
color: #000000;
padding: 3px;
font-size: 14px;
font-family: Verdana;
background: #FFF;
width: 90%;
height: 23px;
}
form {
margin: 0px 0px 10px 10px;
}
.formtext {
margin: 0px;
padding-top: 2px;
}
.top {
margin-left: 13px;
margin-right: 38px;
}
.close {
margin: -27px 0px 20px 444px;
position: absolute;
font-size: 18px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>new project</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
</head>
<body>
<div class="wrapper">
<a class="link" href="#">S.T.E.A.M. lab</a>
<div class="elem">
<p class="title">Choose youre hobby</p><a class="close">X</a>
<div class="regions">
<a class="floating" href="#">Math</a>
<a class="floating" href="#">Art</a>
<a class="floating" href="#">Science</a>
<a class="floating" href="#">Technology</a>
<a class="floating" href="#">Engineering</a>
</div>
<p class="otherregion">Or choose another one:</p>
<form>
<input class="edit" type="text" name="add" placeholder="write some text bro">
</form>
<div class="top">bla bla bla bla bla :
<p class="formtext"> &#8226 </p>
<p class="formtext"> &#8226 .</p></div>
</div>
</div>
</body>
</html>
Hi everyone.This is my simple window.Already 3 days im struggling to change S.T.E.A.M. lab text to other text from floating class which one is clicked.And if its possible save this result in cookie.more details more details more details more details (sorry this is for stackoverflow they neeed more details )

You have to add a click listener to your floating Elements and save the text to link. For setting cookie I used hier vanilla JS, but you can use this https://github.com/carhartl/jquery-cookie too
$(document).ready(function(){
$(".link").click(function(){ // when .link clicked
$(".elem").toggle(); // toggle .elem visibility
});
$('.floating').click(function(evt){
evt.preventDefault();
$('.link').text(event.target.textContent);
// document.cookie = "cookiename=event.target.textContent";
});
});
jQuery(function($){
$(document).mouseup(function (e){
var div = $(".link");
var second = $('.elem');
var close = $('.close');
if (!div.is(e.target) && (second.has(e.target).length == 0 || close.is(e.target))) {
second.hide();
}
});
});
.wrapper {
width: 1180px;
margin-right: auto;
margin-left: auto;
}
.elem {
display:none;
margin-top: 14px;
width: 480px;
height: 310px;
background-color: grey;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
position: relative;
box-shadow:0 2px 3px rgba(0,0,0,0.5);
transition: 0.4s;
}
.elem:after {
content: '';
position: absolute;
width: 0;
height: 0;
border-bottom: 10px solid grey;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
top: -10px;
left: 33px;
}
.title {
margin: 0px 0px 10px 10px;
padding-top: 15px;
position: relative;
}
.link {
margin-left: 13px;
}
.regions {
height: 50px;
display: inline-block;
}
.floating {
display: inline-block;
margin: 10px;
line-height: 0.4;
width: 20px;
}
a.floating {
text-decoration: none;
width: 24%;
}
a.floating:hover {
text-decoration: underline;
}
.otherregion {
margin: 0px 0px 10px 10px;
padding-top: 15px;
}
.edit {
border:1px solid #9E9E9E;
color: #000000;
padding: 3px;
font-size: 14px;
font-family: Verdana;
background: #FFF;
width: 90%;
height: 23px;
}
form {
margin: 0px 0px 10px 10px;
}
.formtext {
margin: 0px;
padding-top: 2px;
}
.top {
margin-left: 13px;
margin-right: 38px;
}
.close {
margin: -27px 0px 20px 444px;
position: absolute;
font-size: 18px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>new project</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
</head>
<body>
<div class="wrapper">
<a class="link" href="#">S.T.E.A.M. lab</a>
<div class="elem">
<p class="title">Choose youre hobby</p><a class="close">X</a>
<div class="regions">
<a class="floating" href="#">Math</a>
<a class="floating" href="#">Art</a>
<a class="floating" href="#">Science</a>
<a class="floating" href="#">Technology</a>
<a class="floating" href="#">Engineering</a>
</div>
<p class="otherregion">Or choose another one:</p>
<form>
<input class="edit" type="text" name="add" placeholder="Начните вводить название">
</form>
<div class="top">bla bla bla bla bla :
<p class="formtext"> &#8226 </p>
<p class="formtext"> &#8226 .</p></div>
</div>
</div>
</body>
</html>

Step 1 : Add a click event to the a tag under regions.
Step 2 : On this click event handler get the inner text of the clicked element which is the subject - and store in a variable for display and to be stored in a cookie.
Step 3: Write a cookie save function that takes a string parameter and which is called on step 2 , pass in the subject name to be saved in the cookie.
$("body").on("click" "div.regions a", function(e) {
// Your code here that fetches the event.target.innertext or some such
var txt = $(e.target).text(); // sample code not tested
SetCookie(txt);
SetStemLabText(txt)
});
SetCookie(txt) {
$.cookie("Subject", text);
}
SetStemLabText(txt) {
$('.link').text(txt)
}

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>

convert css code from :hover to click

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/

Develop Reference

JavaScript is the programming language of the Web.

can't maximize or toggle chatbox, autoscroll not working - javascript

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');

Related

why is My jquery code not working though i have the scripts intact?

Change the clicked element and save it in cookies

HTML easy (and touch compatible) drag and drop?

Why slideToggle is going downwards and out of the screen?

convert css code from :hover to click

Categories

Resources