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();
});
}
i am pretty new to javascript and I am not able to get an IF/ELSE statement to work in a kind of basic configurator I am experimenting, I am sure there's something dumb I am doing.
I have a main image that changes to show the result of a selection, the problem is that the IF statement doesn't seem to work properly, like if it wasn't going through the conditions: basically when selecting a color (black/silver) there are no problems, but when clicking on inserts it should change scr performing the if/else test to change the scr attribute accordingly.
var img = $("#picture");
$("#case_black").click(function() {
img.attr("src", "http://s32.postimg.org/xzqjausjp/black_b.jpg");
});
$("#case_silver").click(function() {
img.attr("src", "http://s32.postimg.org/j2n46ylmt/silver_s.jpg");
});
$("#insert_silver").click(function() {
if (img.src == "http://s32.postimg.org/xzqjausjp/black_b.jpg") {
img.attr("src", "http://s32.postimg.org/wfq99kqh1/black_s.jpg");
} else {
img.attr("src", "http://s32.postimg.org/j2n46ylmt/silver_s.jpg");
}
});
Here is a fiddle to help you help me:
https://jsfiddle.net/1qdwaa8o/
and a snippet:
var img = $("#picture");
$("#case_black").click(function() {
img.attr("src", "http://s32.postimg.org/xzqjausjp/black_b.jpg");
});
$("#case_silver").click(function() {
img.attr("src", "http://s32.postimg.org/j2n46ylmt/silver_s.jpg");
});
$("#insert_silver").click(function() {
if (img.src == "http://s32.postimg.org/xzqjausjp/black_b.jpg") {
img.attr("src", "http://s32.postimg.org/wfq99kqh1/black_s.jpg");
} else {
img.attr("src", "http://s32.postimg.org/j2n46ylmt/silver_s.jpg");
}
});
body{
background-color:black;
padding:0;
margin:0;
border:0;
text-align:center;
}
.main{
width:432px;
height:422px;
position:absolute;
display:inline-block;
margin-left:-216px;
margin-top:10%;
}
#img_wrapper{
width:350px;
margin-left:41px;
}
#selector_wrapper{
width:auto;
}
.selector_button{
width:50px;
height:50px;
border-radius:25px;
border:1px solid #1C1C1C;
margin: 0 10px;
cursor:pointer;
}
.clear{
clear:both;
}
#case_black{
background-image:url("http://s32.postimg.org/ipqo3nx1d/black.png");
float:left;
}
#case_silver{
background-image:url("http://s32.postimg.org/5qtwxrim9/silver.png");
float:left;
}
#insert_wood{
background-image:url("http://s32.postimg.org/ulderu3gh/wood.png");
float:left;
}
#insert_silver{
background-image:url("http://s32.postimg.org/5qtwxrim9/silver.png");
float:left;
}
#insert_black{
background-image:url("http://s32.postimg.org/ipqo3nx1d/black.png");
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
<div class="main">
<div id= "img_wrapper">
<img id= "picture" src="http://s32.postimg.org/xzqjausjp/black_b.jpg" alt="CD1000 with different finishes" />
</div>
<div id= "selector_wrapper">
<div id= "case">
<div class= "selector_button" id= "case_black"></div>
<div class= "selector_button" id= "case_silver"></div>
</div>
<div class= "clear"></div>
<div id= "inserts">
<div class= "selector_button" id= "insert_black"></div>
<div class= "selector_button" id= "insert_silver"></div>
<div class= "selector_button" id= "insert_wood"></div>
</div>
</div>
</div>
</body>
img is a jQuery object, therefore img.src will be undefined.
You need to test img[0].src or img.prop('src').
Get/set src of image using img.attr("src") and not img.src
Or you can make use of: img.get(0).src. img.get(0) is similar to document.querySelector('someSelectorToSelectYourImageAbove').src;
I need to create a button. The button must be similar to this:
And when i click to it, it must change in:
How can i do it? Thanks to all. I need i must use jquery, but i don't know how.
Same:
var value = 0;
$("#add_btn").on("click", function() {
$("#add_btn").hide();
$("#to_show").show();
value++;
$("#value").text(value);
});
$("#minus").on("click", function() {
value--;
$("#value").text(value);
});
$("#plus").on("click", function() {
value++;
$("#value").text(value);
});
#to_show {
display: none;
}
button{
background-color: red;
border: none;
width:40px;
height: 40px;
color: #fff;
font-size: 15px;
}
#value{
width: 40px;
display: inline-block;
text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button id="add_btn">Add</button>
<div id="to_show">
<button id="minus">-</button>
<div id="value"></div>
<button id="plus">+</button>
</div>
This is a working example by using Jquery and Css. Hide and Show are used to change the DOM elements.
$(document).ready(function() {
var count = 0;
$("#op").hide();
$("#btn").click(function() {
$("#result").text(count);
$("#btn").hide();
$("#op").show();
});
$("#plus").click(function() {
count++;
$("#result").text(count);
});
$("#minus").click(function() {
count--;
$("#result").text(count);
});
});
#btn, .operator{
background-color:rgb(224,0,0);
text-align:center;
cursor:pointer;
color:white;
}
#btn{
width:50px;
padding:5px;
}
.operator{
width:20px;
}
#op{
width:130px;
}
#op div{
float:left;
padding:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="btn">click</div>
<div id="op"><div id="minus" class="operator">-</div><div id="result"></div><div id="plus" class="operator">+</div></div>
This is an example in javascript.
You might use jQuery.
CSS
.centerButton{
cursor:pointer;
text-align:center;
}
.smallButton{
width:20px;
height:20px;
}
html
<div class="centerButton" style="background:#f00;width:50px;height:25px;" id="addButton" >Add</div>
<div style="display:none" id="addButtonExpanded">
<div class="centerButton smallButton" style="float:left;background:#f00;" id="minusNumber" >-</div>
<div class="centerButton smallButton" style="float:left" id="number" >1</div>
<div class="centerButton smallButton" style="float:left;background:#f00;" id="plusNumber">+</div>
</div>
<input name="numberOfClicksInput" type="hidden" id="numberOfClicksInput"></input>
javascipt
$(document).ready(function() {
var numberOfClicks=0;
$("#addButton").click(function() {
$("#addButton").hide();
$("#addButtonExpanded").show();
numberOfClicks++;
$("#numberOfClicksInput").val(numberOfClicks);
});
$("#minusNumber").click(function() {
numberOfClicks--;
$("#numberOfClicksInput").val(numberOfClicks);
if(numberOfClicks==0){
$("#addButton").show();
$("#addButtonExpanded").hide();
} else {
$("#number").text(numberOfClicks);
}
})
$("#plusNumber").click(function() {
numberOfClicks++;
$("#numberOfClicksInput").val(numberOfClicks);
$("#number").text(numberOfClicks);
});
})
$( document ).ready(function() {
var numberOfClicks=0;
$(document).ready(function() {
$("#addButton").click(function(){
$("#addButton").hide();
$("#addButtonExpanded").show();
numberOfClicks++;
$("#numberOfClicksInput").val(numberOfClicks);
});
$("#minusNumber").click(function(){
numberOfClicks--;
$("#numberOfClicksInput").val(numberOfClicks);
if(numberOfClicks==0){
$("#addButton").show();
$("#addButtonExpanded").hide();
}else{
$("#number").text(numberOfClicks);
}
})
$("#plusNumber").click(function(){
numberOfClicks++;
$("#numberOfClicksInput").val(numberOfClicks);
$("#number").text(numberOfClicks);
})
});
})
.centerButton{
cursor:pointer;
text-align:center;
}
.smallButton{
width:20px;
height:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<div class="centerButton" style="background:#f00;width:50px;height:25px;" id="addButton" >Add</div>
<div style="display:none" id="addButtonExpanded">
<div class="centerButton smallButton" style="float:left;background:#f00;" id="minusNumber" >-</div>
<div class="centerButton smallButton" style="float:left" id="number" >1</div>
<div class="centerButton smallButton" style="float:left;background:#f00;" id="plusNumber">+</div>
</div>
<input name="numberOfClicksInput" type="hidden" id="numberOfClicksInput"></input>
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
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.