function expand(){
currentvalue = document.getElementById("test").value;
if(currentvalue == "off"){
document.getElementById("test").value="on";
document.getElementById("test").style.height="100px";
var div = document.getElementById("test");
var content = document.getElementById("test3");
div.innerHTML = div.innerHTML + content.innerHTML;
}
else{
document.getElementById("test").value="off";
document.getElementById("test").style.height="20px";
var div = document.getElementById("test").innerHTML = "<div id='test2'><b>Div</b></div>";
}
}
<!doctype html>
<html>
<head>
<style>
#test{
position: absolute;
border-radius: 4px;
background: #CCCC00;
height: 20px;
width: 300px;
border: 1px solid #000000;
}
#test2{
text-align: center;
font-size: 12pt;
}
</style>
</head>
<body>
<a href="#" onClick="javascript:expand()" value="on">
<div id="test">
<div id="test2"><b>Div</b></div>
<div id="test3" style="display: none;">I want this to show up in my div!</div>
</div>
</a>
</body>
</html>
I'm trying to make an expandable div container which will display some text inside of it
when opened and then hide it when closed. I managed to make the div expand and close but
I can't figure out how to make the text appear in the expanded box. I can do it by inserting the text in the javascript but I want it set as a variable so i can use the script for multiple pages with different text inside of the div.
I don't know if I've approached it the right way and would like some help, ty in advance.
To display your text just change the style of the div containing your text to display: block:
document.getElementById("test3").style.display = "block";
For your requirements, it would be something like this:
function expand() {
if (currentValue == "off") {
currentValue = "on";
document.getElementById("test").style.height = "100px";
document.getElementById("test3").style.display = "block";
}
else {
currentValue = "off";
document.getElementById("test").style.height= "20px";
document.getElementById("test3").style.display = "none";
}
}
Here you have a working fiddle.
Related
I want to repeat particular HTML element in a div after a particular height.
Consider we have a div and we want to add a <span> tag after every 50px height of div.
How can we achieve this?
I have tried this code.
<html>
<head>
<script>
function test() {
var length = document.getElementById('lc').style.length;
var element = document.createElement("div");
element.setAttribute("id", "break");
element.style.border
element.appendChild(document.createTextNode('Hello how are you'));
document.getElementById('lc').appendChild(element);
}
</script>
</head>
<body>
<input id="filter" type="text" placeholder="Enter your filter text here.." onkeyup = "test()" />
<div id="lc" style="background: blue; height: 150px; width: 150px;
}" onclick="test();">
</div>
</body>
</html>
The thing is on which basis i can repeat loop for this code
<style>
.parent > *{
display:block;
height:50px;
border: 1px solid red;
}
</style>
<div classname="parent">
<span></span>
<span></span>
<span></span>
</div>
Try this code 😊
<script>
function test() {
var length = document.getElementById('lc').style.length;
var element = document.createElement("div");
element.setAttribute("id", "break");
element.appendChild(document.createTextNode('Hello how are you'));
element.style.height = "50px";
element.style.display = "block";
document.getElementById('lc').appendChild(element);
}
</script>
</head>
<body>
<input id="filter" type="text" placeholder="Enter your filter text here.." onkeyup = "test()" />
<div id="lc" style="background: #999;min-height:150px;width: 150px;" onclick="test();">
</div>
</body>
</html>
Something like that?
Here I'm adding a div for every 50px in the area (read my comments in the code).
IMPORTANT: you can completely ignore the eventListener. That part is just so the script recalculates the amount of spans needed after resizing the window.
// Adding event listener
window.addEventListener("resize", magic);
// Running the function once so you don't have to resize the window
magic();
function magic() {
// Clear the last elements
while(area.firstChild) area.removeChild(area.firstChild);
// Get the needed amout of spans needed
let count = Math.floor(area.clientHeight / 50);
// Adding a span for each 50px
for(let i = 0; i < count; i++) {
let span = document.createElement("span");
span.className = "spans";
span.innerText = "Span WOHOO :D";
area.appendChild(span);
}
}
*{margin:0;padding:0;}
body, html {
height: 100%;
width: 100%;
}
#area {
background-color: gray;
height: 100%;
width: 100%;
}
.spans {
display: block;
height: 50px;
border-bottom: 1px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="area">
</div>
</body>
</html>
Have a nice day, Elias :)
I need hide a div opening a webpage (display is set on "none"), but clicking on a button the div has to appear.
I'd like to know why the code works until I declare css styles into each div: if I define css in a style block into the head (commented below) and remove style tag from each div, the JavaScript looks almost death.
<!DOCTYPE html>
<HTML lang="it">
<HEAD>
<TITLE>Prova visualizzazione div via button</TITLE>
<meta charset="UTF-8" />
<script>
function apriMenu() {
var idTag;
idTag = document.getElementById("appari").style;
if (idTag.display == "none") {
idTag.display = "block";
idTag.top = document.getElementById("header").style.height + "px";
} else if (idTag.display == "block") {
idTag.display = "none";
}
}
</script>
<!-- <style type="text/css">
header {
width: 100%;
background-color: #22ffff;
height: 40px;
}
#appari {
width: 49%;
background-color: #ff22ff;
height: auto;
display: none;
}
</style> -->
</HEAD>
<body>
<header id="header" style="width: 100%;
background-color: #22ffff;
height: 40px;">
Questo è l'header<br />
<div id="side">
<button onClick="javascript:apriMenu();">Clicca</button>
</div>
</header>
<div id="appari" style="width: 49%;
background-color: #ff22ff;
height: auto;
display: none;">
Questo è il div appari
</div>
</body>
</html>
element.style only gets inline styles, what you are looking for is the computedStyle
So there for you need to use window.getComputedStyle()
See code sample:
function apriMenu() {
var idTag;
idTag = document.getElementById("appari");
var displayStyle = window.getComputedStyle(idTag).display;
if (displayStyle === "none") {
idTag.style.display = "block";
idTag.top = document.getElementById("header").style.height + "px";
} else if (displayStyle === "block") {
idTag.style.display = "none";
}
}
header {
width: 100%;
background-color: #22ffff;
height: 40px;
}
#appari {
width: 49%;
background-color: #ff22ff;
height: auto;
display: none;
}
<header id="header">
Questo è l'header<br />
<div id="side">
<button onClick="javascript:apriMenu();">Clicca</button>
</div>
</header>
<div id="appari">
Questo è il div appari
</div>
Without digging into it too deeply, you could just add a final else statement to show the element if style.display is empty. Just use the reverse case if you want the element to be shown initially.
function apriMenu() {
var idTag;
idTag = document.getElementById("appari").style;
if (idTag.display == "none") {
idTag.display = "block";
idTag.top = document.getElementById("header").style.height + "px";
} else if (idTag.display == "block") {
idTag.display = "none";
}
else{
idTag.display = "block";
idTag.top = document.getElementById("header").style.height + "px";
}
}
Here's another simpler way to achieve the same thing: http://next.plnkr.co/edit/ZsAKiwxVA3riRx5Y?open=lib%2Fscript.js
function toggleMenu() {
var element = document.getElementById("appari");
element.classList.toggle("showMenu");
}
You basically just need to toggle a class on and off to hide/show the menu. I've found using a class to do so is quite simple.
Good luck!
I'm trying to make a small chat application (like in facebook). Now the problem is, I have somehow made it work, but the next message box doesn't append where I want it to be if there are more than 2 lines in previous chat message. They overlap. Now I thought appending one or more br tags after each div of message will solve this but it doesn't.
How to dynamically append div after div inside a larger div, making sure the div boxes inside it do not overlap and are at least 20px apart?
Does the following solve your problem:
$(document).ready(function() {
var smallerDiv = "<div class='container'><div class='floatLeft'>Some message</div></div>";
var smallerDivRight = "<div class='container'><div class='floatRight'>Some message</div></div>";
var alignRight = 0;
$('#addMore').click(function() {
var elem = $('#largerDiv');
if(alignRight == 0) {
elem.append(smallerDiv);
} else {
elem.append(smallerDivRight);
}
elem.scrollTop(elem[0].scrollHeight);
alignRight = (alignRight + 1)%2;
});
});
.container {
width: 100%;
display: inline-block;
padding: 4px;
border: 1px solid green;
}
.floatRight {
float: right;
}
.floatLeft {
float: left;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="largerDiv" class="largerDiv">
</div>
<input type="button" id="addMore" value="Add more">
</body>
</html>
I am trying to create a toggle function with JavaScript (not jQuery).
I have created an ID named box, and a class within the ID named box-open.
The width of the ID box is 100px.
The width of box-open is set to 1000px.
When I try to use my code I get this error, that displays “Cannot set property 'display' of undefined”.
I have tried writing the code a couple of different ways, but I always seem to get the same error in the console.
function toggle(open) {
box = document.getElementById('box').style.display = 'block';
if (open == true) {
box.style.display = 'none';
boxOpen = document.getElementsByClassName('box-open').style.display = 'block';
} else {
box.style.display = 'block';
boxOpen.style.display = 'none';
}
}
#box {
width: 100px;
height: 100px;
background: gold;
text-align: center;
display: block;
}
.box-open {
width: 50px;
height: 50px;
background: green;
display: none;
}
<div id="box" class="box-close"></div>
<button type="button" onClick="toggle()">click me</button>
This is a link to my codepen, where you can find the code
http://codepen.io/2bu/pen/YNYjjR
I am not sure but this line:
box = document.getElementById('box').style.display = 'block'
should be maybe
box = document.getElementById('box');
Your function is not very flexible because it can only toggle a specific box with ID "box". Instead you could pass in a selector for the element you want to toggle:
<div id="box" class="box-close"></div>
<button type="button" onClick="toggle('#box')">click me</button>
And then in your Javascript:
function toggle(selector) {
var box = document.querySelector(selector);
var isOpen = box.style.display === "block";
box.style.display = isOpen ? "none" : "block";
}
This way you can use the same toggle function to toggle any box you like.
Here is a simple jQuery implementation. Just change the .box-toggled class to be whatever you actually want. It also uses eventListener to keep your HTML cleaner.
https://jsfiddle.net/segbxnh3/3/
var box = document.querySelector('#box');
var toggleButton = document.querySelector('button');
toggleButton.addEventListener('click', function() {
$(box).toggleClass('box-toggled');
});
UPDATE:
Here is a vanilla JS implementation.
https://jsfiddle.net/segbxnh3/5/
var box = document.querySelector('#box');
var toggleButton = document.querySelector('button');
toggleButton.addEventListener('click', function() {
if (box.classList.contains('box-toggled')) {
box.classList.remove('box-toggled');
} else {
box.classList.add('box-toggled');
}
});
You can use like this.
function toggle(open, element){
box = document.getElementById('box');
boxOpen = document.getElementById('box-open');
if ( open == true) {
box.style.display = 'none';
boxOpen.style.display = 'block';
element.setAttribute('onclick', "toggle(false, this);");
}else{
box.style.display = 'block';
boxOpen.style.display = 'none';
element.setAttribute('onclick', "toggle(true, this);");
}
}
*{
margin:0px;
padding:0px;
font-family: 'Montserrat', sans-serif;
}
#box{
width:100px;
height: 100px;
background: gold;
text-align: center;
display:block;
}
#box-open{
width:50px;
height: 50px;
background: green;
display: none;
}
<div id="box"></div>
<div id="box-open"></div>
<button type="button" onClick="toggle(true, this);" >click me </button>
Also, check this solution
I'm trying to work on a webpage that allows users to write their own notes for a school project, and my idea was to let them bold/italicize/underline their text using buttons. As of now, the buttons are working, but they bold/italicize/underline everything inside the text area. Instead, I want it to work in such a way that only the text they highlight gets bold/italicized/underlined.
I'd also like to know how to make it so that when they click the bold button, text that they type from then onwards will come out bold, and when they click it again, the text that is typed from then onwards will come out normal.
<script type="text/javascript">
function boldText(){
var target = document.getElementById("TextArea");
if( target.style.fontWeight == "bolder" ) {
target.style.fontWeight = "normal";
} else {
target.style.fontWeight = "bolder";
}
}
function italicText(){
var target = document.getElementById("TextArea");
if( target.style.fontStyle == "italic" ) {
target.style.fontStyle = "normal";
} else {
target.style.fontStyle = "italic";
}
}
function underlineText(){
var target = document.getElementById("TextArea");
if( target.style.textDecoration == "underline" ) {
target.style.textDecoration = "none";
} else {
target.style.textDecoration = "underline";
}
}
</script>
You can use execCommand(). This API was meant for developing text editors. The 3 buttons utilize the very versatile execCommand() and the writing element is a plain div enabled with the attribute contenteditable.
SNIPPET
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style>
:root {
font: 400 2ch/1.25 Consolas;
}
body {
font-size: 2ch
}
#editor {
height: 100px;
width: 375px;
margin: 10px auto 0;
}
fieldset {
margin: 2px auto 15px;
width: 375px;
}
button {
width: 5ex;
text-align: center;
padding: 1px 3px;
}
</style>
</head>
<body>
<fieldset id="editor" contenteditable="true">
The quick brown fox jumped over the lazy dog.
</fieldset>
<fieldset>
<button class="fontStyle" onclick="document.execCommand('italic',false,null);" title="Italicize Highlighted Text"><i>I</i>
</button>
<button class="fontStyle" onclick="document.execCommand( 'bold',false,null);" title="Bold Highlighted Text"><b>B</b>
</button>
<button class="fontStyle" onclick="document.execCommand( 'underline',false,null);" title='Underline Highlighted Text'><u>U</u>
</button>
</fieldset>
</body>
</html>
Textarea does not allow such things. I would suggest you to use something like ckeditor. It will do the job for you neatly. But if you still want to do it yourself, you need to use a div with contenteditable tag.
Good Luck !
With textarea you cannot achieve that, use divs instead, so you can do something like this:
$(document).ready(function(){
$('.boldText').click(function(){
$('.container').toggleClass("bold");
});
$('.italicText').click(function(){
$('.container').toggleClass("italic");
});
$('.underlineText').click(function(){
$('.container').toggleClass("underline");
});
});
div.container {
width: 300px;
height: 100px;
border: 1px solid #ccc;
padding: 5px;
}
.bold{
font-weight:bold;
}
.italic{
font-style :italic;
}
.underline{
text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container" contentEditable></div><br/>
<input type="button" class="boldText" value="Bold">
<input type="button" class="italicText" value="Italic">
<input type="button" class="underlineText" value="Underline">