I am looking to modify the background color when I hover over various links in my navigation menu. For example, when hovering over link one, the background should turn red; for link two, blue; and for link three, green. However, I also want the background color to stay the same once I'm on those pages - so page 1 will have a red background, page 2 a blue background, and page 3 a green background.
Save the background color information for all links in cookies. When you navigate to a page, retrieve the cookies and compare their values to set the background color accordingly.
For instance, if you hover over link1, store a cookie with a key-value pair like "link1color": "red," and repeat this process for other links. Upon visiting a page, check the cookies, locate the matching one for that page, extract the background-color, and apply it to the background.
Here's a cool trick you can try out.
<a href="#" class="change-bg-color" data-bg-color="#ff0000">Link 1</a>
<a href="#" class="change-bg-color" data-bg-color="#00ff00">Link 2</a>
<a href="#" class="change-bg-color" data-bg-color="#0000ff">Link 3</a>
<script>
$('a.change-bg-color').hover(function(){
// Change the background color
$(body).css('background-color', this.getAttribute('data-bg-color') );
},function(){
// Revert back to the original color
$(body).css('background-color', '#fff' ); // Assuming #fff is the default bg color
});
</script>
If you want each of the "Link 1", "Link 2", and "Link 3" pages to have different background colors, consider creating page-specific CSS classes. This method eliminates the need for javascript.
To optimize your website's performance, consider storing background colors in an array and dynamically updating them using JavaScript or jQuery based on the specific requirements of a particular page. By defining the array globally, you can easily access it from anywhere within your application, ensuring quick access and efficient memory usage.
Method :
Create three distinct classes in your CSS - like styleBlue, styleRed, styleGreen
.styleBlue { background-color : 'blue' }
Utilize the hover event to switch the class assigned to the link using addClass and removeClass.
Save the current class value in a session variable.
Apply the class from the session variable to the current page.
Another effective approach is to assign unique hover classes with different id/class for each navigation item, especially if the navigation menu is not extensive. By attaching these classes to your specific navigation hover effects, you can easily enhance the user experience. Good luck!
I am facing a situation where I have to store images in multiple directories. To achieve this, I have configured multer as follows: app.use(multer({ dest: path.join(__dirname, '`public/assets/img/profile`'), rename: function (fieldname, ...
I have a webpage that updates latitude and longitude values from the database every few seconds and displays them. I am successfully using Server-Sent Events to achieve this functionality. However, I'm facing an issue with passing these latitude and l ...
Currently, I am in the process of learning how to create my own blog by following a tutorial on Github. The tutorial can be found at https://github.com/adrianhajdin/project_graphql_blog. However, while working with [slug].js to build localhost/3000/post/re ...
In my project, I have two main directories: "src" and "specs". The webpack configuration entrypoint is set to a file within the src directory. Additionally, the context of the webpack config is also set to the src directory. There is a postinstall hook in ...
As a newcomer to Mermaid, I am attempting to integrate it into my Angular project. Placing it in my HTML has proven successful. <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/9.0.1/mermaid.min.js"></script> <div class="merma ...
I am facing an issue with a PHP script that is supposed to parse an array using the json_encode() method, but it returns a blank output. Here is the PHP code snippet: $companies = $db->getCustomerNames(); print_r($companies) if (!empty($companies)){ $ ...
Can anyone guide me on how to hide multiple columns using jQuery with the ID tag? I've tried implementing it but it doesn't seem to work. I also attempted to switch to using Class instead of IDs, but that didn't solve the issue either. Any h ...
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <div class="row"> <div clas ...
Located inside my.component.html <nested-component [class]="nestedClass"></nested-component> Now, when wanting to utilize my component, both style classes need to be specified: <my-component class="my-component-style" nestedClass="nested- ...
I have recently started working with Angular.js and I am attempting to create a custom directive with a controller containing functions that is connected to another controller. I want the object in the main controller ($scope.MyObj) to update in sync wit ...
I am currently working on a functionality where I retrieve latitude and longitude from a JSON file and display markers on a Google map. However, my issue is that only one marker is appearing on the Google map, while the others are not showing up. Below i ...
Recently, I've been exploring the idea of incorporating a jQuery BeforeAndAfter plugin into my angularJS app. However, I've encountered an issue with dynamically setting the width and height of images with different dimensions. Here's what I ...
Incorporating an upload form/group on my page has been successful, although I have encountered a limitation in adding a reset/clear function to it. The control setup is as follows: <div id="uploadform" style="width:100%;" data-provides="fileu ...
Recently, I came across an interesting solution to a problem with a PHP application. It was discovered that placing the Java Script in the body section resolved the issue where CSS file attributes were being ignored when clicking the Alert box. In my code ...
The magnifying glass icon inside the orange search bar at the top of this page is not appearing as a link, so when hovered over there is no pointer.. Any thoughts on why this might be? Below is the CSS: .searchGlass { background-image: url(/images/search ...
I need to add around 12500 lines to my database for a game server map. This script helps me generate the query: sql = "INSERT INTO `legends`.`map` (`x`, `y`, `land`, `collision`, `impedance`, `effect`) VALUES " for (y=0;y<ig.game.collisionMap.data.leng ...
When working inside a repeater's ItemTemplate, I encountered an issue where only the first image/div toggled visibility when the toggle button/link was pressed. The images are dynamically loaded from the database and the toggle function seems to only ...
Whenever I try to access this API through the browser, everything works fine and I receive the correct response. However, when I attempt to call the API using jQuery AJAX, I encounter an error. *The script is being refused execution from 'http://api ...
Seeking guidance on implementing a Solar System using THREE.js and encountering an issue: Error message: Cannot read property 'appendChild' of undefined Below is the current code snippet: <html> <head> <meta charse ...
Currently in the process of developing a signup page with React, utilizing Node JS for the Backend. Encountering an issue when attempting to call the signup api on the Backend as it results in the following error message: "api.js:31 Refused to connect to & ...