We Keep Coding

Is there a way to determine if CSS class is active in HTML page?

this is more a curiosity of mine, I don't know if it's something possible.
If I am inside a HTML page, is there a way to quickly determine if a CSS class is active inside that page?
I explain better, let's say I am inside a website with a list of different users and near their avatar I may have a green badge for online users, while others has grey badge.
If this list is really long, is there a way to programmatically (or at least quicker than scrolling and looking by myself) detect which users are online?
I thought they have a different active CSS class but I don't know how to look for it.
Thanks
NOTE: I know how to detect an element, but if there's a list of elements I need to know which of them has a particular class active

you can use (inspect) in chrome ctrl+shift+i in inspect element you can see which css is active or not right side

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
Placing the code below within your developer console should display the length of the existing classNames if they exist.
const classes = document.querySelectorAll(".className");
console.log(className.length);
You should then be able to navigate the classes for the relevant information by navigating the object trees returned for each object found by the querySelectorAll method.
But there may be times where this may not be the true count to the data set.
For example, if the data is dynamically loaded during page scrolling. You can then add an iterator loop to detect when you have reached the bottom of the page and push to the classes array.

How to scroll back to an element wherever it is when route changes?

I have a very long table. The first column of each one of the rows is an <a> tag. A click on an <a> tag does:
Update route and page reloads
Get data(list of objects) from server.
Display the data below the <a> tag
Hide data related to an another <a>tag.
The length of the data differs from each other. At a time, I only show data related to one of the <a> tags. For instance, a click on the first <a> displays data related to it just after of it. A click on the second <a> shows data related to it and hides data related to the first <a>.
How to scroll back to the <a> tag you clicked on when route changes and page reloads?
If you answer, please no jQuery.
Thanks in advance.

So what's inside your tables? Is it images?
And the "data from the server", is it data, like data from an api request? Or is it a new webpage?
If we're talking a dynamic web page here. I remember dealing with the same problem with an infinite scroll view where a user clicks an element, and then goes back and expects to return on the same position.
The problem with dynamic content is that it takes a while for the browser to render it. Depending on what it is it might take a few milliseconds to many seconds (poor 3G and a view with 1000 images for instance). And while this rendering is going on, you never really know where the scroll should end up. It is possible to solve by adding timeouts and adjusting the scroll until we're almost sure that the page is in the correct place. But it's usually a mess.
You say that the page reloads? Normally a page needs to "reload" if a user is changing route and similar. If the data you are loading is a new page, the I get why you have to reload. But if it's an api request for some other data; is it an option to not reload the page? If that's possible, then you could remove and add elements instead of reloading the entire page.

How to dynamically click on all list items without displaying the results of their default behavior but invisibly loading their contents?

I want to dynamically click on a set of unordered list items without displaying the results of the clicks. The intent is to pre-load dynamic content such as images and text that clicking on the list items will normally load and display; I want to preload the content as much as possible before the user begins to click on list items. (I've inherited code from another developer and I'm having to work within the constraints of his routine, so please bear with me.)
Each list item has an ID, like:
id="w273"
id="w175"
id="w123"
These would be my references. The list items are generated dynamically, and each contains an HREF to content that will be displayed in a hashed area of the page (the content consists of server-loaded images and text extracted from a SQL database using a query).
Normally, clicking on a list item changes the content in that area of the page, but it takes time to load. Once it's loaded, though, it can be redisplayed without reloading, of course, and so revisiting it is instantaneous...it's the initial visit that takes time.
I'd therefore like to pre-load all of that content by dynamically clicking on each of the list items in succession without displaying the resulting content, all done in the background, leaving the default content (which is automatically retrieved using the first ID in the click-list) in place. (I mention this detail to explain that the page loads initially with the first list item's content displayed, and that behavior should remain unchanged.)
How could I accomplish this with Javascript or JQuery?
MORE INFO
Okay, here's the skinny. The content is informed by a major containing php script that houses content from an inner php script. The outer script creates an image carousel whose thumbnails reference the inner script as hashes. At any given point, the URL will take this form:
g.php?g_id=45#a.php?a_id=238
The outer script is the "g.php" script. It references a thumbnail image in the carousel identified by the "a.php" script whose GET value is the key to loading the inner content on the page.
The individual thumbnails in the carousel are HREF'd like this:
<li><img src="thumb_image.jpg" /></li>
So clicking on this one would revise the previous URL to:
g.php?g_id=45#a.php?a_id=467
Notice, though, that the content generated by the "g.php" script doesn't change, therefore. The inner "a.php" content switches as a hash change when its corresponding thumbnail in the carousel is clicked. It's a surprisingly effective solution, with a few caveats.
The main caveat is that nothing is preloaded except the content referenced by the first link (which corresponds to the first thumbnail in the carousel), and that behavior is hard coded into the routine and is fine.
I simply want to dynamically click each link in the list to load all of the content, and to do it in the background after the page has loaded with the first link's content exposed (which is its default behavior, and, as I've said, which is fine). And it must be done invisibly.
It also doesn't matter in what order it happens, because the user might immediately advance the carousel and click on the 14th element in it rather than the 2nd element. So, I don't want to preload the content in batches of 10 or similar increments, waiting for the user to interact with the carousel to load more content; that makes no sense, provided the design of the carousel and how it is intended to be used in any non-sequential manner.
I simply need to loop through all of the list item links and load them invisibly—in whatever sequence they should happen to load, provided the asynchronous nature of AJAX. More than likely, the user will click on one of the links that has been preloaded by the preloading routine, but if the user jumps ahead and selects something that's still in the process of preloading, that's not a problem; by the time the user has examined that content, the rest of the content will have been preloaded.
So, that's more info. I hope this provides a better backdrop for understanding what I'm up against. Without completely rewriting the entire routine, the best bet seems to be to accept its own mechanism and accommodate it by looping through an AJAX/JQuery routine that dynamically clicks and preloads all the data in the background once the page has displayed its initial content. And I do have access to the IDs of the links in the unordered list; other identifying information could easily be added to it.

Text is not an issue, what could be an issue is the async loading of many large images - that might not start loading in the desired order.
It would be a nice idea not to load your images somewhere hidden inside the document, but instead get from the server a JSON holding all the needed data.
You don't need to emulate clicks on all your list one by one,
you need to simply get i.e: the first 10 images, and as the user advances, load more and more (here the idea is to avoid loading stuff that the user might never explore/see/use) - but it all depends on the User Interface you have.
JSON example:
[
{
"id" : "w125",
"image" : "path/to/image1.jpg",
"content" : "HTML or whatever"
},{
"id" : "w275",
"image" : "path/to/image2.jpg",
"content" : "HTML or whatever is the content"
}
]

Highlight Active Navigation Menu Item on Active page with CSS/JavaScript, No ids

I am working on a pre-existing website, now this website need to work for partially visible people as well. The requirement is the Active Navigation menu Items should be highlighted on each active page.
The problem is that there is no id's for div and Ul/li tags for the navigation menu.
If there were any ID's i could have created a css and called those to selected. Also I can not modify any HTML code of any page.
Could you please suggest any way to make this work out.
Looking forward for your answer.
Regards,
S

The easiest solution may be looping through all <a>s and comparing window.location.href to the value of their href if you're able to modify the Javascript.
Something like this should work for you: http://jsfiddle.net/a7C8a/3/

Highlighting active panel in CSS without JavaScript

I'm building something similar to this - http://www.impressivewebs.com/demo-files/content-switcher/content-switcher.html
I wondered if anyone had any ideas as to how I can show the current panel in the navigation WITHOUT using JavaScript - pure CSS.
I'm fairly confidant it's not possible but I thought I'd ask anyway.
Just to clarify...
You'll notice that when you click a link on this page - http://www.impressivewebs.com/demo-files/content-switcher/content-switcher-javascript.html the link you just clicked on highlights to inform the user which panel they're looking at. That's what I want to do in CSS.

It's possible, believe it or not, it's just really tricky. This should get you started: http://thinkvitamin.com/design/css/how-to-create-a-valid-non-javascript-lightbox/ The key bit is captured in this quote:
I'm sure you are all aware of linking to an an element on the same page with the use of the ID attribute and how it works. However, you may not have known that linking to an element that is hidden off the page causes the element to be "pulled" into view as opposed to the window jumping down to that element.
So basically, you'd put all of your slides off-page and then have the numbered links use anchors to pull those into view. Your use case should be a bit simpler than the one she's doing, since you don't have to dim out the rest of the page.

What you need to do is to put what you need to slide inside a container with fixed size and "overflow" property set to hidden.
Then, inside this container, you put your "slidable" contents inside a list of anchor elements with "display" set to block and size the same of the container.
If, from a link on the page, you call one of the anchors in the list, the element with the correspondent anchor name will automgically show up..
simple as that.