I need the numbers and letters to be somewhat like this 0000-00-0000A.
I am working on a project so when i place a coupon the random numbers and letter will appear on the coupon id where i place it at, but for every coupon the numbers and letter is different.
And yes i am new to coding 2 months in and i think i am doing alright except for this random number thing. The examples of what i am doing is below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#coupon{
width: 600px;
height:auto;
top:145px;
background: #FFFF95;
margin: 2px auto;
border: 1px solid #000000;
text-align: center;
-webkit-border-top-left-radius:06px;
-webkit-border-top-right-radius:06px;
-webkit-border-bottom-left-radius:06px;
-webkit-border-bottom-right-radius:06px;
-moz-border-radius-topleft:06px;
-moz-border-radius-bottomleft:06px;
-moz-border-radius-topright:06px;
-moz-border-radius-bottomright:06px;
border-top-left-radius:06px;
border-top-right-radius:06px;
border-bottom-left-radius:06px;
border-bottom-right-radius:06px;
/* additional features, can be omitted */
border:2px outset #093;
padding:15px;
font-size:15px;
-moz-box-shadow: 0 0 15px #999;
-webkit-box-shadow: 0 0 15px #999;
box-shadow: 0 0 15px #999;
}
</style>
</head>
<body>
<div id="coupon" class="coupon">
<p>This can be the coupn area where the cupon is place and the deal can be read then printed!</p>
<div class="print-page" id="print-page">
<p><a href=" #" onClick=" window.print()" >Print Deal</a></p>
</div>
<div class="coupon-id-number" id="coupon-id-number">0000-00-0000-A</div></div>
</body>
</html>
Please can anyone help me out?
In java you would do something like:
Random random = new Random();
String couponCode = String.format("%04d-%02d-%04d-%s", random.nextInt(10000), random.nextInt(100), random.nextInt(10000), (char)(random.nextInt(26)+65));
If you would like to do this by JavaScript, you might need a function like
<script>
function genRandom() {
var genNumber = function (length) {
return ~~(Math.random() * length);
},
genChar = function () {
var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXZ',
index = genNumber(24);
return chars.slice(index, index + 1);
},
arr = [genNumber(10000), genNumber(100), genNumber(10000), genChar()];
return arr.join('-');
}
document.getElementById('coupon-id-number').innerHTML = genRandom();
</script>
Related
Im having a little trouble with Firefox and perspectiveOrign. What i want is the origin to be controlled by mousemovement. So i calculate the percentages for origin, and set them like:
document.querySelector('parent').style.perspectiveOrigin = x% y%.
Logging the the value shows that perspectiveOrigin HAS changed but the interface just dosnt follow... or is very very very jaggy. I works like a charm in chrome and safari.
Is there something special i need to do to make Firefox update the UI with the values that it actually already has.
I made a little example here. the x/y percentages for origin is generated randomly onclick. I chrome - it will follow no matter how fast you are clicking, i Firefox - it follows if you click very slowly, but stops updating if you are clicking too fast.
(Im using Firefox Developer Ed. version: 104)
----After having posted this I ran the code-snippet below in the very same Firefox - and it works like it should. But running the EXACT same code from VSCode with LiveServer gives me the problem right away... Is there some polyfill active in the code runner - if so what polyfill?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.container {
display: inline-block;
border: 1px solid black;
perspective: 10px;
perspective-origin: 50% 50%;
width: 600px;
height: 500px;
}
div {
border: 1px solid red;
}
.layer1,
.layer2,
.layer3 {
position: absolute;
inset: 0;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div class="container" onclick="changeOrigin()">
<div class="layer1" style="transform: translateZ(-5px)"></div>
<div class="layer2" style="transform: translateZ(-15px)"></div>
<div class="layer3" style="transform: translateZ(-25px)"></div>
</div>
<script>
const myDiv = document.querySelector(".container");
function changeOrigin() {
console.log("in change origin");
x = Math.random() * 100 + "%";
y = Math.random() * 100 + "%";
myDiv.style.perspectiveOrigin = `${x} ${y}`;
}
</script>
</body>
</html>
I using wkhtmltopdf tool to convert html to pdf. On my linux computer it outputs everything right with css rules. But after installing the same tool on a Mac, the output does not look the same. The bold tag does not work. The margin to the top does not work and the font size over all looks smaller.
What can be the problem here? The html file is very simple and I think the wkhtmltopdf should behave the same way here independent of platform.
Here is a part of the html file:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<style>
td {
border:solid windowtext 1.0pt;
background:white;
padding:0cm 5.4pt 0cm 5.4pt;
height:19.65pt;
}
td.table_header {
background:#D9D9D9;
}
.text_right {
text-align: right;
}
table {
width: 100%;
border-collapse:collapse;
border:none;
line-height: 80%;
}
html {
background:white;
font-family: "Arial Unicode MS", sans-serif;
}
.header {
font-size:18.0pt;
text-align:center;
}
.address1 {
text-align:right;
}
.text {
line-height: 160%;
}
.space {
line-height:80%;
}
</style>
</head>
<body style="margin:100px 100px;">
Its very simple but even after looking at so many examples I cannot seem to get it right! As you can see in this Code Pen, I have a image! Now when I hover the image i want to do various things on the elements with classes .headline .text .title .subtitle. for some reason i am only able to affect any change at all on the .title class! What am i doing wrong?
my html:
body {
}
.container {
.headline {
color: red;
}
.foto {
background-color: lightblue;
cursor: pointer;
}
.foto:hover + .headline {
color:green;
}
.foto:hover + .title {
color:maroon;
position: absolute;
top: 3em;
left: 10em;
}
//text not working
.foto:hover + .text {
color:maroon;
}
.title {
color: darkgreen;
font-weight: bold;
p {
font-size: 2em;
}
}
.text {
color: blue;
}
.subtitle {
color: darkred;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.scss">
</head>
<body>
<div class="container">
<h2 class="headline">Sonderausstellungen</h2>
<div class="foto"><img src="http://oi63.tinypic.com/ifr19y.jpg"/></div>
<div class="title">
<p>Land von Indien</p>
</div>
<div class="text">
<p>Lernen wir Indien Kennen</p>
</div>
<div class="subtitle">
<p>Der Text hier is länger als da oben</p>
</div>
</div>
</body>
</html>
The element+element applies to the next immediate element you identify following the first element. It does not search through the DOM looking for the element.
For instance....
.foo+.bar {color:#f00}
<div class="foo"></div>
<div class="bar"></div> --- This gets selected
<div class="foo"></div>
<div class="zanza"</div>
<div class="bar"></div> --- This does not
So, your CSS should look like this:
.foto:hover + .title {...}
.foto:hover + .title + .text {...}
.foto:hover + .title + .text + .subtitle {...}
Or to avoid stacking so many selectors, you could use ~ to select sibling elements at the same level in the DOM:
.foto:hover ~ .title {...}
.foto:hover ~ .text {...}
.foto:hover ~ .subtitle {...}
Remember, your HTML is being read from top to bottom, and you are not able to target previous sibling elements with CSS. So right now, the way you have your HTML structured, you cannot select the .headline element based on the image :hover because the .headline comes first.
here is my sample code but able get values but there may be a issue plz help me
when i search in search form i need that particular result..
#Controller
public class SearchController {
ModelAndView mv;
SearchModel log;
#RequestMapping("/Search.htm")
public #ResponseBody ModelAndView getSearchModelList() throws Exception
{
String clusterIP = "localhost";
String port = "9200";
//setup client
JestClientFactory factory = new JestClientFactory();
factory.setHttpClientConfig(new HttpClientConfig
.Builder("http://" + clusterIP + ":" + port)
.multiThreaded(true)
.build());
JestClient client = factory.getObject();
Search search = new Search.Builder("{ \"query\": { \"match\": {} } }")
.addIndex("eix")
.addType("articles")
.build();
//results print here
JestResult result = client.execute(search);
List<SearchModel> resultLogs = result.getSourceAsObjectList(SearchModel.class);
for(SearchModel log: resultLogs){
System.out.println(log);
mv.addObject("log", log);
}
return mv;
}}
and here my jsp code.just print search form
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Eix</title>
<style type="text/css">
#tfheader{
background-color:#c3dfef;
}
#tfnewsearch{
float:right;
padding:20px;
}
.tftextinput{
margin: 0;
padding: 5px 15px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
border:1px solid #0076a3; border-right:0px;
border-top-left-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
}
.tfbutton {
margin: 0;
padding: 5px 15px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
color: #ffffff;
border: solid 1px #0076a3; border-right:0px;
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top, #00adee, #0078a5);
border-top-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
}
.tfbutton:hover {
text-decoration: none;
background: #007ead;
background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
background: -moz-linear-gradient(top, #0095cc, #00678e);
}
/* Fixes submit button height problem in Firefox */
.tfbutton::-moz-focus-inner {
border: 0;
}
.tfclear{
clear:both;
}
</style>
</head>
<body>
<form id="tfnewsearch" method="post" action="Search.htm">
<input type="text" class="tftextinput" name="q" size="21" maxlength="120">
<input type="submit" value="search" class="tfbutton">
</form>
<div class="tfclear"></div>
</body>
</html>
and here print search values in this jsp..
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Eix</title>
<style type="text/css">
</style>
</head>
<body>
<h2>${log}</h2>
</body>
</html>
Hi I am using Dreamweaver and trying to get an image or button to change after it is clicked on. Essentially, I want an image to say follow before it is clicked on and say unfollow after it is clicked on like happens on Twitter, Quora etc.
Thanks in advance!
#Spencer: Are you using a JavaScript framework (e.g. jQuery or mootools)? You could add or replace a class for the button when it is clicked so that it'll have a different style to the button in its default state.
Update: Here's some sample code to get you started (see it in action here: http://jsfiddle.net/5HqFw/) --
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>questions/4527859</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#button').click(function() {
$(this).toggleClass("clicked");
});
});
</script>
<style type="text/css">
#button {
border: 1px solid green;
display: block;
padding: 5px;
text-align: center;
width: 100px;
}
.default {
background-color: white;
color: green;
}
.clicked {
background-color: green;
color: white;
}
</style>
</head>
<body>
<p>Button!</p>
</body>
</html>