2

I'm writing a browser extension, and using JQueryUI to pop up a modal dialog. The issue is that certain sites (espn.com for example) also use JQueryUI. Rather than playing nice and scoping their own elements, they apply styles to basic JQueryUI elements. The troubling example is:

.ui-widget{
   top:50% !important;
}

That means my extension's dialog is no longer positionable. I overcame other styling issues by using more specific selectors and my own !important tags, but this one is stumping me. I don't want the position of the dialog to be fixed in any way, I want JQueryUI to be able to calculate and update the position when the dialog is dragged or I do something like:

$( ".selector" ).dialog( "option", "position", { my: "center", at: "center", of: window });

Unfortunately, the only values I can give other than auto (which did not work at all) are fixed values. Unless someone has CSS trickery for me, I think I need to dynamically get the position JQ calculates during dragging and overwrite whatever exists with an important tag. I think I need to do something like

$(this).css("top", calculatedVal + " !important");

But I'm not sure how to get the calculated values. If I open chrome's dev tools and select the .ui-dialog element, I can see absolute positional values (in px) that JQ calculated, and I can watch them change if I grab and 'drag' the dialog. I just don't know how to get them. The straightforward approach

$(this).css("top");

returns the overwritten values (e.g., '50%'). Does anyone know how I can get those dynamic position values, or have a better way to approach this?

edit: Let me try restating this as simply as possible, with no interleaving examples. My own JQUI widget's CSS styles are being impacted by another site's stylesheet because their CSS is working on broad, foundational JQUI classes like '.ui-widget'. Further, they are using !important tags. That means (I think) the only way I can get my own style to apply is by using a more specific class definition AND using an !important tag. This works just fine in cases where I have some static setting, like font-color.

The problem is, I want JQuery to be able to update some of the CSS dynamically, such as the position. Because the site's css is setting widget position to be static and forcing it to stay that way by using !important, JQ's updates are being ignored. I can't just set my own css override because it needs to be updated dynamically. Possible solutions include:

  1. Somehow removing the !important tag on the site's css or from the element attribute.
  2. Getting the position as it is dynamically calculated, and then setting it myself with !important tags.

Addendum to solution 2: Ideally I'd get the position JQ calculates during dragging. Less appealing is re-implementing this and calculating the position myself.

edit 2 The issue isn't being able to override the styles at all. I understand how to do that by using a more specific css selector. The issue is when I don't have a single good value to override, instead I have a dynamically changing value. I'm wondering if there is a better way to deal with this than constantly retrieving that value and setting it (like removing the !important tag, somehow).

mobabo
  • 809
  • 1
  • 9
  • 11

2 Answers2

0

Are there any more specific selectors like id? You can also try to use the tag name if there is no id, and add the css to that:

tagname.ui-widget {
    top: 60% !important;
}

Which is of a higher priority than just the class because it is more specific.

Albert Xing
  • 5,620
  • 3
  • 21
  • 40
  • Yes, I can and have override via specificity. That works great for something like font-family, where I have some static value I can override. The problem is it doesn't work for things like position, which are changing dynamically, unless I constantly retrieve (how?) or calculate (annoying) the correct value and then override as you described. – mobabo Mar 07 '13 at 03:53
  • Perhaps first calculate the parameters you want using JS (`window.innerWidth`, `window.innerHeight`), and then add the CSS using `sheet.insertRule('tagname.ui-widget { top: 60% !important; }', sheet.cssRules.length);` (reference http://stackoverflow.com/questions/707565/how-do-you-add-css-with-javascript). – Albert Xing Mar 07 '13 at 04:06
0

Could you overwrite the style, using some of the options described in this question? If ou can directly influence the stylesheet, you may have a lot more options than you do right now.

Community
  • 1
  • 1