Integrating sidebar X5 - Calendarforum

Go to content

Main menu:

Integrating sidebar X5

Add ons/tools > Integrating

Integrating the sidebar is pretty much as integrating the calendar.

You put the sidebar in an iframe.

You can see an example here : http://www.brammingegnsmuseum.dk

This ( example ) page has a layout like this.

The display is put in the html-object.

If You click visning1 - visning2 ( in the example ), then You will see the iframe shift from one display to another display.

This is made by using the target-method.

The code for that is :

<iframe id="luxcal" name="luxcal" src="http://www.brammingegnsmuseum.dk/kalender/display1kommende.php"></iframe>

<a href="http://www.brammingegnsmuseum.dk/kalender/display1kommende.php" target="luxcal">visning1 - </a>

<a href="http://www.brammingegnsmuseum.dk/kalender/display2.php" target="luxcal">visning 2</a>

This code You put in the first tab of the html-object : HTML code

In the next tab : Expert You put in :

#luxcal { width:95%; height:490px; margin:5px; border-style:solid; border-width:1px; border-color:grey; }

The #luxcal You can name as You wish. If You have more iframes, You should give each its own name.

The first line in the html code, defines the iframe and what to (initial ) put in it.

The next two lines, is another URL to put in the iframe ( via the target ) when clicking the link.

If You only have one display, that You want to show, You should of course only use the first line.

Shifting from one display to another, is very useful if You have two different layouts of the display OR if You have one display You have set up to only show events of category A, and another display that only shows events of category B.

You can have more than 2 displays to shift between.

You can see an example of this here : calendarforum.dk/examples.html

In this example I have put each of the "targets" in its own html-object.

The given names and values is only what I have used for the example : You can use other heights, names and borders.

This is the rather simple way to do it.

You could also have an image with more clickable areas - each link will "fill" the iframe with a specified display.

You do this by putting an extra html-object on the page where the iframe is located.

You then will have an image shown where the object is located.

You "simply" in this ( the html object ) type for example:

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="url 1" alt="Sun">
  <area shape="circle" coords="90,58,3" href="url 2" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="url 3" alt="Venus">
</map>

The img src is a relative path to the image - You can specify a full path.

URL 1,2 and 3: The URL You wish to use.

Possible values:

An absolute URL - points to another web site (like href="http://www.example.com/default.htm")
A relative URL - points to a file within a web site (like href="default.htm")
Link to an element with a specified id within the page (like href="#top")
Other protocols (like https:// ftp://, mailto:, file:, etc..)
A script (like href="javascript:alert('Hello');")

This way You have an image ( planets.gif) that has 3 clickable areas ( one rectangle and 2 circles ) in it.

And You have each area to be directed to one of 3 different pages/URL's.

In each "area shape" You have to put in a target between the url and the alt ( could be target="luxcal" ) as in the :

href="http://www.brammingegnsmuseum.dk/kalender/display1kommende.php" target="luxcal"

You also have to put a target in, if You want to use the image-method for other purposes. If You don't specify a target the URL will open in the same window. To use for shifting displays, the target must be the iframe.

If You want the links to open in a new tab, You have to use the target="_blank" for the HREF.

Example :

<a href="https://www.w3schools.com" target="_blank">Visit W3Schools</a>

Yes - it is a good idea to visit the W3Schools