My code:
<div class="search-sticky">
<form class="search-box" action="/search" method="GET">
<input type="text" name="q" id="search-query" class="search-input" placeholder="Search ....">
<a class="search-btn" href="#/">
<button type="submit" class="search-button"><img class="search-icon" alt="Search" src="/icons/search.svg" /></button>
</a>
</form>
</div>
My search feature works like this: a user clicks the search icon, input bar rolls out, user type keywords then press enter or click again the search icon to start search. Sometimes results page is opened after few seconds, so I need an indicator for user "to wait". I thought that indicator will be search.svg icon spinning after user type keywords and submit the search.
Can you help with the solution, please?
[HTML, css, JavaScript Part For Spin Search icon]
const submitBtn = document.querySelector('#submit-btn');
const submitText = document.querySelector('#submit-text');
const submitSpinner = document.querySelector('#submit-spinner');
submitBtn.addEventListener('click', () => {
submitText.classList.add('hidden');
submitSpinner.classList.remove('hidden');
// Perform search and display results
});
#submit-btn {
background-color: #4CAF50;
color: white;
border: none;
padding: 12px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
#submit-spinner {
margin-left: 10px;
}
.hidden {
display: none;
}
<form>
<input type="text" id="search-bar" placeholder="Enter your search terms...">
<button type="submit" id="submit-btn">
<span id="submit-text">Search</span>
<span id="submit-spinner" class="hidden">
<i class="fa fa-spinner fa-spin"></i>
</span>
</button>
</form>
This code adds a spinner element to the submit button that is hidden by default. When the user clicks the button, the spinner is displayed and the text is hidden. You can then use JavaScript to perform the search and display the results. Once the results are displayed, you can hide the spinner and display the text again.
I have two issues/questions...
Question #1:
I am using a label overlay plugin called purplecoat.js (http://ellekasai.github.io/purplecoat.js/) and I need to find a way to add an overlay backdrop to the entire body when the "toggle hints" button is clicked. Right now, when the toggle hints button is clicked, it displays the labeled overlays over the identified content, but I also want a complete background overlay added to the body to help bring focus to the labeled overlays.
My 2nd issue is, my actual website is a multi-page site and I need to use this purplecoat overlay plugin on each page so users can click to see the labeled hints. My problem is when the user clicks on the Toggle Hints button to view the labeled hints on one page, it will work fine, but when they open a new page of the site and click on the same toggle hints button, it shows the labeled hints from the previous page. If I refresh the page, then it shows the correct updated hints.
I need to find a way to clear the purplecoat.js content when a new page loads, so it does not show the wrong label overlays - or somehow discretely refresh the page when someone opens a new page so it clears the purplecoat.js.
I have a jsfiddle of my login page where the purplecoat.js label overlay is working when clicking on the Toggle Hints link. I just need to add the backdrop overlay, then clear the purplecoat.js when a new page/or modal is loaded. My site has several pages and modals, and the pages and modals are all opened with a button - so if there is a way to clear the purplecoat.js cache when any button is clicked, may work. I am open to suggestions.
JSFiddle link: https://jsfiddle.net/txptbf15/
I am new to learning jQuery/js, so please be kind! :-)
HTML (of my login page):
<div id="hints"><button data-purplecoat-toggle="foo" class="btn-loginHint">Toggle Hints!</button></div>
<div id="Login" class="loginTemplate panel panel-primary">
<div class="panel-heading clearfix">
<h2 class="pull-left">Log On</h2>
<div id="LangWrapper" class="pull-right">
<button id="LangButton" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" data-purplecoat="foo" data-purplecoat-label="Select Language" data-purplecoat-color="rgba(238, 122, 39, 0.9)">
<span id="chooseLanguage">Language</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li onclick="_.utils.ChangeLanguage('en')">(English)</li>
<li onclick="_.utils.ChangeLanguage('jp')">(日本語)</li>
</ul>
</div>
</div>
<div class="panel-body">
<p>Please enter your username and password</p>
<form class="">
<fieldset class="">
<legend>Account Info</legend>
<div class="form-group">
<label for="accountType">Account Type</label>
<select class="form-control" id="accountType" name="accountType" data-purplecoat="foo" data-purplecoat-label="Select Account from menu that you want to access." data-purplecoat-color="rgba(238, 122, 39, 0.9)">
<option value="customer">Option 1</option>
<option value="reseller">Option 2</option>
</select>
</div>
<div class="form-group">
<label for="email">EMail</label>
<input type="text" class="form-control" id="email" name="email" placeholder="Email" data-purplecoat="foo" data-purplecoat-label="Input email address you used when registering." data-purplecoat-color="rgba(238, 122, 39, 0.9)">
</div>
<div class="form-group">
<label for="email">Password</label>
<input type="password" class="form-control" id="pwd" name="pwd" placeholder="Password" data-purplecoat="foo" data-purplecoat-label="Input password you used when registering." data-purplecoat-color="rgba(238, 122, 39, 0.9)">
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" class="checkbox" name="RememberMe" value="1" /> Keem me logged in
</label>
</div>
</div>
<p class="actions">
<button type="button" id="btnSubmit" class="btn btn-primary" data-purplecoat="foo" data-purplecoat-label="Select button to Login" data-purplecoat-color="rgba(238, 122, 39, 0.9)"><i class="fa fa-sign-in"></i> Log In</button>
<i class="fa fa-puzzle-piece"></i> Forgot Password
<a id="loginRegister" href="#"
class="pull-right" data-purplecoat="foo" data-purplecoat-label="Select to Register" data-purplecoat-color="rgba(238, 122, 39, 0.9)"><i class="fa fa-key"></i> Register</a>
</p>
</fieldset>
</form>
</div>
</div>
CSS:
.purplecoat { display: none; position: absolute; padding: 5px; box-sizing: border-box; background-color: rgba(142, 68, 173, 0.9); color: #FFF; text-align: center; font-weight: bold; overflow: hidden; z-index: 9999; } .purplecoat-inner { display: table; width: 100%; height: 100%; } .purplecoat-inner-text { display: table-cell; vertical-align: middle;}
.purplecoat {
padding: 0 !important;
font-size: 12px !important;
line-height: 1.2em !important;
}
.btn-loginHint {
background-color: transparent;
color: #fff;
border: none;
float: left;
padding-top: 5px;
}
Regarding Problem 1: the issue seems to be with z-index on all the purplecoat divs; it's set to 9999. As a result what you need is an overlay div with a higher z-index. See my sample below. I've also added a div with the id of overlay. Here is my working fiddle.
#overlay {
display:none;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
width:100%
height:100%;
background-color:white;
z-index:10000;
}
Regarding Problem 2: I'm not sure how you're loading the pages, but this worked in my fiddle.
$('[data-purplecoat-for]').hide();
After looking at the source code it seems all those overlays have the same property data-purplecoat-for, simply calling hide on them will work. Again if this doesn't work for you I need a little more info. By the way, the github project says it's no longer being maintained.
Hi I want to use a floating save button in my div
.fw_circle{
background-color: #53beb6;
position: fixed;
bottom: 20px;
right: 20px;
width: 55px;
height: 55px;
border-radius: 50%;
text-align: center;
font-size: 20px;
padding: 13px;
color: white;
z-index: 100;
}
<div class="div1">
<!-- Floating save button -->
<div class="fw_circle">
<i class="fa fa-floppy-o" aria-hidden="true"></i>
</div>
<div class="form-group">
<label>Name:</label>
<input type="text" ng-model="Name" class="form-control" maxlength="200" required/>
</div>
<div class="form-group">
<label>Name2:</label>
<input type="text" ng-model="Name2" class="form-control" maxlength="200" required/>
</div>
<div class="form-group">
<label>Name3:</label>
<input type="text" ng-model="Name3" class="form-control" maxlength="200" required/>
</div>
<div class="form-group">
<label>Name4:</label>
<input type="text" ng-model="Name4" class="form-control" maxlength="200" required/>
</div>
<!-- And so many other input fields-->
</div>
<div class="div2">
<!--Don't want that float button to be shown in this div as it has only a save button -->
<button class="btn">Save</button>
</div>
I want that the floating button should be visible in above div (i.e div1) with input fields
So that the user can save the form anytime in between and no need to scroll to the bottom to save the form.
But when he scrolled to the bottom and then he can see the save button in another div (i.e div2), in that case, the floating button should not be visible.
And the actual Save button is not exactly at the bottom of page
But the floating button is showing even if the save button is visible. Please suggest some method to achieve this.
You just need hide it with JavaScript:
var button = (find button)
$(div).css('display', 'none')
You can make that a function and trigger it on your convenience.
If it is as I understand in your code, you can select the button with: $('.fw_circle')
If you want to trigger it depending on whether the user has reached the bottom or the page, you can do so with the following piece of code from another answer here in SO:
window.onscroll = function(ev) {
if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
alert("you're at the bottom of the page");
}
};
I have a menu bar. Now as per my need I have to open a login form as soon as menu bar menu is clicked. I have seen opening a jQuery dialog box with screen lock as soon as the URL is clicked and if the user has provided the correct Username and Password he will navigate to the required page else dialog box in screen Lock will say "Please Enter Correct Username and Password".
Here is my menu bar link code in HTML.
<div>
<ul>
<li>ExtensionWise</li>
<li>Call Type</li>
</ul>
</div>
What you are trying to get is called as modal behaviour where a dialog disables all other elements on the page from being interacted. There are many ui-plugins out there for this but you can also create your own custom div to act in a modal dialog type of behaviour using jQuery and CSS.
html
<div id="box" align="center"></div>
<form>User Name:
<input type="text" name="firstname" />
<br/>Password:
<input type="password" name="pwd" />
<input type="submit" />
<button type="button" id="cancel">Cancel</button>
</form>
<a id="login" href="#">Click to Login</a><br/>
<a id="alert" href="#">Click To Alert before and after opening form</a>
script
$(document).ready(function(){
$('#alert').click(function(){alert('alert')})
$('a#login').click(function(){
$("#box,form").fadeIn('slow');
})
$('#cancel').click(function(){
$('#box,form').hide();
})
})
css
div {
width: 100%;
height: 100%;
display:none;
position: absolute;
z-index:100;
background: lightgreen;
opacity: 0.6;
}
form{
position: absolute;
z-index: 101;
display:none;
width: 200px;
border: 2px solid red;
margin-top:50px;
margin-left: 200px;
background: cornflowerblue;
}
Note:- you must put the div and form always as the topmost element in the body
Click here for DEMO
This question already has answers here:
Styling an input type="file" button
(46 answers)
Closed 7 years ago.
I would like to style <input type="file" /> using CSS3.
Alternatively, I would like user to press on a div (that I will style) and this will open the Browse window.
Is that possible to do that using HTML, CSS3, and Javascript / jQuery only ?
I have this rough example that you might want to get some idea...
html
<div id="file">Chose file</div>
<input type="file" name="file" />
CSS
#file {
display:none;
}
jQuery
var wrapper = $('<div/>').css({height:0,width:0,'overflow':'hidden'});
var fileInput = $(':file').wrap(wrapper);
fileInput.change(function(){
$this = $(this);
$('#file').text($this.val());
})
$('#file').click(function(){
fileInput.click();
}).show();
demo
After checking Reigels idea, and this one, I wrote this simple solution to the common problem of styling a type="file" input field (tested it on Firefox, Safari and Chrome).
<div style="position:relative;">
<div id="file" style="position:absolute;">Click here to select a file</div>
<input type="file" name="file" style="opacity:0; z-index:1;" onchange="document.getElementById('file').innerHTML = this.value;">
</div>
Then you can of course style the "file" div as you want.
And if you want to use a type="text" input instead of a div, simply change innerHTML for value:
<div style="position:relative;">
<input type="text" id="file" style="position:absolute;" placeholder="Click here to select a file">
<input type="file" name="file" style="opacity:0; z-index:1;" onchange="document.getElementById('file').value = this.value;">
</div>
Here is my original answer using jQuery:
<div style="position:relative;">
<div id="file" style="position:absolute;">Click here to select a file</div>
<input type="file" name="file" style="opacity:0; z-index:1;" onchange="$('#file').text($(this).val());">
</div>
I made a custom style for this as well. Check it out
JS Fiddle Demo - Custom Input type="file"
HTML
<input type="file" id="test">
<div class="button-group">
Browse
Save
Clear
</div>
<input type="text" id="testfile"></input>
CSS
body {
padding:100px;
}
input[type="file"] {
position:absolute;
display:none;
}
#testfile {
height: 26px;
text-decoration: none;
background-color: #eee;
border:1px solid #ccc;
border-radius:3px;
float:left;
margin-right:5px;
overflow:hidden;
text-overflow:ellipsis;
color:#aaa;
text-indent:5px;
}
#actionbtnBrowse, #actionbtnSave {
margin:0 !important;
width:60px;
}
JQuery
$("#browse").click(function () {
$("#test").click();
})
$("#save").click(function () {
alert('Run a save function');
})
$("#clear").click(function () {
$('#testfile').val('');
})
$('#test').change(function () {
$('#testfile').val($(this).val());
})
Also add to external resources tab:
https://github.com/necolas/css3-github-buttons/blob/master/gh-buttons.css
Here is how to do it using HTML, CSS and Javascript (without any frameworks):
The idea is to have the <input type='file'> button hidden and use a dummy <div> that you style as a file upload button. On click of this <div>, we call the hidden <input type='file'>.
Demo:
// comments inline
document.getElementById("customButton").addEventListener("click", function(){
document.getElementById("fileUpload").click(); // trigger the click of actual file upload button
});
document.getElementById("fileUpload").addEventListener("change", function(){
var fullPath = document.getElementById('fileUpload').value;
var fileName = fullPath.split(/(\\|\/)/g).pop(); // fetch the file name
document.getElementById("fileName").innerHTML = fileName; // display the file name
}, false);
body{
font-family: Arial;
}
#fileUpload{
display: none; /* do not display the actual file upload button */
}
#customButton{ /* style the dummy upload button */
background: yellow;
border: 1px solid red;
border-radius: 5px;
padding: 5px;
display: inline-block;
cursor: pointer;
color: red;
}
<input type="file" id="fileUpload"> <!-- actual file upload button -->
<div id="customButton">Browse</div> <!-- dummy file upload button which can be used for styling ;) -->
<span id="fileName"></span> <!-- the file name of the selected file will be shown here -->
The fake div is not needed! No Js no extra html. Using only css is possible.
The best way is using the pseudo element :after or :before as an element overt the de input. Then style that pseudo element as you wish. I recomend you to do as a general style for all input files as follows:
input[type="file"]:before {
content: 'Browse';
background: #FFF;
width: 100%;
height: 35px;
display: block;
text-align: left;
position: relative;
margin: 0;
margin: 0 5px;
left: -6px;
border: 1px solid #E0E0E0;
top: -1px;
line-height: 35px;
color: #B6B6B6;
padding-left: 5px;
display: block;
}
--> DEMO
In addition of Reigel,
here is more simpler implementation. You can use this solution on multiple file input fields, too. Hope this helps some people ;-)
HTML (single input)
<input type="file" name="file" />
HTML (multiple input)
<!-- div is important to separate correctly or work with jQuery's .closest() -->
<div>
<input type="file" name="file[]" />
</div>
<div>
<input type="file" name="file[]" />
</div>
<div>
<input type="file" name="file[]" />
</div>
JavaScript
// make all input fields with type 'file' invisible
$(':file').css({
'visibility': 'hidden',
'display': 'none'
});
// add a textbox after *each* file input
$(':file').after('<input type="text" readonly="readonly" value="" class="fileChooserText" /> <input type="button" value="Choose file ..." class="fileChooserButton" />');
// add *click* event to *each* pseudo file button
// to link the click to the *closest* original file input
$('.fileChooserButton').click(function() {
$(this).parent().find(':file').click();
}).show();
// add *change* event to *each* file input
// to copy the name of the file in the read-only text input field
$(':file').change(function() {
$(this).parent().find('.fileChooserText').val($(this).val());
});
Here's an example that I'm using that utilizes jQuery, I've tested against Firefox 11, and Chrome 18, as well as IE9. So its pretty compatible with browsers in my book, though i only work with those three.
HTML
Here's a basic "Customizable" HTML structure.
<span>
File to Upload<br />
<label class="smallInput" style="float:left;">
<input type="file" name="file" class="smallInput" />
</label>
<input type="button" class="upload" value="Upload" style="float:left;margin-top:6px;margin-left:10px;" />
</span>
CSS
Here's a sample of my CSS
label.smallInput {
background:url(images/bg_s_input.gif) no-repeat;
width:168px;
}
JavaScript
This is the heavy lifter.
/* File upload magic form?? */
$("input.smallInput[type=file]").each(function(i){
var id = "__d_file_upload_"+i;
var d_wrap = $('<div/>').attr('id',id).css({'position':'relative','cursor':'text'});
$(this).wrap(d_wrap).bind('change blur focus keyup click',function(){
$("#"+id+" input[type=text]").val($(this).val());
}).css({'opacity':0,'zIndex':9999,'position':'absolute'}).removeClass('smallInput');
obj = $(this);
$("#"+id).append($("<input/>").addClass('smallInput').attr('type','text').css({'zIndex':9998,'position':'absolute'}).bind('click',function(e){obj.trigger('click');$(this).blur();}));
obj.closest('span').children('input.upload[type=button]').bind('click',function(e){
obj.trigger('click');
$(this).blur();
});
});
/* ************************ */
Explanation
The HTML is pretty straight forward, just a simple element, i include the button so it can be named independently from the rest, sure this could be included in the JavaScript, but simply put, I'm a bit on the lazy side. The code searches for all inputs with a class of smallInput that have the type of file this allows you to define default HTML and fallback form structure in case a browser decides to be a pain.
This method only uses JavaScript to ensure delivery, it does not alter any browser behaviors in regards to the file input.
You can modify the HTML and JavaScript to make it very robust, this code suffices my current project so i doubt I'll be making any changes to it.
Caveats
Different browsers treat the value of the file input differently, which in chrome results in c:\fakeroot\ on windows machines.
Uses anonymous functions, (for lack of a better word) which means if you have too many file inputs you can cause the browser to behave slowly on processing.
Ran into the same issue today, but it seems there's an easy way to have your own styles - hide the input, and style the associated label:
<div class="upload">
<label for="my-input"> Upload stuff </label>
<input type="file" id="my-input" name="files[]" />
</div>
CSS:
.upload input{
display: none;
}
.upload label{
background: DarkSlateBlue;
color: white;
padding: 5px 10px;
}
Works in latest Chrome, Firefox and IE 10. Didn't test others
While Reigel's answer conveys the idea, it doesn't really have any style attached to it. I came across this problem recently and despite the plethora of answers on Stack Overflow, none really seemed to fit the bill. In the end, I ended up customizing this so as to have a simple and an elegant solution.
I have also tested this on Firefox, IE (11, 10 & 9), Chrome and Opera, iPad and a few android devices.
Here's the JSFiddle link -> http://jsfiddle.net/umhva747/
$('input[type=file]').change(function(e) {
$in = $(this);
$in.next().html($in.val());
});
$('.uploadButton').click(function() {
var fileName = $("#fileUpload").val();
if (fileName) {
alert(fileName + " can be uploaded.");
}
else {
alert("Please select a file to upload");
}
});
body {
background-color:Black;
}
div.upload {
background-color:#fff;
border: 1px solid #ddd;
border-radius:5px;
display:inline-block;
height: 30px;
padding:3px 40px 3px 3px;
position:relative;
width: auto;
}
div.upload:hover {
opacity:0.95;
}
div.upload input[type="file"] {
display: input-block;
width: 100%;
height: 30px;
opacity: 0;
cursor:pointer;
position:absolute;
left:0;
}
.uploadButton {
background-color: #425F9C;
border: none;
border-radius: 3px;
color: #FFF;
cursor:pointer;
display: inline-block;
height: 30px;
margin-right:15px;
width: auto;
padding:0 20px;
box-sizing: content-box;
}
.fileName {
font-family: Arial;
font-size:14px;
}
.upload + .uploadButton {
height:38px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data">
<div class="upload">
<input type="button" class="uploadButton" value="Browse" />
<input type="file" name="upload" accept="image/*" id="fileUpload" />
<span class="fileName">Select file..</span>
</div>
<input type="button" class="uploadButton" value="Upload File" />
</form>
Hope this helps!!!
Here is a solution with a text field where the user types in the (relative) pathname of the file copy on the server (if authorized) and a submit button to browse the local system for a file and send the form:
<form enctype="multipart/form-data" action="" method="post">
<input type="hidden" name="MAX_FILE_SIZE" value="1000000" />
<p><input type="file" name="upload_file" id="upload_file" size="40"/></p>
<p><input type="text" id="upload_filename" name="upload_filename" size="30" maxlength="100" value="<?php echo htmlspecialchars($filename, ENT_COMPAT, 'UTF-8'); ?>"/>
<input type="submit" class="submit submit_upload" id="upload_upload" name="upload_upload" value="Upload"/></p>
</form>
The scripting part hides the file input, clicks it if the user clicks on the submit button, submits the form if the user has picked up a file. If the user tries to upload a file without entering a filename, the focus is first moved to the text field for the filename.
<script type="text/javascript">
var file=$('#upload_file');
var filename=$('#upload_filename');
var upload=$('#upload_upload');
file.hide().change(function() {if (file.val()) {upload.unbind('click').click();}});
upload.click(function(event) {event.preventDefault();if (!filename.val()) {filename.focus();} else {file.click();}});
</script>
Simply style the submit button for a perfect result:
.submit {padding:0;margin:0;border:none;vertical-align:middle;text-indent:-1000em;cursor:pointer;}
.submit_upload {width:100px;height:30px;background:transparent url(../images/theme/upload.png) no-repeat;}
This is my method if i got your point
HTML
<form action="upload.php">
<input type="file" id="FileInput" style="cursor: pointer; display: none"/>
<input type="submit" id="Up" style="display: none;" />
</form>
jQuery
<script type="text/javascript">
$( "#FileInput" ).change(function() {
$( "#Up" ).click();
});
</script>
When you retreive the value of an input field, browser will return a fake path (literally C:\fakepath[filename] in Chrome). So I would add the following to the Javascript solutions:
val=$('#file').val(); //File field value
val=val.replace('/','\\'); //Haven't tested it on Unix, but convert / to \ just in case
val=val.substring(val.lastIndexOf('\\')+1);
$('#textbox').val(val);
Ofc, it could be done in a single line.