onChange Button label doesn't hold its style - javascript

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

Related

Add an element (input) in div where the js function has been fired

I'd like to insert an input in an adjacent div where the JS function has been fired.
JavaScript: to add an element (input in this case)
jQuery: to detect where the javascript function has been fired.
The issues I'm facing :
The input is created after the second click.
All the inputs move from one div to another on each click ...
I don't understand why this happens! Do you guys have an idea why everything messes up? Thanks a lot.
var ct = 0; // numeric identifier for training section
var lec = 0; // numeric identifier for lectures
function addLecture() {
lec++;
var div = document.createElement('div');
div.setAttribute('id', 'lecture'.concat(lec))
var input = document.createElement('input');
lecture.setAttribute('type', 'text')
div.appendChild(input)
var id;
jQuery('.info_container').click(function(id) {
var id = jQuery(this).attr("id");
document.getElementById(id).querySelector('[id ^= "lectures_container"]').insertAdjacentElement('beforeend', div);
});
}
[id^="row"] {
padding: 10px;
margin: 10px;
background-color: gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="row-4" class="info_container">
<div id="lectures_container4">
</div>
<a class="btn btn-add" href="javascript:addLecture()"><span class="fa fa-plus"></span> Add an input</a>
</div>
<div id="row-5" class="info_container">
<div id="lectures_container5">
</div>
<a class="btn btn-add" href="javascript:addLecture()"><span class="fa fa-plus"></span> Add an input</a>
</div>
Full code and live example in the JS fiddle right here: https://jsfiddle.net/t7x350d9/
Your code is much more complicated than it needs to be.
Firstly when dealing with repeated HTML structures do not use id attributes. Use the same class on them all to group them. If you need to identify each one, listen for the event and use the target to determine which element was interacted with. In the example below this can be done through the target property of the event which is raised.
Secondly, to achieve your goal simply use an unobtrusive event handler in your JS (not an onclick attribute in the HTML) and append() the new HTML. Try this:
jQuery($ => {
$('.info_container .btn').on('click', e => {
e.preventDefault();
$(e.target).closest('.info_container').find('.lectures_container').append('<div class="lecture"><input type="text" /></div>');
});
});
.info_container {
padding: 10px;
margin: 10px;
background-color: gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="info_container">
<div class="lectures_container"></div>
<a href="#" class="btn btn-add">
<span class="fa fa-plus"></span> Add an input
</a>
</div>
<div class="info_container">
<div class="lectures_container"></div>
<a href="#" class="btn btn-add">
<span class="fa fa-plus"></span> Add an input
</a>
</div>

cant grab value from div using attr()

check the html code bellow. i want to get value of isred on click by jquery. but problem with my code is that this returns undefined error in console.log. How can i fix it?
html:
<div value="123102302155" upc="076174942026" class="btn btn-default btnAmazon"><i data-toggle="tooltip" data-placement="top" title="" class="fa fa-bullseye fa-lg" style="color:#82f520" isred="0" data-original-title="We successfully match supplier product, click to compare"></i></div>
jquery:
$(document).on("click", ".btnAmazon", function (e) {
var isred = $(this).attr("isred");
console.log(isred);
});
Your .btnAmazon div doesn't have the isred attribute. If you want to add a custom attribute to your html, try to use data-iserd="value". In the term of SEO it's not an standard attribute of html elements.
You can get the value with jquery like this:
var isred = $(this).data("isred");
Also your query for getting access to that attribute is wrong. Try this:
var isred = $('i', this).data("isred");
Update
$(function() {
$(document).on("click", ".btnAmazon", function (e) {
alert($('i',this).data("isred"));
});
});
.btnAmazon {
width: 100%;
height: 200px;
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div value="123102302155" upc="076174942026" class="btn btn-default btnAmazon">
<i data-toggle="tooltip" data-placement="top" title="" class="fa fa-bullseye fa-lg" style="color:#82f520" data-isred="10" data-original-title="We successfully match supplier product, click to compare"></i>
</div>
You can get value from div using id
for example:-
var demo = document.getElementById('demo').getAttribute('value');

Toggle all except one and then toggle the excepted one?

I have this Q&A section.
What I want to do is show the clicked one and hide the all others. After that if I click again on the clicked one it will hide like others.
I have done the hide all parts except the 2nd click part.
MARKUP
<h4 class=" question"><span class="glyphicon glyphicon-minus faq_icon"></span><strong>How r u?</strong></h4>
<p class="answer">Fine</p>
<h4 class=" question"><span class="glyphicon glyphicon-minus faq_icon" id=""></span><strong>What r u doing?</strong></h4>
<p class=" answer">nothing.</p>
JQUERY
$(document).ready(function() {
$(".question").click(function() {
$('.answer').not(this).hide();
$(this).next(".answer").toggle();
});
});
Now I need to hide the THIS on 2nd click. How to do that?
Check it
$(".question").click(function() {
$('.answer').hide();
if(!$(this).next(".answer").is(':visible')) {
$(this).next(".answer").show();
}
});
You need to pass the current answer element to not().
this in the click handler is the question element so $('.answer').not(this).hide(); will hide all the answer elements, then calling toggle for the current answer element will always display it instead of toggling it
$(document).ready(function() {
$(".question").click(function() {
var $ans = $(this).next(".answer").toggle();
$('.answer').not($ans).hide();
});
});
.answer {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 class=" question"><span class="glyphicon glyphicon-minus faq_icon"></span><strong>How r u?</strong></h4>
<p class="answer">Fine</p>
<h4 class=" question"><span class="glyphicon glyphicon-minus faq_icon" id=""></span><strong>What r u doing?</strong></h4>
<p class=" answer">nothing.</p>
try this:
$(".question").click(function() {
if( $(this).is(':visible') ){
$('.answer').not(this).hide();
}else {
$('.answer').hide();
}
$(this).next(".answer").toggle();
});

Use button to expand div, then scroll the page to that div

I have a div at the bottom of the page on every page of the site (footer). I have a button to expand that div, but I want it to also scroll the page down so that the user can actually see the expanded content.
Currently, I have:
$(document).ready(function () {
$("#footerContent").on("hide.bs.collapse", function () {
$(".btn").html('INFO <span class="glyphicon glyphicon glyphicon-plus"></span>');
});
$("#footerContent").on("show.bs.collapse", function () {
$(".btn").html('INFO <span class="glyphicon glyphicon-minus"></span>');
});
});
.btn-success, .btn-success:hover, .btn-success:active {
color: #848484;
background-color: #FFFFFF;
border-color: #fff;
}
<script src="http://able.thebrewroom.com/bootstrap/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-success" data-toggle="collapse" data-target="#footerContent">INFO <span class="glyphicon glyphicon-plus"></span>
</button>
<div id="footerContent" class="collapse">some content here</div>
Yes, I know, this is poor UX, which I have tried to explain to the designer, but they want to do it anyway. I just want the button to expand the DIV, and then for the page to scroll down so that I can actually see the content. Thanks!
What you need is a scrollTo function in think, check out the below link they've used it in a innovative way in the example section,
http://demos.flesler.com/jquery/scrollTo/

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,

Categories

Resources