[Pro] again problems EE action, carousel and showcase

atelier · October 30, 2012, 4:23pm

I ran again into some trouble with a site that has the EE action, a carousel and showcase.
The site works, untill I apply EE resources Action.
That action changes paths.

I compared the HTML output from the original file, and the file with EE action, and it seems to me that the links to the css are missing, and part of the javascript is gone.
These css files are present on the server, but I do not know what is missing more, of course.

Without EE action:

<head>
<base href="http://mysite/edit/default_site/level/" /><script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js" type="text/javascript">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js?load=effects" type="text/javascript">
</script>
<script src="../Resources/glider.js" type="text/javascript">
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-Language" content="nl"/>
<title>foto</title>
<link rel="stylesheet" href="index_item1_fwShowcase.css" type="text/css"/>
<link rel="stylesheet" href="index_serie5_fwShowcase.css" type="text/css"/>
<link rel="stylesheet" href="index_serie4_fwShowcase.css" type="text/css"/>
<link rel="stylesheet" href="index_serie3_fwShowcase.css" type="text/css"/>
<link rel="stylesheet" href="index_serie2_fwShowcase.css" type="text/css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="../Resources/fwShowcase.js"></script>
<link rel="stylesheet" href="index_serie1_fwShowcase.css" type="text/css"/>
<meta name="viewport" content="width = 960, minimum-scale = 0.25, maximum-scale = 1.60"/>
<meta name="Author" content="XXXXXXX"/>
<link rel="stylesheet" type="text/css" href="../css/styles.css"/>
<style type="text/css">
<!-- 
body { font-family:Trebuchet MS,Arial,Helvetica,sans-serif; margin:0px; background-color:#808080; background-image:url(../Resources/bg.jpg); background-repeat:repeat-y; background-position:center top; height:100% }
html { height:100% }
#sitebar2 a:link { color:#ff3232; font-weight:bold; text-decoration:none; font-size:14px }
#sitebar2 a:visited { color:#ff3232; font-weight:bold; text-decoration:none; font-size:14px }
#sitebar2 a:hover { color:#ff3232; font-weight:bold; text-decoration:none; font-size:14px }
#sitebar2 a:active { color:#ff3232; font-weight:bold; text-decoration:none; font-size:14px }
#carousel_carousel div.scroller { overflow:hidden }
#carousel_carousel div.scroller div.section { overflow:hidden; float:left; height:340px; width:560px }
#carousel_carousel div.scroller { width:3660px; height:340px }

-->
</style>
<script type="text/javascript">//<![CDATA[
jQuery(function(){
    $fw("#serie1").fwShowcase({"galleryTxtColor": "#888888","padding": 0,"borderWidth": 1,"borderColor": "#303030","roll": "#363636","prevTxt": "Vorige","nextTxt": "Volgende","playTxt": "Speel/Pause","closeTxt": "Sluit","duration": 4,"max": 562,"slideshow": true,"controls": false,"showInfo": false,"autohideControls": false,"autohideInfo": false,"align": 1,"controlsPath": "../Resources/controls.png","imageCss": {},"galleryCss": {},"dir":0, "itemWidth":75, "itemHeight":75, "outerHeight":75 , "outerWidth":450});
});
jQuery(function(){
    $fw("#serie2").fwShowcase({"galleryTxtColor": "#888888","padding": 0,"borderWidth": 1,"borderColor": "#303030","roll": "#363636","prevTxt": "Vorige","nextTxt": "Volgende","playTxt": "Speel/Pause","closeTxt": "Sluit","duration": 4,"max": 562,"slideshow": true,"controls": false,"showInfo": false,"autohideControls": false,"autohideInfo": false,"align": 1,"controlsPath": "../Resources/controls.png","imageCss": {},"galleryCss": {},"dir":0, "itemWidth":75, "itemHeight":75, "outerHeight":75 , "outerWidth":450});
});
jQuery(function(){
    $fw("#serie3").fwShowcase({"galleryTxtColor": "#888888","padding": 0,"borderWidth": 1,"borderColor": "#303030","roll": "#363636","prevTxt": "","nextTxt": "","playTxt": "","closeTxt": "","duration": 4,"max": 562,"slideshow": true,"controls": false,"showInfo": false,"autohideControls": false,"autohideInfo": false,"align": 1,"controlsPath": "../Resources/controls.png","imageCss": {},"galleryCss": {},"dir":0, "itemWidth":75, "itemHeight":75, "outerHeight":75 , "outerWidth":450});
});
jQuery(function(){
    $fw("#serie4").fwShowcase({"galleryTxtColor": "#888888","padding": 0,"borderWidth": 1,"borderColor": "#303030","roll": "#363636","prevTxt": "Vorige","nextTxt": "Volgende","playTxt": "Speel/Pause","closeTxt": "Sluit","duration": 4,"max": 562,"slideshow": true,"controls": false,"showInfo": false,"autohideControls": false,"autohideInfo": false,"align": 1,"controlsPath": "../Resources/controls.png","imageCss": {},"galleryCss": {},"dir":0, "itemWidth":75, "itemHeight":75, "outerHeight":75 , "outerWidth":450});
});
jQuery(function(){
    $fw("#serie5").fwShowcase({"galleryTxtColor": "#888888","padding": 0,"borderWidth": 1,"borderColor": "#303030","roll": "#363636","prevTxt": "Vorige","nextTxt": "Volgende","playTxt": "Speel/Pause","closeTxt": "Sluit","duration": 4,"max": 562,"slideshow": true,"controls": false,"showInfo": false,"autohideControls": false,"autohideInfo": false,"align": 1,"controlsPath": "../Resources/controls.png","imageCss": {},"galleryCss": {},"dir":0, "itemWidth":75, "itemHeight":75, "outerHeight":75 , "outerWidth":450});
});
jQuery(function(){
    $fw("#item1").fwShowcase({"galleryTxtColor": "#888888","padding": 0,"borderWidth": 1,"borderColor": "#303030","roll": "#363636","prevTxt": "Vorige","nextTxt": "Volgende","playTxt": "Speel/Pause","closeTxt": "Sluit","duration": 4,"max": 562,"slideshow": true,"controls": false,"showInfo": false,"autohideControls": false,"autohideInfo": false,"align": 1,"controlsPath": "../Resources/controls.png","imageCss": {},"galleryCss": {},"dir":0, "itemWidth":75, "itemHeight":75, "outerHeight":75 , "outerWidth":450});
});
Event.observe(window,'load',function(){
	var select = '';
	if (window.location.href.indexOf('?') > -1){
		var test = window.location.href.split('?')[1];
		select = ($(test)) ? test : '';
	}
	if(!$(select)) select = '';
	var my_glider = new Glider("carousel_carousel", {duration:0.5, initialSection: select});
	$$('.carousel_carousel.next').each(function(elm){
		elm.observe('click',function(evt){
			Event.stop(evt);
			my_glider.stop();
			return my_glider.next();
		});
	});
	$$('.carousel_carousel.previous').each(function(elm){
		elm.observe('click',function(evt){
			Event.stop(evt);
			my_glider.stop();
			return my_glider.previous();
		});
	});
	$$('.carousel_carousel.start').each(function(elm){
		elm.observe('click',function(evt){
			Event.stop(evt);
			return my_glider.start();
		});
	});
	$$('.carousel_carousel.stop').each(function(elm){
		elm.observe('click',function(evt){
			Event.stop(evt);
			return my_glider.stop();
		});
	});
});
//]]></script>
</head>

With EE action:

<head>
<base href="http://mysite/edit/default_site/level/" /><script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js" type="text/javascript">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js?load=effects" type="text/javascript">
</script>
<script src="../Resources/glider.js" type="text/javascript">
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-Language" content="nl"/>
<title>film</title>
<meta name="viewport" content="width = 960, minimum-scale = 0.25, maximum-scale = 1.60"/>
<meta name="Author" content="XXXXXXXXX"/>
<link rel="stylesheet" type="text/css" href="../css/styles.css"/>
<style type="text/css">
<!-- 
body { font-family:Trebuchet MS,Arial,Helvetica,sans-serif; margin:0px; background-color:#808080; background-image:url(../Resources/bg.jpg); background-repeat:repeat-y; background-position:center top; height:100% }
html { height:100% }
a:link { text-decoration:none }
a:visited { text-decoration:none }
a:hover { text-decoration:none }
a:active { text-decoration:none }
#sitebar2 a:link { color:#37b237; font-weight:bold; text-decoration:none; font-size:14px }
#sitebar2 a:visited { color:#37b237; font-weight:bold; text-decoration:none; font-size:14px }
#sitebar2 a:hover { color:#37b237; font-weight:bold; text-decoration:none; font-size:14px }
#sitebar2 a:active { color:#37b237; font-weight:bold; text-decoration:none; font-size:14px }
#carousel_carousel div.scroller { overflow:hidden }
#carousel_carousel div.scroller div.section { overflow:hidden; float:left; height:315px; width:560px }
#carousel_carousel div.scroller { width:1220px; height:315px }
-->
</style>
<link rel="stylesheet" type="text/css" href="http://mysite/js/extra_styles.css"/>

<script type="text/javascript">//<![CDATA[
Event.observe(window,'load',function(){
	var select = '';
	if (window.location.href.indexOf('?') > -1){
		var test = window.location.href.split('?')[1];
		select = ($(test)) ? test : '';
	}
	if(!$(select)) select = '';
	var my_glider = new Glider("carousel_carousel", {duration:0.5, initialSection: select});
	$$('.carousel_carousel.next').each(function(elm){
		elm.observe('click',function(evt){
			Event.stop(evt);
			my_glider.stop();
			return my_glider.next();
		});
	});
	$$('.carousel_carousel.previous').each(function(elm){
		elm.observe('click',function(evt){
			Event.stop(evt);
			my_glider.stop();
			return my_glider.previous();
		});
	});
	$$('.carousel_carousel.start').each(function(elm){
		elm.observe('click',function(evt){
			Event.stop(evt);
			return my_glider.start();
		});
	});
	$$('.carousel_carousel.stop').each(function(elm){
		elm.observe('click',function(evt){
			Event.stop(evt);
			return my_glider.stop();
		});
	});
});
//]]></script>
</head>

I think I could make a temporarely fix, but in that case the designer cannot update the showcase anymore.

I do hope for a permanent solution, and some assistance here.

Thanks a lot.

thanks.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

atelier · October 31, 2012, 7:43am

At a closer look and comparing the two HTML output, and what happans on the web, I think (hope!) there is only a small thing wrong there.
The carousel works. Slides left to right. The ONLY thing that does not show on the web is the row with thumbnails. We see only small white lines. Something is missing there.

I tried yesterdat about three hours to fix this, the doc is quite heavy, I did not manage, and FW did not like either what I tried. Refusing processing actions, timing out when uploading and so on. I am walking blind in the dark here.

This site is about to go live in two days, and indeed not so smart to come up with this so late. (Some excuse, my focus was on other things, and for me the carousell worked fine. The designer though pointed out that there was something missing…)

We really do hope for some smart advise. If needed I can give access to the site, it is now locked for the public.

Thanks…!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

David_McCallum · October 31, 2012, 8:48am

The ONLY thing that does not show on the web is the row with thumbnails.

Without seeing the actual page it is difficult to see whether this is a problem with the showcase.css file or missing images.

Do you really have 6 showcases on this page?

Besides - I know sod all about EE

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

atelier1 · October 31, 2012, 8:59am

Hi Deltadave

Yessss, EE and FW… Still love my job though!

Could you spare some time looking at it? If you drop me a mail-line, I’ll give you access. http://freewaytalk.net/person/view/759

Much appreciated!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · October 31, 2012, 3:00pm

This problem is likely related to the order of operations in the Actions stack on the page. I don’t know what order the EE Actions are coded to run in, but Actions can take one of a number of “slots” in the publish process, very similar to the slots in the Page / HTML Markup dialog. These slots are threaded into the publish process, so that as the page proceeds from top to bottom (in terms of the source code generated) each one is called and acts on the state of the document at that moment in time. This is not limited to one Action firing before or after another – each Action may contain any number of functions firing at different points in the publish cycle.

A function that writes code to the page in the head can be coded to run in the fwBeforeEndHead() callback slot, and it will have access to everything that has been written to the page at that point in the publish process. Any functions that have not fired by that point are going to operate on whatever that function has left behind as its work product. So if that function adds a bunch of links to the head of the page, they will be there to be acted on by functions that fire later in the publish cycle.

Likewise, the very last slot is fwAfterEndHTML(), and that gives access to everything that has been done to the page ever. But there’s a catch here. You can attach as many different functions (and Actions) to each of these slots as you like. The user, and the Action author, have no way to control which one will fire when. There’s no way to defer operations so that one function or Action will fire guaranteed last.

Walter

On Oct 31, 2012, at 4:48 AM, DeltaDave wrote:

The ONLY thing that does not show on the web is the row with thumbnails.

Without seeing the actual page it is difficult to see whether this is a problem with the showcase.css file or missing images.

Do you really have 6 showcases on this page?

Besides - I know sod all about EE

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

atelier1 · October 31, 2012, 5:14pm

Hi Walter

I understand. It is almost unsolvable, right? I mean, noone can predict in what order actions must do their job. There are just too many combinations. Unless, the enduser could alter the order? On their own risk, naturally.

How else could we solve this problem?

Best regards

H.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

atelier1 · October 31, 2012, 5:18pm

(Second try, something weird when answering on the web with iPad)

Hi Walter

I guess this is at this moment unsolvable, if it is an parse order problem?

What if the end-user could influence the order actions domtheir job? Completely at own risk, naturally.

How else couls we solve this problem?

Thanks

H.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · October 31, 2012, 5:44pm

I believe (but cannot prove) that the run order of two Actions’ functions staged to run at the same slot in the publish process has to do with the order in which the Actions are applied to the page. But it might also have something to do with the filename of the Action, no way to tell.

Absent someone doing a lot of exploration with test Actions, or one of the Softpress programmers interrupting his or her other duties by inspecting the code flow on the running application with a debugger, there’s just no way to tell.

Action authors are encouraged to avoid any interaction between Actions or reliance on run order. The methods they invoke are supposed to not rely on any particular document state, just to look for the element they expect to change, change it if it exists, and get out. The only predictable interaction between Actions has to do with setting semaphore flags on the page or folder while the Action is running, and then another Action can look for those semaphores later in the process. For example, here’s part of how my HTML5 Action works:

fwBeforeEndHead(){
if(! fwPage.html5){
fwPage[‘html5’] = true;
//do stuff here to add the correct doctype
}
}

So I look for a variable added to the page, and set it if it’s missing (and do other stuff, too).

The reason for this is that other Actions in the same suite rely on the page being extended with the HTML5 doctype. The HTML5 Element (item-action) does the same trick – includes the same fwBefroreEndHead() function – so if there is an element on the page with that Action applied to it, and the page also has the HTML5 action applied to it, either one of them can “win” the race and do the work. I don’t actually know which one does the work (and it doesn’t matter which one does), I just let either one of them do the work and then raise its hand to say it’s done. I do this so you don’t have to apply an Action to the page and another to the form element, but it won’t hurt if you do.

Now I can do this in my Action suite because I know specifically what I am setting and getting. It’s almost functionally impossible for other Action authors to interact with every other Action that could possibly be added to the page. We do try to get along, and we try to write defensive code that will “first, do no harm” as the Hippocratic Oath has it. But we can’t know what you will get up to with our work!

Walter

On Oct 31, 2012, at 1:14 PM, atelier wrote:

Hi Walter

I understand. It is almost unsolvable, right? I mean, noone can predict in what order actions must do their job. There are just too many combinations. Unless, the enduser could alter the order? On their own risk, naturally.

How else could we solve this problem?

Best regards

H.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

atelier1 · November 1, 2012, 7:26am

Hurray hurray, what a beautiful day!
The site works. Thanks to DeltaDave who pointed out that the script might not work because of missing css files, and so it was.

What was going on:
In my FW document the links to the extra stylesheets (the showcase ones) were completely gone. The files were on the server allright, in the same dir of the html file.
So I made by hand (page markup) the links, and it works.

Happy me, happy designer, even more happy customer.

Thanks for all the assistance.

(Now the next question, how to avoid this collaps of actions. Would be such a timesaver…)

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options