All geek questions in one place

CSS - How to auto-navigate by color on a page when loading a page

I have a page that I work on daily, and I need to view the page for text with HTML:

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

How can I use CSS to automatically jump to that color or HTML when the page loads? Is there any way?

I cannot edit html since it is not hosted locally and I do not have write access, read only. I am currently using Stylebot to change css for my own display purposes and want to know if I can do the same to automatically go to this color section.

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

Thank!

+4
source share
2 answers

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 landing page from the host into the "result" element, and then uses some javascript after loading to jump to the color elements tr. If the page requires scripts on external style sheets, etc., they must 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 JQuery

2

, iFrame ( , )

<!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>

3

, : 1) , 2) Developer Tools, 3) " " "", 3) Ctrl-F (' # ddcef2 '), 4) " "

+2

, :

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

Source: https://habr.com/ru/post/1664567/

More articles:


All Articles