html - CSS - How to autonavigate to a color on the page when page loads -
i have page work on daily , need through page text has html of:
<tr style="background-color:#33ff00">
how can use css auto navigate color or html code when page loads? there way?
i cannot edit html it's not hosted locally , don't have access write access, read. using stylebot modify css own display purposes , want know if can same auto navigate colored section.
if there way similar using style bot html userscripts etc, not familiar enough if have workaround tutorial great show me how implement it.
thanks!
updated
copy , paste code below text file , save html file. open in browser.
this code loads target page host 'result' element, uses post-load javascript navigate colored tr
elements. if page requires scripts on external stylesheets, etc., these need 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 , 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 element , jquery find elements background-color
update 2
or, in iframe (but works if on same domain 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 page in browser, 2) open developer tools, 3) go page inspector or elements tab, 3) ctrl-f , search color string ('#ddcef2'), 4) right-click first highlighted element in search results , select "scroll view"
Comments
Post a Comment