I have this Code in which there is only Two static div, So i want your kind help to generate new div automatically when new user come. Actually i am working with SignalR.
i need a more divs for new users, and each user have his own div. please provide any of CS or Jquery code help to solve it out. Thanks FOR your help :)
My index. Html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body, html {
margin: 0px;
padding: 0px;
}
#indicator {
width: 300px;
height: 20px;
background: lightgrey;
color: black;
position: absolute;
left: 500px;
top: 0px;
}
#myshape {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
z-index: 100;
}
#yourshape {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
z-index: 1;
}
</style>
</head>
<body>
<script src="Scripts/jquery-1.6.4.js"></script>
<script src="Scripts/jquery-ui-1.10.3.js"></script>
<script src="Scripts/jquery.signalR-2.0.0.js"></script>
<script src="Scripts/jquery.signalR-2.0.0.min.js"></script>
<script src="/signalr/hubs"></script>
<script type="text/javascript">
$(function () {
$.connection.hub.start().done(function () {
$("#indicator").html("connected");
$("#myshape").draggable({
drag: function () {
var left = $("#myshape").offset().left;
var top = $("#myshape").offset().top;
$.connection.moveShapeHub.server.calculate(left, top);
}
});
});
$.connection.moveShapeHub.client.updateshape = function (left, top) {
$("#yourshape").offset({ "left": left, "top": top });
};
});
</script>
<div id="myshape"></div>
<div id="yourshape"></div>
<div id="indicator"></div>
</body>
</html>
Look at the jquery docs on using the append method. That sounds like all you need. http://api.jquery.com/append/
Related
Hello everyone here i am trying to show progress bar for my website but i ma facing problem of not display background-color on scroll, please help on this also find the code at below starting from html, css and jquery ...
HTML Code
<div class="progress-bar-container"><div id="progressbar" value="0"></div></div>
CSS Code
height: 5px;
background-color: #ced4da;
overflow: hidden;
width: 100%;
position: sticky;
position: -webkit-sticky;
top: 48px;
z-index: 440;
}
.progress-bar-container #progressbar {
background-color: #4688f1;
height: 100%;
width: 0;
}
jQuery Code
$(window).scroll(function () {
var s = $(document).scrollTop(),
d = $(document).height() - $(window).height();
$("#progressbar").attr('max', d);
$("#progressbar").attr('value', s);
});
});
Here please guide how i can display backgroud-color on scroll. Thanks in Advance!!
There are a couple of issues with your code, HTML width attribute does not support div element. Also, the value attribute is not supported by div either. For creating the progress bar you could use CSS. Instead of updating $("#progressbar").attr('value', s); value just update the width of the element $("#progressbar").width(s);
Here is the complete working example -
$(window).scroll(function () {
var s = $(document).scrollTop(),
d = $(document).height() - $(window).height();
$("#progressbar").width(s);
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.progress-bar-container{
height: 5px;
background-color: #ced4da;
overflow: hidden;
width: 100%;
position: sticky;
position: -webkit-sticky;
top: 48px;
z-index: 440;
}
.progress-bar-container #progressbar {
background-color: #4688f1;
height: 100%;
width: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="progress-bar-container"><div id="progressbar"></div></div>
<div style="height: 120vh"></div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>
You should calculate the procentage and set it as width for `progressbar``
have a look.
$(window).scroll(function () {
var d = $(document).height() - $(window).height(),
s = $(document).scrollTop();
var width= (s / d) * 100 // in Procent
$("#progressbar").attr('max', d);
$("#progressbar").attr('value',s).css("width",width +"%");
});
body{
height: 1000px;
}
.progress-bar-container{
height: 5px;
background-color: #ced4da;
overflow: hidden;
width: 100%;
position: sticky;
position: -webkit-sticky;
top: 48px;
z-index: 440;
}
.progress-bar-container #progressbar {
background-color: #4688f1;
height: 100%;
width: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="progress-bar-container">
<div id="progressbar" value="0"></div>
</div>
I'm trying to make a kind of window which pops up when a customer add a product to his/her cart. This is what it would look like : Red and green divs are the background. There is a div which makes it darker (#overlay-daddy), and the white div is its child (#overlay).
Using JS I added an event listener on #overlay-daddy which (is supposed to) set its display property to none. My problem is it also triggers an event when I click on #overlay. Thanks in advance !
Here's my code :
#overlay-daddy {
position: absolute;
z-index: 1;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#overlay {
position: absolute;
z-index: 2;
top: 30%;
left: 20%;
width: 60%;
height: 40%;
background-color: #fff;
}
<html lang="fr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/css/batiprox_common.css">
</head>
<body>
<div style="height: 50%; background-color: red"></div>
<div style="height: 50%; background-color: green"></div>
<div id="overlay-daddy">
<div id="overlay">
</div>
</div>
<script type="text/javascript">
var dad = document.getElementById('overlay-daddy');
//dad.addEventListener("click", function() { this.style.display = "none";});
dad.addEventListener("click", function() { alert(this); });
</script>
</body>
</html>
You need to stop the event from being propagated. Just add e.eventPropagation() in the event listener for overlay.
var dad = document.getElementById('overlay-daddy');
var overlay = document.getElementById('overlay');
overlay.addEventListener("click", function(e) {
e.stopPropagation();
});
dad.addEventListener("click", function() {
alert(this);
});
#overlay-daddy {
position: absolute;
z-index: 1;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#overlay {
position: absolute;
z-index: 2;
top: 30%;
left: 20%;
width: 60%;
height: 40%;
background-color: #fff;
}
<div style="height: 50%; background-color: red"></div>
<div style="height: 50%; background-color: green"></div>
<div id="overlay-daddy">
<div id="overlay">
</div>
</div>
Also register a click handler on #overlay where you preventDefault();
Off the top of my head, that could look like this:
document.getElementById('overlay').addEventListener('click', function(e) {
e.preventDefault();
e.cancelBubble();
e.stopPropagation();
}, true);
Note that you probably don't need all three calls but it's been a while and my memory isn't clear on which you really need.
In order to disable the click event in the overlay's children, you need to test if the clicked element is the overlay itself, and not one of its children, with if(event.target===this) :
#overlay-daddy {
position: absolute;
z-index: 1;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#overlay {
position: absolute;
z-index: 2;
top: 30%;
left: 20%;
width: 60%;
height: 40%;
background-color: #fff;
}
<html lang="fr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/css/batiprox_common.css">
</head>
<body>
<div style="height: 50%; background-color: red"></div>
<div style="height: 50%; background-color: green"></div>
<div id="overlay-daddy">
<div id="overlay">
</div>
</div>
<script type="text/javascript">
var dad = document.getElementById('overlay-daddy');
//dad.addEventListener("click", function() { this.style.display = "none";});
dad.addEventListener("click", function(event) {
if(event.target===this) alert(this);
});
</script>
</body>
</html>
The click event on your 'overlay' element is being propagated to its parent. You can add event.stopPropogation of your 'overlay' element.
You may modify your overlay element like below.
<div id="overlay" onclick="event.stopPropagation();">
</div>
I guess your code need bottom and right in #overlay-daddy
#overlay-daddy {
position: absolute;
z-index: 3; // edited
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0; // added bottom
right: 0; // added right
}
So if you want to click in #overlay-daddy you need to set z-index for it greater than #overlay
I hope it can help you.
I've been searching a lot on the site and the web but can't really seem to find any help. My problem is that I need to make a function that creates a new div box on the press of a button and that div box needs to be draggable and editable.
function makeNote(e) {
// Check the event object if the .click is on the canvas
// or a created note
if (e.eventPhase === 2) {
// Create the new comment at the corsor postition
var $newbox = $('<div class="ui-widget-content" id="newbox" style="top:' + e.pageY + 'px; left: ' + e.pageX + 'px;"><span id="close">Delete comment</span><p>Your comment:</p><textarea></textarea></div>');
$('#canvas').append($newbox);
$newbox.draggable();
}
}
function deleteNote() {
$(this).parent('#newbox').remove();
}
// wait until the dom document is loaded
jQuery(document).ready(function () {
// listen for a .click() event on the canvas element
$('#canvas').click(function (e) {
makeNote(e);
});
// Remove the note
$("#close").click(function () {
deleteNote();
});
});
html, body {
background-color: #cccccc;
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
#newbox {
position: absolute;
background-color: white;
height: 200px;
width: 200px;
box-shadow: 10px 10px 10px #888;
padding: 20px;
z-index: 1000;
}
textarea {
background: transparent;
width: 200px;
height: 180px;
border: 0;
}
#canvas {
height:auto !important;
min-height: 100%;
height:100%;
z-index: -1000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" scr="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="JavaScript.js"></script>
<link rel="stylesheet" ahref="StyleSheet1.css" />
</head>
<body>
<div id="canvas">
</div>
</body>
</html>
draggable is a part of jquery-ui library. Not jquery.
Add <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> to your code.
function makeNote(e) {
// Check the event object if the .click is on the canvas
// or a created note
if (e.eventPhase === 2) {
// Create the new comment at the corsor postition
var $newbox = $('<div class="ui-widget-content" id="newbox" style="top:' + e.pageY + 'px; left: ' + e.pageX + 'px;"><span id="close">Delete comment</span><p>Your comment:</p><textarea></textarea></div>');
$('#canvas').append($newbox);
$newbox.draggable();
}
}
function deleteNote() {
$(this).parent('#newbox').remove();
}
// wait until the dom document is loaded
jQuery(document).ready(function () {
// listen for a .click() event on the canvas element
$('#canvas').click(function (e) {
makeNote(e);
});
// Remove the note
$("#close").click(function () {
deleteNote();
});
});
html, body {
background-color: #cccccc;
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
#newbox {
position: absolute;
background-color: white;
height: 200px;
width: 200px;
box-shadow: 10px 10px 10px #888;
padding: 20px;
z-index: 1000;
}
textarea {
background: transparent;
width: 200px;
height: 180px;
border: 0;
}
#canvas {
height:auto !important;
min-height: 100%;
height:100%;
z-index: -1000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="JavaScript.js"></script>
<link rel="stylesheet" ahref="StyleSheet1.css" />
</head>
<body>
<div id="canvas">
</div>
</body>
</html>
Since you use jQuery, you can use .draggable() from jQuery UI along with contenteditable="true":
function addNew() {
var field = $('<div contenteditable="true">Text</div>')
field.appendTo('#fields').draggable();
}
#fields div {
border: 1px dashed #ddd;
}
<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.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button onClick="addNew()">Add new field</button>
<hr/>
<div id="fields"></div>
There is something I want to notice.
never use same id to elements.
use jquery .on function for element that make by scripts.
never use box-shadow :D
function makeNote(e) {
// Check the event object if the .click is on the canvas
// or a created note
if (e.eventPhase === 2) {
// Create the new comment at the corsor postition
var $newbox = $('<div class="ui-widget-content" id="newbox'+e.pageX+e.pageY+'"><span class="close">Delete comment</span><p>Your comment:</p><textarea></textarea></div>');
$('#canvas').append($newbox);
$($newbox).css({
'top' : ($('#canvas').height() / 2 - 150 + sequentCounter++) + 'px' ,
'left' : ($('#canvas').width() / 2 - 100 + rowSeqCounter + sequentCounter++) + 'px'
});
$newbox.draggable({cancel : '.close'});
}
}
var sequentCounter = 1;
var rowSeqCounter = 1;
// wait until the dom document is loaded
jQuery(document).ready(function () {
// listen for a .click() event on the canvas element
$('#div_element_maker').click(function (e) {
if (sequentCounter > 70){
sequentCounter = 1;
rowSeqCounter += 11;
if (rowSeqCounter > 50)
rowSeqCounter = 1;
}
makeNote(e);
});
// Remove the note
$('#canvas').on('click',".close", function () {
$(this).parent().remove()
});
});
html, body {
background-color: #cccccc;
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
.ui-widget-content {
position: absolute;
background-color: white;
height: 180px;
width: 185px;
border: 1px solid darkgray;
/*box-shadow: 10px 10px 10px #888;*/
padding: 20px;
z-index: 1000;
}
textarea {
background: transparent;
width: 180px;
height: 100px;
border: 1px solid darkgray;
}
#canvas {
height:auto !important;
min-height: 100%;
height:100%;
z-index: -1000;
}
.close{
cursor: pointer;
background: red;
}
#div_element_maker{
cursor: pointer;
background: green;
padding: 10px;
margin: 10px;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" scr="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="JavaScript.js"></script>
<link rel="stylesheet" ahref="StyleSheet1.css" />
</head>
<body>
<div id="canvas">
<span id="div_element_maker">make element</span>
</div>
</body>
</html>
I am trying to do the most simple chronometer, just one number that keeps counting infinite. Please keep in mind I am trying to correct my own code, do refrain from answering with "this post is a duplicate of ...", because I probably won't understand other examples. For some reason my code doesn't work, please help.
<!doctype html>
<html>
<head>
<style>
#screen {
position: relative;
border: 2px solid black;
width: 800px;
height: 600px;
top: 50px;
left: 500px;
}
#chronometer {
position: absolute;
top: 150px;
left: 300px;
font-size: 100px;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id="screen">
<div id="chronometer"></div>
</div>
<script>
var chronometer = setInterval(increaseChronometer, 1000);
function increaseChronometer () {
var chronometerNumber = 1;
document.getElementById("chronometer").innerHTML = chronometerNumber;
chronometerNumber++;
}
</script>
</body>
</html>
You are defining the "chronometerNumber" variable inside the function, so it gets created and initialized to "1" every time you invoke the function.
Just move the line "var chronometerNumber=1" outside the function and it should work fine.
Hi i think i got it !
<!doctype html>
<html>
<head>
<style>
#screen {
position: relative;
border: 2px solid black;
width: 800px;
height: 600px;
top: 50px;
left: 500px;
}
#chronometer {
position: absolute;
top: 150px;
left: 300px;
font-size: 100px;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id="screen">
<div id="chronometer"></div>
</div>
<script>
var chronometerNumber = 1;
var chronometer = setInterval( function increaseChronometer () {
document.getElementById("chronometer").innerHTML = chronometerNumber;
chronometerNumber++;
}, 1000);
</script>
</body>
</html>
In the reference of the setInterval (){} function is written that you have to make anonimus function which will be called every time after timeout, and I did it i put your function inside the setInterval function also i move your var chronometerNumber = 1; declaration outside the function because if it is in there every time the function is called your counter will start from one again and again and so on and you will see only one every time. I home i was helpful and sorry for the english.
Referring various sources, I've written a code to minimize and maximize a div tag in my JSP code which goes as follows,
<style type="text/css" media="screen" > #editor {
position: absolute;
top: 0;
right: 20%;
bottom: 0;
left: 0;
}
#widnow {
position: absolute;
top: 72.5%;
right: 0;
bottom: 0;
left: 0;
width: auto;
border: solid 1px;
}
#title_bar {
background: #FEFEFE;
height: 25px;
width: 100%;
}
#button {
border: solid 1px;
width: 25px;
height: 23px;
float: right;
cursor: pointer;
}
#box {
height: 250px;
background: #DFDFDF;
}
</style >
=============================
<div id="widnow">
<div id="title_bar">
<div id="button">-</div>
</div>
<div id="box">
</div>
</div>
============================
<script type="text/javascript">
$("#button").click(function(){
if($(this).html() == "-"){
$(this).html("+");
}
else{
$(this).html("-");
}
$("#box").slideToggle();
});
</script>
This gives me a div tag something like this,
But when I click the minimize button (i.e - on the top right) nothing happens.
The code works fine as shown in this demo but does not work in my jsp.
what to do? where is my mistake?
Did you Check for JavaScript conflicts? I had such issues before.
Removed
<script src="js/jquery.autocomplete.js"></script>
from head in JSP and added
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
This worked fine.