I am currently struggling with sIFR and a:hover.
My problem site is hosted at http://irene.huditsch.info
I have the following HTML code:
<body id="irene-huditsch-info">
<div id="header">
<h1>Irene Huditsch</h1>
<div id="top-nav">
<ul>
<li id="impressum">
Impressum
</li>
<li id="kontakt">
Kontakt
</li>
</ul>
</div>
...
My sIFR-config.js looks like:
sIFR.replace(braganza, {
selector: 'div#top-nav a',
css: '.sIFR-root { background-color: transparent; color: #FFFFFF; line-height: 13px; font-size: 11px; text-decoration: underline; cursor: pointer; } .sIFR-root:hover { color: #592b02; }',
wmode: 'transparent'
});
But the hover doesn't take effect. I tried different solution with no success either.
When I write
sIFR.replace(braganza, {
selector: 'div#top-nav li',
css: 'a { background-color: transparent; color: #FFFFFF; line-height: 13px; font-size: 11px; text-decoration: underline; cursor: pointer; } a:hover { color: #592b02; }',
wmode: 'transparent'
});
(which seems logical to me), the list items are not rendered at all.
Could you please give me an advice how to do it correctly with the structure given?
Thanks,
Roman
Replacing the a directly will not work, since the Flash movie will only contain the link text and not the link itself.
Your second example should work, assuming you've removed the first attempt, however I see that on the page you're using .sIFR-root a as the CSS selector. That might be confusing Flash a little. Also, the background-color, line-height and cursor properties are not supported for a elements.
Related
I've got an issue and can't solve it easily because appears only in one case : when i'm on my page and i switch from landscape to portrait, on iOS.
My app is a Phonegap app using Angular and plugin device-orientation to make it working with my responsive CSS.
All is fine, except this part.
I've got an horizontal menu and i wan't user able to scroll it if there is overflow.
Here is my code :
CSS
nav.inline {
background: #e4eeef;
outline: 1px solid #e4eeef; /* Safari bug rendering */
overflow: hidden;
overflow-x: scroll;
text-transform: uppercase;
-webkit-overflow-scrolling: touch;
}
nav.inline ul {
list-style: none;
min-width: 102%;
padding: 0 2%;
width: 102%;
white-space: nowrap;
}
nav.inline ul li {
display: inline-block;
white-space: nowrap;
}
nav.inline ul a {
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
color: #4b8c95;
display: inline-block;
font-size: 1.7em;
font-weight: bold;
line-height: 80px;
margin: 0 0.7em;
}
nav.inline ul a.active {
border-bottom: 4px solid #4b8c95;
}
HTML
<nav class="fullwidth inline" ng-include="'partials/nav.html'"></nav>
And the partial associated
<ul data-snap-ignore="true">
<li><a ng-click="setTab('link1')">Link 1</a></li>
<li><a ng-click="setTab('link2')">Link 2</a></li>
...
</ul>
You can see "data-snap-ignore" because i'm using angular-snap.js for an other menu (left menu) and i don't wan't him to appear when i'm sliding this one (this part is working well).
Thanks for helping ;)
Yep, this sucks. It's a bug, AFAICT.
So far the only mechanism I've found to fix it is to toggle display from none to block on the container, like so:
var navElement = document.getElementsByTagName("nav")[0];
navElement.style.display = "none";
setTimeout ( function() { navElement.style.display = "block"; }, 0 );
Which *looks * horrible, in my opinion, but it does restore the scrolling ability.
Since, as far as I can tell, it never breaks if the elements within force the container to scroll, it should work to ensure that the container always scrolls, even if by a pixel or two.
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've got a autocomplete input on a form but the drop down list is not being styled correctly, it appears like a normal bulleted list of hyperlinks.
This is the rendered hidden list that the autocomplete creates:
<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-id-1" tabindex="0" style="display: none; top: 253px; left: 20px; width: 162px;">
<li class="ui-menu-item" role="presentation">
<a id="ui-id-10" class="ui-corner-all" tabindex="-1">Austria</a>
</li>
<li class="ui-menu-item" role="presentation">
<a id="ui-id-11" class="ui-corner-all" tabindex="-1">Australia</a>
</li>
<li class="ui-menu-item" role="presentation">
<a id="ui-id-12" class="ui-corner-all" tabindex="-1">Aust-Timor</a>
</li>
<li class="ui-menu-item" role="presentation">
<a id="ui-id-13" class="ui-corner-all" tabindex="-1">Austur-Kongo</a>
</li>
</ul>
So it looks like its got all the right style classes but if I look at the CSS in Chrome some of the classes are not be applied - namely ui-menu
element.style {
display: none;
top: 253px;
left: 20px;
width: 162px;
}
Matched CSS Rules
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
border-bottom-right-radius: 4px/*{cornerRadius}*/;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
border-bottom-left-radius: 4px/*{cornerRadius}*/;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
border-top-right-radius: 4px/*{cornerRadius}*/;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
border-top-left-radius: 4px/*{cornerRadius}*/;
}
.ui-widget-content {
border: 1px solid #aaaaaa/*{borderColorContent}*/;
background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/;
color: #222222/*{fcContent}*/;
}
.ui-widget {
font-family: Verdana,Arial,sans-serif/*{ffDefault}*/;
font-size: 1.1em/*{fsDefault}*/;
}
.ui-autocomplete {
position: absolute;
top: 0;
left: 0;
cursor: default;
}
.ui-front {
z-index: 100;
}
user agent stylesheetul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
Inherited from body
body {
color: #333;
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
}
How can I find out why some style classes are not being applied?
Have you included the JQuery UI javascript, and then setup the AutoComplete functionality?
On my site, the following jQuery javascript needs to be added to the bottom of the page where the autocomplete field is placed:
$(document).ready(function () {
$(":input[data-autocomplete]").each(function() {
$(this).autocomplete({ source: $(this).attr("data-autocomplete") });
});
});
Also ensure this code is executed after the load of the JQuery and JQuery UI JS files.
Nick
I'm trying to use just a single color in jQuery progressbar, but it fill the whole div.
Here's the problem, i just use these functions.
$(document).ready(function(){
$("#progressbar").css({ "background": '#FF0000' });
$("#progressbar").progressbar({ value: 10 });
});
http://jsfiddle.net/jtf7M/1/
How do i make this fill properly, step by step?
CSS file is missing. Add http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css to your resources and it will be ok.
Edit:
If you don't want to load whole CSS file, just add this code in your page http://jsfiddle.net/jtf7M/21/:
<style>
.ui-progressbar { height:2em; text-align: left; overflow: hidden; }
.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }
.ui-widget-content {
border: 1px solid #AAA;
background: white;
}
.ui-corner-all {
-moz-border-radius: 4px/*{cornerRadius}*/;
-webkit-border-radius: 4px/*{cornerRadius}*/;
-khtml-border-radius: 4px/*{cornerRadius}*/;
border-radius: 4px/*{cornerRadius}*/;
}
.ui-widget-header {
border: 1px solid #AAA/*{borderColorHeader}*/;
background: #CCC;
}
</style>
I think there is no jQuery ui lib load on that jsfiddle.
But you are doing right.
http://jqueryui.com/progressbar/#animated
My image sprite works fine as long as I delete my hover text links on the same css page. The hover in the image sprite and the hover in the text link style seem to be conflicting. How do I get the text link styles back? Do I use a separate css for the text link, will it still conflict?
HTML
><div id="page-bg"><img src="x" width="100%" height="100%" /></div>
<div id="container">
<div id="header1">
<ul id="navlist1">
<li id="login"></li>
<li id="getmail"></li>
<li id="quotebtn"></li>
</ul>
</div>
</div>
CSS
>body { color:#333; font-size: 9px; }
#page-bg {
position:fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#container {
position: relative;
background: #C35A26;
width: 900px;
font-family: Arial, Helvetica, sans-serif;
margin-top: 25px;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
}
#header1 {
width: 900px;
height: 232px;
position: relative;
background-image:url(x)
}
#navlist1 {position:relative;}
#navlist1 li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist1 li, #navlist1 a{height:44px;display:block;}
#login{left:0px;width:94px;}
#login{background:url('x') 0 0;}
#login a:hover{background: url('x') 0 -363px;}
#getmail{left:94px;width:93px;}
#getmail{background:url('x') -94px 0;}
#getmail a:hover{background: url('x') -94px -363px;}
#quotebtn{left:775px;width:125px;}
#quotebtn{background:url('x') -775px 0;}
#quotebtn a:hover{background: url('x') -775px -363px;}
a {
font-family: Arial, Helvetica, sans-serif;
font-size:0.75em;
color: #900;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #900;
}
**a:hover {
text-decoration: underline;
color: #F00;**
}
a:active {
text-decoration: none;
color: #F60;
I got it to work now. All I did was open a blank page and added css to the page properties for links and headers, etc., to see how they layed out the css and re-arranged my css to be like the one that dreamweaver makes as far as where the tags are in order. Anyway, it fixed the problem.