How to detect the main content block of a website? [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I've always wondered how the "read mode" extensions know exactly where the main content is.
If every webpage out there had its main content in a div marked with the id of #content or something. But is there a way to know which div is the wrapper for the main content?
Here's what I want to do
I want to create a script where I inject a text box to the right of any webpage so that I can take notes (Eloquent is an example chrome extension that does this - but it doesn't push the content, it makes the textbox dragable instead - don't like it). Then the notes I take would go to my mongo databases (all done)
But when I add the textbox to the page, I would love to push the main content to te side.
Here's a screenshot of what I have so far
As I said, if I want this to just run on wikipedia for example I could hardcode the element id/class. But is there a way to check for the main content regardless how the developers might have labled it

Unfortunately, there's no way to be absolutely sure for every page on the internet. There are mechanisms to try and signal what is the "main" bit of a page. Two of the "main" ways to do it are
The <main/> tag
The HTML element represents the dominant content of the
of a document. The main content area consists of content that is
directly related to or expands upon the central topic of a document,
or the central functionality of an application.
role="main"
The main landmark role is used to indicate the primary content of a
document. The main content area consists of content that is directly
related to or expands upon the central topic of a document, or the
central functionality of an application.
However, websites aren't breaking any real rules and will still render in most browsers if they don't include either of these. They are mostly ways to help users that require screen readers be able to view content.
You mentioned you were looking at how Wikipedia does it and they use the role="main" mechanism.

Related

Removing Main Heading menu from a page - Web Accessibility [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 months ago.
The community reviewed whether to reopen this question 9 months ago and left it closed:
Original close reason(s) were not resolved
Improve this question
I have a web page with a main Menu or Main navigation in the header. Like below
This header menu is present across all the pages.
Requirement is to remove this main header menu from one particular page.
Few questions below:
Does removing the main menu violate any of the WCAG 2.1 guidelines?
Is it legal to remove the Main heading Menu from a page?
Will this change cause any accessibility issue?
The section of WCAG that you're going to need to meet is 3.2.3. Consistent Navigation.
Success Criterion 3.2.3 Consistent Navigation (Level AA): Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user.
I'd also recommend reading the sufficient techniques and failures.
It's a common practice in landing page development to remove any navigation elements from the page. I don't believe that this alone would be a failure, as long as you're not dynamically removing the menu after page load.
What you need to be mindful of is that you're not offering different navigation on different pages of the site, and that if a navigation menu is present on the page, then it needs to be in the same place on each page it appears.
I don't believe that the absence of a navigation menu necessarily results in a failure. The failure example given specifically states that the page in question must have a navigation menu present in order to fail.
Accessibility is about making sure your website is available to the greatest number of people. Removing things from the page so that no one has access to them is not an accessibility issue. There's nothing to give access to, so to speak.
However, if you "remove" the menu by making the opacity transparent or by "pushing" the menu off the screen and don't really remove the menu from the DOM or use CSS display:none, then that would cause an accessibility issue.

HTML Generated image link? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I'm a web designer and i'm currently designing a website that includes images. I was wonder if anyone can tell me what it is called or if you can guide me the right way so i can do some research on my own and learn it.
Basically what i need to know is how can you lets say if the user click on the image it will bring them to another html with that image plus that image information
A current example... wallhaven.cc if you go there and if you click a wall paper.. every wallpaper has a specific link. is that generated or does that mean that literally EVERY image on that website has a web page of its own?
Yes it is possible to do it both ways you can use what is called dynamically generated web pages or you can create each page manually.
So if you were to go with the dynamically generated web pages you would probably want to consider looking around a JavaScript Template Engine. I currently am using this one while I build my own. http://idangero.us/template7/. That is the best JavaScript Template Engine you can get. Plus it is free and Open-Source. But if you go with creating each page manually you will have a lot of work on you hand! So personally I would choose using the JavaScript Template Engine!
Have a great day.
Joseph Shenton
http://timedevs.net/
There is one page for image details, the number at the end of the link is the image id, which tells the server which data to output.

Parsing html table from different domain [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
i'm making an iOS app for showing schedule for my college.
I'm kinda new in javascript, i thought it's simple until now. I know this task may be simple and trivial, but listen:
My application generates link with parameters and then creates a dynamic page with an iframe and opens link within it (src of an iframe sets to generated link), link leads to a page on a different domain, it has a HTML table with needed data in it's cells, each cell has it's own attribute, so i thought i could simply find each needed cell by it using DOM, but accessing iframe's DOM doesn't work. I can change absolutely nothing on server side - even college technicians do not know how it works and of course they'll not touch anything until it breakes.
So the question is: how can i get the text from the cells of that table by knowing their attributes and store it as a variable in javascript?
Almost forgot, example of a page itself:
http://ikis.tsogu.ru/shedule/show_shedule.php?action=group&union=0&sid=96&gr=111&year=2015&vr=0
Basically, you cant. Due to same-origin policy. Check out this and this similar questions.

How to display millions of images in one webpage like app.thefacesoffacebook.com [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm inspired by app.thefacesoffacebook.com and would like to build similar thing with Yammer (kind of social network) profiles for my organization.
I have already scraped the data I required like profile id, image URL and others in stored in the data base. But how to display the images in the webpage like app.thefacesoffacebook.com? Is it normally getting the URLs from DB and displaying images with IMG tag or any other trick they are using. I'm expecting to see the similar behaviour when you click on one image it should zoomin. I'm not really sure about to go about this, any ideas would be helpful. I hope information is enough to guide me, let me know if this makes sense.
Thanks
This is a question whose answer would really be immense, but from a bird's eye view, the most common way to implement this would be to employ pagination.
Pagination is a "lazy loading" scheme in which groups of images are loaded in predefined amounts. For instance, you may see a group of 20 images onscreen, but when you scroll to the bottom of those 20 images, an event is fired and the next 20 images are loaded and appended to the window.
If you can imagine in the olden days, before dynamic html, you would have had separate "pages" for each "chunk" of images. To see the next 20 images, you would click "next". Modern implementations are not much different in practice, only that they use JavaScript to asynchronously load each chunk automatically, and append it to the current page.
A small, abstract example might be as follows:
window.addEventListener("scroll", function() {
var i = 0;
if ( scrolledToBottom() ) {
i++;
loadNextImageGroup(i);
}
})
For more information on pagination and pagination techniques, check your favorite search engine for "pagination tutorials".

Tell google not to index some parts of website [closed]

Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 9 years ago.
Improve this question
I am working on a website and I am having troubles telling google not to index one <div> which is normally hidden (display: hidden;) on load because it is a popup (login popup). It is really bad when login popup goes right after tag because I usually store all popups at the beginning of body so content of it goes to description of my website in google search.
Do you have any ideas how can I hide it from google (maybe via javascript)?
EDIT: Thank you guys, you gave me a great solution with googleoff/on!
I thnk this is what you're looking for
http://perishablepress.com/tell-google-to-not-index-certain-parts-of-your-page/
<div>This is normal (X)HTML content that will be indexed by Google.</div>
<!--googleoff: index-->
<div>This (X)HTML content will NOT be indexed by Google.</div>
<!--googleon: index>
Go through this link (Tell Google to Not Index Certain Parts of Your Page: may be helpful) : http://perishablepress.com/tell-google-to-not-index-certain-parts-of-your-page/
put the div farther down (aka at the end) in the content and use css to position it where you want it when visible.

Categories

Resources