Wrapped text links do not highlight properly

**steve.ledger** · 19 June 2013, 08:06 AM

Yes of course, I disconnect my machine/s from the web each time I test web designer pages and scripts. Only reconnecting to post to the forum to mention it doesn't work.
Give me a break.

Can't you see that the Xara Designer placeholder method is simplest and does not require any external scripts or excessive third party code added the the <head>

I'm not sure what you are trying to prove here, but when something can be done entirely using the tools provided within the application, it makes no sense to mess around with additional code and external links to .js files, does it?

**Acorn** · 19 June 2013, 05:54 PM

sledger, the original poster said your approach would be tedious. I consider it open to human error as one invariably does not remember or record all such manual tweaks.
All my approach does is remove the tedium. I would appreciate knowing where the line is to be drawn as you present a range of JavaScript solutions; jQuery is nigh on universal and as Xara uses it in many of its widgets, I don't consider it to be third party in the sense that we have no control over it. i advocate getting it from Google as do the majority of sites in the wild as it makes no sense for your visitor having lots of cached versions of jQuery. I could have written everything in JavaScript but the beauty of jQuery is others can see the structure more clearly and might be willing to experiment. I designed, build and supported large SharePoint Enterprise sites for 5 years and jQuery was essential for productivity.

Acorn

**jonazen** · 05 August 2013, 07:21 PM

Hi guys - I just had to revive this thread, as sledger's technique has opened a whole new world of capabilities that I can "inject" into my Xara-based websites. I'm absurdly excited right now, as this technique, combined with either Web Designer or Designer Pro X, gives me the proverbial "best of both worlds". I can do complete wysiwyg layout, Xara style. Then - I can add any (reasonable) number of placeholders on the page, and insert a snippet of code to incorporate dynamic content.

For example: the site I am building accepts input from an end user via an embedded form, sends the data to a remote server, and then gets the response and displays a combination of text and graphs. Instead of just creating the result page outside of PDX9 and pulling it in via an iframe (or javascript -- more on that in a moment), I have renamed my pretty DPX9 page with a ".php" extension, and I am adding a number of placeholders throughout the page. My form page will have a form action = to this new php-named result page that I'm formatting in DPX9. What this means is that all the web request variables will be passed to the page when it's loaded -- and that's where the magic begins.

As I've learned in a few experiments, as long as you get the stacking order right, your "injected" code snippets will appear in the published web page in the right sequence. This means that perhaps one placeholder up high on the page will reference the request variables, manipulate them in some way, and perhaps assign a new variable.

Then I might have some kind of layout items that I've placed on the page via normal DPX9 operations -- a picture, border, whatever.

Below this, I might add a text area (HTMLBlockText of course!), create some placeholders in it, and the php code in each one might "echo" or "print" one of the Request variables (such a person's name, a result of a calculation performed by the remote server, etc). These dynamic snippets of text will wind up as inline replacements for the placeholder within my nicely formatted paragraph. This effectively gives me a hybrid of wysiwyg layout and design with dynamic content. This could also be the basis of a crude home-made CMS (content management system).

OK -- next up, I add another "regular" placeholder -- and the code in it might load up a jquery chart widget. The beauty here is that I can, for example, pull data from a database or a calc server to feed into the chart widget. Result: dynamic charting, right in the middle of my pretty DPX9 formatted page.

Back to a reference I made earlier in this note re: iframe vs. jquery for including an external page: I actually DO see an important difference. The page pulled in via iframe can only affect content executing in that iframe -- it's a closed sandbox, and it cannot, for instance redirect a result to replace the page hosting the iframe itself -- any page it loads or redirects to will appear within the iframe. With the javascript technique, the page that's pulled in becomes part of the "hosting" page (as has been pointed out here), and so (correct me if I'm wrong!), can load any page that would be loadable by the hosting page. Finally -- I've seen that by incorporating the imported contents via javascript instead of iframe, the page load is cleaner in ALL browsers, with no jitters or flashing that sometimes happen with an iframe. There may be times when I WANT the security of a secure "playground" that the iframe gives, and other times when the javascript approach is needed: great to have both tools in the toolbox.

Final comment (for this post!): Back to the inline text placeholder. I wrestled with this for a few hours, because my inserted text wouldn't wrap within the larger text item. The light finally went on when I realized that sledger's example made use of a "text area" rather than a "text line". I updated my experiment with a text area, made sure to add the name "HTMLBlockText" (so DPX9 would treat the whole thing as a single DIV and publish it accordingly), and it suddenly started working: I pulled in a very long paragraph from an external text file and used it to replace a 1-character placeholder. The paragraph grew as needed within the confines of the text area, and wrapped appropriate, as well as taking on the text formatting characteristics of the paragraph in which it was embedded.

Apologies if I've rambled into too many separate topics here. I'm just quite excited because a number of topics have all come together for me at once. This opens entire new horizons for me in terms of what I can accomplish - easily - with DPX9. Fantastic!

**jonazen** · 21 August 2013, 08:58 PM

Originally Posted by sledger

Consequence of absolute positioning CSS, WYSIWYG'ness

To get around it [pun intended] you can add links using a character as a placeholder for the opening and closing anchor ref tag either side of the text string to be linked. You will also need to name the text area HTMLBlockText

Hi again -- looks like I'll need to use this technique after all on the FAQ page for my current project -- many "Questions" that span more than a single line of text, and the whole thing must highlight together on mouseover. Question though: I'm not using the link to navigate to another page, so I can't just drop a URL in the placeholder pair. The FAQ "Answer" sits on another layer that pops up (depending on the animation and duration we choose) when the link is clicked. How can I manually specify that in the pair of tags I use to wrap the pop up layer identifier...?

**jonazen** · 03 October 2013, 01:30 AM

Originally Posted by Acorn

sledger, the original poster said your approach would be tedious. I consider it open to human error as one invariably does not remember or record all such manual tweaks.
All my approach does is remove the tedium. I would appreciate knowing where the line is to be drawn as you present a range of JavaScript solutions; jQuery is nigh on universal and as Xara uses it in many of its widgets, I don't consider it to be third party in the sense that we have no control over it. i advocate getting it from Google as do the majority of sites in the wild as it makes no sense for your visitor having lots of cached versions of jQuery. I could have written everything in JavaScript but the beauty of jQuery is others can see the structure more clearly and might be willing to experiment. I designed, build and supported large SharePoint Enterprise sites for 5 years and jQuery was essential for productivity.

Acorn

Acorn, sledger -

Acorn's approach worked -- as long as I had a single large block of text on the page, with each paragraph highlighted and assigned a separate popup layer on the same page. I included the jQuery in the header -- and when I published the page, the wrapped links worked perfectly. BUT, as sledger knows from another recent post of mine, I was just forced to split the long page into 20 separate mini blocks of text, each with its own multi-line wrap around link to a popup layer. Now - for some reason, although I've confirmed that each paragraph is fully selected when I assign the popup layer to it, when I export the website, about 1/4 of the paragraphs wind up with NO link, while the others work fine.

I've been learning jQuery - but this code is new to me - and I can't see why it would work in some cases, but not others. Any clues? Are there ways to make the code more robust to make sure it doesn't miss anything?

I'd be fine going back to sledger's technique if the jQuery won't work (although I can't imagine why it doesn't), but I don't know how to construct a link that will open a popup layer and specify it in the single-character placeholders that sledger uses.

Any clues re what might be happening?

EDIT: Here's a link to the latest test version that displays these issues: http://stronggroup.com/hlv/faq.htm

BTW: I'm noticing that while most of the links wrap properly, the ones that I thought didn't work at all seem to have hotspots now at the very far right side of the paragraph. Try hovering near the right end of the paragraphs, and you'll see the whole thing highlight. I'm at a loss.

EDIT2: I'm adding the xar file with just the FAQ page in case anyone wants to take it apart. Not -- the placeholder with the jQuery is at the upper right of the page -- small red rectangle.

**Acorn** · 03 October 2013, 08:41 AM

Jon, move your MouseOver and MouseOff layers to sit above the images layer in the Page and Layer Gallery by clicking and dragging.
I think that's all that's wrong.

Acorn

**jonazen** · 03 October 2013, 11:08 AM

Originally Posted by Acorn

Jon, move your MouseOver and MouseOff layers to sit above the images layer in the Page and Layer Gallery by clicking and dragging.
I think that's all that's wrong.

Hi Acorn - thanks - your comment reminded me that many of the "issues" I've had in the past were due to layer ordering, and were fixed by rearranging. But if I'm not mistaken, the MouseOver and MouseOff layers already are above the images layer:

Click image for larger version.

Name: xara-layers.jpg
Views: 117
Size: 64.0 KB
ID: 98906

What's odd is that the lines of text where the link only works when you hover to the right end of the line have that border corresponding to the left edge of the popup FAQ layers. It seems that by having one or more of the FAQ layers BENEATH the text area with the link allows that portion of the link to work. Odd -- somehow the portion of the link that responds to a mouseover seems to be masked off by something invisible above it.

Did I get this ordering incorrect? See the enclosed image above. I haven't been able to get different results. Were you able to open the XAR attached in my last post, and get it to work by rearranging? Remember: it appears to work if you simply "preview" the page, or even if you open it in select IE for preview -- but the problem still appears if you then select Firefox or Chrome -- or if you publish, and then view the resulting page in Firefox or Chrome.

Still bewildered...

EDIT: Thinking that perhaps I misinterpreted your comment, I tried moving the mouseoff and mouseover layers to be immediately above the images layer, thereby placing them below the text areas with the links, as follows:

Click image for larger version.

Name: xara-layers2.jpg
Views: 119
Size: 66.6 KB
ID: 98907

But that doesn't seem to make a difference. Still works fine in IE -- but not in Chrome or Firefox.

**jonazen** · 03 October 2013, 01:25 PM

Not sure if this will offer any clues to those with deeper web knowledge, but W3.org code validator sees two errors (and a different issue if page interpreted as HTML5 -- there's a dropdown on the page where you can select "auto" or specify how the page should be interpreted - you have to revalidate after changing this).

http://validator.w3.org/check?uri=ht...org%2Fservices

Any help at all?

**jonazen** · 03 October 2013, 02:24 PM

While hoping one of you may have a clue, I'm trying to poke deeper to see if anything jumps out at me. Using Chrome's "display element" capabilities, I can see a bunch of page elements with style "xr_tu" applied. Interestingly, these appear to be shorter than the text line for the most part -- and also seem to correspond to the unclickable portion of the link, i.e., it's as if an unclickable div or other element is sitting at a higher z-order above the text link. No idea what the "xr_tu" style means (although I noticed it in your jQuery, Acorn, so I'm assuming it's one of the types of links your routine processes and modifies).

Back to the xr_tu tagged elements: these appear to be line-high elements that don't quite correspond to the lines of text that should be the active links. Wherever an xr-tu tagged item appears, the mouse-over doesn't work properly, and I cannot click while in Chrome or Firefox.

**Acorn** · 03 October 2013, 04:04 PM

Originally Posted by Acorn

Jon, move your MouseOver and MouseOff layers to sit above the images layer in the Page and Layer Gallery by clicking and dragging.
I think that's all that's wrong.Acorn

My bad for only checking locally within Xara's product (it uses IE); in my defence I don't believe you mentioned it working properly in IE (You did say: " Now - for some reason, although I've confirmed that each paragraph is fully selected when I assign the popup layer to it").

I have checked in Chrome and it is down to the ordering of each of your Text areas in the MouseOff layer, in that the bottom one need to be the topmost position as you have got bounding boxes that sometimes overlaps the next paragraph. Alternatively, if you change each one from a text box to a text line (click a bottom corner in Text mode and drag upwards), that should clear the overlaps.
You may wish to set all to Position on Page to Push to ensure no overlap happens.

Glad to say the jQuery is robust (so far)!

Acorn