Change Opacity on ajax container

Anonymous

#202518

Hello,

How can i change opacity on ajax call on ajax container.

Thanks

Trevor

#202525

By using javascript, like this (you need to write the code to change the opacity):

(function ( $ ) {
	"use strict";
	
	$(document).on("sf:ajaxstart", ".searchandfilter", function(){
	  // set the opacity to mainly transparent
	});

	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
	  // set the opacity back to normal
	});

}(jQuery));

Anonymous

#202537

Hello;

Still can’t change my opacity on sf:ajaxstart it shows 0.5 on inspecting but i want little more like 0.7
my ajax container is: #aesearchfilter
i used
<script>
(function ( $ ) {
“use strict”;

$(document).on(“sf:ajaxstart”, “.searchandfilter”, function(){
// set the opacity to mainly transparent
console.log(‘start’);
$(“#aesearchfilter”).css(“opacity”:”0.7″);
});

$(document).on(“sf:ajaxfinish”, “.searchandfilter”, function(){
// set the opacity back to normal
console.log(‘end’);
$(“#aesearchfilter”).css(“opacity”:”1″);
});

}(jQuery));
</script>

Trevor

#202539

I don’t think that is quite right:

(function ( $ ) {
	"use strict";
	
	$(document).on("sf:ajaxstart", ".searchandfilter", function(){
	  // set the opacity to mainly transparent
	  console.log('start');
	  $("#aesearchfilter").css("opacity","0.7");
	});

	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
	  // set the opacity back to normal
	  console.log('end');
	  $("#aesearchfilter").css("opacity","1");
	});

}(jQuery));

Comma between the values, not a colon? Otherwise it looks OK. Are the comments appearing in the console?

Note that you can also use .fadeTo in jQuery.

Edited to change the second value to use a comma.

Anonymous

#202548

Hi,

Thanks for notifying my sytax error

I tried the script given by you, opacity 0.3 does applies for some milliseconds but it again set to default 0.5 on ajax start, i want opacity to be 0.3 on ajaxstart.

Please have a look at attached video link

Opacity

Trevor

#202550

It looks like it is being set (probably by our javascript) and I am not sure there is any way around that. Sorry.

[Author]

Posts