"Utilize jQuery to target and highlight specific HTML elements when redirecting

I am working with a list of elements and I want to be able to redirect the focus to a specific element using a URL.

  <div id="20"></div>
  <div id="21"></div>
  <div id="22"></div>

  // example url
  http://localhost:8080/#21

  var current_url = window.location.href;
  // Extract the string after #
  var id = current_url.substr(current_url.indexOf("#") + 1);
  $('#'+ id).css('border', '1px solid rgb(204, 255, 248)');

The above jQuery code selects the element with id 21 based on the URL;

however, if the URL does not contain a #, it results in the following error:

Uncaught Error: Syntax error, unrecognized expression: #http://localhost:8000/admin/dashboard

Could someone please advise me on how to resolve this issue? Thank you.

Answer №1

Instead of using the entire URL, consider utilizing location.hash in your code.

var id = location.hash;

if (id)
{
  $(id).css('border', '1px solid rgb(204, 255, 248)')
}

The error you are experiencing is likely due to the presence of special characters in the URL that jQuery might not recognize.

Alternatively

Ensure to check for the hash before proceeding with any actions.

if (location.href.indexOf("#") != -1)
{
  // perform desired actions
}

I hope this explanation helps resolve the issue.

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

Efficiently Displaying Multiple HTML Elements in React Native WebView

I am currently working on developing an Epub reader in React Native and facing a challenge. I need to find a way to efficiently transfer multiple html content files from the Epub container to the webview in order to achieve seamless pagination. ...

What are the best methods for ensuring a website maintains consistent visibility across all different screen sizes?

Recently, I created a website tailored for a viewport size of 1366px by 768px. My goal is to maintain the same design regardless of the browser window size without implementing responsive design techniques. For instance: When viewing the website on a 360 ...

Creating an artistic blend by layering p5.js drawings over images in an HTML canvas

I'm having a tough time solving this issue. My goal is to overlay circles on top of an image, ideally using HTML for the image. However, I just can't seem to make it work. let img; function setup() { createCanvas(800,800); img = loadImage(&qu ...

What occurs when Render() is called during animation in React?

Curious about how React handles rendering during a component's animation? Let's explore an example where a component is re-rendered due to a state change triggered during its animation. Imagine a scenario where a component's animation lasts ...

Centering an image (svg) vertically inside a link tag

I've been struggling to vertically center the config button (#config) and none of the options I've tried worked the way I wanted. Here is a link to my CodePen: http://codepen.io/fenwil/pen/ONRXwz Here is the crucial part of the code that need ...

Dealing with h2 text overflowing within a bordered container

I need help creating an h2 element with a double border. Here is my current HTML+CSS snippet: h2.titulo { width: 100%; margin: 10px 0; padding: 10px 0; text-transform: uppercase; font-weight: 400; font-size: 30px; display: block; color: ...

textarea label align: center

I've been struggling to center-align the label for this textarea within the text box, but so far my attempts have failed. The resulting display resembles the following: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxx ...

Efficiently incorporating styles and CSS, as well as Bootstrap CDN, into window.print() while utilizing Vue.js

I am trying to print from my Vuejs component and apply CSS and Bootstrap styles to the printed page. Currently, I am using window.print() inside the mounted lifecycle hook as shown below: export default { mounted() { ...

Silky animations in kinetic.js (html5 canvas)

I am seeking a better grasp on kinetic.js animation. Recently, I came across a tutorial at . After experimenting with the code provided, I managed to create an animation that positions my rectangle at x coordinate 100. However, I am struggling to achieve s ...

Element with negative z-index overlapping background of parent element

I am currently working on creating a CSS3 animated menu, but I am facing an issue where elements with low z-index values are displaying on top of their containing elements. This is causing the "sliding out" effect to be ruined. Here is the HTML: <html ...

Transfer documents through HTML POST method, connecting to an API, Lambda function, and eventually storing them in an s3 bucket via the Amazon API Gateway protocol, labeled as

I have successfully implemented code to upload a single file to s3 using lambda/api. This works with an html post request. Originally, I followed a YouTube tutorial on Amazon API Gateway (video reference: p26). However, I now need to modify the code to h ...

Following the submission of a message, the textarea automatically inserts a line-break

Can someone please help me troubleshoot an issue with my chat app? Every time I try to send a message, the textarea adds a line break instead of just focusing on the textarea so I can send a new message smoothly. I have recorded a video demonstrating the ...

What could be causing OnChange to malfunction within Formik?

Formik in React is giving me trouble while working on a dummy app. When I set the value prop for the input boxes, I am unable to type anything. However, if I remove the value props, I can type but it doesn't reflect in the values when submitting. Tak ...

CSS to target every second visible tr element using the :nth-child(2n)

My table has a unique appearance (shown below) thanks to the application of CSS nth-child(2n). tr:nth-child(2n) {background-color: #f0f3f5;} I made some elements hidden on the vID, ID, and MO_Sub tr. <tr style="display:none"> The table's new ...

The flex box structure crumbles, causing the boxes to align side by side instead of in a masonry layout

I'm currently facing a challenge with my project regarding the utilization of flexbox. Everything seems to be in order, but as you resize your viewport to around 1400px, the column layout collapses. I'm looking for a way to prevent this from hap ...

Stopping horizontal scrolling in Material-UI Autocomplete/Popper: A troubleshooting guide

I am currently working on incorporating the Material-UI Autocomplete component, and my goal is to have each option label show an icon along with some text. The challenge I'm facing is that I only want the popper element to be the width of the text inp ...

"Unfortunately, the JavaScript external function failed to function properly, but miraculously the inline function

Struggling to create a fullscreen image modal on the web? I was able to get it working fine when embedding the script directly into my HTML file, but as soon as I moved it to an external JS file, things fell apart. I've double-checked all the variable ...

Using Javascript to access a website from a Windows Store application

Currently, I am working on a project to create a Windows store app using HTML and JavaScript. One of the key components of my app involves logging into a specific website with a username and password. Here is an example website for reference: The process ...

Tips on resolving JavaScript's failure to adjust to the latest HTML inputs

I'm working on a homepage where users can choose their preferred search engine. The issue I'm facing is that even if they switch between search engines, the result remains the same. I've experimented with if-then statements, but the selecti ...

Preventing the user from using the mouse wheel until the CSS animation finishes

I am working with multiple functions that are triggered by scrolling the mouse wheel up and down. These functions must be called in a specific order, but the issue arises when users scroll quickly causing the CSS animations from the previous function to ...