Jquery printing out a string reorganizes website - javascript

I've searched on google but didn't find answer.
Here is jsfiddle so you can see it yourself: http://jsfiddle.net/ohk6ho8a/
When you type text into the line and submit 1 div moves under another.
Any idea how to fix this?
HTML file: - other files at jsFiddle (it's pain to copy paste code here)
<!DOCTYPE html>
<html>
<head>
<title>Text Game</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="gameScript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<p id="help" style="display:none;">This is help</p>
<div id="divWrapper">
<div id="console">
<div id="placeholder"></div>
</div>
<div id="menu">
<div id="placeholder2"></div>
</div>
</div>
<form onsubmit="return false;" autocomplete="off">
<center><input type="text" id="command_line" autofocus="autofocus" size="50"></input><center>
<center><input type="submit" id="submit" size="50" ></input><center>
</form>
</body>
</html>

On your #console and #menu remove inline-block and change them both to float:left;
updated fiddle: http://jsfiddle.net/ohk6ho8a/1/
float:left;
instead of
display:inline-block;

You should float the two divs (float: left for both) and apply a clearfix style on the parent.

Related

Separate the user input with semicolon javascript html

I am not javascript html php expert but I would like to study I just wanted to ask for advice Is it possible to make the user can enter single or Multiple input of email in textbox separated by ; using javascript just like in outlook,yahoo,email?
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
email <input type="text" name="FirstName" value="Mickey"><br>
</form>
</body>
</html>
Just Enter the text and click in the text box emails are separated
<html lang="en">
<head>
<title>Jquery - input tags plugin example</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.js"></script>
</head>
<body style="background: #337AB7">
<div style="width: 500px; margin: 0px auto;">
<h2 style="font-family:cursive;">Jquery - input tags plugin example</h2>
<input name="tags" id="input-tags" style="width:500px !important" />
</div>
<script type="text/javascript">
$('#input-tags').tagsInput();
</script>
</body>
</html>

After appending inputs to imported DOM element it's becoming disabled

My problem is when I try to append an input box it becomes non-active. I mean I can't put anything into it.
I'm using a HTML-import and I append input into imported element
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/19enter code here99/xhtml">
<head>
<meta charset="utf-8" />
<title>Feedback Form</title>
<link rel="import" href="background.html">
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<body>
<script>
var link = document.querySelector('link[rel=import]');
var content = link.import.querySelector('#background');
document.body.appendChild(content.cloneNode(true));
</script>
<div id="email_form">
<p>E-mail: <input type="email" id="email_from_email" name="email_from_email" /></p>
</div>
<script>
$("#email_form").appendTo("#maincontent"); //here I append input
</scrit>
</body>
</html>
background.html
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="background.css" />
</head>
<body>
<div id="background">
<div class="background" id="menucontent">
<!--some code here-->
</div>
</div>
<div class="background" id="maincontent">
<!--An input is appendend but I can't put anything in-->
</div>
</div>
</body>
</html>
The element #maincontent is not in the main document index.html, but in the imported document background.html.
So you cannot select it with the jQuery library using .appendTo( "#maincontent" ).
Instead you should select it the same way you did with #background:
var maincontent = link.import.querySelector('#maincontent');
Note: I don't see why you would like to insert some element in the imported document, that is not rendered. Usually we perform the operation in the opposite direction.

How to get piece of information from url given

Hi i have this html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="/style.css"/>
<link rel="icon" href="">
<title>Submit</title>
</head>
<body>
<script>
function show_alert() {
alert("Animes score is: ");
}
</script>
<div class=střed>
<form>
<div id="one"><input style="width: 500px" type="text" name="url" value="Enter myanimelist URL" onfocus="if (this.value=='Enter myanimelist URL') this.value='';"/></div>
<div id="two"><input type="image" onclick="show_alert();" name="submit" src="/Button1.png" border="0" alt="Submit" />
</div>
</form>
</div>
</body>
</html>
Now i want to get from user's url (for example: https://myanimelist.net/anime/5114/Fullmetal_Alchemist__Brotherhood) the anime's score from page's html (this part: <span itemprop="ratingValue">9.26</span> - so in this case it would be 9.26) and show it in alert box (doesn't need to be alert box thought, just somehow show it to user). Thanks for any help.

why header come down when constant or fixed button add .?

I have one button which should be remain contant or fixed in same position in all views .But when I added a view , its header comes down below the button
why ?
when I remove this <button>Add</button> it come in correct position (in middile of page).
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css#3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-semver="1.2.17" data-require="angular.js#1.2.17"></script>
<script src="http://code.angularjs.org/1.2.17/angular-route.js" data-semver="1.2.17" data-require="angular-route#1.2.17"></script>
<script data-require="ui-bootstrap#0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/foundation/5.0.0/css/foundation.min.css" />
<script src="script.js"></script>
<script src="logincontroller.js"></script>
</head>
<body>
<button>Add</button>
<div id="main">
<div ng-view></div>
<!-- angular templating -->
<!-- this is where content will be injected -->
</div>
</body>
</html>
Plunker
http://plnkr.co/edit/j4i7omuhNyEIzAaYgmhv?p=preview
Its because of <h1> and <div> when defined will be displayed as two rows unless otherwise you have overridden by using some css
Take a look at this
Working Demo
<div class="container">
<div class="div1">
<button>Add</button>
</div>
<div class="div2">
<div id="main">
<div ng-view></div>
</div>
</div>
</div>
Both h1- and button-elements have the css-property display block. Therefore they will be placed beneath each other. http://www.w3schools.com/cssref/pr_class_display.asp

Dojo: Why an extra text box is produced?

The following part of code produces this result in Firefox and Chrome
<html>
<title>Dojo Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.ValidationTextBox")
</script>
<label for="firstName"> First Name: </label>
<input type="text" id="firstName"
dojoType="dijit.form.ValidationTextBox"
promptMessage="Enter first name:"
invalidMessage="First Name is required"
/>
</html>
An extra text box is produced with text "X" on it. I have no idea how to fix it and why does this happen. Anyone can help?
You need to add a valid dijit theme to the body tag of your html document, in addition to including a to the css stylesheet of the theme you want to use.
for example:
<html>
<head>
<title>Dojo Example</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.ValidationTextBox")
</script>
</head>
<body class="claro">
<label for="firstName"> First Name: </label>
<input type="text" id="firstName"
dojoType="dijit.form.ValidationTextBox"
promptMessage="Enter first name:"
invalidMessage="First Name is required"
/>
</body>
</html>

Categories