The situation is: on the website I have tab system implemented with iframes. There is an <ul> that contains <li>'s. Each <li> contains one <iframe>.
Like this:
<ul>
<li>
<iframe></iframe>
</li>
...
</ul>
On one of the pages, a jQuery dialog is opened when certain event happens.
The problem is: if tab (<iframe>) is not activated (parent <li> element has display:none) and jQuery dialog is initiated, then when user returns to this tab, the dialog is located in wrong position. It's top and left attributes is set to 0. It happens in FireFox but not in Chrome.
The only solution I found is to initiate redrawing of dialog when user switches to this page, by calling some universal function inside iframe when it's activated if this function exists on this page. But I think this solution is bad and I hope there is a better way to solve this.
Appreciate any help and sorry for my English.
Related
I'm using Foundation for Apps, the angular version, and trying to use the off canvas menu. It works fine, opening and closing via setting links, but does not close when clicking off of it in the main content area like previous versions, and their example, do.
It's a really simple setup:
<zf-offcanvas id="menu" position="left">
<a zf-close="" class="close-button">×</a>
</zf-offcanvas>
<a zf-open="menu" class="button">Open Off-canvas</a>
And it should be done, but clicking anywhere on the main content (not the links) does not close the off canvas like their example docs:
http://foundation.zurb.com/apps/docs/#!/off-canvas
I'm looking for either a solution to this problem, or even a hacked out JS solution to close the window on clicking on "main" content.
You have to add the "zf-close-all" attribute to the body tag.
<body zf-close-all>
So I have this web application that our customers use. It is like xxx.mydomain.com. I have another web application that is like yyy.mydomain.com. So what I want to do is have a hidden div with iframe on xxx.mydomain.com whereby when a user clicks on a button on xxx.mydomain.com this "floating" div with iframe (which src is yyy.mydomain.com) will display over top of the screen of xxx.mydomain.com.
We are doing this versus opening a new window so that the user feels like they are the same experience. It will feel like the second program is part of the first program. So all of this is working fine.
So on the second program (yyy.domain.com displayed in iframe) I have a button that basically tells them to go back to the main program. I want to be able to capture this button click event and hide this "floating" div with iframe so the user then sees the screen of the main program.
How do I go about doing this? Any help would be appreciated.
If your second app is always in the iframe, you can call functions from the parent document using:
parent.myFunction();
You need to bind event over button but as it is iframe,trick is to select content of iframe then find button over it to hide parent of iframe.
code:
$('body iframe').contents().find('.backButton').bind('click',function(e) {
//lets parent of iframe is having parent class
$('.parent').hide();
});
I'm working on a website, and I want to add gallery to it. But I have a problem - the gallery must be accessible to blind etc, and I have no idea how to do it.
Usually, in those kinds of galleries, I would do the html like this:
<ul>
<li data-src="path/to/image/1.jpg"></li>
<li data-src="path/to/image/2.jpg"></li>
<li data-src="path/to/image/3.jpg"></li>
<li data-src="path/to/image/4.jpg"></li>
<li data-src="path/to/image/5.jpg"></li>
<li data-src="path/to/image/etc.jpg"></li>
</ul>
and using css and jquery I would use the data-src and add it as a background to the li (because not all photos are squers, so I'll use background-size: cover;). Then, when user will click on the li, a popup will appear with the full size image.
There are some problems with that. For example, it must be clickable using tab in the keyboard. I can add a to the li, but is it ok not having href? And what the machine will "think" when it'll see empty ul list? Another problem is the popup. The html of the popup and it's img tag located at the bottom of the page, so the machine won't be able to see it immediately after click. Another problem is the alt. There won't be description to photos (because they aren't uploaded by me), so I'll leave the alt empty?
Thanks!
Principles:
Images that convey information must have a text description. Best practice is to always use am <img> for an informational image, however, you could also use a title attribute on the anchor around the image.
Everything must be keyboard operable. Anchors without an href will not be tab focusable, add href="#" to fix that problem.
Blind people are not the only keyboard users. Make sure that you can control the gallery with the keyboard only.
Manage the focus when dynamic content appears and disappears. Make sure that the focus goes onto the full size popup and that the "close" control is keyboard operable. When closed, focus should go back to the anchor that opened the image.
Controls should have the correct role. Links are used to go to different pages. Buttons are used to control things on the same page. Your "anchor" around the image is acting like a button so add role="button" to the anchor.
You will have to give the image uploaders a way to add the alt text for the images. Facebook is not a good example of accessibility - it is a bad example. Look at EasyChirp for a good example of how to do alts on images that are uploaded.
I have a page (pageA) that contains tabbed panes, the content of each pane is represented by a DIV element and it has a unique ID e.g id="tab1"
<div id="tab1">Contents of tab</div>
I have another page (pageB) that has an A element that links to a specific tab
Tab 2
On IE7 pageA with the tabs on will only scroll if I open the link in a new window from pageB
Has anyone come across this issue and knows how to fix it?
I've noticed that the url that is being constructed by the anchor in IE7 is not valid:
<a href='#skipNav'>Skip</a> -> <url>/#/skipNav
so the easiest solution is to place a full url with # in the anchor. This will prevent IE7 to construct it from scratch (url should be server side generated in order to avoid Dev/Test/Qa/Prd transformation problems):
<a href='<url>/#skipNav'>Sip</a>
EDIT:
if the error still occurs try adding a random query string. It's a dirty solution but what is not dirty in IE7
EDIT:
here's a great example of another approach: window.location = #anchor doesn't work in IE
In a nutshell:
Back to top
I'm having some trouble with facebox and can't seem to find the solution. Anyways, I have everything displayed properly and the images work but my content will not load. When you click the link with the rel="facebox" tag it shows the box but it only displays the loading.gif and none of my content. Does anyone know what is causing this? It is probably something extremely simple but I can't seem to find it in my code. Here is the link to the page: http://www.mcallaro.com/smc/contact.html. Currently I have the content being display:block so you can see it is there but once you close it and click the contact button you will see my issue.
Thanks
I haven't used facebox before, however this is most likely your problem:
<li>Contact Us</li>
Your contact link is directing to no where because it has the # symbol with no additional text. The link for facebox works similarly to anchor linking. To make it work you must direct the link to a div within the page. For example:
Your link would look like this:
Contact Us<!-- #contact is the id of the div you are linking to -->
Your div within the same page would look like this:
<div id="contact">
<!-- Your content here -->
</div>
As of right now your link goes no where and you have your contact info within a div with a class name of content.
You actually don't have to have a separate contact us page either. just simply put the contact div within every page your going to have the link and by default it would be hidden until the contact link is clicked.