This dropdown icon wont turn smoothly, transitions dont work, when the dropdown opens its sudden, same with when it closes, it doesnt close when you click elsewhere on the screen and stays open.
hopefully someone can help and if there is an answer it helps other people looking to do similar.
Here is my code:
JsFiddle if you find it easier: https://jsfiddle.net/Vorex/tr3196L7/1/
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.cssText === "display: block;") {
dropdownContent.style.cssText = "display: none;";
} else {
dropdownContent.style.cssText = "display: block;";
}
});
}
$(".btn_body").click(function () {
$(this).find('i').toggleClass('fa-caret-down fa-caret-right');
if ($(".btn_body").not(this).find("i").hasClass("fa-caret-down")) {
$(".btn_body").not(this).find("i").toggleClass('fa-caret-down fa-caret-right');
}
});
/*===================
CHAT SIDEBAR
====================*/
.chatbar {
scrollbar-width: none;
font-family: 'Tomorrow', sans-serif;
height: 100%;
color: white;
background-color: #363b42;
list-style-type: none;
text-align: center;
margin: 0px;
width: 25%;
padding: 0px;
overflow-y: scroll;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow-x: hidden;
padding-top: 20px;
}
.chatbar h1 {
font-size: 25px;
}
.chatbar a, .dropdown-btn {
font-size: 20px;
text-align: center;
display: block;
position: sticky;
text-decoration: none;
padding: 10px;
padding-bottom:15px;
color: white;
transition: 1s ease;
}
.chatbar a:hover, .dropdown-btn:hover {
background-color: #5a626d;
border-radius: 10px;
transition: background-color .5s ease;
}
.chatbar img {
height: 32px;
width: 32px;
border-radius: 16px;
float: left;
}
.chatbar::-webkit-scrollbar {
display: none;
}
.dropdown-btn {
padding: 10px;
text-decoration: none;
font-size: 20px;
color: #fff;
display: block;
border: none;
background: none;
width: 100%;
text-align: center;
cursor: pointer;
outline: none;
font-family: 'Tomorrow', sans-serif;
}
.dropdown-container {
display: none;
background-color: #363b42;
padding-left: 8px;
}
.btn_body {
color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="chatbar">
<h1> Chatbar </h1><br>
Global Chat
Messages
<button class="dropdown-btn btn_body">Dropdown <i class="fa fa-caret-right"></i></button>
<div class="dropdown-container">
Link 1
Link 2
Link 3
</div>
</div>
</body>
</html>
As I told you in the comment you need to rotate your object by either applying a JS animation or (probably easier for you) toggle a class, which rotates your object.
Here an example, and you can obviously adapt it to use jQuery... i don't use it, as i don't like it:
const ddButton = document.querySelector('.dropdown-btn');
ddButton.addEventListener('click', event => {
document.querySelector(".fa.fa-caret-up").classList.toggle("rotate-icon");
});
.fa-caret-up {
transform: rotate(0deg);
transition: all 0.5s ease;
}
.fa-caret-up.rotate-icon {
transform: rotate(180deg);
}
<button class="dropdown-btn btn_body">Dropdown <i class="fa fa-caret-up"></i></button>
Related
I'm having trouble figuring out how to make the data-title only appear on hovering of the up-arrow only when the footer is down/not showing. However, I would also appreciate another solution where the data-title would still be visible when hovering the up-arrow even when the footer is up/showing. In this case, I would prefer the data-title to be displayed in its original position, up-right/0deg and on top of the up-arrow, rather than rotated 180deg and under the up-arrow.
I've tried using CSS and JavaScript to add and remove the data-title attribute, empty its innerHTML, and toggle its display, but nothing seems to work the way I want. Specifically, I was expecting the data-title to only appear on hover of an element (let's call it "Element A") when another element (let's call it "Element B") is hidden. Element A is the up-arrow, and I want the data-title to be shown on hover of Element A when Element B (the footer) is not visible on the page.
I suspect that the solution may be simple, but I'm struggling to figure it out. Any help or suggestions would be greatly appreciated.
// Get the up arrow element
const upArrow = document.getElementById("up-arrow");
const footer = document.querySelector(".slide-up-footer");
let isOpen = false;
// Add an event listener to toggle the "show" class
upArrow.addEventListener("click", toggleFooter);
upArrow.addEventListener("click", () => {
footer.classList.toggle("show");
});
function toggleFooter() {
if (isOpen) {
footer.style.bottom = "-100%";
upArrow.style.transform = "rotate(0deg)";
upArrow.style.bottom = "0";
} else {
footer.style.bottom = "0";
upArrow.style.bottom = "6%";
upArrow.style.transform = "rotate(180deg)";
}
isOpen = !isOpen;
}
html {
scroll-behavior:smooth;
}
body {
font-family: 'Adobe Caslon Pro Bold', sans-serif;
background-color: red;
overflow: hidden;
}
body h1 {
text-align: center;
}
.page-wrap {
position: fixed;
top: 10px;
right: 10px;
left: 10px;
bottom: 10px;
background: white;
border-radius: 30px;
padding: 20px;
text-align: center;
overflow: hidden;
}
.page-wrap h1 {
margin: 0;
}
p {
line-height: 3;
}
::-webkit-scrollbar-track {
background: none;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 5px;
}
.slide-up-footer {
display: flex;
flex-direction: column;
justify-content: center;
font: 10px Fakt Soft, sans-serif;
position: absolute;
bottom: -1000px; /* or another value that will hide the footer */
width: 100vw;
height: 8%;
transition: all 0.7s ease-in-out;
background-color: white;
}
.slide-up-footer.show {
bottom: 0;
}
.footer-text {
display: grid;
grid-row: 1/2;
font: 12px Fakt Soft, sans-serif;
color: black;
text-align: center;
padding: 10px;
justify-content: center;
position: relative;
}
.footer-text p{
line-height: 0;
}
.up-arrow {
transition: all 0.7s ease-in-out;
position: absolute;
bottom: 0px;
right: 0px;
margin: 2rem;
z-index: 999;
}
.custom-class{
font-weight: bold;
font: 20px Fakt Soft, sans-serif;
color:black;
cursor: pointer;
z-index: 999;
}
.custom-class:hover::before {
content: "FOOTER";
font: 12px Fakt Soft, sans-serif;
position: absolute;
background-color: transparent;
color: black;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Helvetica+Neue&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Retro Step</title>
</head>
<body>
<div class="page-wrap">
<footer class="slide-up-footer">
<div class="footer-text">
<p>FREE SHIPPING IN PORTUGAL / IN EUROPE FROM 150€ / EASY RETURNS</p>
</footer>
<div class="up-arrow" id="up-arrow">
<span class="custom-class" data-title="FOOTER">^</span>
</div>
<script src="script.js"></script>
</div>
</body>
</html>
So apply a style when the sibling as the show class to hide it from view
.slide-up-footer.show + .up-arrow > .custom-class:hover::before {
display: none;
}
// Get the up arrow element
const upArrow = document.getElementById("up-arrow");
const footer = document.querySelector(".slide-up-footer");
let isOpen = false;
// Add an event listener to toggle the "show" class
upArrow.addEventListener("click", toggleFooter);
upArrow.addEventListener("click", () => {
footer.classList.toggle("show");
});
function toggleFooter() {
if (isOpen) {
footer.style.bottom = "-100%";
upArrow.style.transform = "rotate(0deg)";
upArrow.style.bottom = "0";
} else {
footer.style.bottom = "0";
upArrow.style.bottom = "6%";
upArrow.style.transform = "rotate(180deg)";
}
isOpen = !isOpen;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Adobe Caslon Pro Bold', sans-serif;
background-color: red;
overflow: hidden;
}
body h1 {
text-align: center;
}
.page-wrap {
position: fixed;
top: 10px;
right: 10px;
left: 10px;
bottom: 10px;
background: white;
border-radius: 30px;
padding: 20px;
text-align: center;
overflow: hidden;
}
.page-wrap h1 {
margin: 0;
}
p {
line-height: 3;
}
::-webkit-scrollbar-track {
background: none;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 5px;
}
.slide-up-footer {
display: flex;
flex-direction: column;
justify-content: center;
font: 10px Fakt Soft, sans-serif;
position: absolute;
bottom: -1000px;
/* or another value that will hide the footer */
width: 100vw;
height: 8%;
transition: all 0.7s ease-in-out;
background-color: white;
}
.slide-up-footer.show {
bottom: 0;
}
.footer-text {
display: grid;
grid-row: 1/2;
font: 12px Fakt Soft, sans-serif;
color: black;
text-align: center;
padding: 10px;
justify-content: center;
position: relative;
}
.footer-text p {
line-height: 0;
}
.up-arrow {
transition: all 0.7s ease-in-out;
position: absolute;
bottom: 0px;
right: 0px;
margin: 2rem;
z-index: 999;
}
.custom-class {
font-weight: bold;
font: 20px Fakt Soft, sans-serif;
color: black;
cursor: pointer;
z-index: 999;
}
.custom-class:hover::before {
content: "FOOTER";
font: 12px Fakt Soft, sans-serif;
position: absolute;
background-color: transparent;
color: black;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
}
.slide-up-footer.show+.up-arrow>.custom-class:hover::before {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Helvetica+Neue&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Retro Step</title>
</head>
<body>
<div class="page-wrap">
<footer class="slide-up-footer">
<div class="footer-text">
<p>FREE SHIPPING IN PORTUGAL / IN EUROPE FROM 150€ / EASY RETURNS</p>
</footer>
<div class="up-arrow" id="up-arrow">
<span class="custom-class" data-title="FOOTER">^</span>
</div>
<script src="script.js"></script>
</div>
</body>
</html>
I want to do it like in the video I uploaded below. That's what I've done for now, but when I click the search icon, I can't replace it with the x icon. I think I couldn't do this because I have little knowledge of Javascript. I would be very happy if you could help me with this.
https://files.fm/f/856dwf9kj
function buttonUp(){
var valux = $('.sb-search-input').val();
valux = $.trim(valux).length;
if(valux !== 0){
$('.sb-search-submit').css('z-index','99');
} else{
$('.sb-search-input').val('');
$('.sb-search-submit').css('z-index','-999');
}
}
$(document).ready(function(){
var submitIcon = $('.sb-icon-search');
var submitInput = $('.sb-search-input');
var searchBox = $('.sb-search');
var qutu = $('.qutu');
var isOpen = false;
$(document).mouseup(function(){
if(isOpen == true){
submitInput.val('');
$('.sb-search-submit').css('z-index','-999');
submitIcon.click();
}
});
submitIcon.mouseup(function(){
return false;
});
searchBox.mouseup(function(){
return false;
});
submitIcon.click(function(){
if(isOpen == false){
searchBox.addClass('sb-search-open');
qutu.removeClass('noborder');
qutu.addClass('bborder');
isOpen = true;
} else {
searchBox.removeClass('sb-search-open');
qutu.removeClass('bborder');
qutu.addClass('noborder');
isOpen = false;
}
});
});
body{
margin: 40px 60px;
}
*{
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.5s;
}
form{
display: inline-block;
}
.sb-search {
position: relative;
margin-top: 10px;
width: 0%;
min-width: 50px;
height: 50px;
float: right;
overflow: hidden;
-webkit-transition: width 0.3s;
-moz-transition: width 0.3s;
transition: width 0.5s;
-webkit-backface-visibility: hidden;
}
.bborder{
opacity: 1;
}
.noborder{
opacity: 0;
}
.sb-search-input {
position: absolute;
top: 0;
right: 0px;
border: none;
outline: none;
width: 300px;
height: 50px;
margin: 0;
z-index: 10;
padding: 20px 65px 20px 20px;
font-family: inherit;
font-size: 20px;
color: #2c3e50;
}
input[type="search"].sb-search-input {
-webkit-appearance: none;
-webkit-border-radius: 0px;
border:1px black solid;
}
.sb-search-input::-webkit-input-placeholder {
color: #fff;
}
.sb-search-input:-moz-placeholder {
color: #fff;
}
.sb-search-input::-moz-placeholder {
color: #fff;
}
.sb-search-input:-ms-input-placeholder {
color: #fff;
}
.sb-icon-search,
.sb-search-submit {
width: 60px;
height: 60px;
display: block;
position: absolute;
right: 0;
top: 0;
padding: 0;
margin: 0;
line-height: 60px;
text-align: center;
cursor: pointer;
}
.sb-search-submit {
background: #fff; /* IE needs this */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
filter: alpha(opacity=0); /* IE 5-7 */
opacity: 0;
color: transparent;
border: none;
outline: none;
z-index: -1;
}
.sb-icon-search {
color: black;
background: #fff;
width: 35px;
height: 0px;
z-index: 90;
margin: -5px;
top: 1px;
right: 6px;
font-size: 22px;
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
}
.sb-icon-search:before {
content: "";
}
.sb-search.sb-search-open,
.no-js .sb-search {
width: 300px;
}
.sb-search.sb-search-open .sb-icon-search,
.no-js .sb-search .sb-icon-search {
background: #fff;
color: black;
z-index: 11;
}
.sb-search.sb-search-open .sb-search-submit,
.no-js .sb-search .sb-search-submit {
/* z-index: 90;*/
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Search bar</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css'><link rel="stylesheet" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<!-- partial:index.partial.html -->
<div id="sb-search" class="sb-search " >
<form>
<input class="sb-search-input qutu noborder" onkeyup="buttonUp();" placeholder="Enter your search term..." onblur="monkey();" type="search" value="" name="search" id="search">
<input class="sb-search-submit" type="submit" value="">
<span class="sb-icon-search"><i class="fa fa-search"></i></span>
</form>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>
I made a really simple example below from the snippet you gave.
The only differences are inside the submitIcon.click.
You just have to do how you have done for your elements searchBox and qutu by adding/removing classes. Thanks to this, you will be able to change the FontAwesome icon you want to use for the element. It is probably perfectible, like by checking if the class exists before remove or add it (in a straight cae it should not, but we never know).
function buttonUp(){
var valux = $('.sb-search-input').val();
valux = $.trim(valux).length;
if(valux !== 0){
$('.sb-search-submit').css('z-index','99');
} else{
$('.sb-search-input').val('');
$('.sb-search-submit').css('z-index','-999');
}
}
$(document).ready(function(){
var submitIcon = $('.sb-icon-search');
var submitInput = $('.sb-search-input');
var searchBox = $('.sb-search');
var qutu = $('.qutu');
var isOpen = false;
$(document).mouseup(function(){
if(isOpen == true){
submitInput.val('');
$('.sb-search-submit').css('z-index','-999');
submitIcon.click();
}
});
submitIcon.mouseup(function(){
return false;
});
searchBox.mouseup(function(){
return false;
});
submitIcon.click(function(){
if(isOpen == false){
searchBox.addClass('sb-search-open');
qutu.removeClass('noborder');
qutu.addClass('bborder');
searchBox.find('i.fa').removeClass('fa-search');
searchBox.find('i.fa').addClass('fa-times');
isOpen = true;
} else {
searchBox.removeClass('sb-search-open');
qutu.removeClass('bborder');
qutu.addClass('noborder');
searchBox.find('i.fa').removeClass('fa-times');
searchBox.find('i.fa').addClass('fa-search');
isOpen = false;
}
});
});
body{
margin: 40px 60px;
}
*{
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.5s;
}
form{
display: inline-block;
}
.sb-search {
position: relative;
margin-top: 10px;
width: 0%;
min-width: 50px;
height: 50px;
float: right;
overflow: hidden;
-webkit-transition: width 0.3s;
-moz-transition: width 0.3s;
transition: width 0.5s;
-webkit-backface-visibility: hidden;
}
.bborder{
opacity: 1;
}
.noborder{
opacity: 0;
}
.sb-search-input {
position: absolute;
top: 0;
right: 0px;
border: none;
outline: none;
width: 300px;
height: 50px;
margin: 0;
z-index: 10;
padding: 20px 65px 20px 20px;
font-family: inherit;
font-size: 20px;
color: #2c3e50;
}
input[type="search"].sb-search-input {
-webkit-appearance: none;
-webkit-border-radius: 0px;
border:1px black solid;
}
.sb-search-input::-webkit-input-placeholder {
color: #fff;
}
.sb-search-input:-moz-placeholder {
color: #fff;
}
.sb-search-input::-moz-placeholder {
color: #fff;
}
.sb-search-input:-ms-input-placeholder {
color: #fff;
}
.sb-icon-search,
.sb-search-submit {
width: 60px;
height: 60px;
display: block;
position: absolute;
right: 0;
top: 0;
padding: 0;
margin: 0;
line-height: 60px;
text-align: center;
cursor: pointer;
}
.sb-search-submit {
background: #fff; /* IE needs this */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
filter: alpha(opacity=0); /* IE 5-7 */
opacity: 0;
color: transparent;
border: none;
outline: none;
z-index: -1;
}
.sb-icon-search {
color: black;
background: #fff;
width: 35px;
height: 0px;
z-index: 90;
margin: -5px;
top: 1px;
right: 6px;
font-size: 22px;
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
}
.sb-icon-search:before {
content: "";
}
.sb-search.sb-search-open,
.no-js .sb-search {
width: 300px;
}
.sb-search.sb-search-open .sb-icon-search,
.no-js .sb-search .sb-icon-search {
background: #fff;
color: black;
z-index: 11;
}
.sb-search.sb-search-open .sb-search-submit,
.no-js .sb-search .sb-search-submit {
/* z-index: 90;*/
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Search bar</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css'><link rel="stylesheet" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<!-- partial:index.partial.html -->
<div id="sb-search" class="sb-search " >
<form>
<input class="sb-search-input qutu noborder" onkeyup="buttonUp();" placeholder="Enter your search term..." onblur="monkey();" type="search" value="" name="search" id="search">
<input class="sb-search-submit" type="submit" value="">
<span class="sb-icon-search"><i class="fa fa-search"></i></span>
</form>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>
I am trying to add active classes on on my navigation menu so there is a border and the writting is coloured for the specific page your on but it isn't working. It worked for the primary navigation but wont work for my secondary one any ideas as to why its not working would be appreciated thank you? my code is down below. the active class at the bottom is what should be applied
const currentLocations = location.href;
const menuItems = document.querySelectorAll('.secondary a');
const menuLengths = menuItems.length
for (let i = 0; i < menuLengths; i++) {
if (menuItems[i].href === currentLocations) {
menuItems[i].className = "active"
}
}
.secondarynav-item-trading {
position: relative;
margin-top: 10px;
padding: 15px 5px;
width: 1430px;
top: 13px;
left: 30px;
}
.secondarynav-item-trading a {
display: inline-block;
text-decoration: none;
color: black;
font-size: 14px;
text-align: center;
padding: 10px;
border-radius: 20px;
width: 190px;
}
.secondarynavigation-item-trading ul {
list-style: none;
}
.secondarynavigation-item-trading li {
display: inline-block;
margin-top: 0;
}
.secondarynavigation-item-trading a:hover {
color: #fd886b;
border: 1px solid #fd886b;
font-weight: bold;
}
.secondarynavigation-item-trading a:hover::before {
width: 100%;
}
.secondarynav-item-trading ::after {
content: "";
display: table;
clear: both;
}
.secondarynavigation-item-trading a::before {
content: "";
display: block;
height: 5px;
background-color: #fd886b;
position: relative;
top: 40px;
width: 0%;
transition: all ease-in-out 250ms;
}
.secondary a.active {
color: #fd886b;
border: 1px solid #fd886b;
font-weight: bold;
}
<header class="secondarynav-messages">
<div class="secondary">
<!-- secondary navigation for homepage -->
<nav alt="secondarynavigation-messages" id="secondarynavigation-messages">
<!-- secondary navigation buttons below the main navigation -->
<ul class="secondarynavigation-messages" id="secondarynavigation-messages">
<li>Inbox</li>
<li>Sent</li>
<li>Compose a message</li>
<li>Drafts</li>
<li>Archived</li>
</ul>
</nav>
</div>
</header>
the way I have it in the code above is working for the first page but none of the others but I have done the exact same thing in the primary nav and it worked i also copied the code on a new website document and it worked but for some reason its not working here
I need your help. I have button. With the press on it I can make text. With click on this text I can edit this text. And I have colorpicker. I need, when I choose color the text which I created also will change color(it will change on this value of colorpicker) I don't know how to do this. Help me please
function addText() {
var type = $(".select-txt").val();
var align = $(".form-align").val();
var float = "text-align:";
var id = Date.now();
var editBlock = "$('.edit-block')";
var display = ",'block'";
var colorValue = $(".color").val();
var color = "color:";
var closeTag = ";";
var onclick = "onclick="+editBlock+".css('display'"+display+");";
var ordinary = "<div class='text-"+align+"' id="+id+" "+onclick+" contenteditable style="+float+align+closeTag+
">text</div>";
var h = "<"+type+" class='text-"+align+"' id="+id+" "+onclick+" contenteditable style="+float+align+">text</"+type+">";
if(type == "ordinary") {
$(".preview").append(ordinary);
}
else if(type.startsWith("h")) {
$(".preview").append(h);
}
$(".color").minicolors({
defaultValue: "#000"
});
$(".color").on("change", function() {
var colorValue = $(".color").val();
ordinary.append(color+colorValue);
});
}
function showTextWindow() {
var modal = $(".modal-txt-container");
if (modal.css('display', "none")) {
modal.css('display', "grid");
}
else {
modal.css('display', "none");
}
}
function showTextWindow() {
var modal = document.querySelector(".modal-txt-container");
if (modal.currentStyle) {
var displayStyle = modal.currentStyle.display;
} else if (window.getComputedStyle) {
var displayStyle = window.getComputedStyle(modal, null).getPropertyValue("display");
}
if (displayStyle == "none") {
modal.style.display = "grid";
}
else {
modal.style.display = "none";
}
}
function showElement() {
var modal = document.querySelector(".choose-option");
var add = document.querySelector('.add');
if (modal.currentStyle) {
var displayStyle = modal.currentStyle.display;
} else if (window.getComputedStyle) {
var displayStyle = window.getComputedStyle(modal, null).getPropertyValue("display");
}
if (displayStyle == "none") {
modal.style.display = "grid";
}
else {
modal.style.display = "none";
add.style.display = "block";
}
}
* {
outline: none;
padding: 0;
margin: 0;
}
.choose-option {
background-color: #352a2c;
position: fixed;
color: white;
font-family: 'Scada', sans-serif;
padding: 15px;
width: 14%;
}
.insert-txt-block {
padding-bottom: 3%;
font-size: 1.3em;
}
.btn-txt::before {
content: '\f031';
font-family: "fontAwesome";
margin-right: 3%;
}
.btn-txt {
font-size: 1.2em;
list-style: none;
transition: 0.1s;
padding: 5px;
}
.btn-txt:hover {
background-color: #727272;
}
.modal-insert-txt {
background-color: #352a2c;
color: white;
font-family: 'Scada', sans-serif;
padding: 20px;
padding-right: 25px;
width: 130%;
border-radius: 4px;
}
.modal-txt-container {
display: grid;
justify-content: center;
right: 0;
left: 0;
position: fixed;
top: 15%;
display: none;
}
.container {
position: fixed;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
outline: 0;
box-shadow: none;
border: 0 !important;
background-image: none;
width: 85%;
height: 100%;
margin: 0;
padding: 0 0 0 .5em;
cursor: pointer;
color: black;
background: white;
border-radius: 1px 0px 0px 1px;
}
.form-group::after {
content: '\25BC';
position: absolute;
padding: 0 0.5em;
background: rgb(59, 61, 52);
pointer-events: none;
line-height: 1.7em;
-webkit-transition: .25s all ease;
-o-transition: .25s all ease;
transition: .25s all ease;
color: white;
}
.form-group {
position: relative;
display: block;
height: 1.7em;
margin: 1% 0% 5% 0;
border: 1px solid #272822;
}
.btn-insert-txt {
border: none;
color: white;
background: #ff5959;
padding: 5px;
font-size: 1.01em;
border-radius: 2px;
cursor: pointer;
}
.btn-insert-txt:hover {
background: #e54040;
}
.modal-insert-txt span {
font-size: 1.1em;
}
.modal-insert-txt h2 {
padding-bottom: 2%;
}
.modal-insert-txt hr {
margin-bottom: 3%;
}
.flex-close-title {
display: flex;
justify-content: space-around;
}
.type-insert li {
cursor: pointer;
}
.close {
font-size: 1.7em;
margin-top: -1%;
cursor: pointer;
}
.close::after {
content: '\f057';
font-family: "fontAwesome";
color: #ff5959;
}
.add {
font-size: 2em;
cursor: pointer;
display: none;
position: fixed;
left: 1%;
top: 2%;
}
.add::after {
content: '\f055';
font-family: "fontAwesome";
color: #ff5959;
}
#textarea-edit {
width: 80%;
height: 100px;
resize: none;
border: 2px solid #3B3D45;
background: #3B3D45;
color: white;
padding: 4%;
font-size: 1.05em;
border-radius: 4px;
display: flex;
justify-content: center;
position: relative;
top: 1%;
}
.edit-block {
background: #272822;
width: 20%;
height: 100vh;
float: right;
color: white;
font-family: 'Scada', sans-serif;
padding: 20px;
display: none;
position: fixed;
top: 0;
right: 0;
}
.edit-block span {
font-size: 1.3em;
}
.minicolors-theme-default .minicolors-input {
height: 29px !important;
padding-left: 30px !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Site Bilder</title>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Scada:400,700&subset=cyrillic" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/jquery.minicolors/2.1.2/jquery.minicolors.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.minicolors/2.1.2/jquery.minicolors.css">
</head>
<body>
<span class="add" onclick="showElement()"></span>
<div class="choose-option">
<div class="flex-close-title">
<div class="insert-txt-block">Insert elements</div>
<span class="close" onclick="showElement()"></span>
</div>
<ul class="type-insert">
<li class="btn-txt" onclick="showTextWindow()">Text</li>
</ul>
</div>
<div class="modal-txt-container">
<div class="modal-insert-txt">
<h2>Insert text</h2>
<hr>
<span>Тип Текста</span>
<div class="form-group">
<select class="select-txt">
<option value="ordinary" selected>Plain text</option>
<option value="h1">h1</option>
<option value="h2">h2</option>
<option value="h3">h3</option>
<option value="h4">h4</option>
<option value="h5">h5</option>
<option value="h6">h6</option>
</select>
</div>
<span>Text alignment</span>
<div class="form-group">
<select class="form-align">
<option value="left">left</option>
<option value="center">Center</option>
<option value="right">right</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn-insert-txt" onclick="addText()">Insert text</button>
</div>
</div>
</div>
<div class="preview">
</div>
<div class="edit-block">
<div class="wrap">
<span class="title-textarea">
Цвет
</span>
<input type="text" id="hue" class="color" data-control="hue">
</div>
</div>
<script src="js/app.js"></script>
</body>
</html>
The solution I decided on is simple enough, I add a class to know which piece of text I'm currently editing, and then set the color CSS attribute to the colour picker's selection for that selected class.
So your onclick is now:
var onclick = 'onclick="editTextColour(this)"';
I made a new function to handle the basics, (this) as the param for onclick is treated as the element that calls it:
function editTextColour(elem) {
$('.editing').removeClass('editing');
$(elem).addClass('editing');
$('.edit-block').show();
}
And then your change event for the color picker is just this:
$(".color").on("change", function() {
var colorValue = $(".color").val();
$('.preview .editing').css('color', colorValue);
});
JSFiddle
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());
}
);
}
);