Sorry if something like this has been asked, but I've spent a long time Googling it and searching it here.
I'm trying to build a homepage for a website where the menu is along the top, rolling over the menu items should show a description of the page in the middle of the screen, which they do, and this is working.
The problem is that because jQuery/JS is using the href tag to find the page the description is on, clicking on the menu item takes the user to a description page and not the actual page.
I've put the description paragraphs on separate pages from those they're describing since it'd be redundant if the description showed up on both home and the page the user wants to navigate to. I've also tried display=none in the CSS to get the description to be hidden in the main page and show on the homepage, but as the description carries the CSS from the main page, it's also being hidden on the homepage.
I'll post any code if asked, I wasn't sure whether to dump it all here or just certain parts.
Thanks
Related
Actually I am making a web page using HTML,CSS and Javascript in which there is only one html page with functions like when a person clicks on a particular button, that the current div will not be displayed but the another div will be displayed. At last there will be a home div which will act like the home page of the website.
I want to make that home page to be displayed once a person fills all the credentials and always only the home page should be displayed even after reloading that web page or reopening the web page.
I have researched everywhere but couldn't find the exact solution of the code.
Thanks
Try with LocalStorege, hold information, and check if the condition is true, if it is just immediately execute the logic.
This should solve the problem for you.
Take a look at https://stackblitz.com/edit/web-platform-uawtkc
Tried to simulate the problem and solve it
My manager asked me to try replicating the sliding feature here at this website:
https://insight.bakermckenzie.com/blockchains-and-laws
The navigator arrows at the right and left of the page direct the user to other pages of the site, but do so much like a carousel rather than simply opening the link in the traditional way. Even hitting the browser's "back/forward" buttons makes the site slide between the pages rather than opening them normally.
I've dug through the source code and used the developer tools, but can't find out how exactly the site is pulling this off. Any ideas? Seems like it could be JavaScript, but I'm not too sure.
I couldn't find the library that the site uses, but I'll try to explain it.
When you request a 'new page', by clicking on the arrows or the menu, all the content is loaded async. If you pay attention to the .page-container div, you can see that when you 'change' the page, the div with the content you are currently seeing moves to the side and then is completed removed from the page.
Step-by-step:
Request a page
New content loads into a div that is not visible yet.
The page you currently are moves to the side and then its content is removed when is completely hidden from the view (the whole html is deleted) .
The 'new page' that was requested follows the 'old' page movement.
It is like a carousel, but the new content is loaded async and the old one is removed.
Div responsible for the content
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 currently unable to display images on the Pinterest Pin Preview screen that are hidden (with a display: none) on my page. On my page where the "Pin It" button sits there is a standard carousel, but I am looking for all images within that carousel to be shown on the Pin Preview pop-up.
I have the script include on my page as below:
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#username=xa-USERNAMEINHERE"></script>
<a class="addthis_button_pinterest left last" title="Pinterest"> </a>
When investigating into this issue I came across this post from 2012, which is essentially the same issue I am experiencing. However there is no follow up to it.
I have experimented with the image_container and image_include properties of addthis_config, but essentially I can't seem to find a way to show the hidden images.
Has anyone came across this problem?
I received a reply back from Pinterest Support, as follows:
Hi,
We do offer similar functionality when using our Pin It button in
"Any Image" mode. You can see the code used to generate it by going to
our Widget Builder:
http://business.pinterest.com/widget-builder/#do_pin_it_button
However, there's no way for us to automatically include hidden images.
The one additional functionality that we do offer is picking up the
image stored in the og:image tag on your page, if it exists, so if you
populate that tag with one of the hidden images, it would show up
first in the list. Hope this helps! Bill | Developer Support Engineer
So it seems that as of May 2014 this is not possible.
I'm developing a page that will present the user with a content slider, so that the user can click 'next' to browse through the slides.
However, I also want to hide any 'previous' buttons/links and additionally, when the user reaches the last slide in the list the 'next' button needs to be replaced with a different button and take the user to another page on the site instead of going back to the beginning of the slides.
I wondered if anyone had any advice on how to code this?
Thank you.
If your slides are images, you have this done in Lightbox (at least for the first part of your need):
http://leandrovieira.com/projects/jquery/lightbox/
http://www.huddletogether.com/projects/lightbox2/
You might also be interested in the following script (based on Scriptacolous):
http://railspikes.com/2007/5/14/slider-js-a-javascript-slider-component
Also this is a possibility:
http://www.webresourcesdepot.com/anythingslider-a-great-jquery-slider-plugin/