CODEWITHSUNDEEP
htmlcsswordpress
David
David

Reputation: 5937

css :target - focus

Im using :target to change page content displayed which works no problem. But i'm having a issue where it jumps to the dom element selected by # in the url, which i would prefer not to do. So what i want to do is select a different point to jump too. This is in wordpress. Is there any way of dealing with this, maybe within the :target css?

html:

<article class="tabs">

<section id="Vehicle-Subscriptions">
    <h2><a href="#Vehicle-Subscriptions">Vehicles</a></h2>
    <p>Page 1</p>
</section>

<section id="Job-Subscriptions">
    <h2><a href="#Job-Subscriptions">Jobs</a></h2>
    <p>page 2</p>
</section>

<section id="Property-Subscriptions">
    <h2><a href="#Property-Subscriptions">Property</a></h2>
    <p>page 3</p>
</section>

</article>

css:

article.tabs
{
   position: relative;
   display: block;
   width: 90%;
   height: 15em;
   margin: 2em auto; 
}

article.tabs section
{
   position: absolute;
   display: block;
   top: 1.8em;
   width: 100%;
   left: 0;
   height: 12em;
   padding: 10px 20px;
   background-color: #ddd;
   border-radius: 5px;
   box-shadow: 0 3px 3px rgba(0,0,0,0.1);
   z-index: 0;
}


article.tabs section:first-child
{
   z-index: 1;
}

article.tabs section h2
{
   position: absolute;
   font-size: 1em;
   font-weight: normal;
   width:   15%;
   min-height: 1.8em;
   top: -1.8em;
   left: 0px;
   padding: 0;
   margin: 0;
   color: #999;
   border-style: solid;
   border-color: black;
   border-width: 3px ;
   background-color:#0af515;
   border-radius: 5px 5px 0 0;
}

article.tabs section:nth-child(2) h2
{
left: 22%;
}

article.tabs section:nth-child(3) h2
{
   left: 42.8%;
}

article.tabs section:nth-child(4) h2
{
    left: 63.5%;
}

article.tabs section:nth-child(5) h2
{
   left: 84.25%;
}


article.tabs section h2 a
{
   display: block;
   width: 100%;
   line-height: 1.8em;
   text-align: center;
   text-decoration: none;
   color: inherit;
   outline: 0 none;
}

article.tabs section:target,
article.tabs section:target h2
{
   color: #333;
   background-color: #fff;
   z-index: 2;
}

article.tabs section,
article.tabs section h2
{
   -webkit-transition: all 500ms ease;
   -moz-transition: all 500ms ease;
   -ms-transition: all 500ms ease;
   -o-transition: all 500ms ease;
   transition: all 500ms ease;
}

Upvotes: 1

Views: 629

Answers (2)

apaul
apaul

Reputation: 16170

Unfortunately it doesn't look like you will be able to do this with css alone, and
preventDefault() probably wont work either it looks like the least bad option will be to store the window's scroll position in a variable and "animate" to it...

Working Example

$("a[href^=#]").on("click", function (e) { // when #link is clicked
    var scroll = $(window).scrollTop(); // store window scrollTop in var
    $("html, body").animate({ // animate to stored position
        scrollTop: scroll
    });
});

Upvotes: 1

trysmudford
trysmudford

Reputation: 588

This can't be done within CSS but a little bit of Javascript will solve it:

$('.trigger').on('click', function( e ) {
    e.preventDefault();
});

Upvotes: 0

Related Questions