What are the steps to modify the appearance of an input box in IE7 when it is in focus?

It's common knowledge that IE7 has its fair share of issues...

I've scoured through countless posts here and on Google, all pointing me towards setting the style manually with onfocus() and onblur(). Alas, nothing seems to be working!

This is the jQuery code I've been testing:

    $(document).ready(function(){                       

        if (jQuery.browser.msie === true) {

        $("input.date-picker").each(function(i) 
            {
                var $foo= $(this);
                $foo.bind('onfocus onblur', function() {
                    $(this).toggleClass('smalltxt-active');
                    });

            });                

            }//end if


     });

Accompanied by this corresponding input box:

<input name="ctl00$SelectionContent$Selections1$txtDestinationDate" type="text"
id="ctl00_SelectionContent_Selections1_txtDestinationDate" class="date-picker" 
style="width:80px;" />

I have double-checked that my code is successfully detecting MSIE. It's also showing a count of 2 input.date-picker objects.

Any bright ideas?

Thanks a bunch in advance,

Answer №1

$foo.bind('onfocus onblur', function() {

should be

$foo.bind('focus blur', function() {

You don't really need to use an each-loop,

$("input.date-picker").bind('focusin focusout', function(){
  $(this).toggleClass('smalltxt-active');
}

It's perfectly fine. This will target all input elements with the 'date-picker' class and bind the events to them. You may also want to check out more about the .focusin() and .focusout() events.

Answer №2

experiment with this code snippet for multiple form elements

$("input, select, button").on('focusin focusout', function(){ $(this).toggleClass('focu'); });

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

What is the best way to display MySQL data in a jQuery dialog box?

I have a question regarding implementing dynamic content from a database into a jQuery UI Dialog box. Within my table, I am generating blog posts using PHP and MySQL. Each post has a link that allows users to view the content associated with it. The link ...

Can you please tell me the term used to describe when a background adjusts and follows the movement of a mouse cursor?

Just wrapped up freeCodeCamp's HTML & CSS Responsive Web Design course and noticed a cool feature in some portfolios that I'd like to learn. However, I'm not sure what it's called. Here are some examples: The video game Escape From Ta ...

Arranging data in a listview with asp.net C#

Sorting in the listview from code behind is a common task, and it can be achieved with the following code: protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) BindListView(""); } public DataTable GetEmployeeData(string que ...

What could be causing the disappearance of the replaced div content after a refresh?

Does anyone have experience with using jquery in conjunction with django? I am currently trying to update the content of a div after successful user authentication. While my code is functional, I'm facing an issue where upon page refresh, it reverts b ...

Avoid rendering the React component until the AJAX call has completed

Suppose the following code is given: componentDidMount() { $.ajax({ type: 'GET', url: '/data/', dataType: 'text', success: function(response) { this.setState({data: response}) ...

Using ng-repeat in conjunction with jQuery and Rails

When working with ng-repeat to loop through JSON objects, I encountered a challenge trying to add {{code.id}} as a parameter for a Rails route. For example: card_url( @car, {{card.id}} ) I understand that this is not possible because Rails renders the ro ...

Utilize external stylesheets in dash-bootstrap exclusively for the accordion component

Could you please provide guidance on how to apply external_stylesheets only to the accordion component in the main section of my app? Currently, the style is being applied to the entire app which is causing unwanted changes. Thank you in advance for your ...

Confused by the jQuery menu script

Although I may not be the best at jQuery, I made an attempt to write a script on my own. Here's the situation: I have a navigation menu with a "Services" button. When I hover over it, a drop-down menu appears. To avoid distracting users, the "Main", " ...

Converting a real-time webcam stream into RTMP encoded video

I am currently developing a platform that allows users to go live using their webcam through a web app utilizing the webRTC concept. Although my code is fairly basic, I would appreciate it if you could take a look: <script> (function () { consol ...

What are your strategies for designing a website specifically for mobile users?

Today, most modern smartphones come with 720p or 1080p resolution screens. This means that even on smaller screens, like a 4-inch display on a Galaxy s3, we can still view all the text and GUI elements (such as email textboxes) on a website when we first o ...

Using HTML or JavaScript to generate a multitude of identical HTML elements on a webpage

I am currently designing a page that requires the presence of numerous tree illustrations with leaves, spanning across the width at the bottom of the page. I have considered two methods to achieve this. One option is to create a single set of trees and lea ...

Instructions on incorporating a class into an "li" element when triggered by the role attribute as "alter"

I have a WordPress website and I'm using the "Contact Form 7" plugin to create forms. While they provide shortcodes, I had to resort to using HTML to customize it for my client's specific requirements. Within the form, ARIA attributes and role=" ...

Tips for validating a form with the assistance of jQuery

While there are multiple answers out there for this particular question, I am specifically interested in validating an entire form with dynamic input fields sourced from a database similar to Google Forms. HTML <div class="rs_card"><spa ...

Obtain the JavaScript value from a custom ASP.NET control textbox

I have created a unique asp.net custom control that utilizes a text box, which is used in various sections of a form. How can I retrieve the value entered into the text box from different instances of this custom control? Although I am using the syntax be ...

The use of DIV tags allows the element to be displayed in an inline

In my project, I decided to add three div tags. The first two are positioned next to each other with the third div tag placed below them. However, when I tried to insert a slideshow into the first div tag, all of the div tags ended up displaying as "block" ...

Is it possible to have both a Navbar and Sidebar concurrently using Bootstrap?

I have a slightly unconventional request - I want to incorporate the sidebar from along with the navbar-default example from http://getbootstrap.com/components/#nav. What would be the best approach to merge these two elements? Or is there a different pa ...

ensure protection against unauthorized class modification via browser console (security vulnerability)

Currently interning as a second-year student in development, I have been tasked with adding an authentication system to a website. Although it "works," I believe the code is subpar and am seeking advice on best practices for improving this solution. The p ...

Discover the following `<td>` identifier through the act of clicking on a separate `<td>` element

I have a few td's with specific ids: <td id="first">first</td> <td id="second">second</td> <td id="third">third</td> <td id="fourth">fourth</td> Whenever I click on one of the td elements, I want to re ...

"Resolving conflicts: Dealing with jQuery's noConflict and undefined

I've been struggling with getting this to work and have searched through various Q&A's about jQuery's noConflict() without finding a solution that fits my specific circumstances. If this question has already been answered elsewhere, I apolog ...

Customize jQuery slideDown animation to have a specific height and handle overflow situations

Below is the HTML snippet I am working with: <div class="text">bla bla bla bla</div> <div class="button">Show</div> Here is the corresponding CSS: .text{ height:100px; overflow:hidden; } Imagine the .text div contain ...