We Keep Coding

How to search for text that comes from DOM

Here is how it should work.
I have an application where you have to select a sport activity.
At the moment I have a function setActivityType(String: ActivityName) that is going to set the value in my database. Now what I want to do is when I click on that button is should highlight the clicked button.
I want to do this my searching in the dom the ActivityName passed in before and select it so I can change the style of it.
This is how each sport button is made :
<div class="type" onClick="setActivityType('Volley')">
<i class="fas fa-volleyball-ball"></i>
<p>Volley</p>
</div>
So how could I search for the <p>Volley</p> value?

I figured out to do this with event.target that will get all the dom information and I figured out how to manipulate it afterwards.

click button simulates clicking a dropdown hidden

I do not know if it's possible, but wanted to have a jsp page when loaded uam dropdown does not appear, but when I click a button.
Basically I want a button that makes the select box. that when clicked appear a list "option".
Already experimenting with various js events and jquery but none works. I had a div with style = "display: none;" and within the div I have the select. and wanted to show the option only when you click a button. It is possible ?
Thanks for listening

try this
$(document).ready(function(){
$('.mySelectbox').hide();
$('.myButton').click(function(){
$('.mySelectbox').val(-1); //clear selection of selectbox
$('.mySelectbox').show(); //show make the magic
});
});
this work for you?

Enable dropdown hovers only after click?

I am using Twitter Bootstrap built in dropdowns, and they show on hover. The user should know they are available when the arrow/eject icons shows up. I want these dropdowns only available and able to hover once the user clicks/chooses a row from the table. The fiddle I have below shows them permanently, which isn't what I need here. The arrows show as they should, but I can't figure out how to disable/enable the dropdown hovers. Any ideas? Thanks in advance.
jQuery
$('table tr').click(function(){
//enable dropdowns after row click
$('.dropdown-menu').show();
//now show hover icons for dropdowns
$('.glyphicon-eject').show();
});
http://jsfiddle.net/YSmK7/6/

So if you take away the dropdown class initially that will stop the dropdowns. If you add the dropdown class after the click then the drop downs will be activated.
Everywhere where you have <li class="dropdown"> change it to <li class="beforedropdown">
HTML
<li class="beforedropdown"> <a href="#" class="dropdown-toggle"
jQuery
$('table tr').click(function(){
//now show hover icons for dropdowns
$('.glyphicon-eject').show();
$('.beforedropdown').addClass('dropdown');
});
http://jsfiddle.net/YSmK7/8/
Update
And if you don't want to be able to click on the links to bring up the drop down menu either you need to do the following.
<a href="#" class="dropdown-toggle" data-toggle="">
Remove the value out of all the data-toggles on all your .dropdown-toggle links.
http://jsfiddle.net/YSmK7/9/

Try using .toggle() method instead of .show()
Or bind a .hide() to the event that should remove the menus, such as mouseout().

Creating a checkbox list popup from a select

I'm having a few problems creating a multiple select checkbox list that appears when a user clicks a select field (I use the onfocus event).
As far as showing the list, that's fine, however how can one prevent the actual select field from showing a dropdown using javascript?

Why not! :)
DEMO
$('.sel').focus(function() {
this.blur();
window.focus();
$('.dropdown').fadeToggle(300);
});

Here is the solution I use to customize the appearance of my select and fileupload controls:
give your element (select) opacity:0.1 either by css or jQuery fadeTo() function
wrap your element with a container div and give it position:relative.
add a sibling (drop panel) to the element and give it position:absolute, top:, left:0 and width equal to the width of element.
show the drop panel using jQuery in $(select).click() event.
may seem weird, but works cross browser :)

Haven't tried to suppress the select dropdown, but if all else fails you can just create a custom form element. Such as:
<dl>
<dt>Please select an option</dt> <!-- Text -->
<dd> </dd> <!-- Style as downward arrow -->
</dl>
<input type="hidden" name="custom_select_value" value="selected option" />
Style the DL (or which ever markup you wish) to look like a select element, then use a click handler to bring down your multi-option box. Also populate the hidden input with JS when an option is selected to ensure the data is submitted with the form.

I needed a similar UX, so I created this:
harshniketseta.github.io/popupMultiSelect
Hope this helps you.

jquery theme builder question

How do I initialize a button as an icon using the JQuery themeroller? I dont want text next to an icon, I just want an icon, and I want to switch between two icons when clicking on it.

I believe you can do it this way:
<button class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-n"><span class="ui-icon ui-icon-carat-1-n"></span></button>
However, I haven't tested it-- this is directly from the ThemeRoller page. Just change the ID of the button and add your event to it. Also, make sure you change the ui-icon-carat-1-n class of the span to change the icon.