473,856 Members | 1,836 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Displaying CSS Styles on Element Mouse Over

Hi there,

I am a relative CSS & JavaScript novice and I have a particular
problem that is beyond my level of knowledge so I thought I'd tap the
collective wisdom of this group.

I would like to know if there is a means of writing JavaScript that
will dynamically display the styles which are currently applied to any
DOM element on a web page ( i.e., those applied by ID, those applied
by class, etc.) as the user moves their mouse over them.

Ideally the styles would be displayed in a tooltip style pop-up layer
which would remain displayed until the user mouses off the element.
But how exactly the styles are displayed is not critical. The idea is
that the web page itself would act as a sort of live stylesheet
reference, dynamically revealing to the user which styles are being
applied to which elements, allowing a stylesheet author to know which
styles they need to customize to affect a given element.

I would greatly appreciate any help or suggestions you may have on how
this can be achieved in a way that will work consistently in most
popular modern browsers.

Many thanks in advance.

Sep 26 '07 #1
4 2719
On Wed, 26 Sep 2007 04:22:05 -0000, in
comp.infosystem s.www.authoring.stylesheets splounx <sp*****@gmail. com>
<11************ *********@50g20 00hsm.googlegro ups.comwrote:
>| Hi there,
|
| I am a relative CSS & JavaScript novice and I have a particular
| problem that is beyond my level of knowledge so I thought I'd tap the
| collective wisdom of this group.
|
| I would like to know if there is a means of writing JavaScript that
| will dynamically display the styles which are currently applied to any
| DOM element on a web page ( i.e., those applied by ID, those applied
| by class, etc.) as the user moves their mouse over them.
|
| Ideally the styles would be displayed in a tooltip style pop-up layer
| which would remain displayed until the user mouses off the element.
| But how exactly the styles are displayed is not critical. The idea is
| that the web page itself would act as a sort of live stylesheet
| reference, dynamically revealing to the user which styles are being
| applied to which elements, allowing a stylesheet author to know which
| styles they need to customize to affect a given element.
|
| I would greatly appreciate any help or suggestions you may have on how
| this can be achieved in a way that will work consistently in most
| popular modern browsers.
|
| Many thanks in advance.
If you are using Firefox you can download the Web Developer Toolbar.
The Information submenu can do what you want and more.
-- -------------------------------------------------------------
jn******@yourpa ntsyahoo.com.au : Remove your pants to reply
-- -------------------------------------------------------------
Sep 26 '07 #2
On Sep 26, 5:22 am, splounx <splo...@gmail. comwrote:
Ideally the styles would be displayed in a tooltip style pop-up layer
which would remain displayed until the user mouses off the element.
But how exactly the styles are displayed is not critical. The idea is
that the web page itself would act as a sort of live stylesheet
reference, dynamically revealing to the user which styles are being
applied to which elements, allowing a stylesheet author to know which
styles they need to customize to affect a given element.
Firebug's DOM inspector perhaps?
http://dorward.me.uk/tmp/ZZ19A0D46F.jpg
http://www.getfirebug.com/

--
David Dorward
http://dorward.me.uk/
http://blog.dorward.me.uk/

Sep 26 '07 #3
On Sep 26, 3:05 pm, David Dorward <dorw...@gmail. comwrote:
On Sep 26, 5:22 am, splounx <splo...@gmail. comwrote:
Ideally the styles would be displayed in a tooltip style pop-up layer
which would remain displayed until the user mouses off the element.
But how exactly the styles are displayed is not critical. The idea is
that the web page itself would act as a sort of live stylesheet
reference, dynamically revealing to the user which styles are being
applied to which elements, allowing a stylesheet author to know which
styles they need to customize to affect a given element.

Firebug's DOM inspector perhaps?http://dorward.me.uk/tmp/ZZ19A0D46F....etfirebug.com/

--
David Dorwardhttp://dorward.me.uk/http://blog.dorward.me .uk/
If you don't use firefox (for what reason ever), use the xray
bookmarklet: <http://www.westciv.com/xray/>.

Sep 26 '07 #4
On 2007-09-26, splounx <sp*****@gmail. comwrote:
Hi there,

I am a relative CSS & JavaScript novice and I have a particular
problem that is beyond my level of knowledge so I thought I'd tap the
collective wisdom of this group.

I would like to know if there is a means of writing JavaScript that
will dynamically display the styles which are currently applied to any
DOM element on a web page ( i.e., those applied by ID, those applied
by class, etc.) as the user moves their mouse over them.

Ideally the styles would be displayed in a tooltip style pop-up layer
which would remain displayed until the user mouses off the element.
But how exactly the styles are displayed is not critical. The idea is
that the web page itself would act as a sort of live stylesheet
reference, dynamically revealing to the user which styles are being
applied to which elements, allowing a stylesheet author to know which
styles they need to customize to affect a given element.

I would greatly appreciate any help or suggestions you may have on how
this can be achieved in a way that will work consistently in most
popular modern browsers.

Many thanks in advance.
You can use the getComputedStyl e method to find the styles that apply to
an element, but it won't tell you which selectors in which stylesheets
they came from.

But just use Firebug. http://www.getfirebug.com/
Sep 27 '07 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
17262
by: Csaba2000 | last post by:
I want to be able to programatically click on the center of an <INPUT type=image ...> element (I only care about IE 5.5+). This should work regardless of whether IE has focus. Normally you would do myDomElement.click and the mouse doesn't matter, but in the case of an input image element, what happens is the submitted url has something like "?x=12&y=7" appended to it (the numbers vary per mouse position on the clicked element). If you hit...
7
1886
by: delerious | last post by:
I have a DIV that contains some anchors arranged vertically. On the DIV element I have an onmouseout event handler. If I move the mouse over one of the anchors, and then move it to another anchor (while remaining inside the DIV), the onmouseout event handler gets triggered even though the mouse never went outside the DIV. This happens in IE, Opera, and Mozilla. You can see this problem for yourself here:...
1
1867
by: travis_brooks | last post by:
greetings I had a javascript that was reliably telling me the position of an image on a page, and now its not. I was using the script to draw a bounding box that followed the mouse around over the image, and when you clicked the mouse the x-y position of the image pixel the mouse was over was posted back in the form. I just changed the layout of the page so that the image is now in a table that is nested in another table, and the old...
8
9567
by: Ryan Stewart | last post by:
Is there a way to reset the style property of an HTML element to some default or to all empty values? I have a group of elements whose style settings may be changed arbitrarily at certain points in a script (maybe set the background color and font weight of one element and the text align of another), but at another point I want to undo all of these changes and go back to the original state (which is actually all empty styles). Is there a...
2
6051
by: Rushi | last post by:
I want to display a text when somebody hover's over the row of the table. The data in the table row itself shouldn't be modified. I want something like the ABBR and ACRONYM tags which displays text when you rollover mouse over some text. Does anyone know how this can be achieved with HTML/CSS/Javascript?
1
1749
by: jeffg | last post by:
I have a DIV that needs to give the user the ability to grab its right border to resize the width of the block. I know that CSS supports properties such as cursor : col-resize to provide the visual indication that the element can be dragged with the mouse. But I cannot for the life of me figure out how to make the event fire only when the pointer is over the right border. I've searched this group many times and can't find anything on...
2
1153
by: acko bogicevic | last post by:
Hi How can i make my styles work on HyperLink web server control. I want it to be some color when the mouse is over it... Thanks. Alex *** Sent via Developersdex http://www.developersdex.com *** Don't just participate in USENET...get rewarded for it!
1
1981
by: =?Utf-8?B?UmljaA==?= | last post by:
On my old workstation (development workstation) if I set Application/Enable XP visual styles - I was able to get/see the visual styles - like button borders highlighting when you run the mouse over them. But on my new workstation (development workstation) I can't get the visual styles to work. Matter of fact, the button controls appear raised (like in old VB6). I downloaded/Installed a bunch of updates for VS2005 after I got the new...
10
2194
by: lenzie | last post by:
I am having a very odd problem with a website I run. The menus have recently been changed to use javascript and some people are reporting that when they first use the site, Instead of a nicely aligned list of items each in its own light-blue box. They are seeing a straightforward <li> list with no styles. The biggest problem is that I think it is only seen the first time someone goes to the site and so I can't see it!!! So if anyone could...
0
10696
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10780
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10383
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9530
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7932
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
7093
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5761
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5958
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4575
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.