![]() We want to do that only once, partly because that’s efficient and elegant, but mostly because we won’t be able to find the element this way once it’s visible. parentItem attribute, until we find the hidden div. And having found it, we can climb back up the tree using the. Now we have in element we can find using javascript’s getElementById() function. Pop up the Web Properties box and add the code (You can link to external graphic images, or Flash apps too, but that’s not what we need here.) So, create an object (any object will do, but I tend to use a colourful box somwhere top left, out of the way). Using Placeholder, one can insert any html one likes into the page (including broken html, so be careful!) When the website is built, the object with the placeholder will disappear, and be replaced by the code from the dialog tab. This is another tab on the Web Properties menu. To create something with a unique html id, we need to insert that item into the pop-up layer. (Actually, we only need to search for one of them, since they will always appear as a pair.) This is where another of Web Deisgner’s marvelous hooks comes into play: “Placeholder”. So the easiest way to find this div is to give something on the layer a unique id, use javascript to find it and then work up the DOM tree until we find an element with those two attributes set. (It turns out that you need both to cover different browsers’ behaviour.) All the items on our popup layer will appear within that div (albeit several levels deeper in the DOM hierachy). The next thing you need to know is that the way Web Deisgner handles pop-ups is to create a with two attributes set: visibility: "hidden" and display: "none". We don’t want anyone actually clicking that button, so hide it unnderneath something else (I hid mine under the button we made before, which of course I actually do want people to click). How do we fool Xara into including the layer in the web page, but hidden by default? Of course, this is exactly what the “pop-up layer” option in the Web Properties does, so lets make use of that… create a small object (I used a small rectangle) and set its web properties to “Pop-up layer: popup”. Of course, by default, that will either be always visible on the page, or will not be included in the generated page at all, if you make it invisble. Put the text of the pop-up and other decoration onto that layer. Do this by creating a new layer (I called mine popup). The next step is to create the layer we want to appear when we click the button. In our case, we want the button to run a javascript function that we are going to create, so enter javascript:sh_popup(true) into the link field. When you preview the page, clicking the box should pop up a javascript alert. (In Web Designer 6, you have to untick the “Connect automatically” box or Xara will helpfully insert an “ in front of your havascript Web Designer 7 cunningly avoids this annoyance.) As an example, create a button-shaped box, press Shift-Ctrl-W with the box selected, and try putting javascript:alert("Hello, world.") in the link field. In the “Link to Web or Email address:” field, you can insert the javascript. This can be inserted into any link, using the “Web Properties” dialog (Shift-Ctrl-W). ![]() In our case, we want a link target which starts with “javascript:”. For example, email me will open a mail compose window (assuming your browser can find a mail program). As you may know, HTML links don’t always have to point to web pages. The first part of the solution is to use the “link” mechanism to run Javascript from button pushes. This article describes how it can be done. After a couple of less-than-elegant attempts, I arrived at a solution which allows the use of the standard Xara layer architecture to design the pop-ups, but which gave me the close-box I wanted. ![]() So, I set myself the task of turning the pop-up layer into something with a close button. This makes it a tad hard to select and copy any text! Web Designer has pop-up layers, but they normally disappear as soon as the mouse is clicked anywhere on the page. The direction I wanted to stretch my web pages was to produce a pop-up which was consistent with the look and feel of the site (and preferably editable using the Web Designer features), and which allowed users to copy and paste the text from the pop-up box. The HTML, Javascript and css from Web Designer seem to be a lot less messy than most. This has a lot to do with the clean stucture of the pages it generates. Having explored “under the bonnet” a little, I have been impressed by how a little lateral thinking can extend the capabilities well beyond its ordinary functionality. But like most graphically-based packages, it has limitations when it comes to going beyond its basic capabities. The pages it produces look great, and are easy to modify, at least as far as appearance and layout are concerned. R ecently, I have been getting to grips with Xara Web Designer.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |