var pet = $("structureValue").val() == "Pet";
var Color = $("button").on("click",function(){
var color =$("#color");
var roof = $("#structureValue").val() == "Roof";
var building =$("#structureValue").val() == "Building";
var colorId=$(color).val();
if(colorId == "a" && roof){
$("#build").css("color", "grey")
}else if(colorId == "b" && roof){
$("#build").css("color", "green")
}else if(colorId == "c" && roof){
$("#build").css("color", "orange")
}else if(colorId == "d" && roof){
$("#build").css("color", "yellow")
}else if(colorId == "a" && building){
$("#building").css("background", "grey")
}else if(colorId == "b" && building){
$("#building").css("background", "green")
}else if(colorId == "c" && building){
$("#building").css("background", "orange")
}else if(colorId == "d" && building){
$("#building").css("background", "yellow")
}
});
/*--------------------Function------------------*/
$("#structureValue ").on("click",function(){
$("#structureValue").change(function(){
var val = $(this).val();
if(val == "Environment"){
$("#color").html("<option value='a'>Mountain</option><option value='b'>Lakeside</option><option value='c'>Beach</option><option value='d'>Island</option>");
}else if(val == "Pet"){
$("#color").html("<option value='a'>Squire</option><option value='b'>Chinchilla</option><option value='c'>Dinosaur</option><option value='d'>Dog</option>");
}else if (val == "Roof","Building"){
$("#color").html("<option value='a'>Gray</option><option value='b'>Green</option><option value='c'>Orange</option><option value='d'>Yellow</option>")}
});
});
$("#firstButton").on("click", function(){
var color =$("#color");
var colorId=$(color).val();
if($("#structureValue").val() == "Roof" ){
$("#build").css({"width":"0",
"height":"0","border-left":" 250px solid transparent","border-right":" 250px solid transparent",
"border-bottom":" 350px solid ","background":"none", Color });
}else if($("#structureValue").val() == "Building"){
$("#building").css({"width":"500px",
"height":"300px",Color })
}else if($("#structureValue").val() == "Environment" && colorId == "a"){
$("body").css({"background":"url('https://tpwd.texas.gov/state-parks/franklin-mountains/gallery/franklin-mnt_panorama1.jpg')no-repeat center center fixed",
"-webkit-background-size": "cover","-moz-background-size":"cover","-o-background-size": "cover","background-size":"cover","background-size":"100% 100%"});
}else if($("#structureValue").val() == "Environment" && colorId == "b"){
$("body").css({"background":"url('https://openclipart.org/image/2400px/svg_to_png/218873/Autumn-By-The-Lake.png')no-repeat center center fixed",
"-webkit-background-size": "cover","-moz-background-size":"cover","-o-background-size": "cover","background-size":"cover","background-size":"100% 100%"});
}else if($("#structureValue").val() == "Environment" && colorId == "c"){
$("body").css({"background":"url('http://travel.home.sndimg.com/content/dam/images/travel/fullset/2014/12/3/top-10-caribbean-beaches-eagle-beach-aruba.jpg.rend.hgtvcom.966.725.suffix/1491584555480.jpeg')no-repeat center center fixed",
"-webkit-background-size": "cover","-moz-background-size":"cover","-o-background-size": "cover","background-size":"cover","background-size":"100% 100%"});
}else if($("#structureValue").val() == "Environment" && colorId == "d"){
$("body").css({"background":"url('http://www.jeremyrobinsononline.com/wp-content/uploads/2013/05/White_Island_New_Zealand.jpg')no-repeat center center fixed",
"-webkit-background-size": "cover","-moz-background-size":"cover","-o-background-size": "cover","background-size":"cover","background-size":"100% 100%"});
}else if($("#structureValue").val() == "Pet" && colorId == "a"){
$("#pet").empty().append("<img class='secert' src='https://media.giphy.com/media/eGOorb2NowXny/giphy.gif'></img>");
}else if($("#structureValue").val() == "Pet" && colorId == "b"){
$("#pet").empty().append("<img class='secert' src='https://assets.horsenation.com/wp-content/uploads/2013/09/1379338067174322.gif'></img>");
}else if($("#structureValue").val() == "Pet" && colorId == "c"){
$("#pet").empty().append("<img class='secert' src='https://i0.wp.com/media.giphy.com/media/TfFbA8xkrIymk/giphy.gif?resize=500%2C281&ssl=1'></img>");
}else if($("#structureValue").val() == "Pet" && colorId == "d"){
$("#pet").empty().append("<img class='secert' src='http://s3.amazonaws.com/barkpost-assets/50+GIFs/17.gif'></img>");
}
});
$("#firstButton").click(function(){
if($("#structureValue").val() == "Building" && "Environment" && "Roof" && "Pet" ){
$("#suprise").css("visibility","visible");
}else{
console.log("wrong")
}
});
$("#suprise").click(function(){
$("#glide").addClass("glide");
setTimeout(function(){ $(".secert").css("visibility","visible");
}, 4500);
setTimeout(function(){
location.reload();
}, 8500);
})
body{background-color: green;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 100% 100%
}
img{
max-width: 100%;
height: 300px;
}
#wrapper{
width: 100%;
text-align: center;
}
#build,#building,#doors,#windows{
margin: 0 auto;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.glide{
animation-name:glide;
animation-duration:8.5s;
animation-iteration-count: 1;
animation-direction:normal;
position: absolute;
}
#-webkit-keyframes glide {
0% { left:0px; top:0px;}
15% { left:0; top:50%;}
25% {left:80%; top:50%;}
35% {left:80%; top:0;}
40% { left:35%; top:0%;}
75% { left:35%; top:15%;}
100% { left:35%; top:15%;}
}
#suprise{
visibility:hidden;
margin-top: 30px;
}
.secert{
visibility: hidden;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="build a house.css">
<title></title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
</head>
<body class="cf">
<div id="wrapper">
<h1>What animal is in your house?</h1>
Create a home vision
<select id="structureValue">
<option value="Roof" name="structure">Roof</option>
<option value="Building" name="structure">Building</option>
<option value="Environment" name="structure">Environment</option>
<option value="Pet" name="structure">Pet</option>
</select>
Choose the details
<select id="color">
<option value="a">Gray</option>
<option value="b">Green</option>
<option value="c">Orange</option>
<option value="d">Yellow</option>
</select>
<button id="firstButton">Click Me</button>
<br>
<button id="suprise">What's in my house</button>
<div id="glide">
<div id="build">
</div>
<div id="building">
<div id="pet"></div>
</div>
</div>
<script type="text/javascript" src="build a house.js"></script>
</body>
</html>
My function isn't running through all the && before running. As of now when I click:
building green then click the function makes my surprise button visible. I want the function to have to click through all the options first not just the building value. Then allow my surprise button to become visible.
I want it to run as so:
Roof green(or other option) then click
Building green(or other option) then click
Location green(or other option) then click
Pet green(or other option) then click
After all has been completed, have the surprise button visible:
The function before last is the function I'm having issues with.
It starts as $("#firstButton").click(function()
var pet = $("structureValue").val() == "Pet";
var Color = $("button").on("click", function() {
var color = $("#color");
var roof = $("#structureValue").val() == "Roof";
var building = $("#structureValue").val() == "Building";
var colorId = $(color).val();
if (colorId == "a" && roof) {
$("#build").css("color", "grey")
} else if (colorId == "b" && roof) {
$("#build").css("color", "green")
} else if (colorId == "c" && roof) {
$("#build").css("color", "orange")
} else if (colorId == "d" && roof) {
$("#build").css("color", "yellow")
} else if (colorId == "a" && building) {
$("#building").css("background", "grey")
} else if (colorId == "b" && building) {
$("#building").css("background", "green")
} else if (colorId == "c" && building) {
$("#building").css("background", "orange")
} else if (colorId == "d" && building) {
$("#building").css("background", "yellow")
}
});
/*--------------------Function------------------*/
$("#structureValue ").on("click", function() {
$("#structureValue").change(function() {
var val = $(this).val();
if (val == "Environment") {
$("#color").html("<option value='a'>Mountain</option><option value='b'>Lakeside</option><option value='c'>Beach</option><option value='d'>Island</option>");
} else if (val == "Pet") {
$("#color").html("<option value='a'>Squire</option><option value='b'>Chinchilla</option><option value='c'>Dinosaur</option><option value='d'>Dog</option>");
} else if (val == "Roof", "Building") {
$("#color").html("<option value='a'>Gray</option><option value='b'>Green</option><option value='c'>Orange</option><option value='d'>Yellow</option>")
}
});
});
$("#firstButton").on("click", function() {
var color = $("#color");
var colorId = $(color).val();
if ($("#structureValue").val() == "Roof") {
$("#build").css({
"width": "0",
"height": "0",
"border-left": " 250px solid transparent",
"border-right": " 250px solid transparent",
"border-bottom": " 350px solid ",
"background": "none",
Color
});
} else if ($("#structureValue").val() == "Building") {
$("#building").css({
"width": "500px",
"height": "300px",
Color
})
} else if ($("#structureValue").val() == "Environment" && colorId == "a") {
$("body").css({
"background": "url('https://tpwd.texas.gov/state-parks/franklin-mountains/gallery/franklin-mnt_panorama1.jpg')no-repeat center center fixed",
"-webkit-background-size": "cover",
"-moz-background-size": "cover",
"-o-background-size": "cover",
"background-size": "cover",
"background-size": "100% 100%"
});
} else if ($("#structureValue").val() == "Environment" && colorId == "b") {
$("body").css({
"background": "url('https://openclipart.org/image/2400px/svg_to_png/218873/Autumn-By-The-Lake.png')no-repeat center center fixed",
"-webkit-background-size": "cover",
"-moz-background-size": "cover",
"-o-background-size": "cover",
"background-size": "cover",
"background-size": "100% 100%"
});
} else if ($("#structureValue").val() == "Environment" && colorId == "c") {
$("body").css({
"background": "url('http://travel.home.sndimg.com/content/dam/images/travel/fullset/2014/12/3/top-10-caribbean-beaches-eagle-beach-aruba.jpg.rend.hgtvcom.966.725.suffix/1491584555480.jpeg')no-repeat center center fixed",
"-webkit-background-size": "cover",
"-moz-background-size": "cover",
"-o-background-size": "cover",
"background-size": "cover",
"background-size": "100% 100%"
});
} else if ($("#structureValue").val() == "Environment" && colorId == "d") {
$("body").css({
"background": "url('http://www.jeremyrobinsononline.com/wp-content/uploads/2013/05/White_Island_New_Zealand.jpg')no-repeat center center fixed",
"-webkit-background-size": "cover",
"-moz-background-size": "cover",
"-o-background-size": "cover",
"background-size": "cover",
"background-size": "100% 100%"
});
} else if ($("#structureValue").val() == "Pet" && colorId == "a") {
$("#pet").empty().append("<img class='secert' src='https://media.giphy.com/media/eGOorb2NowXny/giphy.gif'></img>");
} else if ($("#structureValue").val() == "Pet" && colorId == "b") {
$("#pet").empty().append("<img class='secert' src='https://assets.horsenation.com/wp-content/uploads/2013/09/1379338067174322.gif'></img>");
} else if ($("#structureValue").val() == "Pet" && colorId == "c") {
$("#pet").empty().append("<img class='secert' src='https://i0.wp.com/media.giphy.com/media/TfFbA8xkrIymk/giphy.gif?resize=500%2C281&ssl=1'></img>");
} else if ($("#structureValue").val() == "Pet" && colorId == "d") {
$("#pet").empty().append("<img class='secert' src='http://s3.amazonaws.com/barkpost-assets/50+GIFs/17.gif'></img>");
}
});
$("#firstButton").click(function() {
if ($("#structureValue").val() == "Building" && $("#structureValue").val() == "Environment" && "Roof" && "Pet") {
$("#suprise").css("visibility", "visible");
} else {
console.log("wrong")
}
});
$("#suprise").click(function() {
$("#glide").addClass("glide");
setTimeout(function() {
$(".secert").css("visibility", "visible");
}, 4500);
setTimeout(function() {
location.reload();
}, 8500);
})
body {
background-color: green;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 100% 100%
}
img {
max-width: 100%;
height: 300px;
}
#wrapper {
width: 100%;
text-align: center;
}
#build,
#building,
#doors,
#windows {
margin: 0 auto;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.glide {
animation-name: glide;
animation-duration: 8.5s;
animation-iteration-count: 1;
animation-direction: normal;
position: absolute;
}
#-webkit-keyframes glide {
0% {
left: 0px;
top: 0px;
}
15% {
left: 0;
top: 50%;
}
25% {
left: 80%;
top: 50%;
}
35% {
left: 80%;
top: 0;
}
40% {
left: 35%;
top: 0%;
}
75% {
left: 35%;
top: 15%;
}
100% {
left: 35%;
top: 15%;
}
}
#suprise {
visibility: hidden;
margin-top: 30px;
}
.secert {
visibility: hidden;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="build a house.css">
<title></title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
</head>
<body class="cf">
<div id="wrapper">
<h1>What animal is in your house?</h1>
Create a home vision
<select id="structureValue">
<option value="Roof" name="structure">Roof</option>
<option value="Building" name="structure">Building</option>
<option value="Environment" name="structure">Environment</option>
<option value="Pet" name="structure">Pet</option>
</select> Choose the details
<select id="color">
<option value="a">Gray</option>
<option value="b">Green</option>
<option value="c">Orange</option>
<option value="d">Yellow</option>
</select>
<button id="firstButton">Click Me</button>
<br>
<button id="suprise">What's in my house</button>
<div id="glide">
<div id="build">
</div>
<div id="building">
<div id="pet"></div>
</div>
</div>
<script type="text/javascript" src="build a house.js"></script>
</body>
</html>
Your code is very wrong in many aspects. Take a deep look on the code I made. It shall inspire you on how the things should be done.
var myform = document.querySelector('#houseBuilder')
var building = document.querySelector('#building')
var suprise = document.querySelector('#suprise')
var roof = document.querySelector('#roof')
var pet = document.querySelector('#pet')
myform.addEventListener('submit', function(evenet){
switch(myform.structure.value){
case 'roof':
roof.style.color = myform.color.value
break;
case 'building':
building.style.backgroundColor = myform.color.value
break;
case 'environment':
document.body.style.backgroundImage = "url('" + myform.environment.value + "')"
break;
case 'pet':
pet.src = myform.pet.value
break;
}
/* Has user allready set all of building parts? */
if(roof.style.color && building.style.backgroundColor && document.body.style.backgroundImage && pet.src){
suprise.hidden = false
}
/* Stop user from navigating */
event.preventDefault();
return false
})
myform.structure.addEventListener('change', function(){
myform.environment.hidden = true
myform.color.hidden = true
myform.pet.hidden = true
switch(myform.structure.value){
case 'environment':
myform.environment.hidden = false
break;
case 'pet':
myform.pet.hidden = false
break;
default:
myform.color.hidden = false
break;
}
})
#roof {
width: 0px;
height: 0px;
border-left: 250px solid transparent;
border-right: 250px solid transparent;
border-bottom: 350px solid;
background: none;
/* Will hide the roof until other color is set */
color: transparent;
}
#building {
width: 500px;
height: 300px;
}
body {
background-repeat: no-repeat;
background-size: 100% 100%;
background-size: cover;
}
#pet {
margin-left: 10%;
width: 80%;
}
<form id="houseBuilder" name="home">
<h1>What animal is in your house?</h1>
<label>
Create a home vision
<select name="structure">
<option value="roof">Roof</option>
<option value="building">Building</option>
<option value="environment">Environment</option>
<option value="pet">Pet</option>
</select>
</label>
<br>
<label>
Choose the details
<select name="color">
<!-- Option's value is equal to it's innerText if no value us specified -->
<option>Gray</option>
<option>Green</option>
<option>Orange</option>
<option>Yellow</option>
</select>
<select hidden name="pet">
<option value="https://media.giphy.com/media/eGOorb2NowXny/giphy.gif">Squire</option>
<option value="https://assets.horsenation.com/wp-content/uploads/2013/09/1379338067174322.gif">Chinchilla</option>
<option value="https://i0.wp.com/media.giphy.com/media/TfFbA8xkrIymk/giphy.gif?resize=500%2C281&ssl=1">Dinosaur</option>
<option value="http://s3.amazonaws.com/barkpost-assets/50+GIFs/17.gif">Dog</option>
</select>
<select hidden name="environment">
<option value="https://tpwd.texas.gov/state-parks/franklin-mountains/gallery/franklin-mnt_panorama1.jpg">Mountain</option>
<option value="https://openclipart.org/image/2400px/svg_to_png/218873/Autumn-By-The-Lake.png">Lakeside</option>
<option value="http://travel.home.sndimg.com/content/dam/images/travel/fullset/2014/12/3/top-10-caribbean-beaches-eagle-beach-aruba.jpg.rend.hgtvcom.966.725.suffix/1491584555480.jpeg">Beach</option>
<option value="http://www.jeremyrobinsononline.com/wp-content/uploads/2013/05/White_Island_New_Zealand.jpg">Island</option>
</select>
</label>
<br>
<button>Click Me</button>
</form>
<button hidden id="suprise">What's in my house</button>
<div id="glide">
<div id="roof"></div>
<div id="building">
<img id="pet">
</div>
</div>
Related
I have a very simple TicTacToe game that works perfectly with Firefox in Fedora but when I use a Chromium based browser or Windows the "X"s and "O"s are misplaced and the font not used.
var c=0
function a(b){
"X"!=document.getElementById(b).innerHTML&&"O"!=document.getElementById(b).innerHTML&&0==c?(document.getElementById(b).innerHTML="X",c=1):
"X"!=document.getElementById(b).innerHTML&&"O"!=document.getElementById(b).innerHTML&&1==c&&(document.getElementById(b).innerHTML="O",c=0)
z()
}
function r(b){for(c=0;8>=b;b++)document.getElementById(b).innerHTML=""}
function z(){
"X"==document.getElementById(0).innerHTML&&"X"==document.getElementById(1).innerHTML&&"X"==document.getElementById(2).innerHTML?x():
"X"==document.getElementById(3).innerHTML&&"X"==document.getElementById(4).innerHTML&&"X"==document.getElementById(5).innerHTML?x():
"X"==document.getElementById(6).innerHTML&&"X"==document.getElementById(7).innerHTML&&"X"==document.getElementById(8).innerHTML?x():
"X"==document.getElementById(0).innerHTML&&"X"==document.getElementById(3).innerHTML&&"X"==document.getElementById(6).innerHTML?x():
"X"==document.getElementById(1).innerHTML&&"X"==document.getElementById(4).innerHTML&&"X"==document.getElementById(7).innerHTML?x():
"X"==document.getElementById(2).innerHTML&&"X"==document.getElementById(5).innerHTML&&"X"==document.getElementById(8).innerHTML?x():
"X"==document.getElementById(0).innerHTML&&"X"==document.getElementById(4).innerHTML&&"X"==document.getElementById(8).innerHTML?x():
"X"==document.getElementById(2).innerHTML&&"X"==document.getElementById(4).innerHTML&&"X"==document.getElementById(6).innerHTML?x():
"O"==document.getElementById(0).innerHTML&&"O"==document.getElementById(1).innerHTML&&"O"==document.getElementById(2).innerHTML?o():
"O"==document.getElementById(3).innerHTML&&"O"==document.getElementById(4).innerHTML&&"O"==document.getElementById(5).innerHTML?o():
"O"==document.getElementById(6).innerHTML&&"O"==document.getElementById(7).innerHTML&&"O"==document.getElementById(8).innerHTML?o():
"O"==document.getElementById(0).innerHTML&&"O"==document.getElementById(3).innerHTML&&"O"==document.getElementById(6).innerHTML?o():
"O"==document.getElementById(1).innerHTML&&"O"==document.getElementById(4).innerHTML&&"O"==document.getElementById(7).innerHTML?o():
"O"==document.getElementById(2).innerHTML&&"O"==document.getElementById(5).innerHTML&&"O"==document.getElementById(8).innerHTML?o():
"O"==document.getElementById(0).innerHTML&&"O"==document.getElementById(4).innerHTML&&"O"==document.getElementById(8).innerHTML?o():
"O"==document.getElementById(2).innerHTML&&"O"==document.getElementById(4).innerHTML&&"O"==document.getElementById(6).innerHTML&&o()
}
function x(){alert("Ha guanyat X!");c=2}
function o(){alert("Ha guanyat O!");c=2}
body{background-color:#001c5a}
button{
cursor:pointer;
font-family:Tahoma;
font-weight:bolder;
font-size:xx-large;
}
#s{
cursor:default;
margin: 2%;
color:white
}
#q{
width:30rem;
display:flex;
flex-wrap:wrap;
border:solid #c1133d
}
#q button{
display:flex;
flex-direction:column;
width:10rem;
height:10rem;
padding-top:3.5rem;
background-color:#84C7D6;
color:#000;
border:solid #c1133d
}
#x {
width:30rem;
margin: 2%;
padding:2% 2%;
background-color:#c1133d;
color:white;
border:0;
border-radius:66px
}
<html>
<head>
<link rel="stylesheet" href="b.css">
<script src="c.js"></script>
<title>3 en ratlla</title>
</head>
<body>
<center>
<h1 id="s">A jugar!</h1>
<div id="q">
<button id="0" onclick="a(0)"></button>
<button id="1" onclick="a(1)"></button>
<button id="2" onclick="a(2)"></button>
<button id="3" onclick="a(3)"></button>
<button id="4" onclick="a(4)"></button>
<button id="5" onclick="a(5)"></button>
<button id="6" onclick="a(6)"></button>
<button id="7" onclick="a(7)"></button>
<button id="8" onclick="a(8)"></button>
</div>
<button id="x" onclick="r(0)">Tornar a començar</button>
</center>
</body>
</html>
I have tried different browsers and operating sistems, it should work but sometimes it does not. Idk why in Windows it does not use the font I want.
Browsers:
Firefox
Chromium
Google Chrome
Solutions (non working):
text-align
justify-content
vertical-align
Tried using display:flex and it worked for me.
var c=0
function a(b){
"X"!=document.getElementById(b).innerHTML&&"O"!=document.getElementById(b).innerHTML&&0==c?(document.getElementById(b).innerHTML="X",c=1):
"X"!=document.getElementById(b).innerHTML&&"O"!=document.getElementById(b).innerHTML&&1==c&&(document.getElementById(b).innerHTML="O",c=0)
z()
}
function r(b){for(c=0;8>=b;b++)document.getElementById(b).innerHTML=""}
function z(){
"X"==document.getElementById(0).innerHTML&&"X"==document.getElementById(1).innerHTML&&"X"==document.getElementById(2).innerHTML?x():
"X"==document.getElementById(3).innerHTML&&"X"==document.getElementById(4).innerHTML&&"X"==document.getElementById(5).innerHTML?x():
"X"==document.getElementById(6).innerHTML&&"X"==document.getElementById(7).innerHTML&&"X"==document.getElementById(8).innerHTML?x():
"X"==document.getElementById(0).innerHTML&&"X"==document.getElementById(3).innerHTML&&"X"==document.getElementById(6).innerHTML?x():
"X"==document.getElementById(1).innerHTML&&"X"==document.getElementById(4).innerHTML&&"X"==document.getElementById(7).innerHTML?x():
"X"==document.getElementById(2).innerHTML&&"X"==document.getElementById(5).innerHTML&&"X"==document.getElementById(8).innerHTML?x():
"X"==document.getElementById(0).innerHTML&&"X"==document.getElementById(4).innerHTML&&"X"==document.getElementById(8).innerHTML?x():
"X"==document.getElementById(2).innerHTML&&"X"==document.getElementById(4).innerHTML&&"X"==document.getElementById(6).innerHTML?x():
"O"==document.getElementById(0).innerHTML&&"O"==document.getElementById(1).innerHTML&&"O"==document.getElementById(2).innerHTML?o():
"O"==document.getElementById(3).innerHTML&&"O"==document.getElementById(4).innerHTML&&"O"==document.getElementById(5).innerHTML?o():
"O"==document.getElementById(6).innerHTML&&"O"==document.getElementById(7).innerHTML&&"O"==document.getElementById(8).innerHTML?o():
"O"==document.getElementById(0).innerHTML&&"O"==document.getElementById(3).innerHTML&&"O"==document.getElementById(6).innerHTML?o():
"O"==document.getElementById(1).innerHTML&&"O"==document.getElementById(4).innerHTML&&"O"==document.getElementById(7).innerHTML?o():
"O"==document.getElementById(2).innerHTML&&"O"==document.getElementById(5).innerHTML&&"O"==document.getElementById(8).innerHTML?o():
"O"==document.getElementById(0).innerHTML&&"O"==document.getElementById(4).innerHTML&&"O"==document.getElementById(8).innerHTML?o():
"O"==document.getElementById(2).innerHTML&&"O"==document.getElementById(4).innerHTML&&"O"==document.getElementById(6).innerHTML&&o()
}
function x(){alert("Ha guanyat X!");c=2}
function o(){alert("Ha guanyat O!");c=2}
body{background-color:#001c5a}
button{
cursor:pointer;
font-family:Tahoma;
font-weight:bolder;
font-size:xx-large;
}
#s{
cursor:default;
margin: 2%;
color:white
}
#q{
width:30rem;
display:flex;
flex-wrap:wrap;
border:solid #c1133d
}
#q button{
display:flex;
padding: 0;
justify-content: center;
align-content: space-around;
align-items: center;
width:10rem;
height:10rem;
background-color:#84C7D6;
color:#000;
border:solid #c1133d
}
#x {
width:30rem;
margin: 2%;
padding:2% 2%;
background-color:#c1133d;
color:white;
border:0;
border-radius:66px
}
<html>
<head>
<link rel="stylesheet" href="b.css">
<script src="c.js"></script>
<title>3 en ratlla</title>
</head>
<body>
<center>
<h1 id="s">A jugar!</h1>
<div id="q">
<button id="0" onclick="a(0)"></button>
<button id="1" onclick="a(1)"></button>
<button id="2" onclick="a(2)"></button>
<button id="3" onclick="a(3)"></button>
<button id="4" onclick="a(4)"></button>
<button id="5" onclick="a(5)"></button>
<button id="6" onclick="a(6)"></button>
<button id="7" onclick="a(7)"></button>
<button id="8" onclick="a(8)"></button>
</div>
<button id="x" onclick="r(0)">Tornar a començar</button>
</center>
</body>
</html>
Give the button flexbox style:
button {
display: flex;
align-items: center;
justify-content: center;
}
And remove the top padding.
var c = 0
function a(b) {
var el = document.getElementById(b);
"X" != el.innerHTML && "O" != el.innerHTML && 0 == c ? (el.innerHTML = "X", c = 1) :
"X" != el.innerHTML && "O" != el.innerHTML && 1 == c && (el.innerHTML = "O", c = 0)
z()
}
function r(b) {
for (c = 0; 8 >= b; b++) document.getElementById(b).innerHTML = ""
}
function z() {
"X" == document.getElementById(0).innerHTML && "X" == document.getElementById(1).innerHTML && "X" == document.getElementById(2).innerHTML ? x() :
"X" == document.getElementById(3).innerHTML && "X" == document.getElementById(4).innerHTML && "X" == document.getElementById(5).innerHTML ? x() :
"X" == document.getElementById(6).innerHTML && "X" == document.getElementById(7).innerHTML && "X" == document.getElementById(8).innerHTML ? x() :
"X" == document.getElementById(0).innerHTML && "X" == document.getElementById(3).innerHTML && "X" == document.getElementById(6).innerHTML ? x() :
"X" == document.getElementById(1).innerHTML && "X" == document.getElementById(4).innerHTML && "X" == document.getElementById(7).innerHTML ? x() :
"X" == document.getElementById(2).innerHTML && "X" == document.getElementById(5).innerHTML && "X" == document.getElementById(8).innerHTML ? x() :
"X" == document.getElementById(0).innerHTML && "X" == document.getElementById(4).innerHTML && "X" == document.getElementById(8).innerHTML ? x() :
"X" == document.getElementById(2).innerHTML && "X" == document.getElementById(4).innerHTML && "X" == document.getElementById(6).innerHTML ? x() :
"O" == document.getElementById(0).innerHTML && "O" == document.getElementById(1).innerHTML && "O" == document.getElementById(2).innerHTML ? o() :
"O" == document.getElementById(3).innerHTML && "O" == document.getElementById(4).innerHTML && "O" == document.getElementById(5).innerHTML ? o() :
"O" == document.getElementById(6).innerHTML && "O" == document.getElementById(7).innerHTML && "O" == document.getElementById(8).innerHTML ? o() :
"O" == document.getElementById(0).innerHTML && "O" == document.getElementById(3).innerHTML && "O" == document.getElementById(6).innerHTML ? o() :
"O" == document.getElementById(1).innerHTML && "O" == document.getElementById(4).innerHTML && "O" == document.getElementById(7).innerHTML ? o() :
"O" == document.getElementById(2).innerHTML && "O" == document.getElementById(5).innerHTML && "O" == document.getElementById(8).innerHTML ? o() :
"O" == document.getElementById(0).innerHTML && "O" == document.getElementById(4).innerHTML && "O" == document.getElementById(8).innerHTML ? o() :
"O" == document.getElementById(2).innerHTML && "O" == document.getElementById(4).innerHTML && "O" == document.getElementById(6).innerHTML && o()
}
function x() {
alert("Ha guanyat X!");
c = 2
}
function o() {
alert("Ha guanyat O!");
c = 2
}
body {
background-color: #001c5a
}
button {
display: flex; /* add */
align-items: center; /* add */
justify-content: center; /* add */
cursor: pointer;
font-family: Tahoma;
font-weight: bolder;
font-size: xx-large;
}
#s {
cursor: default;
margin: 2%;
color: white
}
#q {
width: 30rem;
display: flex;
flex-wrap: wrap;
border: solid #c1133d
}
#q button {
display: flex;
flex-direction: column;
width: 10rem;
height: 10rem;
/* padding-top: 3.5rem; -- remove */
background-color: #84C7D6;
color: #000;
border: solid #c1133d
}
#x {
width: 30rem;
margin: 2%;
padding: 2% 2%;
background-color: #c1133d;
color: white;
border: 0;
border-radius: 66px
}
<html>
<head>
<link rel="stylesheet" href="b.css">
<script src="c.js"></script>
<title>3 en ratlla</title>
</head>
<body>
<center>
<h1 id="s">A jugar!</h1>
<div id="q">
<button id="0" onclick="a(0)"></button>
<button id="1" onclick="a(1)"></button>
<button id="2" onclick="a(2)"></button>
<button id="3" onclick="a(3)"></button>
<button id="4" onclick="a(4)"></button>
<button id="5" onclick="a(5)"></button>
<button id="6" onclick="a(6)"></button>
<button id="7" onclick="a(7)"></button>
<button id="8" onclick="a(8)"></button>
</div>
<button id="x" onclick="r(0)">Tornar a començar</button>
</center>
</body>
</html>
Whenever I click a button and the value is inputted, the values in the box goes down. I've tried changing some CSS but it doesn't work as I intend it to.
const game = (() => {
const createPlayer = (name, marker, turn) => {
return { name, marker, turn }
}
player1 = createPlayer('Player 1', "x", true)
player2 = createPlayer('Player 2', "o", false)
const gameBoard = () => {
var gameBoard = []
const movement = (e) => {
if (player1.turn === true && e.target.textContent === "") {
gameBoard[e.target.id] = player1.marker
e.target.textContent = player1.marker
player1.turn = false
} else if (player1.turn === false && e.target.textContent === "") {
gameBoard[e.target.id] = player2.marker
e.target.textContent = player2.marker
player1.turn = true
}
if (gameBoard["button-1"] === "x" && gameBoard["button-2"] === "x" && gameBoard["button-3"] === "x") {
alert("perfect")
} else if (gameBoard["button-4"] === "x" && gameBoard["button-5"] === "x" && gameBoard["button-6"] === "x") {
alert("you win")
} else if (gameBoard["button-7"] === "x" && gameBoard["button-8"] === "x" && gameBoard["button-9"] === "x") {
alert("you win")
} else if (gameBoard["button-1"] === "x" && gameBoard["button-4"] === "x" && gameBoard["button-7"] === "x") {
alert("you win")
} else if (gameBoard["button-2"] === "x" && gameBoard["button-5"] === "x" && gameBoard["button-8"] === "x") {
alert("you win")
} else if (gameBoard["button-3"] === "x" && gameBoard["button-6"] === "x" && gameBoard["button-9"] === "x") {
alert("you win")
} else if (gameBoard["button-1"] === "o" && gameBoard["button-2"] === "o" && gameBoard["button-3"] === "o") {
alert("perfect")
} else if (gameBoard["button-4"] === "o" && gameBoard["button-5"] === "o" && gameBoard["button-6"] === "o") {
alert("you win")
} else if (gameBoard["button-7"] === "o" && gameBoard["button-8"] === "o" && gameBoard["button-9"] === "o") {
alert("you win")
} else if (gameBoard["button-1"] === "o" && gameBoard["button-4"] === "o" && gameBoard["button-7"] === "o") {
alert("you win")
} else if (gameBoard["button-2"] === "o" && gameBoard["button-5"] === "o" && gameBoard["button-8"] === "o") {
alert("you win")
} else if (gameBoard["button-3"] === "o" && gameBoard["button-6"] === "o" && gameBoard["button-9"] === "o") {
alert("you win")
} else if (gameBoard["button-1"] === "o" && gameBoard["button-5"] === "o" && gameBoard["button-9"] === "o") {
alert("you win")
} else if (gameBoard["button-3"] === "o" && gameBoard["button-5"] === "o" && gameBoard["button-7"] === "o") {
alert("you win")
} else if (gameBoard["button-1"] === "x" && gameBoard["button-5"] === "x" && gameBoard["button-9"] === "x") {
alert("you win")
} else if (gameBoard["button-3"] === "x" && gameBoard["button-5"] === "x" && gameBoard["button-7"] === "x") {
alert("you win")
}
}
const board = document.querySelector('.item-board').addEventListener('click', movement)
}
gameBoard()
})
game()
.header {
background-color: red;
background-size: cover;
width: 100%;
height: 100%;
}
.item-board {
margin-left: 200px;
display: inline-block;
}
.TicTac {
background-size: cover;
width: 100%;
height: 100%;
}
.btn-1 {
width: 100px;
height: 100px;
border: 2px solid;
margin: -2px;
font-size: 4rem;
padding: 0px;
}
p {
font-size: 200px;
}
<header class="header">
<h1 class="TicTac">Tic-Tac-Toe</h1>
</header>
<div class="item-board">
<div class="item-board">
<button type="button" name="button" id="button-1" class="btn-1"></button>
<button type="button" name="button" id="button-2" class="btn-1"></button>
<button type="button" name="button" id="button-3" class="btn-1"></button>
</div>
<div class="item-board">
<button type="button" name="button" id="button-4" class="btn-1"></button>
<button type="button" name="button" id="button-5" class="btn-1"></button>
<button type="button" name="button" id="button-6" class="btn-1"></button>
</div>
<div class="item-board">
<button type="button" name="button" id="button-7" class="btn-1"></button>
<button type="button" name="button" id="button-8" class="btn-1"></button>
<button type="button" name="button" id="button-9" class="btn-1"></button>
</div>
</div>
I've tried changing some CSS but can't figure out how to make it so that it doesn't go down on each click.
Your .btn-1 styling is aligning the elements based on their text content, this can be solved by applying vertical-align: top; to that class.
Another small change that's worth making would be to change .item-board from inline-block to display: block, as that will prevent the width of the screen affecting whether the rows wrap.
const game = (() => {
const createPlayer = (name, marker, turn) => {
return { name, marker, turn }
}
player1 = createPlayer('Player 1', "x", true)
player2 = createPlayer('Player 2', "o", false)
const gameBoard = () => {
var gameBoard = []
const movement = (e) => {
if (player1.turn === true && e.target.textContent === "") {
gameBoard[e.target.id] = player1.marker
e.target.textContent = player1.marker
player1.turn = false
} else if (player1.turn === false && e.target.textContent === "") {
gameBoard[e.target.id] = player2.marker
e.target.textContent = player2.marker
player1.turn = true
}
if (gameBoard["button-1"] === "x" && gameBoard["button-2"] === "x" && gameBoard["button-3"] === "x") {
alert("perfect")
} else if (gameBoard["button-4"] === "x" && gameBoard["button-5"] === "x" && gameBoard["button-6"] === "x") {
alert("you win")
} else if (gameBoard["button-7"] === "x" && gameBoard["button-8"] === "x" && gameBoard["button-9"] === "x") {
alert("you win")
} else if (gameBoard["button-1"] === "x" && gameBoard["button-4"] === "x" && gameBoard["button-7"] === "x") {
alert("you win")
} else if (gameBoard["button-2"] === "x" && gameBoard["button-5"] === "x" && gameBoard["button-8"] === "x") {
alert("you win")
} else if (gameBoard["button-3"] === "x" && gameBoard["button-6"] === "x" && gameBoard["button-9"] === "x") {
alert("you win")
} else if (gameBoard["button-1"] === "o" && gameBoard["button-2"] === "o" && gameBoard["button-3"] === "o") {
alert("perfect")
} else if (gameBoard["button-4"] === "o" && gameBoard["button-5"] === "o" && gameBoard["button-6"] === "o") {
alert("you win")
} else if (gameBoard["button-7"] === "o" && gameBoard["button-8"] === "o" && gameBoard["button-9"] === "o") {
alert("you win")
} else if (gameBoard["button-1"] === "o" && gameBoard["button-4"] === "o" && gameBoard["button-7"] === "o") {
alert("you win")
} else if (gameBoard["button-2"] === "o" && gameBoard["button-5"] === "o" && gameBoard["button-8"] === "o") {
alert("you win")
} else if (gameBoard["button-3"] === "o" && gameBoard["button-6"] === "o" && gameBoard["button-9"] === "o") {
alert("you win")
} else if (gameBoard["button-1"] === "o" && gameBoard["button-5"] === "o" && gameBoard["button-9"] === "o") {
alert("you win")
} else if (gameBoard["button-3"] === "o" && gameBoard["button-5"] === "o" && gameBoard["button-7"] === "o") {
alert("you win")
} else if (gameBoard["button-1"] === "x" && gameBoard["button-5"] === "x" && gameBoard["button-9"] === "x") {
alert("you win")
} else if (gameBoard["button-3"] === "x" && gameBoard["button-5"] === "x" && gameBoard["button-7"] === "x") {
alert("you win")
}
}
const board = document.querySelector('.item-board').addEventListener('click', movement)
}
gameBoard()
})
game()
.header {
background-color: red;
background-size: cover;
width: 100%;
height: 100%;
}
.item-board {
margin-left: 50px;
display: block; /* This prevents the rows appearing on the same line on wide screens */
}
.TicTac {
background-size: cover;
width: 100%;
height: 100%;
}
.btn-1 {
width: 100px;
height: 100px;
border: 2px solid;
margin: -2px;
font-size: 4rem;
padding: 0px;
vertical-align: top; /* Top will fix the alignment issue when text content is added to the button */
}
p {
font-size: 200px;
}
<header class="header">
<h1 class="TicTac">Tic-Tac-Toe</h1>
</header>
<div class="item-board">
<div class="item-board">
<button type="button" name="button" id="button-1" class="btn-1"></button>
<button type="button" name="button" id="button-2" class="btn-1"></button>
<button type="button" name="button" id="button-3" class="btn-1"></button>
</div>
<div class="item-board">
<button type="button" name="button" id="button-4" class="btn-1"></button>
<button type="button" name="button" id="button-5" class="btn-1"></button>
<button type="button" name="button" id="button-6" class="btn-1"></button>
</div>
<div class="item-board">
<button type="button" name="button" id="button-7" class="btn-1"></button>
<button type="button" name="button" id="button-8" class="btn-1"></button>
<button type="button" name="button" id="button-9" class="btn-1"></button>
</div>
</div>
Try using a grid layout for your board.
I cleaned-up the CSS so that it is easier to follow. I also made the players an array and added a turn counter.
The board element is now passed to the function.
Cell lookup is easier when using indicies.
Cells are now regular <div> elements.
The cell dataset (attributes) holds the marker reference.
The cell occupied check is also easier now.
Cell clicks are delegated by the board.
Hopefully this is much easier to understand. I tried to keep the general structure of your functions.
const game = ((el) => {
const createPlayer = (name, marker) =>
({ name, marker });
let turn = 0;
const players = [
createPlayer('Player 1', 'X'),
createPlayer('Player 2', 'O')
];
const gameBoard = () => {
var gameBoard = [];
const getCell = index => el.querySelector(`.cell:nth-child(${index + 1})`);
const getCells = (...indicies) => indicies.map(getCell);
const allOccupied = (marker, ...indicies) =>
getCells(...indicies).every(cell => cell.dataset.marker === marker);
const checkWin = ({ marker }) =>
allOccupied(marker, 0, 1, 2) /* horiz / top */
|| allOccupied(marker, 3, 4, 5) /* horiz / middle */
|| allOccupied(marker, 5, 7, 8) /* horiz / bottom */
|| allOccupied(marker, 0, 3, 6) /* vert / left */
|| allOccupied(marker, 1, 4, 7) /* vert / middle */
|| allOccupied(marker, 2, 5, 8) /* vert / right */
|| allOccupied(marker, 0, 4, 8) /* diag / negative */
|| allOccupied(marker, 2, 4, 6); /* diag / positive */
const delagateClick = (e) => {
if (e.target.classList.contains('cell')) {
handleMovement(e.target);
}
};
const handleMovement = (cell) => {
const player = players[turn % players.length];
if (!cell.dataset.marker) {
cell.dataset.marker = player.marker;
cell.textContent = player.marker;
if (checkWin(player)) {
setTimeout(() => {
alert(`${player.name} ("${player.marker}") wins`);
}, 100);
}
turn++;
}
};
el.addEventListener('click', delagateClick);
}
gameBoard()
})
game(document.querySelector('.board'));
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
align-items: center;
font-family: Arial;
background: #000;
color: #EEE;
}
header {
display: flex;
justify-content: center;
align-items: center;
background-color: #C33;
background-size: cover;
width: 100%;
height: 4em;
}
header > div {
font-size: 2em;
font-weight: bold;
}
main {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
background: #222;
width: 100%;
}
.board {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 0.25em;
border: thin solid grey;
background: #444;
padding: 0.25em;
}
.cell {
display: flex;
width: 2em;
height: 2em;
border: thin solid grey;
font-size: 2em;
align-items: center;
justify-content: center;
background: #666;
cursor: pointer;
}
.cell:not([data-marker]):hover {
background: #888;
}
.cell[data-marker] {
cursor: not-allowed;
}
<header>
<div>Tic-Tac-Toe</div>
</header>
<main>
<div class="board">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</main>
I have 2 divs (#1 and #2) and two buttons. When a button is clicked, it should select a div to move and when the arrow keys are pressed, this div should move. The other should remain in its place. If the other button is clicked, the div that had previously moved should remain in its new position and the newly selected div should move along with the arrow keys.
.counter {
border-radius:50%;
width:20px;
height:20px;
position:absolute;
transition:top linear 0.6s, left linear 0.6s;
font-size:20px;
font-weight:bold;
text-align:center;
padding:20px;
top: 525px;
left: 60px;
background-color:red;
}
<button onclick="one">Move One</button>
<button onclick="two">Move Two</button>
<div class="counter" id="1" >1</div>
<div class="counter" id="2">2</div>
var go = "1"
function one() {
go = "1"
}
function two() {
go = "2"
}
document.onkeydown = detectKey;
function detectKey(e) {
var posLeft = document.getElementById('').offsetLeft
var posTop = document.getElementById('').offsetTop
if (e.keyCode == '39') {
if (go === "1") {
document.getElementById('1').style.left = (posLeft+150)+"px"
}
if (e.keyCode == '38') {
document.getElementById('1').style.top = (posTop-150)+"px"
}
}
if (e.keyCode == '39') {
if (go === "2") {
document.getElementById('2').style.left = (posLeft+150)+"px"
}
if (e.keyCode == '38') {
document.getElementById('2').style.top = (posTop-150)+"px"
}
}
}
Here is a solution. I have edited the values a bit, but you can easily change them back.
const buttonOne = document.getElementById('button-one');
const buttonTwo = document.getElementById('button-two');
const elementOne = document.getElementById('one');
const elementTwo = document.getElementById('two');
buttonOne.addEventListener('click', clickOnButtonOne);
buttonTwo.addEventListener('click', clickOnButtonTwo);
let selectedElement = null;
function clickOnButtonOne() {
selectedElement = elementOne;
}
function clickOnButtonTwo() {
selectedElement = elementTwo;
}
document.onkeydown = detectKey;
function detectKey(e) {
if (selectedElement) {
if (e.keyCode == '39') {
var posLeft = selectedElement.offsetLeft
selectedElement.style.left = (posLeft + 50) + "px"
}
if (e.keyCode == '38') {
var posTop = selectedElement.offsetTop
selectedElement.style.top = (posTop - 50) + "px"
}
}
}
.counter {
border-radius: 50%;
width: 20px;
height: 20px;
position: absolute;
transition: top linear 0.6s, left linear 0.6s;
font-size: 20px;
font-weight: bold;
text-align: center;
padding: 20px;
top: 500px;
left: 60px;
background-color: red;
}
<button id="button-one" onclick="one">Move One</button>
<button id="button-two" onclick="two">Move Two</button>
<div class="counter" id="one">1</div>
<div class="counter" id="two">2</div>
I wrote the code below to generate a GUI to sort some data and it works very well, but, when I preload some data in the output fields (topSlot or bottomSlot), I wanted the drop event to be applied (and the stripes effects applied).
How the code works:
Elements are dragged from the right column to the top or bottom div
When dropped into the top div, the element in the right column gets a stripe in the top and is forbidden from being dropped again into the top div (the same happens when the element is dropped into the bottom div)
To return the element to the right column, just drag it out of the new container
Eager for answers.
Grateful,
jsfiddle
https://jsfiddle.net/xfhvdz5g/1/
html:
<div id="wrapper">
<div id="left">
<div id="top">
top
<div id="topSlot" half="top">
<div id="test1"><h2>test1</h2></div>
<div id="test2"><h2>test2</h2></div>
</div>
</div>
<div id="bottom">
bottom
<div id="bottomSlot" half="bottom">
<div id="test2"><h2>test2</h2></div>
<div id="test3"><h2>test3</h2></div>
</div>
</div>
</div>
<div id="right">
right
<div id="elements">
<div id="test1"><h2>test1</h2></div>
<div id="test2"><h2>test2</h2></div>
<div id="test3"><h2>test3</h2></div>
<div id="foo1"><h2>foo1</h2></div>
<div id="foo2"><h2>foo2</h2></div>
<div id="foo3"><h2>foo3</h2></div>
</div>
</div>
</div>
css:
#wrapper {
width: 500px;
height: 500px;
position: fixed;
border: 2px solid #000000;
background-color: #ffffff;
padding: 20px;
z-index: 10;
}
#left {
float: left;
width: 230px;
height: 460px;
}
#top {
float: left;
width: 230px;
height: 220px;
border: 1px dotted #CCCCCC;
}
#bottom {
margin-top: 20px;
float: left;
width: 230px;
height: 220px;
border: 1px dotted #CCCCCC;
}
#right {
float: right;
width: 200px;
height: 460px;
border: 1px solid #CCCCCC;
}
#topSlot, #bottomSlot
{
min-height: 50px;
background-color: #fffccf;
}
#elements {
background-color: #cfffcf;
}
#elements div
{
background-color: #CCCCCC;
background-image: url("http://s3.amazonaws.com/spoonflower/public/design_thumbnails/0067/0133/diagonal_red_stripes_copy_shop_preview.png");
background-position-y: 200%;
background-size: 100% 50%;
background-repeat: no-repeat;
}
javascript:
$('#elements > div').each(function(i, j) {
var oldId = $(this).attr('id');
$(this).addClass('correct').attr('header', '0').attr('id', oldId).appendTo('#elements').draggable({
stack: '#elements div',
cursor: 'move',
helper: 'clone',
revert: 'invalid'
})
});
$('#topSlot, #bottomSlot').droppable({
accept: "#elements div",
drop: function(event, ui)
{
var myId = $(this).attr('half');
var element = $(ui.draggable);
var draggableBottom = $(ui.draggable).attr('bottom');
var draggableTop = $(ui.draggable).attr('top');
if ((myId == "top") && (draggableTop != "1")) {
$(ui.draggable).attr("top", "1");
$(this).append($(ui.draggable).clone());
$(this).find('*').attr("pos", "top");
var draggableBottom = $(ui.draggable).attr('bottom');
var draggableTop = $(ui.draggable).attr('top');
console.log("draggableTop" + draggableTop);
console.log("draggableBottom" + draggableBottom);
if ((draggableTop == "1") && (draggableBottom == "1")) {
$(ui.draggable).css("background-position-y", "0");
$(ui.draggable).css("background-size", "100% 100%");
$(ui.draggable).draggable('disable');
} else if (draggableTop == "1") {
$(ui.draggable).css("background-position-y", "0");
$(ui.draggable).css("background-size", "100% 50%");
} else {
$(ui.draggable).css("background-position-y", "100%");
$(ui.draggable).css("background-size", "100% 50%");
}
} else if ((myId == "bottom") && (draggableBottom != "1")) {
$(ui.draggable).attr("bottom", "1");
$(this).append($(ui.draggable).clone());
$(this).find('*').attr("pos", "bottom");
var draggableBottom = $(ui.draggable).attr('bottom');
var draggableTop = $(ui.draggable).attr('top');
console.log("draggableTop" + draggableTop);
console.log("draggableBottom" + draggableBottom);
if ((draggableTop == "1") && (draggableBottom == "1")) {
$(ui.draggable).css("background-position-y", "0");
$(ui.draggable).css("background-size", "100% 100%");
$(ui.draggable).draggable('disable');
} else if (draggableTop == "1") {
$(ui.draggable).css("background-position-y", "0");
$(ui.draggable).css("background-size", "100% 50%");
} else {
$(ui.draggable).css("background-position-y", "100%");
$(ui.draggable).css("background-size", "100% 50%");
}
}
}
});
$('#topSlot, #bottomSlot').sortable({
scroll: false
}, {
receive: function(event, ui) {
sortableIn = 1;
$(".ui-sortable-helper").css({
"opacity": "1.0",
"transform": "scale(1.0)"
});
},
over: function(event, ui) {
sortableIn = 1;
$("#sortable").sortable({
revert: '100'
});
$(".ui-sortable-helper").css({
"opacity": "1.0",
"transform": "scale(1.0)"
});
},
out: function(event, ui) {
sortableIn = 0;
$("#sortable").sortable({
revert: false
});
$(".ui-sortable-helper").css({
"opacity": "0.3",
"transform": "scale(0.8)"
});
},
beforeStop: function(event, ui) {
var pos = ui.position,
top = pos.top,
left = pos.left,
item = ui.item,
width = item.css("width"),
height = item.css("height");
if (sortableIn == 0) {
ui.item.attr("style", ui.item.attr("style") + " " +
"position: absolute; " +
"top: " + top + "px; " +
"height: " + height + "px; " +
"width: " + width + "; " +
"left: " + left + "px; ");
ui.item.css({
"transform": "scale(0.0)"
}).animate({
opacity: "0.0"
}, '300', function() {
var origem = $(ui.item).attr('pos');
var elementId = $(ui.item).attr('id');
$('#elements').find('#' + elementId).draggable('enable');
var draggableBottom = $('#elements').find('#' + elementId).attr('bottom');
var draggableTop = $('#elements').find('#' + elementId).attr('top');
if (origem == "bottom" && draggableTop == "1") {
$('#elements').find('#' + elementId).css("background-position-y", "0");
$('#elements').find('#' + elementId).css("background-size", "100% 50%");
$('#elements').find('#' + elementId).removeAttr("bottom");
} else if (origem == "top" && draggableBottom == "1") {
$('#elements').find('#' + elementId).css("background-position-y", "100%");
$('#elements').find('#' + elementId).css("background-size", "100% 50%");
$('#elements').find('#' + elementId).removeAttr("top");
} else {
$('#elements').find('#' + elementId).css("background-position-y", "200%");
$('#elements').find('#' + elementId).removeAttr("top");
$('#elements').find('#' + elementId).removeAttr("bottom");
}
$(ui.draggable).remove();
});
}
}
});
(function($) {
// Make jQuery's :contains case insensitive (like HTML5 datalist)
// Changed the name to prevent overriding original functionality
$.expr[":"].RD_contains = $.expr.createPseudo(function(arg) {
return function(elem) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
$.fn.relevantDropdown = function(options) {
options = $.extend({
fadeOutSpeed: 'normal', // speed to fade out the dataList Popup
change: null
}, options);
return this.each(function() {
var $input = $(this),
list_id = $input.attr('list'),
$datalist = $("#" + list_id),
datalistItems = $datalist.find("option"),
searchPosition,
scrollValue = 0,
// Used to prevent reflow
temp_items = document.createDocumentFragment(),
temp_item = null;
// Insert home for new fake datalist
$("<ul />", {
"class": "datalist",
"id": list_id
}).appendTo("body");
// Remove old datalist
$datalist.remove();
// Update pointer
$datalist = $("#" + list_id);
// Fill new fake datalist
datalistItems.each(function() {
temp_item = $("<li />", {
// .val is required here, not .text or .html
// HTML *needs* to be <option value="xxx"> not <option>xxx</option> (IE)
"text": $(this).val()
})[0];
temp_items.appendChild(temp_item);
});
$datalist.append(temp_items);
// Update pointer
datalistItems = $datalist.find("li");
// Typey type type
$input
.on("focus", function() {
// Reset scroll
$datalist.scrollTop(0);
scrollValue = 0;
})
.on("blur", function() {
// If this fires immediately, it prevents click-to-select from working
setTimeout(function() {
$datalist.fadeOut(options.fadeOutSpeed);
datalistItems.removeClass("active");
}, 500);
})
.on("keyup focus", function(e) {
searchPosition = $input.position();
// Build datalist
$datalist
.show()
.css({
top: searchPosition.top + $(this).outerHeight(),
left: searchPosition.left,
width: $input.outerWidth()
});
datalistItems.hide();
$datalist.find("li:RD_contains('" + $input.val() + "')").show();
});
// Don't want to use :hover in CSS so doing this instead
// really helps with arrow key navigation
datalistItems
.on("mouseenter", function() {
$(this).addClass("active").siblings().removeClass("active");
})
.on("mouseleave", function() {
$(this).removeClass("active");
});
// Window resize
$(window).resize(function() {
searchPosition = $input.position();
$datalist
.css({
top: searchPosition.top + $(this).outerHeight(),
left: searchPosition.left,
width: $input.outerWidth()
});
});
// Watch arrow keys for up and down
$input.on("keydown", function(e) {
var active = $datalist.find("li.active"),
datalistHeight = $datalist.outerHeight(),
datalistItemsHeight = datalistItems.outerHeight();
// up arrow
if (e.keyCode == 38) {
if (active.length) {
prevAll = active.prevAll("li:visible");
if (prevAll.length > 0) {
active.removeClass("active");
prevAll.eq(0).addClass("active");
}
if (prevAll.length && prevAll.position().top < 0 && scrollValue > 0) {
$datalist.scrollTop(scrollValue -= datalistItemsHeight);
}
}
}
// down arrow
if (e.keyCode == 40) {
if (active.length) {
var nextAll = active.nextAll("li:visible");
if (nextAll.length > 0) {
active.removeClass("active");
nextAll.eq(0).addClass("active");
}
if (nextAll.length && (nextAll.position().top + datalistItemsHeight) >= datalistHeight) {
$datalist.stop().animate({
scrollTop: scrollValue += datalistItemsHeight
}, 200);
}
} else {
datalistItems.removeClass("active");
$datalist.find("li:visible:first").addClass("active");
}
}
// return or tab key
if (e.keyCode == 13 || e.keyCode == 9) {
if (active.length) {
$input.val(active.text());
item_selected(active.text());
}
$datalist.fadeOut(options.fadeOutSpeed);
datalistItems.removeClass("active");
}
// keys
if (e.keyCode != 13 && e.keyCode != 38 && e.keyCode != 40) {
// Reset active class
datalistItems.removeClass("active");
$datalist.find("li:visible:first").addClass("active");
// Reset scroll
$datalist.scrollTop(0);
scrollValue = 0;
}
});
// When choosing from dropdown
datalistItems.on("click", function() {
var active = $("li.active");
if (active.length) {
$input.val($(this).text());
}
$datalist.fadeOut(options.fadeOutSpeed);
datalistItems.removeClass("active");
item_selected($(this).text());
});
function item_selected(new_text) {
if (typeof options.change === 'function')
options.change.call(this, new_text);
}
});
};
})(jQuery); === === === === === === === === === === === === === === === === === === === ===
//$('input[type=text]').relevantDropdown();
$('input[type=text]').relevantDropdown({
fadeOutSpeed: 0
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<HTML>
<HEAD>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style>
p {
margin: 0 0 40px 0;
}
p:last-child {
margin-bottom: 0;
}
.datalist {
list-style: none;
display: none;
background: white;
color: black;
box-shadow: 0 2px 2px #999;
position: absolute;
left: 0;
top: 0;
max-height: 300px;
overflow-y: auto;
}
.datalist:empty {
display: none !important;
}
.datalist li {
padding: 3px;
font: 13px"Lucida Grande", Sans-Serif;
}
.datalist li.active {
background: #3875d7;
color: white;
}
</style>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js" type="text/javascript"></script>
<script>
if (!Modernizr.input.list) {
alert('Your browser does not support HTML5 Datalist. We will now use Polyfill to add its support.');
}
// Safari reports success of list attribute, so doing ghetto detection instead
yepnope({
test: (!Modernizr.input.list),
yep: [
'js/jquery.relevant-dropdown.js',
'js/load-fallbacks.js'
]
});
</script>
<TITLE>EXO KnowlegeBase</TITLE>
<STYLE>
body,
input {
font-family: 'Open Sans', Calibri, Arial;
margin: 0px;
padding: 0px
}
a {
color: #0254eb
}
a:visited {
color: #0254eb
}
#header h2 {
color: #fff;
background-color: #3275a8;
margin: 0px;
padding: 5px;
height: 40px;
padding: 15px
}
html,
body,
#container {
height: 100%
}
body>#container {
height: auto;
min-height: 100%
}
#footer {
font-size: 12px;
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
text-align: center
}
#content {
padding-bottom: 3em;
padding: 10px
}
input {
font-size: 15px
}
.style1 {
border: 3px solid #fa0;
font-size: 20px
}
.style2 {
border: 2px solid #af7;
font-size: 18px
}
</STYLE>
</HEAD>
<BODY>
<div id="container">
<div id="header">
<H2>
<img border="0px" src="#" align="left"/>
HTML5 Datalist Example
</H2>
</div>
<div id="content">
<p>Exo KnolwledgeBase: Exchange Online
</p>
<br/>Enter Country name:
<input type="text" list="countries" name="mycountry" />
<datalist id="countries">
<select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dynamic-select">
<option value="Afghanisthan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Antigua & Deps">Antigua & Deps</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
<option value="Uruguay">Uruguay</option>
<option value="Uzbekistan">Uzbekistan</option>
<option value="Vanuatu">Vanuatu</option>
<option value="Vatican City">Vatican City</option>
<option value="Venezuela">Venezuela</option>
<option value="Vietnam">Vietnam</option>
<option value="Yemen">Yemen</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select>
</datalist>
</BODY>
</HTML>
I have 2 Jquery and a html that helps me with autocorrect fetch values assigned. Where i am lost is i cant let that selected value populated in the search box open a Href webpage.
The .js files has these content
First .Js:-
(function($) {
// Make jQuery's :contains case insensitive (like HTML5 datalist)
// Changed the name to prevent overriding original functionality
$.expr[":"].RD_contains = $.expr.createPseudo(function(arg) {
return function( elem ) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
$.fn.relevantDropdown = function(options) {
options = $.extend({
fadeOutSpeed: 'normal', // speed to fade out the dataList Popup
change: null
}, options);
return this.each(function() {
var $input = $(this),
list_id = $input.attr('list'),
$datalist = $("#" + list_id),
datalistItems = $datalist.find("option"),
searchPosition,
scrollValue = 0,
// Used to prevent reflow
temp_items = document.createDocumentFragment(),
temp_item = null;
// Insert home for new fake datalist
$("<ul />", {
"class": "datalist",
"id" : list_id
}).appendTo("body");
// Remove old datalist
$datalist.remove();
// Update pointer
$datalist = $("#" + list_id);
// Fill new fake datalist
datalistItems.each(function() {
temp_item = $("<li />", {
// .val is required here, not .text or .html
// HTML *needs* to be <option value="xxx"> not <option>xxx</option> (IE)
"text": $(this).val()
})[0];
temp_items.appendChild(temp_item);
});
$datalist.append(temp_items);
// Update pointer
datalistItems = $datalist.find("li");
// Typey type type
$input
.on("focus", function() {
// Reset scroll
$datalist.scrollTop(0);
scrollValue = 0;
})
.on("blur", function() {
// If this fires immediately, it prevents click-to-select from working
setTimeout(function() {
$datalist.fadeOut(options.fadeOutSpeed);
datalistItems.removeClass("active");
}, 500);
})
.on("keyup focus", function(e) {
searchPosition = $input.position();
// Build datalist
$datalist
.show()
.css({
top: searchPosition.top + $(this).outerHeight(),
left: searchPosition.left,
width: $input.outerWidth()
});
datalistItems.hide();
$datalist.find("li:RD_contains('" + $input.val() + "')").show();
});
// Don't want to use :hover in CSS so doing this instead
// really helps with arrow key navigation
datalistItems
.on("mouseenter", function() {
$(this).addClass("active").siblings().removeClass("active");
})
.on("mouseleave", function() {
$(this).removeClass("active");
});
// Window resize
$(window).resize(function() {
searchPosition = $input.position();
$datalist
.css({
top: searchPosition.top + $(this).outerHeight(),
left: searchPosition.left,
width: $input.outerWidth()
});
});
// Watch arrow keys for up and down
$input.on("keydown", function(e) {
var active = $datalist.find("li.active"),
datalistHeight = $datalist.outerHeight(),
datalistItemsHeight = datalistItems.outerHeight();
// up arrow
if ( e.keyCode == 38 ) {
if (active.length) {
prevAll = active.prevAll("li:visible");
if (prevAll.length > 0) {
active.removeClass("active");
prevAll.eq(0).addClass("active");
}
if ( prevAll.length && prevAll.position().top < 0 && scrollValue > 0 ){
$datalist.scrollTop(scrollValue-=datalistItemsHeight);
}
}
}
// down arrow
if ( e.keyCode == 40 ) {
if (active.length) {
var nextAll = active.nextAll("li:visible");
if (nextAll.length > 0) {
active.removeClass("active");
nextAll.eq(0).addClass("active");
}
if ( nextAll.length && (nextAll.position().top + datalistItemsHeight) >= datalistHeight ){
$datalist.stop().animate({
scrollTop: scrollValue += datalistItemsHeight
}, 200);
}
} else {
datalistItems.removeClass("active");
$datalist.find("li:visible:first").addClass("active");
}
}
// return or tab key
if ( e.keyCode == 13 || e.keyCode == 9 ){
if (active.length) {
$input.val(active.text());
item_selected(active.text());
}
$datalist.fadeOut(options.fadeOutSpeed);
datalistItems.removeClass("active");
}
// keys
if ( e.keyCode != 13 && e.keyCode != 38 && e.keyCode != 40 ){
// Reset active class
datalistItems.removeClass("active");
$datalist.find("li:visible:first").addClass("active");
// Reset scroll
$datalist.scrollTop(0);
scrollValue = 0;
}
});
// When choosing from dropdown
datalistItems.on("click", function() {
var active = $("li.active");
if (active.length) {
$input.val($(this).text());
}
$datalist.fadeOut(options.fadeOutSpeed);
datalistItems.removeClass("active");
item_selected($(this).text());
});
function item_selected(new_text) {
if( typeof options.change === 'function' )
options.change.call(this, new_text);
}
});
};
})(jQuery);
Second .js is as follows:-
//$('input[type=text]').relevantDropdown();
$('input[type=text]').relevantDropdown({
fadeOutSpeed: 0
});
And the HTML is as Follows:-
<HTML>
<HEAD>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style>
p {
margin: 0 0 40px 0;
}
p:last-child {
margin-bottom: 0;
}
.datalist {
list-style: none;
display: none;
background: white;
color: black;
box-shadow: 0 2px 2px #999;
position: absolute;
left: 0;
top: 0;
max-height: 300px;
overflow-y: auto;
}
.datalist:empty {
display: none !important;
}
.datalist li {
padding: 3px;
font: 13px "Lucida Grande", Sans-Serif;
}
.datalist li.active {
background: #3875d7;
color: white;
}
</style>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js" type="text/javascript"></script>
<script>
if(!Modernizr.input.list) {
alert('Your browser does not support HTML5 Datalist. We will now use Polyfill to add its support.');
}
// Safari reports success of list attribute, so doing ghetto detection instead
yepnope({
test : (!Modernizr.input.list),
yep : [
'js/jquery.relevant-dropdown.js',
'js/load-fallbacks.js'
]
});
</script>
<TITLE>EXO KnowlegeBase</TITLE>
<STYLE>body,input{font-family:'Open Sans',Calibri,Arial;margin:0px;padding:0px}a{color:#0254eb}a:visited{color:#0254eb}#header h2{color:#fff;background-color:#3275a8;margin:0px;padding:5px;height:40px;padding:15px}html,body,#container{height:100%}body>#container{height:auto;min-height:100%}#footer{font-size:12px;clear:both;position:relative;z-index:10;height:3em;margin-top:-3em;text-align:center}#content{padding-bottom:3em;padding:10px}input{font-size:15px}.style1{border:3px solid #fa0;font-size:20px}.style2{border:2px solid #af7;font-size:18px}</STYLE>
</HEAD>
<BODY>
<div id="container">
<div id="header">
<H2>
<img border="0px" src="#" align="left"/>
HTML5 Datalist Example
</H2>
</div>
<div id="content">
<p>Exo KnolwledgeBase: Exchange Online</p>
<br/>
Enter Country name:
<input type="text" list="countries" name="mycountry" />
<datalist id="countries">
<select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dynamic-select">
<option value="Afghanisthan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Antigua & Deps">Antigua & Deps</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
<option value="Uruguay">Uruguay</option>
<option value="Uzbekistan">Uzbekistan</option>
<option value="Vanuatu">Vanuatu</option>
<option value="Vatican City">Vatican City</option>
<option value="Venezuela">Venezuela</option>
<option value="Vietnam">Vietnam</option>
<option value="Yemen">Yemen</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select>
</datalist>
</BODY>
</HTML>
I know i am missing something here but not sure what. Thank you in advance!