CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Gualter
Gualter

Reputation: 33

Is it possible to highlight an element (could be a text paragraph) in other page after click?

For example, in page 1, I have the link A which opens the page 2 and in that page it highlights a specific paragraph. Let's say, if page 2 is accessed from another page it will highlight other part the text. It's almost like an anchor to a specific area of the target page but adding the highlight on a block of content (text). I don't need a detailed solution for this, I will only need to know if it's possible and a very brief explanation. Thank you very much for your time.

Upvotes: 3

Views: 257

Answers (4)

3pic
3pic

Reputation: 1219

Of course it is possible.

Many ways. First idea in mind : php get. If you're not used to, you can find this tricky, but it is not at all. Hash method (see other answers) is good but this limits to one element only.

Let's say you have page A, --links--> page B with a parapgraph <p id="lorem42">...</p>that you want highlighted.

The link in page A: <a href="pageB.php?highlighted=lorem42">click me</a>

pageB.php: note the extension php ! :

     <?php /*put this line at the first line, thus it is a php file*/ ?>
      <html>
<head>
    <?php
      if( isset($_GET["highlighted"] && $_GET["highlighted"]!=""){

    /*get the id to highlight */
    $php_id_highlight = $_GET["highlighted"]/*lorem42*/ ;

    /* write the script in html */
    echo "<script>..JS to highlight element with id==$php_id_highlight</script>";
      }
        ?>
    </head>
    <body>
    <p id="lorem42">I can be highlighted if pageB is launched from page A !</p>
    </body>
    </html>

Now, Let's say you have page A, --links--> page B with 3 parapgraph <p id="lorem42">...</p>, <p id="lorem43">...</p>, <p id="lorem44">...</p>that you want highlighted.

The link in page A: <a href="pageB.php?highlighted=lorem42,lorem43, lorem44">click me</a>

Or you can highlight, change color... be creative

The link in page A: <a href="pageB.php?highlighted=lorem42&red=div42&animate=icons">click me</a>

Upvotes: 0

wiktus239
wiktus239

Reputation: 1420

Just in a way as you will be notified about this answer. What Stack Overflow does is, in addition to redirecting you to this question, is highlights my answer. It does that by taking an action based on a hash (#) in the URL. An example of this would be this hash about the comment I was notified recently:

Hashed URL example

with the #comment51329968_31694103 hash;

The action would be driven by either CSS or JS and it's up to you how you want your highlight to happen. Short answer is: it is possible.

Upvotes: 1

Frank Bryce
Frank Bryce

Reputation: 8456

You can use the :target CSS pseudo class. This link provides some good information.

Here is an example, but just pretend that the links are from different pages :)

:target {color: red;}
<a href="#one">First</a>
<a href="#two">Second</a>
<a href="#three">Third</a>
<a href="#four">Fourth</a>
<a href="#five">Fifth</a>

<div id="one">First Content</div>
<div id="two">Second Content</div>
<div id="three">Third Content</div>
<div id="four">Fourth Content</div>
<div id="five">Fifth Content</div>

Upvotes: 1

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123438

You could append an hash fragment to your link with the id of the element that contains the text that needs to be highlighted (e.g. href="page2.html#yourid"),

In page2.html apply this style using :target pseudoclass

#yourid:target {
   background: yellow;
}

Upvotes: 4

Related Questions