CSS - How to autonavigate to a color on the page when page loads

Question

I have a page that I work on daily and I need to look through the page for text that has HTML of:

<tr style="background-color:#33FF00">

How can I use CSS to auto navigate to that color or HTML code when the page loads? Is there a way?

I cannot edit the html as it's not hosted locally and I don't have access to write access, only read. I am currently using Stylebot to modify the css for my own display purposes and want to know if I can do the same to auto navigate to that colored section.

If there is a way similar to using style bot but for HTML like userscripts etc, I am not familiar enough so if you have a workaround any tutorial would be great to show me how to implement it.

Thanks!

Try and see if the section has an id then add that to the url of the page. CSS ids start with a # (The url would look like this: mycoolwebsite.com/#mycoolid — , Dec 22 '16 at 13:12
As the line of HTML you provided doesn't contain an ID, you cannot auto-navigate to that element. You could, if you're familiar with it, use for instance TamperMonkey or GreaseMonkey to insert IDs on every element, and then use that to navigate to, but that is a bit more complex. — junkfoodjunkie, Dec 22 '16 at 13:18
It doesn't have an ID unfortunately. It's just I'm not really familiar with userscripts to add ID's on every element. Plus the actual location of the colored text is different on every refresh so it's not in the same position everytime I load the page. — compunerd3, Dec 22 '16 at 13:27
Do you need anything else on the page or just that one element? — , Dec 22 '16 at 13:36
It's one element but there are lots of results that have green that I will be checking. My main request would be to either navigate to the first green result that has the TR Style or else the last. I can then speed up my process of checking that page. — compunerd3, Dec 22 '16 at 13:37
This is a long shot but you could try something along the lines of setting everything to ` {display: none}`, then only displaying elements - it would look something like this and it has to overwrite every other css selector (load at the very bottom) ` *{display: none} tr {display: table-row}` — , Dec 22 '16 at 13:40
I edited my answer to give you the whole html page. You will need to modify sourceUrl to whatever your target page is. — longestwayround, Dec 22 '16 at 13:44
But all the elements are TR, some have white background and some have green background so how would that differ between the two? — compunerd3, Dec 22 '16 at 13:47
You're correct. it won't work that way - I wasn't aware that all elements are — , Dec 22 '16 at 13:49

score 2 · Answer 1 · edited May 23 '17 at 11:45

UPDATED

Copy and paste the code below into a text file and save it as an html file. Then open it in a browser.

This code loads the target page from the host into the 'result' element, then uses some post-load javascript to navigate to the colored tr elements. If the page requires scripts on external stylesheets, etc., these need to be loaded explicitly.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$.ajaxPrefilter( function (options) {
  if (options.crossDomain && jQuery.support.cors) {
    var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
    options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
    //options.url = "http://cors.corsproxy.io/url=" + options.url;
  }
});
$(document).ready(function(){
  var sourceUrl='https://en.wikipedia.org/wiki/Main_Page';
  var sourceScript='https://en.wikipedia.org/wiki/Main_Page';
    $( "#result" ).load(sourceUrl, function() {
      $.getScript(sourceScript, function(){
         alert("Script loaded and executed.");
      });
      $('html, body').animate({
            scrollTop: $('tr').filter(function(){
              var color = $(this).css("background-color").toLowerCase() || $(this).css("background").toLowerCase() ;
              return color === "#33ff00";
            }).position().top
        }, 100);
    });
});
</script>
</head>
<body>

<div id="result"></div>

</body>
</html>

from jQuery scroll to element and JQuery Find Elements By Background-Color

UPDATE 2

Or, in an iFrame (but only works if you are on the same domain as the target page)

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function onLoadHandler(){
var $iframe = $("#result").contents();
 var trs=$iframe.find('tr');
   $iframe.find('html,body').animate({
    scrollTop: trs.filter(function(){
      var color = $(this).css("background-color").toLowerCase() || $(this).css("background").toLowerCase() ;
      return color === "#33ff00";
    }).position().top
  }, 100);
 };
</script>
</head>
<body>

<iframe id="result" src="FRAMESOURCE" style="top:0;left:0;width:100%;height:700px" onload="onLoadHandler();"> </iframe>    
</body>
</html>

UPDATE 3

If none of these work, try: 1) load your page in a browser, 2) open Developer Tools, 3) go to the Page Inspector or Elements tab, 3) Ctrl-F and search for your color string ('#ddcef2'), 4) right-click the first highlighted element in your search results and select "Scroll into view"

Thanks, I have tried this just using the source as http://google.com but it won't load. I have 1.html and jquery.min.js in the same folder on my desktop but when I load the html page it's just a blank screen. — compunerd3, Dec 22 '16 at 13:52
have you modified the sourceUrl variable to match your target URL? — longestwayround, Dec 22 '16 at 13:54
I noticed that your color, which I copy/pasted, was not lower-case. I will edit accordingly. — longestwayround, Dec 22 '16 at 13:56
Yes I changed sourceURL to http://google.com and also tried the site page I work on but it's still a blank page. — compunerd3, Dec 22 '16 at 13:57
I see that you have a cross origin request, so I added the code snippet to allow that request. — longestwayround, Dec 22 '16 at 14:06
So all I should do is change sourceUrl to the url I want to load? I tried it with your update and it's still a blank page across 3 browsers. — compunerd3, Dec 22 '16 at 14:09
It should work now (I got around to testing it against wikipedia). Copy the code I have just edited and just change the sourceUrl variable. — longestwayround, Dec 22 '16 at 14:16
Thanks, so it works for me for wikipedia and google but the images are missing etc, I don't mind that but it's not working for my page at all. Any reasons why it wouldn't load the page I visit? — compunerd3, Dec 22 '16 at 14:23
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/131259/discussion-between-longestwayround-and-compunerd3). — longestwayround, Dec 22 '16 at 14:42

score 0 · Answer 2 · answered Dec 23 '16 at 19:32

0

Try and see if that does the trick:

* {
  display: none
}
[style*=background-color:#33FF00] {
  display: table-row
}

answered Dec 23 '16 at 19:32

CSS - How to autonavigate to a color on the page when page loads

2 Answers2