How to position the following elements in a box using JQuery?

How to position the following elements in a box using JQuery? - javascript

Hello I have the following code and need to be able to position both elements within the box (#third) that is contained within a container. Please provide code for the positioning of both elements. I need to position the following elements (see the following lines)
append('$${t}^x\sqrt{t}^x$$'); and
append('<label>Filename:</label> <input type="text" name="file" id="file" />');
<!-- saved from url=(0022) -->
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest /MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
//ev.target.id this gives us the id of the symbol being dragged
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
//ev.target.appendChild(document.getElementById(data));
switch(data)
{
case("drag8"):
$('#second').append('$${t}^x\sqrt{t}^x$$');
$('#container').append('<div id="third" ondrop="drop(event)" ondragover="allowDrop(event)"></div>');
$('#third').append('$${t}^x\sqrt{t}^x$$');
$('#third').append('<label>Filename:</label> <input type="text" name="file" id="file" />');
break;
default:
}
MathJax.Hub.Queue(["Typeset",MathJax.Hub,"second"]);
MathJax.Hub.Queue(["Typeset",MathJax.Hub,"third"]);
}
</script>
<style>
#header {
width: 100%;
background-color: white;
height: 30px;
}
#container {
width: 600px;
height:1500px
background-color: #ffffff;
margin: auto;
}
#first {
width: 100px;
border: 2px solid black;
float: left;
height: 400px;
}
#second {
width: 300px;
border: 2px solid black;
top:0;
float: right;
height: 100px;
}
#third {
position: absolute;
top: 180px;
border: 2px solid black;
right:430px;
width: 200px;
height: 100px;
}
#third .power1{
width: 20px;
height: 10px;
float: left;
border: 2px solid black;
}
#clear {
clear: both;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="container">
<div id="first">
<span id="drag8" style="text-decoration:overline;" draggable="true" ondragstart="drag(event)" >$${t}^x\sqrt{t}^x$$</span>
</div>
<div id="second" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
<div id="clear"></div>
</div>
</body>

Merge the 3 appends
$('#container').append('<div id="third" ondrop="drop(event)" ondragover="allowDrop(event)">$${t}^x\sqrt{t}^x$$<label>Filename:</label> <input type="text" name="file" id="file" /></div>');

Related

On click reset the background color to transparent in javascript of each div element

on-click my div element not changing its background color to transparent, as it changed before when
I have only one div element. each div elements background color should change to transparent on each click in the corresponding div.
I'm a newbie to scripting how to achieve it
function myfunction()
{
var x = document.getElementById("001");
alert(document.write("x"));
x.addEventListener("click", vanish);
vanish();
function vanish()
{
$(document).ready(function() {
$("#x").click(function() {
$("#x").css('background-color', 'none');
$("#x").css('opacity', '0.0');
});
});
}
.box {
background-color: coral;
width: 30%;
height:100px;
display:inline-block;
border-radius:5px;
border:1px solid black;
padding-left:0px;
}
.text {
padding: 10px 0;
color:white;
font-weight:bold;
text-align:center;
}
#container {
white-space:nowrap;
text-align:center;
margin-left:25%;
margin-right:25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="box" id="001" onclick="myfunction()">
<div class="text">text</div>
</div>
<div class="box" id="001" name="mybox" onclick="myfunction()">
<div class="text">Text</div>
</div>
<div class="box" id="001" name="mybox" onclick="myfunction()">
<div class="text" id="003">Text</div>
</div>
</div>

Since you're using jQuery it could be simply by attaching the click to the common class and use $(this) to refer to the current clicked element.
NOTE: The id should be unique in the same document, replace the duplicate ones.
$(document).ready(function() {
$(".box").click(function() {
$(this).css('background-color', 'none');
$(this).css('opacity', '0.0');
});
});
.box {
background-color: coral;
width: 30%;
height: 100px;
display: inline-block;
border-radius: 5px;
border: 1px solid black;
padding-left: 0px;
}
.text {
padding: 10px 0;
color: white;
font-weight: bold;
text-align: center;
}
#container {
white-space: nowrap;
text-align: center;
margin-left: 25%;
margin-right: 25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="box" id="001">
<div class="text">text</div>
</div>
<div class="box" id="002" name="mybox">
<div class="text">Text</div>
</div>
<div class="box" id="003" name="mybox">
<div class="text" id="003">Text</div>
</div>
</div>

First of all id need to unique secondly x.addEventListener("click".. inside click handle is no more required.Also the vanish function is not required here and there is no necessity of document.ready and click inside that
function myfunction(event) {
$(event.target).css('background-color', 'none');
$(event.target).css('opacity', '0.0');
}
.box {
background-color: coral;
width: 30%;
height: 100px;
display: inline-block;
border-radius: 5px;
border: 1px solid black;
padding-left: 0px;
}
.text {
padding: 10px 0;
color: white;
font-weight: bold;
text-align: center;
}
#container {
white-space: nowrap;
text-align: center;
margin-left: 25%;
margin-right: 25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="box" id="" onclick="myfunction(event)">
<div class="text">text</div>
</div>
<div class="box" id="" name="mybox" onclick="myfunction(event)">
<div class="text">Text</div>
</div>
<div class="box" id="" name="mybox" onclick="myfunction(event)">
<div class="text" id="003">Text</div>
</div>
</div>

conditions for divs in drag and drop

I have 2 droppable divs called drop1 and drop2, and 2 draggable elements called ans1 and ans2. I want to make an alert when ans1 is inside drop1 and ans2 is inside drop2. Both conditions have to be fulfilled (not caring about which is fulfilled first) in order for the alert to come out.
$("#ans1, #ans2").draggable({
revert: "valid",
cursor: "move"
});
$("#drop1, #drop2").droppable({
drop: function (event, ui) {
if ($("#ans1", $("#drop1")) && $("#ans2", $(".drop2"))) {
alert("correct");
}
});
<div id="drop1" class="b1" style="background-color: white; border: solid; height: 6vw; width: 13vw; border-radius: 7px">
</div>
<div id="drop2" class="b1" style="background-color: white; border: solid; height: 6vw; width: 13vw; border-radius: 7px">
</div>
<div id="ans2" style="background-color: white; border: solid; cursor: move; height: 6vw; width: 13vw; border-radius: 7px">
a change
</div>
<br/>
<div id="ans1" style="background-color: white; border: solid; cursor: move; height: 6vw; width: 13vw; border-radius: 7px">
chemical reaction system
</div>

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2 {
float: left;
width: 100px;
height: 35px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="https://www.google.co.in/logos/doodles/2018/sergei-eisensteins-120th-birthday-5380775741489152.2-s.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>

Try to use accept option and ui.draggable.text() of the droppable() function
Stack Snippet
$(".drag-div>div").draggable({
revert: "invalid",
cursor: "move"
})
$(".drop-div>div").droppable({
accept: ".drag-div>div",
drop: function(event, ui) {
$(this).text(ui.draggable.text());
if ($("#drop1").text() == $("#ans1").text() && $("#drop2").text() == $("#ans2").text()) {
alert("correct");
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="drop-div">
<div id="drop1" class="b1" style="background-color: white; border: solid; height: 6vw; width: 13vw; border-radius: 7px">
</div>
<br/>
<div id="drop2" class="b1" style="background-color: white; border: solid; height: 6vw; width: 13vw; border-radius: 7px">
</div>
</div>
<br/>
<div class="drag-div">
<div id="ans2" style="background-color: white; border: solid; cursor: move; height: 6vw; width: 13vw; border-radius: 7px">
a change
</div>
<br/>
<div id="ans1" style="background-color: white; border: solid; cursor: move; height: 6vw; width: 13vw; border-radius: 7px">
chemical
</div>
</div>

get a hover function to appear in all 100 divs

I would really aprreciate help on my code logic.
I have a loop of 100 divs and i want that when i a mouse overs on any one of the div it should display a popup(i have gotten just little adjustments left to make).
the problem is i can't seem to make the popup work on all divs when hovered on...only the first one works..
Please help show me what i am doing wrong. thank you
below is my code
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<link href="/css/index.css" rel="Stylesheet"/>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#popDiv').hover(
function() { $('#divTable').show(); },
function() { $('#divTable').hide(); }
);
});
</script>
</head>
<body >
<div id="wrapper">
<div id="container">
<form action="/models/top100.js">
<div id="divTable" class="tooltip" href="#">
<table id= "tbDetails" class="popup" >
<tbody><tr>
<td class="col1"></td>
<td class="col2"></td>
<td class="col3"></td>
<td class="col4"></td>
</tr> </tbody>
</table>
</div>
<div id="bodydiv"> <div id="leftdiv" >
<% for (var i = 0; i < 100; i++) { %>
<div id="popDiv">
</div>
<div id="tabDiv"></div>
<% } %>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
and the css
a.tooltip {outline:none; }
a.tooltip strong {line-height:20px;}
a.tooltip:hover {text-decoration:none;}
.tooltip {
z-index:10;display:none; margin-right:50px;
width:135px; line-height:16px;
position:absolute; color:#111;
border:1px solid #D2D2D2; background:#ffffff;
}
.tooltip.show { display: inline-block; }
.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}
.popup
{
width:135px;
height:50px;
text-align: center;
background-color: yellow;
display: inline-block;
vertical-align: middle;
margin-right: 50px;
line-height: 50%;
}
#wrapper
{
margin: auto;
}
#container
{
position:absolute;
margin:0px auto;
}
#bodydiv
{
margin:0 auto;
padding:0px;
}
#leftdiv
{
margin-top:30vh;
margin-left:15vh;
width:90vh;
height:75vh;
float:left;
}
#popDiv
{
display:inline-block;
border-width: 2px;
border-style: solid;
border-color: rgb(236, 80, 184);
background-color: rgb(236, 80, 184);
margin-left:10vh;
width:5vh;
height:20vh;
}
#tabDiv
{
width:70vh;
height:20vh;
display:inline-block;
border-width: 2px;
border-style: solid;
background-color: rgb(179, 80, 236);
border-color: rgb(122, 204, 241);
}
thanks in advance

You are using ID selector when writing hover function so that'll work only for the first element in the DOM. Instead you need to use class selector and give class name to divs like this.
$(document).ready(function() {
$(".test").hover(function() {
$(this).css("background-color", "yellow");
}, function() {
$(this).css("background-color", "white");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">Hover the mouse pointer over this</div>
<div class="test">Hover the mouse pointer over this</div>
<div class="test">Hover the mouse pointer over this</div>
P.S Your id should be unique within the page.

Give your divs the same class, and us it in your hover.
$(document).ready(function () {
$('.popDiv').hover(
function () {
$('#divTable').show();
},
function () {
$('#divTable').hide();
}
);
});
.popup {
width: 135px;
height: 50px;
text-align: center;
background-color: yellow;
display: inline-block;
vertical-align: middle;
margin-right: 50px;
line-height: 50%;
}
#wrapper {
margin: auto;
}
#container {
position: absolute;
margin: 0px auto;
}
#bodydiv {
margin: 0 auto;
padding: 0px;
}
#leftdiv {
margin-top: 30vh;
margin-left: 15vh;
width: 90vh;
height: 75vh;
float: left;
}
#popDiv {
display: inline-block;
border-width: 2px;
border-style: solid;
border-color: rgb(236, 80, 184);
background-color: rgb(236, 80, 184);
margin-left: 10vh;
width: 5vh;
height: 20vh;
}
#tabDiv {
width: 70vh;
height: 20vh;
display: inline-block;
border-width: 2px;
border-style: solid;
background-color: rgb(179, 80, 236);
border-color: rgb(122, 204, 241);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="container">
<form action="/models/top100.js">
<div id="divTable" style="display: none" class="tooltip" href="#">
<table id="tbDetails" class="popup">
<tbody>
<tr>
<td class="col1"></td>
<td class="col2"></td>
<td class="col3"></td>
<td class="col4"></td>
</tr>
</tbody>
</table>
</div>
<div id="bodydiv">
<div id="leftdiv">
<!--<% for (var i = 0; i < 100; i++) { %>-->
<div class="popDiv" style="width: 200px; height: 50px; background-color: green">
1
</div>
<div class="popDiv" id="tabDiv" style="width: 200px; height: 50px; background-color: red">2</div>
<!--<% } %>-->
</div>
</div>
</form>
</div>
</div>

Trouble making my Javascript work with HTML

I'm trying to learn how to use JavaScript by making a simple form, but it isn't working like I'd expect it to.
I wrote some verification functions which I thought would work, but I can't figure out why they aren't.
I can make an alert run through my Verify function, but the actual functions I've called won't run.
Here is my full code.
HTML
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css" />
<script src="index.js"></script>
</head>
<body>
<div id="wrapper">
<div id="Header">
<div id="Link_One" class="Link">
<p> Link One </p>
</div>
<div id="Link_Two" class="Link">
<p> Link Two </p>
</div>
<div id="Link_Three" class="Link">
<p> Link Three </p>
</div>
<div id="Link_Four" class="Link">
<p> Link Four </p>
</div>
<div id="Link_Five" Class="Link">
<p> Link Five </p>
</div>
</div>
<div id="Column_Left">
<form>
<p> Name: </p>
<input type="text" name="name" id="Name_Input">
<p id="Name_Error"> Please enter a valid name. </p>
</br> </br> </br>
<p> Age: </p>
<input type="number" name="age" id="Age_Input">
<p id="Age_Error"> Please enter a valid age. </p>
</br> </br> </br>
<p> Email: </p>
<input type="text" name="email" id="Email_Input">
<p id="Email_Error"> Please enter a valid email. </p>
</br> </br>
<button type="button" id="Submit_Button" onclick="Verify()"> Submit </button>
</form>
</div>
<div id="Column_Right">
</div>
</div>
</body>
</html>
CSS
html, body {
height: 100%;
width: 100%;
}
* {
padding: 0px;
margin: 0px;
}
#wrapper {
height: 100%;
width: 80%;
max-width: 1500px;
min-width: 800 px;
background-color: black;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 0px 20px black;
}
#Column_Left {
height: 100%;
width: 50%;
background-color: LightGreen;
float: left;
}
#Column_Right {
height: 100%;
width: 50%;
background-color: Purple;
float: right;
}
#Header {
height: 10%;
width: 100%;
}
#Link_One {
display: inline-block;
text-align: center;
height: 100%;
width: 19.5%;
background-color: DodgerBlue;
}
#Link_Two {
display: inline-block;
text-align: center;
height: 100%;
width: 19.5%;
background-color: DodgerBlue;
}
#Link_Three {
display: inline-block;
text-align: center;
height: 100%;
width: 19.5%;
background-color: DodgerBlue;
}
#Link_Four {
display: inline-block;
text-align: center;
height: 100%;
width: 19.5%;
background-color: DodgerBlue;
}
#Link_Five {
display: inline-block;
text-align: center;
height: 100%;
width: 19.5%;
background-color: DodgerBlue;
}
.Link {
border: 1px solid black;
}
.Link p {
line-height: 400%;
}
#Name_Error {
display: none;
}
#Age_Error {
display: none;
}
#Email_Error {
display: none;
}
Javascript
var Age_Reg = /[0-9]/;
var Email_Reg = /^\w+#[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
var Name_Reg = /[^A-Za-z0-9_'-]/;
function Name_Verify() {
var Name = document.getElementById("Name_Input").value;
if (Name_Reg.test(Name)) {
} else {
document.getElementById("Name_Error").style.display = inline;
}
}
function Age_Verify() {
var Age = document.getElementById("Age_Input").value;
if (Age_Reg.test(Age)) {
} else {
document.getElementById("Age_Error").style.display = inline;
}
}
function Email_Verify() {
var Email = document.getElementById("Email_Input").value;
if (Email_Reg.test(Email)) {
} else {
document.getElementById("Email_Error").style.display = inline;
}
}
function Verify() {
Name_Verify();
Age_Verify();
Email_Verify();
}

You're trying to reference inline as if it were a variable, I assume you mean to use quotes... "inline"

Highlight div on drop

I want to hightlight a div after I dropped an element into it.
How can I identify the div where I dragged the item to and highlight it?
In my program the code below works but not in this sniplet. Here I cannot drag the div's although I made them draggable. What did I do wrong?
var overviewJS = new function() {
this.allowDrop = function(ev) {
ev.preventDefault();
}
this.drag = function(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
this.drop = function(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
//$('.tbProject').append("Some content");
$('.tbProject').effect("highlight", {}, 3000);
}
}
.tbDocument {
background-color: grey;
border: 1px solid #412418;
border-radius: 2px;
width: 120px;
}
.tbProject {
width: 40px;
height: 20px;
border: 1px solid #412418;
border-radius: 2px;
}
[draggable] {
cursor: move;
padding: 10px 20px;
background-color: #666;
border: 2px dashed #eee;
margin: 10px 0;
color: white;
width: 160px;
-webkit-user-drag: element;
}
<div class="tbProject" ondrop="overviewJS.drop(event)" ondragover="overviewJS.allowDrop(event)">
<center>test</center>
</div>
<div class="tbProject" ondrop="overviewJS.drop(event)" ondragover="overviewJS.allowDrop(event)">
<center>test</center>
</div>
<div class="tbProject" ondrop="overviewJS.drop(event)" ondragover="overviewJS.allowDrop(event)">
<center>test</center>
</div>
<br>
<br>
<div class="tbDocument" draggable="true">
document to drag
</div>

Your namespace syntax is wrong and you did not include jQuery UI which is needed for .effect(). To then specifically highlight the drop target use ev.target.
Here your adjusted snippet:
overviewJS = {
allowDrop: function (ev) {
ev.preventDefault();
},
drag: function (ev) {
ev.dataTransfer.setData("text", ev.target.id);
},
drop: function (ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
//$('.tbProject').append("Some content");
$(ev.target).effect("highlight", {}, 3000);
}
}
.tbDocument {
background-color: grey;
border: 1px solid #412418;
border-radius: 2px;
width: 120px;
}
.tbProject {
width: 40px;
height: 20px;
border: 1px solid #412418;
border-radius: 2px;
}
[draggable] {
cursor: move;
padding: 10px 20px;
background-color: #666;
border: 2px dashed #eee;
margin: 10px 0;
color: white;
width: 160px;
-webkit-user-drag: element;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="tbProject" ondrop="overviewJS.drop(event)" ondragover="overviewJS.allowDrop(event)">
<center>test</center>
</div>
<div class="tbProject" ondrop="overviewJS.drop(event)" ondragover="overviewJS.allowDrop(event)">
<center>test</center>
</div>
<div class="tbProject" ondrop="overviewJS.drop(event)" ondragover="overviewJS.allowDrop(event)">
<center>test</center>
</div>
<br>
<br>
<div class="tbDocument" draggable="true">document to drag</div>

We Keep Coding

JavaScript is the programming language of the Web.

How to position the following elements in a box using JQuery? - javascript

Merge the 3 appends $('#container').append('<div id="third" ondrop="drop(event)" ondragover="allowDrop(event)">$${t}^x\sqrt{t}^x$$<label>Filename:</label> <input type="text" name="file" id="file" /></div>');

Related

On click reset the background color to transparent in javascript of each div element

conditions for divs in drag and drop

get a hover function to appear in all 100 divs

Trouble making my Javascript work with HTML

Highlight div on drop

Categories

Resources