CODEWITHSUNDEEP
javascriptcsstransparencyhighlightinghtml
Kaci
Kaci

Reputation: 31

How to link to highlighted text on another page

I have a static HTML page where I am using span tags and javascript to highlight selected portions of text. On a separate page, I would like to link back to this HTML page and have specified highlighting active. See provided code below.

The issue is the required style="background: transparent" tag. It has to be there so that the highlight is only active when clicked upon, but this also means that when I attempt to link to this page as specified below, the highlight is not active.

Any help would be much appreciated. Thanks.

Clicking this link highlights specified portions of text in the document. 

<span title="Warscape"><a title="Warscape" onclick="highlightSpan(this.getAttribute('title'))" href="">Warscape</a></span>

This is the text that is highlighted when clicked.

<span title="Warscape" class="highlight" style="background: transparent">During this month while we have been building Fort No 1 Spring field Missouri, quite a No of Regiments have arrived from the north &amp; now the Army of the Frontier [is?] formed</span>

Code to link to page with highlighting.

<a href="j_62sept.html?highlight=Warscape">

CSS re. highlighting

.highlight {background:#bcdbda;}

Javascript re. highlighting

function highlightSpan(spanTitle)
{
var spans = document.getElementsByTagName("span");
// take away color
for (var i = 0; i < spans.length; ++i)
{
    spans[i].style.backgroundColor = "transparent";
}
// add color
for (var i = 0; i < spans.length; ++i)
{
    if (spans[i].getAttribute('title') == spanTitle)
    { 
        spans[i].style.backgroundColor = "#bcdbda";       
    } 
}
}

Upvotes: 3

Views: 6455

Answers (3)

sahmeepee
sahmeepee

Reputation: 532

I recognise that this is an old thread, but this problem can now be addressed for Chrome using the Scroll to Text Fragment feature described here:

https://chromestatus.com/feature/4733392803332096

In short, it allows you to provide a link which jumps to a specific string of text and (in Chrome's implementation) highlights that section. A basic version of the link would look like this:

https://en.wikipedia.org/wiki/Cat#:~:text=Felis%20catus

Upvotes: 8

GAgnew
GAgnew

Reputation: 4083

This is an interesting question. If you'd like to have the javascript pick up on parameters in the url, you can use the window.location.href parameter to pull it out. So, quite simply the following function:

function CheckForHighlight(){
    href = window.location.href;
    values = href.split('?')[1] // Remove the url
    highlight = values.split('=')[1]; // Grab the second parmeter
    highlightSpan(highlight); // Highlight it!

}

Please Note that this is a very basic example. I encourage learning through simplicity, and this function can be expanded to dynamically parse all url varaibles. Brain Exersise for you!

Upvotes: 0

Janez
Janez

Reputation: 2406

when your clicking the links to the page where the highlighting takes action (<a href="j_62sept.html?highlight=Warscape"> ) you need to somehow read querystring value on that page to highlight the right span. You can use javascript for this. See this example: http://www.bloggingdeveloper.com/post/JavaScript-QueryString-ParseGet-QueryString-with-Client-Side-JavaScript.aspx

Upvotes: 0

Related Questions