Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 13
  1. #1
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    947

    Default v18 Sliders - Touch Devices and Swipe

    For web developers, pleasant surprise to discover v18.0 (and I'm guessing Pro +) now supports swipe for touch-based devices. Upgraded three of my test sliders to v18.0 > https://initiostar.co.uk/demo/zNivo/

    Works well (first example) in conjunction with an autoplay toggle button; full autoplay and swipe though is likely to confuse the visitor.

    On the positive, v18 renders quite well on a 4K desktop; now understand though about the quirky new handles. Just need to talk about 'transitional websites' and not 'supersites' now?

    Gary

  2. #2
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,489

    Default Re: v18 Sliders - Touch Devices and Swipe

    Nice.

  3. #3
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    947

    Default Re: v18 Sliders - Touch Devices and Swipe

    This is an example HD Full-Width Slider that maintains its aspect ratio up to 4k. You need to wrap it in a container which is explained in the demo - best viewed on a 4k screen.

    Click image for larger version. 

Name:	2021-03-28.jpg 
Views:	42 
Size:	39.4 KB 
ID:	129258

    https://initiostar.co.uk/demo/Pan/index.htm

    The technique stems from video, but works well with Xara's Scale-to-fit-Width (v16.3, v17.0 and v18.0).

    Gary

  4. #4
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,749

    Thumbs down Re: v18 Sliders - Touch Devices and Swipe

    Quote Originally Posted by Initiostar View Post
    now understand though about the quirky new handles
    In the bad ol' UI days, we had 9 nasty black squares that magically changed colour to balance against that of each square's background.

    @Xara:

    BEFORE

    Click image for larger version. 

Name:	Control Handles - Old School.jpg 
Views:	37 
Size:	33.8 KB 
ID:	129259

    Now we have:

    AFTER

    Click image for larger version. 

Name:	Control Handles - New Mess.jpg 
Views:	39 
Size:	37.5 KB 
ID:	129260

    that do no such thing and we have lost the Start Point of the shape (an Egg complaint). The top diagram tells me immediately there has been a Flip.

    The dashes are intrusive and the rotate handle is nugatory. If so important, where are the Skew controls?

    Why does a white flat or circle sitting directly on the straight box boundary, hidden with thick dashes, contribute?

    When it is an image, I can accept the Rounding and the Rotate. The Rotate can easily replace the general shape blob, which doesn't even has the Reset Angle feature.

    I am forever jumping up the the toolbar to toggle Edit Handle, Rotation Centre and even fighting to overcome Smart transform settings.

    You have not improved the UI, you have destroyed its coherence.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  5. #5
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,749

    Default Re: v18 Sliders - Touch Devices and Swipe

    Quote Originally Posted by Initiostar View Post
    This is an example HD Full-Width Slider that maintains its aspect ratio up to 4k. You need to wrap it in a container which is explained in the demo - best viewed on a 4k screen.
    Click image for larger version. 

Name:	2021-03-28.jpg 
Views:	42 
Size:	39.4 KB 
ID:	129258

    https://initiostar.co.uk/demo/Pan/index.htm
    The technique stems from video, but works well with Xara's Scale-to-fit-Width (v16.3, v17.0 and v18.0).
    Gary
    Gary, it is most pleasing to view.

    What is sad is that Xara misses the point that we have to write code to force a Presentation to cycle through its slides.

    Xara has stopped slider development stone-dead and being locked into jQuery v1.11.1 forever is a security concern and frustrating for ongoing web delivery.

    Gosh - two rants in the one Thread!

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  6. #6
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    947

    Default Re: v18 Sliders - Touch Devices and Swipe

    Quote Originally Posted by Acorn View Post
    Gary, it is most pleasing to view.

    What is sad is that Xara misses the point that we have to write code to force a Presentation to cycle through its slides.

    Xara has stopped slider development stone-dead and being locked into jQuery v1.11.1 forever is a security concern and frustrating for ongoing web delivery.

    Gosh - two rants in the one Thread!

    Acorn
    Acorn, your second point, I think, is more a concern. We have jQuery 3.6 thereabouts now. In orders of magnitude, how difficult would it be for Xara to come into this century?

    Gary

  7. #7
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,749

    Info Re: v18 Sliders - Touch Devices and Swipe

    Quote Originally Posted by Initiostar View Post
    Acorn, your second point, I think, is more a concern. We have jQuery 3.6 thereabouts now. In orders of magnitude, how difficult would it be for Xara to come into this century?
    Gary
    Well Gary, I have been asking since 2014: https://www.talkgraphics.com/showthr...-use-of-jQuery.

    One possible approach would be to wrap Xara's old code and use this:
    Code:
    <script>
    console.log("Xara has loaded " + $().jquery);
    var jQ1dot11dot1 = jQuery.noConflict(true); 
    console.log("We have aliased it to jQ1dot11dot1 (" + jQ1dot11dot1().jquery + ")");
    </script>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      console.log("The latest jQuery is now: " +$().jquery);
    </script>
    
    Elsewhere:
    <script>
      (function ($) {
        jQ1dot11dot1(document).ready(function () {
          console.log("Stale Xara jQuery files content ... will still run.");
        });
      }(jQ1dot11dot1));
    </script>
    
    Console: Xara has loaded 1.11.1 We have aliased it to jQ1dot11dot1 (1.11.1) The latest jQuery is now: 3.6.0 Stale Xara jQuery files content ... will still run.
    Xara only have to do this if you have used the old Xara sliders that use legacy code/jQuery v1.11.1. Luckily if you avoid them and just use improved versions then almost everything I have tested will run, even ani.css for animations.

    If you avoid these then all you need add to the Website Code (head) is: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    I am sure the use of jQuery Migrate would also work.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  8. #8
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    947

    Default Re: v18 Sliders - Touch Devices and Swipe

    Acorn,

    If you avoid these then all you need add to the Website Code (head) is: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    I added this line to my demo site: https://initiostar.co.uk/demo/zNivo/ - I can see the line in the published code; did a Lighthouse test and had this message.

    Click image for larger version. 

Name:	JQuery3_6 Lighthouse Test.jpg 
Views:	36 
Size:	31.2 KB 
ID:	129268

    You will know what it means, but I'm not sure. I think I understood too that if I had used an old Xara jQuery-based widget, I would have to use the longer version of your code?

    Question: why would I not add this line of code every time if I have avoided the ageing widgets? And for that matter, why would Xara not just fix it?

    Gary

  9. #9
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,749

    Thumbs down Re: v18 Sliders - Touch Devices and Swipe

    Quote Originally Posted by Initiostar View Post
    Acorn,
    I added this line to my demo site: https://initiostar.co.uk/demo/zNivo/ - I can see the line in the published code; did a Lighthouse test and had this message.

    Click image for larger version. 

Name:	JQuery3_6 Lighthouse Test.jpg 
Views:	36 
Size:	31.2 KB 
ID:	129268

    You will know what it means, but I'm not sure. I think I understood too that if I had used an old Xara jQuery-based widget, I would have to use the longer version of your code?
    Question: why would I not add this line of code every time if I have avoided the ageing widgets? And for that matter, why would Xara not just fix it?
    Gary
    Gary, sorry to disappoint.
    1. The Lighthouse detail is advising nothing relevant to your design as it has no entries in IndexedDB.
    2. Each of the sliders is still running jQuery v1.11.1 - you would have to bypass the IFRAME for simple-slider.htm and add the code in that file directly, whereupon it will crash the slider.
    3. The longer version is to demonstrate a suggestion of how to add in jQuery v3.6.0 and then how Xara might wrap a solution...
    4. Running the Nivo Slider with jQueryv3.6.0 gives this grief:
      Code:
      nivoslider_config.js:147 
      [COLOR=var(--error-text-color)  !important]Uncaught TypeError: widget.find(...).width(...).height(...).nivoSlider is not a function    at xaraSwidgets_nivosliderConstructor (nivoslider_config.js:147)    at HTMLDivElement.<anonymous> (roe.js:1)    at Function.each (jquery.min.js:2)    at S.fn.init.each (jquery.min.js:2)    at xr_spapwr (roe.js:1)    at xr_rx (roe.js:1)    at xr_bl (roe.js:1)    at xr_aeh (roe.js:1)
      
      2
      nivoslider_config.js:147 
      [COLOR=var(--error-text-color)  !important]Uncaught TypeError: widget.find(...).width(...).height(...).nivoSlider is not a function    at xaraSwidgets_nivosliderConstructor (nivoslider_config.js:147)    at HTMLDivElement.<anonymous> (roe.js:1)    at Function.each (jquery.min.js:2)    at S.fn.init.each (jquery.min.js:2)    at xr_spapwr (roe.js:1)    at xr_rx (roe.js:1)[/COLOR]
      
      xaraSwidgets_nivosliderConstructor @ [COLOR=var(--color-link)]nivoslider_config.js:147[/COLOR]
      (anonymous) @ [COLOR=var(--color-link)]roe.js:1[/COLOR]
      each @ [COLOR=var(--color-link)]jquery.min.js:2[/COLOR]
      each @ [COLOR=var(--color-link)]jquery.min.js:2[/COLOR]
      xr_spapwr @ [COLOR=var(--color-link)]roe.js:1[/COLOR]
      xr_rx @ [COLOR=var(--color-link)]roe.js:1[/COLOR]
      [/COLOR]
    5. Xara would have to sort out 1.js, jquery.nivo.slider.pack.js & nivoslider_config.js; a difficult task as the developer has probably taken up knitting.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  10. #10
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    947

    Default Re: v18 Sliders - Touch Devices and Swipe

    OK I understand Acorn,

    All the sliders in my demo https://initiostar.co.uk/demo/zNivo/ are mine; the second two might look like Xara, but were re-engineered. Senior moment from me here; they don't use jQuery. However, I added your one line of code and they all work.

    Gary

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •