Tips for creating a bookmarkable link in JavaScript

I've encountered an issue with distinguishing and bookmarking several links on a page. For example, if I have a contact.php page with multiple jQuery click events linked to different sections such as 

www.mywebsite.com/contact.php#accountant
, 
www.mywebsite.com/contact.php#developer
. The problem arises when clicking these links in the browser - they do not navigate directly to the specific contact details section.

You can view the problematic page here.

I've tried adding the following code snippet from main.js:

$('#contact' + $('a[href="'+window.location.hash+'"]').get(0).className.replace('contact', '') ).fadeIn(3000);

However, the issue still persists. Any assistance would be greatly appreciated. Thank you.

javascriptjqueryhtmlcsshyperlink

Answer №1

When the page loads, check for any values in the window.location.hash and execute your code accordingly.

Answer №2

To enhance your webpage, insert the following code within your 

$(document).ready(function(){...});
function - avoid placing it inside any click event in your js/main.js script:

var number = $('a[href="'+window.location.hash+'"]').get(0);
if (number != undefined) {
  number = number.className.replace('contact', '');
  $('#contact' + number).fadeIn(3000);
}

This code snippet is similar to line 23 in your main.js file with a slight modification. It searches for an anchor element containing a reference that matches the window's hash location, retrieves the DOM element using .get(0), extracts the class name excluding 'contact', and displays it with a fading effect.

Answer №3

To extract the search query from your address, you can follow these steps:

if(window.location.hash) {
  // You must enable the div according to this information.
  // The method may vary depending on the script in use.
} else {
  // Fragment is not present
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to display only the thumbnail on WordPress archive page and remove the post excerpt

I am currently in the process of revamping my category archive to resemble a grid layout by utilizing custom CSS. I have successfully eliminated the elements I desired using code like this: .archive .entry-footer { display: none; } Now, I only have t ...

csswordpress

Use Bootstrap to center list items while keeping them aligned to the left edge

Using this particular Bootstrap modal on a website (simplified version with fewer list items): #manufacturer-modal .modal-body { padding: 0; } #manufacturer-modal .nav-item { list-style: none; } #manufacturer-modal .nav-link { font-size: 1.2em; ...

htmlcsstwitter-bootstrapbootstrap-modalbootstrap-5

How to showcase a single JSON object using AngularJS

When I retrieve news with a specific id from my REST API, using ng-repeat to display all news works fine. However, when I try to display a single object, this method does not work. My route code: .when('/displaynews/:id',{ templateUrl: &apo ...

javascriptangularjsjson

Stop horizontal overflow of content

This unique Vuetify demo on CodePen showcases a two-column layout. The first column contains a <v-list> enclosed in a green <v-alert>. By clicking the "toggle text" button, you can switch the title of the first list item between short and long ...

cssvue.jsvuetify.js

Creating a 3D Slicing Tool using Javascript and Three.js

I am currently working on a web application that utilizes three.js to estimate the cost of a 3D printing model, along with other functionalities. After successfully calculating the bounding box and volume of the object, I am now focusing on generating sli ...

javascriptthree.jsslice

Conceal the URL and any parameters upon successful completion of AJAX request

In my ajax js code, the solonreport.jsp file returns a URL link that connects to a local report server and generates an Excel report. However, when using this link with the window.open(json.url) function, the link and parameters are visible to the user. ...

javascriptjqueryhtmlajax

Tips for utilizing CSS flexbox to create a row of squares that can scale while maintaining their aspect ratios

Struggling with this issue has me on the verge of pulling my hair out. It seems like a simple task, yet I can't seem to achieve perfection. My goal is to create a row of squares that maintain their aspect ratio but scale down in size as their containe ...

htmlcssflexboxcss-gridresponsive

Transferring ipywidgets to a web platform

I've developed a Python program in Jupyter Notebook that leverages the interact function from the ipywidgets module. interact(my_func, filter_by=filter_by_list, format_type=format_dict.keys()) I am looking for a way to share this interactive widget ...

javascriptpythonhtmljupyter-notebookipywidgets

What could be the reason for the mismatch in size between the downloaded file in Express.js and the file size on the server?

My code using express.js is quite simple: app.get("/download", download); and export let download = async (req: Request, res: Response) => { const file = "/tmp/my-file.zip"; res.download(file); } The client-side code is also straightforward: im ...

javascriptnode.jsexpress

Troubleshooting: jQuery Validate extension function malfunctioning

After adding the rule below to an existing jQuery Validate script using an extension, the code breaks and does not validate at all. Despite trying various combinations of commas and using the accept method with mimetypes, nothing has worked so far. When I ...

jqueryjquery-validate

Navigation bar at the bottom using Twitter Bootstrap 3 that includes a combination of full-width and regular containers

I've been tasked with recreating the designer's layout using Bootstrap. The desired layout consists of two full-width bars and a fixed container for the main content and footer menu. I have successfully implemented this layout, including respons ...

htmlcsstwitter-bootstrap

What is the best way to execute an asynchronous request in AngularJs and Typescript?

Despite its simplicity, I can't seem to find an answer to this question as I am relatively new to Javascript, Typescript, and Angular. I have searched extensively without success. My objective is to send a basic request to a server and handle the res ...

javascriptjqueryangularjstypescript

Is Angular capable of displaying a date within a specific timeframe using ng-show?

So I have a button that, when clicked, displays a list of data. I am adding a unique font awesome icon in there if the JSON key value exists. However, here lies the issue. The particular key happens to be a date. I need my ng-show function to check whether ...

javascriptangularjsjsonfont-awesome

Tips for implementing a fallback image in v-img using Vuetify

Within my Vuetify application, I am utilizing a v-img component and I am looking to implement a fallback image in case the primary one fails to load. <v-img :src="cPicture" contain v-on:error="onImgError"></v-img> cPicture ...

javascriptvue.jsvuejs2vue-componentvuetify.js

Encountered a problem parsing JSON data that begins with "var ..."

While attempting to retrieve a JSON file from a server, I encountered an issue. The JSON file contains the following data: var reviews = [ { "firstName":"Simon", "lastName":"Lock", "fullName":"Simon Lock", "location":" ...

javascriptjson

Why am I seeing numbers in the output when I log the data from the res.write(data) function in Node.js?

While working with Node.js on my Raspberry Pi, I encountered an issue where reading a local file 'test.html' resulted in hex output instead of the expected HTML format. Can someone explain why this might be happening? Additionally, I am aware tha ...

javascriptnode.jsraspberry-pi

Question about the 'form-floating' class inconsistency in Bootstrap version 5.2

Currently utilizing Bootstrap 5.2, I have integrated a form with the following snippet: <div class="row mb-2 align-items-center"> <div class="col-sm-4"> <label class=&qu ...

csswebformsbootstrap-5

Utilizing VUE with Socket.io or vue-socket.io Integration

I've been working on connecting using socket.io (client) and websocket.org (server) with vue.js. Despite going through all the examples, I can establish a connection to the socket but when I emit the event BOARD_ID, I don't receive any response. ...

javascriptvue.jssocketswebsocketsocket.io

Issue with Tailwind CSS table header alignment not properly aligning to the right

Currently, I am facing an issue with tailwindcss where the headers in my table are not following the text-right / text-left / text-center directives. If you want to see the problem yourself, here's a link to the fiddle: https://jsfiddle.net/3u2jgqoc/ ...

htmlcsstailwind-csstext-alignment

Implementing a dynamic star rating system with Django using AJAX and JavaScript

Currently, I am in the process of integrating a star rating system into my Django website. After some research, I came across a star design that I really like on this page: https://www.w3schools.com/howto/howto_css_star_rating.asp My knowledge of JavaScr ...

javascriptdjangoajaxdjango-views