Is there a way to make the page open at a specific div halfway down the page instead of starting from the top?
Here is an example:
<div id="d1">
<div id="d2">
<div id="d3">
<div id="d4">
<div id="d5">
<div id="d6">
Does anyone know how I can make the page open directly at #d4 without manually adding it to the URL? Any suggestions on how to approach this, possibly using HTML or JavaScript? Your help would be greatly appreciated.
<script>
function ScrollToElement(theElement){
var selectedPosX = 0;
var selectedPosY = 0;
while(theElement != null){
selectedPosX += theElement.offsetLeft;
selectedPosY += theElement.offsetTop;
theElement = theElement.offsetParent;
}
window.scrollTo(selectedPosX,selectedPosY);
}
</script>
To discover the position of a div, refer to this website and subsequently apply the given JavaScript instruction:
window.scroll(0, DIV_LOCATION); // specifying horizontal and vertical scroll positions
UPDATE: My mistake! I missed the exception... please disregard!
Reminder to self: Always read the whole question before answering!
End UPDATE
An alternative solution is to utilize an HTML anchor tag
<a name="d1" />
<div id="d1">
<a name="d2" />
<div id="d2">
<a name="d3" />
<div id="d3">
<a name="d4" />
<div id="d4">
<a name="d5" />
<div id="d5">
<a name="d6" />
<div id="d6">
By including the anchor name in the URL when navigating to the page, for example pagename.htm#d4
Remember to properly close your div tags.
Best of luck,
Patrick
To change the location using Javascript, you can:
location.href = '#d4';
Struggling with customizing the comments section of a WordPress theme? Utilizing jQuery for styling can be tricky, especially when dealing with nested UL elements like admin comments. The challenge lies in traversing the DOM structure to target specific el ...
I wrote a React component named Workout that looks like this: const Workout = props => { console.log(props); return ( <div> <h1>hello</h1> </div> ); }; export default Workout; Next, I imported this componen ...
I've written this function: settings_rc_left.on('click', function(){ var settings_list_last_element_id_one = settings_menu_element.attr('id') == 'r_02', settings_list_last_element_id_two = settings_menu_eleme ...
Is there a way to center a fixed div inside its parent element? I'm trying to make the fixed div have the same width as its parent, but it's not working. What could be causing this issue? Check out this example on jsFiddle Here is the HTML code ...
Is there a way to access and programmatically unmount a component instance loaded from Vue Route and persisted using <keep-alive> and <component>? I am working on a dynamic tab system where each tab renders a URL which displays its declared com ...
Check out the live demonstration on Jsfiddle http://jsfiddle.net/hc046u9u/ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materializ ...
Looking to create a class that takes a filename as a parameter in the constructor, loads the file using XmlHttpRequest, and stores the result in a class variable. The problem arises with the asynchronous nature of request.onreadystatechange, causing the ge ...
I am facing an issue with importing an SVG file as a component and trying to obtain its dimensions, but it keeps returning null. Can someone provide me with advice on how to resolve this? PS. When I try using getBBox(), it throws an error. Here is the co ...
My goal is to adjust the position of the orange plus sign (located in the lower right corner of the screen) so that it aligns better with the other icons, directly below them. I've tried using padding-bottom, but it doesn't seem to work, while pa ...
I'm currently in the process of developing a webpage using vuetify and nuxt. My main focus right now is adjusting the max-width property of the expansion panel UI component (https://vuetifyjs.com/en/components/expansion-panels). Here's the code s ...
Can you use puppeteer to programmatically submit a form without a submit input? I have been successful with forms that include a submit input by using page.click('.input[type="submit"]'), but when the form does not have a submit input, focusing o ...
I have multiple dropdown selection menus where changing the option in one menu affects the options in the next menu, and so on. I want to programmatically trigger a change (without user interaction) in the dropdown menu that will activate the JavaScript f ...
I am working on a react navigation bar where I want to emphasize each navigation item with a carat when the user is on a specific URL or route. I have been trying to use the :after pseudo-class in Sass to add the carat, but it's not working as expecte ...
I recently created a JavaScript file with over 6000 lines of code for various sections of my website. I'm debating whether to keep it as one large file or break it up into smaller parts and call them in their respective sections. What do you think? ...
Encountering an issue, I set out to enhance readability by adjusting letter-spacing to 1px. Displeased with the result, I attempted a half pixel spacing of 0.5px but found it ineffective. Subsequently, I experimented with em attributes but failed to accomp ...
Can you please break down this function in a straightforward way (without using arrows)? I'm having trouble understanding if "foo" in Promise.resolve "foo" is an argument or a callback function. module.exports = function foo(req, res, next) { retu ...
Having just started coding in javascript/VB.NET, I am struggling to get my Button2 onClick event to work properly. The Code-Behind Click Event for Button1 in Page.aspx.vb: Protected Sub _lnbComments_Click(ByVal sender As Object, ByVal e As System.EventAr ...
After researching the issue of printing blanks in Safari, I discovered that a white flash occurs before the print dialog can grab the content of the iframe. All my javascript works perfectly in every browser except for Safari. When attempting to print, it ...
I am currently in the process of developing multiple sliders for a website that I am building. As I reach the halfway point, I have encountered a problem that has stumped me. With several sliders involved, I have successfully obtained the length or count ...
I’ve been experimenting with the Scrollspy feature in Bootstrap 4 for my Portfolio Page, but I’m facing some issues getting it to work properly on Codepen. After doing some research on StackOverflow, I came across a working example on Codeply, here’ ...