ajaxsearch and opacity

173 Posts

echaland Reply #1, 18 years, 8 months ago

Hello,
I want to make the ajaxSearch output (the drop down window) opaque. By default it should be but I can’t get it to work. I tried to set the style to the following but the dropdown result window is still transparent. Does anyone know why?
Thnak you.

#ajaxSearch_output {
	-moz-opacity: 1; opacity: 1; 
	filter: alpha(opacity = 100);  
}

http://www.chalandsweb.com

165 Posts

banal Reply #2, 18 years, 8 months ago

Hm. Does it have a background? Eg. background-color:#FFF; ?

173 Posts

echaland Reply #3, 18 years, 8 months ago

The background color is #FFFBF1 (kind of sand color). It should matter right?
Thanks

http://www.chalandsweb.com

165 Posts

banal Reply #4, 18 years, 8 months ago

Hm. This problem could exist due to several reasons (styling the wrong element, style ordering, ...). You should really use Firebug. It is a great Firefox Extension that will help you resolve these kind of problems in no-time.

If you’re sure you’re styling the correct element, you can still set the style attributes to "important" so that they even override following or more specific settings.

Like this:

#ajaxSearch_output {
	-moz-opacity: 1 !important; 
	opacity: 1 !important; 
	filter: alpha(opacity = 100) !important;  /* not sure if !important does work here */
}

173 Posts

echaland Reply #5, 18 years, 8 months ago

Thanks Banal. Yes FireBug is a great tool. I tried using !important but to no avail.
What’s weird is that the dropdown is opaque in FF/Safari over text and gif but not hyperlinks.... In IE7 it is not opaque at all.

Eric

http://www.chalandsweb.com

1,717 Posts

coroico Reply #6, 18 years, 8 months ago

Salut Echaland,

In fact the opacity is setting up throught the mootools library not by css. Here is the extract of code that do this:

function doSearchResponse(request) {
  var o = $('ajaxSearch_output');
  o.setStyle('opacity', opacity);  // set of opacity parameter
  $('current-search-results').setHTML(decodeURIComponent(request));
	newToggle.toggle();
	is_searching = false;
	setTimeout('resetForm()',600);
}

Find enclosed my own search css file used on my site. As you can see, i don’t use any opacity value in the ajaxSearch_output div only the background color.
In your snippet call the opacity parameter should be a real >0. and <1. In case of a wrong value opacity takes the default value of 1 (opaque).

173 Posts

echaland Reply #7, 18 years, 8 months ago

Thanks Coroico for sharing your css.
The weird thing is that it works for FF/Netscape/Safari but not for IE 7/6... For IE the opacity has no effect. The background is always transparent.

http://www.chalandsweb.com

1,717 Posts

coroico Reply #8, 18 years, 8 months ago

The weird thing is that it works for FF/Netscape/Safari but not for IE 7/6... For IE the opacity has no effect. The background is always transparent.

here is my web site address and it runs with IE6 and IE7. Type chine or voyage as searchwords.

Could you send me by email your template and your css files, I will try to find time to check them.

173 Posts

echaland Reply #9, 18 years, 8 months ago

Thanks for your help. Please find attached the template, document and css file

Eric

http://www.chalandsweb.com

1,717 Posts

coroico Reply #10, 18 years, 8 months ago

Eric,
With your template (and your ajaxSearch snippet call), your style css and your landing page, I create a document and under IE 6 I get a correct result (with a correct opacity effect).
Find enclosed a screen capture under IE6 of test results with opacity=.98 and a second one with opacity=.5.
I haven’t all you css files so your concern could come from css conflicts. To resolve that you could each by each suppress your css call and see which css file include interact with the opacity parameter of your style css file.