Using JQuery Mobile 1.4.5, it appears that my external panel cannot hold a style!
Conventional wisdom states that .enhanceWithin(); should be called to update the contents of an element, but this does not appear to give good results with the current version of JQM.
Fiddle to demonstrate.
Has this been updated? Every answer I have found on the topic of dynamic elements losing their style is using an older version of JQM.
By default jQM 1.4.x only has 'A' and 'B' themes. You have set theme to 'C' which does not exist unless you add it to the CSS. For the fiddle, change it to:
<div data-role="panel" id="menuPanel" data-theme="b">
<ul data-role="listview" data-theme="c" data-dividertheme="b">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
Updated FIDDLE
Related
in my site i have menu and sub menu
my problem when i focus by tab to the menu, the menu opened like i hovered the menu by mouse.
but when i continued to the sub menu elements with tab the menu closed.
how can i keep the menu open if some of sub element is focused.
of course i can do it via javascript, but i want to know if i can do it with css only.
here is example (try go to links with 'tab' )
li.main{
float:left;
width:200px;
}
li .sub{
display:none;
}
li:hover .sub{
display:block
}
li.main:focus .sub{
display:block
}
<ul>
<li class="main" tabindex="0">
First menu
<div class='sub'>
<ul>
<li>First Link </li>
<li>Second Link </li>
</ul>
</div>
</li> <li class="main" tabindex="0">
Second menu
<div class='sub'>
<ul>
<li>Third Link </li>
<li>Forth Link </li>
</ul>
</div>
</li>
</ul>
With the current possibilities of CSS, you can't, as it was discussed in a lot of questions before (see accessible css dropdown menu for instance).
First of all, you can't use "display:none" in such approach because the link can't be accessed using the next link shortcut (tab key in most of the browsers implementation).
Solutions which work will imply solutions like positioning out of screen. It will restrict the view on screen to the current link as there is no parent() selector in CSS, or you might use a trick like in the above thread (which will work in some browsers and limit the width of the dropdown part).
But no matter the solution, it will not resolve the main problem : a dropdown menu is not the best way to achieve accessibility.
For instance, people with disabilities using eye tracking software will never benefit of a dropdown menu. Neither will people using tablet.
It is always something difficult to use, difficult to understand : What if I click on the category link? Does it open the category main page, or does it open the submenu?
If you really want an accessible menu, do not use a dropdown menu
Ran into this 'funny' issue today. I have an asp.net mvc application, with a twitter bootstrap design template, which up until now has been working fine. However, when I added some #Scripts.Render("...") statements to the top of my view (Not shared layout file, but view) it seems to alter my layout!
View:
#Scripts.Render("~/Scripts/jquery.signalR-1.1.2.js")
#Scripts.Render("~/signalr/hubs")
#Scripts.Render("~/Scripts/Stimline/connector.js")
<div class="span12">
<legend>Fleet List</legend>
<div class="row-fluid">
...
</div>
</div>
Whenever the three script statements at the top is added to my .cshtml file, it seems to move the entire div-part over to the right, so that it aligns with the edge of my browser. Removing the statements again causes it to go back to normal, adding the margin supposed to be there by default from bootstrap.
I have not done any changes to the bootstrap css.
Has anybody seen this, or at least something similar, before?
Here's how it looks with the #Render.Scripts statement:
And here's without it:
If you use the fixed header bar as a reference for right edge, you'll see that the table is aligned all the way to the right in one image, and correctly "spaced" from the edge in the other.
I recently ran into a similar issue where I was float li elements for a menu. I had each element on it's own line in the html, so a space was rendered between each item.
<ul>
<li style="float:left">Item 1</li>
<li style="float:left">Item 2</li>
<li style="float:left">Item 3</li>
</ul>
changed to
<ul>
<li style="float:left">Item 1</li><li style="float:left">Item 2</li><li style="float:left">Item 3</li>
</ul>
In your situation moving the script to the bottom of the page would be best to follow other best practices, but you could also remove the whitespace to get the same result.
im using bootstrap pills as my navigation bar.problem is it is not showing the curent active pill with blue color background(like bootstrap)
here is my code
<div style="margin-left: 15px;margin-bottom: 15px;margin-top: 10px;">
<ul class="nav nav-pills">
<li class="active">
Home</li>
<li class="">Projects</li>
<li class="">Employee</li>
<li>Forum</li>
</ul>
</div>
the output is here
only the home pill is focused
Add this code inside script tags:
$(document).ready(function(){
$(".nav-pills li").click(function(){
$(".active").removeClass("active");
$(this).addClass("active");
});
});
DEMO
To give a full answer based on the comments, your JSFiddle works exactly as expected. The item with the .active class will have the blue background for the pill.
However what I believe you expect to happen is when you click on a link that the pill will automatically become active, this is not how it works.
You will need to generate the menu on the fly and assign the active class during generation or on each page use JS to assign the active class to the correct menu list item. For ease of use I would suggest assigning ID's to the list items so you can do the following:
So say you click on the second menu item, on the Projects.php page you could have the following jquery.
$('#project').addClass("active");
Assuming you gave the menu items IDs.
I have an unordered list that I'm using as a menu. It has a nested list in order to accommodate sub-items:
<ul class="menu" id="sub_menu">
<li class="item452">About Us</li>
<li class="item453">Leadership</li>
<li id="current" class="parent active item454">Press Room
<ul>
<li class="item455">Press Releases</li>
</ul>
</li>
<li class="item456">Community Resources</li>
<li class="item457">Careers</li>
</ul>
The nested list item is not displaying (the Press Releases item), and when I do an Inspect Element, this is what I get:
Can anyone tell my why the element.style of display:none is overriding the matched css rule of display:block?
*EDITED - !important added; no change**
Inline styles override stylesheet declarations. "element.style" shows you the current inline styles. These were probably set via JavaScript.
It must be added via javascript.
Have a look at your javascript file, and look for:
.css
or
.style
It should be one of the above that is modifying the element and therefore overwriting your CSS.
Here's the jQueryTools demo page on how to use their tooltips: http://flowplayer.org/tools/demos/tooltip/any-html.html
Basically, if you want to have a tooltip that contains HTML, you have to put that HTML in a div and place it directly after the trigger element like so:
<a href="http://www.stackoverflow.com" id="link1">
<div class="tooltip">
<img src="img/SOicon.png">stack<span style="font-weight:bold">overflow</span>
</div>
But my trigger element isn't <a href="http://www.stackoverflow.com" id="link1">. It's an <li>, and my guess is that I can't put anything other than an <li> in the parent <ul>. In other words, I can't place the after the trigger element like I'm supposed to.
I've come up with a way to fix this (scrapping the unordered list with floated <li>s and switching over to floated divs) but figured I should probably consult the experts (you guys, of course!) before I got started on fixing the problem.
How would you guys fix this?
It's no problem to use another element outside your structure as tooltip target !
<ul id="mylist">
<li title="List Point 1">List Point 1</li>
<li title="List Point 2">List Point 2</li>
<li title="List Point 3">List Point 3</li>
</ul>
<!-- many other HTML ELements -->
<div id="mylist_tooltip"></div>
At the end put in your jQuery's ready() :
jQuery("#mylist li").tooltip({
// target div
tip: '#mylist_tooltip'
});
Read more in the docu ;-)