When you first click the answer text area, it will pop up a message box
Your Answer
Thanks for contributing an answer to Stack Overflow!
Please make sure you answer the question; this is a Q&A site, not a discussion forum.
Provide details and share your research. Avoid statements based solely on opinion;
only make statements you can back up with an appropriate reference, or
personal experiences.
I am struggling to implement this in my own system. I have checked the jQuery slideUp function, but it slides the text message box down not up.
Does any one know how to implement it?
I am assuming that it uses JavaScript animation.
I'm not sure exactly what you want, is this it?
I think you want to use .slideToggle()
HTML
<textarea></textarea>
<div class="msg">
谢谢你!!
</div>
jQuery
$(".msg").slideToggle();
$("textarea").focus(function(){
$(".msg").slideToggle();
});
$("textarea").blur(function(){
$(".msg").slideToggle();
});
What do you want to appear and when?
Suppose your textarea is like this
<textarea id='answer'></textarea>
SO you can use
$('textarea#answer').bind('click', function() {alert('Thanks')})
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
.div1 {
width:400px;
height:100px;
border: 1px solid #777777;
}
.div2 {
width:400px;
height:100px;
border: 1px solid #777777;
overflow:hidden;
}
.help {
background-color:#fefae2;
border: 1px solid #f3eed5;
width:400px;
height:100px;
margin-top:100px;
}
.info-ok{
font-size: 13px;
color:#1087a4;
float:right;
margin-top:5px;
margin-right:5px;
}
.info-head{
font-size: 15px;
font-weight: bold;
margin-top:15px;
margin-right:5px;
}
</style>
</head>
<script type="text/javascript">
function popdown(){
$(".help").animate({
marginTop:"100px",
}, 1000 );
}
function popup(){
$(".help").animate({
marginTop:"0px",
}, 1000 );
}
</script>
<body>
<div class="div1">a</div>
<div class="div2">
<div class="help">
<a class="info-ok" onclick="popdown()">ok</a>
<p class="info-head">您的答案</p>
<p>感谢您对StackPointer做的贡献</p>
<p>请确保您回答这个问题,这是一个问答网站，而不是一个论坛</p>
<p></p>
</div>
</div>
<div class="div3">c</div>
<textarea onclick="popup()"></textarea>
</body>
</html>
Related
When i grab object and try to drop in div it doesn't work,no errors in console nothing,logically i have everything done well and i realize what i am doing but in this case i'm stuck.
being a beginner surely is tough,i'm pretty sure i have done some silly mistake in my code.i did easily dropping 1 instance of object in div,but dropping multiple instances sure is another hardcore.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<style type="text/css">
.objects{
display:inline-block;
background-color:#FFF3CC;
border:#DFBC6A 1px solid;
width:50px;
height:50px;
margin:10px;
padding:8px;
font-size:18px;
text-align: center;
box-shadow:2px 2px 2px #999;
cursor:move;
}
#drop_zone{
background-color:#EEE;
border:#999 1px solid;
width:280px;
height:200px;
padding:8px;
font-size:18px;
}
</style>
<script type="text/javascript">
function _(id){
return document.getElementById(id);
}
var droppedIn=false;
function drag_enter(event){
_('app_status').innerHTML="You are Dragging over the"+event.target.getAttribute('id');
}
function drag_leave(event){
_('app_status').innerHTML="You Left The "+event.target.getAttribute('id');
}
function drag_start(event) {
_('app_status').innerHTML="You are Dragging"+event.target.getAttribute('id');
event.dataTransfer.dropEffect="move";
event.dataTransfer.setData("text",event.target.getAttribute('id'));
}
function drag_drop(event){
event.preventDefault();
var data=event.dataTransfer.getData("text");
event.target.appendChild(_(data));
droppedIn=true;
}
function drag_end(event){
if(droppedIn=false){
_('app_status').innerHTML="You let the"+event.target.getAttribute('id')+"go";
}
droppedIn=false;
}
</script>
<h2 id="app_status">App Status....</h2>
<h1>Drop Zone</h1>
<div id="drop_zone" ondragenter="drag_enter(event)" ondrop="drag_drop(event)" draggable="true"></div>
<div id="object1" class="objects" draggable="true" ondragstart="drag_start(event)"></div>
<div id="object2" class="objects" draggable="true" ondragstart="drag_start(event)"></div>
<div id="object3" class="objects" draggable="true" ondragstart="drag_start(event)" ondragend="drag_end(event)"></div>
<hr>
<button onclick="readDropZone()">GetObjectData</button>
</body>
</html>
I am having issues coding a chat box program for a school project. I am having 3 problems with the program. First, my chat message does not post properly in my chat box. Secondly, I want to be able to click exit and have it close to window but am not completely sure how to do it. Lastly, I would like the chat to echo the message or to have ahard coded response at the least. I'm researching how to do that I'm not quite sure how to do this. I have a style sheet and html. Here is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src=http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js ></script>
<link rel="stylesheet" type="text/css" href="jQuery.css">
//my issues seem to be in my Javascript between here************************************
<script type="text/javascript">
$(document).ready(function(){
$('#submitmsg').click(function(){
var message = $('#usermsg').val()
var old = $('#chatbox').html()
$('#chatbox').html(old + '<p>' + message + '</p>');
});
});
</script>
<script >
function close_window(url){
var newWindow = window.open('', '_self', ''); //open the current window
window.close(url);
};
</script>
//and here*****************************************************************************
</head>
<body>
<div id="wrapper">
<div id="menu">
<p class="welcome">Welcome <b></b></p>
//Possible issue here*******************************************************************
<p class="logout"><a id="exit" href="#" onclick="window.close();">Exit Chat</a></p>
<div style="clear:both"></div>
</div>
<div id="chatbox">
<p>Here's our chat data</p>
</div>
<form name="message" action="">
<input name="usermsg" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
</div>
</body>
</html>
Here is my css:
body {
font:12px arial;
color: #222;
text-align:center;
padding:35px; }
form, p, span {
margin:0;
padding:0; }
input {
font:12px arial; }
a {
color:#0000FF;
text-decoration:none; }
a:hover {
text-decoration:underline; }
#wrapper, #loginform {
margin:0 auto;
padding-bottom:25px;
background:#EBF4FB;
width:75%;
border:1px solid #ACD8F0; }
#loginform {
padding-top:18px; }
#loginform p {
margin: 5px; }
#chatbox {
text-align:left;
margin:0 auto;
margin-bottom:25px;
padding:10px;
background:#fff;
height:270px;
width:430px;
border:1px solid #ACD8F0;
overflow:auto; }
#chatbox p {
padding:1em;
margin:1em;
background:#E6E6E6;
border:1px solid #BDBDBD;
-moz-border-radius:4px;
}
#usermsg {
width:395px;
border:1px solid #ACD8F0; }
#submit {
width: 60px; }
.welcome {
float:left; }
.logout {
float:right; }
.msgln {
margin:0 0 2px 0; }
Some of the css is unnecessary I'm pretty sure but when I tried taking some out it caused issues. Any help is greatly appreciated.
try copying the following - i put the styling into the head, moved the javascript to the end, and swapped the input for a button. This is ties to the onclick and appends the new comment into the chat window. It works, but could be done better, also I have not addressed the issue of closing the window, but this does post the new comment into the chat region.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ></script>
<style>
body {
font:12px arial;
color: #222;
text-align:center;
padding:35px; }
form, p, span {
margin:0;
padding:0; }
input {
font:12px arial; }
a {
color:#0000FF;
text-decoration:none; }
a:hover {
text-decoration:underline; }
#wrapper, #loginform {
margin:0 auto;
padding-bottom:25px;
background:#EBF4FB;
width:75%;
border:1px solid #ACD8F0; }
#loginform {
padding-top:18px; }
#loginform p {
margin: 5px; }
#chatbox {
text-align:left;
margin:0 auto;
margin-bottom:25px;
padding:10px;
background:#fff;
height:270px;
width:430px;
border:1px solid #ACD8F0;
overflow:auto; }
#chatbox p {
padding:1em;
margin:1em;
background:#E6E6E6;
border:1px solid #BDBDBD;
-moz-border-radius:4px;
}
#usermsg {
width:395px;
border:1px solid #ACD8F0; }
#submit {
width: 60px; }
.welcome {
float:left; }
.logout {
float:right; }
.msgln {
margin:0 0 2px 0; }
</style>
</head>
<body>
<div id="wrapper">
<div id="menu">
<p class="welcome">Welcome</p>
<p class="logout"><a id="exit" href="#" onclick="window.close();">Exit Chat</a></p>
<div style="clear:both"></div>
</div>
<div id="chatbox">
<p>Here's our chat data</p>
</div>
<form name="message">
<input name="usermsg" type="text" id="usermsg" size="63" />
<button type="button" id="submitmsg" value="send">Send</button>
</form>
</div>
<script>
$(document).ready(function(){
$('#submitmsg').click(function(){
var message = $('#usermsg').val();
$('#chatbox').append('<p>' + message + '</p>');
$('#usermsg').val('');
});
});
function close_window(url){
var newWindow = window.open('', '_self', ''); //open the current window
window.close(url);
};
</script>
</body>
</html>
one problem is that you are using a form that then posts to the same page - reloading it.
I copied your code into a testpage (called chatTest.html) and got the following url after hitting the send button:
chatTest.html?usermsg=test+message&submitmsg=Send
your message does get posted into the chat section but is then removed when the page reloads. and because you are not specifying a method - it is treating it as a get form and posting the message as a querystring appended to the url.
if you are planning on saving the comments to a database, then you should change the action of the form to a different php page, process the results and return the saved content into the chat section- perhaps using Ajax so that you don;t have to reload the page on every chat submission.
I have a some simple HTML with a call to the TextFill jQuery library to auto-fit some text to the available space in my layout.
The layout is fine when on-screen, but when printed out it appears the page is resized and the JavaScript needs to be re-executed accordingly.
Can I rely on $(window).resize() to be called when this happens?
Interestingly the body width is fixed at 700px, but it still seems to be being resized?
The div for the text is set to 50%, and I have two of these divs next to eachother:
<div style="display:table; width:100%; border:1px solid black; border-right:none; border-bottom:none;">
<div style="display:table-row;">
<div style="display:table-cell; border:1px solid black; border-left:none; border-top:none; padding:20px; text-align:center; vertical-align:bottom;" class="td_two_by_two">
<div class="text_two_by_two text" style="padding-bottom:10px;">
<span style="font-size: 47px;">some pockets</span>
</div>
<div style="padding-bottom:10px; display:inline-block;" class="image_two_by_two">
<img style="width:100%; max-height:100%; margin:auto; display:block;" src="some_pockets.jpg">
</div>
<div style="border-bottom:solid 1px black;" class="write_two_by_two"> </div>
</div>
<div style="display:table-cell; border:1px solid black; border-left:none; border-top:none; padding:20px; text-align:center; vertical-align:bottom;" class="td_two_by_two">
<div class="text_two_by_two text" style="padding-bottom:10px;">
<span style="font-size: 46px;">some earrings</span>
</div>
<div style="padding-bottom:10px; display:inline-block;" class="image_two_by_two">
<img style="width:100%; max-height:100%; margin:auto; display:block;" src="some_earrings.jpg">
</div>
<div style="border-bottom:solid 1px black;" class="write_two_by_two"> </div>
</div>
</div>
</div>
</div>
The CSS:
.td_two_by_two {
width:50%;
}
.text_two_by_two {
height:100px;
}
.image_two_by_two {
height:180px;
}
.write_two_by_two {
height:50px;
}
The Javascript:
$(document).ready(function() {
$('body').imagesLoaded(function() {
$('.text').textfill({maxFontPixels:100, changeLineHeight:true});
});
});
The quick answer is no...
You really should rely on CSS for your print to work the way you want it to. I do not have a great answer as to the WHY it doesn't, but we do know CSS works so please attempt to rely on that. It is possible that you may find a full CSS solution to your site as well.
use
<link href="/css/print.css" rel="stylesheet" type="text/css" media="print" />
I have been learning Jquery and i made a small banner that animates out, and back in giving information. But, i would like it to be on a timed loop; ie. It runs the animation every 5 mins.
This is the code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
do {
var i = 1
$(document).ready(function(){
$("#twitter").delay(200).animate({left:'225px'}, "slow").delay(5000).animate({left:'-225px'}, "slow");
$("#tag_line").delay(300).fadeIn(2000).delay(2500).fadeOut(1000);
$("#content").delay(1000).slideDown("slow").delay(3000).slideUp("slow");
var box=$("#box");
box.animate({width:'toggle'},"normal").delay(500);
box.animate({height:'180px'},"slow").delay(3000);
box.animate({height:'100px'},"slow").delay(750);
box.animate({width:'toggle'},"normal").delay(3000);
});
}
while (i < 2)
</script>
<style>
#twitter
{
height:100px;
width:140px;
position:absolute;
z-index:20;}
#box
{
background:lightgrey;
height:100px;
width:350px;
opacity:0.2;
display:none;
position:absolute;
z-index: 10;
border-style: outset;
border-width: large;
border-color: black;
}
#container {
width: 100px;
height: 100px;
position:absolute;
}
#tag_line {
position:absolute;
z-index:15;
display:none;
padding-left:15px;
font-size:30px;
height:60px;
line-height:24px;
font-family:"SF Slapstick Comic";
color: red;
}
#content {
position:absolute;
z-index:15;
display:none;
padding-left:15px;
padding-top:90px;
font-size:30px;
height:60px;
line-height:24px;
font-family:"SF Slapstick Comic"
}
</style>
<title>Test Jquery</title>
<meta charset="utf-8">
</head>
<body>
<div id="container">
<div id="tag_line"><h1>Twitter</h1></div>
<div id="twitter"><img src="img/logo/twitter.png" width="140" height="100"></div>
<div id="content"><h2>#Geekster_Alan</h2></div>
<div id="box"></div>
</div>
</body>
</html>
How would i get it too loop?
Also, if you see anything wrong with the general code it would be appreciated if you point it out! I am new to Jquery, JS and HTML/CSS so positive criticism will help me learn!
Thanks!
You can use the setInterval function to execute your code every X ms
See details here: http://www.w3schools.com/js/js_timing.asp
I wonder how can i get a rounded corner div in IE with borders?
According to jquery plugin jquery.corner.js the job it would be very simple to achieve!
But, I can't make a rounded corner div "with border" working in internet explorer greater than 5...
The following code serves only for testing purposes.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>somepage</title>
<script type="text/javascript" src="classes/jquery.js"></script>
<script type="text/javascript" src="classes/jquery.corner.js"></script>
<script type="text/javascript">
$("#teste").corner("round 8px").parent().css('padding', '3px').corner("round 10px");
</script>
<style type="text/css">
.demo{
height: 34px;
width: 450px;
background: blue;
}
</style>
</head>
<body bgcolor="green">
<div id="teste" class="demo">
</div>
</body>
</html>
What am I doing wrong?
Many thanks, as always.
Have you tried CSS3PIE yet?
I would recommend that you go with a CSS way to do it.
You go here and select the colors for your corner.
http://www.spiffycorners.com/
Once done this will give you the css you need to put and sample code how to use it.
It should work very nicely in all browsers. I used it. No images required.
This is sample styles:
<style type="text/css">
.spiffy{display:block}
.spiffy *{
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#b20000}
.spiffy1{
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #870000;
border-right:1px solid #870000;
background:#9f0000}
.spiffy2{
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #6f0000;
border-right:1px solid #6f0000;
background:#a30000}
.spiffy3{
margin-left:1px;
margin-right:1px;
border-left:1px solid #a30000;
border-right:1px solid #a30000;}
.spiffy4{
border-left:1px solid #870000;
border-right:1px solid #870000}
.spiffy5{
border-left:1px solid #9f0000;
border-right:1px solid #9f0000}
.spiffyfg{
background:#b20000}
</style>
This is how to use it:
<div>
<b class="spiffy">
<b class="spiffy1"><b></b></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy3"></b>
<b class="spiffy4"></b>
<b class="spiffy5"></b></b>
<div class="spiffyfg">
<!-- content goes here -->
</div>
<b class="spiffy">
<b class="spiffy5"></b>
<b class="spiffy4"></b>
<b class="spiffy3"></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy1"><b></b></b></b>
</div>
Happy styling!!