In my collection of styles, I have some interesting ones like:
.line{}
And also:
.line:focus{}
Each style has its own individual charm.
I am looking to use jQuery to focus on a div with the class .line and change its style to .line:focus. However, even after trying $('.line').focus();, the style remains unchanged. It seems that the div with the .line class is not being focused on as expected.
Any tips or suggestions would be greatly appreciated. Thank you in advance :).
$(".").focus() is limited in its functionality as it only works on specific elements. Focusing on a DIV element is not supported.
If you want to mimic the focus behavior, you can use the .click method instead:
$("div").click(function(){
$(this).toggleClass('focused');
if ($(this).hasClass('focused')){
// perform action when focused
}else{
// perform different action when not focused
}
});
It seems that <span>div</span> elements do not have a built-in focus state, so you will need to manually adjust the style of the div whenever one of its inputs is focused (and revert it back when the input is blurred).</p>
<pre><code>$("div.line input").focus(function() {
$(this).closest(".line").addClass("line-focus");
}).blur(function() {
$(this).closest(".line").removeClass("line-focus");
});
Remember to update
.line:focus { }
to
.line-focus { }
$('input').focus(function() {
$(this).css('background','purple');
});
Check out this demo
Here is the HTML code that I am working with: <? while($arr as $data) { ?> <td> <div> <a href="javascript:void(0)" class="status <?= $data['SUGGESTION_CD'] ?>"> <img src="images/activate.gif" /> &l ...
Currently, I am working on a small Russian project and facing some challenges with the mobile version of my website: php8098.github.io/breakfast. The issue lies within the first slider where the play button should trigger a modal window to open. I urgentl ...
My goal is to have the browser automatically download a PDF file that is received from an AJAX response. After reading about how to download a PDF file using jQuery AJAX, I attempted to simulate a click/download event in this way: var req = new XMLHt ...
Within the <head> section of my index.html, I have successfully utilized these links on localhost: <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link href=&apos ...
I need to update the quantity count in my database every time I click a specific button. Here is the Angular directive I am using: var count = 0 $scope.postNote = function () { var deferred = $q.defer() var token = $scope.userInfo.$$state.valu ...
My challenge is to position the bar close to the black footer. It appears correctly in Chrome, but not in Firefox and Opera. The screenshot shows how it looks in Chrome. However, in Firefox and Opera, the social bar is positioned lower and does not align ...
I recently added a new selector in the .css file for my Hugo website to implement MLA-style indentation for references. Here is the code snippet: .mla-ref { padding-left: 36px; text-indent: -36px; } Although this code creates a hanging indent as ...
I'm facing a challenge in enabling the click function for every link with the same class name and unique id. Currently, the click function is only working on the first link, but there could be any number of links - 1, 2, 3, or more... To tackle this ...
How can I properly manipulate the jquery code using the var keyword? And how can I effectively use it as a parameter in @url.action? I attempted to url: '@Url.Action("CreateDisease", "DiseaseLists", new {'"+diseaseID+"', '"+ assessmen ...
I am attempting to find a solution to create a page where the user can click on an image to open it while still keeping the other images available as options. I hope my explanation is clear enough for you to understand. The code might look something like ...
I've set up a page that dynamically generates a list of items. Each item in the list includes a button to submit a form with data specific to that item (the sorting is working correctly). The form submission is handled by the following jQuery code: & ...
I'm dealing with a JavaScript code that has a value stored in its variable that I need to pass to my JSP function. However, I'm facing trouble passing it along. Take a look at the following code snippets: Javascript: $('button').on(& ...
When it comes to filtering items based on specific criteria like fruit and vegetable filters, what is the most effective method to retrieve items that meet both filter requirements? fruitfilter: [] = [{fruitname: "apple"} , {fruitname: "orange"}] vegeta ...
I attempted to combine HTML and JS to change the color of a box upon clicking it, but after reviewing the code multiple times, I am unable to pinpoint the issue. <!doctype html> <html> <head> </head> <body> <d ...
I am currently working on retrieving data from the Eventbrite API. The information I am hoping to extract is the event names, which will then be added to a list. Within the render function, I aim to dynamically create buttons based on the number of event ...
I'm currently working on implementing a navigation to a specific anchor tag when the user clicks the continue button on the cart page. This project involves a mobile application built with Cordova, and the function call is done using jQuery. Here is ...
Currently, I am in the process of developing a filtering mechanism to sift through a dataset obtained from an API. The array that requires filtering contains objects with various parameters, but my aim is to filter based only on specific parameters. For ...
I have a menu bar with blocks inside a div. I am looking to create a jQuery script that changes the class of surrounding blocks in the menu when hovering over a specific one. My idea is to use a switch statement that checks the ID of $(this) and then modif ...
While using the JQGrid customer formatter to create a button, I am encountering an issue where the button is not displaying. function viewLineBtn(cellvalue, options, rowObject) { alert(cellvalue +","+options+","+rowObject); var rowid = options.row ...
I am looking to utilize JQuery to eliminate any empty commas from a given string. Take a look at the provided images for further clarity. ...