newseed Posted May 20, 2009 Report Share Posted May 20, 2009 I believe most of us here do not like tinkering or overriding any user's browser's settings or controls but this client is very persistant to find a solution. co lourm all.com/store/pc/LaCie-526-26-LCD-Monitor-23p39.htm (remove spaces) If you look at the "Calibrators:" drop down menu, it's all grey with white text. That is fine. This issue is that when you hover over a option/choice it gives it a blue background or whatever background color your browser is set for. He doesn't like the blue background but instead he would rather have it changes to another color. Controlling the text color would be nice too. I have not found a solution to this and so I thought that maybe there is a javascript method that will allow this kind of control. Any suggestions or source that might be helpful to solve this issue? Thanks. Quote Link to comment Share on other sites More sharing options...
BeeDev Posted May 20, 2009 Report Share Posted May 20, 2009 (edited) http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/ Edited May 20, 2009 by BeeDev Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted May 20, 2009 Report Share Posted May 20, 2009 Ya know... it only "looks" blue in comparison to the brownish background color. If you change the select background to white then it just looks like a grayish color. Which does not look nearly as bad (in my opinion). Quote Link to comment Share on other sites More sharing options...
newseed Posted May 20, 2009 Author Report Share Posted May 20, 2009 (edited) Ya know... it only "looks" blue in comparison to the brownish background color. If you change the select background to white then it just looks like a grayish color. Which does not look nearly as bad (in my opinion). Valid point. Quite frankly, I don't like toying with this but if the client is going to pay you and it doesn't go against your moral values or hurt your business reputation then I am going to deliver what they request if at all possible. I've downloaded the tar.gz file three times but it seems to be corrupted when I try to open it via WinZip. Can you download it and see if you get the same results? If not, can you extract the file and then zip it and send to me or upload to your site and provide a link to download it? Thanks. Edited May 20, 2009 by newseed Quote Link to comment Share on other sites More sharing options...
newseed Posted May 20, 2009 Author Report Share Posted May 20, 2009 The jqTransform is nice but it doesn't render consistantly between IE and FF. If you look at the demo that came with the script you will see that the first two input boxes have a certain width in FF but it's much wider in IE. I haven't figured out how to set certain widths for certain locations. For instant, I may have a search input box that can be 150px wide but then I have a quantity input box that only needs to be 40px wide. Here's what I have done so far: col ourm all.com/store/pc/0-test-form.htm Quote Link to comment Share on other sites More sharing options...
BeeDev Posted May 21, 2009 Report Share Posted May 21, 2009 I checked your page. When You're calling the script: $(function(){ $('form').jqTransform({imgPath:'jqtransformplugin/img/'}); }); You're applying jqTransform to ALL the forms on that page. But you can target specific forms using: $(function(){ $('form[name=myFormName]').jqTransform({imgPath:'jqtransformplugin/img/'}); }); Also that demo page hasn't set a width to the text boxes (in the CSS), or a length property on the input. So Firefox and IE assume different lengths. If you do: and using CSS you can style the class "textbox" Then i'm assuming the widths will be consisten on browsers. Quote Link to comment Share on other sites More sharing options...
newseed Posted May 21, 2009 Author Report Share Posted May 21, 2009 (edited) The problem is that there are two different forms on the same page. I am not seeing how I can isolate one from the other. Also, I have update the demo in which I have a inline style width of 30px set for the Qty. box (just below the select/option dropdown). It behaves nicely in FX but not in IE. IE doesn't change at all. Update: I have since change the input width via the script which changes the width for IE and left FX alone. However, the alignment is still not correct for the text entered. Additionally, I prefer to control the width exclusively by CSS. Edited May 21, 2009 by newseed Quote Link to comment Share on other sites More sharing options...
BeeDev Posted May 22, 2009 Report Share Posted May 22, 2009 You can see that when jqTransform is called, the actual form boxes are hidden and instead, there's replacement items created by jqTransform. you can target this class by CSS to style the textbox width in both FF and IE: div.jqTransformSelectWrapper { width: ; } and text: div.jqTransformInputWrapper Quote Link to comment Share on other sites More sharing options...
newseed Posted May 22, 2009 Author Report Share Posted May 22, 2009 div.jqTransformInputWrapper The problem I have is that I have two forms on one page each having a input field. These two input fields require to be different widths. Since the script uses the same class, I cannot dictate these two inputs to be of different width values. Quote Link to comment Share on other sites More sharing options...
BeeDev Posted May 27, 2009 Report Share Posted May 27, 2009 The problem I have is that I have two forms on one page each having a input field. These two input fields require to be different widths. Since the script uses the same class, I cannot dictate these two inputs to be of different width values. If you still haven't figured out your problem : Inline styles for the win Apply jqTransform to both forms, then use jQuery to style those textboxes as soon as jqTransform finishes doing it's job. $(function(){ // jqTransform called here // change the search box width using custom width var $searchWidth = "100px"; $("form[name=jqsearch] div.jqTransformInputWrapper").css("width",$searchWidth); // change the quantity box width using custom width var $addItemWidth = "30px"; $("form[name=addItem] div.jqTransformInputWrapper").css("width",$addItemWidth); }); Quote Link to comment Share on other sites More sharing options...
newseed Posted May 27, 2009 Author Report Share Posted May 27, 2009 Certainly an improvment. However, visually it varies between IE6, IE7, IE8 and FX. Haven't even checked it in Safari. Check your PM. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.