I'm very new to HTML...just started yesterday. The problem I'm having is that when I'm importing an SVG into my HTML script, the text gets all gargled. For example, Peak Metagene Plot becomes 2eak MetaCene 2lot. It's almost like certain letters are changed.
I have made a python script to read in an SVG file like such (I'm calling in two SVGs here, violin and metagene_reads):
# violin
if args['--violin']:
violin_file = open(args['--violin'], 'r')
violin_txt = violin_file.read()
violin_hide = ''
else:
violin_txt = ''
violin_hide = 'hidden'
# metagene reads
if args['--metagene_reads']:
metagene_reads_file = open(args['--metagene_reads'], 'r')
metagene_reads_txt = metagene_reads_file.read()
metagene_reads_hide = ''
else:
metagene_reads_txt = ''
metagene_reads_hide = 'hidden'
I then use this code to feed into an HTML template. Without pasting the entire code, I'll only list the contents that are giving me the weird text:
Specify font type...
<!DOCTYPE html>
<html>
<h1><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.css">
<style>
td {
text-align: center;
vertical-align: middle;
}
h1 {
font-size: 36px;
font-weight: bold;
font-family: Georgia, Times, "Times New Roman", serif;
}
h2 {
font-size: 24px;
font-family: Georgia, Times, "Times New Roman", serif;
}
h3 {
margin-bottom: 0px;
padding: 0px;
margin-left: 300px;
font-size: 24px;
font-family: Georgia, Times, "Times New Roman", serif;
}
.initiallyHidden { display: none; }
.toggle {
background-color: #4CAF50;
border: none;
color: white;
padding: 8px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
margin-bottom: 20px;
}
....other contents like tables, etc.
Below is where I'm importing the SVGs called in from the python script (code shown above). This is where I'm getting the weird formatting issues.
<br>
{{metagene_reads_txt}}
<br>
<h2 {{metagene_peaks_hide}}><center>MultipleMetagene Peaks Plot</center></h2>
<p {{metagene_peaks_hide}}>
<br>
<button class="toggle" onclick="metagenePeaks()">Click to learn more</button>
<div id="metagenePeaksID" class="initiallyHidden">
The multiple metagene peaks plot illustrates the average peak coverage of 5' UTR, CDS, and 3' UTR features.
</div>
<script>
function metagenePeaks() {
var x = document.getElementById("metagenePeaksID");
display = x.style.display;
x.style.display = (display && display !== 'none') ? 'none' : 'block';
}
</script>
<br>
{{metagene_peaks_txt}}
<br>
<h2 {{violin_hide}}><center>Gene Count Violin Plot</center></h2>
<p {{violin_hide}}>
<br>
<button class="toggle" onclick="violinFunction()">Click to learn more</button>
<div id="violinDIV" class="initiallyHidden">
The violin plot illustrates the distribution of gene counts for each sample. The gene counts were normalized for differences in library depth and log transformed.
</div>
<script>
function violinFunction() {
var x = document.getElementById("violinDIV");
display = x.style.display;
x.style.display = (display && display !== 'none') ? 'none' : 'block';
}
</script>
<br>
{{violin_txt}}
<br>
</p>
</body>
</html>
Any help would be greatly appreciated.
What you are doing right now is taking SVG content, something like this:
<svg version="1.1"
baseProfile="full"
width="300" height="200"
xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="black" />
<circle cx="150" cy="100" r="90" fill="blue" />
</svg>
And just copy+pasting that into the HTML, which the browser does not understand.
Instead, you should be linking to the SVG file using something like this (although depending on how this is hosted the relative path may need to be adjusted):
<img src="{{violin_file}}">
If you really want to embed it within the code (which I generally do not recommend), you can Base64 Encode it and embed that, something like this:
import base64
with open(violin_file, "rb") as image_file:
violin_base64 = str(base64.b64encode(image_file.read()),'utf-8')
And then instead of {{violin_txt}} you would do:
<img src="data:image/svg+xml;base64,{{violin_base64}}" />
Related
I am building a website using flask-python, css, HTML.
I am not able to get transparent dropdown menu i changed the styling for css code and given proper code to HTML Layout.
The dropdown occurs in the center without any styling which i had speified in CSS styling
If i write the code in only in HTMl and CSS for dropdown menu.The drop down menu works perfectly fine.
Main python Script
from flask import Flask,render_template
import os
from flask import send_from_directory
app = Flask(__name__)
#app.route('/')
def home():
return render_template("home.html")
#app.route('/favicon.ico')
def favicon():
return send_from_directory(os.path.join(app.root_path, 'static'),
'favicon.ico', mimetype='image/vnd.microsoft.icon')
#app.route('/projects/')
def projects():
return render_template("projects.html")
if __name__ == "__main__":
app.run(debug = True)
layout code layout.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<body>
<head>
<meta charset="utf-8">
<title>Developer | Krishan</title>
<link rel = "stylesheet" href ="{{ url_for('static' , filename = 'css/main.css') }}">
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
</head>
<header>
<div class="container">
<h1 class = "logo">Krishan K B's Webpage</h1>
<strong><nav>
<ul class = "menu">
<li>Home</li>
<li>Projects
<ul class = "menu">
<li><a>Disaster Managment</a></li>
<li><a>Data Analytics</a></li>
<li><a>Volcanoes & Population</a></li>
<li><a>Games</a></li>
<li><a>Book App</a></li>
</ul>
</li>
</ul>
</nav></strong>
</div>
</header>
<div class = "container">
{%block content%}
{%endblock%}
</div>
</body>
</html>
Style css code style.css
body{
margin: 0 auto;
text-align: center;
font-family: brandon-grotesque,HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
}
ul {
margin: 0px;
padding: 0px;
list-style : none;
}
ul li {
float : left;
width : 200px;
height : 40px;
background-color: #020202;
opacity : .8;
line-height: 40px;
text-align: center;
font-size: 20px;
margin-right: 2px;
}
ul li a {
text-decoration: none;
color : white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
h1{
text-align: center;
font-family: 'Yellowtail', cursive;
color: #e46922;
margin: 50px auto 0 auto;
font-size:60px;
}
h2{
color:#66bfbf;
text-align: center;
font-family:'monntserrat',sans-serif;
padding-bottom: 10px;
}
h3{
color: #11999e;
font-family:'monntserrat',sans-serif;
}
p{
line-height: 2;
width: 40%;
margin: 40px auto 60px;
}
hr{
border: dotted #eaf6f6 6px;
border-bottom: none;
width: 6%;
margin: 100px auto;
}
a{
color: #80b838;
font-family:'monntserrat',sans-serif;
margin: 10px 20px;
text-decoration: none;
}
a:hover{
color: #eaf6f6;
}
.head{
color: #66bfbf;
font-size: 140%;
}
.top{
background-color: #E4F9F5;
position: relative;
padding-top: 100px;
}
.middle{
margin: 100px 0;
}
.bottom{
background-color: #66bfbf; ;
padding: 50px 0 10px;
}
.intro{
width: 30%;
margin: auto;
}
.top-cloud{
position: absolute;
right: 180px;
top: 30px;
}
.below-cloud{
position: absolute;
left: 150px;
bottom: 230px;
}
.img{
float: left;
margin-left: 320px;
}
.img-code{
float: right;
margin-right: 320px;
}
.skils{
width: 30%;
margin: auto;
}
.copyright{
color: #eaf6f6;
font-size: 0.75rem;
}
.contact-message{
width: 40%;
margin: 40px auto 60px;
}
.contact{
padding-bottom: 100px;
}
.btn {
margin: 100px;
background: #45b29a;
background-image: -webkit-linear-gradient(top, #45b29a, #45b29a);
background-image: -moz-linear-gradient(top, #45b29a, #45b29a);
background-image: -ms-linear-gradient(top, #45b29a, #45b29a);
background-image: -o-linear-gradient(top, #45b29a, #45b29a);
background-image: linear-gradient(to bottom, #45b29a, #45b29a);
-webkit-border-radius: 6;
-moz-border-radius: 6;
border-radius: 6px;
font-family: Arial;
color: #1b7f69;
font-size: 21px;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
.btn:hover {
background: #45b29a;
background-image: -webkit-linear-gradient(top, #45b29a, #1b7f69);
background-image: -moz-linear-gradient(top, #45b29a, #1b7f69);
background-image: -ms-linear-gradient(top, #45b29a, #1b7f69);
background-image: -o-linear-gradient(top, #45b29a, #1b7f69);
background-image: linear-gradient(to bottom, #45b29a, #1b7f69);
text-decoration: none;
}
Output i received :
enter image description here
I think your css is not properly rendered by flask, you need to hard reload
After this go to developers tool > sources tab , then search for the css file and crosscheck whether it is properly rendered or not.
Thanx i did hard reload and it worked but now i am not able to see the dropdown or any menu in my home page but i can see it in my projects webpage when i type /projects/ with the web address local host on URL. All the css styling changes are working perfectly fine but now there is no options menu in in my HomePage.
This is my homepage with no dropdown or any menu options to go to projects webpage :
enter image description here
This is my projects webpage, in this there is a dropdown and a menu with all the styling.
enter image description here
Homepage Code:
{%extends "layout.html"%}
{%block content%}
<div class = "home">
<div class="top">
<img class="top-cloud" src="{{ url_for('static' , filename = 'images/clo.png') }}" alt="cloud-img" height="200px">
<h1> I'm Krishan.</h1>
<p class="head">A Back End Developer.</p>
<img class="below-cloud" src="{{ url_for('static' , filename = 'images/clo.png') }}" alt="cloud-img" height="200px">
<img src="{{ url_for('static' , filename = 'images/land.svg') }}" alt="mounntains-img" height="350px">
</div>
<div class="middle">
<img class="profile" src="{{ url_for('static' , filename = 'images/profile.png') }}" alt="profile" height="150px" >
<h2>Hi.</h2>
<P class="intro"> I'm a Programme developer,web developer and designer,UI Designer based in Bangalore,India.I have a passion for web app,data analytics,web design,data analytics and coding and love to create new apps,website for web and mobile devices.</P>
</div>
<hr>
<div>
<h2>What I can do.</h2>
<img class="img" src="{{ url_for('static' , filename = 'images/coding.png') }}" alt="" height="150px" >
<p>I like to keep it simple. My goals is to develop a new programme which would be beneficial for the people and be enviromen friendly.</p>
</div>
<hr>
<div class="skill">
<h2>Develop what you need.</h2>
<img class="img-code" src="{{ url_for('static' , filename = 'images/code-img.png') }}" alt="" height="150px" >
<p class="skills">I'm a developer, so I know how to create your website,application or any other programme to run across devices using the latest technologies available.</p>
</div>
<hr>
<div class="contact">
<h2>Get in touch.</h2>
<h3>I’m currently available for freelance work.</h3>
<p class="contact-message">if you have a project that you want to get started, think you need my help with something or just fancy saying hey, then get in touch.</p>
<a class="btn" href="mailto:krishankbhushan#gmail.com">message me</a>
</div>
</div>
<div class="bottom">
<a class="footer-link" href="https://www.linkedin.com/in/krishan-k-b-0a164b125/">Linkedin</a><i class="fab fa-twitter"></i>
<a class="fab fa-twitter" href=" https://twitter.com/krishankbhushan"><i class="fa fa-twitter"></i>Twitter</a>
<i class="fa fa-twitter" style="font-size:24px"></i>
<p class="copyright">©️ 2021 Krishan.All rights reserved.</p>
</div>
</div>
{%endblock%}
I have produced individual html tables showing work orders from multiple departments , and a running count rendered in the header of how many are orders are 'Completed' out of the 'Total' number of orders in that department. This all works fine, but I cannot find a way, clever or otherwise, to render these tables side by side on an html page. I can't have the tables on top of one another because the page will be appear static on a large monitor through a raspberry pi, so scrolling isn't an option.
pd.set_option('colheader_justify', 'center') # FOR TABLE <th>
table1 = CNC.to_html(classes='mystyle', na_rep='', index = False)
status1 = f"{C10} of {Total10} Completed"
html_string = f'''
<html>
<head><title>HTML Pandas Dataframe with CSS</title></head>
<link rel="stylesheet" type="text/css" href="df_style.css"/>
<body>
<h1 style="border:2px solid DodgerBlue;font-size:35px;text-align:center"> C N C </h1>
<h1 style="background-color:MediumSeaGreen;font-family:verdana;font-size:40px;text-align:center"> {status1} </h1>
{table1}
<script>setInterval(() => location.reload(), 60000);</script>
</body>
</html>.
'''
with open("CNC.html", mode = 'w') as f:
f.write(html_string.format(table=CNC.to_html(classes='mystyle', na_rep='', index = False)))
CSS
.mystyle {
font-size: 15pt;
font-family: Arial;
border-collapse: collapse;
border: 1px solid silver;
}
.mystyle td, th {
padding: 10px;
}
.mystyle tr:nth-child(even) {
background: #E0E0E0;
}
.mystyle tr:hover {
background: silver;
cursor: pointer;
}
.mystyle {
margin: auto;
padding: 0;
}
.mystyle {
text-align: center;
width: 100%;
}
Rendered CNC html table
This obviously creates and renders only a single table on an html page
It would be great if there was some CSS magic I could use so that I could just apply that stylesheet to each department's html.
so I have this website that allows me to get the email from a user that has signed up to the website, so when you sign up it adds your discord username and your email after it in a text file like this
Discorduser#0182 Test#example.com
Discordusernumber_one#0182 Testboi#example.co.uk
However, it retrieves the email from the first line when i put in the first option, but if i do the 2nd user, it cant seem to find it, here is the code to the website... the code is part of a bottle.py script but here is the main parts of this page
#get('/get_confirm')
def confirm():
return CONFIRM_PAGE
#post('/get_confirm')
def confirm():
name = request.forms.get('name')
for line in open('Confirmations.txt', 'r').readlines():
login_info = line.replace('\n', '').split()
if name == login_info[0]:
return CONFIRM_PAGE.replace('''<h1 id='emailbox'></h1>''', '<h1>' + login_info[1] + '</h1>')
else:
return CONFIRM_PAGE.replace('''<h1 id='emailbox'></h1>''', '<h1>' + 'That user is not valid' + '</h1>')
CONFIRM_PAGE = '''
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="/static/icon.ico">
<title>TylerR - get_confirms</title>
<style>
.content {
background: white;
padding: 15px;
border-radius: 3px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body style='background-size: cover; background-image: url(\"/static/WebisteBackground.png\"); background-attachment: fixed;'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='/commands'>Commands</a></li>
<li><a href='/youtube'>Youtube</a></li>
<li><a href='/downloads'>Downloads</a></li>
<a href='https://www.youtube.com/channel/UCTHnGh3DpDXMyuL03ove1tQ'>
<img align='right' src='/static/youtubelogo.png' style="width:40px;height:40px;">
</a>
<a href='https://www.instagram.com/drumsnaps/'>
<img align='right' src='/static/Insta.png' style="width:40px;height:40px;">
</a>
</ul>
</div>
<center>
<h1 style="font-family:Cooper Black; font-size: 7em;"><b>Confirmations<b></h1>
<br>
<h1>Please enter an username to retrieve email</h1>
<h3>When entering name, replace any spaces with _</h3>
<form method='POST' action='/get_confirm'>
<h2>Discord Username:</h2>
<input name='name' type='text' placeholder='User#0000'>
<br>
<input type='submit'>
</form>
<div class='content'>
<h1 id='emailbox'></h1>
</div>
</center>
</body>
</html>
'''
I am using bottle.py
so if anyone could let me know why this is happening that would be great
In your check it returns immediately - with success (if user is on the first line) or no success (if user is not on first line). You want to return no success, only after you checked all lines.
#post('/get_confirm')
def confirm():
name = request.forms.get('name')
with open('Confirmations.txt', 'r') as f:
for line in f:
user, email = line.strip().split()
if name == user:
return CONFIRM_PAGE.replace('''<h1 id='emailbox'></h1>''', '<h1>' + email + '</h1>')
return CONFIRM_PAGE.replace('''<h1 id='emailbox'></h1>''', '<h1>' + 'That user is not valid' + '</h1>')
Also, better use template engine like jinja2 to construct the HTML page.
This question already has answers here:
CSS selector for reCAPTCHA checkbok using Selenium and VBA Excel
(1 answer)
Find the reCAPTCHA element and click on it -- Python + Selenium
(2 answers)
How to click on the reCAPTCHA using Selenium and Java
(5 answers)
Closed 3 years ago.
I am trying to switch to iframe in captcha, but I get this error
selenium.common.exceptions.InvalidSelectorException: Message: invalid selector: The result of the xpath expression "//iframe" is: [object HTMLIFrameElement]. It should be an element.
I tryed with switcing to Iiframe, but it doesnt work, I find iframe with inspecting element, but I can not find element when I run the script, also I added explicit wait, time sleep, but it still doesn't work
here is html code
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Access to this page has been denied.</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
<style>
html, body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
color: #000;
}
a {
color: #c5c5c5;
text-decoration: none;
}
.container {
align-items: center;
display: flex;
flex: 1;
justify-content: space-between;
flex-direction: column;
height: 100%;
}
.container > div {
width: 100%;
display: flex;
justify-content: center;
}
.container > div > div {
display: flex;
width: 80%;
}
.customer-logo-wrapper {
padding-top: 2rem;
flex-grow: 0;
background-color: #fff;
visibility: hidden;
}
.customer-logo {
border-bottom: 1px solid #000;
}
.customer-logo > img {
padding-bottom: 1rem;
max-height: 50px;
max-width: 100%;
}
.page-title-wrapper {
flex-grow: 2;
}
.page-title {
flex-direction: column-reverse;
}
.content-wrapper {
flex-grow: 5;
}
.content {
flex-direction: column;
}
.page-footer-wrapper {
align-items: center;
flex-grow: 0.2;
background-color: #000;
color: #c5c5c5;
font-size: 70%;
}
#media (min-width: 768px) {
html, body {
height: 100%;
}
}
</style>
<script src="/rw7M6iAV/captcha/PXrw7M6iAV/captcha.js?a=c&m=0&u=266c5db0-19e6-11ea-8150-878a39a29362&v="></script><style type="text/css">.px-loader-wrapper { display: flex;}#keyframes loadingEffect { 0% { background-position: 0; } 100% { background-position: 60vw; }}.px-inner-loading-area { width: 310px; height: 30px; animation-name: loadingEffect; animation-duration: 1.2s; animation-iteration-count: infinite; animation-timing-function: ease; animation-fill-mode: forwards; background: linear-gradient(to right, #F6F6F6 8%, #F0F0F0 18%, #F6F6F6 33%);}.px-loading-area { width: 310px; height: 30px; margin: 0; ;}</style><script src="/rw7M6iAV/init.js"></script><a tabindex="-1" aria-hidden="true" href="/organization/waldeck-associates?_pxhc=1575828688573" rel="nofollow" target="_blank" style="width: 0px; height: 0px; font-size: 0px; line-height: 0;"></a></head>
<body>
<section class="container">
<div class="customer-logo-wrapper">
<div class="customer-logo">
<img src="" alt="Logo">
</div>
</div>
<div class="page-title-wrapper">
<div class="page-title">
<h1>Please verify you are a human</h1>
</div>
</div>
<div class="content-wrapper">
<div class="content">
<div id="px-captcha" role="main"><style>#media screen and (max-width: 350px) {
#px-captcha {
position: relative;
right: 32px;
}
}</style><iframe style="display: block; width: 310px; height: 100px; border: 0; padding:0; margin: 0; -moz-user-select: none;-khtml-user-select: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;" token="efbbf8834a03575dcd9c41ce37a32800bac150d7be5c1b3bf3a953f0879cfc3caa53da776440a3d731e03394daec916c92fe9416ba7947d3cea7370b970a551d"></iframe></div>
<p>
Access to this page has been denied because we believe you are using automation tools to browse the
website.
</p>
<p>
This may happen as a result of the following:
</p>
<ul>
<li>
Javascript is disabled or blocked by an extension (ad blockers for example)
</li>
<li>
Your browser does not support cookies
</li>
</ul>
<p>
Please make sure that Javascript and cookies are enabled on your browser and that you are not blocking
them from loading.
</p>
<p>
Reference ID: #266c5db0-19e6-11ea-8150-878a39a29362
</p>
<div id="px-block-form-wrapper"><div><style>#px-block-form-wrapper{width:400px;position:absolute;bottom:0;left:calc(50% - 200px)}#px-block-toggle-button{height:20px;background:#fff;color:#000;border-radius:3px;padding:10px;cursor:pointer;font-size:13px;text-align:center;width:270px;border:1px solid #000;font-weight:900;margin-left:75px;text-decoration:underline}#px-block-form{background:#fff;border:1px solid;border-color:#404040;color:#000;border-radius:3px;height:265px;font-size:12px}button#px-form-close{float:right;background:0 0;border:none;color:#fff;font-size:18px;cursor:pointer}button#px-form-submit{position:absolute;bottom:10px;background:#404040;border:none;width:100px;border-radius:3px;height:25px;color:#fff;right:20px;cursor:pointer}button#px-form-submit:disabled{background:#ddd;cursor:not-allowed;color:#000}div#px-form{color:#000;padding:15px}div#px-form-head{padding:10px;font-size:14px;background:#404040;color:#fff}div#px-form textarea{margin:-5px 0 0 4px;width:300px;height:36px}div#px-form div{margin-bottom:6px}#px-form-thank-you{background:#fff;color:#000;border:1px solid;border-color:#404040;border-radius:3px;height:54px;padding:5px 10px;text-align:center;width:330px;margin-left:35px}#px-form-thank-you div{font-size:15px;margin-top:14px}#px-form-thank-you span.checkmark{margin-right:8px;color:green;font-size:20px}div#px-form form h4{margin:8px 4px}#media only screen and (orientation:portrait){#px-block-form-wrapper{width:97%;position:relative;left:3%;z-index:10}#px-block-toggle-button{height:20px;background:#fff;color:#000;padding:3px;cursor:pointer;font-size:13px;text-align:center;width:94%;border:none;font-weight:900;text-decoration:underline;margin-left:0;position:fixed;bottom:5px;right:10px;width:initial}#px-block-form{background:#fff;border:1px solid;border-color:#404040;color:#000;border-radius:3px;height:250px;font-size:12px}button#px-form-close{float:right;background:0 0;border:none;color:#fff;font-size:18px;cursor:pointer;position:absolute;right:15px;padding:0;bottom:6px}button#px-form-submit{position:absolute;bottom:10px;background:#404040;border:none;width:100px;border-radius:3px;height:25px;color:#fff;right:20px;cursor:pointer;font-size:13px}button#px-form-submit:disabled{background:#ddd;cursor:not-allowed;color:#000}div#px-form{color:#000;padding:15px}div#px-form-head{padding:10px;font-size:14px;background:#404040;color:#fff;position:relative}div#px-form textarea{margin:-5px 0 0 4px;width:90%;height:36px}div#px-form div{margin-bottom:6px}#px-form-thank-you{background:#fff;color:#000;border:1px solid;border-color:#404040;border-radius:3px;height:54px;padding:5px 10px;text-align:center;width:94%;margin-left:0}#px-form-thank-you div{font-size:15px;margin-top:14px}#px-form-thank-you span.checkmark{margin-right:8px;color:green;font-size:20px}div#px-form form h4{margin:8px 4px}.container{display:block;position:relative}.container .content-wrapper{padding-bottom:40px}.container .page-footer-wrapper{position:fixed;bottom:0}.container .content-wrapper .content{margin:0 auto}}</style><div id="px-block-toggle-button" onclick="_pxToggleOpenForm()" hidden="">Report an issue</div><div id="px-block-form"><div id="px-form-head"><span>Experiencing issues? Let us know:</span> <button onclick="_pxToggleOpenForm(!0)" id="px-form-close">X</button></div><div id="px-form"><form><div style="display:none"><input onchange="_pxItemSelected()" type="radio" id="opt0" name="px-report-reason" value="-1"> <label for="opt0">I’m a bot</label></div><div><input onchange="_pxItemSelected()" type="radio" id="opt1" name="px-report-reason" value="1"> <label for="opt1">I don’t see any challenge</label></div><div><input onchange="_pxItemSelected()" type="radio" id="opt2" name="px-report-reason" value="2"> <label for="opt2">I keep solving the challenge</label></div><div><input onchange="_pxItemSelected()" type="radio" id="opt3" name="px-report-reason" value="3"> <label for="opt3">Other (please elaborate)</label></div><h4>Additional Information:</h4><textarea id="px-form-free-text" placeholder="Experiencing other issues?"></textarea></form><button disabled="disabled" id="px-form-submit" onclick="_pxSubmitForm()">Send</button></div></div><div hidden="" id="px-form-thank-you"><div><span class="checkmark">✓</span><span>Thank you for the feedback</span></div></div></div></div></div>
</div>
<div class="page-footer-wrapper">
<div class="page-footer">
<p>
Powered by
PerimeterX
, Inc.
</p>
</div>
</div>
</section>
<script>
window._pxAppId = 'PXrw7M6iAV';
window._pxJsClientSrc = '/rw7M6iAV/init.js';
window._pxFirstPartyEnabled = true;
window._pxVid = '';
window._pxUuid = '266c5db0-19e6-11ea-8150-878a39a29362';
window._pxHostUrl = '/rw7M6iAV/xhr';
</script>
<script>
var s = document.createElement('script');
s.src = '/rw7M6iAV/captcha/PXrw7M6iAV/captcha.js?a=c&m=0&u=266c5db0-19e6-11ea-8150-878a39a29362&v=';
var p = document.getElementsByTagName('head')[0];
p.insertBefore(s, null);
if (true) {
s.onerror = function () {
s = document.createElement('script');
var suffixIndex = '/rw7M6iAV/captcha/PXrw7M6iAV/captcha.js?a=c&m=0&u=266c5db0-19e6-11ea-8150-878a39a29362&v='.indexOf('captcha.js');
var temperedBlockScript = '/rw7M6iAV/captcha/PXrw7M6iAV/captcha.js?a=c&m=0&u=266c5db0-19e6-11ea-8150-878a39a29362&v='.substring(suffixIndex);
s.src = '//captcha.px-cdn.net/PXrw7M6iAV/' + temperedBlockScript;
p.parentNode.insertBefore(s, p);
};
}
</script>
</body></html>
The exception itself says that the selector is incorrect. Try to use absolute xpath while selecting the iFrame. Absolute xpath for captcha iframe always works for me.
Also it woulbe be great if you can share your automation code
I was wondering, is it possible to make this central box be "in the very" center of the page without using %?
I'm using VPS and I have some Python going on there, so I don't know how to use % sizes in order to get it right. But this is how far I came up only to hear that this isn't centered on 1280x1024:
https://s18.postimg.org/vta0qfd5l/2809583a0f43627d0fc1b428863b3faa.jpg
This is the code I have used:
h2 {
margin: 0;
}
body {
background-color: #121212;
background-image: url("https://app.box.com/shared/static/vgfs65li424fk8h4n5e23pm7070yrewq.jpg");
background-size: contain;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-height: auto;
max width: 1200px;
}
table {
display: inline-block;
position: absolute;
max-width: 350px;
max-height: 265px;
border: 5px ridge yellow;
top: 0;
bottom: 0;
margin: auto;
left: 0;
right: 0;
padding-left: 90px;
padding-right: 90px;
background: rgba(255, 255, 255, 0.8);
}
div {
text-align: center;
align: center;
}
<div>
<table>
</table>
</div>
So, any idea what I can improve to "nail it"? I've noticed that if I add more to max-width complete box moves to the left. Maybe if I can solve this, I would solve the first problem as well?
This question is unique because I can't use percentage in order to align table properly, so I just want to know if this is possible at all.
Thanks!
If your page is served as a HTML webpage, you should be able to use JS, HTML, and CSS without your backend mucking it up. If you apply the following styles to any element, it will be centered:
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
There were some errors as well which would pretty much frag the remaining styles you might've expected:
background-height
Does not exist.
min width:
should be:
> min-width:
and
align: center;
doesn't exist either.
In this Snippet I corrected the previously mentioned errors and refactored a substantial amount. You have a div framing the table, so it made more sense to center the div and make sure that the table stays within the div. Let me know if I'm close to expected results or not.
SNIPPET 1
h2 {
margin: 0;
}
body {
background-color: #121212;
background-image: url("https://app.box.com/shared/static/vgfs65li424fk8h4n5e23pm7070yrewq.jpg");
background-size: contain;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
height: auto;
max-width: 1200px;
}
table {
position: absolute;
top: 0;
left: 0;
margin: 0 auto;
background: rgba(255, 255, 255, 0.8);
width: 100%;
height: 100%;
}
div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
max-width: 350px;
max-height: 265px;
border: 5px ridge yellow;
}
<div>
<table>
</table>
</div>
This solution should work, but if you insist on not using percentages for reasons beyond my comprehension, then consider the viewport measurement unit.
100vw = 100% of viewport width
100vh = 100% of viewport height
The big difference between percentage unit of measure and viewport unit of measure is that percentage lengths are determined by whatever contains the subject element being measured. While a viewport length is determined by the dimensions of your viewable area of the screen. See the following Snippet to see the difference, view it in full page mode and resize to test the demonstration at different dimensions. For more on vw and vh refer to this article.
SNIPPET 2
body {
background: black;
color: white;
}
#A {
border: 3px dotted red;
width: 500px;
height: 250px;
background: rgba(255, 0, 0, .4);
}
#B {
border: 2px dashed blue;
width: 50%;
height: 50%;
background: rgba(0, 0, 255, .4);
}
#C {
border: 2px dashed yellow;
width: 50vw;
height: 50vh;
background: rgba(0, 255, 255, .4);
}
<p>Viewable area of browser is viewport. View this in Full page mode and resize the browser at various sizes. Div B (blue) doesn't change. Div C (yellow) does.</p>
<div id='A'>
A width: 500px height: 250px
<div id='B'>B width: 50% height: 50%</div>
<div id='C'>C width: 50vw height: 50vh</div>
</div>
You can position it using absolute positions in CSS and measurements in px. If you are using Jquery then you can get the document sizes using
$(document).height();
$(document).width();
or
$(window).height(); // for the viewport.
Some quick JavaScript calculations should allow you to dynamically position something anywhere you want.
Don't forget to bind .resize() events to adapt to user adjusting browser size.
Heres a nice article on getting window sizes etc.
https://andylangton.co.uk/blog/development/get-viewportwindow-size-width-and-height-javascript
thank you for your help, but I talked to a friend meanwhile and we came up to satisfying solution, so here's the final code and what we did
I removed the table from the body and other non-necessary items (forgive me, as I'm a newbie)
Instead of max height and width we used height and width - we had to fine tune height so that all browsers can display content properly and I have tested this out on cellphone, iPad, several monitors, everything is shown in a way I would like to.
Except for IE8... but honestly, it doesn't matter :)
<style>h2 {
margin: 0;
}
body {
background-color: #121212;
background-image: url("https://app.box.com/shared/static/vgfs65li424fk8h4n5e23pm7070yrewq.jpg");
background-size: contain;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
.FormBody {
display: inline-block;
position: absolute;
width: 380px;
height: 305px;
border: 5px ridge gold;
top: 0;
bottom: 0;
margin: auto;
left: 0;
right: 0;
padding-left: 90px;
padding-right: 90px;
text-align: center;
background: rgba(255, 255, 255, 0.8);
}
</style>
<html>
<meta charset="utf-8">
<head>
<title>CTLServer REGISTRACIJA</title>
</head>
<script src="/md5.js" type="text/javascript"></script>
<script>
function makeHash() {
a = document.getElementById('serial').value;
a = a.replace(/^\s+/, '').replace(/\s+$/, '').replace(/-/g, '').toUpperCase();
if (!a.match(/^[A-Z0-9]{20}$/)) {
alert('Neispravan serijski broj.');
return false;
}
document.getElementById('serial').value = a;
while (a.length < 36) {
a += '\0';
}
u = document.getElementById('username').value;
u = u.replace(/^\s+/, '').replace(/\s+$/, '');
if (u.length < 3 || !u.match(/^[0-9a-zA-Z]+$/)) {
alert('Zabranjeno ime za korisnika - dozvoljeno 3-36 alfa-numerička znaka (0-9 | a-z | A-Z).');
return false;
}
p = document.getElementById('password').value;
if (p.length < 3) {
alert('Lozinka je kratka - minimum 3 alfa-numerička znaka (0-9 | a-z | A-Z)');
return false;
}
document.getElementById('hash').value = hex_md5(a + u + '-' + p);
return true;
}
</script>
<div class="FormBody">
<br />
<h2><u>• CTLServer REGISTRACIJA •</h2>
</u>
<strong>LINK za HOST<br /></strong>
<br />
<form name="registration" action="/register" method="POST">
<input type="hidden" name="nonce" id="nonce" value="%(nonce)s" />
<input type="hidden" name="hash" id="hash" size="32" value="" />
<strong>Serijski Broj:</strong>
<br />
<input type="text" name="serial" id="serial" size="40" value="%(serial)s" onkeydown="if (event.keyCode == 13) {document.getElementById('btnGen').click(); return false;}" />
<br />
<br />
<strong>Korisničko Ime:</strong>
<br />
<input type="text" name="user" id="username" size="40" value="%(username)s" onkeydown="if (event.keyCode == 13) {document.getElementById('btnGen').click(); return false;}" />
<br />
</form>
<strong>Lozinka:</strong>
<br />
<input type="password" id="password" size="40" value="" onkeydown="if (event.keyCode == 13) {document.getElementById('btnGen').click(); return false;}" />
<br />
<p>
<input class="button" type="button" id="btnGen" value="Registruj se" onclick="if (makeHash()) {document.forms['registration'].submit();}" />
</p>
</div>
</html>
So once again, thanks for all your help, especially #zer00ne I will definitely read your post briefly couple of times as I think there is a lot I can understand from there. And as a matter of fact I think I'm gonna try other methods as well, just to make it work in case I'm gonna need them at some point.