all,
I'm having an issue when using the panelbar and animation. whe it expands, it 'jumps' a little at the bottom. My content inside the panel does have padding/margin at the bottom, which i need there to create separation. Anyone know how to make it quit jumping while still have padding/margin at the bottom of the content inside it?
We also had this trouble with panelBar, and we solved it by adding css rule to a content in panelBar like this:
html:
<ul data-role="panelbar" >
<li>
<span><h3>Some text</h3></span>
<ul class="category-content>
<li> Some item </li>
</ul>
</li>
</ul>
css:
.category-content {
width: 100%;
}
Related
Hello I am relatively new to QA automated web testing and I try to use SO as a last resort.
That being said I am having issues selecting a choice from a drop down menu in our web app.
Here is the following code:
<div id="edit-main-user-role-wrapper" class="form-item">
<select id="edit-main-user-role" class="form-select my-dropdown ahah-processed" name="main[user_role]" style="display: none;"></select>
<div class="newListSelected" style="position: static;">
<span class="selectedTxt">
Student
</span>
<ul class="newList" style="top: -136px; height: 136px; left: 0px; display: none;">
<li>
<a class="" href="JavaScript:void(0);"></a>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
When I inspect the drop down icon with Firefox inspect element it directs me to this line in the code: span class="selectedTxt"
I have tried accessing the list by id, class, xpath, and css all to no avail.
Here are some of my past attempts:
#browser.div(:class => 'form-item').select_list(:text => 'Student').fire_event ("on click")
#browser.select_list(:xpath, menu).option(:text, option).click
An element with a select tag should only be meaningful if there are elements with option tags nested inside it. Often these pages have a lot of extra javascript in them to give context.
For dropdowns that don't follow the select/option pattern, you want to click on the element that drops down the list, and then click on the element you want that becomes visible as a result.
This is what eventually worked for me:
#browser.span(:class, "selectedTxt").click # to make the list visible
#browser.element(:xpath, "#{xpath}").click # click on the specified xpath
I know this may not be the most elegant answer, but it works!
not sure if you're still looking for answers, but either of these worked for me:
#browser.select_list(:id => "you_leaving_us").option(:text => "Other").select
#browser.select_list(:id => "you_leaving_us").option(:value => "8").select
Instead of li's, I had options. Hope it works
So i'm using the jQuery waypoints plugin for the navigation of a single page site
Right now it looks like this:
<div class="navigation">
<ul id="navi">
<li data-slide="1">DC3</li>
<li data-slide="2">THE ABOUT</li>
<li data-slide="3">THE WORK</li>
<li data-slide="4">THE CLIENTS</li>
<li data-slide="5">THE WHO</li>
<li data-slide="6">CONTACT</li>
</ul>
and each data-slide moves to a separate div like this:
<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio=".5">
What I want to do is use the same navigation on a second page, that will target each data-slide div on teh original page. Is there a way to do this?
A very simple solution is to used named anchors. In the HTML, next to each element you want to target add a new anchor element like <a id="slide"></a> and then you can link to that anchor's position on the page by using a fragment in your URL like so example.html#slide.
I'm trying to do a vertical menu with dropdowns that can be activated by an arrow toggle, while still keeping the top level link active and clickable. I'm using a custom CMS so I have some constraints as far as how I can make this work.
HTML
<ul class="topnav">
<li class="tn_first">
<span></span><a class="topmenu" href="/default.asp">Home</a>
</li>
<li class="tn_mid">
<span></span><a class="topmenu" href="/listings.asp">My Listings</a>
<ul class="subnav">
<li class="sn_first">
<a class="submenu" href="#">Listing 1</a>
</li>
<li class="sn_mid">
<a class="submenu" href="#">Listing 2</a>
</li>
<li class="sn_last">
<a class="submenu" href="#">Listing 3</a>
</li>
</ul>
</li>
<li class="tn_last">
<span></span><a class="topmenu" href="/links.asp">System Pages</a>
<ul class="subnav">
<li class="sn_first">
<a class="submenu" href="#">Page 1</a>
</li>
<li class="sn_mid">
<a class="submenu" href="#">Page 2</a>
</li>
<li class="sn_last">
<a class="submenu" href="#">Page 3</a>
</li>
</ul>
</li>
</ul>
So I've got a pretty straightforward UL LI menu system. I've added to the template of the top level nav a span tag, which I wanted to use as a toggle switch. The span can be changed to anything, it's just what I have in there currently.
The issue I've run into is that given this is a template system, I have the option of putting the span in, but don't have the option to show it conditionally based on whether ul.subnav exists in the same li. So I need some way of applying display:block to the ones that actually meet this condition, then I'll just display:none the other spans by default.
I tried using this solution and it did work to a point, but it doesn't work with multiple dropdowns, it only seems to work if you have a single instance of a dropdown in your menu structure.
jQuery Toggle Dropdown Menu
and
http://jsfiddle.net/hXNnD/1/
Javascript
jQuery(document).ready(function () {
var subMenu = jQuery("li ul li");
var linkClick = jQuery("ul li").filter(":has(ul)");
subMenu.hide();
linkClick.click(function (e) {
e.preventDefault();
subMenu.slideToggle("fast");
});
});
I created another example that has 2 sub ULs so you can see where the code is falling down.
http://jsfiddle.net/BxsEX/
Hide with CSS your spans and go for: $('.topnav li:has(ul) span').show();
http://jsbin.com/ujoqek/1/edit
CSS:
.topnav li span{ display:none; }
jQ:
var arrow = ['▼','▲'];
$('.topnav li:has(ul) span').show().html( arrow[0] ).data('a',0);
$('.topnav li > ul').hide();
$('.topnav span').click(function(){
$(this).closest('li').find('ul').slideToggle();
var arrw = $(this).data('a');
$(this).html( arrow[++arrw%2] ).data('a', arrw);
});
I think this is all you wanted. I may be wrong.
$('li').each(function(){
//if we can find a UL with the class of subnav within our LI
if($(this).find('ul.subnav').length){
//find the span within this LI and give it a display block
$(this).find('span').css('display', 'block')
}else{
//otherwise, hide the span.
$(this).find('span').css('display', 'none')
}
});
We have setup the twitter bootstrap dropdown to work on hover (as opposed to click [yes we are aware of the no hover on touch devices]). But we want to be able to have the main link work when we click it.
By default twitter bootstrap blocks it, so how can we re-enable it?
Just add disabled as a class on your anchor:
<a class="dropdown-toggle disabled" href="http://google.com">
Dropdown <b class="caret"></b></a>
So all together something like:
<ul class="nav">
<li class="dropdown">
<a class="dropdown-toggle disabled" href="http://google.com">
Dropdown <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
</ul>
Since there is not really an answer that works (selected answer disables dropdown), or overrides using javascript, here goes.
This is all html and css fix (uses two <a> tags):
<ul class="nav">
<li class="dropdown dropdown-li">
<a class="dropdown-link" href="http://google.com">Dropdown</a>
<a class="dropdown-caret dropdown-toggle"><b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
</ul>
Now here's the CSS you need.
.dropdown-li {
display:inline-block !important;
}
.dropdown-link {
display:inline-block !important;
padding-right:4px !important;
}
.dropdown-caret {
display:inline-block !important;
padding-left:4px !important;
}
Assuming you will want the both <a> tags to highlight on hover of either one, you will also need to override bootstrap, you might play around with the following:
.nav > li:hover {
background-color: #f67a47; /*hover background color*/
}
.nav > li:hover > a {
color: white; /*hover text color*/
}
.nav > li:hover > ul > a {
color: black; /*dropdown item text color*/
}
For those of you complaining about "the submenus don't drop down", I solved it this way, which looks clean to me:
1) Besides your
<a class="dropdown-toggle disabled" href="http://google.com">
Dropdown <b class="caret"></b>
</a>
put a new
<a class="dropdown-toggle"><b class="caret"></b></a>
and remove the <b class="caret"></b> tag, so it will look like
<a class="dropdown-toggle disabled" href="http://google.com">
Dropdown</a><a class="dropdown-toggle"><b class="caret"></b></a>
2) Style them with the following css rules:
.caret1 {
position: absolute !important; top: 0; right: 0;
}
.dropdown-toggle.disabled {
padding-right: 40px;
}
The style in .caret1 class is for positioning it absolutely inside your li, at the right corner.
The second style is for adding some padding to the right of the dropdown to place the caret, preventing overlapping the text of the menu item.
Now you have a nice responsive menu item which looks nice both in desktop and mobile versions and that is both clickable and dropdownable depending on whether you click on the text or on the caret.
I'm not sure about the issue for making the top level anchor element a clickable anchor but here's the simplest solution for making desktop views have the hover effect, and mobile views maintaining their click-ability.
// Medium screens and up only
#media only screen and (min-width: $screen-md-min) {
// Enable menu hover for bootstrap
// dropdown menus
.dropdown:hover .dropdown-menu {
display: block;
}
}
This way the mobile menu still behaves as it should, while the desktop menu will expand on hover instead of on a click.
An alternative solution is just to remove the 'dropdown-toggle' class from the anchor. After this clicking will no longer trigger the dropwon.js, so you may want to have the submenu to show on hover.
You could use a javascript snippit
$(function()
{
// Enable drop menu clicks
$(".nav li > a").off();
});
That will unbind the click event preventing url changing.
Here's a little hack that switched from data-hover to data-toggle depending the screen width:
/**
* Bootstrap nav menu hack
*/
$(window).on('load', function () {
// On page load
if ($(window).width() < 768) {
$('.navbar-nav > li > .dropdown-toggle').removeAttr('data-hover').attr('data-toggle', 'dropdown');
}
// On window resize
$(window).resize(function () {
if ($(window).width() < 768) {
$('.navbar-nav > li > .dropdown-toggle').removeAttr('data-hover').attr('data-toggle', 'dropdown');
} else {
$('.navbar-nav > li > .dropdown-toggle').removeAttr('data-toggle').attr('data-hover', 'dropdown');
}
});
});
This can be done simpler by adding two links, one with text and href and one with the dropdown and caret:
Posts
<ul class="dropdown-menu navbar-inverse bg-inverse">
<li>Create</li>
</ul>
Now you click the caret for dropdown and the link as a link. No css or js needed.
I use Bootstrap 4 4.0.0-alpha.6, defining the caret is not necessary, it appears without the html.
I know there are many great helpers on this site, I am still learning jquery, but I love the functionality behind it. Recently I created a megadrop down menu, but I started getting a lot of recommendations to use the hoverintent plugin instead of using show/hide. I am lost trying to change my coding around to get it to work...PLEASE HELP...THANKS AS ALWAYS GUYS AND GALS!!!
OH and I think that changing to hoverintent will stop the overflows from building up too, but I do not think my code is working to stop that from happening?
My site...only the About DKE dropdown works...
http://www.nestudiosonline.com/test.php
my jquery script...
$(document).ready(function() {
// shows the hidden div in the list
$('#dave').mouseover(function() {
$('#aboutdke').show('slow');
});
// hides the hide the div again for that list item
$('#dave').mouseleave(function() {
$('#aboutdke').hide('slow');
});
});
Here is my html....
<div id="pagelinks">
<ul id="menu">
<li class="mega"><a class="dkeorg" href="#">DKE.ORG</a></li>
<li class="megamenu" id="dave"><a class="links" href="#">ABOUT DKE</a><div id="aboutdke">
(about dke div content)
</div>
</div></li>
<li class="megamenu"><a class="links" href="#">ALUMNI</a></li>
<li class="megamenu"><a class="links" href="#">UNDERGRADUATES</a></li>
<li class="megamenu"><a class="links" href="#">EVENTS</a></li>
<li class="megamenu"><a class="links" href="#">MULTIMEDIA</a></li>
<li class="megamenu"><a class="links" href="#">SHOP DKE</a></li>
</ul>
</div>
Two things before I get to the real answer:
You're missing the opening body tag after your doctype.
Only lowercase tags are valid in XHTML.
The events are only triggered for #aboutdke because that's the one element you have hardcoded into the event callback functions. Try something more abstract:
$('#menu > li').mouseover(function() {
$(this).children().is('div').show('slow');
});
$('#menu > li').mouseleave(function() {
$(this).children().is('div').hide('slow');
});
This should (if memory serves) work for every menu item.