Menu icon Foundation
Replace top bar title by Processing sketch (animation) and know Column size

Hi,

I am trying to figure out 2 things :
1. How to integrate a Processing sketch (that is an animation, not a picture) instead of the title of my top bar, the elements that is left most. So far, the results is viewable here : coraliediatkine.eu/Biography2. html. My menu is not responsive anymore.Here is the code :

2. I'd like to find out how many pixels a column is, for I need to integrate a sketch and I'll have to specify its size before hand. Does any one have an idea? Thanks!

  <body>
            
    <nav class="top-bar" data-topbar>
    <ul class="title-area">
       
      <li class="name"> 
                 <a href="#">
          
          
              <div id="content">
			<div>
				<canvas id="filltile2" data-processing-sources="/SketchBio/fill_tile2.pde" width="50" height="50">
					<p>Your browser does not support the canvas tag.</p>
					<!-- Note: you can put any alternative content here. -->
				</canvas>
				
	    	</div>
					</div>
          
          </a>
      
      </li>
      <li class="toggle-topbar menu-icon "><a class="menubaraller" href="#"><span></span></a></li>
    </ul>
 
     <section class="top-bar-section"> 
     <ul class="left">

        <li><a class="menubaraller" href="/Biography.html" >About</a></li>
            <li><a class="menubaraller" href="/ReadMe.html" >How To...</a></li>   
           <li><a class="menubaraller" href="/Spatial Audio.html">Spatial Audio</a></li>
 <li><a class="menubaraller" href="/Sound Design.html">Sound Design</a></li>
           <li><a class="menubaraller" href="/Music.html" >Music</a></li>
  <li><a class="menubaraller" href="/Vocal Performance and Improvisation.html">Voice</a></li>
             <li><a class="menubaraller" href="/EarlierMusicWorks.html" >Earlier Works</a></li>
       <li><a class="menubaraller"  href="/Photos.html">Visuals</a></li>
  
                   </ul>
   </section>
</nav>

            

         

columnSizepixelstop-bar

Hi,

I am trying to figure out 2 things :
1. How to integrate a Processing sketch (that is an animation, not a picture) instead of the title of my top bar, the elements that is left most. So far, the results is viewable here : coraliediatkine.eu/Biography2. html. My menu is not responsive anymore.Here is the code :

2. I'd like to find out how many pixels a column is, for I need to integrate a sketch and I'll have to specify its size before hand. Does any one have an idea? Thanks!

  <body>
            
    <nav class="top-bar" data-topbar>
    <ul class="title-area">
       
      <li class="name"> 
                 <a href="#">
          
          
              <div id="content">
			<div>
				<canvas id="filltile2" data-processing-sources="/SketchBio/fill_tile2.pde" width="50" height="50">
					<p>Your browser does not support the canvas tag.</p>
					<!-- Note: you can put any alternative content here. -->
				</canvas>
				
	    	</div>
					</div>
          
          </a>
      
      </li>
      <li class="toggle-topbar menu-icon "><a class="menubaraller" href="#"><span></span></a></li>
    </ul>
 
     <section class="top-bar-section"> 
     <ul class="left">

        <li><a class="menubaraller" href="/Biography.html" >About</a></li>
            <li><a class="menubaraller" href="/ReadMe.html" >How To...</a></li>   
           <li><a class="menubaraller" href="/Spatial Audio.html">Spatial Audio</a></li>
 <li><a class="menubaraller" href="/Sound Design.html">Sound Design</a></li>
           <li><a class="menubaraller" href="/Music.html" >Music</a></li>
  <li><a class="menubaraller" href="/Vocal Performance and Improvisation.html">Voice</a></li>
             <li><a class="menubaraller" href="/EarlierMusicWorks.html" >Earlier Works</a></li>
       <li><a class="menubaraller"  href="/Photos.html">Visuals</a></li>
  
                   </ul>
   </section>
</nav>

            

         
coralie diatkine about 5 years ago

Got the solution for the processing sketch :

    <nav class="top-bar" data-topbar>
    <ul class="title-area">

      <li class="name"> 
                 <a href="#"><canvas id="filltile2" data-processing-sources="/SketchBio/fill_tile2.pde" width="50" height="50">
          <p>Your browser does not support the canvas tag.</p>
          <!-- Note: you can put any alternative content here. -->
        </canvas>



          </a>

      </li>
      <li class="toggle-topbar menu-icon "><a class="menubaraller" href="#"><span></span></a></li>
    </ul>

     <section class="top-bar-section"> 
     <ul class="left">

        <li><a class="menubaraller" href="/Biography.html" >About</a></li>
            <li><a class="menubaraller" href="/ReadMe.html" >How To...</a></li>   
           <li><a class="menubaraller" href="/Spatial Audio.html">Spatial Audio</a></li>
 <li><a class="menubaraller" href="/Sound Design.html">Sound Design</a></li>
           <li><a class="menubaraller" href="/Music.html" >Music</a></li>
  <li><a class="menubaraller" href="/Vocal Performance and Improvisation.html">Voice</a></li>
             <li><a class="menubaraller" href="/EarlierMusicWorks.html" >Earlier Works</a></li>
       <li><a class="menubaraller"  href="/Photos.html">Visuals</a></li>

                   </ul>
   </section>
</nav>