CMS Made Simple Forums

Posted: **Tue Jul 29, 2025 3:53 pm**

Hey There,

I fighting with a jquery script and I'm losing.
So I need some help.

What I want is to create a variable containing css setting
Then I want to use this variable in a jquery animate command:

I searched the internet and tried, tried and tried but .... without any luck.

This is what I tought would work (but isn't).

In smarty template I set a variable (stylecss_start) :

Code: Select all

{assign var="stylecss_start" value='opacity: 1'}

Then I move this variable to jquery and check if it is set :

Code: Select all

var start_stylecss = {/literal}"{$stylecss_start}"{literal};
alert(start_stylecss);

The alert shows the "opacity: 1" so the variable is set.

Then I want to use this variable in the jquery animation :

Code: Select all

$(".myPopup").animate( start_stylecss );

I tried the following (I found on the internet):

Code: Select all

$(".myPopup").animate( { start_stylecss } );
$(".myPopup").animate( { + start_stylecss + } );
$(".myPopup").animate( "start_stylecss" );

Nothing seems to work.

The jquery is part of the tpl file so no extra jquery file to import.

Without the variable it is working

Code: Select all

$(".myPopup").animate( {opacity: 1});

Please advise/help.

Posted: **Tue Jul 29, 2025 4:24 pm**

Take a closer look at what is the final code you need to be rendered by Smarty:

Code: Select all

$(".myPopup").animate( {opacity: 1});

The {opacity: 1} is a Javascrip object and it needs the "{" and "}" as part of the object structure declaration... additionally, a Smarty variable needs to be rendered by using "{" and "}" so all that seems to be missing... this should work (didn't test it though):

Code: Select all

$(".myPopup").animate( { {$start_stylecss} } );

Posted: **Tue Jul 29, 2025 4:35 pm**

Almost, since you have it as a js variable you should be able to do:

Code: Select all

$(".myPopup").animate( { start_stylecss } );

although jomorg's answer should work if you allow Smarty in the code (ie get rid of all the {literal} stuff and just use spaces around curly braces that aren't Smarty.

Posted: **Thu Jul 31, 2025 11:31 am**

YES, I WON THE BATTLE.

The problem was that when I use

Code: Select all

var start_stylecss = {/literal}"{$stylecss_start}"{literal};

I create a string.

The animate action in jquery needs a object, not a string.

So I took a different way :

First I created a string to check what style I want to use and transfered that string to jquery.

Then, in jquery I checked what to use and set the style object :

Code: Select all

		var stylecss = {/literal}"{$stylecss}"{literal};
				
		if(stylecss == "fadein-fadeout") {
			var start_stylecss = {opacity: "0", top: "50%", left: "0", right: "0"};
			var show_stylecss = {opacity: "1"};
			var end_stylecss = {opacity: "0"};
		} else if(stylecss == "zoomin-zoomout") {
			var start_stylecss = {opacity: "0", top: "50%", left: 0, right: 0, zoom: '1%'};
			var show_stylecss = {opacity: "1", zoom: '100%'};
			var end_stylecss = {zoom: '0%'};
		}  else if(stylecss == "top-to-bottom") {
			var start_stylecss = {opacity: "0", left: 0, right: 0, top: "-100%"};
			var show_stylecss = {opacity: "1", top: '50%'};
			var end_stylecss = {opacity: "0", top: '200%'};
		}
		  else if(stylecss == "bottom-to-top") {
			var start_stylecss = {opacity: "0", left: 0, right: 0, top: "100%"};
			var show_stylecss = {opacity: "1", top: '50%'};
			var end_stylecss = {opacity: "0", top: '-200%'};
		}
	
	// Set start css value of popup
		$(".myPopup").animate(start_stylecss);

This works fine. Problem solved.

Thanks for the advise and tips.

CMS Made Simple Forums

Variable in jquery animate command

Variable in jquery animate command

Re: Variable in jquery animate command

Re: Variable in jquery animate command

[Solved] Variable in jquery animate command