"Pop-up" pages question

Hi people,

I want some pages on the website to be “pop-up” in the way that it appears as a pop-up with a certain width. I want to assign the pop-up to the page itself; not via any kind of action from another page. Am I explaining this ok :wink:

The reason is that the client will use WebYep CMS and will link to a certain page, but I don’t want to make it difficult for the client to make a pop-up in TinyMCE and WebYep. When ever he links to that page, the page appears as a pop-up… Hmmm… I hope this makes sense…

Paul


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

You could probably get this to work, but it would be an all-or-nothing type thing. Is this how your client wants ALL links from within his or her WY text to operate? If so, this could be a one- or two-line JavaScript exercise. If they want to be able to add this to a link selectively, then I suppose it could be done using a special CSS class for the links that need this behavior. TinyMCE allows you to style text, doesn’t it?

Please let me know what you need exactly, and I’ll see if I can dig something up. I just did something like this (either on this list or the Prototype list) and I should be able to copy and paste if the requirement is the first example. If it’s the second, then you will need to do some leg-work in the TinyMCE end of things, and see if you can define a new class and apply that class to individual links. I haven’t used that editor in a very long time, so I may be confusing it with another.

Walter


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

Hi Walter,
Actually, two specific pages wil be the pop-up, each 560x560 pix with vertical scroll option.
No problems to create this in FW, but indeed, if a client has text in WY and wants to link to this then it gets too complicated.
Well Walter, if you see a solution…that would be greatly appreciated! :slight_smile:

Paul


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

Back on the 11th of this month, I posted the following here:

A much nicer way to do this is to use the “rel” attribute of the
href tag to signal to a head function that the link should be
handled a certain way. This means that visitors who have disabled
JavaScript (or ignore it – like Google) JavaScript will still be
able to use the link.

In your page head, you would set up an unobtrusive “listener”
function to find all links and extend them as required by their rel
(relation) attribute. (This example uses Prototype, the easiest way
to add that to your page is with my Protaculous Action, available at
ActionsForge. If you’re using Protaculous on your page, you can
leave off the outer document.observe… function as the Action will
create it for you.)

document.observe('dom:loaded',function(){
   var external = function(element){
       var element = $(element);
       var href = element.href;
       var rel = element.rel.split('-') || [];
       rel.shift(); //get rid of the ext
       var name = rel.shift(); //get the name
       var args = rel.join(','); //moosh the rest to a string
       //listen for clicks on this element
       element.observe('click',function(evt){
           evt.stop(); //stops the normal link behavior
           window.open(href,name,args);
       });
       return element;
   }
   $$('a[rel^="ext"]').each(function(elm){
       external(elm);
   });
});

Now back in HTML, you would create your links like this:

Link text here

(In Freeway, use the Extended dialog to add a “rel” attribute.) The
listener function goes through your whole page when the window is
loaded, finds any links that contain the string ext in their rel
attribute and attaches an event observer function to them. This
observer listens in turn for a click on that link, and if it “hears”
one, suppresses the normal behavior, and substitutes the pop new
window code, using the values of the rel attribute as the
configuration values. So for your real example, the link would look
like this:

Open MiniMSN

Now you have the best of all possible worlds: links that work
without script and are decorated when script is available; one
function in the head of the page instead of a lot of inline onclick
handlers that all have to be changed separately; clean separation of
presentation from content.

What you are up to is slightly different, you already know what size
you want these things, and you need to toggle the fact that it is
meant to load the popup using something besides the rel attribute,
which I don’t believe that TinyMCE supports.

So again, with the Prototype library linked, you would do something
like this:

document.observe('dom:loaded',function(){
    var pop = function(element){
        var element = $(element);
        var href = element.href;
        var name = 'myPopup'
        var args = 'height=560,width=560,scrollbars=yes';
        //listen for clicks on this element
        element.observe('click',function(evt){
            evt.stop(); //stops the normal link behavior
            window.open(href,name,args);
        });
        return element;
    }
    $$('a.popup').each(function(elm){
        pop(elm);
    });
});

You would need to define a new classname that can be applied within
TinyMCE (no idea how you do that, or if it’s possible) and then your
client would need to learn how to apply that class to a link. Any link
on the entire page that had the pop class would magically pop up in a
560 square window.

Walter

On May 21, 2009, at 9:48 AM, paulvw wrote:

Hi Walter,
Actually, two specific pages wil be the pop-up, each 560x560 pix
with vertical scroll option.
No problems to create this in FW, but indeed, if a client has text
in WY and wants to link to this then it gets too complicated.
Well Walter, if you see a solution…that would be greatly
appreciated! :slight_smile:

Paul


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

Wow, that is impressive!
I will need to dive into TimyMCE, but as far as I know TinyMCE gives options to define classnames.

Thanks you so much. Amaing what is possible of you know how :slight_smile:

Great stuff! Thanks again!

Paul


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