Welcome to TalkGraphics.com
Page 1 of 3 123 LastLast
Results 1 to 10 of 28

Thread: HTML, CSS, JS

  1. #1
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,464

    Default HTML, CSS, JS

    This is one of those things that won't stay in it's allocated memory slot. This time I'm going to write it and then forget where I wrote it instead.

    Using a placeholder to create a comparison slider, but the same applies to most of these things. Where does the following go? Page, Website, Placeholder, Body, Head???

    HTML?
    CSS?
    JS?

    The example I'm working on >>> Before After Image Slider (Vanilla) (codepen.io) <<<

  2. #2
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    15,908

    Default Re: HTML, CSS, JS

    Placeholder Body
    Head
    Last

    Mostly.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPXv18 , XWDPv12/v15, XPGDv10, X3D7, Xara Xtreme 5, and others back through time (to CC's Artworks).
    Technical remediation and consultancy for your web designs. TG Nuggets you might like. Report faults: Magix; Xara Cloud+/Pro+

  3. #3
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,464

    Default Re: HTML, CSS, JS

    So...
    HTML - Placeholder Body
    CSS - Head (Placeholder, Page or Website?)
    Last - Don't understand this bit at all. Not unusual though.

  4. #4
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    15,908

    Default Re: HTML, CSS, JS

    Quote Originally Posted by Chris M View Post
    So...
    HTML - Placeholder Body
    CSS - Head (Placeholder, Page or Website?)
    Last - Don't understand this bit at all. Not unusual though.
    Yes
    Any of them
    JS acts on DOM elements, they have to exist first.

    I detailed all this once before. Still looking.

    I thought I would try terse for a change.
    It's just lazy as is not capitalising, failing to use punctuation, sentences and paragraphs.

    The worst failing is assuming someone is inside your head.
    A statement that can be taken in several ways.

    I am still looking...

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPXv18 , XWDPv12/v15, XPGDv10, X3D7, Xara Xtreme 5, and others back through time (to CC's Artworks).
    Technical remediation and consultancy for your web designs. TG Nuggets you might like. Report faults: Magix; Xara Cloud+/Pro+

  5. #5
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,464

    Default Re: HTML, CSS, JS

    Got it. The penny dropped.

    Yes, I'm sure this has been explained before more than once. It's one of those things that just doesn't stick. Probably because I don't understand how it actually works. I also don't use coding often enough, or diversely enough, to be anywhere near to fluent.

  6. #6
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,464

    Default Re: HTML, CSS, JS

    And the penny dropped right off the edge and into oblivion.
    Egg made one that works well, but doesn't have a 'click and drag' feature. I tried to work out what bit goes where and ended up drinking heavily and sobbing quietly.

    Egg's version >>> before-after.xar <<<

    The one I'm trying (and failing) to make work is from Code Pen, linked in post #1. I've tried numerous combinations of Page Head/Body, Placeholder Head/Body and even staring really hard at Acorn's steps didn't give me a result.

    I've pasted the code as it appears on Code Pen, although I realise it can be trimmed. I've also started afresh and haven't placed the code anywhere except where you see it. If anyone can have a look and start the answer with "It's easy, what's wrong with you." I'd be a grateful little member.

    >>> Comparison Slider.xar <<<

  7. #7
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,429

    Default Re: HTML, CSS, JS

    Hi Chris, finally got it working (apart from the ocassional images getting a blue hue, which was the case on the original too). It took some time to sort though!
    I've also added some additional js that someone posted in the comments section to get it to work with touch screens.
    DEMO


    Attached Files Attached Files
    Last edited by Egg Bramhill; 23 July 2022 at 07:55 PM.
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  8. #8
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,464

    Default Re: HTML, CSS, JS

    Egg, I doff my cap to you, sir.
    Click image for larger version. 

Name:	I Doff My Hat.jpg 
Views:	11 
Size:	19.4 KB 
ID:	132477

    I'm sorry you spent more time than you should have on it. Hopefully, you did a little jig and shouted 'Hell yeah' before remembering you aren't 12 anymore.
    Not for the first time, I thank you for freely giving your time, patience and knowledge.

  9. #9
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,429

    Default Re: HTML, CSS, JS

    My pleasure Chris, this is always been what this forum is about
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  10. #10
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    15,908

    Default Re: HTML, CSS, JS

    I find most coding on-line is clunky and not best suited for the Xara environment.

    Instead, here is my anime.js take on the idea: anime.js - Before-After Slider.xar

    The top image is the After one and has a target Name of 'after'.
    The is a JavaScript Slider Placeholder that links into the animation.

    The animation runs the once to show the Slider in operation.
    Thereafter, you drag the Slider.
    If you don't want the animation to start, add 'autoplay: false,', or set 'duration: 1,'.

    With a different image width, remember you need to change the Slider width in its Code and line up left edges.
    The rest you can play around with.
    The CSS for slider controls is browser hit and miss so don't tweak it unless you can spare the time testing.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPXv18 , XWDPv12/v15, XPGDv10, X3D7, Xara Xtreme 5, and others back through time (to CC's Artworks).
    Technical remediation and consultancy for your web designs. TG Nuggets you might like. Report faults: Magix; Xara Cloud+/Pro+

 

 

Tags for this Thread

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
  •