Have div selected when users arrives at URL#divid

Question

I'm trying to have a page with multiple amazon products which are each within their own divs and the tags are unique id's:

<div  class="product">
<a id="lite1" href="http://www.amazonAffLink.com">
<img class="aligncenter" src="http://www.imageForTheLink.com" />
</a>
</div>

I have 21 products like this on 1 page (id="lite1 through lite21") and need 2 things to happen.

1: Person arrives directly to the product on page with an offset (so the product isn't at the very top of the screen cutoff but toward the set) after clicking link

That div is lit up (I guess :selected when they arrive)

My css now is

.product {
  display: inline-block;
  position: relative;
  min-width: 250px;
  border: 2px solid #fff;
}

.product:hover {
  border-color: #3bb3b3;
}

So this gives me the selected on mouseover, but it should be immediately selected so user can tell which product they are looking at based on what they just clicked from a previous page/ebook.

Thanks so much in advance! I'm not sure if it needs js or jquery but whatever gets the job done is fine.

score 0 · Accepted Answer · answered Nov 03 '15 at 23:05

0

You can use the :target pseudo-class to change the style of the element that matches with the given id in the url hash:

:target {
    border-color: #3bb3b3;
}

As per the scrolling, the normal behavior is that the browser itself should scroll to the element that matches the fragment in the url.

Regardless if it's a same-page link or not, the browser behavior is the scroll the page until that element is at the top of the page. Or, as far as it can if it can't scroll that far. This is rather important to know, because it means exploiting this "stated" behavior is a bit tricky/limited. source

answered Nov 03 '15 at 23:05

taxicala

21,408
7
37
66

:target worked! Thank you. I do still need to offset it so the item is in the middle of the page. Top: -100px isn't working though. Isn't there a way to do it? – ramitaste Nov 03 '15 at 23:37
@ramitaste check out this question that i think it might help you http://stackoverflow.com/questions/4086107/html-positionfixed-page-header-and-in-page-anchors – taxicala Nov 04 '15 at 00:03

user3495690 · Answer 2 · 2015-11-03T23:19:10.070

Both of these things can be accomplished with jQuery.

The auto-scrolling function can be achieved with this plugin: http://plugins.jquery.com/scrollTo/. Simply use the following syntax to scroll to a specific element on the page:

$(element).scrollTo(target[,duration][,settings]);

Alternatively (and preferably, if you know precisely where these elements will appear on the page), you could use the window.scroll function:

window.scroll(x-coord, y-coord);

As for the "selected" option, this should be done through a class. You should have the class set using the "onclick" event and the jQuery toggleClass or addClass/removeClass functions, like so:

$(".product").click(function(){
   $(".product").not(this).removeClass("selected");
   $(this).toggleClass("selected");
})

Have div selected when users arrives at URL#divid

2 Answers2