I am trying to figure out how to not override the active link with the hover.
<style>
.primary-nav-wrapper nav a:active, .primary-nav-wrapper nav .active>a {
border-bottom: 3px solid #4F579D;}
.primary-nav-wrapper nav a:hover:not([active]) {border-bottom: 3px solid #DFE1E5;}
</style>
I don't have your code, so I can't help you to the fullest, but I will try.
I think your CSS has a fundamental problem. I think you want this:
On hover, give the a a grey border.
If active, give the a a blue border.
If somebody hovers and activates the a, it should still be blue.
If that is your problem, here is a working code:
.primary-nav-wrapper nav a:hover {
border-bottom: 3px solid #DFE1E5;
}
.primary-nav-wrapper nav a:hover:active {
border-bottom: 3px solid #4F579D;
}
<div class="primary-nav-wrapper">
<nav class="active">
<a>test</a>
</nav>
<nav class="active">
<a>test</a>
</nav>
<nav class="active">
<a>test</a>
</nav>
</div>
Related
I cannot seem to create a paper button that allows me to use it as a selector for closing a paper-dialog. I have a feeling this is a CSS issue, but I could be wrong. The button gets created after all of the elements and when you switch tabs, it essentially re-creates the button into a new div. Below is my code for the CSS, Dialog setup, and the Dart code. Please let me know if you need more information from me.
Dart and markup:
PaperButton button;
button = new PaperButton();
button.label = "Close";
settingsDialog.children.add(button);
settingsDialog.autoCloseDisabled = true;
settingsDialog.closeSelector = "paper-button";
<paper-dialog id="properties" style='background-color:#fbfbfb; margin: 0 auto; border-style: double; border-color: #FEB33F; position:fixed;'>
<paper-tabs id="Tabs" noink="true" selected="{{page}}" style='width:250px; height:30px; color:#333333;'>
<paper-tab id="sTab">S</paper-tab>
<paper-tab id="uTab">U</paper-tab>
</paper-tabs>
<core-pages selected="{{page}}">
<div id="s">
<!--Page one -->
</div>
<div id="u">
<!--Page two -->
</div>
</core-pages>
</paper-dialog>
CSS:
paper-button
{
margin-top:7%;
float:right;
margin-bottom: -15px;
background-color:#f0f0f0;
border-top: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
border-left: 1px solid #f0f0f0;
width:65px;
height:45px;
position:fixed;
margin-left:25%;
}
If you use a paper-button you should use paper-button as selector. Why do you think button is a valid selector for a paper-button?
When I click on my links, they do not go anywhere; I clicked on "about Us" , nothing. I looked at Lucas Green's answer to anc1revv, but I'm still drawing a blank. I appreciate any ideas. Also the links do not turn yellow when I hover. I know it's something minor.
Sorry, I meant turn orange when I hover.
Thank you
<body>
<div id="container">
<div id="header">
<img class="logo" src="images/green-light.jpg" alt="Green Light Data Technologies" />
<img class="header-star-left" src="images/arrow2.jpg" alt="All Systems Go" />
<img class="header-star-rt" src="images/arrow2.jpg" alt="All Systems Go" />
<h1>Green Light Data Technologies</h1>
<h2>Keeping All Systems GO!</h2>
</div><!--/#header-->
<div id="nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Contact Us</li>
</ul>
</div><!--/#nav-->
<div id="content-home">
<h1>Welcome to Green Light Data Technologies!</h1>
<p>Thank you for visiting our site. Here you will find the latest cabling products, accessories and expert advise on their use. Our employees are well trained, product knowledgeable and are pleased to assist you.
Our website is designed to be easy to navigate and easy to learn more about Green Light product lines that may be of interest to you.
We are committed to supplying excellent electronic components that will meet your needs and to the development of unique future electronic components that will open new vistas in electronics. We actively pursue the improvement of existing products, the strengthening of newly developed products.</p>
</div><!--/#content-->
</div><!--/#container-->
</body>
</html>
/* MAIN NAVIGATION
----------------------------------- */
#nav {
float: left;
width: 900px;
height: 53px;
padding: 0;
margin: 0;
}
#nav ul {
list-style: none;
padding: 0;
margin: 205px;
margin-left: 1em;
}
#nav ul li {
float: left;
line-height: 53px;
padding: 0;
margin: 0 50px 0 0;
}
#nav ul li a {
font-family: arial, helvetica, sans-serif;
font-size: 1.4em;
font-weight: bold;
/*color: #fff;*/
color: #fff;
text-decoration: none;
}
#nav ul li a:hover {
position: relative;
bottom: -5px;
background-color: orange;
border-bottom: 2px dotted #fff;
}
Its probably your browser's popup blocker preventing the _blank link opening a new popup. look at the top (for firefox and chrome) or bottom (for IE) for notifications to allow popup.
orange hover links are working as expected.
check this JSFiddle I added this:
body {
background-color: #999999;
}
so your menu is visible.
I'm having trouble changing the background on a list view in jqm... I can't change it to tranparent. What is the jqm class inheritance structure for this?
I had a lot of problems with this. There are some high level class inheritances to overcome and they are not easily found. Here is an example with jquery mobile 1.40. This is a sample allowing you to create a fully custom listview.
The trickiest ones are the ones that deal with the first-child and the button li.ui-first-child a.ui-btn - it took me a few hours to track this done. Hopefully this helps others as 1.40 is now final.
The following example is a very common necessity creating a custom menu on an overlay panel.
<ul data-role="listview" class="primary-menu">
<li data-icon="false">
<a href="#product" class="ui-btn ui-nodisc-icon ui-btn-icon-left ui-icon-myicon" >
View Products </a>
</li>
</ul>
/* Menu Classes */
.ui-btn-close-panel {
background-color:#b4316c !important;
}
ul.primary-menu {
margin-top:10px;
border-top:none;
}
ul.primary-menu li a{
font-size: 1em;
line-height: 1.3;
color:#ffffff !important;
font-family: 'ramblabold', Arial, sans-serif;
background-color:transparent !important;
border-bottom:1px solid #f2e3ea !important;
background-image:none !important
}
ul.primary-menu.ui-listview li.ui-first-child a.ui-btn {
color:#ffffff !important;
background-color:transparent !important;
border-bottom:1px solid #f2e3ea !important;
background-image:none !important
}
ul.primary-menu.ui-listview li a.ui-btn {
color:#ffffff !important;
background-color:transparent !important;
border-bottom:1px solid #f2e3ea !important;
background-image:none !important
}
I'm a bit of a JQuery Mobile Noob and I've been trying to search for an answer to this, but to no avail. I've created a ui-navbar with five custom data icons. Problem is when I select one of the five links, the buttons to the left of the selected link take on the selected icon. Also, what should be the right arrow on the ul-listview element, also takes on the selected icon albeit it's hard to see. Had to use Firebug to expand that in order to see if's the selected data-icon.
Here's the code I'm using for the navbar in my footer:
<div data-role="footer">
<div data-role="navbar" class="nav" data-grid="d">
<ul>
<li>Programas</li>
<li>Noticias</li>
<li>Radio</li>
<li>Eventos</li>
<li>More</li>
</ul>
</div>
</div>
And some of the CSS:
.nav .ui-btn .ui-btn-inner {
padding-top: 40px !important;
}
.nav .ui-btn .ui-icon {
width: 45px!important;
height: 35px!important;
margin-left: -24px !important;
box-shadow: none!important;
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
-webkit-border-radius: none !important;
border-radius: none !important;
}
#programas .ui-icon {
background-image: url(images/nav.png);
background-position: 0 0;
background-repeat: no-repeat;
}
Any idea why this might be happening? It has to be something with my styles I would think.
don't use the name ui-icon only, instead use ui-icon-something, see also the docu about custom icons
Custom Icons
To use custom icons, specify a data-icon value that has a unique name
like myapp-email and the button plugin will generate a class by
prefixing ui-icon- to the data-icon value and apply it to the button:
ui-icon-myapp-email.
You can then write a CSS rule in your stylesheet that targets the
ui-icon-myapp-email class to specify the icon background source. To
maintain visual consistency with the rest of the icons, create a white
icon 18x18 pixels saved as a PNG-8 with alpha transparency.
In this example, we're just pointing to a standalone icon image, but
you could just as easily use an icon sprite and specify the
positioning instead, just like the icon sprite we use in the
framework.
.ui-icon-myapp-email {
background-image: url("app-icon-email.png");
}
example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.0.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
<style>
.ui-icon-taifun {
background-image: url("taifun.png");
}
.nav .ui-btn .ui-btn-inner {
padding-top: 40px !important;
}
.nav .ui-btn .ui-icon-taifun {
width: 45px!important;
height: 35px!important;
margin-left: -24px !important;
box-shadow: none!important;
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
-webkit-border-radius: none !important;
border-radius: none !important;
}
#programas .ui-icon-taifun {
background-image: url(taifun.png);
background-position: 0 0;
background-repeat: no-repeat;
}
</style>
<title>Test</title>
</head>
<body>
<div data-role="page">
<div data-role="content">
<div data-role="collapsible" data-collapsed-icon="taifun" data-expanded-icon="taifun" data-inset="false">
<h2><img src="favicon.ico"> Pets</h2>
<ul data-role="listview">
<li>Canary</li>
<li>Cat</li>
<li>Dog</li>
</ul>
</div><!-- /collapsible -->
<div data-role="collapsible" data-collapsed-icon="taifun" data-expanded-icon="taifun" data-inset="false">
<h2><img src="favicon.ico"> Farm animals</h2>
<ul data-role="listview">
<li>Chicken</li>
<li>Cow</li>
<li>Duck</li>
</ul>
</div><!-- /collapsible -->
</div>
<div data-role="footer">
<div data-role="navbar" class="nav" data-grid="d">
<ul>
<li>Programas</li>
<li>Noticias</li>
<li>Radio</li>
<li>Eventos</li>
<li>More</li>
</ul>
</div>
</div>
</div>
</body>
</html>
screenshot
How can I display both left, right data-icons for a button in jquerymobile.
Thanks in advance.
Thanks,
nehatha
In jQuerymobile documentation, you can fix icon position to one area. If you want to display both (left and right), customized CSS and JS are needed.
data-iconpos="left"
data-iconpos="right"
data-iconpos="top"
data-iconpos="bottom"
Try this in your header part:
<div data-role="header">
Home
<h1>Add Contacts</h1>
Search
</div>
Create a grid inside your button, then add an image in the left column then css style it to look the same
<a data-role="button" data-transition="slide" data-theme="b" href="#"
data-icon="arrow-r" data-iconpos="right">
<div class="ui-grid-b">
<div class="ui-block-a">
<img src="image.png" class="iconleft"/>
</div>
<div class="ui-block-b">
Button
</div>
<div class="ui-block-c">
</div>
</div>
</a>
CSS:
.iconleft {
position: absolute;
top: 50%;
margin-top: -9px;
left: -5px;
width: 18px;
height: 18px;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.4);
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.4);
box-shadow: 0 1px 0 rgba(255,255,255,.4);
background-color: #666;
background-color: rgba(0,0,0,.4);
background-image: url(images/icons-18-white.png);
background-repeat: no-repeat;
-webkit-border-radius: 9px;
border-radius: 9px;
}
You can always do it the other way around, with the left being the dataicon and right being image but it doesn't really matter.
See my working example here or this fiddle