I'm prompting a user for information in a google doc via the Script Editor, and I've gotten it to work in a test document, but when I try to copy it over to another it doesn't pop up.The first one didn't require a developer key to work, although I set it up in my Google Cloud Platform console as part of troubleshooting. It's supposed to push a popup form when the user opens the google doc, but in the second document nothing shows up unless you hit Run. The user should not be accessing the Script Editor, so this is not ideal.
Any ideas on why this is happening? Thanks in advance
function onOpen() {
showPicker();
}
var VALUE;
function showPicker() {
var html = HtmlService.createHtmlOutputFromFile("login.html");
DocumentApp.getUi().showModalDialog(html, " ");
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-145078782-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-145078782-1');
</script>
<style>
header {
background: black;
padding: 10px 20px;
}
header h1, header a {
margin: 0px;
text-decoration: none;
color: white;
}
body {
margin: 0;
padding: 0;
background-size: cover;
font-family: sans-serif;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 25rem;
padding: 2.5rem;
box-sizing: border-box;
border: 1px solid #dadce0;
-webkit-border-radius: 8px;
border-radius: 8px;
}
.box h2 {
margin: 0px 0 -0.125rem;
padding: 0;
color: #fff;
text-align: center;
color: #202124;
font-family: 'Google Sans','Noto Sans Myanmar UI',arial,sans-serif;
font-size: 24px;
font-weight: 400;
}
.box p {
font-size: 16px;
font-weight: 400;
letter-spacing: .1px;
line-height: 1.5;
margin-bottom: 25px;
text-align: center;
}
.box .inputBox {
position: relative;
}
.box .inputBox input {
width: 93%;
padding: 0.625rem 10px;
font-size: 1rem;
letter-spacing: 0.062rem;
margin-bottom: 1.875rem;
border: 1px solid #ccc;
background: transparent;
border-radius: 4px;
}
.box .inputBox label {
position: absolute;
top: 0;
left: 10px;
padding: 0.625rem 0;
font-size: 1rem;
color: grey;
pointer-events: none;
transition: 0.5s;
}
.box .inputBox input:focus ~ label,
.box .inputBox input:valid ~ label,
.box .inputBox input:not([value=""]) ~ label {
top: -1.125rem;
left: 10px;
color: #1a73e8;
font-size: 0.75rem;
background-color: white;
height: 10px;
padding-left: 5px;
padding-right: 5px;
}
.box .inputBox input:focus {
outline: none;
border: 2px solid #1a73e8;
}
.box input[type="submit"] {
border: none;
outline: none;
color: #fff;
background-color: #1a73e8;
padding: 0.625rem 1.25rem;
cursor: pointer;
border-radius: 0.312rem;
font-size: 1rem;
float: right;
}
.box input[type="submit"]:hover {
background-color: #287ae6;
box-shadow: 0 1px 1px 0 rgba(66,133,244,0.45), 0 1px 3px 1px rgba(66,133,244,0.3);
}
.popup-without-close .ui-dialog .ui-dialog-titlebar .ui-button.ui-dialog-titlebar-close {
display: none;
}
</style>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous">
</script>
<script>
function SubForm() {
$.ajax({
url:'https://api.apispreadsheets.com/data/10050/',
type:'post',
data:$("#myForm").serializeArray()
});
closeDialog();
}
var x = document.getElementById("myForm");
function closeDialog() {
x.closeDialog();
}
</script>
</head>
<body>
<div class="box">
<h2>Sign in</h2>
<p>Use your Provided Credentials</p>
<form id="myForm">
<div class="inputBox">
<input type="email" name="email" required onkeyup="this.setAttribute('value', this.value);" value="">
<label>Username</label>
</div>
<div class="inputBox">
<input type="text" name="password" required onkeyup="this.setAttribute('value', this.value);" value="">
<label>Password</label>
</div>
<button onclick="SubForm()" id="submit">Submit</button>
</form>
</div>
</body>
</html>
It looks like you need an Installed trigger
In a nutshell, simple triggers, like using onOpen without installing it, can be copied with the sheet and it will work "out the box". However, they are very restricted and so, this is why it won't have access to the UI, i.e. a popup.
To install the trigger on the new sheet, you need to open the script editor. Once you are at the editing screen, to the left, click on the triggers icon.
Once there, you can:
It will ask you what function you want to run when the trigger is triggered, and what type of trigger you want it to be (choose onOpen) - then it will likely ask for authorization, which you should grant.
For more details:
Simple triggers
Installable triggers
Related
I use a pure CSS Accordion to present my content. The Accordion works with normal checkboxes. Now I want to implement, that by sending a simple link, a single checkbox entry will be checked and with the help of an anchor the browser should jump to that entry and show the specific content to the reader.
The whole thing should be done preferably without a scripting or programming language, but after a lot of research I think that at least JavaScript will be required (it must run on the client side, so no PHP or similar).
I have searched and tested a lot but unfortunately I have not found any suitable solution that would work.
```
<!DOCTYPE html>
<html>
<head>
<title>My example Website</title>
</head>
<body>
<style>
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #181818;
border: 1px solid white;
border-radius: 5px;
color: #FFF;
position: relative;
}
label:hover {
background: white;
border: 1px solid white;
color:black;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked + label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #DBEECD;
background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: linear-gradient(to top left, #DBEECD, #EBD1CD);
padding: 10px 25px 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 1px;
}
input + label + .content {
display: none;
}
input:checked + label + .content {
display: block;
}
</style>
<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>
<div class="content">
My Content 1
</div>
</div>
<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>
<div class="content">
My Content 2
</div>
</div>
<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>
<div class="content">
My Content 3
</div>
</body>
</html>
```
You're correct that JavaScript is required. I have provided a solution, but I haven't tested it, because it's not possible to test in the snippet. It should select the relevant checkbox when a hash tag is detected in the URL that corresponds with a checkbox ID.
So you would use some time https://www.website.com/#title1
// Check if URL of browwser window has hash tag
if (location.hash) {
// Get URL hash tag
const hash = window.location.hash;
// Select checkbox with ID of hashtag
const checkbox = document.querySelector(hash);
// Check if checkbox exists
if(checkbox) {
// Set selected checkbox as checked
checkbox.checked = true;
}
}
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #181818;
border: 1px solid white;
border-radius: 5px;
color: #FFF;
position: relative;
}
label:hover {
background: white;
border: 1px solid white;
color:black;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked + label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #DBEECD;
background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: linear-gradient(to top left, #DBEECD, #EBD1CD);
padding: 10px 25px 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 1px;
}
input + label + .content {
display: none;
}
input:checked + label + .content {
display: block;
}
<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>
<div class="content">
My Content 1
</div>
<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>
<div class="content">
My Content 2
</div>
<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>
<div class="content">
My Content 3
</div>
Hello I need some help in developing a quiz using HTML.
Here is the code, if you require pictures I can provide them, I need some help getting the score counter to count over around 10 pages, and it keeps the right score so for a correct answer it will be 1, for a wrong answer it will be -0.25. Thanks.
<html>
<head>
<style> {
box-sizing: border-box;
}
body{
background-image: url('background.png');
font-family: sans-serif: ;
}
button{
font:inherit;
font-size:100%;
color:black;
line-height:normal;
vertical-align:baseline
}
#hello{
width: 96%;
background-color: palegreen;
color: black;
padding: 10px;
margin: 10px auto;
border: 6px double limegreen;
border-radius: 10px;
}
#quiz{
position: relative
width: 96%;
color: white;
padding: 10px;
margin: 10px auto;
border: 6px double black;
border-radius: 10px;;
}
h1{
font-size: 28px;
clear: both;
}
#quiz h1{
width: 100%;
text-align: left;
background-color: black;
color: yellowF;
padding: 8px;
border-radius: 15px;
filter: drop-shadow(3px 3px 3px grey);
background-image: "background.img"
}
.option{
background-color: Black;
color: white;
padding: 8px;
border-radius: 10px;
border: 2px solid Black ;
}
#quiz button{
width: 100%;
display: block ;
margin: 10px auto;
text-align: left;
}
#quiz .option:hover{
background: white;
color: lightgreen ;
border: 2px solid lightgreen;
}
.green{
background: white;
border: 2px solid green;
color: green;
border-radius: 10px;
padding: 8px;
}
.green:before,#score:before{
content: 'Correct ✔️ ';
}
.red{
background-color: white;
}
.red:before,#wrong:before{
content:'Incorrect ✖️ ';
}
.score{
background-color: lightgreen;
color: white;
padding: 4px;
text-align: center;
font-size: 20px;
border-radius: 10px;
}
.wrong{
border-radius: 10px;
background-color: red;
color: white;
padding: 4px;
text-align: center;
font-size: 20px;
}
#show button{
width: auto;
padding: 5px;
background-color: orange;
border-radius: 5px;
}
#start{
text-align: center;
}
#start button{
width: auto;
padding: 5px;
background-color: orange;
border-radius: 5px;
}
.hidden{
display: none;
}
#sticky{
position: sticky;
position: -webkit-sticky;
top: 5px;
width: 100%;
border-radius: 10px;
padding: 0px auto 20px auto;
z-index: 1;
}
#sticky span{
float: right;
display: inline-block;
margin: 5px 4px;
}
#fscore{
background: purple;
color: white;
padding: 4px;
text-align: center;
font-size: 20px;
border-radius: 10px;
}
p{font-size: 30px
}
p1 {font-size: 30px}
p2{font-size: 30px}
</style>
<title>Next Question</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<body>
<div id="main">
<div id="hello">
<br />
<div id="start">
<button type="button">Start Quiz</button>
</div>
</div>
<!--Quiz Start-->
<div id="quiz" class="hidden">
<div id="sticky">
<span class="wrong"><span id="wrong">0</span></span>
<span class="score"><span id="score">0</span></span>
</div>
<h1>1. What does CPU stand for?</h1>
<div class="choose">
<button class="option" value="wrong" type="radio">Certain process units</button>
<button class="option" value="wrong" type="radio">Central processing unix</button>
<button type="radio" class="option" value="right">Central processing unit</button>
<button class="option" value="wrong" type="button">Computer's proessing unit</button>
</div>
<br />
<br />
<div id="show">
<button type="button">Show Correct Answers</button>
</div>
<form method="get" action="t2.html" hidden>
<button type="submit">Press to start</button>
</form>
<!--Final Score-->
<div id="fscore">You Scored <span class="fscore">0</span> out of <span class="total"></span>
</div>
</div>
</div>
</body>
<script> $(function(){
var tot = $(".choose").length;
$(".total").html(tot);//total Score
$("#start").click(function(){
$('#hello').addClass('hidden');
$("#quiz").removeClass('hidden');
$('html, body').animate({
scrollTop: $("#quiz").offset().top
}, 10);//smooth scrolling effect to min quiz
});
$(".option").click(function(){
var score = 0;
var wrong = 0;
$(this).removeClass("option");//disable it's css
$(this)
.addClass(($(this).val() === "right") ? 'green' : 'red');//right or wrong css
$(this).siblings().attr("disabled",true);//prevent to choose other options
for (i=0;i<$(".green").length;i++){
if ($(this).val() === "right"){
score++;
$("#score").html(score);//update score
}
}
for (k=0;k<$(".red").length;k++){
if ($(".red").val() === "wrong"){
wrong++;
$("#wrong").html(wrong);//update negative score
}
}
var p = +$("#score").text();
var m = +$("#wrong").text();
var n = m*0.25;//0.25marks deducted for each wrong answer
var t = p-n;//get final score considering negative marking
$(".fscore").html(t);//update final score
});
$("#show button").click(function(){
for (j=0;j<$(".choose").length;j++) {
$(':button[value="right"]').addClass('green')
.removeClass("option");//show correct option
}
$('.choose>button').attr("disabled",true);//disable all Buttons
});
});
</script>
</html>
You can use localStorage to store data in the client's web browser. Data saved using localStorage has no expiry date. It will stay there intact unless deleted. You can read about localStorage here
You can do something like this.
First, calculate the score on the first page.
Assuming you have some kind of button click or simply a click on an element to navigate to the next page. You can add an event listener to this element using JavaScript. This event listener will execute a function which will first, calculate the result on the first page and then store it in the web browser using localStorage like this localStorage.setItem("score", quizScore);
After navigating to the next page you can run a function when the page completely loads that retrieves this score using this var score = localStorage.getItem("score");
Then you can display the current score, carry on with the quiz, calculate the result, add it to the previous score, update the key score value, and repeat the first, second, third, and fourth steps for all the future pages again until you have calculated the final score of the quiz.
Lastly, you can retrieve the final value, show it to the client in whatever way you like, and delete it using localStorage.removeItem("score"); if you wish to.
localStorage.setItem("score", 1.5);
// Retrieve
var cnt = localStorage.getItem("score");
console.log(cnt)
js fiddle
I am creating a list of elements from user inputs. Each element in this list comes with a dynamically created button within my JavaScript.
I am trying to have it so that when I click on this dynamically created button ("started"), it will automatically remove the entire list element from the original li and move it to the top of another li.
My code: [EDIT: For some reason, my code snippet doesn't show the second list "doing" but it shows in my local console, not sure if it's problem with my code?]
// Dynamically creates a new li element with 'started' button after user puts in text and clicks a button similar to 'submit'
$(document).ready(
$("#new-item").on('click', function() {
// once the document loads, create new item with this function
var text = $('#task').val();
if (text != '') {
$('#todo-list').prepend("<li class='addedTask'> <button id='started'>Started</button>" + text + '</li>' + '</br>');
}
})
);
$(".addedTask").on('click', "button", function() {
var completedItem = $(this).parent();
$('#doing-list').append($('#todo-list'( completedItem)).removeClass(completedItem));
});
header {
background-color: #026aa7;
height: 30px;
text-align: center;
padding: 5px 8px;
}
header a {
height: 30px;
width: 80px;
text-align: center;
background-image: url(https://a.trellocdn.com/dist/images/header-logo-2x.01ef898811a879595cea.png);
background-repeat: no-repeat;
text-align: center;
display: inline-block;
background-size: 80px 30px;
}
body {
background-color: #0078c0;
margin: 0px;
font-family: sans-serif;
}
li {
list-style-type: none;
margin-left: 8px;
text-indent: 10px;
/* cursor: pointer;*/
}
li:hover {
background: #ddd;
}
li.addedTask {
border: 1px solid white;
border-radius: 4px;
padding: 15px;
width: 83%;
background-color: white;
}
#started {
float: left;
background-color: white;
border-radius: 6px;
}
.column {
background-color: #E3E3E3;
min-height: 100px;
width: 25%;
box-shadow: 1px 1px 3px $shadow;
display: inline-block;
position: asolute;
margin: 5px;
vertical-align: top;
position: relative;
top: 75px;
right: 287px;
border-radius: 5px;
}
.column h1 {
font-size: 20px;
padding-left: 10px;
position: relative;
bottom: .5px;
color: #393939;
margin: 5px;
}
#new-item {
position: relative;
left: 40px;
top: 20px;
font-family: sans-serif;
padding: 4px;
width: 100px;
background-color: #ffffff;
border-radius: 4px;
}
#task {
position: relative;
left: 25px;
top: 20px;
height: 20px;
width: 200px;
padding: 10px;
border-radius: 4px;
padding-left: 4px;
}
<html>
<head>
<title> HW03 Javascript and jQuery </title>
<link rel="stylesheet" href="_css/style.css">
</head>
<body>
<header>
</header>
<section>
<!-- create input tag for user input -->
<input type="text" id="task">
<!-- button takes input and adds a new element with content to 'list_do' -->
<button id="new-item"> Add a card </button>
<!-- ability to move items between list_todo and list_doing -->
<div class="column" id="to-do">
<h1> To Do </h1>
<li id="todo-list"></li>
</div>
<div class="column" id="doing">
<h1> Doing </h1>
<li id="doing-list"></li>
</div>
</section>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="_js/main.js">
</script>
</body>
</html>
Here is an image of what it looks like on my end:
You're using the wrong selector .addedTask for the Event delegation.
Use prepend function to add the element at the top.
To test this snippet, click on Full Page after you click 'Run code snippet'
// Dynamically creates a new li element with 'started' button after user puts in text and clicks a button similar to 'submit'
$(document).ready(
$("#new-item").on('click', function() {
// once the document loads, create new item with this function
var text = $('#task').val();
if (text != '') {
$('#todo-list').prepend("<li class='addedTask'> <button id='started'>Started</button>" + text + '</li>' + '</br>');
}
})
);
$("#todo-list").on('click', "button", function() {
var completedItem = $(this).parent();
$('#doing-list').prepend($(completedItem));
});
header {
background-color: #026aa7;
height: 30px;
text-align: center;
padding: 5px 8px;
}
header a {
height: 30px;
width: 80px;
text-align: center;
background-image: url(https://a.trellocdn.com/dist/images/header-logo-2x.01ef898811a879595cea.png);
background-repeat: no-repeat;
text-align: center;
display: inline-block;
background-size: 80px 30px;
}
body {
background-color: #0078c0;
margin: 0px;
font-family: sans-serif;
}
li {
list-style-type: none;
margin-left: 8px;
text-indent: 10px;
/* cursor: pointer;*/
}
li:hover {
background: #ddd;
}
li.addedTask {
border: 1px solid white;
border-radius: 4px;
padding: 15px;
width: 83%;
background-color: white;
}
#started {
float: left;
background-color: white;
border-radius: 6px;
}
.column {
background-color: #E3E3E3;
min-height: 100px;
width: 25%;
box-shadow: 1px 1px 3px $shadow;
display: inline-block;
position: asolute;
margin: 5px;
vertical-align: top;
position: relative;
top: 75px;
right: 287px;
border-radius: 5px;
}
.column h1 {
font-size: 20px;
padding-left: 10px;
position: relative;
bottom: .5px;
color: #393939;
margin: 5px;
}
#new-item {
position: relative;
left: 40px;
top: 20px;
font-family: sans-serif;
padding: 4px;
width: 100px;
background-color: #ffffff;
border-radius: 4px;
}
#task {
position: relative;
left: 25px;
top: 20px;
height: 20px;
width: 200px;
padding: 10px;
border-radius: 4px;
padding-left: 4px;
}
<html>
<head>
<title> HW03 Javascript and jQuery </title>
<link rel="stylesheet" href="_css/style.css">
</head>
<body>
<header>
</header>
<section>
<!-- create input tag for user input -->
<input type="text" id="task">
<!-- button takes input and adds a new element with content to 'list_do' -->
<button id="new-item"> Add a card </button>
<!-- ability to move items between list_todo and list_doing -->
<div class="column" id="to-do">
<h1> To Do </h1>
<li id="todo-list"></li>
</div>
<div class="column" id="doing">
<h1> Doing </h1>
<li id="doing-list"></li>
</div>
</section>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="_js/main.js">
</script>
</body>
</html>
Since you are adding HTML to the DOM later, the code $(".addedTask").on('click', "button", function() { will not work because at the time of execution this code there was no .addedTask elements.
You may instead want to delegate this to a higher node in the DOM. One easy way to accomplish this would be to rewrite this as
$("document").on('click', ".addedTask button", function() {
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());
}
);
}
);
The problem I'm having is not being able to select the divs inside the 'menuItem' class divs. I've tried using the jQuery selector to select by both class and even ID, but every time I try to do anything with it, such as an animation, nothing happens. Is there some jQuery law I don't know about that prevents me from doing so?
$('.menu')
.hover( function() {
$(this).toggleClass('highlighted');
})
.click(function() {
$(this).parent().children('.menuItem').children('#wtf').slideDown();
});
Also tried these for the click(), but none of them work..
$('#wtf').slideDown();
$('.test').slideDown();
$(this).parent().find('.menuItem').each( function() { $(this).slideDown(); } );
$(this).parent().children('.menuItem').children().slideDown();
<div class='box'>
<div>
<div class='menu'>Resources</div>
<div class='menuItem'>
<div ID='wtf' class='test'>Library</div>
<div>Internet</div>
<div>Your mom</div>
</div>
</div>
<div>
<div class='menu'>Products</div>
</div>
<div>
<div class='menu'>Contact</div>
</div>
</div>
body { font-size: 16px; }
.box {
background: blue;
border: 1px;
padding: 4 6 4 6;
position: absolute;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid;
}
.box div {
float: left;
text-align:center;
}
.menu {
background: lightblue;
width: 105px;
text-align: center;
padding: 4 10;
margin: 1 5;
font-weight: bold;
font-family:'Verdana', 'Times', serif;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid gray;
}
.highlighted {
background: lime;
color: navy;
}
.menuItem {
clear: left;
position: absolute;
margin-top: 30px;
}
.menuItem div {
display: none;
background: lightblue;
opacity: .7;
filter: alpha(opacity=.7);
width: 105px;
text-align: center;
padding: 4 10;
margin: 1 5;
font-size: 10px;
font-family: 'Verdana', 'Times', serif;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid white;
clear: left;
}
Have you tried?
$(this+' > .menuItem div')
I applied a background color to your style and your jQuery selector wasn't selecting properly. I tried this and it changed the background color, but I don't have CSS in place for the visual of the slideDown() to work - you'll have to write your CSS up correctly.
$(this).siblings().find("#wtf").css("background-color","#cccccc").slideDown();