I am trying to create multiple boxes along the top of the page using javascript. I have one box but cannot figure out how to get multiple along the top of the page. This is what I have so far:
<html>
<head>
<title>Boxes on Boxes on Boxes</title>
<link rel="stylesheet" type="text/css" href="boxes.css">
<script language="JavaScript">
el=document.getElementById("box1");
width=window.innerWidth-50;
height=window.innerHeight-50;
el.style.left=width*Math.random();
el.style.top=height*Math.random();
el=document.getElementById("box2");
width=window.innerWidth-50;
height=window.innerHeight-50;
el.style.right=width*Math.random();
el.style.top=height*Math.random();
el=document.getElementById("box3");
width=window.innerWidth-50;
height=window.innerHeight-50;
el.style.middle=width*Math.random();
el.style.top=height*Math.random();
</script>
</head>
<body>
<div id="box1">
First box
</div>
<div id="box2">
Second box
</div>
<div id="box3">
Third box
</div>
</body>
</html>
Here is the CSS that I have:
#box1{
background-color:orange;
padding:5px;
width:50px;
height:50px;
position:absolute;
left=100px;
top=100px;
}
#box2{
background-color:blue;
padding:5px;
width:50px;
height:50px;
position:absolute;
left=100px;
top=100px;
}
#box3{
background-color:green;
padding:5px;
width:50px;
height:50px;
position:absolute;
left=100px;
top=100px;
}
You need to either move the <script> element to the end or wrap your code in a DOM ready or onload handler, because otherwise getElementById() won't find any elements because they won't have been parsed yet.
Then you need to include a unit (e.g., "px") in the left and top style properties.
Also there's no need to recalculate the width and height for each box since you're doing the same calculation for each. (And you should declare your variables with var, but although good practice that isn't essential to make it work.)
Here's a working version:
var el=document.getElementById("box1");
var width=window.innerWidth-50;
var height=window.innerHeight-50;
el.style.left=width*Math.random() + "px";
el.style.top=height*Math.random() + "px";
el=document.getElementById("box2");
el.style.right=width*Math.random() + "px";
el.style.top=height*Math.random() + "px";
el=document.getElementById("box3");
el.style.middle=width*Math.random() + "px";
el.style.top=height*Math.random() + "px";
Demo: http://jsfiddle.net/m3Gg3/
Also the left and top properties in your CSS should use : not =.
It is difficult to understand what you want, maybe this?.
<script>
window.onload = function() {
var titles = ["First box", "Second box", "Third box"]
var width=window.innerWidth-50
var height=window.innerHeight-50-120
for (var i = 0; i < titles.length; i++) {
var el = document.createElement('div')
console.log(el)
el.innerHTML = titles[i]
el.style.position = "absolute"
el.style.border = "1px solid rgb(0,0,0)"
el.style.left= (width / titles.length) * i
el.style.top=0
el.style.width = width / titles.length
el.style.height = "120px"
document.body.appendChild(el);
}
for (var i = 0; i < titles.length; i++) {
var el = document.createElement('div')
console.log(el)
el.innerHTML = titles[i]
el.style.position = "absolute"
el.style.border = "1px solid rgb(0,0,0)"
el.style.left=0
el.style.top=(height / titles.length) * i + 120
el.style.width = "120px"
el.style.height = height / titles.length
document.body.appendChild(el);
}
}
</script>
<html>
<head>
<title>Boxes on Boxes on Boxes</title>
<style type="text/css">
#box_group1, #box_group2, #box_group3, #box_group4, #textbook {
position:absolute;
left:100px;
top:100px;
}
#box1, #box2, #box3, #box10, #box11, #box12 {
padding:5px;
width:50px;
height:50px;
cursor:pointer;
float:left;
}
#box4, #box5, #box6, #box7, #box8, #box9 {
padding:5px;
width:50px;
height:50px;
cursor:pointer;
}
#box1, #box4, #box7, #box10{
background-color:orange;
}
#box2, #box5, #box8, #box11 {
background-color:blue;
}
#box3, #box6, #box9, #box12{
background-color:green;
}
#box4, #box7 {
font-family: Arial;
}
#box5, #box8 {
font-family: Courier;
}
#box6, #box9 {
font-family: Tahoma;
}
#textbook {
padding: 5px;
background-color:red;
}
</style>
<script language="JavaScript">
width=window.innerWidth;
height=window.innerHeight;
function boxes() {
document.getElementById("box_group1").style.left=(width-document.getElementById("box_group1").offsetWidth)/2;
document.getElementById("box_group2").style.top=(height-document.getElementById("box_group2").offsetHeight)/2;
document.getElementById("box_group3").style.left=width-100-document.getElementById("box_group3").offsetWidth;
document.getElementById("box_group3").style.top=(height-document.getElementById("box_group3").offsetHeight)/2;
document.getElementById("box_group4").style.left=(width-document.getElementById("box_group4").offsetWidth)/2;
document.getElementById("box_group4").style.top=height-100-document.getElementById("box_group4").offsetHeight;
document.getElementById("textbook").style.left=(width-document.getElementById("textbook").offsetWidth)/2;
document.getElementById("textbook").style.top=(height-document.getElementById("textbook").offsetHeight)/2;
}
function colorChange(field,group) {
switch (group) {
case 1:
document.getElementById("box2").style.backgroundColor = field.innerText;
break;
case 4:
document.getElementById("box11").style.backgroundColor = field.innerText;
break;
}
}
function fontChange(field,group) {
switch (group) {
case 2:
document.getElementById("box5").style.fontFamily = field.innerText;
break;
case 3:
document.getElementById("box8").style.fontFamily = field.innerText;
break;
}
}
</script>
</head>
<body onload="boxes()">
<div id="box_group1">
<div id="box1" onclick="colorChange(this,1)">
Orange
</div>
<div id="box2" onclick="colorChange(this,1)">
Blue
</div>
<div id="box3" onclick="colorChange(this,1)">
Green
</div>
</div>
<div id="box_group2">
<div id="box4" onclick="fontChange(this,2)">
Arial
</div>
<div id="box5" onclick="fontChange(this,2)">
Courier
</div>
<div id="box6" onclick="fontChange(this,2)">
Tahoma
</div>
</div>
<div id="box_group3">
<div id="box7" onclick="fontChange(this,3)">
Arial
</div>
<div id="box8" onclick="fontChange(this,3)">
Courier
</div>
<div id="box9" onclick="fontChange(this,3)">
Tahoma
</div>
</div>
<div id="box_group4">
<div id="box10" onclick="colorChange(this,4)">
Orange
</div>
<div id="box11" onclick="colorChange(this,4)">
Blue
</div>
<div id="box12" onclick="colorChange(this,4)">
Green
</div>
</div>
<div id="textbook">Textbook</div>
</body>
</html>
Try this using jQuery :
Here the boxes should be created dynamically and without naming the id's hardcoded it also should be done in a better way with your code. It's easier now as you are creating 4 boxes, what about 100 or more. So it's wise to always take the better way to maintain scalability of our work.
HTML :
<div id="mainDiv">
</div>
CSS :
// general css for all divs inside mainDiv
#mainDiv div{
padding:5px;
width:50px;
height:50px;
position:absolute;
left=100px;
top=100px;
float : left;
}
jQuery :
$(document).ready(function(){
// taking a color array
var colorArray = new Array("red", "green", "gray", "blue");
// loop through as many boxes you want to create
for(var i = 1; i <= colorArray.length; i++){
$("#mainDiv").append("<div id=Box" + i + "></div>");
//changing the background-color
$("#Box"+ i).css("background-color", colorArray[i-1]);
}
});
Demo
Here's Another thread explaining similar Case,
And It's Solution
Related
I am trying to wrap my head around prototype in javascript as well as getting used to the value of this. Currently I have this set to .cf--modal but when I use this to set a variable it does not seem to work. As this is my first of many functions I really don't want to hit the document and would rather target "this" within the Modal Toggle function.
How can I change the modal_toggle function so that document.getElementById and document.getElementsByClassname can be replaced with this.find or something along those lines.
$(function(){
$('.cf--modal').each(function(){
let cf = new ContactForm($(this));
});
});
var ContactForm = function(this$obj){
this.$obj = this$obj;
this.init();
}
ContactForm.prototype.init = function init(){
this.modal_toggle();
};
ContactForm.prototype.modal_toggle = function modal_toggle(){
let cfCTA = document.getElementsByClassName("modal-trigger")[0];
let cfModal = document.getElementsByClassName("cf--modal")[0];
let cfModalClose = document.getElementsByClassName("close-cf-modal")[0];
cfCTA.onclick = function () {
cfModal.style.display = "block";
}
cfModalClose.onclick = function(){
cfModal.style.display = "none";
}
}
.cf{
width:1000px;
margin:40px auto;
}
.inner-container{
padding:12px 24px;
border:1px solid grey;
border-radius:5px;
display:flex;
align-items:center;
justify-content:center;
}
.cf-block{
flex:1
}
/* Modal Styling */
.cf--modal{
width:375px;
height:200px;
position:absolute;
right:36px;
bottom:0;
border:1px solid grey;
display:none;
}
.close-cf-modal{
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Contact Us
<section class="cf">
<div class="cf-container">
<form>
<div class="inner-container">
<div class="cf-block">
<div class="cf-label">First Name</div>
</div>
<div class="cf-block">
<div class="cf-label">Last Name</div>
</div>
<div class="cf-block">
<div class="cf-label">Email</div>
</div>
<div class="cf-block">
<div class="cf-label">Message</div>
</div>
<div class="cf-block">
<div class="cf-label">Submit</div>
</div>
</div>
</form>
</div>
</section>
<section class="cf--modal">
<span class="close-cf-modal">close</span>
</section>
You should use this.$obj to refer to the modal element for the current ContactForm
ContactForm.prototype.modal_toggle = function modal_toggle() {
let cfModal = this.$obj;
let cfCTA = $(".modal-trigger");
let cfModalClose = cfModal.find(".close-cf-modal");
cfCTA.on("click", function() {
cfModal.show();
})
cfModalClose.on("click", function() {
cfModal.hide();
});
}
Edit: the issue seems to only appear on OSX Mavericks w/ Latest Google Chrome (for me)
I have an event log that posts messages from the top down, and with every message, small black lines are appearing at the bottom right of each message and I can't figure out why.
Here is a working version of my game, click "Hunt for Blood" and when a few event log messages stack up, you'll see what I'm talking about.
http://codepen.io/RUJordan/pen/dcwLC
Here's a picture as well:
Here is my CSS relevant to the log div and msg div
.msg {
float: left;
width:auto;
overflow:auto;
padding: 5px;
font-size: small;
}
.column {
padding:3px;
float: left;
width:30%;
border:1px solid black;
background-color:#222222;
} /* Hidden Elements */
.hp, .cycle, .gold, .log, .middleCol,
.battle, .hiddenCounter {
display:none;
}
And here is my HTML schema.
<!DOCTYPE html>
<html>
<head>
<title>A Vampire's Hunt</title>
<link rel="stylesheet" href="vamp.css">
</head>
<body>
<h1 class="title">A Vampire's Hunt</h1>
<div class="main">
<div id="stats" class="column">
<div>
<h3 class="miniTitle">Stats</h3>
<hr />
<span id="spanCounter" class="hiddenCounter noRed">You have been dead for <span id="counter">0</span> hour<span id="singularHours" class="noRed"></span>..</span>
<span id="spanInitMsg" class="spanInitMsg noRed">You are dead!</span>
</div>
<div id="divCycle" class="cycle">It is currently: <span id="cycle"></span></div>
<div>Blood: <span id="blood">0</span></div>
<div class="hp" id="hpDiv">HP: <span id="hp">20</span></div>
<div class="gold" id="goldDiv">Gold: <span id="gold">0</span></div>
<h3 class="miniTitle">Actions</h3>
<hr />
</div>
<div id="middleCol" class="column middleCol">
<div id="shop" class="shop">
<h4 class="miniTitle">A Dark Alleyway</h4>
<hr />
Herp Derp Derp
</div>
<div id="battle" class="battle">
<hr />
</div>
</div>
<div id="log" class="log column">
<h3 class="miniTitle">Event Log</h3>
<hr />
<div id="msg" class="msg"></div>
</div>
</div>
<script src="player.js"></script>
<script src="element.js"></script>
<script src="engine.js"></script>
<script src="vampire.js"></script>
<div class="footer">
Follow This Project on Github!
</div>
</body>
</html>
I do not think the JavaScript is the culprit, but just in case, here is the event log function, along with the functions it calls.
eventMsg : function(txt) {
this.addBorder("log");
this.showElement("log","block");
var msg = document.getElementById("msg");
txt = "-"+txt+"<br />"+msg.innerHTML;
msg.innerHTML = txt;
},
addBorder : function(id) {
document.getElementById(id).style.border = "1px solid black";
},
showElement : function(id,style) {
document.getElementById(id).style.display = style;
},
This appears to work on FireFox and Safari, but not on Chrome.
Try using display: inline-table on div id "log". Note that it uses inline CSS that is reset on each click, so you'll have to overwrite this, otherwise it won't work.
EDIT : display: table should work too.
The lines seem to appear because you had border-width: 0 0 1px 0; instead of this:
hr:before {
border-width: 0;
}
Although, I have not tested on other browsers, but it seems to work with chrome.
Chrome Version 31.0.1650.57 m
fixed the line issue by changing:
eventMsg : function(txt) {
this.addBorder("log");
this.showElement("log","block");
var msg = document.getElementById("msg");
txt = "-"+txt+"<br />"+msg.innerHTML;
msg.innerHTML = txt;
},
addBorder : function(id) {
document.getElementById(id).style.border = "1px solid black";
},
showElement : function(id,style) {
document.getElementById(id).style.display = style;
},
to:
eventMsg : function(txt) {
this.showElement("log","block");
var msg = document.getElementById("msg");
txt = "-"+txt+"<br />"+msg.innerHTML;
msg.innerHTML = txt;
},
addBorder : function(id) {
document.getElementById(id).style.border = "1px solid black";
},
showElement : function(id,style) {
document.getElementById(id).style.display = style;
},
Have another potential fix for you, change the css from:
.msg {
float: left;
width:auto;
overflow:auto;
padding: 5px;
font-size: small;
}
to
.msg {
float: left;
width:100%;
overflow:auto;
padding: 5px;
font-size: small;
}
I would like to know how to resize a textbox to prevent text nearby it from overflowing.
I have 3 elements in a row, a label, a text box, and a button. the label however, can have words of varying lengths. if the word is too long it will move the text input too far to the side and the button will overflow onto the next line. to preserve the style of the page, I would prefer that the button stays on the same line as the other 2 elements.
I am trying to get the text box to shrink only as much as necessary to allow room for the other elements.
can I do this with JQuery?
Edit: here's the JFiddle thing:
http://jsfiddle.net/425ve/2/
and here's the main code:
<html>
<head>
<style>
body{
background-color:#000000;
color:#cccccc;
}
#chatbox{
width:100%;
height:85%;
border-style:solid;
border-color:#000000;
overflow:auto;
}
#mainchat{
width:82%;
float:left;
margin:0;
}
#sidebar{
float:left;
height:97%;
width:17%;
border-style:dashed;
border-width:1px;
border-color:#AAAAAA;
border-right:0;
border-top:0;
border-bottom:0;
overflow:auto;
}
#topbar{
border-style:dashed;
border-width:1px;
border-color:#AAAAAA;
border-left: 0;
border-top: 0;
float:left;
width:82%;
}
a{
color:#cccccc;
text-decoration:none;
}
a:hover{
color:#CCCCEE;
background-color:111122;
}
#topbarname{
float:right;
}
#message{
width: 90%;
background-color:#000000;
border-color:#CCCCCC;
border-style:solid;
border-width: 1px;
color:CCCCCC;
}
#submitbutton{
background-color:#000000;
border-color:#CCCCCC;
border-style:solid;
border-width: 1px;
color:#CCCCCC;
}
</style>
<script>
function getCookie(name) {
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
}
else
{
begin += 2;
var end = document.cookie.indexOf(";", begin);
if (end == -1) {
end = dc.length;
}
}
return unescape(dc.substring(begin + prefix.length, end));
}
function doSomething() {
var myCookie = getCookie("IceID");
if (myCookie == null) {
window.location="login.php"
}
else {
// do cookie exists stuff
}
}
doSomething();
</script>
</head>
<body>
<div id="topbar">
| Information | Logs | characters | Profile | Private logs | Messages | Logout |
</div>
<div id="mainchat">
<div id="chatbox">
<?php
include("getpost.php");
//improve this with AJAX!
?>
</div>
<div id="input">
<form id="inputchat">
<b id="name">
<?php
echo $_COOKIE['IceID'];
?>
</b>
<input type="text" name="message" id="message"></input>
<input type="submit" id="submitbutton" value="say"></input>
</form>
</div>
<div id="utools">
</div>
</div>
<div id="sidebar">
<div id="title">
A
</div>
<div id="list">
</div>
</div>
</body>
</html>
Edit:to clarify, the name doesn't actively change while the page is being used(only right before being displayed), but it will be different depending on who loads the page. their username fits into that label.
You don't need jQuery. jQuery could make it much simpler though. I prefer vanilla.
var left = document.getElementById('name')
var resizable = document.getElementById('message')
var right = document.getElementById('submitbutton')
realign()
window.addEventListener('resize', realign)
function realign() {
resizable.style.width = '0'
var extraWidth = getWidth(resizable) // Measure the border and padding on it's own.
resizable.style.width = getWidth(resizable.parentNode) - getWidth(left) - getWidth(right)
function getWidth(element) { // Superior to offsetWidth because it measures fractions of a pixel which is even more relevant when using the browser zoom feature.
var rect = element.getBoundingClientRect() // A accurate way to measure location on the screen.
return rect.right - rec.left // The accurate width.
}
}
The only adjustment you need would be to fix my typo(s) if I made any and then if you want to support older versions of IE, you need to use the alternative to addEventListener, Google it.
I am trying to append a new "app" to my "AppList" when a button is clicked.
JS
$(".appCreate" ).click(newApp);
function newApp() {
var facebookTemp = $("#facebook-template").html();
var appName = $(this).data("appName");
var appSize = $(this).data("appSize");
var appTemp = $(this).data("appTemp");
$("<div class=\"app" + appName + appSize + "\"></div>").html(appTemp).appendTo(".AppList");
};
HTML
<body>
<section id="AppBox">
<div class="AppList">
<!-- == Facebook == -->
<div id="facebook-template">
<div class="App facebook Size170x290">
<h1>Hello Test</h1>
</div>
</div>
</div>
</section>
<!-- == Settings == -->
<section id="dialog-settings" class="dialog" title="Settings">
<button data-appName="facebook" data-appSize="Size170x290" data-appTemp="facebookTemp" class="appCreate">
Facebook</button>
</section>
</body>
CSS
#facebook-template {
display: none;
}
.facebook {
background:linear-gradient(to bottom, #133783 0px, #102E6D 100%) repeat scroll 0 0 #133783;
}
.facebook { top:120px; left:0; }
#AppBox {
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
margin:0;
}
.AppList {
position:absolute;
height:100%;
width:100%;
margin:0;
padding:0;
}
.App {
position:absolute;
display:block;
margin:5px;
padding:0;
box-shadow:0 0 5px 1px black;
color:#FFFFFF;
cursor:move;
}
.Size170x290 {height:170px;width:290px;}
Basically the thing isn't showing up and i don't know whats causing it.
You lost the context of your click handler.
This was an obvious first mistake:
$(".appCreate" ).click(newApp);
Second mistake is data names. Change to:
var appName = $(this).data("appname");
Notice the case. Convert all names to lower case.
I also added handlebars.js because of the conversation in the comments.
New working code:
$(".appCreate" ).click(newApp);
function newApp() {
var facebookTemp = $("#facebook-template").html();
var appName = $(this).data("appname");
var appSize = $(this).data("appsize");
var appTemp = $(this).data("apptemp");
var template = Handlebars.compile(facebookTemp);
var html = template({
app : appName,
facebook : appTemp,
size : appSize
});
$(".AppList").append(html);
};
Live DEMO && CODE.
CSS
body{
background:#000;
width:320px;
height:480px;
}
.view
{
width:320px;
height:480px;
background:#0066CC;
overflow:hidden;
visibility:hidden;
position:absolute;
left:0;top:0;
z-index:8;
}
.o{background:#FF9900;}
.main{ visibility:visible;}
.swapper {
width:640px;
height:480px;
overflow:hidden;
position:absolute;
left:0;top:0;
visibility:hidden;
z-index:9;
}
.on{position:static; float:left; visibility:visible;}
.btn {height:50px; width:125px; font-size:16px; background:#000; color:#FFF;}
JavaScript
function $(id)
{
return document.getElementById(id);
}
function clean()
{
alert("1");
ele = $("swapper");
ele.removeEventListener("webkitTransitionEnd" , clean , true);
//ele.style.webkitTransition = "height 0s";
ele.style.webkitTransform = "translate3d(0px,0,0)";
ele.zIndex = "7";
ele.style.visibility = "hidden";
//currentView = nextView;
}
function show(current , next)
{
alert(current+ " " + next);
//nextView = next;
s = $("swapper");
s.innerHTML = "";
nel = $(next);
cel = $(current);
v1 = cel.cloneNode(true);v2 = nel.cloneNode(true);
v1.id = "v1"; v1.onclick = ""; v1.className += " on";
v2.id = "v2"; v2.onclick = ""; v2.className += " on";
s.appendChild(v1); s.appendChild(v2);
s.style.webkitTransition = "-webkit-transform 1s ease";
s.style.zIndex = "9";
s.style.visibility = "visible";
nel.style.visibility = "visible";
cel.style.visibility = "hidden";
//s.style.left = "0px";
s.addEventListener("webkitTransitionEnd" , clean, true);
s.style.webkitTransform = "translate3d(-320px,0,0)";
//setTimeout(clean , 1000);
}
HTML
<div id="swapper" class="swapper"></div>
<div id="container">
<div id="set1">
<div id="main" class="view main o"><h1>1</h1><span class="btn" onclick="show('main','2');">Next</span></div>
<div id="2" class="view"><h1>2</h1><span class="btn" onclick="show('2','3');">Next</span></div>
<div id="3" class="view o"><h1>3</h1><span class="btn" onclick="show('3','4');">Next</span></div>
<div id="4" class="view"><h1>4</h1><span class="btn" onclick="show('4','main');">Next</span></div>
</div>
</div>
</body>
i am trying to create sliding panels , but this javascript function when called is executed with previous values once and then with the new values.
This kind of menu is called a horizontal accordion. There are countless simple plugins for jQuery -- why reinvent the wheel? Many examples available:
Examples
haccordion, a simple horizontal accordion plugin for jQuery
jQuery Simple Horizontal Accordion
30 jQuery Accordion Menus, Tutorials And Best Examples