[Pro] List background formatting, pop up box

Freeway
1

Greetings,

I am working on a site for a Cable Television company. This site has a list of channels that could change periodically. I have all the channels designed as separate html items with a different background color on every other item.

The customer is telling me now that this list can change on a regular basis. So, having channels going in and out of a list at a specific spot could throw off my color scheme of every-other-one.

Is there any way that I can set a style for a background color that could be changed on the edit styles ? This way, if boxes are even or odd in the list the style could be edited without having to change the individual color settings on over 100 boxes.

Also, can I set up a page that would have a pop-up box on it…so that when the page loads that the box will pop up and inform readers of any changes to the cable list ??

Thanks for the help.

Rich

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

2

Here’s a simple way to stripe a list with JavaScript. This will work
no matter how many elements are in your list, and you can edit the
list without disrupting the pattern.

Click once on your HTML box that contains the list, and note the value
in the Title field on the Inspector. This will be the ID of your box
if the layout is using HTML Layers (and you’ll know you are because
the Layer checkbox will also be ticked in that same pane of the
Inspector). If you are using the Table layout mode, then you need to
use the Add Selector Action to give this box an ID. Either way, make
note of the ID for this box.

Now apply Protaculous to the page if it isn’t already, and choose
prototype-packed from the library picker. If you already had
Protaculous applied, and had chosen scriptaculous-packed, then there’s
no need to change it, since scriptaculous includes prototype.

Click on the top Function Body button, and enter the following code,
changing the ID and stripe color as appropriate for your page.

var id = 'item42';
var stripe = '#ffc';
$(id).select('li').each(function(elm,idx){
	if(idx % 2)
		elm.setStyle('background-color:' + stripe);
});

That’s it, you’re done. Now you’ll have to ensure that your list and
its content is not styled at all with respect to the background-color
property, but this should just work. All odd-numbered list items will
be striped with a color.

Walter

On Mar 21, 2011, at 11:18 AM, sampolfonz wrote:

The customer is telling me now that this list can change on a
regular basis. So, having channels going in and out of a list at a
specific spot could throw off my color scheme of every-other-one.

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

3

Walter,

Will you take a peek here:

http://www.mrwebstuff.com/chanwin2.html

I guess when I said “LIST” I wasn’t exactly clear. Each of these html containers is inserted into the main container. When I delete one of them, the ones under them will move up and fill the space. But, then if one is deleted, the color scheme is thrown off.

I really appreciate the help.

Thanks,

Rich

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

4

On Mar 21, 2011, at 11:43 AM, sampolfonz wrote:

I guess when I said “LIST” I wasn’t exactly clear.

That’s okay, you can still get where you want to go. First, you need
to go through all of the nested content and remove all hint of
background-color. You have used background-image in places to put the
channel logos in, and that is just fine. But anywhere you have used
either bgcolor (for a table) or background-color (for anything) you
will need to remove that attribute so that the background on each
channel’s DIV can shine through. If you find that you have to enter
some value, you can use the keyword ‘inherit’ (without the quotes)
instead of a color name or hex code.

Then simply apply the Add Selector Action to the HTML box where you
have inserted these channel DIVs (you’re sensibly using a table layout
for variable-length data!) and set it to an ID of ‘guidelist’. Then
change the code to this:

var stripe = '#ffc';
$$('#guidelist > div').each(function(elm,idx){
	if(idx % 2)
		elm.setStyle('background-color:' + stripe);
});

This CSS selector (#guidelist > div) selects the DIV tags that are
direct children of the element with the ID ‘guidelist’. If I’m reading
your HTML correctly, that should work.

Walter

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

5

You are above my head a bit.

Okay, there is an action ADD SELECTOR ACTION…this is a Freeway action? (Could not find this in any of my installed actions. ) That is no problem to download, I am sure.

Next, The colors are in background color and html background color in the inspector panel. Type ‘inherit’ in the color choice ?? Confused here.

And, am I to add the ADD SELECTOR ACTION to the large html container that contains all the inserts ?? How will each individual box know to change color, every other one.

As you can see, I am lost.

Can you help me further? If not, I understand.

Thanks,

Rich

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

6

On Mar 21, 2011, at 12:12 PM, sampolfonz wrote:

You are above my head a bit.

Okay, there is an action ADD SELECTOR ACTION…this is a Freeway
action? (Could not find this in any of my installed actions. )
That is no problem to download, I am sure.

Yes, get it at ActionsForge. If you want another way to do this, then
click once on your large HTML container (to answer your following
question) and choose Item / Extended from the main menu. Then click
New, and in the sub-dialog, enter:

  • Name: id
  • Value: guidelist

Okay out of the stack of dialogs, and you will have the same effect –
the table cell where you have inlined all of the station blocks will
now have an ID, which will make it possible for you to target it with
JavaScript.

Next, The colors are in background color and html background color
in the inspector panel. Type ‘inherit’ in the color choice ??
Confused here.

If you can remove the color attribute altogether, that will serve the
same purpose. The goal is to make all of these elements transparent,
so the background color set on the outermost block for each channel
can “shine through”. There’s a None option in any Freeway color
picker. Choose that if you have a standard Freeway color picker to
work with.

And, am I to add the ADD SELECTOR ACTION to the large html container
that contains all the inserts ?? How will each individual box know
to change color, every other one.

This is the clever part. The JavaScript will create an array (data
structure) out of all of the channel boxes. (It’s able to do this
because we gave that outer box an ID, so the script can find it later
when it runs.)

Then it loops over them one at a time, and if the current element in
the loop is even (if its idx attribute is an even multiple of 2, using
the modulus math operator symbolized by the percent sign) then it
doesn’t get a background. But if it is odd, then it does get a
background.

All of this processing is off-loaded to your visitor’s browser, and
because you’re not defining the same color over and over every other
channel, the page will load a few nanoseconds quicker.

Walter

As you can see, I am lost.

Can you help me further? If not, I understand.

Thanks,

Rich

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

7

This sounds like it will work. It will sure beat having to change the color of all the boxes one by one every time the client changes this channel line up.

Can I try this on the first two or three boxes without going through and changing everything ?

If the browser is handling this will I be able to test this in my MAMP server before uploading to the online server ?

I will try.

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

8

On Mar 21, 2011, at 12:45 PM, sampolfonz wrote:

This sounds like it will work. It will sure beat having to change
the color of all the boxes one by one every time the client changes
this channel line up.

Can I try this on the first two or three boxes without going through
and changing everything ?

Sure. Just be sure that you have removed the background color (or set
to None) on every child element inside those inline channel HTML
boxes, and on the boxes themselves. It should look like all of them
are transparent in Freeway.

If the browser is handling this will I be able to test this in my
MAMP server before uploading to the online server ?

You’ll be able to see this effect if you preview in Freeway, or if you
view it in your browser. Your browser is doing the same thing that
anyone else’s browser is doing, in this case.

Walter

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

9

Item Extended is greyed out for my main container.
It is there in the list, just greyed out.

Thanks

Rich

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

10

Okay, that just means you drew this table, rather than using Freeway
in table layout mode. So to get to the same dialog, you have to click
on your table cell once, then choose the table cell icon in the
Inspector (looks like a blue box with overshot corners) and then click
the Extend button in the Inspector.

Walter

On Mar 21, 2011, at 12:57 PM, sampolfonz wrote:

Item Extended is greyed out for my main container.
It is there in the list, just greyed out.

Thanks

Rich

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

11

Here’s an example: Channels

View source to see how it works. The first blob of JavaScript is just
there to create the list of channels (rather than typing them all
out). Note how the channel number doesn’t matter at all to the
striping, since I go through channels 1 - 20 one at a time and
channels 225 - 290 by 3s and 5s. Same function stripes them all.

Walter

On Mar 21, 2011, at 1:06 PM, Walter Lee Davis wrote:

Okay, that just means you drew this table, rather than using Freeway
in table layout mode. So to get to the same dialog, you have to
click on your table cell once, then choose the table cell icon in
the Inspector (looks like a blue box with overshot corners) and then
click the Extend button in the Inspector.

Walter

On Mar 21, 2011, at 12:57 PM, sampolfonz wrote:

Item Extended is greyed out for my main container.
It is there in the list, just greyed out.

Thanks

Rich

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

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

12

Walter,

You have gone to a lot of trouble to explain this to me. Thank you.

The container that is holding all of my channels is an html item, not a table. There is no table icon in the inspector when I choose it. Should I redo the list and put them in a table?

Still confused…

Rich

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

13

Oh, I see what’s going on here. Freeway doesn’t let you use Extended
on an HTML box that’s drawn while the CSS Layout button is off
(switched to Table Layout). I’d forgotten about that. To get around
this limitation, you’ll need to use the Add Selector Action instead of
the Extended dialog. Now I realize why I wrote it, lo these many years
ago.

Walter

On Mar 21, 2011, at 1:28 PM, sampolfonz wrote:

Walter,

You have gone to a lot of trouble to explain this to me. Thank you.

The container that is holding all of my channels is an html item,
not a table. There is no table icon in the inspector when I choose
it. Should I redo the list and put them in a table?

Still confused…

Rich

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

14

I applied the action to the html.

Now, there are settings to choose. I don’t know what settings to choose and what instructions from above to pick up, and to put where.

Thanks for the help.

Rich

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

15

In the Add Selector To Tag picker, choose TD. This will enable the ID
field. In the ID field, enter guidelist

That should do the trick for you.

Walter

On Mar 21, 2011, at 1:40 PM, sampolfonz wrote:

I applied the action to the html.

Now, there are settings to choose. I don’t know what settings to
choose and what instructions from above to pick up, and to put where.

Thanks for the help.

Rich

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

16

Do I put anything in for the class ?? And where do I put any of the other alterations that you mentioned above ?

Rich

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

17

No, you don’t need to add a class for this to work. The other code
goes in Protaculous, which you’ll need to install if you haven’t
already, and you apply that to the page itself, not to the HTML box.
If you’ve already applied it to the page, and you don’t see the
Protaculous tab in your Actions palette, then make sure you haven’t
got anything on the page selected. Click on a blank part of the
document or pasteboard to ensure nothing is selected, and you should
see the interface again.

Walter

On Mar 21, 2011, at 1:50 PM, sampolfonz wrote:

Do I put anything in for the class ?? And where do I put any of the
other alterations that you mentioned above ?

Rich

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

18

Okay. I applied Proactulous to the page.

Now,

Which tab do I click and where do I paste the code? Is it this (from above)

var stripe = ‘#ffc’;
$$(‘#guidelist > div’).each(function(elm,idx){
if(idx % 2)
elm.setStyle(‘background-color:’ + stripe);
});

I feel more lost…LOL

Rich

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

19

In the Protaculous interface in the Actions palette, click on the top-
most Function Body button. You will see a text box appear. Paste in
that code and okay out. Now preview in Freeway or a browser (if your
page doesn’t have PHP code in it) or publish and view in MAMP if you
do have code that needs to be rendered in order to show the page.

You should also change the highlight color to be what you want rather
than my washed-out yellow #ffc.

Walter

On Mar 21, 2011, at 1:59 PM, sampolfonz wrote:

Okay. I applied Proactulous to the page.

Now,

Which tab do I click and where do I paste the code? Is it this
(from above)

var stripe = ‘#ffc’;
$$(‘#guidelist > div’).each(function(elm,idx){
if(idx % 2)
elm.setStyle(‘background-color:’ + stripe);
});

I feel more lost…LOL

Rich

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

20

Okay…

I will do this and let you know how it goes. I have a 2:00 appt I have to get to, so it will be tonight.

Thanks, Walter.

One of these days, maybe I’ll get this stuff. But it is coming a little bit at a time.

Thanks,

Rich

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