I am trying to create a simple live LAN messaging web application. I am using HTML, CSS, Javascript, Socket.io, and JQuery to do this. I have built a similar application to this before, so I have some experience with these types of projects. I have no idea why, but every time I try to execute any javascript command, it doesn't work. I have a button trying to start a function called joingame(). It says that the function is undefined. I also tried to define a variable as "test value", and it keeps coming up as ''. If anybody could help me out, it would be great! It's probably something really basic, but I can't figure it out. Thank you!
<!DOCTYPE HTML>
<html>
<head>
<style>
#start {
width: 400px;
height: 120px;
border: 1px solid black;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
}
#chat {
width: 80%;
height: 80%;
border: 1px solid black;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
}
</style>
</head>
<body>
<div id="start">
<center>
<h2>Enter your username below:</h2>
<input type="text" placeholder="Username here..." id="usernameid" />
<input type="button" value="Submit" onclick="joingame()" >
</center>
</div>
<div id="chat" style="display: none;">
<center>
<div id="chatbox">
<div id="inputarea">
<textarea id="chatinp" placeholder="Enter message here..." cols='50' rows='2' />
<input type="button" value="Send" onclick="sendchat()" id="sendbut" />
</div>
</div>
</center>
</div>
<script src="socket.io.js"></script>
<script src="jquery-3.2.0.js"></script>
<script type='text/javascript'>
var socket = io();
var usernameasdf = "test value";
function joingame() {
usernameasdf = document.getElementById("usernameid").value;
socket.emit('player', usernameasdf);
document.getElementById("start").style.display = "none";
document.getElementById("chat").style.display = "inline";
}
socket.on('player', function(name) {
alert(name);
});
function sendchat() {
alert("chat sent");
}
</script>
</body>
</html>
Textare isn't self closing. Check this SO answer
When I changed closing tag, it worked for me in firefox as <textarea id="chatinp" placeholder="Enter message here..." cols='50' rows='2'></textarea>
Related
Is it possible to pass parameters in JQuery popup box??
there has two file
form.php <--The user will fill in the form like username.
when the form sumbit, it have a JQUERY pop up box to show his username that is the user fill in the form.
THX
My html code
<form method="get" onsubmit="return false;">
First name:<br>
<input name="firstname" type="text"><br>
<br>
<input type="submit" value="Submit" onclick="popupfunctioncall();">
</form>
<div class="popup-container">
<div class="popup-play"></div>
<div class="pop-popup white_content" id="light">
<div class="popup-close">
<span><font size="5">x</font></span>
</div><?php
echo $_GET["firstname"];
?>
</div>
<div class="black_overlay" id="fade"></div>
</div>
MY Css code
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);}
.white_content {
display: none;
position: absolute;
top: 0px;
right: 0;
left: 0;
bottom: 0;
margin: auto;
height: 500px;
width: 600px;
background-color: #ffffff;
z-index: 1002;
background-color: #fff;
z-index: 1002;
overflow: auto;
text-align: center;}
.popup-close {
position: absolute;
top: -2px;
right: 7px;}
My Javascript code
function popupfunctioncall(){
$('#light').fadeIn(600);
$('#fade').fadeIn(600);
}
$(document).on('click','.popup-close',function(){
$('#light').fadeOut(600);
$('#fade').fadeOut(600);
});
Please look below example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function popupfunctioncall(){
alert($('#username').val()+"/"+$('#color_name').val() );// you can user your popup here
}
</script>
</head>
<body>
<form>
<input type="text" name="username" id="username">
<input type="text" name="color" id="color_name">
<input type="submit" name="cub" value="submit"onclick="popupfunctioncall()">
</form>
</body>
</html>
First, you better to set an ID to the font tag inside the popup window like this.
<span><font id='content' size="5">x</font></span>
Then you can get the input value and set popup content as follow.
function popupfunctioncall(){
var firstname = $("input[name='firstname']").val();
$('#content').html(firstname);
$('#light').fadeIn(600);
$('#fade').fadeIn(600);
}
Hope this help.
I recently designed a webpage, I am not a web developer, so I collected pieces and bits from various locations and kinda stitched them up.
Now, the page is fully designed and works in firefox, chrome and IE.
But it does not work on Safari.
Here is the code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta name="referrer" content="origin">
<script>
var counter = 0;
var limit = 50;
function addInput(divName, arrName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<input type='text' name='" + arrName + "[]' required>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
</script>
<style>
html *
{
color: #000 !important;
font-family: Arial !important;
}
.wrapper
{
height: 100%;
width: 100%;
display: flex;
overflow:auto;
}
.window
{
width: 100%;
min-height: 200px;
display: flex;
flex-direction: column-reverse;
float: none;
align-items: center;
justify-content: center;
}
.windowContent
{
}
input[type=text], select {
width: 150%;
padding: 6px 10px;
margin: 4px 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 80%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=button]{
width: 50%;
background-color: #9CAFFF;
color: white;
padding: 6px 5px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 0px;
float: left;
width: 75%;
margin: 5px;
margin-left: 0.5cm;
}
.floating-box {
float: left;
width: 100%;
margin: 5px;
margin-left: 0.5cm;
border: 3px solid #73AD21;
}
</style>
</head>
<body onload="GenerateEmotion()">
<div class="wrapper">
<div class="window">
<div class="windowContent">
<form method="POST" action="http://formspree.io/sga267#uky.edu" align="center">
<div id = "dynamicInputHolder">
<div id="dynamicInput_1">
Emotion: <input type="text" value="" name="myInputs_1[]" id="emotion" disabled>
<div class="floating-box">Its John and Sally's wedding day! John and Sally are getting ready wedding ceremony will begin in an hour. Sally is little nervous.</div>
</div>
<input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_1', 'myInputs_1');">
</div>
<div id = "dynamicInputHolder">
<div id="dynamicInput_2">
<div class="floating-box">Sally heard a knock on the door.</div>
</div>
<input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_2', 'myInputs_2');">
</div>
<div id = "dynamicInputHolder">
<div id="dynamicInput_3">
<div class="floating-box">Her heartbeat fast, Sally began to walk down the aisle.</div>
</div>
<input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_3', 'myInputs_3');">
</div>
<br>
<input type="submit" value="I have completed a story">
</form>
<script>
function GenerateEmotion(){
var emotion = "";
var raw = Math.random();
var final = Math.ceil(raw * 4);
if (final == 1)
document.getElementById("emotion").value = "Happy";
else if (final == 2)
document.getElementById("emotion").value = "Sad";
else if (final == 3)
document.getElementById("emotion").value = "Angry";
else if (final == 4)
document.getElementById("emotion").value = "Surprise";
}
</script>
</div>
</div>
<div class="window">
<div class="windowContent">
<p><font size="6"><b>Emotionalize it!</b></font></p>
<p><font size="3">We are trying to develop computer programs that can understand common emotions, so they can communicate better with human users.</font></p>
<p><font size="5"><b> Rules of the game </b></font></p>
<font size="3">
<p>Imagine you are a narrator. Today, you are narrating a story of John and Sally's wedding.</p>
<p>Your goal is to make your audience experience the emotion written on the left top. </p>
<p>We are helping you to maintain the flow, you just need to connect the dots!</p>
<p>As your story will be fed to a giant computer program, so can you:</p>
<ul>
<li>Please use simple language. Do NOT use compound, complex, or conditional sentences</li>
<li>Please do not use pronouns. Use the name - John instead of 'him'</li>
<li>Please use the past tense and active voice.</li>
<li>Please make sure to include events from the beginning to the end.</li>
<li>You want more characters? If yes, Please use David(male) and Amy(female)</li>
<li>You can use the also include character based actions, e.g. 'A waiter ...'</li>
<li>Your audiance should experience the said emotion</li>
</ul>
</font>
</div>
</div>
</div>
</body>
</html>
Specifically, what does not work:
button click to 'add new sentences'
submit
Is there any error: No, nothing happens after touch-clicking the button
What I am looking out for:
If you web developer guys can figure out why it does not work on Safari, it would be great help.
How to change that part, so functionality remains the same, but it works on safari
As I am already asking this question, another side question would help. can I know how to fix the scrollbar at the bottom?
PS_1: If you don't feel like copy pasting this code, it is in working condition here
PS_2: WHen I say safari, I mean the one on the iPhone
Try moving the "Emotion" input text box outside of the "dynamicInput_1" div. So, instead of:
<form method="POST" action="http://formspree.io/sga267#uky.edu" align="center">
<div id = "dynamicInputHolder">
<div id="dynamicInput_1">
Emotion: <input type="text" value="" name="myInputs_1[]" id="emotion" disabled>
<div class="floating-box">Its John and Sally's wedding day! John and Sally are getting ready wedding ceremony will begin in an hour. Sally is little nervous.</div>
</div>
<input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_1', 'myInputs_1');">
</div>
Try:
<form method="POST" action="http://formspree.io/sga267#uky.edu" align="center">
<div id = "dynamicInputHolder">
Emotion: <input type="text" value="" name="myInputs_1[]" id="emotion" disabled>
<div id="dynamicInput_1">
<div class="floating-box">Its John and Sally's wedding day! John and Sally are getting ready wedding ceremony will begin in an hour. Sally is little nervous.</div>
</div>
<input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_1', 'myInputs_1');">
</div>
Also, take a look at this explanation of the use of id and class: div class vs id
You've got several divs using the same id. ids should be unique.
I'm not sure what you mean about fixing the scrollbar at the bottom, so I haven't addressed that question.
Do you have the javascript turned on in Safari?
Desktop: https://support.ezimerchant.com/hc/en-us/articles/200836150-How-do-I-enable-cookies-and-JavaScript-in-Safari-Mac-
Mobile: https://www.whatismybrowser.com/guides/how-to-enable-javascript/safari-iphone-ipod
I wanted to design an image uploader. For selecting an image we do this:
<input type="file" />
but I don't want to use that regular input, I have a div and I want that when user clicks on that, file selecting dialog opens and after that everything continues in standard way.
I want to use Angular.js rather than jQuery if possible because my project is under Angular.js
You dont need javascript to do this, please dont look at the inline style
<div style="position: relative; border: 1px solid red; width: 50px; height: 30px; line-height: 30px; text-align: center;" >
Open
<input type="file" style="opacity: 0.0; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height:100%;" />
</div>
Note you need to add more crossbrowser opacity lines
see demo http://jsfiddle.net/yp2dykn5/
Edited this seams to be a populair question/answer.
So i updated this answer with the information below including cross browser opacity lines support.
div {
position: relative;
border: 1px solid red;
width: 50px;
height: 30px;
line-height: 30px;
text-align: center;
}
.file_upload {
opacity: 0.0;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* IE 5-7 */
filter: alpha(opacity=0);
/* Netscape or and older firefox browsers */
-moz-opacity: 0.0;
/* older Safari browsers */
-khtml-opacity: 0.0;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height:100%;
}
<form>
<div>
Open
<input type="file" class="file_upload" />
</div>
</form>
I would give the <input> element the CSS property display: none; Then I would apply whatever styling needed to fit your situation to a <label> element linked to the <input> through the use of the for attribute (link to w3school page). In all browsers I know of, clicking on the <label> of an <input> works the same as clicking on the <input>.
This solution only using CSS and does not use JavaScript. The <label> can be styled in any way that a <div> can be styled.
Edit: I elaborated on my answer since I noticed the complexity of the top answer.
.hide {
display: none;
}
.file_upload {
border: 1px solid red;
padding: 5px;
}
<label for="getFile1" class="file_upload">Open File</label>
<input type="file" id="getFile1" class="hide"/>
My suggestion with Jquery would be to keep a div and an input[type="file"].The input should be made hidden and trigger the click of input using JQuery, like below
HTML
<div id="id">Open</div>
<input id="yourinputname" type="file" name="yourinputname" style="display: none;" />
jQuery
$('#id').on('click', function() {
$('#yourinputname').trigger('click');
});
See the fiddle
My File upload form with bootstrap and fontawesome
<html>
<head>
<link rel="stylesheet" type="text/css" href="path/to/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="path/to/fontawesome-all.css" />
</head>
<body>
<form method="post" action="upload.php" enctype="multipart/form-data" >
<div class="card mb-4 shadow-sm p-4">
<h4 class="my-0 font-weight-normal">Upload File</h4>
<div class="card-body">
<h2 class="card-title">
<label style="cursor: pointer;" for="file_upload">
<span class="text-muted fa fa-upload"></span>
</label>
<input type="file" id="file_upload" class="d-none"/>
</h2>
</div>
</div>
</form>
</body>
</html>
If you are using react: (sorry for the hideous indentation, stack would not let me format it correctly)
#getFile {
display: none;
}
<label htmlFor="getFile">
<FontIcon iconName="photo" className="uploadIcon"/>
<input type="file" id="getFile" />
</label>
I want to make a js to replace desire text within an iframe. Here is my code below:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
<style>
.header{
width:100%;
height:30px;
background:#f1f1f1;
position: fixed;
z-index: 100;
margin-top: -20px;
font-family:Calibri, Arial;
}
.urlBox{
margin-top: 4px;
vertical-align: middle;
width: 600px;
}
.btn{
margin-top: 4px;
vertical-align: middle;
}
#iframe1{
margin-top:20px;
}
#newifrm{
background-color: transparent;
border: 0px none transparent;
padding: 0px;
overflow: hidden;
margin-top: 20px;
}
.txt{
margin-top: 4px;
vertical-align: middle;
}
button{
margin-top: 4px;
vertical-align: middle;
height:24px;
width:33px;
}
</style>
<script>
function goAction(){
ifrm = document.createElement("iframe");
ifrm.setAttribute("src", document.getElementById("url1").value);
ifrm.style.width = 100+"%";
ifrm.style.height = 100+"%";
ifrm.frameBorder=0;
ifrm.id="newifrm";
document.getElementById("iframe1").appendChild(ifrm);
}
</script>
</head>
<body>
<div class="header">
<span><input id="url1" class="urlBox" type="text" value="http://anywebsitexyz.com"></span>
<span><input class ="btn" type="button" value="GO" onclick="goAction()"></span>
<span><label for="search"> Search for: </label><input name="search" id="search" class="txt"></span><span><label for="replace"> Replace with: </label><input name="replace1" id="replace1" class="txt"></span>
<span><input class ="btn" type="button" value="Replace" onclick=""></span>
</div>
<div id="content">
<div id="iframe1"></div>
</div>
</body>
</html>
I have tried lot of functions to get replaced value. I am able to replace any text of parent document but want to make a function that will work for iframe content.
You can find this example about how to modify an iframe content in jQuery Documentation:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<iframe src="http://api.jquery.com/" width="80%" height="600" id='frameDemo'></iframe>
<script>$("#frameDemo").contents().find("a").css("background-color","#BADA55");</script>
</body>
</html>
You should use .contents() function.
Although this works perfectly with an iframe calling an internal site, it won't work if you try to modify an external site. This is a security measure and there's no way to avoid it. You can read more about it here.
First of all, if you are changing the DOM, by all means use JQuery. From what I understood, you want to change the source of the iframe. So after a few changes of your code, this works:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div class="header">
<span>
<input id="url1" class="urlBox" type="text" value="http://anywebsitexyz.com"></span>
<span>
<input id="go" class ="btn" type="button" value="GO"></span>
<span>
<label for="search">Search for:</label>
<input name="search" id="search" class="txt"></span>
<span>
<label for="replace">Replace with:</label>
<input name="replace1" id="replace1" class="txt"></span>
<span>
<input class ="btn" type="button" value="Replace" onclick=""></span>
</div>
<iframe src="http://anywebsitexyz.com" width="100%" height="600" id="newifrm"></iframe>
<script>
$(document).ready(function(){
$("#go").click(function(){
$("#newifrm").attr('src', $("#url1").val());
})
});
</script>
</body>
</html>
I positioned a div to the footer of the page and want it to be made visible when the button is clicked. It doesn't seem to be working. What am i doing wrong? Code is below.
<script language="text/javascript">
function timedMsg()
{
var t=setTimeout('ff()',3000)
}
function ff(){
document.getElementById("dot").style.visibility="visible";
document.getElementById("dot").style.display="";
}
</script>
<div id="dot" style="position: absolute; bottom: 0; right: 0; margin-right:50px; background-color:blue; width:250px; text-align:center; display: none; visibility: hidden">Footer</div>
<form>
<input type="button" value="Display!" onclick="timedMsg()" />
</form>
Well, first of all to embed javascript into html page you should use the following syntax:
<scrpt type="text/javascript">/* code here */</script>
Note: type, not language!
Second, why do you use the t variable? What is it for?
So the working and more complete example would be:
<html>
<head>
<script type="text/javascript">
function timedMsg()
{
setTimeout('ff()',3000)
}
function ff()
{
document.getElementById("dot").style.visibility="visible";
document.getElementById("dot").style.display="";
}
</script>
</head>
<body>
<form>
<input type="button" value="Display!" onclick="timedMsg()" />
</form>
<div id="dot" style="position: absolute; bottom: 0; right: 0; margin-right:50px; background-color:blue; width:250px; text-align:center; display: block; visibility: hidden">Footer
</div>
</body>
</html>