This is a follow on from a previous thread:
If anyone is interested I will share the xar and text files so you can use this method. Let me know ;)
Printable View
This is a follow on from a previous thread:
If anyone is interested I will share the xar and text files so you can use this method. Let me know ;)
Here's the link to the example I used:
LINK
I don't know what I would use it for egg, but I find it very interesting! I know there are lots of things like java script I wish I knew but it is so hard to teach old dogs like me new tricks, but will be looking for future videos on the subject if anyone else wants them. Thanks Egg!!!!
Here's a link to Truck's site:
LINK
Hi Joe, Thanks. Was it you that was using mp3 files on one of your sites or is my brain addled even more?
Sorry Egg, I have no mp3's on my site. I know yourself, Acorn, Gary and a few others are old pro's, me I just have one website and am a amateur who just enjoys what I can accomplish in my simple way with xara.
Two of my sites are predominantly mp3's. Is there something you want/need, or just being curious?
@Egg, I can see how this could be used to display any text data records - interesting approach. It means a user can edit the text file externally from the site.Quote:
Originally Posted by Egg Bramhill
Can you please share the javascript, how it is structured and what goes where. I think you can add a search function too.
Thanks,
Gary
That's very useful, Egg, when having to present a lot of different data, for instance on a map with lots of points of interest.
Would have been very useful for a site I did a few years ago showing a landscape and playground design with different types of greenery and installations. I had to use many layers and got confused a number of times.
Sorry Egg, I have a disagreement over the approach and the code that we have discussed previously.
The Xara way to avoid lots of Layers is to shift the berthing or other data collection onto its own page and potentially have these or even each in its own Xara design file.
My simple demonstrator has:
- The index page with an Embed a Website widget - this has a Name of marina and a src (source) to a Xara page by its filename and htm extension (marina.htm).
- Normal berthing pages that can handle any Xara Objects. These are scaled to match the index's Placeholder.
- The berth links on the index page are pure Page Links but with the Open in link (destination) of the Name 'marina' directly in the input box. This opens the page in the Placeholder.
That's it.
If you needed to only update the berth information I would publish berth001, etc as separate design files into the same folder (publishing as berth001.htm).
This way, all work is in the XDA with no code or hidden tables.
:pointAttachment 127835
Acorn
Hi Acorn,
I'm not on a crusade here. Your solution works very well. However it would have 50 pages. My solution has 1 page with 1 pop-up layer. It's not adhereing to the Xara WYSIWYG method of web design I'll admit but that's not my purpose here. Even if you create seperate 'berth001.htm' files they come accompanied with their 'berth001_file_folders'.
I did have issues finding how you loaded the individual pages into the placeholder until I came across this, so I'll post my 'visual' of the solution.Quote:
The berth links on the index page are pure Page Links but with the Open in link (destination) of the Name 'marina' directly in the input box. This opens the page in the Placeholder.
Meanwhile I'll develop my tutorial for anyone that's interested :D
@Egg: As said earlier in this thread, I would like to understand what code goes where. An example XAR would be welcome.Quote:
Meanwhile I'll develop my tutorial for anyone that's interested
@Acorn - thanks for sharing. I can see a use for the page-within-a-page approach too.
Gary
@ initostar. Sorry wasn't ignoring you, just trying to create a set of video tutorials on using this method.
This is the first one. If anyone is interested in what's going on in the background you can try & follow my mumblings. If your not interested I will upload all the required files later and you can mess with them as you wish without understanding the underlying code ;)
Here's the second mumble on the construction of the example tutorial I wrote. Again this only tries to show how things are acheived, if your not interested please view my final video in this series (comming shortly) which will just show how to use the files without the need to understand how it works ;)
Here's the final tutorial. If you're not interested in the code behind this method you can just use this tutorial to create a single page, single pop-up webpage.
It's late now, I'll post the xar files tomorrow.
Here's a zipped folder of the required files.
This is another approach using a very simple jQuery construct in the Object's Links that hide everything and then reveal the item in the second part of the construct: e.g., javascript: void $('.marina').hide(); void $('.b001').show();
The design is for XDPXv16 and later, using the following concepts:
- LiveCopies of each of the Berth's details in a large 7x7 grid - clearly expandable...
- Each Berth has a special Name of htmlclass="bNumber" as in "b003" is Berth 003.
- Each LiveCopy is copied and a different Name applied: "marina b003" - you must remove the first "b003" and create "marina b003" in its place
- The content of the LiveCopy are all saved as separate Images (for groups)
- All are dragged into the first page and scaled up and stacked.
- Edit changes are applied to the original LiveCopy on the bookings page. Such changes are reflected onto the index page automatically.
- A Link then hides all Objects with a ClassName of "marina" (only on the index page) and shows the one Berth "b002"
- The Marina Objects have a Class Name of "marina layout" so can be fetch back from withing a LiveCopy of a separate index page Link.
- If you click Berth002 and then the image, you are taken the the bookings page.
No Layers are used.
There is a second page but this has become a feature.
Technically, there is no added code as everything clever in in the Links.
The Links can be tweaked to employ other jQuery Effects.
:pointAttachment 127866
Acorn
See :pointAttachment 127835 for the more general Embed a Website approach (https://www.talkgraphics.com/showthr...326#post628326).
Interesting approach Acorn. Currently I can't even see how the jQuery is loaded. I see it is but from where on your 'site'?
Egg, there is a White blob off page in the index design that has the Name UsesJQuery.Quote:
Originally Posted by Egg Bramhill
Acorn
Acorn, I saw that but I don't unerstand how it downloads the jQuery. Excuse my ignorance.
I follow this and can understand it but I don't see how your page does it?
https://www.w3schools.com/jquery/jquery_get_started.asp
Egg, I cannot cite the earliest reference but https://www.talkgraphics.com/showthr...366#post536366 is quite far back.Quote:
Originally Posted by Egg Bramhill
To force jQuery without using UsesJQuery, pick an innocuous object and give it a web animation of Fade/Instant on Reveal; this also installs jQuery.
I would imagine a developer invented UsesJQuery early on to aid development and it has remained there every since.
You may also find a Dear Xara Thread where I challenged xara to update its stale libraries as Xara still loads in /*! jQuery v1.11.1 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/license */ .
Acorn
@ Egg & @Acorn,
Thank you for sharing the different approaches - which I understand.
@Egg /(@Acorn) - each js function calls a record from the js array. Could I use a parameter to create a generic function - e.g. record number in the array such myfunctionegg(n) - If so, how would be structured?
Thanks,Quote:
function myfunction1() {
document.getElementById("line1").innerHTML = egg1[0];
document.getElementById("line2").innerHTML = egg1[1];
document.getElementById("line3").innerHTML = egg1[2];
document.getElementById("line4").innerHTML = egg1[3];
document.getElementById("line5").innerHTML = egg1[4];
document.getElementById("line6").innerHTML = egg1[5];
document.getElementById("image-url").innerHTML = egg1[6];
document.getElementById("myImg").src = egg1[6];
}
Gary
Gary, that is where Egg and I disagreed over the approach as I wanted to parameterise it as you are suggesting.Quote:
Originally Posted by Initiostar
I developed the following so that all the student obits could be added into a Students Layer and you retain all the capabilities of Xara: Attachment 127868.
My two more recent offerings are improvements on this presentation, reducing the reliance on JavaScript, which takes more development and testing than most imagine.
For my first generic solution, I see no major editorial issue with separating the presentation page (the main site) from the 'data' by splitting the design into two as with correct image naming the upload effort is fairly trivial for updates and new data.
For my latest Live Copy approach, you don't have to do even that. In the bookings page you can have 1,500 words @ 1px in a 100px square Text Area that is perfectly legible at 3200%. This, scaled to 640px square, is legible in a browser at 200%.
Overall, I consider both to be very flexible.
Acorn
@ Gary:
My js coding is very limited so I can't help here. It would be good to achieve though. My js basically comes from using action script in Macromedia Flash which was js based.Quote:
Could I use a parameter to create a generic function
@ Acorn
Thanks for the explanation. Now that's something I'm afraid I'd forget in a day, I've no brain to hold onto these gems unfortunately.Quote:
To force jQuery without using UsesJQuery, pick an innocuous object and give it a web animation of Fade/Instant on Reveal; this also installs jQuery
I wouldn't say we disagreed. I'd asked you how I could create a link from a thumbnail rather then a js button which you very kindly supplied me with the solution, after which you suggested an alternative solution to the whole thing. I could see it worked very well but it overstretched my understanding of js. That's my limitation :rolleyes:Quote:
... that is where Egg and I disagreed over the approach ...
Egg, "disagreed" is simply 'had a different opinion'. It was not a criticism.Quote:
Originally Posted by Egg Bramhill
I tried to describe the JS approach to avoid growing the code by using two array variables instead of one. When considering it, i found that the XDA was equally capable of delivering a solution (or two) with little code.
If we hadn't conferred (better), we would have had no solutions at all.
That is why I crave debate rather than just churning out unchallenged solutions.
Acorn
Hi Egg,
Sorry Ive not responded before today, but I didnt get a notification of further thread postings? Thanks for looking at my example, hope to sit down at a desktop....with sound to listen to your video later today.
I would love to try your xar file....no idea, how to implement it though, if you can point me in the direction how to integrate into Xara. Thanks again
Hi all eggs example is exactly what i need, can you supply the code or xar file and brief description of steps to implement
Thanks
Egg's already done all that for you in the previous Posts.Quote:
Originally Posted by stuk34
Acorn
Any chance you can share the xar file to adapt?
Thanks
It is not sitting in Post#18.Quote:
Originally Posted by stuk34
If it is not what you are after, I apologise.
Acorn
Hi Stuck34, I've skyped you.