Bootstrap Input File cursor - javascript

I am using this library to create a nice input file button with bootstrap theme.
I added a cursor pointer on the button, but
I can not see the cursor on the whole button.
<button style="cursor:pointer" />
DEMO

You can use code:
$fileButton.on('click', function(){
$(this).next('input').trigger('click');
});
After:
$fileButton = $('<button style="cursor:pointer" class="' + config.uploadButtonClass + '">' + config.uploadText + '</button>').insertBefore($self);
And add styles to:
.inputfile .btn{
position:relative;
z-index:2;
}

I have done this with different way using Javascript
You can hide the input by placing it into a div which is height:0px and overwflow:hidden. THen you add a button or an other html element which you can style as you want. In the onclick event you get the input field using javascript or jQuery and click it:
HTML:
<div style="height:0px;overflow:hidden">
<input type="file" id="fileInput" name="fileInput" />
</div>
<button style="cursor:pointer" onclick="chooseFile();" class="btn btn-defualt"><span style="cursor:pointer" class="glyphicon glyphicon-upload"></span> Search for a file to add</button>
Now the input is hidden, but you can style the button as you want, it will always open the file input on click.
javascript:
function chooseFile() {
document.getElementById("fileInput").click();
}
Here is Live Demo

If I understood it properly, your problem was in inability to style shadow-dom input tag, generated by browser
This css helped me in the same issue:
input[type="button"]::-webkit-file-upload-button,
input[type="file"]::-webkit-file-upload-button,
button::-webkit-file-upload-button {
cursor: pointer;
}

Related

How to slide to particular HTML element using javascript?

How to set focus and slide down to the html when button is clicked . How to slide to particular HTML element using javascript?
p:focus, p:active {
color: green;
}
p {
min-height: 250px;
}
<body>
<input type="button" onclick="getfocus()" value="Get focus">
<input type="button" onclick="losefocus()" value="Lose focus">
<p>Click the buttons to give focus and/or remove focus from the link above.</p>
<p>Click the buttons to give focus and/or remove focus from the link above.</p>
<p>Click the buttons to give focus and/or remove focus from the link above.</p>
<p id="myAnchor">Click the buttons to give focus and/or remove focus from the link above.</p>
<script>
function getfocus() {
document.getElementById("myAnchor").focus();
}
function losefocus() {
document.getElementById("myAnchor").blur();
}
</script>
</body>
Adding tabindex="0" to p#myAnchor solves the issue
tabindex="0" means that the element should be focusable in sequential
keyboard navigation, after any positive tabindex values and its order
is defined by the document's source order.
function getfocus() {
document.getElementById("myAnchor").focus();
}
function losefocus() {
document.getElementById("myAnchor").blur();
}
p:focus,
p:active {
color: green;
}
p {
min-height: 200px;
}
<input type="button" onclick="getfocus()" value="Get focus">
<input type="button" onclick="losefocus()" value="Lose focus">
<p>Click the buttons to give focus and/or remove focus from the link above.</p>
<p>Click the buttons to give focus and/or remove focus from the link above.</p>
<p>Click the buttons to give focus and/or remove focus from the link above.</p>
<p tabindex="0" id="myAnchor">Click the buttons to give focus and/or remove focus from the link above.</p>
If by get focus you mean get there:
function getfocus() {
document.getElementById("myAnchor").scrollIntoView();
}
and if by loose focus if you mean going back to the top:
function looseFocus(){
window.scrollTo(0, 0);
}
but <p> is not focusable.
If you really want focus you need an anchor <p><a id="myAnchor" href="#">Click the buttons to give focus and/or remove focus from the link above.</a></p>

Image tag inside a button makes the js stop working on chrome

I'm trying to make a button with an image that will toggle a div's class, however, when I use the tag image inside the button, the js won't work. This only happens on chrome, the same code works normally on firefox. Is there any solution to this?
codepen: https://codepen.io/luansergiomattos/pen/zydWyM
html:
<div class="bar" style="background-color: #474973; ">
<br />
<button id="searchButton">
<img
src="https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-512.png"
alt=""
style="width: 20px;"
/>
</button>
</div>
<div class="bar off but" id="search" style="background-color: #9CEAEF">
<form action="#">
<input
type="text"
placeholder="Search.."
name="search"
class="header__search"
/>
</form>
</div>
js:
var focused = document.querySelector('.header__search'), searchWrapper = document.querySelector('#search'),
searchInput = document.querySelector('#searchButton');
document.addEventListener('click', function (e) {
if (~e.target.className.indexOf('header__search')) {
searchWrapper.classList.remove('off');
focused.focus();
} else if (~e.target.id.indexOf('searchButton')) {
searchWrapper.classList.toggle('off');
focused.focus();
} else {
searchWrapper.classList.add('off');
}
});
edit: this is what the code is supossed to do: when i press the button, the js will toggle a class, the class named "off" has width: 0px; display: none etc. So the element will be hidden when i press the button, and it will show up again when i press the button. Sorry for any english mistak
The reason this happens is the image becomes the target in your click function – try disable pointer events and it will work again :)
button img { pointer-events: none; }

Anchor element onClick makes page jump to top of page

I have a few buttons on my page and onclick they show or hide a few <div> elements.
The <div> elements are positioned towards the bottom of the page so scrolling to those <div> elements is necessary.
Whenever I click on a button, the page jumps to the top. So how do I create an anchor so that when the user clicks the button it will stay on that section of the page?
Here is one of the buttons:
<p class="text-center"><a id="Button-1" class="btn btn-default" href="#" role="button">View Details</a></p>
Here is the <div> that appears when the button above is clicked:
<div class="row">
<div id="Section-1" class="col-md-10">
<p>The section to appear.</p>
</div>
</div>
Here is the JavaScript:
$("#Button-1").click(function () {
$("#Section-2").hide();
$("#Section-3").hide();
$("#Section-1").toggle("show");
$("#Button-1").text(function(i, text) {
return text === "View Details" ? "Hide Details" : "View Details";
});
return false;
});
Here is my research:
Article 1
Any help would be appreciated.
UPDATE
<p class="text-center"><a id="Button-1" class="btn btn-default" href="javascript:void();" role="button">View Details</a></p>
When I click the button.. I scroll down to see the div that appeared.. then click on another button (that look the exact same as above) and the page returns to the top.
Firstly mention the element correctly in the title. Its a a not button.
Next: The # in your a tag will by default take you to the top of the page when you click on it.
Use a javascript:void() in the href attribute to overcome this.
Like <a href='javascript:void();'>something</a>
Example snippet
<div>
Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>
<a href='javascript:void();'>this</a>
</div>
This is because an href starting in "#" jumps to the element of that id. For example, href="#mydiv" jump to the element with an id of "mydiv" (nothing happens if that element doesn't exist, so this could be a solution). In the case where no id is provided (ie. Your case; href="#"), it jumps to the top of the page. My go-to solution is adding a preventDefault to the click handler, which "negates" existing behaviors. It can be done like so:
$('.button').click(function() {
$('#lastclicked').text(this.textContent);
});
$('.button-x').click(function(e) { // Passes the event to the function to allow the prevent default function.
e.preventDefault();
$('#lastclicked').text(this.textContent);
});
// Click each of the buttons and notice how the first two jumps to either the div of the top, but the third button ("button-x") doesn't move anything.
body {
height: 5000px;
padding: 50px;
}
.buttons {
position: fixed;
bottom: 0;
}
.button, .button-x {
display: inline-block;
padding: 20px;
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
Link with href="#"
Link with href="#mydiv"
Link with href="#", but a preventDefault.
</div>
<div id="mydiv">
Last clicked: <span id="lastclicked"></span>
</div>
The important part is the e.preventDefault(), which is the function that blocks the initial behavior of the anchor tag. All you have to do is put that somewhere in your click handler. Make sure to pass "e" as a parameter.
General fix
Don't use <a>-Tags for your buttons. Convert the <a>-Tags to <button>-Tags or something else (span, p, etc.)
Explanation
That is pretty simple. Your <a>-Tags (namely the buttons) link to '#' which is the so called fragment part of an URI.
Usually fragments are HTML tags which are identified by a name (pre-HTML5)
<a name="top">This is the top section</a>
Jump to top
or an id (HTML5)
<div id="my-section">Coming soon</div>
Jump to my-section
Because you didn't specify the fragment or didn't use correct one the browser will scroll to the top of the page.
Have you tried this solution from http://stackoverflow.com/questions/11815295/javascript-inline-onclick-goto-local-anchor
You can use this function on your anchor:
function goToAnchor(anchor) {
var loc = document.location.toString().split('#')[0];
document.location = loc + '#' + anchor;
return false;
}
Usage:
Anchor
Note that the anchor needs to be enclosed in quotes, without the hash prefix.
update href property of a tag to javascript:void();
<p class="text-center"><a id="Button-1" class="btn btn-default" href="javascript:void();" role="button">View Details</a></p>
Demo
javascript:void(); It'll not let link to navigate anywhere.
I suggest you a different approach more generic. Easiest to use and maintain.
Use only one class for each button to detect the click. And store in data property the element that you want to show.
$(".btn-section").click(function(){
var classToShow = $(this).data("class-show");
$(".section").hide();
$("." + classToShow).show();
});
.section{
display:none;
}
.content{
width:100%;
height:2000px;
background-color:#ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">Lot of content</div>
<button class="btn-section" data-class-show="section1">Section 1</button>
<button class="btn-section" data-class-show="section2">Section 1</button>
<button class="btn-section" data-class-show="section3">Section 1</button>
<div class="section section1">Section 1</div>
<div class="section section2">Section 2</div>
<div class="section section3">Section 3</div>
This resolve your problem too.

Creating a targeted onclick event with element

I implemented a javascript code which converts a div into a canvas. Below is the code:
JS
$(window).load(function(){
$(function() {
$(".btnSave").click(function() {
onrendered: function(canvas) {
thyCanvas = cnvs;
document.body.appendUncle(cnvs);
cnvs.toWall(function(Wall) {
saveAss(Wall, "xprf.png");
});
}
});
});
});
});
When the user clicks the button (.btnSave), they convert the div called #widget into a canvas element. There are multiple divs(all different) and I've placed the button beside each div.
<input type="button" class="btnSave" value="Conver this box"/>
<div id="widget" style="width:10px; height:10px; background:red">
</div>
<input type="button" class="btnSave" value="Conver this box"/>
<div id="widget2" style="width:10px; height:10px; background:blue">
</div>
<input type="button" class="btnSave" value="Conver this box"/>
<div id="widget3" style="width:10px; height:10px; background:green">
</div>
The problem is that I'd like for my users to be able to click any of the buttons beside each div and when they do so, the div beside the button will be converted into a canvas.
TL;DR I'm trying to get my button to work for the div that it's beside so users can convert any of the divs into a canvas.
jQuery has the .next() method that allows you to select the next sibling of an element. In your case, it will be the next element from the current clicked button:
$(".btnSave").click(function() {
html2canvas($(this).next(), {

Adding "Clear Field" buttons to Bootstrap 3 inputs using jQuery + CSS class

How can I add a "Clear field" button to multiple Bootstrap 3 input fields just using jQuery and a CSS class?
I've found solutions that can add a 'clear field' button to a field with a particular ID, but nothing so far that can do it by class. I've got a form with a lot of fields and I'd rather not have to repeat my code over again for each field.
I've tried this so far (Bootply), but I can't figure out how to get jQuery to clear just the one field and toggle the one icon, not all of them.
//JS
$(document).ready(function(){
$(".searchinput").keyup(function(){
$(".searchclear").toggle(Boolean($(this).val()));
});
$(".searchclear").toggle(Boolean($(".searchinput").val()));
$(".searchclear").click(function(){
$(".searchinput").val('').focus();
$(this).hide();
});
});
//HTML
<div class="btn-group">
<input id="searchinput" type="search" class="form-control searchinput" placeholder="type something..." value="">
<span id="searchclear" class="searchclear glyphicon glyphicon-remove-circle"> </span>
</div>
<div class="btn-group">
<input id="searchinput" type="search" class="form-control searchinput" placeholder="type something..." value="">
<span id="searchclear" class="searchclear glyphicon glyphicon-remove-circle"></span>
</div>
//CSS
.searchinput {
width: 200px;
}
.searchclear {
position:absolute;
right:5px;
top:0;
bottom:0;
height:14px;
margin:auto;
font-size:14px;
cursor:pointer;
color:#ccc;
}
1) You can use $(this) to get a reference to the current targeted element
2) Use .next() to toggle the visibility for only the icon which is the next immediate sibling of input that you're currenlty key in
3) Use .prev() to clear only the input which is the immediate previous sibling of clear icon that is clicked:
Final code should look like:
$(document).ready(function () {
$(".searchinput").keyup(function () {
$(this).next().toggle(Boolean($(this).val()));
});
$(".searchclear").toggle(Boolean($(".searchinput").val()));
$(".searchclear").click(function () {
$(this).prev().val('').focus();
$(this).hide();
});
});
Bootply Demo
Try changing your javascript code to this:
$(document).ready(function(){
$(".searchinput").keyup(function(){
$(this).parent().find('.searchclear').toggle(Boolean($(this).val()));
});
$(".searchclear").toggle(Boolean($(".searchinput").val()));
$(".searchclear").click(function(){
$(this).parent().find('.searchinput').val('').focus();
$(this).hide();
});
});
Essentially what it does is add scope to the clear buttons so that it is limited to the sibling. There are other jQuery functions that might be more specific, but this should work.
http://www.bootply.com/130368
Another option would be to use .siblings() to make sure you are targeting just the siblings with the searchclear class.
$(document).ready(function(){
$(".searchinput").keyup(function(){
$(this).siblings(".searchclear").toggle(Boolean($(this).val()));
});
$(".searchclear").toggle(Boolean($(".searchinput").val()));
$(".searchclear").click(function(){
$(".searchinput").val('').focus();
$(this).hide();
});
});
http://www.bootply.com/130369

Categories