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?
Related
Ok here goes. the off Canvas does display the menu however i need it to function as a dropdown for the categories selected. What it does instead is just adds them to the menu just like a regular item.
i have tried using the zurb code and still get the same results
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
<!-- Close button -->
<button type="button" class="button large hollow float-right" data-close="offCanvas"><i class="fi-x large"></i></button>
<ul class="vertical menu">
<li>
Item 1
<ul class="vertical menu dropdown">
<li>Item 1A</li>
<li>Item 1B</li>
<li>Item 1C</li>
<li>Item 1D</li>
<li>Item 1E</li>
</ul>
</li>
<li>Item 1B</li>
</ul>
</div>
so instead of being able to click on item1 to open the dropdown all the other items (a to e) are already opened and stay that way. This all used to work in foundation 5
So am i missing something ?
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>
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.
Let's say that menu has the following structure:
<li class="parent-of-all">Parent
<ul class="sub-menu level-0">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4
<ul class="sub-menu level-1">
<li>Item 1.1</li>
<li>Item 1.2</li>
<li>Item 1.3
<ul class="sub-menu level-2">
<li>Item 2.1</li>
<li>Item 2.2
<ul class="sub-menu level-3">
<li>Item 3.1</li>
<li>Item 3.2</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
And this is how it looks like when styled (please note that nested sub-menus are position: absolute; left: 100%;).
Now the questions is - can I avoid it being pushed off the screen? I'm looking for a solution that Windows7 menus use (they never go off the screen). Is there some simple Javascript check? I think that doing just left: -100%; would work but under what conditions? I just need some idea and I can code that in Javascript :)
As far as i know, there is no way to do this check with CSS only. You will have to use javascript. The most straight forward approach would be binding mouseover/mouseout (or hover if you use jquery) to the items, then comparing the elements x-offset + width with window width.
With a pure CSS solution you could always alternate the position of the submenus. When the first was left positioned to appear right to its parent, the following (third) submenu could be positioned on the left and so on. Maybe you could even use the :nth-child-selector to do so.
Afterwards you can create exceptions for wider screens, just alternating the left position starting off the nth child submenu (using CSS media queries).
No, you need to use JavaScript in order to calculate positions
I'm using the JQTouch framework for building an iPhone app/WebPage. I have it working nicely, but i cannot make it scroll to the bottom of the page.
<body>
<div class="current">
<div class="toolbar">
<a class="back button" href="javascript:{}">back</a>
<h1>header</h1>
</div>
</div>
<ul id="myContent">
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
</ul>
<div id="myInput">
...a couple of input elements..& submit button
that results in the "myContent" being updated with another li
</div>
</body>
Basically I have a UL at the top of my page, that gets updated/added to via server events coming in. This works nicely, but i want to be able to scroll to the "myInput" div which is at the bottom. However, I can't find a way of achieving this, I'm either using libraries incorrectly, or missing a trick. Any ideas?
Cheers
Have you checked the size of your webview? I had this issue but it was because I set my webview height to 480 (so it was off the screen due to the navigation bar)