How can I "flip" content inside one td cell depending on a link in another td cell?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • confusedswede
    New Member
    • Nov 2012
    • 7

    How can I "flip" content inside one td cell depending on a link in another td cell?

    I have a website in which one page is to display a calender of events. Working with tables, I have one td-cell containing a-tag links (calendar style, 1st dec, 2nd dec etc) and a td-cell next to it should then show respective info for that date - how can I do that?
    iframe looks really bad, frame doesn't work, any ideas? I'm happy to work with JavaScript or php...
    THANKS for any help!
  • Rabbit
    Recognized Expert MVP
    • Jan 2007
    • 12517

    #2
    It would help to see your code along with a mockup of what you're trying to achieve.

    Comment

    • confusedswede
      New Member
      • Nov 2012
      • 7

      #3
      Hmm. not much to show, as I can't figure out how to do it - Ideally I would like to have an include of a php-file pro date which should be visible in larger td-cell

      Here code (which is just a simple table at the moment - content of div should ideally be clickable (anchor tag or similar, thought of building a nav menu, but problem is to figure out how to get the different links to be visual in td cell thereafter...):
      Code:
           <td valign="top" align="left" width="30%" class="blurbtext" id="corners10" bgcolor="#FAFAFA">
           <div class="blurbtext">Festival Schedule</div>
           <div class="blurbtext"><a href="#01dec12.php"><b>1<sup>st</sup> December, 1pm to 5pm</b><br /> - Festival launch</a> </div>
      <div class="blurbtext"><a href="#01dec12.php"><b>4<sup>th</sup> December</b></a></div>
      <div class="blurbtext"><a href="#13dec12.php"><b>13<sup>th</sup> December</b></a> </div>
      </td>
      <td width="1%" bgcolor="transparent">&nbsp;</td>
      <!-- ABOUT TEXT begin -->	
           <td valign="top" align="left" width="63%" colspan="3" class="blurbtext" id="corners11" bgcolor="#FAFAFA">
              <a href="#about" id="about" />
      <!-- this is where I want content to change in relation to which date the user clicks on in previous td-cell -->
      <div class="title">1<sup>st</sup> December - Festival opening. Lights Switch On</div>
              <frameset cols="100%"><frame src="01dec12.php" /></frameset>
      <!-- 01.dec12.php would look something like this:
      <div class="blurbtext">Festival launch with 2 Christmas markets, festive entertainment throughout the town, a funfair and the Lights Switch On at 4.30pm</div>
              <div class="blurbtext">Meet our Festival-makers who'll greet you with festive cheer and help you find just what it is you're looking for!</div>
              <div class="blurbtext">1pm onwards: </div> -->
       </td>

      does this help any further or you want an url? thanks for having a look!
      Last edited by Rabbit; Nov 7 '12, 10:20 PM. Reason: Please use code tags when posting code.

      Comment

      • Rabbit
        Recognized Expert MVP
        • Jan 2007
        • 12517

        #4
        What about the mockup?

        The only reason I'm asking for that is because I don't understand what you want to accomplish. And a picture of what you're looking for in the end product makes things much easier to understand.

        Comment

        • confusedswede
          New Member
          • Nov 2012
          • 7

          #5
          I can understand that :-) Not very good at making explanations... here a screenshot...

          Comment

          • Rabbit
            Recognized Expert MVP
            • Jan 2007
            • 12517

            #6
            Which part of that image are you trying replicate in your code?

            Comment

            • confusedswede
              New Member
              • Nov 2012
              • 7

              #7
              SO left td (first rounded td-cell) is the one with the dates, the right one is the description of what is going on on that particular date, so that right td-cell is the one where I want content to change depending on which date they click on in the date-td... does that make sense?

              "Festival Schedule" should have linkable dates and

              "1st December Festival opening blablabla ..."should be interchangeable according to which date someone clicks...

              Comment

              • Rabbit
                Recognized Expert MVP
                • Jan 2007
                • 12517

                #8
                How are you storing what happens on each date?

                Comment

                • confusedswede
                  New Member
                  • Nov 2012
                  • 7

                  #9
                  currently as php-files

                  Comment

                  • Rabbit
                    Recognized Expert MVP
                    • Jan 2007
                    • 12517

                    #10
                    So a different php file for each date? Why not just link to the php file and have the same layout in each file?

                    Comment

                    • confusedswede
                      New Member
                      • Nov 2012
                      • 7

                      #11
                      Solved it in the end myself - and a simple solution.
                      What I wanted to do was dynamically change content of one td cell which was dependent of a link src in another td cell. So I used iframe in the second td-cell in the end and using a attribute target in order to dynamically change the content of the iframe. Simple, and hopefully I did it right - it looks good on my page though, so I suppose I did find the solution.

                      I did the following:

                      Code (much simplified):
                      Code:
                      <table>
                      <tr>
                      <td>
                      <div class="textlink"><a href="01dec12.php" target="scheduleDetails"><b>1<sup>st</sup> December, 1pm to 5pm</b></a></div>
                      <div class="textlink"><a href="10dec12.php" target="scheduleDetails"><b>10<sup>th</sup> December</b></a></div>
                      <div class="textlink"><a href="16dec12.php" target="scheduleDetails"><b>16<sup>th</sup> December</b></a></div>
                      </td>
                      <!-- second td cell will dynamically change content dependent on which link is clicked above - that was all along what I was trying to achieve. With iframe and target it's simply done, just a bit too rusty with my knowledge, I suspect -->
                      <td>
                       <iframe name="scheduleDetails" src="01dec12.php" scrolling="no" width="100%" height="400px" marginwidth="8px" frameborder="0"></iframe>
                      </td>
                      </tr>
                      </table>

                      Comment

                      Working...