So I need the users to enter in the field but I don't know and when users enter their links using the field it will automatically generate a QR code in png format.
Here is the code:
After the "/" is the linked part that's how the QR code is generated try it for yourself. But I need to make it so that users enter in their links or words after the third "/" then the qr code is automatically generated does anybody know how to do that? And the .X-UA-Compatible needs to always stay there.
body {
background-color: rgb(255, 255, 255);
}
.qrcode {
width: 500px;
height: 500px;
}
<body>
<img class="qrcode" src="https://qr.eletto.dev/www.amazon.X-UA-Compatible"/>
</body>
HTML
<main>
<input type="url" name="url" id="url" />
<img src="https://qr.eletto.dev/https://qr.eletto.dev" alt="" />
</main>
JS
const url = document.querySelector("#url");
const img = document.querySelector("img");
url.addEventListener("change", () => {
img.src = `https://qr.eletto.dev/${url.value}.X-UA-Compatible`;
});
Related
im not a coder by any description so please excuse my lack of knowledge.
Im trying to make a basic web page with a floating chatbox style whereby when you click an icon, ( the icon represents words ) the text is filtered into the chatbox.
Im trying to make a communication page for my autistic nephew and he uses something called the PECS system and its a series of pictographical cards on a velcro board which he uses for sentence construction, its pretty basic and only works when he's got the kit with him.
MY aim is to make a web app of some kind ( but just starting with a simple web page to test it on him and see if he's interested in it ) so that anyone can access it on a tablet or phone and talk to him, or indeed he can talk to his friends at school.
there are already some platforms out there and apps, but they just don't quite hit the spot, plus they are expensive to run being subscription models.
my code is this below
<html>
<head>
<title>Message Builder</title>
</head>
<body>
<div class="message-builder-container">
<h1>Message Builder</h1>
<div class="message-builder-body">
<!-- Pictographic images -->
// some sample icons but need to figure out a way to handle large numbers of feeligs-emotions-actions etc
<div class="pictographic-image-container">
<img src="I+want.png" class="pictograph">
<p class="picture-name">I Want</p>
<img src="Apple.png" class="pictograph">
<p class="picture-name">Apple</p>
<img src="to.png" class="pictograph">
<p class="picture-name">to/p>
<img src="eat.png" class="pictograph">
<p class="picture-name">Eat</p>
</div>
<!-- Message display -->
<div class="message-display-container">
<h2>Message</h2>
<div class="message-display">
</div>
<div class="chat-box"></div>
</div>
</div>
</div>
// chatbox elemt, should be floating when page scrolls as he clicks an icon
<style type="text/css">
.chat-box {
position: relative;
float: right;
background-color: #3fae96;
border: 1px solid #0b0b0b;
padding: 10px;
margin-right: 50px;
}
</style>
<script>
// references to the DOM elements
const pictographs = document.querySelectorAll(".pictograph");
const messageDisplay = document.querySelector(".message-display");
const chatBox = document.querySelector(".chat-box");
pictographs.forEach(pictograph => {
pictograph.addEventListener("click", (event) => {
// filename without extention to the message, causes text overfill othewise
const fileName = event
</script>
</body>
</html>
my problem is i can't get the text from the image click into the chatbox.. nor can i seem to make it 'float' and im pretty much at the end of my knowledge and don't know where to go next. the box is on the right but its not filling with any image names..
the idea is each image he click populates the chat box.. it works in a basic format where it puts the raw text at the bottom, but when i added the chat box function it all stops :(
Many thanks
So this was where i started from once i had the images "clickable" so i went to try and include the chat box feature but this is where im stuck
<html>
<head>
<title>PECS Message Builder</title>
</head>
<body>
<div class="message-builder-container">
<h1>PECS Message Builder</h1>
<div class="message-builder-body">
<!-- Pictographic images -->
<div class="pictographic-image-container">
<img src="I+want.png" class="pictograph">
<p class="picture-name">I Want</p>
<img src="Apple.png" class="pictograph">
<p class="picture-name">Apple</p>
<img src="to.png" class="pictograph">
<p class="picture-name">to/p>
<img src="eat.png" class="pictograph">
<p class="picture-name">Eat</p>
</div>
<!-- Message display -->
<div class="message-display-container">
<h2>Message</h2>
<div class="message-display">
</div>
</div>
</div>
</div>
<script>
// Get references to the DOM elements
const pictographs = document.querySelectorAll(".pictograph");
const messageDisplay = document.querySelector(".message-display");
// Add an event listener to each pictograph
pictographs.forEach(pictograph => {
pictograph.addEventListener("click", (event) => {
// Add the filename without extention to the message
messageDisplay.innerText += event.target.src.split('/').pop().split('.')[0];
});
});
</script>
</body>
</html>
i was experimenting with this idea Floating panels left and right CSS and im not getting far with it so i went to a w3 school page and was looking at examples and i think im out of my depth.
I have a desktop website written in php.
I have a form that has a submit button in the form of an image displaying the word "next". When my users complete the form and click on it i want it to display the loading gif. I have placed the necessary coding (as i understand it ) to do this but it does not replace the next image with the loading gif. Can anyone pick up what i'm doing wrong.
relevant code section below.
<div class="bb"><input type="image" src="./img/next.png" alt=" Create
My Account " onclick="ButtonClicked()"/></div>
<div class="lb"><input type="image" src="./img/loading6.gif" alt="
loading button "/></div>
<BR>
<BR>
<BR>
</form>
</div>
<script type="text/javascript">
function ButtonClicked()
{
document.getElementById("bb").style.display = "none"; // to undisplay
document.getElementById("lb").style.display = ""; // to display
return true;
}
var FirstLoading = true;
function RestoreSubmitButton()
{
if( FirstLoading )
{
FirstLoading = false;
return;
}
document.getElementById("bb").style.display = ""; // to display
document.getElementById("lb").style.display = "none"; // to undisplay
}
// To disable restoring submit button, disable or delete next line.
//document.onfocus = RestoreSubmitButton;
</script>
You use class for getElementById replace class by 'id' that will work better.
Each id must be single, you cannot have many time the same id.
And use img tag rather input for picture.
And to conclude display = "" and display ="none" it's the same use display = 'block' or display = 'inline-block';
Because there are no "IDs" on your HTML. You have set class names as 'bb' and 'lb'. Replace those classes with id and it will work. So change the HTML as below.
<div id="bb"><input type="image" src="./img/next.png" alt=" Create
My Account " onclick="ButtonClicked()"/></div>
<div id="lb"><input type="image" src="./img/loading6.gif" alt="
loading button "/></div>
<BR>
<BR>
<BR>
</form>
</div>
Hi I am having two input files and after uploading the files they should be disabled individually.But with my below code when itry to upload the first file both the file inputs get disabled at the same time.How to change the code to make it disable separately.
angular
.module('app', [])
.controller('ctrl', function($scope) {
$scope.disabled = true;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<style>
.ng-disabled {
background: #E9B96E;
}
</style>
<span ng-app="app" ng-controller="ctrl">
<input type="file" ng-class="{'ng-disabled': disabled}" ng-disabled="disabled" id="input1" />
<input type="file" ng-class="{'ng-disabled': disabled}" ng-disabled="disabled" id="input2"/>
</span>
You're using the same $scope variable for both fields, so it should be no surprise that both inputs react the same. Use separate $scope variables to fix this problem.
I could provide you a copy and paste solution, but I feel that if I let you look for the solution, now that you know the problem, you could learn a lot.
I need help customizing a form with CSS. The form was auto generated and cannot be edited. The iframe simply opens this form within so I cannot add CSS to the contact form to effect it. See link for the form:
label {
color: red;
}
input {
color: green;
}
<h2>Contact Us </h2>
<b style="color: red;">NOTE: I would like to modify the label font, input, and "required" text.</b> <br /> <br /><br />
<iframe name="lc_contact_form" frameborder="0" width="100%" height="600" src="https://sindesignphotography.17hats.com/embed/lead/form/nffgsxgpxrcxvcdwwcvwdpwhfvwwcfsz"></iframe><script type="text/javascript" src="https://sindesignphotography.17hats.com/js/lib/iframeSizer.min.js"></script>
Get Cross-Domain iFrame content
You can't access cross domain content. If it is comming from your own domain, you can. Run my code and look at the console log. It throws a security error. This is to prevent 3rd party webapplications from reading your bank account information.
$('#getStuff').contents().find("input").css('color', 'green')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Can't Access iframe
<iframe id="getStuff" name="lc_contact_form" frameborder="0" width="100%" height="600" src="https://sindesignphotography.17hats.com/embed/lead/form/nffgsxgpxrcxvcdwwcvwdpwhfvwwcfsz"></iframe>
Using CSS, when a link is clicked it brings up a hidden DIV that contains a form. The user will then enter information and then submit the form. I'd like the hidden DIV to remain visible, and a 'success message' to be displayed after submission. Then the user will have the option of closing the DIV. I can't get it to work without reloading the page, which causes the DIV to become hidden again. Any ideas?
<body>
Click Me
<!--POPUP-->
<div id="hideshow" style="visibility:hidden;">
<div id="fade"></div>
<div class="popup_block">
<div class="popup">
<a href="javascript:hideDiv()">
<img src="images/icon_close.png" class="cntrl" title="Close" />
</a>
<h3>Remove Camper</h3>
<form method="post" onsubmit="email.php">
<p><input name="Name" type="text" /></p>
<p><input name="Submit" type="submit" value="submit" /></p>
</form>
<div id="status" style="display:none;">success</div>
</div>
</div>
</div>
<!--END POPUP-->
<script language=javascript type='text/javascript'>
function hideDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideshow').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hideshow.visibility = 'hidden';
}
else { // IE 4
document.all.hideshow.style.visibility = 'hidden';
}
}
}
function showDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideshow').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.hideshow.visibility = 'visible';
}
else { // IE 4
document.all.hideshow.style.visibility = 'visible';
}
}
}
</script>
</body>
Forms by default submit content by changing to the specified page in its 'action' attribute. You will need to build additional scripts to prevent it from doing that and submit the data using either AJAX or jQuery then process the result.
Or you could simply use whatever language you're programming in to set the default visibility for the division. If the form data exists, display it by default, otherwise hide it by default.
How about using an AJAX call to post the form instead of posting back the whole page?
Instead of using a "submit" type for your button, you can use a "button" type and use a script called by onclick which will use ajax to submit the form and do whatever is necessary.
This defeats slightly the meaning of a form, but works well. You might also want to think about using a javascript library like prototype or similar (jquery, etc) that gives you the functionality to create a get or post array of your form in order to make it easier.