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

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?

Quote:

---

Originally Posted by KevinH

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: Attachment 112795

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

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.

And once again I forgot to remove the logging. :o
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.

Quote:

---

Originally Posted by siran

And once again I forgot to remove the logging. :o
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: Attachment 112803

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

Great idea, worth to remember. And inspiring.

Quote:

---

Originally Posted by siran

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

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>

---