I have this program that makes dynamic draggable divs, the user can then drop the a into any td in a table. When the div is dropped, I'm trying to make the dragged div be centered over the td it was dropped in.
I was wondering if there is a method or way to do this with jQuery to help with this. I tried something like this:
var selectedCell; //<td></td> dynamic <div></div> was dropped on
$("td").droppable({
drop: function( event, ui ) {
selectedCell = event.target;
$(currentlyDragged).postion({
selectedCell = '<td id="'selectedCell'"><center>"'+ currentlyDragged + '"</center></td>' //the dropped div should be centered over td
})
}
});
but it didn't work, is it possible to do this with dynamic divs?
Code Snippet:
var text;
var selectedText;
var inputBox = document.getElementById("input");
function showInputBox(){
inputBox.style.display = "block";
}
var elementCounter = 0;
function addElement() {
text = document.getElementById("input").value;
// create a new div element and give it a unique id
var newDiv = document.createElement("div");
newDiv.id = 'temp'+elementCounter;
elementCounter++
// and give it some content
var newContent = document.createTextNode(text);
// add the text node to the newly created div
newDiv.appendChild(newContent);
// add the newly created element and its content into the DOM
var currentDiv = document.getElementById("div1");
document.body.insertBefore(newDiv, currentDiv);
var currentlyDragged;
$(function() {
$("[id^='temp']").draggable({
drag: function (e) {
currentlyDragged = e.target.id
selectedText = event.target;
text = $(selectedText).html();
}
});
var selectedCell;
$("td").droppable({
drop: function( event, ui ) {
selectedCell = event.target;
alert("<td id=selectedCell><center> + currentlyDragged + </center></td>");
}
});
});
document.getElementById("input").value = " ";
}
function addRedElement() {
text = document.getElementById("input").value;
// create a new div element and give it a unique id
var newDiv = document.createElement("div");
newDiv.style.backgroundColor = "red";
newDiv.id = 'temp'
// and give it some content
var newContent = document.createTextNode(text);
// add the text node to the newly created div
newDiv.appendChild(newContent);
// add the newly created element and its content into the DOM
var currentDiv = document.getElementById("div1");
document.body.insertBefore(newDiv, currentDiv);
$(function() {
$("div").draggable({
drag: function (e) {
console.log('being dragged');
selectedText = event.target;
text = $(selectedText).html();
console.log(text);
}
});
$("#temp").draggable({
drag: function (e) {
console.log('being dragged');
selectedText = event.target;
text = $(selectedText).html();
console.log(text);
}
});
$("td").droppable({
drop: function( event, ui ) {
var selectedDiv = event.target;
$( this )
.addClass("div")
.html(text);
$("div").draggable();
$( "#temp" ).remove();
}
});
});
document.getElementById("input").value = " ";
}
body{
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
div {
text-align: center;
border: 1px solid #d3d3d3;
width: 100px;
padding: 10px;
cursor: move;
z-index: 10;
background-color: #2196F3;
color: #fff;
}
.blank {
}
.div3 {
position: absolute;
text-align: center;
border: 1px solid #d3d3d3;
padding: 10px;
cursor: move;
z-index: 10;
height: 20px ;
background-color: white;
width: 20px;
color: #fff;
}
.div {
text-align: center;
padding: 10px;
cursor: move;
background-color: #2196F3;
color: #fff;
}
td{
border: 1px solid #d3d3d3;
padding: 10px;
height: 20px ;
width: 200px;
}
div:hover {
background-color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<h1>Input text:</h1>
<p>input text and it will become a draggable div. You can then drag it to one of the tds </p>
<input id="input" type="text" value="text">
<button onclick="addElement()" >input</button>
<p>Drag your outputs to the div:</p>
<table border="1">
<tr>
<td height="50" width=100 id="cell1"></td>
<td height="50" width=100 id="cell2"></td>
<td height="50" width=100 id="cell3"></td>
</tr>
</table>
<script src="script.js"></script>
</body>
</html>
Related
I have this program that make draggable <div></div>'s dynamically. I'm trying to make any draggable <div></div> be deleted when it dropped over the id="trash" <div></div>
I tried doing something like this, but it just deletes the trash div:
$(function() {
var trash = document.getElementById('trash');
$(trash).droppable({
drop: function( event, ui ) {
$(this).remove("div");
}
});
});
I was trying to identify the <div></div> being dropped but wasn't sure how to go about it.
Here is my full code:
function addElement () {
var text = document.getElementById("input").value;
// create a new div element and give it a unique id
var newDiv = document.createElement("div");
newDiv.id = 'temp'
// and give it some content
var newContent = document.createTextNode(text);
// add the text node to the newly created div
newDiv.appendChild(newContent);
// add the newly created element and its content into the DOM
var currentDiv = document.getElementById("div1");
document.body.insertBefore(newDiv, currentDiv);
$(function() {
var td = document.getElementsByTagName('td');
var div = document.getElementsByTagName('div');
$(div).draggable();
$("#temp").draggable();
$(td).droppable({
drop: function( event, ui ) {
$( this )
.addClass("div")
.html( text );
$("div").draggable();
$( "#temp" ).remove();
}
});
});
document.getElementById("input").value = " ";
$(function () {
$("td").dblclick(function (e) {
e.stopPropagation();
var currentEle = $(this);
var value = $(this).html();
updateVal(currentEle, value);
});
});
function updateVal(currentEle, value) {
$(currentEle).html('<input class="thVal" type="text" value="' + text + '" />');
$(".thVal").focus();
$(".thVal").keyup(function (event) {
if (event.keyCode == 13) {
$(currentEle).html($(".thVal").val().trim());
}
});
$(document).click(function () {
$(currentEle).html($(".thVal").val().trim());
});
}
}
var div = document.getElementsByClassName('div');
$( "td" ).hover(
function() {
$( this ).append( $( "<button>Delete</button>" ) ).attr('id', 'melement');
function dump() {
$(this).parent().html("").removeClass("div");
}
$( "#melement button" ).on( "click", dump );
}, function() {
$( this ).find( "button" ).last().remove();
}
);
$(function() {
var trash = document.getElementById('trash');
$(trash).droppable({
drop: function( event, ui ) {
$(this).remove("div");
}
});
});
body{
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
div {
text-align: center;
border: 1px solid #d3d3d3;
width: 100px;
padding: 10px;
cursor: move;
z-index: 10;
background-color: #2196F3;
color: #fff;
}
.blank {
}
.div {
text-align: center;
padding: 10px;
cursor: move;
background-color: #2196F3;
color: #fff;
}
td{
border: 1px solid #d3d3d3;
padding: 10px;
height: 20px ;
width: 200px;
}
.div:hover {
background-color: yellow;
}
.trash {
background-color: red;
height: 100px;
width: 100px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<h1>Input text:</h1>
<input id="input" type="text" placeholder="input">
<button onclick="addElement()" >input</button>
<div id="trash" class="trash">Trash Can</div>
<script src="script.js"></script>
</body>
</html>
Using ui.draggable[i].remove() you can get the element being dragged within that functionby using a for loop. Loop through the ui.draggable object and use the incremented variable in the for loop i as a key to target the selected element being dragged.
EDIT: Added a for loop to loop through ui.draggable items in order to target the element that is being dragged when more than one draggable item has been added. Also I would change your function that adds the ID to the created div that holds the text item created to concatenate a number to the ID, otherwise you will have identical IDs when more than one text item is added.
$(function() {
var trash = document.getElementById('trash');
$(trash).droppable({
drop: function(event, ui) {
for (let i = 0; i < ui.draggable.length; i++) {
ui.draggable[i].remove();
}
}
});
});
In your questionn you are removing the event with $(this) which is the trash can.
function addElement() {
var text = document.getElementById("input").value;
// create a new div element and give it a unique id
var newDiv = document.createElement("div");
newDiv.id = 'temp'
// and give it some content
var newContent = document.createTextNode(text);
// add the text node to the newly created div
newDiv.appendChild(newContent);
// add the newly created element and its content into the DOM
var currentDiv = document.getElementById("div1");
document.body.insertBefore(newDiv, currentDiv);
$(function() {
var td = document.getElementsByTagName('td');
var div = document.getElementsByTagName('div');
$(div).draggable();
$("#temp").draggable();
$(td).droppable({
drop: function(event, ui) {
$(this)
.addClass("div")
.html(text);
$("div").draggable();
$("#temp").remove();
}
});
});
document.getElementById("input").value = " ";
$(function() {
$("td").dblclick(function(e) {
e.stopPropagation();
var currentEle = $(this);
var value = $(this).html();
updateVal(currentEle, value);
});
});
function updateVal(currentEle, value) {
$(currentEle).html('<input class="thVal" type="text" value="' + text + '" />');
$(".thVal").focus();
$(".thVal").keyup(function(event) {
if (event.keyCode == 13) {
$(currentEle).html($(".thVal").val().trim());
}
});
$(document).click(function() {
$(currentEle).html($(".thVal").val().trim());
});
}
}
var div = document.getElementsByClassName('div');
$("td").hover(
function() {
$(this).append($("<button>Delete</button>")).attr('id', 'melement');
function dump() {
$(this).parent().html("").removeClass("div");
}
$("#melement button").on("click", dump);
},
function() {
$(this).find("button").last().remove();
}
);
$(function() {
var trash = document.getElementById('trash');
$(trash).droppable({
drop: function(event, ui) {
for (let i = 0; i < ui.draggable.length; i++) {
ui.draggable[i].remove();
}
}
});
});
body {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
div {
text-align: center;
border: 1px solid #d3d3d3;
width: 100px;
padding: 10px;
cursor: move;
z-index: 10;
background-color: #2196F3;
color: #fff;
}
.blank {}
.div {
text-align: center;
padding: 10px;
cursor: move;
background-color: #2196F3;
color: #fff;
}
td {
border: 1px solid #d3d3d3;
padding: 10px;
height: 20px;
width: 200px;
}
.div:hover {
background-color: yellow;
}
.trash {
background-color: red;
height: 100px;
width: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<h1>Input text:</h1>
<input id="input" type="text" placeholder="input">
<button onclick="addElement()">input</button>
<div id="trash" class="trash">Trash Can</div>
<script src="script.js"></script>
</body>
</html>
You need to get the element you want to delete.
This can be taken from the event parameter you're passing in the droppable callback.
$(trash).droppable({
drop: function( event, ui ) {
$(event.toElement).remove();
}
});`
event.toElement gets the element you're dropping. Then you just can call remove on it.
I have this program that allows the user to edit a div when the user double clicks it. I'm trying to only make the most recent double clicked div have a border. I'm doing this right now with the addClass method, I add the .selceted class with this function:
$(function () {
$("div").dblclick(function (e) {
clickedTD = event.target;
$(clickedTD).find(clickedTD).last.removeClass("selected").addClass("selected");
}
I'm trying to make the last selected div be deleted with this .find(clickedTD).last.removeClass("selected")
So that most recent double clicked div is the only one with the .selected class. But this didn't work and I'm unsure why.
Here is my full code:
var text;
var selectedText;
var blue = document.getElementById("blue");
var blue2 = document.getElementById("blue2");
var elementCounter = 0;
function addElement() {
var classN = event.target.id;
text = document.getElementById("input").value;
// create a new div element and give it a unique id
var newDiv = document.createElement("div");
newDiv.id = 'temp'+elementCounter;
newDiv.classList = "div";
elementCounter++
if (classN == "blue"){
newDiv.classList = "blue"
} else if (classN == "red"){
newDiv.classList = "red"
} else if (classN == "green"){
newDiv.classList = "green"
} else if (classN == "blue2"){
newDiv.classList = "blue2"
}
// and give it some content
var newContent = document.createTextNode(text);
// add the text node to the newly created div
newDiv.appendChild(newContent);
// add the newly created element and its content into the DOM
var currentDiv = document.getElementById("div1");
document.body.insertBefore(newDiv, currentDiv);
$(function() {
var currentlyDragged;
$("div").draggable({
drag: function (e) {
currentlyDragged = e.target.id
selectedText = event.target;
text = $(selectedText).html();
}
});
$(function () {
$("div").dblclick(function (e) {
clickedTD = event.target;
$(clickedTD).find(clickedTD).last.removeClass("selected").addClass("selected");
}
);
});
});
document.getElementById("input").value = " ";
}
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap');
import { library } from '#fortawesome/fontawesome-svg-core'
import { fas } from '#fortawesome/free-solid-svg-icons'
import { far } from '#fortawesome/free-regular-svg-icons'
import { fab } from '#fortawesome/free-brands-svg-icons'
// Add all icons to the library so you can use it in your page
library.add(fas, far, fab)
h1, body{
font-family: 'Roboto', sans-serif;
}
.selected {
border-style: dashed;
}
div {
text-align: center;
border: 1px solid #d3d3d3;
width: 150px;
height: 30px;
padding: 10px;
cursor: move;
z-index: 10;
background-color: white;
color: blue;
}
divWhite {
text-align: center;
border: 1px solid #d3d3d3;
width: 100px;
padding: 10px;
cursor: move;
z-index: 10;
background-color: white;
color: #fff;
}
.blue {
background: linear-gradient(87deg, #5e72e4 0, #825ee4 100%);
color: white;
}
.red {
background: linear-gradient(87deg, #f5365c 0, #f56036 100%);
color: white;
}
.green {
background: linear-gradient(87deg, #2dce89 0, #2dcecc 100%);
color: white;
}
.blue2 {
background: linear-gradient(87deg, #11cdef 0, #1171ef 100%);
color: white;
}
.white {
background: white;
color: white;
}
button{
font-size: .875rem;
border: none;
border-radius: 3px;
height: 40px;
width: 90px;
text-align: center;
position: relative;
transition: all .15s ease;
letter-spacing: .025em;
text-transform: uppercase;
will-change: transform;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body style="font-family: 'Roboto', sans-serif;">
<body id="container">
<header id="inputAssignments">
<h1 id="mulAsi">Input Your Assignments for the week:</h1>
<h1 style="display:none" id="oneAsi">Input Your Assignment:</h1>
<input id="input" type="text" value="text">
<button class="blue" id="blue" onclick="addElement()" >Make it Purple</button>
<button class="red" id="red" onclick="addElement()" >Make it Red</button>
<button class="green" id="green" onclick="addElement()" >Make it Green</button>
<button class="blue2" id="blue2" onclick="addElement()" >Make it Blue</button>
<button style="display:none" id="blue2" onclick="addElement();" >input</button>
<h1 height="30px"></h1>
</header>
</header>
<script src="script.js"></script>
</body>
</html>
What you want is ...
div dbclick
Remove selected class from div (actually... div.selcted)
Add selected class to div what you dbclicked.
input[type=text] change
set input[type=text].value to div.selcted.innerHTML
When you use jQuery event,
there are two ways to get $this
Let me show you how to solve this problem.
Regular Function
$('#elementId').on('click', function(){
//1. Remove selected class from div
$('div.selected').removeClass('selected');
//2. Add selected class to $this
const $this = $(this);
$this.addClass('selected')
});
Arrow Function
$('#elementId').on('click', (_event) => {
//1. Remove selected class from div
$('div.selected').removeClass('selected');
//2. Add selected class to $this
const $this = $(_event.currentTarget); // important!
$this.addClass('selected')
});
Finally, Change event of input[type=text]
I will skip arrow function this time.
$('#someInput').on('change', function(){
const value = $(this).val();
$('div.selcted').html(value);
});
DONE!
I recommend you to set id or class to your HTML DOM.
If you set event to ['div', 'input' ...], you will get side effect
Not use div, input
Use #element001(best) or div.myElement001
bye bye
I am trying to create a text font colour drop down button where it gives you an option of multiple colour to pick from and then it would change the colour of the text. I am not sure on how to approach this and I am not meant to use jQuery. Any help would be appreciated. In the code below it shows other examples of other button where they change the user input entered into the contenteditable. I want the font colour button to do the same but just change the colour of the text
const TAB_KEY = 9;
const ENTER_KEY = 13;
const SHIFT_KEY = 16
const editor = document.querySelector('.editor');
editor.appendChild(document.createElement('li'));
editor.addEventListener('keydown', (e) => {
let code = e.keyCode || e.which;
if (code == TAB_KEY) {
e.preventDefault();
let parent = e.target;
let ul = document.createElement('ul');
let li = document.createElement('li');
ul.appendChild(li);
parent.appendChild(ul);
moveCursorToEnd(li);
} else if (code == ENTER_KEY) {
e.preventDefault();
let parent = e.target;
let li = document.createElement('li');
parent.appendChild(li);
moveCursorToEnd(li);
} else if (code == TAB_KEY * TAB_KEY){
e.preventDefault();
let parent = e.target;
let ol = document.createElement('ol');
let li = document.createElement('li');
ol.appendChild(li);
parent.appendChild(ol);
moveCursorToEnd(li);
}
});
function moveCursorToEnd(el) {
el.focus();
document.execCommand('selectAll', false, null);
document.getSelection().collapseToEnd();
}
/*editor.addEventListener('click', (x) => {
x = document.getElementById("b");
if(x.style.fontWeight == "bolder"){
x.style.fontWeight = "normal";
} else {
x.style.fontWeight = "bolder";
}
});*/
function bold(){
if(document.execCommand("bold")){
document.execCommand("normal");
}else{
document.execCommand("bold");
}
}
/*function underline(){
let x = document.getElementById("text");
if(x.style.textDecoration == "underline"){
x.style.textDecoration = "none";
}else{
x.style.textDecoration = "underline";
}
}*/
function underline(){
if(document.execCommand("underline")){
document.execCommand("none");
}else{
document.execCommand("underline");
}
}
/*Turns the font of the text to Italic*/
function italic(){
if(document.execCommand("italic")){
document.execCommand("normal");
}else{
document.execCommand("italic");
}
}
function highlighSelectedText(){
let sel = window.getSelection().getRangeAt(0);
let selText = sel.extractContents();
let span = document.createElement("span");
span.style.backgroundColor = "yellow";
span.appendChild(selText);
sel.insertNode(span);
}
/*function printPage(){
let printButton = document.getElementById("ul");
printButton.style.visibility = 'hidden';
window.print();
printButton.style.visibility = 'visible';
}*/
body{
margin-top:1em;
margin-bottom: 10em;
margin-right: 1em;
margin-left: 1em;
border: solid;
border-color: #0033cc;
background-color: #f6f6f6;
}
div button{
padding: 1em 2em;
color: white;
background-color: #0000cc;
}
div input{
padding: 1em 2em;
color: white;
background-color: #0000cc;
}
div{
list-style-type:square;
list-style-position: inside;
margin-left: 0.25em;
margin-bottom: 5em;
}
section {
padding: 1em 2em;
color: white;
background-color: #0000cc;
}
.editor {
font-weight: normal;
}
div contenteditable{
margin-bottom: 10em;
}
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<head>
<title>Outliner</title>
<link href="style.css" rel="stylesheet" title="Style">
<div>
<button id="b" onclick="bold()"> B </button>
<button onclick="underline()"> U </button>
<button onclick="italic()"> I </button>
<input type="button" onclick="highlighSelectedText()" value="Highlight"/>
<div id="text" class="editor" contenteditable="true" draggable="true"></div>
</div>
<section>
<input id="saveAs"></input>
<button onclick="saveTextFile()">Download</button>
<input type="file" id="load"/>
<button onclick="loadFile()">Load</button>
</section>
<section>
<button class="btn btn-primary" onclick="saveChanges()">Save Text</button>
<button class="btn btn-warning" onclick="clearStorage()">Reset</button>
</section>
</head>
<script type= "text/javascript" src='setting.js'></script>
</body>
First off we will use a CSS variable. Lets declare a value at :root
:root {
--font-color: #000;
}
Now we will use that value to style the font color of our P tags.
p {
color: var(--font-color);
}
Now when somebody clicks one of the color names, we want to change the value of --font-color. (Notice we are using the data- attribute model to store the color we want to change too).
document.documentElement.style.setProperty('--font-color', target.dataset.color);
And presto we can now change color easily. This works for other values also.
Here is a great article
document.addEventListener('click', ({ target }) => {
if(target.matches('p')) {
document.documentElement.style.setProperty('--font-color', target.dataset.color);
}
});
:root {
--font-color: #000;
}
p {
width: 30%;
border: 2px solid #00000030;
border-radius: 7px;
margin: 0.25rem;
padding: 0.25rem;
color: var(--font-color);
}
<h2>Click a color</h2>
<p data-color="#f00">Red</p>
<p data-color="#0f0">Green</p>
<p data-color="#00f">Blue</p>
<p data-color="#000">Reset</p>
You can manipulate the style variable:
<div id="text">
Choose a color
</div>
<input id="color" type="color">
<button onclick="document.getElementById('text').style.color = document.getElementById('color').value;">Change Color</button>
My code knowledge is very limited, comes from CodeHS and Codecademy so bear with me.
So I am trying to make a list of numbers, that can be deleted on click. So far so good with the number list, but I still can't figure how to remove them when I click the div box.
I know theres JSFiddle, but I think this is best I could do:
http://www.codecademy.com/rfabrega/codebits/xZ61aJ
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=203">
<title>Lista Mundial</title>
<style>
.divContainer {
width: 35px;
height: 25px;
border: solid 1px #c0c0c0;
background-color: #e1e1e1;
font-family: verdana;
color: #000;
float: left;
}
.text {
font-size: 15px;
font-family: verdana;
color: black;
margin-top: 4px;
}
</style>
</head>
<body>
<script type="text/javascript">
for(var i = 1; i <= 639; i++){
var divTag = document.createElement("div");
divTag.id = i;
divTag.className = "divContainer";
document.body.appendChild(divTag);
var pTg = document.createElement("p");
pTg.setAttribute("align", "center");
pTg.className = "text";
pTg.innerHTML = (i);
document.getElementById(i).appendChild(pTg);
}
</script>
</body>
</html>
you have to create a function on click that deletes the target div tag:
so in your code, after creating the div element. insert this:
divTag.onclick = function(){this.parentNode.removeChild(this)};
$(document).ready(function(){
$('p').hide();
$("body").on("click",".divContainer",function(){
$(this).remove();
});
});
On another question I asked if I could set the font-weight to bold on a text element when that text is selected. This has been completed much to the avail of #Eric ! But currently, when you click a text, you can happily click another one and both of the text will be bold.
How can I prevent more than one text element from being bold?
Here is my code on JSFiddle: http://jsfiddle.net/6XMzf/ or below:
CSS:
html,body {
margin: 0;
padding: 0
}
#background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
color: white;
}
.stretch {
width:100%;
height:100%;
}
.navigationPlaceholder {
width:100px;
height: 400px;
left: 100px;
top: 100px;
position: absolute;
}
#navigation {
background-color: #000000;
}
#navigationText ul {
font-family: "Yanone Kaffeesatz";
font-weight: 100;
text-align: left;
font-size: 25px;
color: #b2b2b2;
left: 25px;
top: 50px;
position: absolute;
line-height: 40px;
list-style-type: none;
}
.noSelect {
-moz-user-select: none; /* mozilla browsers */
-khtml-user-select: none; /* webkit browsers */
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Max Kramer | iOS Developer</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" />
</head>
<body>
<div id="background" />
<div id="navigation" class="navigationPlaceholder">
<div id="navigationText">
<ul>
<li>iOS</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
var nav = document.getElementById('navigationText');
var navItems = nav.getElementsByTagName('li');
for (var i = 0; i < navItems.length; i++) {
navItems[i].addEventListener('click', function() {
this.style.fontWeight = '400';
}, false);
}
</script>
</body>
</html>
If you don't have a selector engine handy like jQuery and really have to do this in plain Javascript, I would do it like this:
function addClass(elem, className) {
if (elem.className.indexOf(className) == -1) {
elem.className += " " + className;
}
}
function removeClass(elem, className) {
elem.className = elem.className.replace(new RegExp("\\s*" + className), "");
}
var lastSelected = null;
function initNavClickHandler() {
var nav = document.getElementById('navigationText');
var navItems = nav.getElementsByTagName('li');
for (var i = 0; i < navItems.length; i++) {
navItems[i].addEventListener('click', function() {
addClass(this, "selected");
if (lastSelected) {
removeClass(lastSelected, "selected");
}
lastSelected = this;
}, false);
}
}
initNavClickHandler();
Then, add a CSS rule that controls the selected look:
.selected {font-weight: 800;}
This is a lot more flexible for styling because you can add as many CSS rules as you want to the .selected class to change/modify it without ever touching your code.
You can see it work here: http://jsfiddle.net/jfriend00/rrxaQ/
If you can use things like jQuery then this is a much simpler problem. Let me show you the jQuery solution for both highlighting and unhighlighting.
$("#navigationText li").click( function() {
$("#navigationText li").css("fontWeight", "100");
$(this).css("fontWeight", "400");
});
Now you can achieve the same thing yourself without jQuery. You either need to create a global that holds the currently bolded item and remove the fontWeight or just remove the fontWeight from all items (brute force).
//untested with global to store currently selected
var nav = document.getElementById('navigationText');
var activeItem = null;
var navItems = nav.getElementsByTagName('li');
for (var i = 0; i < navItems.length; i++) {
navItems[i].addEventListener('click', function() {
if (activeItem) {activeItem.style.fontWeight = '100'; }
this.style.fontWeight = '400';
activeItem = this;
}, false);
}
//sorry I don't feel like writing a brute force one for you!