I am trying to place an overlay from an iframe and am having no success.
My main html calls an iframe in the body with an html like so;
<iframesrc="links.html"></iframe>
this "links.html" file holds the links to overlays. Like so;
<a class="popup-link" href="#overlay-1" onclick="overlay.show('overlay-1', this);return false;">Click here to see overlay 1</a>
I have placed them in the main html and in the links.html files but they don't work :(
The overlays look kinda like this,
<!-- PANEL 1.1 -->
<div class="common-overlay" id="overlay-1">
<div class="head">
<p><a class="common-overlay-close" href="#close">Close [x]</a></p>
</div>
<div class="body">
<div class="main">
<div class="title subtitle">
<h2>Forgot password?</h2>
</div>
<div class="container alternate buttons-last">
<div class="container-body">
<p class="overlay-intro">Please enter your ID.</p>
<!-- ========================================== -->
<!-- EXAMPLE FORM - DO NOT ACTUALLY SUBMIT FORM -->
<!-- ========================================== -->
<form action="[REPLACE]" class="column-form" enctype="multipart/form-data" method="post">
<p><label for="Display_name">ID:<span class="required">*</span></label><span><input name="ID" size="25" value="" style="width: 200px;" class="required" type="text" /></span> </p>
<p>
<p>Don't know ID?</p>
<div class="overlay-rule"><hr />
</div>
<p class="first"><input class="btn-arrow-pri" name="submit" value="Proceed" type="submit" /></p>
</form>
</div>
</div>
</div>
</div>
<div class="footer"></div>
</div>
How can i accomplish this?
Thanks in advance
Most of the time when the need of overlaying occurs, css properties that generate an output towards what is desired is generally the best bet. I'd recommend looking into Twitter's Bootstrap, it's a great framework and be an immense help towards what I believe you're trying to accomplish: http://getbootstrap.com/2.3.2/ (I'd stick w/ 2.3.2 until the official 3 is released).
Also, try this adjustment:
<!-- PANEL 1.1 -->
<div class="common-overlay" id="overlay-1">
<div class="head">
<p><a class="common-overlay-close" href="#close">Close [x]</a></p>
</div>
<div class="body">
<div class="main">
<div class="title subtitle">
<h2>Forgot password?</h2>
</div>
<div class="container alternate buttons-last">
<div class="container-body">
<p class="overlay-intro">Please enter your ID.</p>
<!-- ========================================== -->
<!-- EXAMPLE FORM - DO NOT ACTUALLY SUBMIT FORM -->
<!-- ========================================== -->
<form action="[REPLACE]" class="column-form" enctype="multipart/form-data" method="post">
<p><label for="Display_name">ID:<span class="required">*</span></label><span><label>
<input name="ID" size="25" value="" style="width: 200px;" class="required" type="text"/>
</label></span></p>
<p>
<p>Don't know ID?</p>
<div class="overlay-rule"><hr />
</div>
<p class="first"><input class="btn-arrow-pri" name="submit" value="Proceed" type="submit" /></p>
</form>
</div>
</div>
</div>
</div>
<div class="footer"></div>
</div>
Related
I tried to make some changes to HTML Code below and used styles for width and height to make the elements responsive for all pages but I could not figure out how to make all below elements responsive on smaller screens such as Cellphones and Ipads. I fill it should be a way to adjust everything based on the background picture or any first tag or page.
Here is the code so far I wrote:
<!DOCTYPE html>
<html lang="en">
<head>
<title>{lang_login_title}</title>
<meta name="description" content="{lang_login_desc}" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{SC_LIB_PROJECT}online-shop/main.css">
<!--SC_JS_LIB-->
<!--SC_PAGE_CHARSET-->
</head>
<body class="page-background" style="background-image:url('{SC_LIB_PROJECT}online-shop/login/golden.jpg');">
<div class="page">
<div class="container-small container-alpha">
<div class="background">
<div class="content">
<h1>
Client Panel
</h1>
<p>
Data Technology, California, USA
</p>
<p></p>
<p>
Instagram Page:
</p>
<p>
#CutieSiberianHusky
</p>
</div>
</div>
<form class="form" action="" {SC_FORM_ATTR}>
<!--SC_FORM_HIDDEN-->
<h2>
</h2>
<div class="control">
<label class="label" for="name">{lang_login}</label>
<input class="input {SC_FIELD_CLASS}" type="text" placeholder="{lang_login}" {SC_FIELD_INFO_login}>
</div>
<div class="control">
<label class="label" for="pass">{lang_password}</label>
<!--<input class="input {SC_FIELD_CLASS}" type="password" placeholder="{lang_password}" {SC_FIELD_INFO_password}>-->
<input class="input {SC_FIELD_CLASS}" type="password" id="inputPassword" class="form-control {SC_FIELD_CLASS}" {SC_FIELD_INFO_pswd}>
</div>
<div class="submit">
<input class="button" type="submit" value="Login" {SC_FORM_SUBMIT_INFO} />
</div>
<!-- Idiomas -->
<div class="flag-lang">
<a class="flags" href="../login/login.php?lang=en"><img src="{SC_LIB_PROJECT}online-shop/img/en_us.png"></a>
<a class="flags" href="../login/login.php?lang=pt"><img src="{SC_LIB_PROJECT}online-shop/img/pt_br.png"></a>
<a class="flags" href="../login/login.php?lang=es"><img src="{SC_LIB_PROJECT}online-shop/img/es_es.png"></a>
</div>
<hr style="margin: 25px 0 20px;">
<div id='message'>
{SC_FIELD_INFO_Links}
<!--<p style="color:#333;font-size:12px;"><b>{lang_new_user}</b></p>
<p style="color:#333;font-size:12px;"><b>{lang_login_to_access}</b></p>
<p style="color:#333;font-size:12px;"><b>{lang_login}:</b> admin</p>
<p style="color:#333;font-size:12px;"><b>{lang_password}:</b> admin</p>-->
</div>
</form>
</div>
</div>
<div class="copyright">
<p>©2021 Data Technology. All rights reserved.</p>
</div>
</body>
</html>
Here is how it look like in large screens:
And here is how it look like in smaller screen size(for example: Iphone X):
I would be appreciate if someone help me to see how to use style and width on this or if there is another way to adopt all elements based on screen size once. I know how to do this in SWIFT but I am not sure how to do it in HTML
you try to use (#media screen) in your css.
source link
I recently downloaded a template to be used for login/signup on my page and am trying to figure out a class that can wrap up the upload button(font awesome icon) and the select file input control for an image.
Here is my code...
<html>
<head>
<--//Bootstrap support plugins->
</head>
<body>
<div class="wthree-form bg">
<div class="agileits-2">
<h2>Sign Up Here</h2>
</div>
<form action="signup.php" enctype="multipart/form-data" method="post">
<--These classes make the form look real good by wrapping up the font awesome icon with an input field->
<div class="w3-user">
<span><i class="fa fa-user-o"></i></span>
<input type="text" name="Username" placeholder="Username" required="">
</div>
<--Here is my problem->
<div class="w3-? ">
<span><i class="fa fa-upload"></i></span>
<input type="file" name="fileToUpload">
</div>
<form>
</div>
</body>
</html>
The question mark above is what needs a class to make the form wrap the upload icon together with a classy select file control to make it look good thanks...
The other wrap controls work perfectly well
I'm not sure that this will fix your problem, but it looks like you need to change your second form tag to a closing form tag.
change
<div class="w3-? ">
<span><i class="fa fa-upload"></i></span>
<input type="file" name="fileToUpload">
</div>
<form>
</div>
</body>
</html>
to
<div class="w3-? ">
<span><i class="fa fa-upload"></i></span>
<input type="file" name="fileToUpload">
</div>
</form>
</div>
</body>
</html>
I have just started learning Bootstrap and am trying to implement it in a web page. But I am having trouble in preventing the bootstrap class divs from overlapping each other. On full screen, the web page looks like:
On reducing the width of the window by some amount, it becomes:
And making window almost as small as mobile screen I get this:
My html code for this is:
<body>
<div id="point" class="row container-fluid">
<div id="point_display" class="col-md-10">
</div>
<div id="point_info" class="row col-md-2">
<div class="col-md-8">
<h5>Current point position:</h5>
<p></p>
</div>
<div class="col-md-8">
<input type="checkbox" id="coordinate_transform" onclick="transformCoordinate(this.checked)"><span>Transform co-ordinate system</span></input>
</div>
<div class="col-md-8">
<h5>Transformation matrix:</h5>
<div id="transformMatrix">
</div>
</div>
</div>
</div>
<div id="control" class="row container-fluid">
<div id="slider" class="col-md-2">
<input type="range" value="0" min="0" max="100" oninput="changePosition(this.value)" onchange="changePosition(this.value)" />
</div>
<!--div id="coordinate" -->
<div class="col-md-3"><span>X: </span><input id="newX" type="number" step="0.0001" value=1 00></div>
<div class="col-md-3"><span>Y: </span><input id="newY" type="number" step="0.0001" value=1 00></div>
<div class="col-md-3"><span>Z: </span><input id="newZ" type="number" step="0.0001" value=- 300></div>
<!--/div-->
<div class="col-md-3"><button id="change_destination" onclick="setNewDestination()">Set New Destination</button></div>
<div class="col-md-3"><button id="reset_camera" onclick="resetCamera()">Reset Camera</button></div>
</div>
<script src="js/main_script.js"></script>
</body>
The black part of the page with axes and stuff is dynamically added to the div with id= point_display inside div point and the matrix is also dynamically added in the div with id = `transformMatrix"
Please help me figure out how to prevent the overlapping of the elements so that on reducing width, they just stack one below other.
EDIT: This seems to be due to the file itself and possibly where it is stored on the machine (it's on a mounted volume). It is unlikely to be related to the form or Django, since other files work as expected.
I have a pretty simple HTML page with a form which is behaving very strangely:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta name="generator" content=
"HTML Tidy for Linux (vers 25 March 2009), see www.w3.org">
<title>Add picture</title>
</head>
<body class="app-products model-picture change-form">
<!-- Container -->
<div id="container">
<!-- Header -->
<div id="header">
<div id="branding">
<h1 id="site-name">administration</h1>
</div>
</div><!-- END Header -->
<!-- Content -->
<div id="content" class="colM">
<h1>Add picture</h1>
<div id="content-main">
<form enctype="multipart/form-data" action=
"/admin/products/picture/add/" method="post" id="picture_form"
novalidate="" name="picture_form">
<div>
<fieldset class="module aligned">
<div class="form-row field-alt_text">
<div>
<label class="required" for="id_alt_text">Alt text:</label>
<textarea class="vLargeTextField" cols="40" id="id_alt_text"
name="alt_text" rows="10">
</textarea>
</div>
</div>
<div class="form-row field-original_image">
<div>
<label class="required" for="id_original_image">Original
image:</label> <input id="id_original_image" name=
"original_image" type="file">
</div>
</div>
</fieldset>
<div class="submit-row">
<input type="submit" value="Save" class="default" name="_save">
<input type="submit" value="Save and add another" name=
"_addanother"> <input type="submit" value=
"Save and continue editing" name="_continue">
</div>
</div>
</form>
</div><br class="clear">
</div><!-- END Content -->
<div id="footer"></div>
</div><!-- END Container -->
</body>
</html>
It is being served up by a django application as a static file (to keep things simple).
When I click the "Save" button to submit the form without filling it out at all (or if I put some text in the textarea), I see a POST request go through to the django application as expected. However, if I choose a file with the "file" input and then try to submit the form, no POST request reaches the application. In fact, no request is sent (I'm watching the HTTP traffic in wireshark). In Google chrome, I see the following error page:
Any ideas?
Are the name of your inputs separated by a white space?
name= "myinputname"
If so, the form will not process.
I have a JQuery mobile application that is running on a tablet. But my problem is that my button (SEARCH) losses position and I would have to drag the screen if I want to see it when the tablet orientation is in landscape. How do I make sure it is still visible on both potrait and on landscape?
<div id="divBody" data-role="page" data-theme="c">
<div data-role="header" class="hesto">
<h1>Weld Splice </h1>
</div>
<div data-role="content">
<div> <input type="text" name="text-1" id="txtBarcode" class="barcodeTxt" placeholder="Scan barcode" value=""/></div>
<div id="divButton"> Search</div>
</div>
<div id="divFooter" data-role="footer" >
</div>
</div>
Wrap each one - input and button - with div class ui-grid-solo
<div class="ui-grid-solo">
<input type="text" name="text-1" id="txtBarcode" class="barcodeTxt" placeholder="Scan barcode" value="" />
</div>
<div class="ui-grid-solo">
<div id="divButton">Search
</div>
</div>
Reference: Grids - JQM v1.3.0
If the button is getting pushed down why not placed it in the header bar??
If you are ok with the approach you may change something as below
<div id="divBody" data-role="page" data-theme="c">
<div data-role="header" class="hesto">
<h1>Weld Splice </h1>
Search
</div>
<div data-role="content">
<div>
<input type="text" name="text-1" id="txtBarcode" class="barcodeTxt" placeholder="Scan barcode" value="" />
</div>
<div id="divButton"></div>
</div>
<div id="divFooter" data-role="footer"></div>
</div>
Check out a live fiddle at http://jsfiddle.net/mayooresan/DuReF/