weird CSS

  • Resolved pressward

    (@pressward)


    13 years, 3 months ago

    I’ve got a simple test-plugin running in the admin area, with a textarea inside a form. It has its own css and js files, but, of course, it is subjected to the site-wide styling.

    However, I can’t tell what and where in the standard WP style sheets or javascripts (and/or jquery code) is causing the following:

    my textarea box doesn’t let me mouse-click-focus: as soon as I click inside of it, the cursor bounces up to a text input above it.

    My broad, general question is: Where do I look to find the “offending” css or javascript? I seem to have looked everywhere (just followed all the js and css files and looked through them)

    I’m running version 3.4.2 (there is a reason I haven’t updated to latest)

    Is there a jQuery command I can run at the console, to see what unwanted css and/or functions are attached to that textarea object?

    I can refer to the textarea object via jQuery in the console, but don’t know what attached property or method to check.

    thanks

    EDIT: Probably a better title for this post would have been “DHTML weirdness” — as it’s probably not mere “CSS”

Viewing 5 replies - 1 through 5 (of 5 total)
  • Odai Athamneh

    (@heyodai)

    13 years, 3 months ago

    Do you know about Google Chrome’s “Inspect Element” command? You right-click in an area, select Inspect Element from the menu, and the interface appears.

    This allows you to examine what CSS is being applied to any particular element, as well as disable or add new elements. Firefox has a plugin called Firebug that does similar.

    I’m not sure of a way to see functions attached to an object, though.

    Thread Starter pressward

    (@pressward)

    13 years, 3 months ago

    @odai: You rock!

    I’ve been to that section of Chrome before, but, until you pointed it out, I’ve had to spend many minutes drilling down the tree, expanding the outline, just to get to one element I wanted to inspect. Always wondering if there’s a quicker way. Plus I never fully realized how thorough and useful the information in the right panel really was!

    It’s awesomely comprehensive — and, yes, it has an “Event Listeners” section (in addition to “Styles”, “Metrics”, “Properties”), and each section is super-thorough/verbose, exhibiting the contextual chunks of code and references to code files affecting the element. It spells out EVERYTHING, including directives which are overridden by other directives (those are crossed out), and in multi-element css, the element you’re inspecting is highlighted in bold.

    I have not yet thoroughly read through all of my textarea’s info to solve my problem — there is a lot of it — but I hurry to post this confirmation here. Probably would be a useful bit of info on the Plugin development forum here, also.

    To be sure this is on-topic: This Chrome feature is definitely a useful utility for hacking and extending CMS’s like WordPress.

    (Have not tried firebug for this yet)

    Odai Athamneh

    (@heyodai)

    13 years, 3 months ago

    Wow, thanks! I never thought much about what the Event Listeners do, that will come in handy.

    Thread Starter pressward

    (@pressward)

    13 years, 3 months ago

    slight correction of my previous post.

    I should have said “the REFERENCE” in:

    “, the REFERENCE TO THE element you’re inspecting is highlighted in bold.”

    Thread Starter pressward

    (@pressward)

    13 years, 3 months ago

    Hmm… Looks like I had messy, asymmetrical/inconsistently-nested <label>, <span>, <input> and <textarea> tags, and this apparently made the cursor jump out of the textarea box.

    I still don’t know how exactly (whether it was the combination of bad html and some other code up the chain of scripts/styles), but cleaning up the html seems to have fixed it.

    thanks.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘weird CSS’ is closed to new replies.