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.
Related
I'm doing a React project and I want to redirect to #categories div on main page...when I click on a link on navbar of the main page (where #categories div is) it works, but when I click on that link on another page (categories div is on another page and it should redirect me to localhost:3000/#categories), the href is good but it only redirects me to that page, not to categories div on the page.
I have tried writing a function to do it and also checked if the div name (id) is correct, checked if link works and everything.
Does anyone know how to solve this?
Thank you.
You cannot redirect to a div instead use section tag
<section id="categories">
<div></div>
</section>
Now the same localhost:3000/#categories href would work. Read More
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.
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 am trying to link these fancy box images to a website externally.
For example: http://www.dramaticsnyc.com/stylistsandlocations/
Click on one of the stylists and the image pops up. On the bottom it says click here to read and write reviews. When you click on it, it doesnt go to the page, it gets stuck on the same page. How can I make it link to the site on the hyper link? Any help would be appreciated. Thanks.
Here is the code I am currently using for each picture (put this code in fancygallery caption):
<div style="display: none;">
<div id="hover-image_0">
<a class="fancyframe" href="http://www.reviewmenyc.com">Click here to write and read reviews! Review Me NYC</a>
</div>
</div>
It only links to the site internally not externally. If you click on the link, its supposed to go to www.reviewmenyc.com but its staying under www.dramaticsnyc.com. What do I have to do the change this? I am not the greatest but I can learn and I know my way around.
<a class="’fancyframe’" href="’http://www.reviewmenyc.com’">Click here to write and read reviews! Review Me NYC</a>
Should be:
<a class="fancyframe" href="http://www.reviewmenyc.com">Click here to write and read reviews! Review Me NYC</a>
There is no need for the extra ' in the class and the href
Also, instead of changing the page location, you might want to just open a new tab. If so, use this:
<a target="_blank" class="fancyframe" href="http://www.reviewmenyc.com">Click here to write and read reviews! Review Me NYC</a>
i have this link http://www.tgi.com.pt/link/tabSlideOut.html
and my idea is the link content open the left div.
But I can't doing the desired effect
any suggestion?
Oh, i see -- you want the Content link to open the Contact thing. Well, I see your Content link (in footer (which is actually more of a header)) is:
<a id="handlee" href="#">Content</a>
so, that doesn't seem like it would ever do anything.
You do have another Content link down below, but that appears to be incorrectly included in your slide_out_div. Perhaps that Content link is supposed to be up above in the footer section where the other Content link is?