Highlighted

Anchor tags not working in some versions of Chrome

Contributor ,
Nov 29, 2017

Copy link to clipboard

Copied

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

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() {

TOPICS
Browser, Product issue

Views

8.9K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Anchor tags not working in some versions of Chrome

Contributor ,
Nov 29, 2017

Copy link to clipboard

Copied

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

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() {

TOPICS
Browser, Product issue

Views

8.9K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 29, 2017 0
Adobe Community Professional ,
Nov 29, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 29, 2017 0
LEGEND ,
Nov 29, 2017

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 29, 2017 1
Contributor ,
Nov 29, 2017

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 29, 2017 0
LEGEND ,
Nov 29, 2017

Copy link to clipboard

Copied

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() {

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 29, 2017 0
Contributor ,
Nov 29, 2017

Copy link to clipboard

Copied

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.

Screen Shot 2017-11-29 at 1.37.41 PM.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 29, 2017 0
LEGEND ,
Nov 29, 2017

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 29, 2017 0
Contributor ,
Nov 29, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 29, 2017 0
LEGEND ,
Nov 29, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 29, 2017 1
Contributor ,
Nov 29, 2017

Copy link to clipboard

Copied

Thank again

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 29, 2017 0
New Here ,
May 18, 2019

Copy link to clipboard

Copied

Thank you! you save my day (y)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 18, 2019 0