Develop Reference

How to prevent Elements BENEATH a Bootstrap Multiselect dropdown from firing on click of multiselect?

When a user clicks an option in a Bootstrap Multiselect dropdown a Bootstrap Toggle (http://www.bootstraptoggle.com/) Element BELOW is fired.
I'm not sure if this problem is specific to Bootstrap Multiselect and/or Bootstrap Toggle, or the interplay of the two - it is the only Element in my app that overlaps/hides other Elements.
The plugin works great...it's just that when you click Algebra (1 below) or really any option in the dropdown, the Bootstrap Toggles below (2 in the screenshot) are fired as if you clicked them directly.
How do I prevent this without a check-to-see-if-the-multiselect-is-open logic?
Adding HTML to address question...the divs were inside a single parent div and I moved them to be in separate Divs...same result: clicking the dropdown multiselect fires the listener on wordPref class.
<div class="row paddingMenu">
<div class='col-xs-12 alignleft'>
<b>Select</b> from <i>active</i> Libraries<a data-toggle="tooltip" data-placement="bottom" title="Click EDIT then ACTIVATE LIBRARIES to add and remove Libraries." tabindex="-1" class="pull-right"><span class="glyphicon glyphicon-info-sign pull-right" style="font-size: 15px"></span></a>:
</div>
<div class='col-xs-12 aligncenter'>
<div class='form-group'><select id='ddLibName' multiple='multiple'></select>
<div id='ddLibrarySelect'></div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4 aligncenter" data-toggle="tooltip" data-placement="bottom" title="Choose whether to insert selected Comments as Word comment bubbles OR inline text.">
<input type="checkbox" id="insertMode" class="wordPref" data-toggle="toggle" data-size="small"
data-off="Inline" data-on="Comment"
data-offstyle="info" data-onstyle="success">
</div>
<div class="col-xs-4 aligncenter" data-toggle="tooltip" data-placement="bottom" title="Save document owner/author info with your usage statistics. This setting may be defined by your institution.">
<input type="checkbox" id="logMode" class="wordPref" data-toggle="toggle" data-size="small"
data-off="History OFF" data-on="History ON"
data-offstyle="info" data-onstyle="success">
</div>
<div class="col-xs-4 aligncenter">
<a class="btn btn-primary btn-sm" id="refreshBtn" data-toggle="tooltip" data-placement="bottom" title="Refresh AP to pull down any content changes or purchases." tabindex="-1">Refresh</a>
</div>
<div id='upsellMsgDiv' class='apSidebarAlert col-xs-12 hide'>
<div class="spacer-5"></div>
<div class="panel panel-warning">
<div class="panel-body highlight-cell">
<span class="apAlertMsg"></span>
<div id='closeAlertBtn' class='col-xs-12 spacer-5 hide'>
<button class='btn-sm btn-primary closeSidebarAlert pull-right' type='button'>Close</button>
</div>
</div>
</div>
</div>
</div>

I haven't used it but are those two inside a same div? Is one of them is a parent?.. Share your code as well... You can try doing
e.stopPropagation()
to the below div if the dropdown div is the parent div.

semantic ui modal print using printjs not getting result

semantic ui modal ptint using printjs library. but the result is not
correctly showing the expected modal print.
help ?
$(document).ready(function(){
$('#logIn').click(function(){
$('#modaldiv').modal('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.css" rel="stylesheet"/>
<div id="modaldiv" class="ui modal">
<button type="ui button" id="button" onclick="printJS({ printable:
'modaldiv',type: 'html',showModal:true, printContainer:
true,copyTagClasses: true})">
Print
</button> //print button and printjs command active
<i class="close icon"></i>
<div class="header">
Profile Picture
</div>
<div class="content">
<div class="ui medium image">
<img src="img/bmw5.png">
</div>
<div class="description">
<div class="ui header">We've auto-chosen a profile image for you.</div>
<p>We've grabbed the following image from the <a href="#"
target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
<p>Is it okay to use this photo?</p>
</div>
</div>
<div class="actions">
<div class="ui black button">
Nope
</div>
<div class="ui positive right labeled icon button">
Yep, that's me
<i class="checkmark icon"></i>
</div>
</div>
</div>
<a class="item ui button" id="logIn">
<i class="user icon"></i> Log In
</a> // modal open login button

The issue printing this modal is not related to print.js. The modal has a negative margin-top applied style which is the cause of issue when printing it.
In this fiddle, you can test using the Print2 button, it will print another html element content inside the same modal, without any issues.
https://jsfiddle.net/crabbly/y8e4ga8p/

Semantic-UI popup menu doesn't work

I'm new in Semantic-UI and web development and I can't make the popup menu work. Actually I'm trying to create the popup menu example in this page and the document doesn't tell me to run any javascript etc. I've created a jsfiddle here:
https://jsfiddle.net/jhg9df8t/
The code is:
<div class="ui menu">
<a class="browse item">
Browse
<i class="dropdown icon"></i>
</a>
</div>
<div class="ui fluid popup top left transition hidden">
<div class="ui four column relaxed equal height divided grid">
<div class="column">
<h4 class="ui header">Fabrics</h4>
<div class="ui link list">
<a class="item">Cashmere</a>
<a class="item">Linen</a>
<a class="item">Cotton</a>
<a class="item">Viscose</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Size</h4>
<div class="ui link list">
<a class="item">Small</a>
<a class="item">Medium</a>
<a class="item">Large</a>
<a class="item">Plus Sizes</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Colored</h4>
<div class="ui link list">
<a class="item">Neutrals</a>
<a class="item">Brights</a>
<a class="item">Pastels</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Types</h4>
<div class="ui link list">
<a class="item">Knitwear</a>
<a class="item">Outerwear</a>
<a class="item">Pants</a>
<a class="item">Shoes</a>
</div>
</div>
</div>
</div>

You would need to initialize the popup as follows.
$('.example .menu .browse').popup({
inline : true,
hoverable: true,
position : 'bottom left',
delay: {
show: 300,
hide: 800
}
});
This is from Popup documentation (.example class element is not included in the code you copied from semantic ui. So if you dont have that element with example class in your code I would suggest updating initialization without it). Refer to it for more information.
http://semantic-ui.com/modules/popup.html#/examples
Also I think you might need to include JS & CSS associated with popup plugin.
If you read carefully here http://semantic-ui.com/collections/menu.html#popup-menu follow the link to popup and see if theres any additional JS and/or CSS for it.
I hope it helps.

Reveal Hidden Elements with Buttons

I have a row made of three buttons, and I need these three buttons to remain on the same row.
With that said, I am trying to make it so that each time one of these buttons is clicked, hidden content is displayed underneath them. Each button would show hidden content that is different from the other.
Is there anyway I can accomplish such a task using $(this) or must I assign a unique ID to each button and the relevant content it's supposed to show?
I have tried placing each button within a superclass called .items and the relevant content within this class as a child, called .description--so that I can access it using jQuery's .children() function--but this tends to mess up the row that my buttons are on (so that they are not all on the same row). Is there anyway to get around this?
What would be the simplest way to go about this?
Edit to show code:
<div class="displayers">
<div class="items">
<button type="button" class="btn btn-custom">Button 1</button>
<div class="row">
<div class="description">
<p> content here </p>
</div>
</div>
</div>
<div class="items">
<button type="button" class="btn btn-custom">Button 2</button>
<div class="row">
<div class="description">
<p> content here </p>
</div>
</div>
</div>
<div class="items">
<button type="button" class="btn btn-custom">Button 3</button>
<div class="row">
<div class="description">
<p> content here </p>
</div>
</div>
</div>
</div>
In order to make the buttons fit on the same row, I changed the ".items" class to have the property of "inline-block". The ".description" class is hidden, and I have some jQuery to reveal it.
var main = function() {
$('.items').click(function() {
$('.description').hide();
$(this).children('.description').show();
});
};
$(document).ready(main);
The problem with this is that my buttons are no longer on the same row.

I like to use data attributes and css selectors (easy to change later on), so I would use:
$('[data-show]').on('click', function(e) {
var toShow = $( $(this).data('show') );
toShow.siblings().hide();
toShow.show();
});
li {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
<button data-show=".content > *:nth-child(1)">Open 1st</button>
<button data-show=".content > *:nth-child(2)">Open 2nd</button>
<button data-show=".content > *:nth-child(3)">Open 3rd</button></p>
<ul class="content">
<li>1st Container</li>
<li>2nd Container</li>
<li>3rd Container</li>
</ul>
Looks pretty simple to me, but does not mean others would agree. It really depends on your needs.

You can just toggle the elements which is next to your button with just class added to each element as below:
$('.btnshowdes').on('click',function(){
$(this).next('.desc').toggle();
});
.desc{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="items">
<div class="internal">
<input type="button" class="btnshowdes" value="Toggle Description"/>
<div class="desc">Description 1</div>
</div>
<br/>
<div class="internal">
<input type="button" class="btnshowdes" value="Toggle Description"/>
<div class="desc">Description 2</div>
</div>
<br/>
<div class="internal">
<input type="button" class="btnshowdes" value="Toggle Description"/>
<div class="desc">Description 3</div>
</div>
<br/>
<div class="internal">
<input type="button" class="btnshowdes" value="Toggle Description"/>
<div class="desc">Description 4</div>
</div>
<br/>
</div>
FIDDLE DEMO
UPDATE
Based on your updated question to make it in the same row you just need to put an extra style to your .items as below:
.items{
display:inline-table; //helps to keep it in same row
padding:10px;//Just to make it feel good
}
Your js according to your html structure will be:
$('.btn-custom').on('click',function(){
$(this).next('.row').find('.description').toggle();
});
DEMO FIDDLE HERE

To solve your problem i would split my elements. Why don't you put each button in a different container (a div for instance), each container having his own id and his own content.
So when you click on a button you display the content inside of one div and the style of other buttons will not be affected.
Something like
<div class="container" id="1">
<button id="btn1"> Button one </button>
<!-- your content here linked to the script you use to display -->
</div>
<div class="container" id="2">
<button id="btn2"> Button two </button>
<!-- your content here linked to the script you use to display -->
</div>
<!-- etc... -->
So you don't have to worry and use complicated scripts, and each style will not be affected by the others modifications.

jQuery mobile button alignment issue

I am trying my hand at jQuery Mobile and I find it a bit confusing because it's a mark-up driven framework.
I created a test page in which I am just trying to align one button to the right, but I am not able to do that. I tried float: right but it's not working. Although margin-left is working by giving a particular percentage, the same is not working when I resize the page.
Here is my Fiddle code. Any help would be great.
<div data-role="page">
<div data-role="header" data-theme="b" data-position="fixed">
<h1 style="font-size: 1.5em; text-align: left; margin-left: 70px;"
data-role="none">Test</h1>
</div>
<div id="contentLogin" align="center" name="contentConfirmation" data-role="content">
<p style="font-size: 0.85em; color: #000000">
<b>Welcome to my page</b>
</p>
<br>
<div class="ui-grid-b responsive">
<div style="margin: 0px; margin-top: 0px; margin: 0px;" class="ui-block-a">
<div data-role="fieldcontain">
<label for="url" class="alignleft">Username:*</label>
<input id="userId1" class="required" name="uid_r" placeholder="" type="text">
</div>
<div data-role="fieldcontain">
<label for="url" class="alignleft">Password:*</label>
<input id="Password1" class="required" name="pwd_r" value="" type="password">
</div>
<button id="login" data-theme="a" type="button" href="home.html" data-mini="false" data-inline="true" >Login</button>
</div>
<div class="ui-block-b">BLOCK A ADS</div>
<div class="ui-block-c" style="margin-top: 0px;">
BLOCK C
</div>
</div>
</div>
<div data-role="footer" data-theme="b" data-position="fixed">
</div>
</div>

Why not place your button inside a div and right align the div? everything inside the parent div including the button will be right aligned.
<div align="right"><button id="login" data-theme="a" type="button" href="home.html" data-mini="false" data-inline="true" >Login</button></div>
Check out the fiddle http://jsfiddle.net/mayooresan/96s59/2/

Use ui-btn-right. It's easier, less verbose and (I think) the jquery way to do things.
Login

The previous answer is correct, but you should use CSS styles instead (aling="" is deprecated)
<div style="text-align: right;">
<button data-inline="true">Login</button>
</div>

You can run into problems if you want multiple buttons...
Try:
<div style="float:right">
<button data-inline="true">Login</button>
</div>
if you want to have multiple buttons (both left and right aligned).
If you use:
<div style="text-align: right;">
<button data-inline="true">Login</button>
</div>
the div will start a new block below any existing buttons, so you can't have other icons on the left hand side.
Class ui-btn-icon-left|right lets you align the buttons left|right but I've found that using two buttons with ui-btn-icon-right will overlap them.
The template below worked for me for two left aligned buttons and two right in a footer:
Home
Intro
<div style="float:right">
Review
Exit
</div>