I have an annoying problem, I want the bootstrap button to be fixed in size. At the moment when I scroll over the bootstrap button it resizes the entire button. I use javascript to change the text (mouseover and mouseout). How can I disable this so the button remains the same size and only the text changes?
Example button:
<button type='button' id='Warning' class='btn btn-warning btn-block text-left' data-toggle='modal' data-target='#myModal'>Pending</button>
Javascript:
$('body').on('mouseover', '#Success', function (e) {
$(this).removeClass("btn-success");
$(this).addClass("btn-danger");
$(this).text('Deactivate?');
});
$('body').on('mouseover', '#Warning', function (e) {
$(this).removeClass("btn-warning");
$(this).addClass("btn-success");
$(this).text('Activate?');
});
If the visible width of the 2 text labels is different, the button has to change size to accommodate the text.
You should set a fixed size of the button via CSS that is big enough to fit either text label:
#Warning {
width: 200px;
}
Without seeing more of your markup, it's difficult to know how this affects other layout elements.
You could try giving the button an auto margin in the horizontal:
#Warning {
width: 200px;
margin: 0 auto;
}
Or it might be that you need to explicitly center the buttons in it's container:
.class-name-of-the-buttons-parent-container {
text-align: center;
}
I suggest giving the button a fixed width that's enough for both states and removing the horizontal paddings. Optionally you can give it text-align:center
Freeze the button's width and height during the mouseover event. Also, set its padding to 0 to keep the text centered:
$('body')
.on('mouseover', '#Warning', function (e) {
$(this).css({
width: $(this).outerWidth(),
height: $(this).outerHeight(),
padding: 0
});
$(this).text('Activate?');
})
.on('mouseout', '#Warning', function (e) {
$(this).text('Pending');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='Warning'>Pending</button>
You should add an additional CSS class that overrides the Bootstrap defaults to the button. Something like ...
.fixed_size_button {
width: 200px;
}
In some cases you might need to add !important to actually override prior CSS settings, especially since Bootstrap itself uses a lot of !important statements. E.g.
.fixed_size_button {
width: 200px !important;
}
But you should avoid this as much as possible since it is difficult to maintain.
Related
I have a cover-image like this
When the user hover on my image, I want to :
show an camera icon on the top left, and
hide it back when the mouse move away.
I have tried
CSS
<style type="text/css">
#cover-img:hover{
opacity: .9;
}
#nav-upload-icon{
top: 10px;
left: 10px;
color: red;
z-index: 1000;
}
</style>
HTML
<img id="cover-img" src="/material/img/profile-menu.png" height="130px">
<i id="nav-upload-icon" class="md md-camera hidden"></i>
JS
$("#cover-img").hover(function() {
$("#nav-upload-icon").removeClass( "hidden" );
});
I couldn't get it to behave what I expected to see.
What is the best way to implement something like that ?
JSFiddle
There is no reason to use JavaScript if that is the actual html code, you can use the next sibling selector with hover.
#cover-img:hover + #nav-upload-icon,
#nav-upload-icon:hover {
visibility: visible;
}
#nav-upload-icon {
visibility : hidden;
}
bind mouseout event to remove add the hidden class again
$("#cover-img").hover(function() {
$("#nav-upload-icon").removeClass("hidden");
});
$("#cover-img").mouseout(function() {
$("#nav-upload-icon").addClass("hidden");
});
Give position absolute to place it over the image
Fiddle
Go for #epascarello solution. It is the best.
The hover accepts two functions:
$("#cover-img").hover(function() {
$("#nav-upload-icon").removeClass("hidden");
}, function() {
$("#nav-upload-icon").addClass("hidden");
});
Fiddle
But obviously the CSS solution is better.
Your almost there. Add a second anonymous function to add the class for mouseleave
$("#cover-img").hover(function() {
$("#nav-upload-icon").removeClass("hidden");
}, function() {
$("#nav-upload-icon").addClass("hidden");
});
According to hover(), you can pass in handlerIn/handlerOut which are synonymous with mouseenter/mouseleave
DEMO
If you don't want to use javascript, wrap a div around the image.
<div class="image-wrap">
<img > <-- your super cool large image
<img class="upload"> <- your super cool icon and stuff absolutely positioned with 0 transparency
</div>
Then in the css you go something like this
div.image-wrap:hover img.upload {
opacity:0.9
}
Don't bother with javascript, it's 2015
This can be achieved without any JS. Using the adjacent selector you can show the icon when #cover-img is hovered on.
#cover-img:hover + img {
opacity: 1;
}
Updated Fiddle
For part of the site I'm working on, I have a set of sidebars that can pull out. To have them hide when the users are done with them, I've set up a div with a click event (see below) so that whenever the user clicks somewhere outside of the sidebar, the sidebar closes. The problem that I'm running into, however, is that the click event handler is grabbing the event, running its method, and then the click event seems to stop. I've tried using return true and a few other things I've found around here and the internet, but the click event just seems to die.
$('.clickaway').click(function() {
$('body').removeClass(drawerClasses.join(' '));
return true;
});
EDIT: Here is a fiddle with an example: https://jsfiddle.net/2g7zehtn/1/
The goal is to have the drawer out and still be able to click the button to change the color of the text.
The issue is your .clickaway layer is sitting above everything that's interactive, such as your button. So clicking the button, you're actually clicking the layer.
One thing you could do is apply a higher stacking order for elements you want to interact with, above the .clickaway layer. For example, if we apply position: relative, like this:
.show-drawerHotkey .ColorButton {
position: relative;
}
The element will now be in a higher stacking order (since it comes after the clickaway, and we've applied no z-index to clickaway)
Here's a fiddle that demonstrates: https://jsfiddle.net/2g7zehtn/5/
Using this somewhat famous SO answer as a guide, you can bind to the $(document).mouseup(); event and determine whether certain "toggling" conditions apply:
[EDIT] - Example updated to illustrate clicking a link outside of the containing div.
// Resource: https://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it
var m = $('#menu');
var c = $('#menuContainer');
var i = $('#menuIcon');
i.click(function() {
m.toggle("slow");
});
$(document).mouseup(function(e) {
console.log(e.target); // <-- see what the target is...
if (!c.is(e.target) && c.has(e.target).length === 0) {
m.hide("slow");
}
});
#menuIcon {
height: 15px;
width: 15px;
background-color: steelblue;
cursor: pointer;
}
#menuContainer {
height: 600px;
width: 250px;
}
#menu {
display: none;
height: 600px;
width: 250px;
border: dashed 2px teal;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I'm a link outside of the container
<div id="menuContainer">
<div id="menuIcon"></div>
<div id="menu"></div>
</div>
I am currently using Bootstrap 3 popover feature for displaying a legend on click of a button
The legend is an image file and I want to display that image inside the popover window
But the image width is extending beyond the popover window width
Even on giving the width property does not change the popover window width.
Your help would be much appreciated.
HTML
<button id="btnLegend" class="btn btn-warning" data-toggle="popover">Legend</button>
Javascript
$(function () {
$('#btnLegend').popover(
{'placement':'bottom',
'content':"<img src=\"http://www.hopkinsmn.com/about/img/map-legend.gif\" alt=\"legend\">",
'title':'Popup Test',
'html':true,
'container':'body'
}
);
});
Here is my fiddle
You should add width to img tag
Here is the example
$(function () {
$('#example').popover(
{'placement':'bottom',
'content':"<img src=\"http://www.hopkinsmn.com/about/img/map-legend.gif\" alt=\"legend\" style='width:100%' >",
'title':'Popup Test',
'html':true
}
);
});
If you do not want to change the width of the image to be fixed then change the max-width of popover
.popover{
max-width:1000px !important;
}
Here is the link to the updated fiddle
I use this solution
var $btn = $("#my_btn");
$btn.popover({
content: '<img src="' + $btn.attr('href') + '">',
html: true,
trigger: 'hover',
placement: 'left',
container: 'body'
})
.on("show.bs.popover", function(e){
$(e.target).data("bs.popover").tip().css({"max-width": $btn.data('width') + 50 + "px"});
});
If you dont want to change the width of the image then you can just set the max-width or min-width property of popover class.
EX:
.popover{
max-width:80%;
}
or
.popover{
min-width:80%;
}
But if changing image width is not a problem, then just make the width of image as 100%.
Ex:
img{
width: 100%;
}
The popover's width is constrained to 100% of the width of its container. Set it to body and it will be wider:
$(function () {
$('#example').popover(
{'placement':'bottom',
'content':"<img src=\"http://www.hopkinsmn.com/about/img/map-legend.gif\" alt=\"legend\">",
'title':'Popup Test',
'html':true,
/* Set the container for the popover (e.g. body) */
container: 'body'
}
);
});
Check out Anil's answer to this question for more info.
Just limit the image and the box via CSS:
.popover {
max-width:350px;
}
.popover img {
max-width: 250px;
}
I've set up a div that stores text with a nice gradient fade at the bottom with a show hide button. I found this tutorial to help me do that, and for the most part i've managed to get it working for my needs.
However, I'm having an issue where when i have a rather long bit of text. When showing the text, it cuts off the bottom of the text. By doing a console.log($("#id).height()); it appears that it's picking up the div's max-height from the CSS rather than the height of the actual content (but i could be wrong).
I've set up a JSFiddle with my example: http://jsfiddle.net/3gnK7/4/ you'll notice that by clicking the Show button on the first part, the last para of the lorem ipsum text is cut off.
This does add a requirement of jqueryUI to get the animation however it works completely
first change your css to
.category_text {
float: left;
position: relative;
overflow: hidden;
margin-bottom: 1em;
max-height: 120px;
}
.cat-height {
max-height: 9999px;
padding-bottom:30px;
}
then change your javascript to use toggleClass like so
$(document).ready(function () {
$(".showbutton").live("click", function (e) {
e.preventDefault();
var buttonid = $(this).attr("id");
buttonid = buttonid.substring(11, buttonid.length);
$("#text_"+buttonid).toggleClass('cat-height','slow');
if($("#showbutton_" + buttonid).text() == 'Show') {
$("#showbutton_" + buttonid).text("Hide");
}
else {
$("#showbutton_" + buttonid).text("Show");
}
return false;
});
});
DEMO
totalHeight += $(this).outerHeight(true);
True argument will include margins, too.
Can anyone please let me how to Enlarge textarea while using OnClick function or how to increase the rows on onClick?
regards
balkar
If you can set pixel or column sizes (instead of using the rows and cols attributes), you can use the :focus CSS pseudo-class:
HTML:
<textarea id="myarea"></textarea>
CSS:
textarea#myarea { width: 100px; height: 20px; }
textarea#myarea:focus { width: 500px; height: 200px; }
depending on the layout, it's sometimes attractive to give the focused textarea position: absolute so it floats above the other elements in its enlarged state.
If you wanna use onClick, add an onClick Handler via JavaScript:
<html>
<body onLoad="load();">
<textarea id="t1">foo</textarea>
<script>
function load(){
document.getElementById("t1").addEventListener("click",function(){
this.setAttribute("rows","50");
},false);
}
</script>
</body>
</html>