I have a user interface with buttons made of list items. I want to be able to have them be individually selectable, where they will control the color of another div. Right now I have them laid out and they have a css transition where they grow in scale when hovered over but I want then to stay fully scaled when selected. How would I do this?
I tried using the focus pseudo-class but that only works on input elements. I also tried active pseudo class but I think I am missing something with using those.
Lastly, what would I do if I want them to change the background color of another div to the color of the button?
I haven't built the elements that will be effected yet, I was just going to use some divs shaped like squares with a background color to test, but I am stuck at this point with giving the list items active states. There is probably some JS aspect to this that I am missing.
Here is my code:
HTML:
<div id="colorSelection">
<div class="base_color selector">
<p class="sectionHeader">Base Color</p>
<ul class="swatchSelector">
<hr class="crossbar" width="90%">
<li class="swatch one"></li>
<li class="swatch two"></li>
<li class="swatch three"></li>
<li class="swatch four"></li>
<li class="swatch five"></li>
<li class="swatch six"></li>
<li class="swatch seven"></li>
<li class="swatch eight"></li>
</ul>
</div>
</div>
CSS:
/*reset*/
html, body, ul, li, p, a, img, hr{
margin: 0px;
padding: 0px;
border: 0px;
list-style-type: none;
text-decoration: none;
}
#colorSelection {
width: 320px;
height: 720px;
background-color:#d4d4d4;
display: inline-block;
}
.selector{
margin-bottom: 20px;
padding: 10px;
margin-left: 4px;
}
.sectionHeader {
font-family: helvetica,arial,sans-serif;
font-size: 20px;
color:black;
margin-bottom: 7px;
}
.swatch {
width: 17px;
height: 17px;
border: 2px solid;
border-radius: 50%;
display: inline-block;
margin-left: 12px;
text-align: center;
position: relative;
transition: transform:2s ease-in-out;
box-shadow: 0px 1px 5px rgba(0,0,0,0.5);
cursor: pointer;
}
.swatch:hover{
transform: scale(1.3);
}
.crossbar{
border:1px white solid;
position: relative;
right: 0px;
top: 12px;
box-shadow: 0px 1px 5px rgba(0,0,0,0.25);
}
.one{
margin-left: 0px;
background-color:#ffdc01;
border-color:white;
transition: border .01s;
}
.one:hover, .one:active {
border-color:#ffdc01;
}
.two{
background-color:#f27245;
border-color:white;
transition: border .01s;
}
.two:hover, .two:active {
border-color:#f27245;
}
.three {
background-color:#db3844;
border-color:white;
transition: border .01s;
}
.three:hover, .three:active {
border-color:#db3844;
}
.four {
background-color:#754c90;
border-color:white;
transition: border .01s;
}
.four:hover, .four:active {
border-color:#754c90;
}
.five{
background-color:#005c9f;
border-color:white;
transition: border .01s;
}
.five:hover, .five:active {
border-color:#005c9f;
}
.six{
background-color:#343333;
border-color:white;
transition: border .01s;
}
.six:hover, .six:active {
border-color:#343333;
}
.seven {
background-color:#6a6c70;
border-color:white;
transition: border .01s;
}
.seven:hover, .seven:active {
border-color:#6a6c70;
}
.eight {
background-color:#e9eae8;
border-color:white;
transition: border .01s;
}
.eight:hover, .eight:active {
border-color:#e9eae8;
}
https://jsfiddle.net/cf2zxf88/2/
I want then to stay fully scaled when selected. How would I do this?
With a CSS class .scale { transfrom: scale(1.3) } that can be used by JavaScript with el.classList.add() and el.classList.remove().
Lastly, what would I do if I want them to change the background color
of another div to the color of the button?
Access all list items with document.querySelectorAll()
Add a click event to each list item
Get the background color with Window.getComputedStyle(el, null).getPropertyValue("background-color")
In total
(Added class .scale and <div id="bg"></div>)
var colorButtons = document.querySelectorAll(".swatchSelector > li"),
bg = document.getElementById("bg"),
curr = 0;
for (var i = 0; i < colorButtons.length; i += 1) {
(function(i) {
colorButtons[i].addEventListener("click", function() {
bg.style.backgroundColor = window.getComputedStyle(this, null).getPropertyValue("background-color");
colorButtons[curr].classList.remove("scale");
curr = i;
colorButtons[curr].classList.add("scale");
})
})(i);
}
colorButtons[curr].classList.add("scale");
bg.style.backgroundColor = window.getComputedStyle(colorButtons[curr], null).getPropertyValue("background-color");
/*reset*/
html,
body,
ul,
li,
p,
a,
img,
hr {
margin: 0px;
padding: 0px;
border: 0px;
list-style-type: none;
text-decoration: none;
}
#colorSelection,
#bg {
vertical-align: top;
width: 320px;
height: 720px;
background-color: #d4d4d4;
display: inline-block;
}
.selector {
margin-bottom: 20px;
padding: 10px;
margin-left: 4px;
}
.sectionHeader {
font-family: helvetica, arial, sans-serif;
font-size: 20px;
color: black;
margin-bottom: 7px;
}
.swatch {
width: 17px;
height: 17px;
border: 2px solid;
border-radius: 50%;
display: inline-block;
margin-left: 12px;
text-align: center;
position: relative;
transition: transform:2s ease-in-out;
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5);
cursor: pointer;
}
.swatch:hover,
.scale {
transform: scale(1.3);
}
.crossbar {
border: 1px white solid;
position: relative;
right: 0px;
top: 12px;
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.25);
}
.one {
margin-left: 0px;
background-color: #ffdc01;
border-color: white;
transition: border .01s;
}
.one:hover,
.one:active {
border-color: #ffdc01;
}
.two {
background-color: #f27245;
border-color: white;
transition: border .01s;
}
.two:hover,
.two:active {
border-color: #f27245;
}
.three {
background-color: #db3844;
border-color: white;
transition: border .01s;
}
.three:hover,
.three:active {
border-color: #db3844;
}
.four {
background-color: #754c90;
border-color: white;
transition: border .01s;
}
.four:hover,
.four:active {
border-color: #754c90;
}
.five {
background-color: #005c9f;
border-color: white;
transition: border .01s;
}
.five:hover,
.five:active {
border-color: #005c9f;
}
.six {
background-color: #343333;
border-color: white;
transition: border .01s;
}
.six:hover,
.six:active {
border-color: #343333;
}
.seven {
background-color: #6a6c70;
border-color: white;
transition: border .01s;
}
.seven:hover,
.seven:active {
border-color: #6a6c70;
}
.eight {
background-color: #e9eae8;
border-color: white;
transition: border .01s;
}
.eight:hover,
.eight:active {
border-color: #e9eae8;
}
<div id="colorSelection">
<div class="base_color selector">
<p class="sectionHeader">Base Color</p>
<ul class="swatchSelector">
<hr class="crossbar" width="90%">
<li class="swatch one scale"></li>
<li class="swatch two"></li>
<li class="swatch three"></li>
<li class="swatch four"></li>
<li class="swatch five"></li>
<li class="swatch six"></li>
<li class="swatch seven"></li>
<li class="swatch eight"></li>
</ul>
</div>
</div>
<div id="bg"></div>
Related
I am creating a sort-of popup menu that is specific to each .smallCatalogBlock div. The circle you see under the title is the trigger. The issue I am having is that if you click on the blue circle, both popup menus fadeIn, when it should only be that specific one.
The same applies to the popup title. It uses only the first .smallCatalogBlock information, opposed to the one clicked on.
Does anyone know how I can leave this in the dynamic setup I am going for, while populating the specific information for the one clicked on?
var catalogName = $('.smallCatalogBlock').data('fill-specs');
//Filling Circle
$('.catalogSmallCircle').html(
'<div class="catalogSmallCircleIn" data-catalog-name=' + catalogName + '><div class="total-center"><div class="circlePlus"></div></div></div><div class="catalogCircleExpand"><div class="catalogExpandClose">x</div><div class="total-center expandText"><span class="catalogName pdfSubHeader"></span><p class="dGw circleExpandText"></p><button class="catalogDownload downloadButton" name="Profile_Catalog" data-catalog-now="Profile Small Catalog Button" data-catalog-view-name="Profile Catalog">View</button><button class="catalogDownload requestButton" data-catalog-name="Profile Catalog">Request</button></div></div>'
)
//Circle Expand
$('.catalogSmallCircleIn').on('click', function() {
// old $('.catalogSmallCircle').addClass('rectangle').find('.catalogSmallCircleIn').hide();
$(this).closest('.catalogSmallCircle').addClass('rectangle').find('.catalogSmallCircleIn').hide();
// old $('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
//$(this).closest('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
$('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
//Getting Catalog Name
let catalogChoice = $(this).data('catalog-name');
$('.catalogName').html(catalogChoice);
event.stopPropagation();
});
//Close Circle
$('.catalogExpandClose').on('click', function(event) {
$('.catalogSmallCircle').removeClass('rectangle').find('.catalogSmallCircleIn').fadeIn();
$('.catalogCircleExpand').hide().removeClass('rectangle');
});
.smallCatalogWrap {
width: 100%;
height: auto;
margin: 60px 0;
}
.smallCatalogBlock {
width: 25%;
height: auto;
display: inline-block;
vertical-align: top;
margin: 20px auto;
text-decoration: none;
}
.smallCatalogTitle {
font-family: 'Nunito', sans-serif;
color: #4d4d4d;
font-size: 1.3rem;
text-align: center;
display: block;
font-weight: 400;
}
.smallCatalogButtonWrap {
margin-top: 15px;
width: 100%;
position: relative;
}
.catalogSmallCircle {
background: #225DB8;
width: 70px;
height: 70px;
position: absolute;
margin: 10px auto;
left: 90%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
border-radius: 100%;
box-shadow: 0 0 20px rgba(0, 0, 0, .9);
border: 2px solid #FFF;
webkit-transition: all 1s;
transition: all 1s;
cursor: pointer;
}
.catalogSmallCircle.rectangle {
border-radius: 0;
border: 2px solid #094765;
background: linear-gradient(to bottom right, #225DB8, #4174C2);
width: 400px;
min-height: 200px;
webkit-transition: all 1s;
transition: all 1s;
transform: translate(-45%, -45%);
-webkit-transform: translate(-45%, -45%);
z-index: 1;
cursor: auto;
}
.catalogSmallCircleIn {
width: 100%;
height: 100%;
position: relative;
}
.circlePlus {
background-size: 30px 30px;
width: 30px;
height: 30px;
display: block;
margin: 0 auto;
z-index: 1;
}
.catalogCircleExpand {
height: 0;
display: none;
opacity: 0;
webkit-transition: all .5s;
transition: all .5s;
}
.catalogCircleExpand.rectangle {
opacity: 1;
height: auto;
webkit-transition: all .5s;
transition: all .5s;
transition-delay: .4s;
-webkit-transition-delay: .4s;
padding: 10px 0;
}
.expandText .catalogDownload {
font-size: 1.1rem;
padding: .7em 1.1em;
}
.expandText .pdfSubHeader {
font-size: 1.1rem;
}
.catalogExpandClose {
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="smallCatalogWrap">
<div class="smallCatalogBlock" data-fill-specs="Catalog">
<span class="smallCatalogTitle">Catalog</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
<div class="smallCatalogBlock" data-fill-specs="Technology">
<span class="smallCatalogTitle">Technology</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
</div>
You have to loop over the smallCatalogBlocks and build them individually, otherwise they will all have the same catalog name. And then in your event handlers, you have to make all your selectors be contextual lookups.
I ran the modified code, and it appears to be building the circles correctly, however for some reason the text is not showing up on them, even though the text is there if you inspect the element. Didn't figure that part out, but this should show you at least how to do the contextual logic and the looping to build the elements.
$('.smallCatalogBlock').each(function(index, catalogBlock){
var catalogName = $(catalogBlock).data('fill-specs');
console.log(catalogName);
//Filling Circle
$('.catalogSmallCircle', catalogBlock).html(
'<div class="catalogSmallCircleIn" data-catalog-name='+ catalogName +'><div class="total-center"><div class="circlePlus"></div></div></div><div class="catalogCircleExpand"><div class="catalogExpandClose">x</div><div class="total-center expandText"><span class="catalogName pdfSubHeader"></span><p class="dGw circleExpandText"></p><button class="catalogDownload downloadButton" name="Profile_Catalog" data-catalog-now="Profile Small Catalog Button" data-catalog-view-name="Profile Catalog">View</button><button class="catalogDownload requestButton" data-catalog-name="Profile Catalog">Request</button></div></div>'
)
});
//Circle Expand
$('.catalogSmallCircleIn').on('click', function(event) {
var $smallCircle = $(this).closest('.catalogSmallCircle');
$smallCircle
.addClass('rectangle')
.find('.catalogSmallCircleIn')
.hide();
$smallCircle
.find('.catalogCircleExpand')
.fadeIn(100)
.addClass('rectangle');
//Getting Catalog Name
let catalogChoice = $(this).data('catalog-name');
console.log(catalogChoice);
$smallCircle.find('.catalogName').html(catalogChoice);
event.stopPropagation();
});
//Close Circle
$('.catalogExpandClose').on('click', function(event) {
var $smallCircle = $(this).closest('.catalogSmallCircle');
$smallCircle
.removeClass('rectangle')
.find('.catalogSmallCircleIn')
.fadeIn();
$smallCircle
.find('.catalogCircleExpand')
.hide()
.removeClass('rectangle');
});
.smallCatalogWrap {
width: 100%;
height: auto;
margin: 60px 0;
}
.smallCatalogBlock {
width: 25%;
height: auto;
display: inline-block;
vertical-align: top;
margin: 20px auto;
text-decoration: none;
}
.smallCatalogTitle {
font-family: 'Nunito', sans-serif;
color: #4d4d4d;
font-size: 1.3rem;
text-align: center;
display: block;
font-weight: 400;
}
.smallCatalogButtonWrap {
margin-top: 15px;
width: 100%;
position: relative;
}
.catalogSmallCircle {
background: #225DB8;
width: 70px;
height: 70px;
position: absolute;
margin: 10px auto;
left: 90%;
-webkit-transform: translateX(-50%);transform: translateX(-50%);
border-radius: 100%;
box-shadow: 0 0 20px rgba(0,0,0,.9);
border: 2px solid #FFF;
webkit-transition: all 1s;transition: all 1s;
cursor: pointer;
}
.catalogSmallCircle.rectangle {
border-radius: 0;
border: 2px solid #094765;
background: linear-gradient(to bottom right,#225DB8,#4174C2);
width: 400px;
min-height: 200px;
webkit-transition: all 1s; transition: all 1s;transform: translate(-45%, -45%);-webkit-transform: translate(-45%, -45%);
z-index: 1;
cursor: auto;
}
.catalogSmallCircleIn {
width: 100%;
height: 100%;
position: relative;
}
.circlePlus {
background-size: 30px 30px;
width: 30px;
height: 30px;
display: block;
margin: 0 auto;
z-index: 1;
}
.catalogCircleExpand {
height: 0;
display: none;
opacity: 0;
webkit-transition: all .5s;
transition: all .5s;
}
.catalogCircleExpand.rectangle {
opacity: 1;
height: auto;
webkit-transition: all .5s;
transition: all .5s;
transition-delay: .4s;
-webkit-transition-delay: .4s;
padding: 10px 0;
}
.expandText .catalogDownload {
font-size: 1.1rem;
padding: .7em 1.1em;
}
.expandText .pdfSubHeader {
font-size: 1.1rem;
}
.catalogExpandClose {
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="smallCatalogWrap">
<div class="smallCatalogBlock" data-fill-specs="Catalog">
<span class="smallCatalogTitle">Catalog</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div><div class="smallCatalogBlock" data-fill-specs="Technology">
<span class="smallCatalogTitle">Technology</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
</div>
I doing a tshirt designing website for my college project.I have added preview option where when the user types it get displayed on the tshirt present in the iframe..I have also added a proceed button, when the user clicks on it,I want the text to get stored in database but for some reason I cant get it to work.I am using ajax and php for the database part.But the javascript part with ajax is not working.Even alert function is not working for onclick funtction..
Any help is appreciated..
$(document).ready(function)() {
$("#btn").click( function() {
var tshirt-text =$('#tshirt-text').val();
var size =$('#size').val();
alert("tshirt-text");
$.ajax ({
type :'POST',
data :{tshirt-text:tshirt-text,size:size},
url :"storeinfo.inc.php",
success :function(result)
})
});
});
var $text = $( '.tshirt-text' );
var $demoText = $( '.demo-tshirt-text' );
$text.on( 'keyup', function ( e ) {
$demoText.text( $text.val() );
} );
body{
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding: 0px;
overflow-x: hidden;
font-family: sans-serif;
}
header{
padding: 8px;
height:155px;
color: white;
background-color:#6495ED;
clear: left;
width:100%;
}
footer
{ padding: 4px;
color: white;
background-color:#6495ED;
width:100%;
text-align:center;
font-size:20px;
font-family:Arial;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
width:100%;
}
li {
float: left;
}
li a,.dropbtn {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: Arial;
font-size: 20px;
}
li a:hover:not(.active), .dropdown:hover .dropbtn {
background-color: #111;
}
li a.active {
background-color: royalblue;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: royalblue;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
h2.tagline
{
text-align:center;
font-size:35px;
font-style:italic;
font-family: "Florence", cursive;
margin-top:-100px;
margin-left:-80px;
}
iframe {
width: 700px;
height: 700px;
margin: -590px 90px 20px 650px;
display: inline-block;
position: relative;
border:none;
}
.designcontainer {
display: inline-block;
margin:0 0 0 10px;
}
.colorbutton {
background-color: #4CAF50; /* Green */
border: none;
color: black;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 4px 2px;
cursor: pointer;
border-radius: 14px;
transition-duration: 0.4s;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.colorbutton:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.buttonw {background-color: white; color:black;} /* White */
.buttonb {background-color: blue; color:white;} /* Blue */
.buttonr {background-color: #f44336; color:white;} /* Red */
.buttony {background-color: yellow; } /* Yellow */
#keyframes click-wave {
0% {
height: 40px;
width: 40px;
opacity: 0.35;
position: relative;
}
100% {
height: 200px;
width: 200px;
margin-left: -80px;
margin-top: -80px;
opacity: 0;
}
}
.option-input {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
position: relative;
top: 5.33333px;
right: 0;
bottom:0;
left: 0;
height: 25px;
width: 25px;
transition: all 0.15s ease-out 0s;
background: #cbd1d8;
border: none;
color: #fff;
cursor: pointer;
display: inline-block;
margin-right: 0.5rem;
outline: none;
position: relative;
z-index: 1000;
line-height: 50px;
}
.option-input:hover {
background: #9faab7;
}
.option-input:checked {
background: royalblue;
}
.option-input:checked::before {
height: 15px;
width: 15px;
position: absolute;
content: '\2714';
display: inline-block;
font-size: 26.66667px;
text-align: center;
line-height: 28px;
}
.option-input:checked::after {
-webkit-animation: click-wave 0.65s;
-moz-animation: click-wave 0.65s;
animation: click-wave 0.65s;
background: royalblue;
content: '';
display: block;
position: relative;
z-index: 100;
}
.option-input.radio {
border-radius: 50%;
}
.option-input.radio::after {
border-radius: 50%;
}
.labelname
{
font-size: 20px;
}
span {
position: relative;
display: inline-block;
margin: 30px 10px;
}
.gate {
display: inline-block;
width: 500px;
height: 100px;
padding: 10px 0 10px 15px;
font-family: "Open Sans", sans;
font-weight: 400;
color: royalblue;
background: #c6c6c6;
border: 0;
border-radius: 10px;
outline: 0;
text-indent: 65px;
transition: all .3s ease-in-out;
}
.gate::-webkit-input-placeholder {
color: #c6c6c6;
text-indent: 0;
font-weight: 300;
font-size:18px;
}
.gate + label {
display: inline-block;
position: absolute;
top: 0;
left: 0;
padding: 10px 15px;
text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4);
background: royalblue;
transition: all .4s ease-in-out;
border-radius:5px;
transform-origin: left bottom;
z-index: 99;
color:white;
size:18px;
}
.gate + label:before, .gate + label:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 10px;
background: royalblue;
transform-origin: left bottom;
transition: all .4s ease-in-out;
pointer-events: none;
z-index: -1;
font-size:18px;
}
.gate + label:before {
background: rgba(3, 36, 41, 0.2);
z-index: -2;
right: 20%;
font-size:18px;
}
span:nth-child(2) .gate {
text-indent: 85px;
}
span:nth-child(2) .gate:focus,
span:nth-child(2) .gate:active {
text-indent: 0;
}
.gate:focus,
.gate:active {
color: ;
text-indent: 0;
background:#c6c6c6;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.gate:focus::-webkit-input-placeholder,
.gate:active::-webkit-input-placeholder {
color: floralwhite;
}
.gate:focus + label,
.gate:active + label {
transform: rotate(-66deg);
border-radius: 3px;
}
.gate:focus + label:before,
.gate:active + label:before {
transform: rotate(10deg);
}
.demo-tshirt {
position: relative;
width: 200px;
height: 100px;
margin: 0 0 0 890px;
z-index:999;
}
.demo-tshirt-text {
position: absolute;
top: 30%;
left: 45%;
width: 60%;
transform: translateX( -45%);
font-size:25px;
color: black;
font-family: Arial, sans-serif;
}
.spacereducer101{
margin-top:-80px;
}
<!DOCTYPE html>
<html>
<head>
<title>
T-shirtinator-PERSONALIZE
</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery-1.5.min.js"></script>
<LINK REL="icon" HREF="image/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/pshirts.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<br>
<img src="image/logo.png" >
<h2 class=tagline>"The T-shirt you design <br>
at your doorstep"</h2>
</header>
<ul>
<li>Home</li>
<li><a class="active" href="#ptshirts">Personalized T-shirts</a></li>
<li class="dropdown">
Buy From Us
<div class="dropdown-content">
Quotes printed T-shirts
Graphic printed T-shirts
Memes printed T-shirts
</div>
</li>
<li>Help</li>
<li>Contact Us</li>
<li onclick="document.getElementById('id02').style.display='block'"style="float:right">Sign Up</li>
<li onclick="document.getElementById('id01').style.display='block'" style="float:right">Login</li>
</ul>
<div class="designcontainer">
<h1>Select Colour</h1>
<button class="colorbutton buttonw">White</button>
<button class="colorbutton buttonr">Red</button>
<button class="colorbutton buttonb">Blue</button>
<button class="colorbutton buttony">Yellow</button>
<h1>Select Size</h1>
<div>
<label class="labelname">
<input type="radio" class="option-input radio" id="size" name="size" value="small" checked />
Small(S)
</label>
<label class="labelname">
<input type="radio" class="option-input radio" id="size" name="size" value="medium" />
Medium(M)
</label>
<label class="labelname">
<input type="radio" class="option-input radio" id="size" name="size" value="large"/>
Large(L)
</label>
</div>
<div class=spacereducer101> </div>
<div class="demo-tshirt">
<div class="demo-tshirt-text"></div>
</div>
<h1>Enter the Text you want on your T-shirt</h1>
<span>
<input type="text" name="tshirt-text" class="tshirt-text gate" id="tshirt-text" placeholder="Max 10 letters.." />
<label for="tshirt-text">Enter</label>
</span>
<br>
<input type="button" id="btn" name="Proceed" value="Proceed" class="colorbutton" style="margin-top:20px; margin-left:200px;">
<iframe name="myiframe" src="iframetshirtwhite.html"></iframe>
</div>
<footer >
Copyright © 2017 www.DAJ.com
</footer>
</body>
</html>
PHP code:
<?php
$connection =mysqli_connect('localhost','root','','textstorage');
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
if($_POST['tshirt-text']){
$tshirt-text =$_POST['tshirt-text'];
$size =$_POST['size'];
$q = "insert into information values('','tshirt-text','size')";
$query = mysqli_query($connection,$q);
if ($query) {
echo"data inserted";
}
}
?>
If you check the console, you'll see that the problem is the first line inside of the javascript click function...
var tshirt-text = $('#tshirt-text').val();
... because '-' is not a valid character for javascript variable names. Just change it by tshirttext (in all your code), and you will see the alert and should be able to go on.
I hope it helps
You've got some errors with you JavaScript. Try running your JavaScript through a validator (for example, http://beautifytools.com/javascript-validator.php) to see where your errors are. In addition to the one A. Iglesias found, you've got an extra clothes parenthesis on line 1, the same tshirt-text error from line 3 is repeated on line 9, and your syntax for an event handler for success on line 13 isn't right, but I can't tell what you're trying to do.
You've also got a conceptual problem. Lines 17 through 22 should be inside your $(document).ready handler. The ready event runs after the initial HTML is loaded into the browser and ready to go, so any reference to HTML elements outside of that event handler may be referring to them before they're ready.
I wanted to make this a comment to your question, but it's too long, so hopefully it's okay an answer. Perhaps once you've fixed some of these JavaScript issues, post an update to your question in the form of an edit and we can then see what else is going on if it's not working.
edit: I reformatted your JavaScript and tried to resolve any syntax errors. If you open up your browser developer tools and run this JS Fiddle (with comments and without comments), you'll see there are no syntax errors in the console. That doesn't mean it works, just that it's syntactically valid. In fact, this shouldn't work, because the AJAX success handler I wrote simply logs the response.
$(document).ready ( // When function parameters and code blocks are big, I like to
// put the opening ( or { at the end of line and put the the
// closing } or ) in the same column way at the end. I find it
// is easier to keep track of openings and closings.
function() { // no extra close parenthesis right after "function"
$("#btn").click(
function()
{
var tshirtText = $('#tshirt-text').val(); // Variable names can only be
// letters, numbers, dollar symbols,
// and underscores. They cannot start
// with numbers.
var size = $('#size').val();
alert("tshirt-text");
$.ajax(
{ // For clarity, I'll separate out the opening ( and opening {
// and the closing } and closing ) when they are one after the other.
type: 'POST'
// I like to put my commas on the next line rather than the previous line.
// I think it makes it more clear that you're moving on to the next thing.
, data: { "tshirt-text": tshirtText, size: size } // You can specify names in
// this JSON-style syntax that
// aren't valid JavaScript
// identifiers, but you have
// to put them in quotes.
, url: "storeinfo.inc.php"
, success: function(data, textStatus, jqXhr)
{
console.log(data);
}
}
);
}
);
var $text = $('.tshirt-text');
var $demoText = $('.demo-tshirt-text');
$text.on(
'keyup'
, function (e) {
$demoText.text($text.val());
}
);
}
);
I'm doing a custom drop-down navigation but when it toggles the logo, in this codepen represented by the blue div, goes to the bottom of the navigation. I've been trying to work around this for a while now and would appreciate any help.
Here is my code:
HTML
<div class='container-fluid nav'>
<div class='container'>
<div class = 'nav__btn--toggle u-inlineBlock u-center' onclick="animateNavbarToggle(this); toggleDropdown();">
<div class = 'nav__btn bar1'></div>
<div class = 'nav__btn bar2'></div>
<div class = 'nav__btn bar3'></div>
</div>
<ul class = "nav__dropdown">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<div class='nav__brand u-inlineBlock'>
logo
</div>
</div>
</div>
CSS
.nav__dropdown {
padding-left: 0;
margin-top: 75px;
list-style: none;
text-align: center;
box-sizing: border-box;
display: none;
}
.nav__dropdown li {
font-size: 20px;
padding: 25px;
width: 40%;
background: white;
border-bottom: 1px solid black;
}
.nav__dropdown li:last-child{
border-bottom: none;
}
.nav__dropdown li:hover{
background: black;
color: seashell
}
.u-inlineBlock {
display: inline-block;
}
JS
function toggleDropdown(x) {
$('.nav__dropdown').slideToggle(500);
}
After this, I'll try to add a sub menu on the right side, so if you could point me in the right path for that as well that would be great
(Notice that this is just a bonus for me, I don't care if you don't help me with that so don't downvote for being too broad or something like that. I also saw some similar questions but they did not help)
Thanks in advance!
Just move the logo before the ul, and remove the margin-top from the ul. And if you want the toggle button and submenu to be flush with the white header, remove .nav { height: 75px; }
function animateNavbarToggle(x) {
x.classList.toggle("toggled");
}
function toggleDropdown(x) {
$('.nav__dropdown').slideToggle(500);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
body {
background-color: pink;
height: 2000px;
}
/*------------------------------------*\
#NAVIGATION
\*------------------------------------*/
.nav {
background-color: white;
height: 75px;
}
.nav__brand {
height: 68px;
width: 227px;
background-color: lightblue;
text-align: center;
}
/**
* Navigation dropdown button
*/
.nav__btn {
width: 22PX;
height: 3px;
background-color: black;
margin: 4px 0;
}
.nav__btn--toggle {
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 22PX;
height: 3px;
background-color: coral;
margin: 4px 0;
transition: 0.4s;
}
/* Rotate first bar */
.toggled .bar1 {
-webkit-transform: rotate(-45deg) translate(-5px, 5px);
transform: rotate(-45deg) translate(-5px, 5px);
}
/* Fade out the second bar */
.toggled .bar2 {
opacity: 0;
}
/* Rotate last bar */
.toggled .bar3 {
-webkit-transform: rotate(45deg) translate(-4px, -4px);
transform: rotate(45deg) translate(-4px, -6px);
}
/**
* Navigation Dropdown
*/
.nav__dropdown {
padding-left: 0;
list-style: none;
text-align: center;
box-sizing: border-box;
display: none;
}
.nav__dropdown li {
font-size: 20px;
padding: 25px;
width: 40%;
background: white;
border-bottom: 1px solid black;
}
.nav__dropdown li:last-child {
border-bottom: none;
}
.nav__dropdown li:hover {
background: black;
color: seashell;
}
/*------------------------------------*\
#UTILITIES
\*------------------------------------*/
.u-inlineBlock {
display: inline-block;
}
.u-center {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
<div class='container-fluid nav'>
<div class='container'>
<div class='nav__btn--toggle u-inlineBlock u-center' onclick="animateNavbarToggle(this); toggleDropdown();">
<div class='nav__btn bar1'></div>
<div class='nav__btn bar2'></div>
<div class='nav__btn bar3'></div>
</div>
<div class='nav__brand u-inlineBlock'>
logo
</div>
<ul class="nav__dropdown">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
try adding position: fixed to your nav__dropdown CSS
.nav__dropdown {
padding-left: 0;
margin-top: 75px;
list-style: none;
text-align: center;
box-sizing: border-box;
display: none;
position: fixed;
}
Position fixed essentially removes the content from the flow of the document window, which makes it not cause any interactions with your logo.
More on position fixed here
I'm trying to make a small jQuery function to hide & show content when a radio button is checked. The script works but when the radio button is checked the content is not showing right. It's possible to make effect to slide out then slide in the other content?
HTML:
<!-- Section class pricing -->
<section class="pricing">
<div class="container">
<hr class="hr">
<!-- Price table switcher -->
<div class="table-switcher" id="btn">
<p class="fieldset">
<input type="radio" checked="checked" name="duration" value="account-1" id="account-1">
<label for="account-1">1</label>
<input type="radio" name="duration" value="account-2" id="account-2">
<label for="account-2">2</label>
<span class="btn-switch"></span>
</p>
</div>
<!-- Price table switcher end -->
<div class="clearfix"></div>
<!-- Info box -->
<div class="clearfix"></div>
<div class="accounts container">
<div class="price-table">
<!-- Account Plus -->
<div class="col-md-12">
<!-- Table -->
<div class="account-1 account-box">
<ul class="list-unstyled col-md-6">
<li class="plan">Basic</li>
<li class="plan-cost">$99k</li>
<li class="plan-duration">Per Month</li>
<li>Use on One Site</li>
<li>Feature Two</li>
<li>Another Great Feature</li>
<li class="plan-button">Get Started »</li>
</ul>
<!-- Table end -->
<!-- Table -->
<ul class="list-unstyled col-md-6">
<li class="plan">Basic</li>
<li class="plan-cost">$99</li>
<li class="plan-duration">Per Month</li>
<li>Use on One Site</li>
<li>Feature Two</li>
<li>Another Great Feature</li>
<li class="plan-button">Get Started »</li>
</ul>
<!-- Table end -->
</div>
</div>
<!-- Account Plus end -->
<!-- Account O€ -->
<div class="account-2 account-box">
<!-- Table -->
<div class="col-md-6">
<ul class="list-unstyled">
<li class="plan">Basic</li>
<li class="plan-cost">$99</li>
<li class="plan-duration">Per Month</li>
<li>Use on One Site</li>
<li>Feature Two</li>
<li>Another Great Feature</li>
<li class="plan-button">Get Started »</li>
</ul>
</div>
<!-- Table end -->
<!-- Table -->
<div class="col-md-6">
<ul class="list-unstyled">
<li class="plan">Basic</li>
<li class="plan-cost">$99</li>
<li class="plan-duration">Per Month</li>
<li>Use on One Site</li>
<li>Feature Two</li>
<li>Another Great Feature</li>
<li class="plan-button">Get Started »</li>
</ul>
</div>
<!-- Table end -->
</div>
<!-- Account 0€ -->
</div>
</div>
</div>
</section>
CSS:
// Prebuild colors
#white : #ffffff;
#dark : #4a4a4a;
#blue : #4e94c9;
#blue-dark : #2279bc;
#blue-font : #276db3;
#purple : #805ca2;
#purple-dark: #5b308d;
#gray-light : #a8a8a8;
#gray-font : #797979;
#pink : #bf4194;
#pink-light : #F04;
// Other
#letter-spacing:(2px);
.bold { font-weight: 700}
.hr {
max-width: 100px;
height: 4px;
background: url("../images/hr.gif") no-repeat center;
margin: 20px auto;
}
// Pricing section -3
.pricing {
padding: 100px 0;
h2 {
letter-spacing: #letter-spacing;
font-size: 30px;
font-weight: 400;
text-transform: uppercase;
text-align: center;
color: #blue-font;
.bold {
color: #purple-dark;
}
}
// Price table switcher
.table-switcher {
text-align: center;
input[type="radio"]:checked + label + .btn-switch,
input[type="radio"]:checked + label:nth-of-type(n) + .cd-switch{
/* Safary bug fix selector */
-webkit-transform: translateX(120px);
-moz-transform: translateX(120px);
-ms-transform: translateX(120px);
-o-transform: translateX(120px);
transform: translateX(120px);
background: #blue-font;
}
.fieldset {
margin-top: 15px;
margin-bottom: 30px;
display: inline-block;
position: relative;
padding: 0px 2px;
border-radius: 50em;
border: 1px solid #gray-light;
input[type="radio"]:checked + label {
color: #white;
transition: all 0.5s;
}
}
input[type="radio"] {
position: absolute;
opacity: 0;
}
label {
position: relative;
z-index: 1;
display: inline-block;
float: left;
width: 120px;
height: 39px;
line-height: 45px;
cursor: pointer;
font-size: 1.4rem;
}
.btn-switch {
position: absolute;
top: 2px;
left: 2px;
height: 40px;
width: 120px;
background-color: #purple-dark;
border-radius: 50em;
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
transition: transform 0.5s;
}
}
.no-js .table-switcher {
display: none;
}
// Table info
// Popover box
.arrow_box {
position: relative;
background: #purple;
border: 3px solid #purple-dark;
padding: 15px;
color: #white;
}
.arrow_box{
&:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
&:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
}
.arrow_box {
&:before{
border-color: rgba(136, 183, 213, 0);
border-top-color: #purple-dark;
border-width: 10px;
margin-left: -10px;
}
&:after {
border-color: rgba(136, 183, 213, 0);
border-top-color: #purple-dark;
border-width: 10px;
margin-left: -10px;
}
}
// Accounts
.accounts {
position: relative;
transition: all 0.5s;
}
.top-tooltip{
background-color: #26c07d;
font-size: 12px;
font-weight: 400;
margin:-87px auto 68px;
padding: 6px;
color:#fff;
width:80px;
}
.price-table {
width: 100%;
.account-1 {
.col-md-6 {
padding: 0;
left: 0;
}
}
}
.best-value{
padding: 87px 0 72px !important;
}
.small-boxes {
margin-top: 40px;
padding-top: 72px;
padding-bottom: 68px;
text-transform: uppercase;
text-align: center;
background-color: #fff;
width: 100%;
}
.plan {
font-size: 24px;
color: #79a5b3;
line-height:30px;
border: none !important;
}
.plan-cost {
font-size:60px !important;
color:#000 !important;
line-height:90px !important;
border: none !important;
}
.plan-duration {
line-height: 30px !important;
margin-bottom:35px;
border: none !important;
}
.plan-button {
border: none !important;
margin-top: 30px;
}
.plan-button-big {
border: none !important;
margin-top: 45px;
}
.price-table ul li {
color: #a2a4a6;
font-size: 16px;
border-bottom: #f2f4f5 1px solid;
border-top: #f2f4f5 1px solid;
line-height: 47px;
}
.price-table ul li a{
background-color:#FFF;
border: #d4d7d9 1px solid;
padding: 15px 30px;
font-size: 20px;
color:#27b0d8;
font-weight:400;
text-decoration:none;
border-radius: 4px;
}
.price-table ul li a:hover{
background-color:#44bbdd;
border: #44bbdd 1px solid;
color:#fff;
}
.price-table ul li a.big{
background-color:#ec4f4f;
border: #ec4f4f 1px solid;
padding: 15px 30px;
font-size: 24px;
color:#fff;
font-weight:400;
text-decoration:none;
border-radius: 4px;
}
.price-table ul li a.big:hover{
background-color:#293340;
border: #293340 1px solid;
color:#fff;
}
}
JS:
$('.account-2').hide();
$(document).ready(function () {
$('input[name="duration"]').click(function () {
$('.account-1').fadeOut('slow');
$('.account-2').fadeIn('slow');
});
$('input[name="duration"]').click(function () {
$('.account-2').fadeOut('slow');
$('.account-1').fadeIn('slow');
});
});
Demo
Try this script... codepen
$('.account-2').hide();
$(document).ready(function () {
var flagcheck= false;
$('input[name="duration"]').click(function () {
if(flagcheck==false){
$('.account-1').fadeOut('slow');
$('.account-2').fadeIn('slow');
flagcheck=true;
}else{
$('.account-2').fadeOut('slow');
$('.account-1').fadeIn('slow');
flagcheck= false;
}
});
});
It is not working as you are using same trigger to do the same thing. Use
this.val()
to target your content that you want to display.
UPDATED:
$(document).ready(function () {
$('input[name="duration"]').click(function () {
$objToHide = "";
$('.account-box').each(function(){//find out which obj is visible here
if ($(this).css("display") == "block"){
$objToHide = $(this);
}
});
var content = $(this).val()
$objToHide.fadeOut('slow', function(){
$("."+content).fadeIn('slow')
});
});
});
Try above now, with this one you will find the visible element first and fade it out, when the fadeOut event will be done the other element will fade in.
I am trying to use a tooltip in a datatable, but whenever it comes up, It gets cut off by the edges of the table. I have tried all different kinds of css but nothing has worked out. Is there some css or javascript i can implement to get this to work?
Here is the tooltip code in the location index:
<div class="tooltip-item">
<div class="actions">
<%= link_to "#{location.name}", location %>
</div>
<div class="tooltip">
<div class="tooltip-content">
LR System ID: <%= "#{#post.lr_system_id}" %>
<br>
LR Version: <%= "#{#post.lr_version}" %>
</div>
</div>
locations.scss:
.tooltip-item {
text-align: center;
margin-top: 10px;
}
intro {
#include outer-container;
p { #include span-columns(3); }
//article { #include span-columns(9); }
}
#content {
p {
font-family: Lato, sans-serif;
}
}
table {
a:link{color:#000;}
a:visited{color:#000;}
a:hover{color:#959A8B;}
th {
width: 9%; // 100% / 11 (num columns) ≈ 9%
}
td {
width: 9%;
}
border-width: medium;
border-style: solid;
border-color: $bar-border-color
}
table {font-size: 14px;}
tooltip.scss:
.tooltip-item {
display: inline-block;
position: relative;
text-align: center;
&:focus .tooltip,
&:hover .tooltip {
opacity: 1;
visibility: visible;
}
.tooltip {
#include position(absolute, null 0 3em);
#include transition(all 0.2s ease-in-out);
background-color: #f8f8f8;
margin-left: -3.7em;
opacity: 0;
text-align: center;
visibility: hidden;
width: 12em;
border-radius: 15px;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #D7D7D7;
border-right-width: thin;
border-right-style: solid;
border-right-color: #E7E7E7;
}
.tooltip::after {
#include position(absolute, null 0 null);
bottom: -1em;
color: #f8f8f8;
content: "▼";
font-size: 1.4em;
text-align: center;
}
.tooltip-content {
z-index: 9999;
margin-bottom: 0;
}
}