Clash Royale CLAN TAG

On Page Load Offset Value set to 0. On Inspection value is calculated

The goal is to use a url fragid to jump to a particular section on a separate page on page load. <a href="page.php#section>

<a href="page.php#section>

The unexpected behavior is that on page load the offsetTop does not seem to get calculated or the value gets overwritten.

console.log($("#section").offset());

<script>

jQuery(document).ready(function() {})

$(window).on('load', function() {})

all result in a console log of { top: 0, left:0 }.

{ top: 0, left:0 }

However once the file is loaded, I manually open Dev Tools and enter console.log($("#section").offset()); and it returns the expected output of { top:200px, left: 200px }.
- When I load the page without calling the LESS file the calculation happens. This leads me to believe that it is a race condition with LESS. However this seems strange that LESS would be fighting and overwriting a html:5 function.

console.log($("#section").offset());

{ top:200px, left: 200px }

less.min.js

2 Answers
2

with javascript

window.onload = function (){
"use strict";
document.body.addEventListener("load",function(){
// your code here
});
}

with jquery it's easy

$("body").on("load",function(){
// here code
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Append a simple URI query component to the value of the href attribute of your anchor.

href

<a href="page.php?hash=section">Click here</a>


Then, add code on page.php to handle the URI query in the GET request.

page.php

GET

<!-- at bottom of markup just before end body -->
<?php if (@$_GET['hash'] === 'section') echo '<script>window.location.hash="section";</script>'; ?>
</body>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.