Anchor tags not working in some versions of Chrome

[kineticcreative123]

Hey all,

It was brought to my attention that anchor links have issues in certain versions of Chrome. I have your standard setup. Does anyone know a workaround? Below is a link to the page and here is my setup. It works for me but not everyone I've tested it on.

Link from menu:

<li><a class="btn-nav" href="#pluses">Features</a></li>

Section it links to:

<section class="features-section-1 relative background-semi-dark"  id="pluses">

Thank you

Here is the page:

starton - landing page template

[Jon Fritz]

Validate your html. You have quite a few errors that could cause issues in random browsers.

Run the html through http://validator.w3.org/nu to get a listing of your issues.

[osgood_]

It's hard to tell what the geezer who produced that template was on when they were buidling it....

Try adding a simpler script to the page, directly before the closing </body> tag:

<script>

$(function() {

$('a[href*=#]:not([href=#])').click(function() {

if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

var target = $(this.hash);

target = target.length ? target : $('[name=' + this.hash.slice(1) +']');

if (target.length) {

$('html,body').animate({

scrollTop: target.offset().top -80

}, 1000);

return false;

}

}

});

});

</script>

</body>

You should also move the <script> which is at the top of the page to join those at the bottom, put it after you have added the <script> above and then delete <script src="http://code.jquery.com/jquery-latest.min.js"></script> as you already have a link to the jQuery library further up (I didnt see that when helping you out earlier)

<!-- new video -->

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>

$(document).ready(function() {

$('#page-overlay, #lightbox-wrapper').hide();

$('.show_video').click(function(){

$('.view_video').html("<iframe  width='640' height='390' src='https://www.youtube.com/embed/KizaRwJxEy0' frameborder='0' allowFullScreen>" + "</iframe>");

$('#page-overlay, #lightbox-wrapper').fadeIn();

});

$('.close-lightbox').css('cursor','pointer').click(function() {

$('.view_video').html('');

$('#page-overlay, #lightbox-wrapper').fadeOut();

});

});

</script>

[kineticcreative123]

Hey osgood!

Perfect. Thanks. I think I added that extra js source. Whoops. Not sure why it was there. Note to self to move all scripts out of the header.

Can I ask your suggestion on the video you helped me with on this page? On a small laptop the X to close out the video is sometimes behind the top bar with the logo. Is there a way to close the video by clicking on the page (or off the video) to close?

[osgood_ · Accepted solution]

kineticcreative123  wrote

Can I ask your suggestion on the video you helped me with on this page? On a small laptop the X to close out the video is sometimes behind the top bar with the logo. Is there a way to close the video by clicking on the page (or off the video) to close?

2 things you can apply to correct that issue.......

1. Add z-index: 10000; to the #page-overlay css selector: (that will ensure the overlay is always infront of the top menu bar).

#page-overlay{

position:fixed;

z-index: 10000;

left: 0px;

top: 0px;

height: 100%;

width:100%;

background: rgba(0, 0, 0, 0.7);

}

2. Also you can add #page-overlay to the jQuery script: (that will give the option of clicking on the overlay to close the modal window in addition to being able to click on the x).

Dont forget to add the comma infront of .close-lightbox (cant really see it too well below)

$('.close-lightbox, #page-overlay').css('cursor','pointer').click(function() {

[kineticcreative123]

Hey there,

It seems the overlay is on at page load. See screenshot. this is my revised script:

<script>

$(document).ready(function() {

$('#page-overlay, #lightbox-wrapper').hide();

$('.show_video').click(function(){

$('.view_video').html("<iframe  width='640' height='390' src='https://www.youtube.com/embed/KizaRwJxEy0' frameborder='0' allowFullScreen>" + "</iframe>");

$('#page-overlay, #lightbox-wrapper').fadeIn();

$('.close-lightbox, #page-overlay').css('cursor','pointer').click(function() {

});

$('.close-lightbox').css('cursor','pointer').click(function() {

$('.view_video').html('');

$('#page-overlay, #lightbox-wrapper').fadeOut();

});

});

</script>

I tried just removing z-index: 10000; as well but didn't help.

[osgood_]

Your complete jQuery script should be like below, you have dumped the line I previously posted in the incorrect place...

<script>

$(document).ready(function() {

$('#page-overlay, #lightbox-wrapper').hide();
$('.show_video').click(function(){
$('.view_video').html("<iframe width='640' height='390' src='https://www.youtube.com/embed/KizaRwJxEy0' frameborder='0' allowFullScreen>" + "</iframe>");

$('#page-overlay, #lightbox-wrapper').fadeIn();
});
$('.close-lightbox, #page-overlay').css('cursor','pointer').click(function() {
$('.view_video').html('');
$('#page-overlay, #lightbox-wrapper').fadeOut();
});
});

</script>

[kineticcreative123]

Perfect! Thanks. Just out of curiosity how does the order effect how it works?

[osgood_]

kineticcreative123  wrote

Perfect! Thanks. Just out of curiosity how does the order effect how it works?

We'll if you dont get it in the right order it doesnt work, breaks the script - much like if you don't connect a plug up correctly you get no light, the electricity doesnt get through, or you get a nasty shock

[kineticcreative123]

Thank again

[napoleonl17313649]

Thank you! you save my day (y)