Develop Reference

onChange Button label doesn't hold its style

I have an interesting problem. I have a button that is used for selecting (like a select item). That code is here:
<button class="btn btn-primary dropdown-toggle" style="width: 166%;"
type="button" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<span id="dropdown_button" style="width: 166%;">
<img src="wp-content/themes/directory2/images/closest.png" />
10 Closest Amenities</span>
<span class="caret" style="margin-top: 9px;float: right;"></span>
</button>
Then it uses some jquery to change the text in the button/select like this:
$(document).on('click', '.dropdown_anchor', function(event) {
var index = $(this).data('index');
var title = $(this).data('title');
populate_list(index);
dropdownButtonText(title);
});
Then the dropdownButtonText function is implemented as below:
function dropdownButtonText(text) {
$("#dropdown_button").text(text);
}
The problem is, that the button spans the width it needs to on page load (aka style="width: 166%;") but when the selection happens and its changed, the button then doesn't hold its set width. Meaning for example it goes from 166% to say 87% width.
How can I make it so that the button holds its width when changed?
Thank you for your input and time, it's appreciated.
An example can be seen here:
https://www.trustedlivingcare.com/item/cedarhurst-of-sparta-il/
The Neighborhood & Nearby Amenities area
Starting Position
https://www.screencast.com/t/TiuWZdhYcWc
After Change
https://www.screencast.com/t/goYgVtvrErW5

It is because the width of the button changes when the text has less characters than previous one. you can give the button a specific width in css so it doesn't change when the text change.
#dropdown_button {
width: 100px; // this is an example
}
You can also do min-width to make sure that is the least width the button goes.
#dropdown_button {
min-width: 100px; // this is an example
}

You can try grabbing the elements width before the text change:
$(document).on('click', '.dropdown_anchor', function(event) {
var index = $(this).data('index');
var title = $(this).data('title');
var width = $(this).outerWidth();
populate_list(index);
dropdownButtonText(title, width);
});
and then apply that width in the new function.
function dropdownButtonText(text, width) {
$("#dropdown_button").css("width", width).text(text);
}
The button will need to be display inline-block, though.

try this in your css file
.btn-primary {
min-width: 500px;
}

Below what I have tried.
<div class="dropdown">
<button id="btnTest" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" style="width: 80%;">Dropdown Example
<span class="caret"></span></button>
<ul id="demolist" class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</div>
<script type="text/javascript">
$('#btnTest').click(function() {
console.log("Test");
});
$('#demolist li').on('click', function(){
var selectedText = $(this).text();
console.log(selectedText);
$("#btnTest").html(selectedText+' <span class="caret"></span></button>');
});
</script>
Also, consult the demonstration at using Bootstrap 3 Dropdown toggle button

Hide / show div using one button in jQuery

I am trying to hide one element and show the other when when button is clicked and switch around when it is clicked again.
I came up with something like this but this isn't going to work...
jQuery("#wcvat-toggle").click(function() {
jQuery("#excltaxout").show();
jQuery("#incltaxout").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="wcvat-toggle">
<span id="incltaxout">Including Tax</span>
<span id="excltaxout">Excluding Tax</span>
</a>
However this will always show the #excltaxout. Any suggestions?

To make this work - and assuming that one of those elements starts hidden - you can simply call toggle() on them both at the same time. This will invert their display states.
jQuery(function($) {
$("#wcvat-toggle").click(function() {
$("#excltaxout, #incltaxout").toggle();
});
});
#excltaxout { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="wcvat-toggle">
<span id="incltaxout">Including Tax</span>
<span id="excltaxout">Excluding Tax</span>
</a>

You can use jQuery's .toggle():
Display or hide the matched elements.
$("#wcvat-toggle").click(() => {
$("#incltaxout").toggle();
$("#excltaxout").toggle();
});
#incltaxout {display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="wcvat-toggle">
<span id="incltaxout">Including Tax</span>
<span id="excltaxout">Excluding Tax</span>
</a>
Note however that this only works if one element is hidden by default, if not you will hide/show both at once.

How do I remove button formating in a form so the buttons are used as toggle buttons?

I built a checkout page and there's a form to get user data.
The form goes like this:
<form method="post" action="purchase" name="checkout"></form
When user clicks on "confirm order", they are being directed to the confirmation.jsp as supposed.
Inside of that form I added buttons to be used as toggling effect to hide and show a given section of the form.
The problem:
When I click on > + < the given section shows and when I click on > - < the given section hides but then the confirmation.jsp page loads up as if the buttons acted as link to that page, just like the "confirmation order button". I tried to add normal buttons, same event happens. Every button put on that form seems to automatically be formatted to act as a "confirm order button", no matter what I try.
The buttons go like this:
<button id="show" class="toggle_button" value=$("#show").click action=$("#show").click >+</button>
<button id="hide" class="toggle_button" value=$("#hide").click action=$("#hide").click>-</button>
And the scripts in the header:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
Thanks for your help!

try this:
<input type="button" id="show" class="toggle_button" onclick="doAction('show')" value="+" />
<input type="button" id="hide" class="toggle_button" onclick="doAction('hide')" value="-" />
<script>
$("#show").click(function( event ) {
event.preventDefault();
});
$("#hide").click(function( event ) {
event.preventDefault();
});
function doAction(action) {
if(action=="hide") {
$("p").hide();
} else {
$("p").show();
}
}
</script>

The default type for a button in a form is type="submit".
Try to add 'type="button"' on each of them.
<button type="button" id="show" class="toggle_button" value=$("#show").click action=$("#show").click >+</button>
<button type="button" id="hide" class="toggle_button" value=$("#hide").click action=$("#hide").click>-</button>
hope this helps.

Try this CSS:
.btn {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0px;
font-family: Arial;
color: #000;
font-size: 60px;
background: #ffffff;
padding: 0px 0px 0px 0px;
text-decoration: none;
}
And the HTML:
<button id="show" class="toggle_button btn" value=$("#show").click action=$("#show").click >+</button>
<button id="hide" class="toggle_button btn" value=$("#hide").click action=$("#hide").click>-</button>

The issue is that when you put a button in a form it's default type is submit unless you explicitly set it to button.
You are therefore submitting the form unintentionally
Change to
<button type="button"></button>
Alternatively in javascript you can also use event.preventDefault() within click handlers

Prevent CSS :hover style propagation

In the following example, when I mouse over the 'X' button, the list-item hover style gets enabled as well, I do not want this to happen.
Is it possible to have a hover style on the button independent of the hover style on the list-group-item? Something like prevent the 'hover' propagation?
Is there any other way to achieve that? Maybe assembling all of this HTML/CSS/JS in a different way?
Working sample here
<ul class="list-group">
<li class="list-group-item">
Lalalalaiaia
<button class="btn btn-default btn-xs pull-right remove-item">
<span class="glyphicon glyphicon-remove"></span>
</button>
</li>
<li class="list-group-item">
Panananannaeue
<button class="btn btn-default btn-xs pull-right remove-item">
<span class="glyphicon glyphicon-remove"></span>
</button>
</li>
</ul>
CSS
.list-group-item:hover {
background: #fafafa;
cursor: pointer;
}
JavaScript
$('.list-group-item').on('click', function(){
console.log('clicked item');
});
$('.remove-item').on('click', function(e){
console.log('clicked remove-item btn');
e.stopPropagation();
});
UPDATE
The problem seems to be that when hovering the inner X button, the mouse actually doesn't leave the 'list-group-item' element, thus, it keeps the hover state.
I was able to solve it by manually dispatching mouseenter and mouseleave on the 'list-group-item' in the mouseleave and mouseenter event of the 'remove-item' button, respectively, without the need to use 'event.stopPropagation()' (except for the button click handler).
The drawback is that I need a mouseenter and a mouseleave event handler for both elements. Preferably I'd use only CSS, but that seems to be impossible.
I'm just not sure whether this is a clean solution, what do you think?
Working sample here
CSS
.list-group-item.mouseover {
background: #fafafa;
cursor: pointer;
}
.list-group-item .remove-item.mouseover {
background: #aaf;
cursor: pointer;
}
JavaScript
// LIST-ITEM EVENT HANDLERS
$('.list-group-item').on('mouseenter', function(e){
$(this).addClass('mouseover');
}).on('mouseleave', function(e){
$(this).removeClass('mouseover');
});
$('.list-group-item').on('click', function(){
console.log('clicked item');
});
// LIST-ITEM REMOVE BUTTON EVENT HANDLERS
$('.remove-item').on('mouseenter', function(e){
$(this).addClass('mouseover');
$(this).parent().mouseleave();
}).on('mouseleave', function(e){
$(this).removeClass('mouseover');
$(this).parent().mouseenter();
});
$('.remove-item').on('click', function(e){
console.log('clicked remove-item btn');
e.stopPropagation();
});

This is impossible to do with CSS only, except the not-so-clean way described by #Pointy.
You can do this with javascript by using event.stopPropagation(). So your hover style should become a class that you toggle on mouseover.
This question is a duplicate of css :hover only affect top div of nest

You can make a negation caluse like Pointy suggests but a more solid solution involves adding an extra node. The idea is that the row and the button become proper siblings since you can't style a TextNode.
<ul class="list-group">
<li class="list-group-item">
<div>Lalalalaiaia</div>
<button class="btn btn-default btn-xs pull-right remove-item">
<span class="glyphicon glyphicon-remove"></span>
</button>
</li>
<li class="list-group-item">
<div>Panananannaeue</div>
<button class="btn btn-default btn-xs pull-right remove-item">
<span class="glyphicon glyphicon-remove"></span>
</button>
</li>
</ul>
Now you can do:
.list-group-item div:hover {
background: #fafafa;
cursor: pointer;
}
You will need some extra trickery to get the button in the right place, like:
// untested
.list-group-item {
position: relative;
}
.list-group-item button {
position: absolute;
top: 5px;
left: 5px;
}

Ok so there is actually a solution that only requires the use of CSS (no HTML or JS stuff)
The following selector will only select those elements with the class "parent" on hover, which do not have a child with the class "child" that is also being hovered on.
.parent:has(:not(.child:hover)):hover {}
The only problem I can see with the :has() selector/pseudo class is browser support (especially older versions) - so before you use it check the currerrent compatibility lists to see if it fits your requirements.

I could not find an answer that worked in all cases, and was also simple to implement. Sadly, there appears to be no consistent solution that is purely CSS and/or requires special arrangements of the HTML.
Here is a jQuery solution that seems to work in all cases.
Any element with .ui-hoverable will receive a .ui-hover class that does not propagate. So you can stack .ui-hoverable elements and only the top-most under the mouse will have the .ui-hover class.
$('.ui-hoverable').each(function() {
var el = $(this);
el.on('mousemove', function () {
var parent = $(event.target).closest('.ui-hoverable');
if(parent.length && parent[0] == el[0]) {
el.addClass('ui-hover');
return;
}
el.removeClass('ui-hover');
});
el.on('mouseleave', function () {
el.removeClass('ui-hover');
});
});
This works because the mousemove event searches for the closest .ui-hoverable and if it is not the current element the .ui-hover is removed. So the top most will receive the .ui-hover and an element under it will have it removed.
Enjoy, report any problems.
Thanks,

Addthis share buttons inside bootstrap popover

I am having trouble getting the addThis buttons to show inside of a bootstrap popover. The code is in the html data attribute and the addThis script is firing correctly, but the buttons just don't show even though the code can be seen in it via inspector.
I've done a jsfiddle here:
http://jsfiddle.net/XW9bk/1/
<li id="share" class="text-primary" data-html="true" data-content="<div class='addthis_toolbox addthis_default_style addthis_32x32_style'><a class='addthis_button_preferred_1'></a><a class='addthis_button_preferred_2'></a><a class='addthis_button_preferred_3'></a><a class='addthis_button_preferred_4'></a><a class='addthis_button_compact'></a><a class='addthis_counter addthis_bubble_style'></a></div>" data-original-title="" data-trigger="manual" data-placement="right"><a class="text-success">Share</a></li>
$('#share').click(function() {
$('.vote, .favorite, #share').popover('hide');
$('#share').popover('toggle');
})
$(document).ready(function() {
var addthis_config = {"data_track_addressbar": true};
$.getScript("//s7.addthis.com/js/300/addthis_widget.js#pubid=imperium2335")
})
I've got it working in a way with:
$('#share').click(function() {
$('.vote, .favorite').popover('hide');
$('#share').popover('toggle');
addthis.toolbox('.addthis_toolbox');
})
The problem now is there is a delay of several seconds before the buttons are displayed in the popover. When the popover is hidden and then reopened, the buttons aren't there and again take a while to appear.
Anyone know what could be causing this?

It seems to be a timing issue with the script loading, combined with the fact that it is essentially dynamic content. This will work for your situation:
HTML
<div class="hidden">
<div class="the-content"></div>
</div>
<br />
<br />
JAVASCRIPT
$(document).ready(function () {
var addthis_config = {
"data_track_addressbar": true
};
var theCode = '<div class="addthis_toolbox addthis_default_style addthis_32x32_style"><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a><a class="addthis_counter addthis_bubble_style"></a></div>';
var theButton = '<button type="button" class="btn btn-default" data-container="body" data-placement="right" rel="popover">Popover on right</button>';
$('.the-content').append(theCode).promise().done(function () {
$.getScript("//s7.addthis.com/js/300/addthis_widget.js#pubid=imperium2335", function () {
setTimeout(function() { $('body').append(theButton); }, 1000);
$('body').popover({
selector: '[rel=popover]',
html: true,
content: function () {
return $('.the-content').html();
}
});
});
});
});
FIDDLE

I achieved what you were trying to do successfully, except that the problem was that share buttons were not clickable. Someone contacted AddThis support, this is the response they got;
Unfortunately without seeing it in action I can't diagnose the problem. If the buttons are visible but not clickable then there's either something hijacking the click action or another transparent element z-indexed over it.
I solved this problem by loading the AddThis buttons after the popover has been shown. See the code below;
<button type="button" class="btn btn-artist-add-share has-popover" rel="popover" data-placement="bottom" data-html="true" data-content="<div id='pcontent'></div>">Share <i class="fa fa-share padding-left-20"></i>
</button>
<script language="JavaScript">
$("[rel=popover]").popover({
html: true
});
$("[rel=popover]").on('shown.bs.popover', function() {
$('#pcontent').html("<div class='addthis_sharing_toolbox'></div>")
$.getScript("//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4fa624772af11b1b")
});
</script>