[Express] WebYep loop horizontally

purity1 · April 24, 2010, 7:58pm

hi,

is it possible to make a horizontally webyep loop? e.g. to position the loopelement (in my case a tabel with headline, picture and copytext)) within a container (layer) and when the width of this container is reached the loop continues in a new line? thx in advance

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

waltd · April 24, 2010, 8:38pm

If you make your loop elements float left and give them a width that
is evenly divisible into your outer box then this should just happen
naturally. If you look at my screencast on inline images, that’s
approximately the same construction I’m talking about.

http://freewaycast.com/screencasts/view/20-flexible-inline-objects

Walter

On Apr 24, 2010, at 3:58 PM, purity wrote:

hi,

is it possible to make a horizontally webyep loop? e.g. to position
the loopelement (in my case a tabel with headline, picture and
copytext)) within a container (layer) and when the width of this
container is reached the loop continues in a new line? thx in advance

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

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

purity1 · April 25, 2010, 1:22pm

hi walter,

thanks a lot, but somehow it didn’t work for me.
the loopcontainerwidth (tablerow) is devisable through the loopelementwidth and its alignment is set to left …
could there be something i forgot?

thx in advance
purity

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

waltd · April 25, 2010, 4:22pm

How are you adding the loop element to the page? If you are pasting
the code into a Markup Item, then you will get an extra paragraph tag
around that item, and that could throw off your whole structure. Can
you post a link to the failing page? If I look at the source code I
might be able to tell you precisely why it’s failing.

Walter

On Apr 25, 2010, at 9:22 AM, purity wrote:

hi walter,

thanks a lot, but somehow it didn’t work for me.
the loopcontainerwidth (tablerow) is devisable through the
loopelementwidth and its alignment is set to left …
could there be something i forgot?

thx in advance
purity

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

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

purity1 · April 25, 2010, 5:11pm

hello walter,

that would be very kind. i’ve uploaded the freeway file. so you can download it under http://www.rotebar.at/test.zip
think this way is more attractive than to look at alphanumeric lines

thanks a lot in advance

purity

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

waltd · April 25, 2010, 5:22pm

Thanks, but what I need to see is the code it generates – the HTML –
not the Freeway file. Is the site live anywhere yet? If not, you could
do the following (useful for other things, too):

From the main menu, choose File / Preview / Preview Setup.
Add a text editor to the list by choosing it from your Applications
menu. A great choice for this is the free application TextWrangler
from Bare Bones Software (http://barebones.com).
Go back to your document and choose File / Preview in Browser /
[TextWrangler]
Select all of the text that you see in TW (or whatever you use) and
Copy.
Go to http://pastie.org and Paste. Press the save button and copy
the URL you get and post it here.

Walter

On Apr 25, 2010, at 1:11 PM, purity wrote:

hello walter,

that would be very kind. i’ve uploaded the freeway file. so you can
download it under http://www.rotebar.at/test.zip
think this way is more attractive than to look at alphanumeric
lines

thanks a lot in advance

purity

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

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

purity1 · April 25, 2010, 5:47pm

ok.

hope did all right …

here’s the link: http://pastie.org/934291

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

waltd · April 26, 2010, 1:28am

Yes, but next time turn on More Readable in your preferences… Here’s
the relevant bit of the page:

<div id="cont" class="f-x2 f-x3" style="position:relative; float:left;  
width:152px; margin:0px 10px 10px 0px; overflow:visible">
	<p><?php foreach (WYLoopElement::aLoopIDs("LoopStart") as  
$webyep_oCurrentLoop->iLoopID) { $webyep_oCurrentLoop- 
 >loopStart(true); // WebYepV1 ?></p>
	<table border=0 cellspacing=0 cellpadding=0>
		<tr>
			<td valign=top style="width:152px; height:25px">
				<p class="f-lp"><span class="headlineklein"><?php  
webyep_shortText("destination", false); // WebYepV1 ?></span></p>
			</td>
		</tr>
		<tr>
			<td valign=top style="width:152px; height:110px">
				<p class="f-lp"><?php webyep_image("Bild", false, '', '',  
'myframe', 152, 110, false); // WebYepV1 ?></p>
			</td>
		</tr>
		<tr>
			<td valign=top style="width:152px; height:25px">
				<p class="f-lp"><span class="fotocredit"><?php  
webyep_shortText("fotocredit", false); // WebYepV1 ?></span></p>
			</td>
		</tr>
	</table>
	<p class="f-lp"><?php $webyep_oCurrentLoop->loopEnd(); } // WebYepV1 ? 
 ></p>
</div>

There’s at least two things going wrong here. First, your loop markers
are appearing inside of paragraph markers, which means that they are
going to generate a broken structure when they loop, with an end
paragraph mark at the top and a begin paragraph mark at the bottom of
each repeated element. Second of all, the table that has the
destination, photo, and photo credit in it is not set to float left,
but the outermost container element is.

If I were hand-coding this, I would use the following code:

<div id="cont" class="f-x2 f-x3" style="position:relative; float:left;  
width:665; margin:0px 10px 10px 0px; overflow:visible">
	<?php foreach (WYLoopElement::aLoopIDs("LoopStart") as  
$webyep_oCurrentLoop->iLoopID) { $webyep_oCurrentLoop- 
 >loopStart(true); // WebYepV1 ?>
	<table border=0 cellspacing=0 cellpadding=0 style="width: 152px;  
float:left; margin-right: 8px; margin-bottom: 8px">
		<tr>
			<td valign=top style="width:152px; height:25px">
				<p class="f-lp"><span class="headlineklein"><?php  
webyep_shortText("destination", false); // WebYepV1 ?></span></p>
			</td>
		</tr>
		<tr>
			<td valign=top style="width:152px; height:110px">
				<p class="f-lp"><?php webyep_image("Bild", false, '', '',  
'myframe', 152, 110, false); // WebYepV1 ?></p>
			</td>
		</tr>
		<tr>
			<td valign=top style="width:152px; height:25px">
				<p class="f-lp"><span class="fotocredit"><?php  
webyep_shortText("fotocredit", false); // WebYepV1 ?></span></p>
			</td>
		</tr>
	</table>
	<?php $webyep_oCurrentLoop->loopEnd(); } // WebYepV1 ?>
</div>

The outer div is set to the width of the entire table cell it is
contained in, and the table inside the loop is set to 152px width and
float left. The P tags are removed from around the loop code. I also
added some padding to separate your looped elements from one another,
you might not want that in your design. With those changes made, the
individual tables for each repeated element will float left until they
run out of room, then wrap to a new row.

Are you using the Actions from Max to do this layout, or are you hand-
coding the page with Markup Items? That’s critical to how you approach
fixing this problem. Your meta tags say this was made with Pro, but
your subject line says Express. That’s also an important detail to get
clear, as that will also dictate how you solve the problem.

Walter

On Apr 25, 2010, at 1:47 PM, purity wrote:

ok.

hope did all right …

here’s the link: http://pastie.org/934291

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

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

chuckamuck · April 26, 2010, 3:08am

Hmm…an intriguing idea. Would it be possible to follow this idea in a carousel that grows horizontally instead of wrapping to next line? No, I suppose the content panes are finite and predefined within a carousel.

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

purity1 · April 26, 2010, 4:15am

good morning,

first of all “thank you”!

… i’m using FW PRO 5.4.2 with max’ fw actionsuite.

now - hmmm - would it be very fine to know how to do it right in freeway

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

Max_Fancourt · April 26, 2010, 6:15am

Hi
I have posted an answer on the main on the freeway talk section and when I get to work I will create a quick example for people to down load
all the best max

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

purity1 · April 26, 2010, 6:31am

an example would be grrrreat!
thx in advance!

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

Max_Fancourt · April 27, 2010, 6:48pm

ok here is the example…
just publish and view the page on a a server or via MAMP
all the best max
http://www.max-izzat.co.uk/examples/horizontal-loop-example.zip

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

purity1 · April 28, 2010, 6:57am

hi max,
thanks a lot for your example it helped a lot.
just one more question: if i place the loopelement in the loopstart-item and i insert the loopend afterwards (without a break), the loopend is always placed below - not in the same line. in your example the loopend item is placed beside. freeway do it automatically and i don’t have a chance to move it …
how do i get the loopend in the same line as the loopelement?
thx and greez
purity

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

purity1 · April 28, 2010, 7:54pm

get it!
i overlooked the anonymous-action of the loopelement.
now the loop works properly as it should!

thanks a lot again max and cheers!!!

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

Max_Fancourt · April 29, 2010, 7:49am

Hi
to get things sitting next to each other as in my example you need to make sure that the items are float:left and clear:none . You can find this in the inspector palette.

The result of this is that each item should sit happily next to each other… :o)

The anonymous action by Walter removes the id of the div that will be duplicated, because you cant have the same div id (name) on the same page so hence why I used that action.
My webyep actions have that function built-in, so you need to remember to activate that within there respective action windows. Anything that will be part of the loop needs to have the anonymous action applied.

all the best max

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