CSS :hover is not clearing when navigating to a new tab - javascript

I am developing a WCAG compliant website and we implemented links that navigate to a new tab by following the pattern suggested on the WCAG website.
Below is a working example of the issue: (Both Google and IE)
http://www.w3.org/WAI/WCAG20/Techniques/working-examples/G201/new-window.html
If you hover over the link and then click, the new tab appears. When you click back on the original tab, the hover remains open until you click somewhere.
I am not sure if this is a bug or by design, but what would be an appropriate WCAG method of clearing it. Using Javascript might work, but I am not familiar with how to do the hooks.
I was thinking about a transition on the hover that after x seconds, it fades away. Would that be okay for WCAG compliance?
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Pop-Up Warning</title>
<style type="text/css">
body
{
margin-left:2em;
margin-right:2em;
}
:focus
{
outline: 0;
}
a.info
{
position:relative;
z-index:24;
background-color:#ccc;
color:#000;
text-decoration:none
}
a.info:hover, a.info:focus, a.info:active
{
z-index:25;
background-color:#ff0
}
a.info span
{
position: absolute;
left: -9000px;
width: 0;
overflow: hidden;
}
a.info:hover span, a.info:focus span, a.info:active span
{
display:block;
position:absolute;
top:1em; left:1em; width:12em;
border:1px solid #0cf;
background-color:#cff;
color:#000;
text-align: center
}
div.example
{
margin-left: 5em;
}
</style>
</head>
<body>
<h1>Pop-Up Warning</h1>
<p>
This is an example of an <a target="_blank" class="info" href="http://example.com/popup_advisory_technique.html"><strong>External link</strong><span>Opens a new window</span></a>
</p>
</body>
</html>

Based on the comments, the target="_blank" attribute will open the page in a new tab, and keep the states in current tab unchanged. You can remove the target="_blank", and open the page in current tab. Or you can use javascript to clear the focus state in the click callback
<a target="_blank" onclick="this.blur();">Hello<span>Open in new window</span></a>

Related

iframe Placeholder Image

I'm trying to make an iframe that will display a static image, then load a webpage within the iframe when a user clicks on the placeholder image. It's for a virtual tour, so the image will display the instructions, then view the virtual tour (link) when clicked. I know how to change iframe links using buttons, but for this particular application a clickable image is preferred. I'm fairly inexperienced, so any help is much appreciated!
Just put the iframe in a div, and put the background on the div, then make the iframe transparent, but not its contents.
<!doctype html>
<html>
<head>
<style type="text/css">
.iframeframe { background-image: url("whatever.lol"); margin: 0; padding: 0; display: inline-block; }
iframe { width: 600px; height: 400px; }
</style>
</head>
<body>
<div class="iframeframe">
<iframe src="whatever.lol"></iframe>
</div>
</body>
</html>

JQuery SlideDown() is delaying second half of a word

I have a simple JQuery thing that activates when the page is ready. Two strings would slide down at different times.
The problem is that in the first string, only the first half of the word slides down but the second half is delayed for a split second.
Can someone tell me why?
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The KGV Connection</title>
<script src="../jquery-2.1.1.min.js"></script>
<style>
.header{
background-color:#007B4C;
width:1280px;
height:70px;
position:fixed;
left:0px;
top:0px;
z-index:10;
}
.body{
width:1267px;
position:relative;
left:-12px;
height:1010px;
background-color:#EDF0F5;
top:25px;
z-index:9;
}
.footer{
background-color:#007B4C;
width:1267px;
position:relative;
left:-12px;
height:200px;
top:25px;
z-index:9;
}
.message{
font-family:"MS PGothic";
width:1200px;
font-size:40px;
text-align:center;
position:relative;
left:50px;
color:#333333;
top:200px;
display:none;
}
.congratulations{
position:relative;
font-family:"MS PGothic";
width:300px;
left:450px;
top:200px;
color:#333333;
font-size:60px;
display:none;
}
</style>
</head>
<body>
<div class="header">
<img src="../Pictures/Logo.png" width="291" height="70" />
</div>
<div class="body">
<h1 class="congratulations">Congratulations!</h1>
<p class="message"><b>Your account has been successfully activated!</b></p>
</div>
<script>
$(document).ready(function(e) {
$(".congratulations").slideDown(400);
$(".message").delay(1000).slideDown(400);
});
</script>
<div class="footer"></div>
</body>
</html>
</body>
</html>
It is because the h1 element containing your string "Congratulations!" is smaller than it's rendered text and jQuery apparently applies the animation on the h1 element at first, which crops just a fraction of the string.
Either remove width property of .congratulations class or make it wider than the text.
I suggest you to use "inspect elemnt" tool in your browser to debug strange things like this.
The reason for CONGRATULATIONS to cut out while sliding is because of the width given for .congratulations in CSS.
The first half that slides will be equal to the width that is set. Reducing would keep the first part smaller and increasing would keep it larger.
Keeping the width:100% is the solution to your problem.
hi the problem comes from css class .congratulations
increase to width:500px //this will fix the problem with half word slide
This is pretty wild, slideDown is sliding down only the portion you specified in the width, 300px. The rest is displayed after the slideDown finishes.
Remove width from congratulations CSS class.

Position iframe to be above a footer section. Simple

I would like an iframe to be above a footer section that has some content.
I am a real beginner at this, but I was able to scrap together some code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Layout</title>
<style type="text/css">
body, html {
margin: 0; padding: 0; height: 100%; overflow: hidden;
}
#footer {
position:absolute; left: 0;
top: expression(document.body.clientHeight-150);
right: 0;
height: 150px;
background: red;
}
#content {
position:absolute;
left: 0;
right: 0;
bottom: expression(document.body.clientHeight-150);
top: 0;
background: blue;
height: expression(document.body.clientHeight-150);
}
</style>
</head>
<body>
<div id="content">
<iframe width="100%" height="100%" src="https://www.link.com" />
</div>
<div id="footer">
Test content
</div>
</body>
</html>
-The order is right, the iframe sits above, however the iframe itself is too small. I want there to be there is no scroll bar. The footer section doesn't show the background color or text. I've clearly made a mess of things.
-I also don't want the footer to be absolutely positioned, a user should scroll down a bit to see it.
-I am also curious to learn how to get rid of a scroll bar from an iframe even when the iframe is too small. Actually, it would be nice if there was a way to 'cut off' the bottom section of a source link and replace it with my footer.
oke first of - I would advise refraining from inline CSS and ID's it's 'better' practice to use a CSS file and link to it and rather using classes and for instance using footer tags for the footer etc. - But that's minor! don't worry about that, you can see on the fiddle bellow I took your example and put it into what I believe is what you wanted:
Edit: Updated jsFiddle -- http://jsfiddle.net/xuwd9/1/
I will add your code edited if need be :)

html css image alignment

I have a question regarding image alignment with CSS. For example I have created a css class as below:
.link {
background: url("images/image1.gif") scroll right;
}
and below is the markup
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<p class="link">This is a link</p>
</head>
<body>
</body>
</html>
When I check in the browser I get the image on the text. I want it after the text i mean
This is a link (this is where I want the image to appear)
Try
.link {
background: url("images/image1.gif") top right no-repeat;
padding-right: 32px; /* or the width of your image */
}
Not sure if I understand right, but assuming you trying to display image right after text ends you might try something like that:
.link {
background: url("images/image1.gif") scroll right;
padding-right: 20px; /* adjust to fit nicely with your design */
}
hope it helps :)
shouldn't it be position right not scroll right?
You can also give the link text some padding to clear the background picture.

jquery kwicks issue

I've been working on my problem for the past few hours and am at the end of my rope. I need help.
I have a staging page where I tested the code and verfied that it works, but on the live page, the code refuses to budge. I can't figure out why kwicks jq seems to be ignoring the html on the jujumamablog.com header. <-- this is my question.
I'm using the kwicks for jQuery. I created a working sample page so I could be sure that the code was working before trying to integrate into the live area of the site. The sample page can be found here: http://jujumamablog.com/jujumama/dev.html
The code for the workingsample page is as follows
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<title>Kwicks Examples: Example 1</title>
<script src="http://jmar777.googlecode.com/svn/trunk/js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="http://jmar777.googlecode.com/svn/trunk/js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://kwicks.googlecode.com/svn/branches/v1.5.1/Kwicks/jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script>
<style type="text/css">
/* defaults for all examples */
.kwicks {
list-style: none;
position: relative;
margin: 0;
padding: 0;
}
.kwicks li{
display: block;
overflow: hidden;
padding: 0;
cursor: pointer;
}
/* example 1 */
#example1 .kwicks li{
float: left;
width: 98px;
height: 200px;
margin-right: 2px;
}
#example1 #kwick1 {
background-color: #53b388;
}
#example1 #kwick2 {
background-color: #5a69a9;
}
#example1 #kwick3 {
background-color: #c26468;
}
#example1 #kwick4 {
background-color: #bf7cc7;
}
#example1 #kwick5 {
background-color: #bf7cc7;
margin-right: none;
}
</style>
<script type="text/javascript">
$().ready(function() {
$('.kwicks').kwicks({
max : 205,
spacing : 5
});
});
</script>
</head>
<body>
<div id="example1">
<ul class="kwicks">
<li id="kwick1"></li>
<li id="kwick2"></li>
<li id="kwick3"></li>
<li id="kwick4"></li>
<li id="kwick5"></li>
</ul>
</div>
<div style="clear:both;"></div>
</body>
I was hoping that this would be a fairly simple 'plug-and-play' instance. Boy, was I wrong.
My task was to get this slick piece running smoothly. I know there are other issues with the main site (jujumamablog.com), load time specifically, which I was told to ignore for the time being.
Edit-----------
I need to be a bit more clear here. The above code works, I'm wondering why, when I try to put the code into the live page (jujumamablog.com, where there are other scripts and -ish) that this stops working.
Thanks in advance.
It looks like you are including jQuery a second time, and since all those plugins are just methods of jQuery, you blow them all away.
The first one is on line 65, and the second is on line 91. All the plugins added between those two, are destroyed.
As a side note, you should consider consolidating all those scripts into one, then compress them with YUI compressor or whatever you prefer, and finally, if possible, put it at the bottom instead of at the top.
The $().ready(function() { looks wrong to me. I thought that the two ways of doing it were
$(function()
{
//etc
});
and
$(document).ready(function()
{
//etc
});
I get an error on this line:
jQuery('ul.sf-menu').superfish();
[Exception] TypeError: Object # has no method 'superfish'
It's possible this is stopping the rest of your ready events from firing.
I found out that the problem is that your live server uses a newer version of Jquery. I have the same problems but I don't know what's different between 1.2.6 and 1.4.2. Hopefully some answers will turn up!
Now I'm asking here: Plugin: Kwicks for Jquery works perfectly with Jquery 1.2.6 but not 1.4.2

Categories