Search

Hi,

I'm new in xslt world. I would need to have a loyout in two columns in wich I have the immage on the left and the text on the right, and they are connected. And I have also a javascript to toggle immage. So my xslt code is: 

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:xs="http://www.w3.org/2001/XMLSchema"
    xmlns:xd="http://www.oxygenxml.com/ns/doc/xsl"
    exclude-result-prefixes="xs xd"
    version="2.0"
    xmlns="http://www.w3.org/1999/xhtml"
    xpath-default-namespace="http://www.tei-c.org/ns/1.0"
    xmlns:tei="http://www.tei-c.org/ns/1.0"
    >
    <xsl:output method="xhtml"/>
 ....    


  &lt;script type="text/javascript">


    function toggleSize(img){
        if (parseInt(img.style.width) != 820){
            img.style.width='820px';}
        else{
            img.style.width = '50%';
        }
    }
        function showHideNote(noteId){
            var note = document.getElementById(noteId);
            if (note.className == 'hiddenNote'){
            note.className='showingNote';
        }
        else{
            note.className='hiddenNote';
        }

        return true;
    }

&lt;/script>

So how to align text and immage next to each other? Thanks a lot!!!

just to clarify XSLT is there to help you convert your XML data into HTML.

Styling depends on the structure of your HTML and the CSS accompanying it, same as for any other normal website built with HTML & CSS. So if you're looking for styling you have to get the correct html & CSS structure first.

Thank a lot for the answer. I tryed to insert a lot of code I found on the web in my html but doesn't work. Actually my html is the folloeing:

<?xml version="1.0" encoding="utf-8"?><html xmlns="http://www.w3.org/1999/xhtml" xmlns:tei="http://www.tei-c.org/ns/1.0">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Horto do esposo (Base text)</title><style type="text/css">


                        top:100px;
                        left:200px;
                        font-family: Arial, Helvetica, sans-serif;
                        font-size: 100%;
                        color: #000000;
                        word-spacing: normal;
                        line-height: 10pt;
                        padding:10
                        }
                        ..info img {
                        position:absolute;
                        top:0;
                        left:0;
                        width:170px;
                        align:center;
                        padding:10;
                        float:left;
                        }

                       li:focus{
                        background-color: white;
                        }
                        .hiddenNote{
                        display: none;
                        }
                        .showingNote{
                        display: block;
                        cursor: pointer;
                        border: solid 1px black;
                        float: right;
                        width: 20%;
                        margin: 2%;
                        padding: 0.5em;
                        background-color: gray;

                        border-top: 1px solid #999;
                        border-right: 2px solid #555;
                        border-bottom: 2px solid #555;
                        border-left: 1px solid #999;

                        }
                        .persName{
                        text-decoration: underline;
                        color: red;
                        cursor: pointer;
                        }
                    </style>&lt;script type="text/javascript">


                        function toggleSize(img){
                        if (parseInt(img.style.width) != 820){
                       img.style.width='820px';}
                        else{
                        img.style.width = '50%';
                        }
                        }
                        function showHideNote(noteId){
                        var note = document.getElementById(noteId);
                        if (note.className == 'hiddenNote'){
                        note.className='showingNote';
                        }
                        else{
                        note.className='hiddenNote';
                        }

                        return true;
                        }

                    &lt;/script></head>
   <body>
      <ul>
         <li><a href="#chapter_1">Capitulo primeyro</a></li>
         <li><a href="#chapter_2">Capitulo segundo</a></li>
      </ul>

      <h1 style="text-align:center">Livro III</h1>

      <h1 style="text-align:center">some text</h1>




      <div>

         <h1 style="text-align:center" id="chapter_1">...</h1>

         <img src="folio16r.jpg" style="width: 120px; cursor: pointer;" onclick="toggleSize(this)" alt="page image from manuscript" />



         <p style="text-align:justify; font-family:garamond">...

the java script works but not the alignment... 

<?xml version="1.0" encoding="utf-8"?><html xmlns="http://www.w3.org/1999/xhtml" xmlns:tei="http://www.tei-c.org/ns/1.0">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Horto do esposo (Base text)</title><style type="text/css">


                    top:100px;
                    left:200px;
                    font-family: Arial, Helvetica, sans-serif;
                    font-size: 100%;
                    color: #000000;
                    word-spacing: normal;
                    line-height: 10pt;
                    padding:10
                    }
                    ..info img {
                    position:absolute;
                    top:0;
                    left:0;
                    width:170px;
                    align:center;
                    padding:10;
                    float:left;
                    }

                   li:focus{
                    background-color: white;
                    }
                    .hiddenNote{
                    display: none;
                    }
                    .showingNote{
                    display: block;
                    cursor: pointer;
                    border: solid 1px black;
                    float: right;
                    width: 20%;
                    margin: 2%;
                    padding: 0.5em;
                    background-color: gray;

                    border-top: 1px solid #999;
                    border-right: 2px solid #555;
                    border-bottom: 2px solid #555;
                    border-left: 1px solid #999;

                    }
                    .persName{
                    text-decoration: underline;
                    color: red;
                    cursor: pointer;
                    }
                </style>&lt;script type="text/javascript">


                    function toggleSize(img){
                    if (parseInt(img.style.width) != 820){
                   img.style.width='820px';}
                    else{
                    img.style.width = '50%';
                    }
                    }
                    function showHideNote(noteId){
                    var note = document.getElementById(noteId);
                    if (note.className == 'hiddenNote'){
                    note.className='showingNote';
                    }
                    else{
                    note.className='hiddenNote';
                    }

                    return true;
                    }

                &lt;/script></head>
<body>
  <ul>
     <li><a href="#chapter_1">Capitulo primeyro</a></li>
     <li><a href="#chapter_2">Capitulo segundo</a></li>
  </ul>





  <h1 style="text-align:center">Livro III</h1>

  <h1 style="text-align:center">Falamento das prophetas e cõdiçõẽs da Sancta Scriptura e de como deve seer leuda e
     emsinada.
  </h1>




  <div>

     <h1 style="text-align:center" id="chapter_1">Capitulo primeyro</h1>

     <img src="folio16r.jpg" style="width: 120px; cursor: pointer;" onclick="toggleSize(this)" alt="page image from manuscript" />



     <p style="text-align:justify; font-family:garamond">...
     </p>

I don't know why I can't past the html code... By the way I have the javascript that works but if I write the position or float of the image doesn't...

It seems like this is the same thread as http://www.getsymphony.com/discuss/thread/102051/ A mode should close that one.

To be clear, your problem has nothing to do with Symphony, but is just a CSS/layout problem, correct?

You can probably get better/fast help on Stack Overflow, but if you want us to help, you will have to provide more details. We can't guess as to why your CSS isn't working. Maybe you just made a typo, or maybe your code is actually wrong. The best way would be to make a jsfiddle where you have all your HTML, CSS, and JS.

thanks a lot pat, very kind. And I apologize but I am new in all this staff and I am trying to learn very hard...

Actually I have an xml file with facs attribute in wich I put the image. Then I have an xsl file where I put the only one java about images that is:

&lt;script type="text/javascript">

                    function toggleSize(img){
                    if (parseInt(img.style.width) !=220){
                    img.style.width='220px';}
                    else{
                    img.style.width = '90%';
                    }
                    }
                    function showHideNote(noteId){
                    var note = document.getElementById(noteId);
                    if (note.className == 'hiddenNote'){
                    note.className='showingNote';
                    }
                    else{
                    note.className='hiddenNote';
                    }

                    return false;
                    }
                &lt;/script>

and that make a small image in html that I can clic and under the text. Instead I would like the image to occupy half page and on the right the text that refers to the image. thanks a lot and again, i am sorry...

SPAM.

It's not spam.

I've gone in and indented your code properly for you. When posting code, it must be indented with 4 spaces in the textarea to display correctly.

We do advise tou use a pasting service however, something like pastie.org.

I've also closed the other thread.

Please try and only post your queries once.

@hortodos: As I said, we can't help you without the entire code. In the code you posted, it's just a javascript function. We can't see the HTML or CSS, which actually affects the position of the image.

Create an account or sign in to comment.

Symphony • Open Source XSLT CMS

Server Requirements

  • PHP 5.3-5.6 or 7.0-7.3
  • PHP's LibXML module, with the XSLT extension enabled (--with-xsl)
  • MySQL 5.5 or above
  • An Apache or Litespeed webserver
  • Apache's mod_rewrite module or equivalent

Compatible Hosts

Sign in

Login details