I founded some search-form with no button, they have the search icon featured as a submit button.
Normally they have html and css like this:
<form method="get" action="search.php">
<input type="text" class="" placeholder="search" name="s">
<span class="icon-search"></span>
</form>
span {
bottom: 0;
cursor: pointer;
line-height: 40px;
opacity: 0.3;
position: absolute;
right: 0;
text-align: center;
top: 1px;
width: 40px;
}
And it displays like this:
This span icon is clickable and works as submit button. How does it work?
Related
We would like to have a website search bar form and a Google Driving Directions form on the same page.
Today we added a search bar to every page on MinnesotaSeasons.com, over 5,000 pages. It works on every page except 480 "Destination" pages that already have a driving directions form. Adding CSS positioning for "form" puts one form on top of the other. The Website does NOT use PHP - at least, those three letters do not appear together anywhere in the code.
The search bar is a must, but we would hate to lose the driving directions. The problem results can be seen here on the top right corner of the page:
http://www.minnesotaseasons.com/Destinations/Afton_State_Park.html
Here is the code on "Destinations" pages - no CSS used:
<td class="tableNote"><form action="http://maps.google.com/maps" method="get" target="_blank">
<p>Get driving directions from Google Maps to this destination from any address, and send those directions to your phone.</p>
<p>
<label for="mapsUsSaddr"><strong>Your Address</strong> (street address and either city and state or ZIP code)</label>
</p>
<p>
<input type="text" class="text" name="saddr" id="mapsUsSaddr" value="" placeholder="Your Address" />
</p>
<p>
<input type="submit" class="clickDirections" value="Click Here for Directions" />
<input type="hidden" name="daddr" value="N45 2.898, W93 10.384" />
<input type="hidden" name="hl" value="en" />
</p>
</form></td>
Here is the search bar code on all pages:
<form role="search" id="form">
<input type="search" id="query" name="q" placeholder="Search..." aria-label="Search through site content">
<button>
<svg viewBox="0 0 1024 1024"><path class="path1" d="M848.471 928l-263.059-263.059c-48.941 36.706-110.118 55.059-177.412 55.059-171.294 0-312-140.706-312-312s140.706-312 312-312c171.294 0 312 140.706 312 312 0 67.294-24.471 128.471-55.059 177.412l263.059 263.059-79.529 79.529zM189.623 408.078c0 121.364 97.091 218.455 218.455 218.455s218.455-97.091 218.455-218.455c0-121.364-103.159-218.455-218.455-218.455-121.364 0-218.455 97.091-218.455 218.455z"></path></svg>
</button>
</form>
<script>
const f = document.getElementById('form');
const q = document.getElementById('query');
const google = 'https://www.google.com/search?q=site%3A+';
const site = 'minnesotaseasons.com';
function submitted(event) {
event.preventDefault();
const url = google + site + '+' + q.value;
const win = window.open(url, '_blank');
win.focus();
}
f.addEventListener('submit', submitted);
</script>
Here is the CSS for the search bar:
form {
position: absolute;
top: 75px;
left: 680px;
z-index: 200;
background-color: #4654e1;
width: 250px;
height: 30px;
display:flex;
flex-direction:row;
align-items:center;
}
input {
all: unset;
font: 16px system-ui;
color: #fff;
height: 100%;
width: 100%;
padding: 6px 10px;
}
::placeholder {
color: #fff;
opacity: 0.7;
}
svg {
color: #fff;
fill: currentColor;
width: 24px;
height: 24px;
padding: 10px;
}
button {
all: unset;
cursor: pointer;
width: 44px;
height: 44px;
}
Using $xpath = new DOMXpath($doc) by no means I could not get div (and its children) if it is placed under anchor.
In XPath:
html[1]/body[1]/div[3]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/a[1]/div[1]/div[2]/div[1]/div[2]/img[1]
I evaluated elements one by one starting from body and when I reached the anchor it was the last tag in XPath that could be read.
I know this is not the best practice to place block elements into anchors but this html page is not mine and I cannot modify it.
Please advise if there is any trick to get it?
.....<div class="main-image">
<a title="" style="outline-style: none; text-decoration: none;" class="jqzoom" rel="gallery1" data-active="1" href="files/product/images/239_image_raw.jpg">
<div class="zoomPad">
<img style="opacity: 1;" title="" src="files/product/images/239_image.jpg" alt="ABSOLUTE SUMMER 8 VITA BASSA" height="320" width="240">
<div style="top: 97.6167px; left: 80px; width: 148px; height: 153px; position: absolute; border-width: 1px; display: none;" class="zoomPup"></div>
<div style="position: absolute; z-index: 5001; left: 239px; top: 0px; display: none;" class="zoomWindow">
<div style="width: 312px;" class="zoomWrapper"><div style="width: 100%; position: absolute; display: none;" class="zoomWrapperTitle"></div>
<div style="width: 100%; height: 320px;" class="zoomWrapperImage">
<img src="files/product/images/239_image_raw.jpg" style="position: absolute; border: 0px none; display: block; left: -169.782px; top: -206.257px;">.....
I will answer to myself :)
I took xpath from google chrome, but I did not take into account that what you see in browser is not necessary to be the same with html source as the browser shows content after javascript processing.
......
To style inputs of type "checkbox" and "radio" if they are mandatory I created some css information:
input[type=checkbox].is-mandatory::before {
position: absolute;
left: -5px;
top: -5px;
border: solid 1px #A94442;
border-radius: 4px;
width: 22px;
height: 22px;
content: "";
}
input[type=checkbox].is-mandatory::after {
position: absolute;
left: -4px;
top: -4px;
border: solid 4px #F2DEDE;
border-radius: 4px;
width: 20px;
height: 20px;
content: "";
}
<div class="checkbox">
<label>
<input class="is-mandatory" type="checkbox" id="chk0" name="chk0" value="0">
A simple checkbox (mandatory)
</label>
</div>
<div class="radio">
<label>
<input class="is-mandatory" type="radio" id="chk1" name="chk1" value="1">
A radio (mandatory)
</label>
</div>
Unfortunately it seems only displayed in Chrome and not in FF44 and IE11
styled checkbox and radio in chrome
Is there someting missing in css declaration to get the same view in IE and FF like in Chrome?
Sorry but Pseudo elements doesn't support on input. Please check the link below but i am not pretty sure that this is gonna help you
http://arthurgouveia.com/prettyCheckable/
Keep in mind that while an input can't have a :before and :after pseudo-element, the LABEL can. Set your label to have a "for" attribute that's equal to the name/id of your input, and it might help solve some issues.
I wanna add a color asterix in my form's placeholder, is it possible?
Here is pure css solution IE10+
.input-placeholder {
position: relative;
}
.input-placeholder input {
padding: 10px;
font-size: 25px;
}
.input-placeholder input:valid + .placeholder {
display: none;
}
.placeholder {
position: absolute;
pointer-events: none;
top: 0;
bottom: 0;
height: 25px;
font-size: 25px;
left: 10px;
margin: auto;
color: #ccc;
}
.placeholder span {
color: red;
}
<form novalidate>
<div class="input-placeholder">
<input type="text" required>
<div class="placeholder">
Email <span>*</span>
</div>
</div>
<input type="submit">
</form>
At first glance it doesn't seem possible, but it may be a good alternative to create your own fake spanholder element:
<div class="holder">Email Address <span class="red">*</span></div>
<input id="input" size="18" type="text" />
Fiddle
As far as I know, this is not possible.
One solution I have seen used in the past is to add a background-image of a red asterisk to your input field, but that makes it difficult to duplicate the visual alignment you are going for. More info on this method: Use CSS to automatically add 'required field' asterisk to form inputs
Another solution would be to add the span (and placeholder text) outside of the input field, but that would require some JavaScript to control when it is and isn't visible.
Here is a JSFiddle I just created for this method (using jQuery): http://jsfiddle.net/nLZr9/
HTML
<form>
<div class="field">
<label class="placeholder" for="email">
Email Address
<span class="red">*</span>
</label>
<input id="email" type="text" />
</div>
</form>
CSS
.field {
position: relative;
height: 30px;
width: 200px;
}
input, label {
position: absolute;
top: 0;
left: 0;
bottom: 0;
top: 0;
background: transparent;
border: 0;
padding: 0;
margin: 0;
text-indent: 5px;
line-height: 30px;
}
JS
$('.field input')
.on( 'focus', function () {
$(this).siblings('label').hide();
} )
.on( 'blur', function () {
if ( !$(this).val() )
$(this).siblings('label').show();
} );
You can try the following :
HTML
<div class="hold">
<input type="text" placeholder="" required="required">
<span class="req_placeholder">Name <span>*</span></span>
</div>
CSS
.hold {
position: relative;
}
input[required="required"]:valid + .req_placeholder {
display: none;
}
.req_placeholder {
position: absolute;
top: 2px;
left: 2px;
}
.req_placeholder span {
color: red;
}
I found a jQuery plugin that might suit you, the pholder plugin.
If you look the demo, the placholder of the "Name" field is red.
There may be other plugins or maybe you can edit it. :)
This is a good case for pseudo-elements.
.someclass {
position:relative;
}
.someclass:after {
position:absolute;
top:0;
right:10px;
content: "*";
color:#ff0000
}
...adjust to your own layout.
You can use pseudo elements in CSS (not supported in old browsers)
.mandatory::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #ff0000;
}
.mandatory:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #ff0000;
}
.mandatory::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #ff0000;
}
.mandatory:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #ff0000;
}
.mandatory:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
color: #ff0000;
}
<form>
<p>
<label for="input1">Input 1:</label>
<input type="text" id="input1" placeholder="Fill input" class="mandatory" />
</p>
<p>
<label for="input2">Input 2:</label>
<input type="text" id="input2" placeholder="Fill input" />
</p>
<p>
<label for="textarea">Input 2:</label>
<textarea id="textarea" placeholder="Fill textarea"></textarea>
</p>
</form>
I'm working on a digital textbook feature that would allow the student to click a link to open up a simple div form for them to input their answer to that specific question. The pop-up form is just simple HTML/CSS with some jQuery UI to hide, show, and make it draggable. Here's the twist. I've got multiple questions that each need to be attached to a unique div. No problem, I thought. I'll just set each a href to link back to a unique ID that I've assigned within the DIV. Problem is, I can't seem to target the proper DIV with its corresponding a href. Instead the same set of questions appear no matter which link is clicked. This seems super simple and I'm probably overcomplicating it. What can I do here?
HTML:
<div id="draggable" class="messagepop pop">
<form method="post" id="new_message" action="/answers">
<p><label for="body">What type of person is Carsten?</label><textarea rows="15" name="body" id="body" cols="55"></textarea></p>
<p><label for="body">How do you know?</label><textarea rows="15" name="body" id="body" cols="55"></textarea></p>
<p><center><input type="submit" value="Submit" name="commit" id="message_submit"/> or <a id="hide" href="#">Cancel</a></center></p>
</form>
</div>
<div id="draggable" class="messagepop pop">
<form method="post" id="new_message" action="/answers">
<p><label for="body">What can you learn about an active volcano from the photograph?</label><textarea rows="15" name="body" id="body" cols="55"></textarea></p>
<p><center><input type="submit" value="Submit" name="commit" id="message_submit"/> or <a id="hide" href="#">Cancel</a></center></p>
</form>
</div>
Draw Conclusions What kind of person is Carsten? How do you know?
Use Text Features What can you learn about an active volcano from the photograph?
Where the first a href needs to open the first div and the second a href opens the second div, etc., etc.
CSS:
.messagepop {
overflow-y: auto;
overflow-x: hidden;
cursor:default;
display:none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align:left;
width:394px;
height: 335px;
z-index:50;
padding: 25px 25px 20px;
background-color: #fff;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-border-radius: 4px 4px 4px 4px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 4px 4px 4px 4px;
border-color: #E5E5E5 #DBDBDB #D2D2D2;
border-style: solid;
border-width: 1px;}
JS:
$(document).ready(function() {
$('.show').click(function() {
if ( !$(this).next('div').is(':visible') ) {
$(".messagepop").slideFadeToggle();
$(this).next('div').slideFadeToggle();
}
});
$('.hide').click(function() {
$(this).parent().slideFadeToggle();});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, "fast", easing, callback);};
$(function() {
$("#draggable").draggable();});
Thank you for your advice and for ironing out my poorly written method. It seems you've got it working.
I've since discovered a jQuery Mobile solution that is much easier than what I was trying to pull together.
For future viewers, it would simply look like this.
Draw Conclusions
Use Text Features
<div data-role="popup" id="popup1" class="ui-content" data-position-to="window">
Close
<p>What kind of person is Carsten?</p>
<input type="text"/>
<p>How do you know?</p>
<textarea></textarea>
</div>
<div data-role="popup" id="popup2" class="ui-content" data-position-to="window">
Close
<p>What can you learn about an active <mark><b>volcano</b></mark> from the photograph?</p>
<textarea></textarea>
</div>
The logic here makes a lot more sense to me and there's the added benefit of ensuring it will work properly on mobile devices. Then if you want to make it draggable, just drop in:
<script>
$(function() {
$(".ui-content").draggable();
});
</script>
And then if you want it to be draggable on mobile (remember, jQuery UI isn't natively supported on mobile), you'll have to call up a hack of sorts. I like Touch Punch.
You may run into issues with form inputs when using Draggable combined with Touch Punch, but that's a story for another thread.
Here is a demo: http://jsfiddle.net/ebNsz/
I've set id:s for the question-div:s and target them with the 'href' attribute in the 'a' elements. Not sure what you wanted to do with the 'slideFadeToggle' function, so i used 'fadeToggle' instead.
HTML:
<div id="q1" class="messagepop">
<form method="" id="form1" action="/answers">
<label for="answer1">What type of person is Carsten?</label><textarea name="answer1" class="answer"></textarea>
<label for="answer2">How do you know?</label><textarea name="answer2" class="answer"></textarea>
<div>
<input type="submit" value="Submit" name="submit" /> or <a class="close" href="">Cancel</a>
</div>
</form>
</div>
<div id="q2" class="messagepop">
<form method="" id="form2" action="/answers">
<label for="answer1">What can you learn about an active volcano from the photograph?</label><textarea name="answer1" class="answer"></textarea>
<div>
<input type="submit" value="Submit" name="submit" /> or <a class="close" href="">Cancel</a>
</div>
</form>
</div>
<p>Draw Conclusions What kind of person is Carsten? How do you know?</p>
<p>Use Text Features What can you learn about an active volcano from the photograph?</p>
jQuery: (jsFiddle doesn't support .draggable(), so i commented out the first line and added the second.)
$(function() {
/* $("div.messagepop").draggable().hide();*/
$("div.messagepop").hide();
$("a.toggle").click(function(e)
{
e.preventDefault();
var targetpop = $(this).attr('href');
$(targetpop).siblings("div.messagepop").fadeOut();
$(targetpop).fadeToggle();
});
$("a.close").click(function(e)
{
e.preventDefault();
$(this).closest("div.messagepop").fadeToggle();
});
});
CSS:
.messagepop {
position: absolute;
top: 20%;
left: 50%;
z-index: 50;
margin-left: -197px;
text-align: center;
width: 394px;
height: 335px;
padding: 25px 25px 20px;
background-color: #fff;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border-color: #E5E5E5 #DBDBDB #D2D2D2;
border-style: solid;
border-width: 1px;
}
label {
display: block;
}
textarea {
width: 75%;
height: 5em;
margin: 0 0 1em 0;
}