Selecting and Adding Functions to Div's via For Loop

Selecting and Adding Functions to Div's via For Loop - javascript

I wanted to select divs quickly so i wrote a for loop that select all divs and add functions to them quickly instead of "onClick='blahblah'" method. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Strategy Game Dev Test</title>
<meta charset="utf-8" />
<script type="text/javascript">
function illu_area(){
alert("test");
}
function everything(){
for(var test_id = 0; test_id < 7; test_id++){
document.getElementById("t"+test_id).addEventListener("click", illu_area());
}
}
</script>
<style type="text/css">
* { margin: 0px; padding: 0px; font-family: Tahoma}
.container_main {
margin: 10px;
width: 300px;
height: 300px;
background-color: red;
position: relative;
}
.territory_type1 {
width: 100px;
height: 100px;
position: absolute;
}
.territory_type2_horizontal {
width: 200px;
height: 100px;
position: absolute;
}
.territory_type2_vertical {
width: 100px;
height: 200px;
position: absolute;
}
#t6 {
background-color: blue;
left: 200px;
}
#t5 {
background-color: lightblue;
left: 100px;
}
#t4 {
background-color: green;
}
#t3 {
background-color: turquoise;
top: 200px;
}
#t2 {
background-color: lightgreen;
top: 200px;
left: 200px;
}
#t1 {
background-color: brown;
top: 100px;
left: 200px;
}
#t0 {
background-color: yellow;
top: 100px;
left: 100px;
}
.grid {
height: 100px;
width: 100px;
position: absolute;
top :0px;
}
#t3_g2 {
left: 100px;
}
#t4_g2 {
top: 100px;
}
</style>
</head>
<body onLoad="everything()">
<div class="container_main">
<div id="t0" class="territory_type1" data-xcoor="0" data-ycoor="0">
Origin
</div>
<div id="t1" class="territory_type1" data-xcoor="1" data-ycoor="0">
1
</div>
<div id="t2" class="territory_type1" data-xcoor="1" data-ycoor="-1">
2
</div>
<div id="t3" class="territory_type2_horizontal">
3
<div class="grid" id="t3_g1" data-xcoor="-1" data-ycoor="-1"></div>
<div class="grid" id="t3_g2" data-xcoor="0" data-ycoor="-1"></div>
</div>
<div id="t4" class="territory_type2_vertical">
4
<div class="grid" id="t4_g1" data-xcoor="-1" data-ycoor="1"></div>
<div class="grid" id="t4_g2" data-xcoor="-1" data-ycoor="0"></div>
</div>
<div id="t5" class="territory_type1" data-xcoor="0" data-ycoor="1">
5
</div>
<div id="t6" class="territory_type1" data-xcoor="1" data-ycoor="1">
6
</div>
</div>
</body>
</html>
My problem is: When i open this html file or refresh the page, alert messages appears (six times) immediately. I want it to alert when i click a grid...
Note:
it works when i do this:
function everything(){
for(var test_id = 0; test_id < 7; test_id++){
document.getElementById("t"+test_id).addEventListener("click", function(){alert("test");});
}
}
But this isnt going to be useful in future i think :P
Help me!

You have to pass your function - omit the ()
.addEventListener("click", illu_area);
Having the () executes the function immediately.

Related

Nothing returning when I am trying to get the value of a property of an HTML element [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I am trying to go back to when I learned javascript to make a game of pong. I am trying to get the "left" value to see how far the playArea is from the left to set the position of the ball in the middle.
The script is located at the bottom of the body tag.
Where I am trying to call the resetGame function just to test to see if I can change the balls position to be in the center of the play area. I am trying to log the value of the playArea's left value and it is returning it as if it is nothing. (See below)
It should say "Value of playArea's left: 150px" or maybe just the 150 but it is just empty
The live server is just so i can run it on my browser. Any help would be great as to why this is not returning anything. Thanks!
var ball = document.getElementById('ball');
function resetGame() {
var box = document.getElementById('playArea');
console.log("Value of playArea's left: " + getStyle('playArea',
'left'));
ball.style.left = ((box.style.left + (box.style.left +
box.style.width)) / 2) + "px";
// ball.style.left = 0 + "px";
}
function getStyle(id, property) {
// console.log(id);
// console.log(tmp.style.left);
return document.getElementById(id).style[property];
}
#playArea{
background-color: #000000;
border: 2px solid white;
width: 1000px;
height: 75%;
position: fixed;
left: 150px;
top: 20px;
}
body{
background-color: black;
}
#ball{
background-color: white;
border-radius: 100%;
height: 30px;
width: 30px;
position: relative;
left: 50%;
top: 50%;
}
#start{
height: 50px;
width: 100px;
background-color: white;
position: fixed;
top: 80%;
left: 500px;
}
#reset{
height: 50px;
width: 100px;
background-color: white;
position: fixed;
top: 80%;
left: 700px;
}
.insidebuttons{
font-size: 20px;
padding: 13px;
text-align: center;
font-family: sans-serif;
}
.insidebuttons:hover{
cursor: pointer;
}
.paddle{
width: 30px;
height: 100px;
position: fixed;
background-color: white;
top: 33%
}
#paddleLeft{
left: 170px;
}
#paddleRight{
left: 1105px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Pong</title>
</head>
<body>
<div class="outer" id="playArea">
<div class="inner" id="ball"></div>
<div class="paddle" id="paddleLeft"></div>
<div class="paddle" id="paddleRight"></div>
</div>
<div type="button" name="start" id="start" onclick="startGame()">
<div class="insidebuttons">Start</div>
</div>
<div type="button" name="reset" id="reset" onclick="resetGame()">
<div class="insidebuttons">Reset</div>
</div>
<div class="overlay" id="overlay"></div>
<script type="text/javascript" src="functions.js"></script>
</body>
</html>

You cannot get the value directly from the style of the element. For values coming from external css stylesheets, you need to use getComputedStyle() function to get the actual value coming from the stylesheet. The returned value of getStyle() will be in px value.
var ball = document.getElementById('ball');
function resetGame() {
var box = document.getElementById('playArea');
console.log("Value of playArea's left: " + getStyle('playArea',
'left'));
ball.style.left = ((box.style.left + (box.style.left +
box.style.width)) / 2) + "px";
// ball.style.left = 0 + "px";
}
function getStyle(id, property) {
// console.log(id);
// console.log(tmp.style.left);
//return document.getElementById(id).style[property];
let el = document.getElementById(id);
return getComputedStyle(el).getPropertyValue(property); // getComputedStyle will get the actual value from the stylesheet
}
#playArea {
background-color: #000000;
border: 2px solid white;
width: 1000px;
height: 75%;
position: fixed;
left: 150px;
top: 20px;
}
body {
background-color: black;
}
#ball {
background-color: white;
border-radius: 100%;
height: 30px;
width: 30px;
position: relative;
left: 50%;
top: 50%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Pong</title>
</head>
<body>
<div class="outer" id="playArea">
<div class="inner" id="ball"></div>
<div class="paddle" id="paddleLeft"></div>
<div class="paddle" id="paddleRight"></div>
</div>
<div type="button" name="start" id="start" onclick="startGame()">
<div class="insidebuttons">Start</div>
</div>
<div type="button" name="reset" id="reset" onclick="resetGame()">
<div class="insidebuttons">Reset</div>
</div>
<div class="overlay" id="overlay"></div>
<script type="text/javascript" src="functions.js"></script>
</body>
</html>

Trying to change colour of a button to show which images is displayed with javascript

I'm trying to change colour of a button to show which images is displayed with JavaScript. Something similar to :Active in CSS. I've been looking for hours, I've managed to change just about every other element on the page except for the one I actually want to change, all I need is to change the background color of the clicked button and then revert back to original color a different button is clicked. Any help would be much appreciated.
<! doctype html>
<html>
<head>
<title>Task 2</title>
<!--styles-->
<style>
body {
margin: 0;
background-color: mediumpurple;
}
header {
margin: auto;
width: 90%;
background-color: orangered;
height: 50px;
text-align: center;
}
#content {
width: 80%;
background-color: green;
margin: auto;
}
nav {
float: left;
background-color: greenyellow;
width: 30%;
height: 750px;
text-align: center;
}
#pictureFrame {
float: left;
width: 70%;
height: 750px;
background-color: deeppink;
}
footer {
margin: auto;
width: 90%;
background-color: orangered;
height: 50px;
text-align: center;
clear: both;
}
.button {
margin-top: 100px;
background-color: white;
border-radius: 20px;
width: 70%;
height: 75px;
}
#img {
margin-top: 19%;
margin-left: 35%;
width: 300px;
height: 300px;
}
</style>
<script type="text/javascript">
function pic1() {
document.getElementById("img").src = "images/starbucks.png";
}
function pic2() {
document.getElementById("img").src = "images/muffin.png";
}
function pic3() {
document.getElementById("img").src = "images/costa.png";
}
</script>
</head>
<body>
<header>
<h1>Coffee</h1>
</header>
<section id="content">
<div id="pictureFrame">
<img src="" id="img" />
</div>
<nav>
<button id="button1" class="button" onclick="pic1()">Starbucks</button>
<br/>
<br/>
<button id="button2" class="button" onclick="pic2()">Muffin Break</button>
<br/>
<br/>
<button id="button3" class="button" onclick="pic3()">Costa</button>
</nav>
</section>
<footer>
<h1>This is a footer</h1>
</footer>
</body>
</html>

By clicking on each button simply change the background of that button with style.background='color'. Also reset the color of other two buttons. Simply create a function to reset the background color.
<script type="text/javascript">
function reset(){
document.getElementById("button1").style.background='white';
document.getElementById("button2").style.background='white';
document.getElementById("button3").style.background='white';
}
function pic1() {
document.getElementById("img").src = "images/starbucks.png";
reset();
document.getElementById("button1").style.background='red';
}
function pic2() {
document.getElementById("img").src = "images/muffin.png";
reset();
document.getElementById("button2").style.background='red';
}
function pic3() {
document.getElementById("img").src = "images/costa.png";
reset();
document.getElementById("button3").style.background='red';
}
</script>
Fiddle : https://jsfiddle.net/tintucraju/6dkt0bs2/

Combine Circletype.js with jQuery animate

I want to use Circletype.js in conjunction with jQuery .animate() to cause text to curve around my logo/image as I animate the width of its container.
I am applying .circleType({fluid:true}); to the #demo4 div. This, along with the correct css, causes the text path to bend to fit its container (#resize).
Run the code snippet to illustrate:
text radius does change when container is resized manually
text radius does not change when resized via .animate(). Why not?
$(function() {
$("#resize").resizable();
$("#resize").draggable();
});
$("button").click(function() {
$("#resize").animate({
left: '50px',
width: '650px'
});
});
$('#demo4').circleType({
fluid: true,
dir: -1
});
#resize {
position: relative;
width: 220px;
height: auto;
padding: 0.5em;
border: 1px solid;
}
#resize h4 {
text-align: center;
margin: 0;
}
.demo-box {
position: relative;
max-width: 700px;
margin: 10% auto;
color: #476A50;
background-color: #ccc;
}
#logo {
position: absolute;
bottom: 44%;
width: 60%;
height: auto;
margin-left: 23%;
}
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://www.kernjs.com/js/lettering.js"></script>
<script src="http://circletype.labwire.ca/js/circletype.js"></script>
<button>Start Animation</button>
<div id="resize" class="ui-widget-content">
<h4 class="ui-widget-header">Resize/Drag/Animate</h4>
<div class="demo-box" id="demo-box4">
<h2 id="demo4" class="demo strong">Anything in WordPress </h2>
<img src="http://profondodesign.com/assets/images/pd-Logo-800x320.png" id="logo" />
</div>
</div>

You can try this though if you just want the end result. If you want the text to be also animated, then the below code won't work. See if it works for your requirement
$(function() {
$("#resize").resizable();
$("#resize").draggable();
circleInit();
});
$("button").click(function() {
$("#resize").animate({
left: '50px',
width: '650px'
},400,'swing',function() { circleInit(); });
});
function circleInit() {
$('#demo4').circleType({
fluid: true,
dir: -1
});
}
#resize {
position: relative;
width: 220px;
height: auto;
padding: 0.5em;
border: 1px solid;
}
#resize h4 {
text-align: center;
margin: 0;
}
.demo-box {
position: relative;
max-width: 700px;
margin: 10% auto;
color: #476A50;
background-color: #ccc;
}
#logo {
position: absolute;
bottom: 44%;
width: 60%;
height: auto;
margin-left: 23%;
}
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://www.kernjs.com/js/lettering.js"></script>
<script src="http://circletype.labwire.ca/js/circletype.js"></script>
<button>Start Animation</button>
<div id="resize" class="ui-widget-content">
<h4 class="ui-widget-header">Resize/Drag/Animate</h4>
<div class="demo-box" id="demo-box4">
<h2 id="demo4" class="demo strong">Anything in WordPress </h2>
<img src="http://profondodesign.com/assets/images/pd-Logo-800x320.png" id="logo" />
</div>
</div>

The code for circletype shows that the text is only reflowed when the window is resized:
if (settings.fluid && !settings.fitText) {
$(window).resize(function () {
layout();
});
}

Fixed position view content after add new message (element)

Task:
Make a chat on Skype in HTML.
Problem:
No scrolling content after adding a new message.
Description:
There is a common site structure: header, content and footer. It is necessary that the content would be "hiding" under the header, but in the visible part of the window remained only part of the content (lower (message history on Skype)).
When you add a new message, the content must scrolling up to the height of this, new messages, and the message should appear at the bottom of the central block of the site (content), but should not go under the footer.
In this case it shall remain possible scrolling.
HTML:
<body>
<div id="header">HEADER</div>
<div id="sidebar" class="f_left">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div id="container" class="f_right">
<div id="wrap3">
<div id="wrap2">
<div id="wrap1">
<div id="content">
<div id="im_nav_wrap">asdasdasdasd</div>
<div id="im_content">
<div class="im_rows_wrap">
<div id="im_rows" class="im_peer_rows">
<div class="mes">sddsfsdfsdfsdf</div>
<div class="mes">sdfdfsdf</div>
<div class="mes">fsdfsdf</div>
<div class="mes">sdfsdf</div>
<div class="mes">fsdfsdf</div>
<div class="mes">fdsfsdfsdf</div>
<div class="mes">fdsfsdfsdf</div>
</div></div>
</div>
<div id="im_footer_wrap">
<textarea name="dialog" id="im_textarea" cols="50" rows="6"></textarea>
<button onclick="IM.send(this);">submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
body {
width: 980px;
margin: 0 auto;
}
#header {
top: 0;
z-index: 100;
text-align: center;
width: 980px;
position: fixed;
height: 40px;
background: #cdcdcd;
}
#sidebar {
top: 60px;
width: 200px;
height: 100px;
background: #666;
position: fixed;
}
.f_right {
width: 600px;
float: right;
}
#content {
}
#im_nav_wrap {
position: fixed;
top: 40px;
z-index: 100;
width: 400px;
height: 70px;
background: #ff0ccc;
}
#im_content {
padding: 120px 0 150px ;
}
#im_rows {
}
.im_rows_wrap {
position: relative;
}
#im_rows {
position: absolute;
bottom: 80px;
width: inherit;
}
.mes {
width: 200px;
padding: 10px;
background: #f6f6f6;
margin-top: 10px;
}
#im_footer_wrap {
height: 100px;
width: 300px;
position: fixed;
bottom: 20px;
}
JS:
$(document).ready(function() {
$('.im_rows_wrap').height($('#im_rows').height());
});
IM = {
send: function(el) {
var ta = $(el).prev('textarea').val();
if (ta) {
$('#im_rows').append('<div class="mes">' + ta + '</div>');
$('.im_rows_wrap').height($('.im_rows_wrap').height() + $( ".mes" ).last().height())
}
}
};

So you want something like:
http://jsfiddle.net/CLzfW/7/
Using a bit of jQuery
$('.button').click(function(e){
e.preventDefault();
$('.expander').slideToggle();
$('html, body').animate({scrollTop: $(document).height()}, 'slow');
});
It scrolls to the bottom of the div on an event click (e.g button click, new message) and you also want a scroll bar on it?

disable jQuery removing javascript tags

Best all,
I'm trying to debug our CMS (what is mostly AJAX) but jQuery removes all the script tags, what makes me unable to debug the JavaScript, how do I disable this behaviour?
I thought I would find it after a simple Google search but no success :(
Thank you,
EDIT
my Page before:
<script>
jQuery(function(){
inter = null;
jQuery('#parse').click(function(){
jQuery('#answer').load(f(),{"POST":jQuery("#POST").val(),"start":((jQuery('#start').val()-1)*10)},function(){
alert("Burrrnnnnnnn")
console.log("Laten we is kijken: " + inter);
clearInterval(inter);
});
inter = setInterval(function(){
jQuery.getJSON("/googlemonster/backend/status-test",function(json){
setProgressBar(json);
});
},200);
return false;
});
});
function
function setProgressBar(obj){
var g;
jQuery("#progress-bar,#progress-text-alt-wrapper").animate({"width":(((g=obj["%"])==0?1:g)*2) + "px"},{queue:false});
jQuery("#progress-text,#progress-text-alt").text(obj["%"] + "% " + obj["status"]);
}
</script>
<style>
#progress-text-alt-wrapper {
height: 30px;
position: absolute;
z-index: 2;
width: 1%;
overflow: hidden;
}
#progress {
border: solid black 1px;
padding: 1px;
text-align: center;
height: 20px;
width: 200px
}
#progress-bar {
background-color: green;
width: 1%;
height: 100%;
}
.progress-bar-text {
padding-top: 3px;
text-align: center;
width: 200px;
position: absolute;
}
#progress-text {
color:green;
}
#progress-text-alt {
color:#eee;
}
</style>
Query:
<input id="POST" type="text" />
<br>
Pagina
<input value="1" id="start"
type="number" />
<br>
<button id="parse">Look</button>
<div>
<div id="progress">
<div id="progress-text-alt-wrapper">
<div class="progress-bar-text" id="progress-text-alt">0% Nothing</div>
</div>
<div class="progress-bar-text" id="progress-text">0% Nothing</div>
<div id="progress-bar"></div>
</div>
</div>
<div id="answer"></div>
The page after
<style>
#progress-text-alt-wrapper {
height: 30px;
position: absolute;
z-index: 2;
width: 1%;
overflow: hidden;
}
#progress {
border: solid black 1px;
padding: 1px;
text-align: center;
height: 20px;
width: 200px
}
#progress-bar {
background-color: green;
width: 1%;
height: 100%;
}
.progress-bar-text {
padding-top: 3px;
text-align: center;
width: 200px;
position: absolute;
}
#progress-text {
color:green;
}
#progress-text-alt {
color:#eee;
}
</style>
Query:
<input id="POST" type="text">
<br>
Pagina
<input value="1" id="start" type="number">
<br>
<button id="parse">Look</button>
<div>
<div id="progress">
<div id="progress-text-alt-wrapper">
<div class="progress-bar-text" id="progress-text-alt">0% Nothing</div>
</div>
<div class="progress-bar-text" id="progress-text">0% Nothing</div>
<div id="progress-bar"></div>
</div>
</div>
<div id="answer"></div>

You are right – it is a feature of jQuery to strip out script tags. You need to use the basic JavaScript methods instead.
See: Can't append <script> element
Scripts will be evaluated first, and then discarded.
http://api.jquery.com/append/

after some research I finnaly could fix the problem thanks to the guys here,
I made a little plugin for jQuery for it, now the script tags are not getting, removed but executed.
(function($){
$.fn.loadDebuggable = function(url){
data = typeof(arguments[1]) == "object"?arguments[1]:{};
success = arguments[2]||typeof(arguments[1]) == "function"?arguments[1]:function(){};
return $.ajax(url,{
"context":this,
"success":[function(data){
var div = document.createElement('DIV');
div.innerHTML = data;
this[0].innerHTML = "";
while (div.firstChild)
{
this[0].appendChild(div.firstChild);
div.removeChild(div.firstChild);
};
},success],
"type":"GET",
"data":data
});
}
})(jQuery);
Thanks,

Develop Reference

JavaScript is the programming language of the Web.

Selecting and Adding Functions to Div's via For Loop - javascript

You have to pass your function - omit the () .addEventListener("click", illu_area); Having the () executes the function immediately.

Related

Nothing returning when I am trying to get the value of a property of an HTML element [closed]

Trying to change colour of a button to show which images is displayed with javascript

Combine Circletype.js with jQuery animate

Fixed position view content after add new message (element)

disable jQuery removing javascript tags

Categories

Resources