I have two elements, a <button> and a <ul>. There are multiple of the button, and they all do the same thing. When you click a button, I want to move the ul to the button (aligned at the top right). The buttons don't have IDs.
The menu (UL) will be absolute positioned. They are not siblings/parents/children of each other. When you click the button, it calls a function. I hope this function can move the UL to the location of the button that you clicked.
HTML:
<button class="download" onclick="showDownloadMenu()"><i class="fa fa-download" aria-hidden="true"></i></button>
<ul id="download-menu">
<h1>Downloads</h1>
<button id="download-close-button" onclick="hideDownloadMenu()"><i class="fa fa-times" aria-hidden="true"></i></button>
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>
<li>option 4</li>
<li>option 5</li>
</ul>
JavaScript:
option 1 - this makes sense in my head... the right side of the menu equals the right side of the button..
downloadMenu.right = (clickedButton.right)+'px';
kind of works on buttons on the left...
but the buttons on the right go even further left, something is definitely wrong
option 2 - closest to working but instead of the right side of the menu aligning with the right side of the button, the left side of the menu is. these at least are consistant, but it's not in the right place.
downloadMenu.left = (clickedButton.right)+'px';
option 3 - not sure, but it was the last thing to try
downloadMenu.left = (clickedButton.left)+'px';
once again this is consistant, and even closer, but now the left side of the button and the left side of the menu are aligned.
so you'd think making it right/right would do the opposite, but as seen above thats not the case.
I did a quick fiddle, hope that is what you meant.
$('button').click(function(){
$('ul').insertAfter($(this))
})
button {display: block; margin-top: 20px;}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<button>one</button>
<button>two</button>
<button>three</button>
<button>four</button>
<ul>
<li>xxx</li>
</ul>
Related
I'm using bootstrap for pagination, here simplified code.
<div style="margin:20px 0px 20px 0px">
<ul class="pagination" style="display:inline">
<li>page 1</li>
<li>page 2</li>
</ul>
<span>ajax-loader</span>
</div>
<form>text fields, button for send msg</form>
Ajax loader looks fine, right after pagination buttons, but form's elements ignore my div and go right after my ajax loader(same line), like there is no div. Brake line(br) not working too, i don't understand why.
So i want:
"pagination-ajaxloader"
"other data"
I have:
"pagination-ajaxloader-otherdata"
I tried to use float for ajaxloader, but i want it near pagination from right side. Looking for some advise, thank you.
I am trying to make tabbing cyclical within a dropdown menu.
Here's my JSFiddle: https://jsfiddle.net/Lc7saks3/
<nav id="primary_nav_wrap">
<div>
<ul>
<li tabindex="0">Menu
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
</ul>
</li>
</ul>
</div>
<br />
<br />
<input type="text" />
</nav>
Click on the Menu element and then tab through the options.
Currently, the tabbing goes through the 5 options within the dropdown menu and then moves on to the input element.
How can I make it such that the dropdown options are tabbed again,
cyclically, from option 1, once the last option (option 5) is reached?
You would need to use script listen for the Tab key while on the last item and, when pressed, immediately move focus back to the first item (or dynamically adjust tabindex values when you get to the last item).
However, DO NOT DO THIS as it constitutes a keyboard trap and is a failure of WCAG 2.0 item 2.1.2, No Keyboard Trap. There is a lengthy technique for handling this that essentially says to not do what you are trying to do: G21: Ensuring that users are not trapped in content
Finally, I suggest you take the tabindex off the li as that is not an interactive / actionable control and no place for a tabindex.
I'm working with Boostrap for the first time ever, please don't kill me :D
I have a problem with my navigation bar. I have 7 menus, each with a dropdown of its own. The problem is that when I click on a menu, they all dropdown at the same time, and I need only to dropdown the one I clicked on. My JS code is pretty rudimentary.
This is what I used so far:
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});
And the HTML code is this, (example for one menu; each menu has a similar code):
<li class="dropdown">
Organizare <b class="caret"></b
<ul class="dropdown-menu">
<li>Conducere</li>
<li>Consiliu</li>
<li>Departamente</li>
<li>Administratie</li>
<li>Secretariat</li>
</ul>
</li>
What do I need to change so that only the menu I click on dropdown ?
Thanks!
Find the menu following the toggle:
$('.dropdown-toggle').click(function() {
$(this).next('.dropdown-menu').toggle();
});
Example: http://codepen.io/paulroub/pen/YXKzGm
If you have multiple menus, I prefer to use this:
$(document).ready(function() {
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').slideUp();
$(this).next('dropdown-menu').slideDown();
);
});
The advantage to this is that it will close any other open dropdown menus and then open the one that has been clicked.
It can be further improved to check if the .dropdown-toggle that was clicked is currently open.
The issue is that the handler you're registering will select anything with the class dropdown-menu, then toggle it, because you've written:
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});
As you say, you don't want to toggle everything with that class, you just want to toggle what was clicked, so you should use the event parameter from click() to find what's been clicked, and select the relevent dropdown-menu to toggle:
$('.dropdown-toggle').click(function(e) {
$(e.target).next('.dropdown-menu').toggle();
});
I was able to do it with this HTML
Dropdown 1<span class="caret"></span>
<ul class="dropdown-menu dd1" role="menu">
<li>Item 1</li>
<li>Item 2</li>
</ul>
Dropdown 2 <span class="caret"></span>
<ul class="dropdown-menu dd2" role="menu">
<li>Item 1</li>
<li>Item 2</li>
</ul>
and this jQuery:
$(".dropdown-toggle").click(function(e) {
$(this).next('.dropdown-menu').toggle();
});
NOTE:
just the the JS did not work for me.
data-toggle, bootstrap seems to use this to identify which <ul> to toggle based on class name.
used that in combination with Paul Roub's answer to override the default behavior.
As the title, I need to create an html tag and if the tag is hidden by the edge of the browser, it will automatically show back on the opposite side to no longer be hidden by the other. For example, it's like the options of facebook status:
http://i.imgur.com/RR8poBf.png
Because I don't know how to explain it to everybody to understand, so I had captured a photo here: http://i.imgur.com/SwpePxp.png
This is html content:
<div class="status-options">
<span class="status-options-list btn btn-default glyphicon glyphicon-chevron-down"></span>
<ul class="u-1">
<li>Option 1 aaaaaaaaaaaaaaaa</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
Any suggestions for a workaround?
I'm currently setting up a menu including sub menu, built on Wordpress categories. Basically, I'm retrieving all the top level categories, and then build a submenu on each, with all the posts from that parent category.
So the structure looks like this :
<ul class="menuCat">
<li> lifestyle
<ul class="show-hide">
<li>Article #7</li>
<li>Article #5</li>
<li>Article #3</li>
</ul>
</li>
<li> musique
<ul class="show-hide">
<li>Article #8</li>
<li>Article #7</li>
<li>Article #2</li>
<li>Article #1</li>
<li>Article #3</li>
</ul>
</li>
</ul>
<div id="content">...
The sub menus are set to display:none. When a category gets clicked, the submenu ul appears (using jQuery toggle) under the main menu. I'm running it locally so I can't give you a live example, but the way it works is the same as when you hit the "categories" link here : http://wpshower.com/demo/?theme=imbalance.
My problem is that with this structure and for what I want to visually achieve (c.f previous url), I don't see any other option that putting the submenu block in an absolute position. But if I do so, I need to push the rest of the content down, when a menu is triggered. What I've tried so far, is to set a margin-top based on the height of the currently viewed submenu. Unfortunately, neither height or outerHeight could help me...
Any ideas ?
Thanks!
Can you go into more detail about why you need to position absolute? Looks to me like you could achieve what you want by having all your submenus statically positioned below the top level menu, using jQuery to ensure only one is shown at a time.
By having them statically positioned the submenu will push the content below it down when it expands, and as long as all but one submenu is always set to display: none; you won't even know it's there.
For this to work however, you'll need to change the structure of your html though. The submenu items will need to be in a div below the top level menu list, not within it.
<ul class="menuCat">
<li> lifestyle
</li>
<li> musique
</li>
</ul>
<div id="submenu-container">
<ul class="show-hide lifestyle">
<li>Article #7</li>
<li>Article #5</li>
<li>Article #3</li>
</ul>
<ul class="show-hide musique">
<li>Article #8</li>
<li>Article #7</li>
<li>Article #2</li>
<li>Article #1</li>
<li>Article #3</li>
</ul>
</div>
<div id="content"></div>
$(function () {
$('.menuCat > li').click(function (e) {
var target = $('.show-hide.' + e.target.title);
$('.show-hide').not(target).hide();
target.toggle();
});
});
ul.menuCat li {
display:inline-block;
vertical-align: top;
}
ul.show-hide {
display: none;
background-color:lightgrey;
}
#content {
height: 200px;
width: 100%;
background-color: red;
}
For an example see this demo: http://jsfiddle.net/ijoukov/PCgxR/
Some news, I think I can't modify the HTML structure because the submenus are built in the same time as the parent list-item, within the 'start_el' wordpress function. That function gets called for each category link in the menu.