I'm struggling with a CSS challenge:
#box:target {
box-shadow: 0px 0px 20px black;
}
Here's the scenario: On my "parent" page (page1), I have a button that redirects you to another page called "page2.html#box". This causes the #box:target styles to be applied when the page loads. However, on page1, there is also another button that triggers a function to change the properties of #box:target. I've been searching for a solution in javascript to achieve this without using :focus.
Gentle Reminder
An Update Regarding the Initial Post Draft
The original post has undergone significant edits resulting in a different question. If this response seems confusing, please take a moment to review the modifications made. I apologize for any inconvenience caused.
:targetFor a simple style switch, you do not require JavaScript. It seems there might be some misinterpretation of the prerequisites for utilizing the :target pseudo-class.
Include two <a> anchor tags along with a targeted tag type.
<a>ON</a> <a>OFF</a> <section>SECTION</section>One
<a>will act as the "on" switch for applying the new style to the specified<section>, while the other will serve to turn it off.
Next, assign an #id to the targeted <section>. Both <a> elements must have an href attribute with distinct values (refer to the comment below this example):
<a href="">ON</a> <a href="">OFF</a> <section id="S">SECTION</section>ON: Should be ☝ OFF: Must be a ☝
The target's #id:#S"non-jumping" value#/
In your CSS, define two sets of rules:
#S { width: 44vw; height: 44vw; border: 4px solid #444 }
:target pseudo-class:
#S:target { text-shadow: 4px 4px 4px 4px #444; }
Your HTML structure should resemble the following setup:
<a href="#S">ON</a> <a href="#/">OFF</a> <section id="S">SECTION</section>
html,
body {
font: 900 10vh/1 Consolas;
}
a {
color: blue;
}
a:hover,
a:active {
color: cyan;
}
#B {
box-shadow: 12px 5px 8px 10px inset rgba(0, 0, 0, 0.4);
border: 6px inset rgba(0, 0, 0, 0.8);
width: 40vw;
height: 40vh;
font-size: 20vh;
text-shadow: 4px 7px 2px rgba(0, 0, 0, 0.6);
}
#B:target {
box-shadow: 12px -5px 4px 4px rgba(0, 0, 0, 0.4);
text-shadow: 4px -3px 0px #fff, 9px -8px 0px rgba(0, 0, 0, 0.55);
}<a href="#B" class='on'>ON_</a><a href="#/" class='off'>OFF</a>
<figure id='B' class='box'>
<figcaption>BOX</figcaption>
</figure>I'm looking to create a card with rounded top corners and wondering if there is a way to achieve this. Currently, here is the code I have: <div id="card1"> <div id="card1i"></div> </div& ...
I am sorry if the title has caused any confusion, but it is exactly as it states. I want to create a testimonial card using a table as the base. I have almost completed it, but I am struggling with the final touches. For instance, I want to implement a fun ...
Looking to extend the functionality of the DataView object by creating a custom type and adding extra methods, but unsure of the correct approach. Attempted the following: var CustomDataView = function() { this.offset = 0; }; CustomDataView.prototype ...
Currently, I am developing a web version for my Android app. Within the app, there are numerous utility files such as a class that formats strings in a specific manner. I am wondering if there is a way to write this functionality once and use it on both ...
This is a code snippet relating to an object Obj.prototype.save = function (fn){ var aabb = Obj.reEditName(this.name, function(newName) { return newName; // Additionally attempted var foo = newName; return foo; ...
When the page loads, my AngularJS controller.js initializes the scope model by fetching data from an AJAX response: services.InitializePage().then(function (response) { $scope.DataModel = response.data; Shortly after that, the model undergoes ...
I am working on creating a right triangular prism. Here is the current code I have: var triangleGeometry = new THREE.Geometry(); triangleGeometry.vertices.push(new THREE.Vector3(-1.0, 1.5, 0.95)); triangleGeometry.vertices.push(new THREE.Vector3(-1.0, ...
My goal is to modify the color of two cubes based on a certain variable. I have created both cubes and intend to adjust their color according to how close or far they are from each other. The cubes were generated using the following code: geometry = new ...
Trying to implement a function that triggers an input field to appear upon clicking an element using the onclick event. Let's take a look at the code below. <!DOCTYPE html> <html> <body> <button onclick="createMessage()">New ...
Currently, I am developing a mobile web app and would like to incorporate the JQuery Slider control. http://docs.jquery.com/UI/Slider However, in order to do so, it seems that the entire JQuery core (29kb compressed & gzipped) is needed. My question ...
I'm encountering an issue with the application I'm developing. It involves working with an Oracle database to retrieve information and display it on a webpage in a table format. However, I am interested in exploring alternative methods for workin ...
Struggling with converting an input value into a string. HTML: <input type="text" placeholder="Email Ex: john123" id="emailinput"> <input type="text" placeholder="Domain Ex: @gmail.com" id="domaininput"> JS: let emailVal = document.getElem ...
Currently, I am working on a project that involves a Vuex module and abstract components that users can extend. My goal is to clean up my codebase by separating this project into a well-tested module and publishing it on NPM. In order to achieve this, I ha ...
https://jsfiddle.net/7v0dyfo3/ This is the concept I am attempting to implement for a listing, albeit without proper styling. While it looks good on most screens, the issue arises with its resizing behavior. I aim for the episode-box div to adapt its heig ...
I am currently working on an MVC project where I need to display the user's current location city in the top right corner of a webpage. The first javascript code fetches the city name, and the second one retrieves the weather conditions of that city. ...
In order to ensure proper access control for the application I was developing, I structured my routing system to cascade down based on user permissions. While this approach made sense from a logical standpoint, I encountered difficulties in implementing it ...
Whenever I input npm outdated, it shows a similar output like this: Package Current Wanted Latest Location columnify 1.1.0 1.1.0 1.2.1 /usr/local/lib > npm > columnify cmd-shim 1.1.2 1.1.2 2.0.0 /usr/local/lib & ...
I have developed a code that incorporates Angular JS form validation methods. There are two separate forms within the codebase, The initial form utilizes basic form validation while the second form employs ng-messages, However, an issue has arisen wher ...
The for loop will iterate over the length of req.body, executing a Customer.find operation in each iteration. The resolve function will then be called with an array containing the results of all the find operations. let promise = new Promise(function(res ...
Trying to extract the answer from this question's comment. The current code is displayed below, but struggling with removing the Dealing with an Unexpected token } error in Chrome console. Any ideas on how to fix this? Also looking for a Chrome pl ...