I'm using Bootstrap: Dropdown on Hover Plugin ( https://cameronspear.com/blog/bootstrap-dropdown-on-hover-plugin/ ) and it works perfectly. The problem is that I don't only have common sub-menus with just links. In a sub-menu I have a big login form where the user has to click some input boxes. My problem is that my menu closes when I click anywhere inside that, even inside a form element. I know it's supposed to do that (or at least it's ok) when there are only links to click on but in my case I need to actually do more than one stuff in there.
Here's part my menu (with the login form):
<li class="dropdown pull loginbox">
LOGIN</i>
<div class="dropdown-menu">
<section id="signin_alt" class="authenty signin-alt">
<div class="section-content">
<div class="wrap">
<div class="container">
<div class="row" data-animation="fadeInUp">
<div class="col-md-4 col-md-offset-1">
<div class="normal-signin">
<div class="title">
<h2>Sign In</h2>
</div>
<div class="form-main">
<div class="form-group">
<div class="un-wrap">
<i class="fa fa-user"></i>
<input type="text" class="form-control" placeholder="Username" required="required">
</div>
<div class="pw-wrap">
<i class="fa fa-lock"></i>
<input type="password" class="form-control" placeholder="Password" required="required">
</div>
<div class="row">
<div class="col-md-6">
<input type="checkbox" class="form-control" checked>
<label>Remember me</label>
</div>
</div>
<div class="row top-buffer">
<div class="col-md-4 col-md-offset-8">
<button type="submit" class="btn">Sign In</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2 hidden-xs">
<div class="horizontal-divider"></div>
</div>
<div class="col-md-4">
<div class="sns-signin">
<i class="fa fa-facebook"></i><span>Sign in with Facebook</span>
<i class="fa fa-google-plus"></i><span>Sign in with Google+</span>
</div>
</div>
<div class="col-md-1"></div>
</div>
<div class="row top-buffer bottom-wrap">
<div class="col-xs-6 col-md-2 col-md-offset-1">
Forgot your password?
</div>
<div class="col-xs-6 col-md-2">
Create an account
</div>
</div>
</div>
</div>
</div>
</section>
</div>
All the tags to make the jQuery work are in line 2 and it works! I just need it to not close the sub-menu when the mouse in over it, even if it's clicking like crazy. Any ideas?
Thanks!
You can do that by using a click event on the element you want and then stopping the Propagation inside the click event.
For Example:-
$("#some_id").click(function(e){
e.stopPropagation();
});
The Div, in which you have your form having following code which may closing your div. Also all of this code should be in li tag followed by ul wnder which you should keep your form.
<div class="row" data-animation="fadeInUp">
Related
So I have this markup
<div class="col-md-12 hypoteka" id="hypoteka1">
<div class="row">
<div class="clickable">
<div class="col-md-2">
<div class="row text-center">
<div class="col-md-offset-2 col-md-8">
<img src="whaever.jpg" class="img-responsive">
</div>
</div>
<div class="row">
<h3 class="text-center banka">whaever.</h3>
</div>
<div class="row text-center">
<i class="fa fa-3x fa-chevron-right"></i>
</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-6 text-center splatka" title="Splátka" data-toggle="tooltip">
<span class="hodnota">730</span>€ / mes.
</div>
<div class="col-md-6 fixacia text-center" title="Fixácia" data-toggle="tooltip">
<i class="fa fa-hourglass"></i>
<span class="hodnota">2</span>roky
</div>
</div>
<div class="row">
<div class="col-md-6 text-center urok" title="Úrok" data-toggle="tooltip">
<i class="fa fa-line-chart"></i>
<span class="hodnota">1,85</span>%
</div>
<div class="col-md-6 preplatenie text-center" title="Preplatenie"
data-toggle="tooltip">
<i class="fa fa-plus"></i>
<span class="hodnota">7 900</span>€
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="row">
<p class="hodnotenie-text text-center">Hodnotenie</p></div>
<div class="row">
<p class="hodnotenie-cislo text-right">8/10</p></div>
<div class="row text-center">
<i class="fa fa-2x fa-balance-scale"></i>
<input type="checkbox">
</div>
</div>
</div>
</div>
</div>
and this js
$('.clickable').hover(function (e) {
$(this).find('.fa-chevron-right').toggleClass('fa-5x call-to-action');
});
$('[data-toggle="tooltip"]').tooltip({
placement: 'bottom'
});
I captured the behavior here
As you can see in the video, when the pointer hovers over the bootstrap tooltip before the animation finishes hiding it, it triggers the hover event on the clickable div.
I tried doing e.preventDefault() on hidden.bs.tooltip but does nothing. I cannot explain it. Any help?
I think it's because the bootstrap tooltip is not created inside the .clickable container on which your hover action is defined.
When you mouse over the tooltip, you are moving outside the .clickable container, and so when you move mouse out from the tooltip, the hover event is fired again.
This can be seen better if you add a delay to the tooltip (example - 2 sec delay when showing/hiding tooltips). Try moving your mouse over and out of the tooltips before they disappear.
I can't get my content to fit in my slideout footer. I'm not sure why this is happening. I'm not sure if I have to add it to the JavaScript.
I added the #slideFootercontent to the beginning to everything that I want in the footer, and it's still not working. To be clear, I want the content to slideout with the slideout footer.
I created a codepen.io
<footer>
<div class="navbar-fixed-bottom">
<div id="footerSlideContainer">
<div id="footerSlideButton"></div>
<div id="footerSlideContent" class="container ">
<div class="row">
<div class="container">
<div class="row">
<br>
<hr>
<div class="col-lg-4">
<h3>Latest Tweets
</h3>
<div id="example1"></div>
<h4>Watch me on Periscope</h4>
#Erica2385
</div>
<!-- col -->
<div class="col-lg-4 border">
</div>
<!-- col -->
<div class="col-lg-4">
<h3> Subscribe
</h3>
<p>Subscribe for the latest newsletters and updates</p>
<div id="mc_embed_signup" class="mailchimp">
<form action="..." method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate form-inline" target="_blank" novalidate>
<div class="form-group">
<input type="email" value="" name="EMAIL" class="required email form-control" id="mce-EMAIL" placeholder="Enter email">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn__bottom--border mailchimp__btn" data-style="shrink" data-horizontal>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div class="" style="position: absolute; left: -5000px;"><input type="text" name="..." value=""></div>
</form>
<span class="form_nospam">No spam</span>
</div>
<!--End mc_embed_signup-->
</div>
<!-- col -->
</div>
<!-- row -->
</div>
<!-- container -->
<hr class="container">
<div class="container">
<i class="fa fa-facebook fa-2x"></i>
<i class="fa fa-twitter fa-2x"></i>
<i class="fa fa-soundcloud fa-2x"></i>
<div class="pull-right">
<iframe width="100" height="20" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/231337268&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
The problem is that you are styling #footerSlideContainer and #footerSlideContent with position:fixed (that prevents the content from being hidden).
Move the button (#footerSlideButton) outside of #footerSlideContainer, so it shows while that container is hidden and then style the rest appropriately. Check your modified codepen
Note that I changed a few things here and there as you had bad selectors that made some rules useless and also values that created problems.
I have been tasked at making notification toggles be accessible via tab for accessibility purposes. Googling this has ended in utter failure. How can I accomplish this?
HTML:
<!-- Settings - Notifications -->
<div class="panel-body account-settings" ng-show="item == 3" ng-controller="noteSettingsController as note">
<div class="row">
<h4 class="text-center">Email</h4>
<form class="form-horizontal">
<div class="form-group" ng-repeat="(key, alert) in defs.email">
<div class="row">
<label for="emailCritNotes" class="col-sm-2 control-label">{{alert.name}}</label>
<div class="col-sm-8">
{{alert.desc}}
</div>
<div class="col-sm-2">
<i class="fa" ng-click="toggleEmail(key)" ng-class="{'fa-toggle-on': alert.status, 'fa-toggle-off': !alert.status}"></i>
</div>
</div>
</div>
</form>
</div>
Essentially, the issue is that the drop down that's created with .ui.inline.dropdown is appearing beneath the rest of the fields in the code below it. Both of which are in an accordion.
My first instinct was to just give the drop down a high z-index and the inputs a lower z-index, but this doesn't appear to have any effect on the issue.
This is the html:
<div class="ui accordion">
<div class="title">
<i class="dropdown icon"></i>
Advanced
</div>
<div class="content">
<h4>
Results match
<div class="ui inline dropdown">
<div class="text">any</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="active item" data-text="any">Any</div>
<div class="item" data-text="all">All</div>
<div class="item" data-text="none">None</div>
</div>
</div>
of the fields below.
</h4>
<div class="field">
<label for="firstName">Name</label>
<div class="two fields">
<div class="field">
<input type="text" class="form-control" id="firstName" autocomplete="off" placeholder="First Name">
</div>
<div class="field">
<input type="text" class="form-control" id="firstName" autocomplete="off" placeholder="Last Name">
</div>
</div>
</div>
</div>
</div>
...and this is how I'm initializing the drop down and accordion:
$( '.ui.accordion' ).accordion();
$( '.ui.dropdown' ).dropdown();
I'm trying to display the details of an email side by side (this is only a section of the full page) but the details from the row containing the from/to and date/cc/bcc information overlap a lot before stacking when the page resizes and I'd like them to stack before this problem arises. The following is the simplified version of what I have:
<div>
<div class="row">
<div class="col-xs-10">
<span style="font-weight:bold;" data-bind="text:Subject"></span>
</div>
<div class="col-xs-2">
<button class="btn btn-default" style="float:right; height:30px;">
<img src="..." style="max-height:20px; border:none;" />
</button>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-2">
<div class="row">
<div class="col-xs-12">From: </div>
<div class="col-xs-12"> </div>
<div class="col-xs-12">To: </div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">FromName</div>
<div class="col-xs-12">email</div>
<div class="col-xs-12">ToName</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-2">
<div class="row">
<div class="col-xs-12">Date: </div>
<div class="col-xs-12">Cc: </div>
<div class="col-xs-12">Bcc: </div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">date</div>
<div class="col-xs-12">Cc address</div>
<div class="col-xs-12">Bcc address</div>
</div>
</div>
</div>
</div>
</div>
<div>
Bootply Example
Columns overlap because the col-xs-2 is too small for the content in it:
<div class="col-xs-2">
<div class="row">
<div class="col-xs-12">From: </div>
<div class="col-xs-12"> </div>
<div class="col-xs-12">To: </div>
</div>
</div>
Inspect with Dev tools the <div class="col-xs-2"> which contains From: to see that when the text overlaps the content area is smaller than the text length.
To solve it you can change the col-xs-NUMBER for a bigger NUMBER (try with 4) also changing the detailed column (to 8, if you replace the previous with 4).