How to make it so you click an item on one page and it highlights it o

Page 1 of 1

3 Replies - 822 Views - Last Post: 26 July 2010 - 07:00 AM Rate Topic: -----

#1 CodeVillain  Icon User is offline

  • D.I.C Head

Reputation: 11
  • View blog
  • Posts: 143
  • Joined: 10-July 10

How to make it so you click an item on one page and it highlights it o

Posted 25 July 2010 - 07:28 PM

How to make it so you click an item on one page and it highlights it on another

I imagine there are probably a few ways to do this, and I don't doubt that PHP is one of those ways so it's the method I'd like to use.

Essentially what I have is a list of displayed items on my homepage and another page with a list of all items on it. What I would like to do is make it so that when you select one of the items on the homepage, it will redirect you to the page with all the items on it and scroll down to and highlight that item.

Now the simple way (simple because I don't know a better way) I could do this would be to just create a new page for each item which scrolls down to it and has it highlighted, but I imagine there's probably a better way to do this that I'd like to learn.

Does anyone have any suggestions on how this can be accomplished? Again, I have a list of items, I'd like someone to be able to click on an item on one page and for it to redirect them to the complete list of items with the one they clicked on highlighted.

Thanks in advance to anyone who offers any insight into this.

Edit:

Perhaps I should make this more clear. I want to do something similar to linking to a document with the <a name=""> attribute. Except, what I would like this to do is change an element when I go there, for example. I could have like <a name="this">This is a title</a> and then if someone were to click on <a href="#this">this</a> it would then proceed to highlight "This is a title" besides just scrolling to where it is in the document.

Again, I imagined PHP might offer the ability to do something like this, if I'm wrong then anyone who can point me in the right direction I'd appreciate it.

This post has been edited by CodeVillain: 26 July 2010 - 12:40 AM


Is This A Good Question/Topic? 0
  • +

Replies To: How to make it so you click an item on one page and it highlights it o

#2 cokacola  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 4
  • View blog
  • Posts: 52
  • Joined: 23-July 10

Re: How to make it so you click an item on one page and it highlights it o

Posted 26 July 2010 - 05:55 AM

Well, some of this can be done in PHP, but some will most likely require javascript.

You could start by adding an ID to each element on the page it redirects to, sort of like this:
<p id="item1">Item Title 1</p>
<p>Text Goes Here</p>
<p id="item2">Item Title 2</p>
<p>Text goes here</p>


Then, on your first page, add links like this:
<a href="page2.php?id=item1">Item 1</a>
<a href="page2.php?id=item2">Item 2</a>


Then, you can use this javascript for scrolling:
document.getElementById("<?php echo $_GET['id']; ?>").scrollIntoView();

and this javascript code to highlight it:
element = document.getElementById("<?php echo $_GET['id']; ?>");
element.style.background = "red";

so, the javascript code would look like this(put this in between <head> and </head>)
<script type="text/javascript">
    function pageLoaded() {
        document.getElementById("<?php echo $_GET['id']; ?>").scrollIntoView();
        element = document.getElementById("<?php echo $_GET['id']; ?>");
        element.style.background = "red";
    }
</script>

Also, change your body tag from this:
<body>

to this:
<body onload="pageLoaded()">

So, try that out and tell me how it goes.
Hopefully it will work :)

This post has been edited by cokacola: 26 July 2010 - 06:59 AM

Was This Post Helpful? 1
  • +
  • -

#3 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 2892
  • View blog
  • Posts: 7,540
  • Joined: 08-June 10

Re: How to make it so you click an item on one page and it highlights it o

Posted 26 July 2010 - 06:13 AM

View Postcokacola, on 26 July 2010 - 12:55 PM, said:

so, the javascript code would look like this(put this in between <head> and </head>)
<script type="text/javascript">
    document.getElementById("<?php echo $_GET['id']; ?>").scrollIntoView();
    element = document.getElementById("<?php echo $_GET['id']; ?>");
    element.style.background = "red";
</script>

So, try that out and tell me how it goes.
Hopefully it will work :)

it won’t. simply because the document tree (including the designated element) is not ready yet. you would have to wait until that’s finished (put the code in a function and execute that on load or DOMContentLoaded).
Was This Post Helpful? 3
  • +
  • -

#4 cokacola  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 4
  • View blog
  • Posts: 52
  • Joined: 23-July 10

Re: How to make it so you click an item on one page and it highlights it o

Posted 26 July 2010 - 07:00 AM

Oh, sorry about that.
I updated my post to something that should work.
Was This Post Helpful? 1
  • +
  • -
Page 1 of 1