CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Rohit Soni
Rohit Soni

Reputation: 23

Highlight element of another page by clicking a link

I have two HTML document, home.html and courses.html
home.html has 4 links each representing(linked) to a part of code(div) on courses.html

What I want: When a link is clicked on home.html and it is redirected to a specific part of courses.html then that part should glow (maybe by box-shadow) to attract reader's attention. home.html(rough view)

courses.html(roughly showing effect I want)

PS: I'm just a beginner and I know only HTML, CSS, Javascript so if this effect is possible using these languages then it will be really great. If not, then pls make me understand that code.
Thanks

Upvotes: 1

Views: 4265

Answers (4)

vijay
vijay

Reputation: 492

Make the link like

home.html

<a href="courses.html?highlight=something">Go to something</a>

*say you want to highlight an element whose id=something

On courses.html page run a function on document ready to check for any highlights.

JQUERY:

$( document ).ready(function() {
    CheckForHighlight();
});

function CheckForHighlight(){
    href = window.location.href;
    values = href.split('?')[1] // Remove the url
    highlight = values.split('=')[1]; // Grab the second parmeter
    $('#'+highlight).addClass('highlightedElem');
    //highlightedElemclass has box shadow or border
}

CSS:

.highlightedElem{
   box-shadow:0px 0px 10px blue;
   border:1px solid blue;
}

Upvotes: 0

Kuhan
Kuhan

Reputation: 583

If I understood correctly, css box shadow for a:hover is enough on this

This is css part

a:hover {
  text-decoration: none;
  box-shadow: 2px 2px 2px 2px red;
}

This is the html part

<a href="">for a link 1</a>


a:hover {
  text-decoration: none;
  box-shadow: 2px 2px 2px 2px red;
}
<a href="">for a link 1</a>
<a href="">for a link 2</a>
<a href="">for a link 3</a>
<a href="">for a link 4</a>

Upvotes: -1

Ori Drori
Ori Drori

Reputation: 191976

You can use the :target pseudo class on the intended sections in the 2nd page. Note that the anchor name (the hash after the #) is identical the target element id.

The example works on a single page, but the principle will work on 2 or more pages as well.

div:target {
  border: 2px solid pink;
}
<!-- source page -->
<a href="#section1">Go to 1</a>
<a href="#section2">Go to 2</a>
<a href="#section3">Go to 3</a>
<a href="#section4">Go to 4</a>

<!-- target page -->
<div id="section1">Example 1</div>
<div id="section2">Example 2</div>
<div id="section3">Example 3</div>
<div id="section4">Example 4</div>

Upvotes: 5

Itay Ganor
Itay Ganor

Reputation: 4205

Well, you can use the location.hash. When redirecting the user to the courses.html page, redirect to an URL with a hash parameter in the URL. for example: /courses.html#link1.

Then, ON the courses.html page, add this script:

$("#"+location.hash).css('box-shadow', '0 5px 5px #08c1c6');

I'm using jQuery for better readability. What it does is simple: Adds box-shadow to the element which has the ID of the URL hash parameter. You should add an ID attribute to the divs you want to mark, and then the script will add box-shadow according to the # parameter in your URL.

Javascript version for the code:

document.getElementById(location.hash).style.boxShadow = "0 5px 5px #08c1c6";

Upvotes: 0

Related Questions