I want to change a state on a specific condition - javascript

i wanted to get this logic =>
if you click on a cube for the first time,
it turns black,
if you clicked another time on the same cube, it turns white.
if the cube is allready white, it becomes black
It should works on each cube individually... I'm getting lost. Thx for your advices.
var compteur = 0;
var hasBeenClick = false;
/*jslint browser: true*/
/*global $, jQuery, alert*/
$(document).ready(function () {
"use strict";
//Lorsque je clique
$(".cliquerAction").click(function () {
if (hasBeenClick === false) {
$(this).css("background-color", "black");
compteur = compteur + 1;
alert("Premier click" + " vous avez cliqué " + compteur + " fois");
hasBeenClick = true;
} else if (hasBeenClick === true) {
compteur = compteur + 1;
$(this).css("background-color", "white");
alert("Deuxieme click" + " vous avez cliqué " + compteur + " fois");
hasBeenClick = true;
}
if (compteur > 2) {
$(this).css("background-color", "black");
alert("Bcp click" + " vous avez cliqué " + compteur + " fois");
hasBeenClick = false;
compteur = 0;
}
});
});
*{
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
body {
background-color: darkblue;
max-width: 1980px;
max-height: 1080px;
}
#page {
border: white 5px solid;
width: auto;
height: 1000px;
margin: auto;
}
#bloc1 {
position:relative;
background-color: red;
width: 100px;
height: 100px;
}
#bloc2 {
background-color: yellow;
width: 100px;
height: 100px;
}
#bloc3 {
background-color: darkgreen;
width: 100px;
height: 100px;
}
#bloc4 {
background-color: blueviolet;
width: 100px;
height: 100px;
}
#container{
padding-left:10%;
padding-right:10%;
margin:auto;
border:pink thick solid;
display:flex;
justify-content:space-between;
width:auto;
height:auto;
min-height:500px;
min-width:500px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Page d'acceuil</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="../js/script.js"></script>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div id="page">
<div id="container">
<div id="bloc1" class="cliquerAction" ></div>
<div id="bloc2" class="cliquerAction"></div>
<div id="bloc3" class="cliquerAction"></div>
<div id="bloc4" class="cliquerAction"></div>
</div>
</div>
</body>
</html>

I think doing with css class is more simple and easy for that background color black and white.Creating two class and use addClass and removeClass as your condition state change
CSS
.click-even {
background: white !important;
}
.click-odd {
background: black !important;
}
JS
$(document).ready(function () {
"use strict";
//Lorsque je clique
$(".cliquerAction").click(function () {
if($(this).hasClass("click-odd")){
$(this).addClass("click-even");
$(this).removeClass("click-odd");
}
else{
$(this).addClass("click-odd");
$(this).removeClass("click-even");
}
});
});

In an effort to avoid unnecessary confusion, I'm going to suggest an alternative. Instead of checking if something has already been clicked or not to determine the next color, you could instead try focusing only on 3 simple rules based on the current color and the desired logic you've described:
If a cube is clicked for the first time (e.g. If it's not black or white) then change it to black.
If a black cube is clicked - it turns white.
If a white cube is clicked - it turns black.

I finally get what i was looking for with this : ( i m sure i can improve this with a switch case, but it s working atm ). Hope this can help someone in somedays.
/*jslint browser: true*/
/*global $, jQuery, alert*/
$(document).ready(function () {
"use strict";
//Lorsque je clique
$(".cliquerAction").click(function () {
var color = $(this).css('background-color');
alert(color);
//first time applying a color turn it black
if (color !== "rgb(255, 255, 255)" || "rgb(0, 0, 0)") {
$(this).css('background-color', 'black');
}
// if it s black and i click on the element : it turns white
if (color === "rgb(0, 0, 0)") {
$(this).css('background-color', 'white');
}
// if it s white and i click on the element : it turns black
if (color === "rgb(255, 255, 255)") {
$(this).css('background-color', 'black');
}
});
});
*{
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
.black{
background-color: black;
}
.white{
background-color: white;
}
.active {
background-color:#aaa;
}
body {
background-color: darkblue;
max-width: 1980px;
max-height: 1080px;
}
#page {
border: white 5px solid;
width: auto;
height: 1000px;
margin: auto;
}
#bloc1 {
position:relative;
background-color: red;
width: 100px;
height: 100px;
cursor: pointer;
}
#bloc2 {
background-color: yellow;
width: 100px;
height: 100px;
cursor: pointer;
}
#bloc3 {
background-color: darkgreen;
width: 100px;
height: 100px;
cursor: pointer;
}
#bloc4 {
background-color: blueviolet;
width: 100px;
height: 100px;
cursor: pointer;
}
#container{
padding-left:10%;
padding-right:10%;
margin:auto;
border:pink thick solid;
display:flex;
justify-content:space-between;
width:auto;
height:auto;
min-height:500px;
min-width:500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<meta charset="utf-8">
<title>Page d'acceuil</title>
<script src="../jquery/jquery-3.0.0.js"></script>
<script src="../js/script.js"></script>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div id="page">
<div id="container">
<div id="bloc1" class="cliquerAction" class="black" class="white"></div>
<div id="bloc2" class="cliquerAction" class="black" class="white"></div>
<div id="bloc3" class="cliquerAction" class="black" class="white"></div>
<div id="bloc4" class="cliquerAction" class="black" class="white"></div>
</div>
</div>
</body>

Related

Toggle change 2 DIV width at a time + localStorage

function myFunction() {
var element = document.getElementById("one1");
element.classList.toggle("one2");
var element = document.getElementById("two1");
element.classList.toggle("two2");
}
<style>
#section{margin-left:50px;
margin-right:50px
}
#monbouton{float:right;
font-size:25px;
width:50px;
height:50px;
background-color:#F1F1F1;
border:1px solid ##F1F1F1
}
#one1{
float:left;
width:40%;
height:100px;
border:1px solid blue
}
.one2{
width:10% !important;
height:200px;
border:1px solid red !important;
}
.one2 #afairedisparaitre{display:none
}
#two1{float:right;
width:59%;
height:100px;
border:1px solid green
}
.two2{width:89% !important
}
</style>
<!DOCTYPE html>
<html>
<body>
<div id="section">
<div id="one1">
<button id="monbouton" onclick="myFunction()">↔</button>
<div id="afairedisparaitre">This is DIV #one1<br />
Button toggle to CLASS .one2<br />
and reverse</div>
</div>
<div id="two1">This is DIV #two1<br />
Button toggle to CLASS .two2<br />
and reverse</div>
</div>
</body>
</html>
I am trying to make the leftside of my website shrink, so that the users can have a wider rightside if they find it more confortable.
What I am missing is a way that would keep the choice all over the site, when an other page is loaded, until the user clicks again. Maybe the solution would be a few more lines in js with "localStorage" ? I would really appreciate any help.
Made your CSS a bit better. Now we need to toggle only one class .with_toggle for #section.
It can sow errors here, in Snippet, but will fork fine on Codepan, see please. Try to switch it and reload the page on Codepan.
// checking if our storage is not empty
if (localStorage.toggled != '') {
// set class to #section form storage value
document.getElementById("section").classList.toggle(localStorage.toggled);
}
function myFunction() {
if (localStorage.toggled != "with_toggle") {
document.getElementById("section").classList.add("with_toggle");
localStorage.toggled = "with_toggle";
} else {
document.getElementById("section").classList.remove("with_toggle");
localStorage.toggled = "";
}
}
#section {
margin-left: 50px;
margin-right: 50px;
}
#monbouton {
float: right;
font-size: 25px;
width: 50px;
height: 50px;
background-color: #F1F1F1;
border: 1px solid #F1F1F1;
}
#one1 {
float: left;
width: 40%;
height: 100px;
border: 1px solid blue;
}
.with_toggle #one1 {
width: 10%;
border: 1px solid red;
}
.with_toggle #one1 #afairedisparaitre {
display: none;
}
#two1 {
float: right;
width: 59%;
height: 100px;
border: 1px solid green;
}
.with_toggle #two1 {
width: 89%;
}
<div id="section">
<div id="one1">
<button id="monbouton" onclick="myFunction()">↔</button>
<div id="afairedisparaitre">This is DIV #one1<br /> Button toggle to CLASS .one2<br /> and reverse</div>
</div>
<div id="two1">This is DIV #two1<br /> Button toggle to CLASS .two2<br /> and reverse</div>
</div>
Sure. Just create a localStorage variable that keeps track of whether the shrink should be active and use that to apply your styles on page load or something similar.
function shrinkActive() {
var shrink;
if (!(shrink = localStorage.getItem("shrink"))) {
localStorage.setItem("shrink", "false");
return false;
}
return JSON.parse(shrink);
}
function setShrink(active) {
var element1 = document.getElementById("one1");
var element2 = document.getElementById("two1");
if (active) {
element1.classList.add("one2");
element2.classList.add("two2");
} else {
element1.classList.remove("one2");
element2.classList.remove("two2");
}
localStorage.setItem("shrink", active.toString());
}
function myFunction() {
setShrink(!shrinkActive());
}
window.onload = function() {
setShrink(shrinkActive());
}
Link to working Codepen. https://codepen.io/bugcatcher9000/pen/pogZbrz?editors=1111

Custom textarea/contenteditable with divs inside it

I’ currently working on a website, where a user should be able to write and insert new songs with belonging chords into a database.
To sum things up, and get to the point pretty quick, here is my problem:
I have a div with the id “#textarea”, and the attribute contenteditable=“true”. On each enter/linebreak, I would like to create a new div with the class “.chords” and the attribute contenteditable=“false”. This ".chords" div should be placed right before the new line, like the image shows here:
The red color is the #textarea div, and the blue color the .chords divs
So my question is: how do I do this?
I’ve posted the code I've tried in the end of this post, but as you see if you run it, the .chords divs are positioned below the new line, so I’m now a bit stuck.. If any of you guys have an idea on how to do this, please let me hear from you!
$(function(e) {
$('#textarea').keydown(function(e) {
var i = 0;
// Check if the returnkey is being pressed
if (e.keyCode === 13) {
$("#textarea div:last-of-type").after("<div class=\"chords\" id=\"" + (i + 1) + "\" contenteditable=\"false\"></div>");
i = i + 1;
}
});
})
#textarea {
border: 1px solid black;
line-height: 50px;
font-size: 20px;
}
.chords {
height: 30px;
border: 1px solid black;
position: relative;
}
#textarea div:not(.chords) {
margin-top: 20px;
min-height: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="textarea" contenteditable="true">
<div class="chords" id="1" contenteditable="false"></div>
<div></div>
<!--End of #textarea-->
</div>
Similar Something like that
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#textarea {
border: 1px solid red;
line-height: 50px;
font-size: 20px;
min-height: 40px;
}
.chords {
height: 30px;
border: 1px solid black;
position: relative;
margin-top:5px;
}
#textarea div:not(.chords) {
margin-top: 20px;
min-height: 40px;
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(e) {
$('#textarea').keydown(function(e) {
var i = 0;
// Check if the returnkey is being pressed
if (e.keyCode === 13) {
$(this).after('<div class="chords" id="'+ (i + 1) +'" contenteditable="false"></div><div>'+$(this).html()+'</div>');
$(this).html("");
i = i + 1;
}
});
})
</script>
<div id="textarea" contenteditable="true">
</div>
<div class="chords" id="1" contenteditable="false"></div>
<div></div>
<!--End of #textarea-->
</body>
</html>
Check it out
https://jsfiddle.net/emarufhasan/66L2ohnp/?utm_source=website&utm_medium=embed&utm_campaign=66L2ohnp

Getting a div to fadeIn the opacity

I am trying to get a div to fadeIn() from white to the normal dark gray color. However, my attempt is failing and it is killing my other scripts on the page. What am I doing wrong?
function(){
$('.dark-gray').fadeTo(1200, 1);
}
.dark-gray {
height: 500px;
width: 100%;
background-color: #202020;
}
#dark-gray-container {
text-align: center;
padding: 150px 0;
}
#dark-gray-container-title {
color: #FFF;
font-size: 1.7em;
font-weight: bold;
}
#dark-gray-container-description {
color: #FFF;
font-size: 1.3em;
padding-top: 40px;
}
#dark-gray-container-button {
padding-top: 80px;
}
#dark-gray-container-button-span {
color: #FFF;
padding: 20px 25px;
border: 2px solid #FFF;
cursor: pointer;
transition: ease-in-out .3s;
}
#dark-gray-container-button-span:hover {
border: 2px solid #45a5ba;
transition: ease-in-out .3s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="dark-gray">
<div id="dark-gray-container">
<div id="dark-gray-container-title">GET IN TOUCH WITH US</div>
<div id="dark-gray-container-description">Looking for advice or would you like to speak to a member of the OD team? Please hit the button below.</div>
<div id="dark-gray-container-button"><span id="dark-gray-container-button-span">CONTACT US</span></div>
</div>
</div>
UPDATE:
I want the function to start when the div is scrolled to. What about this?
$(function() {
var oTop = $('.green').offset().top - window.innerHeight;
$(window).scroll(function(){
var pTop = $('body').scrollTop();
console.log( pTop + ' - ' + oTop );
if( pTop > oTop ){
fadeinGray();
}
});
});
function fadeinGray(){
$('.dark-gray').fadeTo(1200, 1);
}
check out a working example HERE
There were couple of issues. First your dark-gray class was always dark gray. You had to change the CSS opacity to something lower than 1 for the beginning. Then you were making it complicated to calculate the top offset.
this is how you can use fadeIn when mouseenter this is the code
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
div.mystyle{
width:500px;
height: 500px;
border:2px solid black;
}
div.check{
width: 100%;
height: 100%;
background-color: gray;
display: none;
}
</style>
</head>
<body>
<div class="mystyle">
<div class="check">
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".mystyle").mouseenter(function(){
$(".check").fadeIn(1000);
});
});
</script>
</body>
</html>
if you want call back function(when mouse leave) use this code also.
$(document).ready(function(){
$(".mystyle").mouseleave(function(){
$(".check").fadeIn(1000);
});
});

Creating a color mixer showing the result of two combined colors

I am working on a color mixer where there are 6 colors. When you click on 2 of them it shows the color that it would be if you took mixed two colors of paint and put them together.
I am wondering how to make it so that when you click two things it shows an output.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Color Mixer</title>
</head>
<body>
<div id="greendiv"></div>
<div id="bluediv"></div>
<div id="yellowdiv"></div>
<div id="reddiv"></div>
<div id="purplediv"></div>
<div id="orangediv"></div>
<p id="separator">------------------------------------------
</body>
</html>
and the CSS
#greendiv {
background-color:green;
width: 100px;
height: 200px;
margin-left: 360px;
}
#bluediv {
background-color:blue;
width: 100px;
height: 200px;
margin-left: 120px;
margin-top: -200px;
}
#yellowdiv {
background-color:yellow;
width: 100px;
height: 200px;
margin-left: 240px;
margin-top: -200px;
}
#reddiv {
background-color: #E42217;
height: 200px;
width: 100px;
margin-top: -200px
}
#purplediv {
background-color: purple;
height: 200px;
width: 100px;
margin-left: 480px;
margin-top: -200px;
}
#orangediv {
background-color: orange;
height: 200px;
width: 100px;
margin-left: 600px;
margin-top: -200px;
}
#separator {
font-size: 50px;
color: #565051;
margin-top: -15px
}
#reddiv:hover {
background-color: #C11B17
}
I'm using JQuery XColor to do the color mixing..
See this fiddle: choose 2 items and hit "Get Mix" button
http://jsfiddle.net/jFIT/X4Qgf/6/
function getMix() {
var colors = $('.selected');
var col1 = rgb2hex($(colors[0]).css('background-color'));
var col2 = rgb2hex($(colors[1]).css('background-color'));
console.log(colors);
var additiveColor = ($.xcolor.average(col1, col2).getHex());
console.log(col1 + ' AND ' + col2);
console.log(' = ' + additiveColor);
$('#result').css('background-color', additiveColor);
}
for this line:
var additiveColor = ($.xcolor.average(col1, col2).getHex());
you can use a number of different color calculations by changing .average( to whatever you want documented here: http://www.xarg.org/project/jquery-color-plugin-xcolor/ (i.e. additive, subtractive.. etc)
Is this what you're after??
Try this: First add 3 more entries to your CSS
#color1div {
background-color: black;
height: 100px;
width: 100px;
}
#color2div {
background-color: black;
height: 100px;
width: 100px;
margin-left: 120px;
}
#resultdiv {
background-color: black;
height: 100px;
width: 100px;
margin-left: 240px;
}
Then, modify your html page like this:
<html>
<head>
<meta charset="utf-8">
<title>Color Mixer</title>
<script type="text/javascript">
var nextColor = 'color1div';
function selectColor(colorName)
{
//select color
document.getElementById(nextColor).style.backgroundColor=colorName;
//toggle color 1 and color 2
if(nextColor == 'color1div')
nextColor = 'color2div';
else
nextColor = 'color1div';
//mix the colors
var color1 = document.getElementById('color1div').style.backgroundColor;
var color2 = document.getElementById('color2div').style.backgroundColor;
//insert your color mixing formula here and set result
//example:
//var result = mix(color1, color2);
//document.getElementById('resultdiv').style.backgroundColor = result;
}
</script>
</head>
<body>
<div id="greendiv" onclick="javascript:selectColor('green')"></div>
<div id="bluediv" onclick="javascript:selectColor('blue')"></div>
<div id="yellowdiv" onclick="javascript:selectColor('yellow')"></div>
<div id="reddiv" onclick="javascript:selectColor('red')"></div>
<div id="purplediv" onclick="javascript:selectColor('purple')"></div>
<div id="orangediv" onclick="javascript:selectColor('orange')"></div>
<p id="separator">------------------------------------------
<div id="color1div"/>
<div id="color2div"/>
<div id="resultdiv"/>
</body>
</html>
When you click the color divs, it calls the javscript function to save the selected color in a variable. Now, you can just insert your color mixing formula and set the resulting color on the resultdiv.

jquery splitter change to vertical splitter on button click

I have a splitter that works fine. Now the client wants to change the splitter from horizontal view to vertival view. I mean that the splitter is first split int the 2 divs horizontally and when I click the button it will change so that it's split the same 2 divs vertically.
I tried this
<script type="text/javascript">
$(function () {
$('.LeftPane').attr('id', 'LeftPane');
$('.RightPane').attr('id'`enter code here`, 'RightPane');
$("#MySplitter").splitter({
type: "v"
});
$('#Button1').click(function () {
$('#LeftPane').attr('id', 'TopPane');
$('#RightPane').attr('id', 'BottomPane');
$("#MySplitter").splitter({
type: "h"
});
});
});
</script>
<style type="text/css" media="all">
#MySplitter
{
height: 400px;
width: 600px;
margin: 1em 2em;
background: #def;
border: 2px solid #039; /* No padding allowed */
}
#LeftPane
{
background: #def;
overflow: auto;
width: 200px; /* optional, initial splitbar position */
min-width: 50px;
}
#RightPane
{
background: #def;
overflow: auto;
min-width: 100px; /* No margin or border allowed */
}
#MySplitter .vsplitbar
{
width:8px;
cursor: e-resize; /* in case col-resize isn't supported */
cursor: col-resize;
background-color:Black;
}
#MySplitter .vsplitbar.active, #MySplitter .vsplitbar:hover
{
background-color:Black;
}
#TopPane
{
background: #def;
overflow: auto;
width: 200px;
min-width: 50px; /
}
#BottomPane
{
background: #def;
overflow: auto;
min-width: 100px; /* No margin or border allowed */
}
#MySplitter .hsplitbar
{
height: 2px;
background: #487BA4;
}
#MySplitter .hsplitbar.active, #MySplitter .hsplitbar:hover
{
background: #487BA4;
}
</style>
</head>
<body>
<div id="MySplitter">
<div class="LeftPane">
<p>
This is the left side of the vertical splitter.</p>
</p>
</div>
<div class="RightPane">
This is the right side of the vertical splitter.</p>
</div>
</div>
<p>
<input id="Button1" type="button" value="splitchange" /></p>
</body>
</html>
at last i find the solution of my onw question.
I am designing it in asp.net so i am providing the solution in jquery with asp.net
<head id="Head1" runat="server">
<title></title>
<script src="../Scripts/jquery-1.4.4.js" type="text/javascript"></script>
<script src="../Js/js/splitter.js" type="text/javascript"></script>
enter code here
<style type="text/css" media="all">
#MySplitter
{
height: 400px;
width: 600px;
margin: 1em 2em;
background: #def;
border: 2px solid #039;
}
#LeftPane
{
background: #def;
overflow: auto;
width: 200px;
min-width: 50px;
}
#RightPane
{
background: #def;
overflow: auto;
min-width: 100px;
}
#MySplitter .vsplitbar
{
width:8px;
cursor: e-resize;
cursor: col-resize;
background-color:Black;
}
#MySplitter .vsplitbar.active, #MySplitter .vsplitbar:hover
{
background-color:Black;
}
#TopPane
{
background: #def;
overflow: auto;
width: 200px;
min-width: 50px;
}
#BottomPane
{
background: #def;
overflow: auto;
min-width: 100px;
}
#MySplitter .hsplitbar
{
height: 2px;
background: #487BA4;
}
#MySplitter .hsplitbar.active, #MySplitter .hsplitbar:hover
{
background: #487BA4;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
// var result = function () {
// alert('fired');
var val = $('#<%=HiddenField1.ClientID %>').val();
if (val == 1) {
$('.LeftPane').attr('id', 'LeftPane');
$('.RightPane').attr('id', 'RightPane');
$("#MySplitter").splitter({
type: "v"
});
}
else {
$('#LeftPane').attr('id', 'TopPane');
$('#RightPane').attr('id', 'BottomPane');
$(' #MySplitter .vsplitbar').css('width', '');
$("#MySplitter").splitter({
type: "h"
});
}
// }
});
</script>
</head>
<body>
<form runat="server" >
<asp:HiddenField ID="HiddenField1" runat="server" Value="1"/>
<asp:Button ID="Button1" runat="server" Text="change" OnClick="Button1_Click" />
<div id="MySplitter">
<div class="LeftPane">
<p>
This is the left side of the vertical splitter.</p>
<p>
Note what happens when you move the splitbar as far left as you can to make this
pane very thin. A scrollbar appears and it is flush against the splitbar, just the
way it should be.</p>
</div>
<div class="RightPane">
<p>
The splitbar needs to be wide enough to grab with the mouse, but a thick splitbar
may be visually distracting in a design. This example shows how to make a splitbar
that looks skinny but has a wider grabbing area. It also demonstrates the use of
an alternate resize cursor. (Not all browsers support alternate cursors and only
IE seems to support animated cursors.)</p>
<p>
A background image in the splitbar provides the visual marker but the splitbar area
extends further right, appearing as padding on the right pane. The splitbar's hot
zone is "biased" to the right so that it will not have a gap against any left-side
scrollbar when it appears. If you know the left pane will never have a scroll bar,
you could make the hot zone centered on the skinny splitbar.</p>
</div>
</div>
</form>
Code behind for button is as follows
protected void Page_Load(object sender, EventArgs e)
{
if (HiddenField1.Value == "2")
{
HiddenField1.Value = "1";
}
else
{
HiddenField1.Value = "2";
}
}

Categories