Welcome to TalkGraphics.com
Results 1 to 9 of 9
  1. #1
    Join Date
    May 2016
    Posts
    1

    Default Creating Links to Layers

    Hello, hope someone can help me with this issue.

    I have a web page that has a number of areas that link to various layers. When I click on an image, and it opens the layer, I would like the layer to open at the top of the layer, and not for instance in the middle of the layer. Is there a way to get the layer to open, and automatically scroll to the top of the layer?

    Many Thanks

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

    Default Re: Creating Links to Layers

    Welcome to TalkGraphics

    I am not quite sure what you are trying to do but I'll make a guess.

    I place a rectangle on a new pop-up layer that covers all the content beneath the layer that I do not want to show. Then I make that rectangle the same color as the page background. On top of this I add my content.

    Is this what you want to do?

  3. #3
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    18,448

    Info Re: Creating Links to Layers

    Quote Originally Posted by KevinH View Post
    Hello, hope someone can help me with this issue.
    I have a web page that has a number of areas that link to various layers. When I click on an image, and it opens the layer, I would like the layer to open at the top of the layer, and not for instance in the middle of the layer. Is there a way to get the layer to open, and automatically scroll to the top of the layer?
    Many Thanks
    Kevin, I don't know of a way. I have a partial solution that I've only checked on a single page: Scroll To Panel.web

    Put your Objects on your top layer; I called mine PanelDisplay.
    I then Named my topmost object "magic".

    I added an image to the MouseOff Layer and cloned it into the PanelDisplay Layer.

    For the MouseOff Layer, I gave the object a special Name of UsesJQuery.
    I also made it Link to the PanelDisplay Layer.

    for the PanelDisplay Layer, i gave the object the Link of
    Code:
    javascript: void($('html, body').animate({scrollTop: $('#magic').offset().top -25 }, 'slow'));
    The reason it is a partial solution is that for it to work you need to double click the image / button for the pop-up to appear and then the scroll kicks in.
    Thereafter, a click on the image / button when the panel is open will slowly scroll to the panel top.

    Happy to hear of any other solution.

    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

  4. #4
    Join Date
    Apr 2015
    Location
    Germany
    Posts
    927

    Default Re: Creating Links to Layers

    Just a modification of Acorn's work (which I didn't fully understand).
    Requires only one click, but has code at the page header.
    Only tested with Designer Pro X 10 and 11.
    Attached Files Attached Files

  5. #5
    Join Date
    Apr 2015
    Location
    Germany
    Posts
    927

    Default Re: Creating Links to Layers

    And once again I forgot to remove the logging.
    Also the code was incorrect and inflexible.
    Please use the updated:

    Code:
    <script>
    function openAndScroll(sid){
     var e=document.getElementById(sid);
     if(e){
      var p=e.parentNode;
      while(p&&p.id.indexOf("xr_xp")!=0)p=p.parentNode;
      if(p){
       xr_cpu(parseInt(p.id.substr(5)));
       setTimeout(function(){$('html,body').animate({scrollTop:$(e).offset().top-25},'slow');},100);
      }
     }
    }
    </script>
    As mentioned above, the main part is taken from Acorn's example.
    How it works:

    1. The code at the head creates a function called openAndScroll. (see above)
    2. The object on the pop-up layer has the name 'magic' applied. (This lets Xara give the created HTML element that ID. Any simple name would be allowed.)
    3. The button is linked to
    Code:
    javascript:openAndScroll('magic');
    which calls the function passing the parameter 'magic'.
    4. The button has the name 'UsesJQuery' applied to tell Xara to include the JQuery javascript library.
    5. There is a rectangle below the button that forces the pop-up layer to be exported.

    When the button is clicked the function tries to find the HTML element with the given ID.
    If found it tries to identify the internal number of the pop-up layer.
    If found it calls the Xara internal function to open the pop-up layer and calls Acorns code a little delayed.
    Attached Files Attached Files

  6. #6
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    18,448

    Info Re: Creating Links to Layers

    Quote Originally Posted by siran View Post
    And once again I forgot to remove the logging.
    Also the code was incorrect and inflexible.
    Please use the updated:

    Code:
    <script>
    function openAndScroll(sid){
     var e=document.getElementById(sid);
     if(e){
      var p=e.parentNode;
      while(p&&p.id.indexOf("xr_xp")!=0)p=p.parentNode;
      if(p){
       xr_cpu(parseInt(p.id.substr(5)));
       setTimeout(function(){$('html,body').animate({scrollTop:$(e).offset().top-25},'slow');},100);
      }
     }
    }
    </script>
    As mentioned above, the main part is taken from Acorn's example.
    How it works:

    1. The code at the head creates a function called openAndScroll. (see above)
    2. The object on the pop-up layer has the name 'magic' applied. (This lets Xara give the created HTML element that ID. Any simple name would be allowed.)
    3. The button is linked to
    Code:
    javascript:openAndScroll('magic');
    which calls the function passing the parameter 'magic'.
    4. The button has the name 'UsesJQuery' applied to tell Xara to include the JQuery javascript library.
    5. There is a rectangle below the button that forces the pop-up layer to be exported.

    When the button is clicked the function tries to find the HTML element with the given ID.
    If found it tries to identify the internal number of the pop-up layer.
    If found it calls the Xara internal function to open the pop-up layer and calls Acorns code a little delayed.
    siran, I am grateful you took the time to develop my puny first stab.
    In reading through your coding, I then had an insight that helped me develop a quite flexible approach for multiple buttons on multiple layers.

    So the details are as follows:


    Create a number of layers.
    Add Shapes across the Layers.
    Ensure something on the page has a Name of UsesJQuery.
    Give each topmost Shape a Name: here I've used - tom, dick harriet


    Create Shapes on the MouseOff Layer that each Link to a new Layers (standard Xara).
    Give each of these a Name. Here I chose: jumpToTom, jumpToDick & jumpToHarriet.
    Ultimately these need to be hidden but kept.


    Create more shapes on the MouseOff layer, which can be rollover buttons, images, etc.
    Set its Link to javascript: openAndScroll(objectName, invokingButtonName), here, each is:
    javascript: openAndScroll('tom','jumpToTom');
    javascript: openAndScroll('dick','jumpToDick');
    javascript: openAndScroll('harriet','jumpToHarriet');


    In the Page HTML code (head), include this:
    Code:
    <script>
    function openAndScroll(sid,lid) {
      eval($('#' + lid).parent().attr('href'));
      //console.log($('#' + lid).parent().attr('href'));
      $('html,body').animate({scrollTop:$('#' + sid).offset().top-25},'slow');
    }
    </script>
    My example: Scroll To Named Objects in Layers.web

    The invoking Button setting need to be kept at Instant.
    If you change it, you would have to change the offset value to a larger value, say 250 px.

    Acorn
    Last edited by Acorn; 28 May 2016 at 12:52 PM.
    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

  7. #7
    Join Date
    Apr 2015
    Location
    Germany
    Posts
    927

    Default Re: Creating Links to Layers

    Great idea, worth to remember. And inspiring.

  8. #8
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    18,448

    Default Re: Creating Links to Layers

    Quote Originally Posted by siran View Post
    Great idea, worth to remember. And inspiring.
    On you too. I was trying to do everything in one action / button. You kept the original link; all I did was found an easier way to reference into it.
    I've always been after a way to simply access Xara's actions.

    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

  9. #9
    Join Date
    Apr 2015
    Location
    Germany
    Posts
    927

    Default Re: Creating Links to Layers

    Back to the brute force method.
    Here is an example that does only require you to

    1. put some code to the page or website
    2.a) add a name (htmlclass=scrollOnOpen) to the button that opens the pop-up layer
    2.b) or a different name (htmlclass=scrollToElement) to the object on the pop-up layer that should be scrolled to

    2.a) always scrolls to the topmost object.
    With 2.b) you can define where to scroll to.
    2.b) implicitly modifies all buttons that link to the specific pop-up layer.
    If some of the code is removed the behavior of 2.b) can be changed to become a simple marker (see description in the example file).

    This is the code:
    Code:
    <script>
    function forEachElem(l,f){if(f)for(var i=0;i<l.length;i++)f(l[i]);return l;}
    function allElemOfClass(c,f,b){return forEachElem((b||document).getElementsByClassName(c),f);}
    function allElemOfSelector(s,f,b){return forEachElem((b||document).querySelectorAll(s),f);}
    function calcTop(e){
     var eTop=e.offsetTop;
     if(e.tagName=="DIV"||e.tagName=="A"){
      var t=9999999999,c=e.firstElementChild;
      while(c){t=Math.min(calcTop(c),t);c=c.nextElementSibling;}eTop+=t;
     }
     return eTop;
    }
    
    var scrollToPos,intLayerNum;
    function pScrollTo(){
     var d=Math.min(Math.max(scrollToPos-16,0),Math.max(document.documentElement.scrollHeight,document.body.scrollHeight)-innerHeight)-pageYOffset,a=Math.abs(d);
     if(a>=1){
      scrollBy(0,Math.min(Math.max(a/8,1),30)*(d<0?-1:1));
      setTimeout(pScrollTo,10);
     }
    }
    
    function scrollLayer(){
     var l=document.getElementById("xr_xp"+intLayerNum);
     if(l.style.display=='none')setTimeout(scrollLayer,100);else{
      var e=allElemOfClass("scrollToElement",null,l)[0];
      if(e){
       scrollToPos=e.offsetTop;
       while(e=e.offsetParent)scrollToPos+=e.offsetTop;
      }else{
       scrollToPos=calcTop(l)+l.offsetTop;
       while(l=l.offsetParent)scrollToPos+=l.offsetTop;
      }
      setTimeout(pScrollTo,0);
     }
    }
    
    function openAndScroll(n){
     xr_cpu(intLayerNum=n);
     setTimeout(scrollLayer,0);
    }
    
    addEventListener("load", function(){
     function setHref(e,n){e.href="javascript:openAndScroll('"+n+"')";}
     var identString="javascript:xr_cpu(";
     allElemOfClass("scrollToElement",function(e){
      var l=e.parentNode;while(l&&l.id.indexOf("xr_xp")!==0)l=l.parentNode;
      if(l){var n=l.id.substr(5);allElemOfSelector('a[href="'+identString+n+')"]',function(e){setHref(e,n);});}
     });
     allElemOfClass("scrollOnOpen",function(e){
      var a=e.parentNode;
      if(a.href.indexOf(identString)===0)setHref(a,parseInt(a.href.substr(18)));
     });
    });
    </script>
    Attached Files Attached Files

 

 

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
  •