Out of nowhere the title on my youtube video is overlapping the share and more info buttons within the video header. If you hover over the video the title compresses correctly.
Fiddle with the example:
http://jsfiddle.net/QpckF/
Here is my code:
<div class="interior-container">
<h3 id="video-text">Why Book with Rail Europe?</h3>
<iframe frameborder="0" name="player" allowfullscreen="" id="player" title="YouTube video player" height="217" width="365" src="http://www.youtube.com/embed/wV-S_MOusMI?controls=1&showinfo=1&modestbranding=0&wmode=opaque&enablejsapi=1&origin=http://www.raileurope.com"></iframe>
<div class="vid-arrows prevvid">
<i class="vid-prev icon-video-left-arrow"></i>
</div>
<div class="vid-nav">
<a target="player" data-text="Why Book with Rail Europe?" class="fader first active" href="http://www.youtube.com/embed/wV-S_MOusMI?controls=1&showinfo=1&modestbranding=0&wmode=opaque&enablejsapi=1&origin=http://www.raileurope.com" id="default"></a>
<a target="player" data-text="Train Travel in Europe: Rail Pass vs. Tickets" class="fader first" href="http://www.youtube.com/embed/rxlq8KirhNM?controls=1&showinfo=1&modestbranding=0&wmode=opaque&enablejsapi=1&origin=http://www.raileurope.com" id="default"></a>
<a target="player" data-text="Why Travel by Train in Europe?" class="fader first" href="http://www.youtube.com/embed/pQ8DwmEg9wk?controls=1&showinfo=1&modestbranding=0&wmode=opaque&enablejsapi=1&origin=http://www.raileurope.com" id="default"></a>
</div> <!-- end vid-nav -->
<div class="vid-arrows nextvid">
<i class="vid-next icon-video-right-arrow"></i>
</div>
</div>
</div>
Is this a problem with youtube or my code?
Thanks
Trial and error testing seems to indicate that this is just an interface bug in the Youtube Flash player -- it doesn't truncate the title properly until a mouseover event has been triggered.
A few other interface issues I discovered; it appears that when a video is less than 350px in width, those 'share' and 'more info' buttons aren't even rendered by the flash player, so the problem will only occur if it is more than 350px but less than needed to have the full title visible.
Also, if the video is less than 201 pixels in height, the control bar at the bottom won't auto appear (to save space); but when there is no control bar, then a mouseover cannot trigger the title to be concatenated until the video starts playing.
Minor annoyances, but ones that only come up in a few cases so don't know how big of a priority they are. You could try reporting the bugs (or see if someone else already has).
I was having the same problem. You can also add "showinfo=0" to the url and it won't show the title at all.
Related
Here is an example using aria-describedby
<div role="application" aria-labelledby="calendar" aria-describedby="info">
<h1 id="calendar">Calendar</h1>
<p id="info">
This calendar shows the game schedule for the Boston Red Sox.
</p>
<div role="grid">
...
</div>
</div>
Say I changed to this:
<div role="application" aria-labelledby="calendar" aria-describedby="info">
<h1 id="calendar">Calendar</h1>
<div id="info">
<svg />
<div></div>
<div>
<p>This calendar shows the game schedule for the Boston Red Sox.</p>
</div>
</div>
<div role="grid">
...
</div>
</div>
Is screen reader like NVDA still announces This calendar shows the game schedule for the Boston Red Sox same as the first example?
Short Answer
The examples would both be announced as "calendar, This calendar shows the game schedule for the Boston Red Sox.** in the majority of screen reader / browser combos. This is assuming the SVG is handled correctly and the empty div you added is indeed empty (see end of this answer).
Long Answer
aria-labelledby would be announced first, with aria-describedby announced second in most screen readers.
They are not normally used together on the same element as both can contain a list of IDs to announce.
I would suggest that for ease of maintenance you change it to:-
aria-labelledby="calendar info", this would ensure reading order is consistent across all browser / screen reader combinations.
Although they would (should) be announced the same from your given example, this is assuming that you hide the SVG from screen readers with aria-hidden="true". It also assumes that the <div> you added is indeed empty (and not just a placeholder).
As an aside make sure you also add focusable="false" to your SVG to account for Internet Explorer users (otherwise they can focus the SVG). Nothing to do with the announcement issue in this question just a good practice.
I would suggest your second example should be marked up as follows to save a lot of hassle and to allow the SVG to be part of the document if you wish:-
<div role="application" aria-labelledby="calendar info">
<h1 id="calendar">Calendar</h1>
<div>
<svg focusable="false" aria-hidden="true"/>
<div></div>
<div id="info">
<p>This calendar shows the game schedule for the Boston Red Sox.</p>
</div>
</div>
<div role="grid">
...
</div>
</div>
Final thought
Do you really need the <h1 id="calendar" to be read out at all? Your description says "This calendar` at which point stating "Calendar" before is redundant.
Always try to avoid repetition.
If this is the case then you can simplify your example further to just have aria-labelledby="info".
Also one last observation role="application" is something that should be used sparingly as it causes all keyboard events to skip the screen reader and go straight to your application. Be very careful using this as in most circumstances it is not needed and can cause a lot of accessibility headaches. Here is a brief article that explains a bit more about the pros and cons of the role.
If you remove role="application" then the aria-labelledby may not work on a static div so replace it with an appropriate role.
I have a gallery page that looks pretty good, but I need to add my own pictures of myself and/or family... I've tried to do so but it isn't working the way it should.
Here a codepen of the problem: https://codepen.io/AJ2021/pen/EOWYvmenter code here
I need my photos to be in a shadowbox so I have a thumbnail on the page and when I click on it, it opens in a large view.
If the codepen has the exact same code your dreamweaver does, I found an error in the snippet.
It originally was:
" alt=""/> rel="shadowbox[picture]" title="a">
<img src="../Documents/SU Fall 2017/Foltz class/tmb_Lawtons_Marina.jpg">
</a>
Now it's:
<a href="../Documents/SU Fall 2017/Foltz_class/img_Lawtons_Marina.jpg" alt="" rel="shadowbox[picture]" title="a">
<img src="../Documents/SU Fall 2017/Foltz class/tmb_Lawtons_Marina.jpg">
</a>
It looks like the anchor tag <a> had closed too early.
I am using a Bootstrap Template, that you can see the live version here - https://02dc74ce3e31e56a52ebcc845dca58e87283aabe.googledrive.com/host/0Bxbofwq0kd4ReUt2YWVOYmt3WVU/
If you view it on a mobile device, you will see how the responsiveness of Bootstrap kicks in.
But when I applied it to my Rails app, the mobile version does not look the same.
Any ideas what may be causing the discrepancy?
You can see the differences especially in both the main 'content' area with the story (notice on my version you see multiple stories in the main view, but on the original you only see 1 story and you can read the content more easily). You can also see it when you press the buttons.
Press the 'blue' button to the right top of the original and you will notice that the sidepanel comes out at the top like it should. But on my version it still comes to the side and everything is small.
What am I missing?
Thanks.
Add this to your application.html.erb:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You have made too many changes while you are implementing the html in your rails view.
Like original header have following content :
<header class="header">
<hgroup class="pull-left">
<h1 class="site-title">
<a href="index.html" title="Von" rel="home">
<i class="fa fa-lemon-o"></i> Von
</a>
</h1>
</hgroup>
<div class="btn btn-primary pull-right" id="togglesidebar">
<i class="fa fa-bars"></i>
</div>
</header>
But in your view instead of <hgroup class="pull-left"> you have <hgroup class="pull-left col-xs-3 col-sm-3 col-md-3 col-lg-3"> and for <div class="btn btn-primary pull-right" id="togglesidebar"> you have <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 masthead-group-3"> also You added two more element in between these two element that destroyed your all header view.
You haven't used middle section from html design it seems you write your own. In your <header class="entry-header"> You created div instead of image tag. So every thing started distorted here. You include header footer section for each main section. But it's not big issue. Try remove div for confirmed and unconfirmed and use image instead. SO you will have proper view. Also remove row class from view that you added so view look more symmetric.
In your about section. When you try to see on mobile view. width of main container <div style="display: inline-block;" class="col-sm-3 sidebar" id="secondary"> is calculated on the basis of it's child element like <div class="about">. As your child element is form and it's having width less than the width displayed on form so remaining section not having proper background color #1c171e. So try increase width of you form control or <h4>Submit Report</h4> like <h4>Submit Report </h4> (kind of hack)under about section You will get proper view for this also.
Judging by your css file, you have loaded similar css multiple times. Consider the fact that, if everything else suggested by the people above has been corrected, the placement of the css files in the application scss file could overwrite your correct code.
I would also check the viewport meta tag as suggested above
If you try calling the CSS and JS being used as individual standalone files, instead of minified, do you still have this issue? Order of these files will matter too. I've seen lots of quirky issues when one JS gets loaded before another, same goes for CSS.
P.S. I would leave this information as a 'Comment' vs. Answer but I don't have enough stack overflow credit yet to do so ;-)
Make sure that if you have using rails g scaffold that you remove the scaffold.css file.
I've tried the empty style tag trick but still no go.
Opening: sharpsma.com inside of the latest Safari, the far bottom right promo copy over the Sharp Zenigata promo is pulled over left.
Open the Dev tools in Safari and then just closing, snaps it into place. Or, any editing.
All works in all other browsers from IE7+, FF, Chrome and Safari 5 but in Safari 6, it seems to be getting hung.
Visiting the site in Safari 6 will be the easiest way to see the issue. Then, just open and close the dev tools and the promo copy snaps into place.
Any ideas on what could be causing this?
You have few errors in html code (* marked with stars, open site in Firefox, view source, and you will get better picture), in that part of page:
<div id="ThreePanelPromoContainer">
<div class="promoBoxContainer">
<a href="/sharpledlcd"><img src="sites/all/themes/sharptwentythirteen/images/front-page-bttm-all-led-promo.png" alt="lcds"/>
<p class="promoBoxTeaser">Sharp offers an extensive line of Industrial Strength LCDs.<br />
<span class="learnMore">Learn More **>></a><**/span></p>
</div>
<div class="promoBoxContainer promoBoxesMiddle">
<a href="http://www.sharpmemorylcd.com/" target="_blank"><img src="sites/all/themes/sharptwentythirteen/images/front-page-bttm-memory-lcd-promo.png" alt="lcds"/>
<p class="promoBoxTeaser">Memory in every pixel allows for rich content on a small display.<br />
<span class="learnMore">Learn More >**></a><**/span></p>
</div>
<div class="promoBoxContainer">
<a href="http://www.sharpleds.com/" target="_blank"><img src="sites/all/themes/sharptwentythirteen/images/front-page-bttm-zenigata-promo.png" alt="zenigata"/>
<p class="zenigataFrontPromo">Because life happens in full spectrum.<br />
<span class="learnMoreZenigataPromo">Learn More **>></a**></span></p>
</div>
i guess that Safari is more sensitive to these errors than other browsers. :)
...Summary of the problem...
Example of what works
Title attribute works great on image, for example
<img
src="http://imgs.xkcd.com/comics/the_general_problem.png"
title="I find that when someone's taking time to do something right in the present, they're a perfectionist with no ability to prioritize, whereas when someone took time to do something right in the past, they're a master artisan of great foresight."
alt="The General Problem"
>
The problem (Example of what doesn't work)
I'm trying to embed an iframe video, like when you click "share this video" off of YouTube or (in this case) SouthPark Studios
It seems that either:
I don't know the right attribute to use with iframe element (it is aparently not "title"), or
"title" is corect, but iframe trumps it with some kind of layering issue. See below
...Further reading: Details on what I already tried...
1st try: Wrap it in a div, & give the div max layer
<div
title="South Park video about Ginger Kids coming in the night to carry off the town's other kids"
style="z-index: 2;"
>
<iframe
src="http://media.mtvnservices.com/embed/mgid:arc:video:southparkstudios.com:1feaa96c-ed01-11e0-aca6-0026b9414f30"
width="360"
height="293"
frameborder="0"
>
</iframe>
</div>
Sources:
https://stackoverflow.com/a/7117107/1421642, for divs
http://www.echoecho.com/csslayers.htm, for layer (z-index)
2nd try: Just put "title" in iframe tag
<iframe
title="South Park video about Ginger Kids coming in the night to carry off the town's other kids"
src="http://media.mtvnservices.com/embed/mgid:arc:video:southparkstudios.com:1feaa96c-ed01-11e0-aca6-0026b9414f30"
width="360"
height="293"
frameborder="0"
>
</iframe>
Results for both trys
El zilcho
In both cases, I mouse over the iframe and nothing happens. Compare that to my "example of what works" code at the very begining, where you can mouse over and see a beautiful little popup
Please help :)
You can give the iframe a title, but it won't appear in the tooltip. Change the frameborder to "2" and move your cursor to it and a title will appear.
To see the title on iframe you must set the title of iframe content and not the iframe itself. ( How to display tooltip when mouse hover iframe )
http://jsfiddle.net/2YGNx/
HTML
<iframe frameborder="1" src="javascript:'<div>Helllo World</div>';" style="width: 100%; height: 100%; margin: 0px; padding: 0px;position:relative;" title="hello world" id="contentIframe"></iframe>
Javascript:
$(document).ready(function () {
$("#contentIframe").contents().find("body").find('div').attr('title','Hello world');
});
However, because you are dealing with a flash video, It won't work that way. Flash likes to 'take over' as an extension, and the browser won't treat it as 'part of the page' in the sense that it will show the tooltip. Your best bet is to create an object with the video url as the source, and then setting the wmode to transparent. ( CSS Hover Tooltip Bubble Being Hidden Behind iFrame Video )