Save
Saving
  • C comedowntous

    Make sure to add <script></script> in between your custom <head> content. The correct way to place this would be:

    <! –– OVERLAY MENU ––>
    
    <script>
    function openNav() {
      document.getElementById("myNav").style.display = "block";
    }
    
    function closeNav() {
      document.getElementById("myNav").style.display = "none";
    }
    </script>
    <! –– OVERLAY MENU ––>
    

    posted in General Discussion read more
  • C comedowntous

    Hi @amcd125 - I achieved this using the following code here:

    w3 schools

    You would have to add the code into the custom css + html sections of lay theme settings:

    UNDER CUSTOM HTML:

    <div id="myNav" class="overlay">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
      <div class="overlay-content">
        <a href="/myfirstlink">link 1</a>
        <a href="/mysecondlink">link 2</a>
        <a href="/mythirdlink">link 3</a>
        <a href="/myfourthlink">link 4</a>
      </div>
    </div>
    
    <span class="layovermenu" style="font-size:30px;cursor:pointer" onclick="openNav()">MENU</span>
    

    Under CUSTOM <HEAD> CONTENT :

    /* Open */
    function openNav() {
      document.getElementById("myNav").style.display = "block";
    }
    
    /* Close */
    function closeNav() {
      document.getElementById("myNav").style.display = "none";
    }
    

    UNDER CUSTOM CSS:

    /* overlay menu */
    .overlay {
      height: 100%;
      width: 100%;
      display: none;
      position: fixed;
      z-index: 4;
      top: 0;
      left: 0;
      background-color: rgb(255,255,255);
      background-color: rgba(0,0,0);
    }
    
    .overlay-content {
      position: relative;
      top: 25%;
      width: 100%;
      text-align: center;
      margin-top: 30px;
    }
    
    .overlay a {
      font-family: Futura Pro Bold;
      padding: 8px;
      text-decoration: none;
      font-size: 36px;
      color: #ffffff;
      display: block;
      transition: 0.3s;
    }
    
    .overlay a:hover, .overlay a:focus {
      color: #ffffff;
    }
    
    .overlay .closebtn {
      position: absolute;
      top: 20px;
      right: 45px;
      font-size: 60px;
    }
    
    .layovermenu {
        font-family: Futura Pro Bold;
        position:fixed;
        width: 100%;
        text-align: center;
        z-index: 3;
    }
    
    @media screen and (max-height: 450px) {
      .overlay a {font-size: 20px}
      .overlay .closebtn {
      font-size: 40px;
      top: 15px;
      right: 35px;
      }
    

    I added the class 'layovermenu' in order to change the font and better position the menu link.

    This works great on the desktop version but on mobile the overlay does not show - any tips? @mariusjopen

    Thank you!

    posted in General Discussion read more
  • C comedowntous

    @edgrbnz said in Images appear on link hover:

    .hoverFolio {
    /basic styling for your text object/
    margin: auto !important;
    }

    .hoverFolio-links {
    /that’s the wrapper for the links which also defines the image height in relation to your text block/
    position: relative;
    z-index: 1;
    padding: 5vw 0;
    }

    .hoverFolio .hoverFolio-images img.hoverFolio-image {
    /that’s your image positioning/
    position: absolute;
    object-fit: contain;
    width: auto;
    height: 100%;
    top: 0;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    display: none;
    }

    This did not work for me even after changing $ to jQuery - anyone else having trouble setting this up?

    posted in General Discussion read more
  • C comedowntous

    @mariusjopen said in Mobile settings for margins not registering:

    .laynav.mobile-nav {
    margin-top: 20px;
    }

    Thank you! - this works at placing the menu at a fixed position on mobile. However when the phone is switched to landscape format the menu then overlaps with the sitetitle, any way to work around this?

    Also any way I can center the #grid across all pages - the page content div on mobile is not centered/fixed and so it floats to overlapp with navigation at the top of the page.

    Thanks again!

    posted in General Discussion read more
  • C comedowntous

    Update -

    Adding newpage /newpagesshown breaks the code. Any way I can load the slideshow only once + preload the images? Also change the sitetitle link to a page different than the front page without necessarily changing the front page?

    window.laytheme.on("newpage", function () {
    				checkRatio();
    				jQuery( '.slideshow' ).fadeIn( 1500 );
    				jQuery( "#slideshow" ).find( "img" ).eq( 0 ).animate({
    					"opacity" : 1
    				}, function() {
    					setInterval( 'slideshow()', 3000 );
    				});
    				jQuery( '#title' ).fadeIn( 1500 );
    			});
    			$( window ).resize ( function() {
    				checkRatio();
    			});
    
    			jQuery( 'html' ).click( function() {
    				window.location.href = "/info";
    			});
    
    			var timedelay = 1;
    			function delayCheck() {
    				if( timedelay == 15 ){
    					$( '#title' ).fadeOut( 1500 );
    					timedelay = 1;
    				}
    				timedelay = timedelay+1;
    			}
    
    			jQuery( document ).mousemove( function() {
    				jQuery( '#title' ).clearQueue().fadeIn();
    				timedelay = 1;
    				clearInterval( _delay );
    				_delay = setInterval( delayCheck, 500 );
    			});
    	
    			// page loads starts delay timer
    			if( ! /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    				_delay = setInterval( delayCheck, 500 );
    			}
    	
    			var curr = 0;
    			function slideshow() {	
    				last_pos = curr;
    				curr++;
    		
    				if ( jQuery( "#slideshow" ).find( "img" ).eq( curr ).length > 0 ) {
    					//do nothing
    				} else {
    					curr = 0; //return to first image
    				}
    		
    				jQuery( "#slideshow" ).find( "img" ).eq( last_pos ).animate({
    					"opacity" : 0
    				});
    				jQuery( "#slideshow" ).find( "img" ).eq( curr ).animate({
    					"opacity" : 1
    				});
    			}
    	
    			function checkRatio() {
    				jQuery( "#slideshow" ).find( "img" ).each( function() {
    					height_ratio = .8;
    					image_width = parseInt( jQuery( this ).attr( "width" ) );
    					image_height = parseInt( jQuery( this ).attr( "height" ) );
    					window_height = jQuery( window ).height();
    					new_image_height = window_height * height_ratio;
    					ratio = new_image_height / image_height;
    					new_width = image_width * ratio;
    			
    					if ( new_width > ( jQuery( window ).width() * .9 ) ) {
    						jQuery( this ).addClass( "landscape" );
    					} else {
    						jQuery( this ).removeClass( "landscape" );
    					}
    				});
    			}
    
    		  </script>
    

    OR

    window.laytheme.on("newpageshown", function () {
    				checkRatio();
    				jQuery( '.slideshow' ).fadeIn( 1500 );
    				jQuery( "#slideshow" ).find( "img" ).eq( 0 ).animate({
    					"opacity" : 1
    				}, function() {
    					setInterval( 'slideshow()', 3000 );
    				});
    				jQuery( '#title' ).fadeIn( 1500 );
    			});
    			$( window ).resize ( function() {
    				checkRatio();
    			});
    
    			jQuery( 'html' ).click( function() {
    				window.location.href = "/info";
    			});
    
    			var timedelay = 1;
    			function delayCheck() {
    				if( timedelay == 15 ){
    					$( '#title' ).fadeOut( 1500 );
    					timedelay = 1;
    				}
    				timedelay = timedelay+1;
    			}
    
    			jQuery( document ).mousemove( function() {
    				jQuery( '#title' ).clearQueue().fadeIn();
    				timedelay = 1;
    				clearInterval( _delay );
    				_delay = setInterval( delayCheck, 500 );
    			});
    	
    			// page loads starts delay timer
    			if( ! /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    				_delay = setInterval( delayCheck, 500 );
    			}
    	
    			var curr = 0;
    			function slideshow() {	
    				last_pos = curr;
    				curr++;
    		
    				if ( jQuery( "#slideshow" ).find( "img" ).eq( curr ).length > 0 ) {
    					//do nothing
    				} else {
    					curr = 0; //return to first image
    				}
    		
    				jQuery( "#slideshow" ).find( "img" ).eq( last_pos ).animate({
    					"opacity" : 0
    				});
    				jQuery( "#slideshow" ).find( "img" ).eq( curr ).animate({
    					"opacity" : 1
    				});
    			}
    	
    			function checkRatio() {
    				jQuery( "#slideshow" ).find( "img" ).each( function() {
    					height_ratio = .8;
    					image_width = parseInt( jQuery( this ).attr( "width" ) );
    					image_height = parseInt( jQuery( this ).attr( "height" ) );
    					window_height = jQuery( window ).height();
    					new_image_height = window_height * height_ratio;
    					ratio = new_image_height / image_height;
    					new_width = image_width * ratio;
    			
    					if ( new_width > ( jQuery( window ).width() * .9 ) ) {
    						jQuery( this ).addClass( "landscape" );
    					} else {
    						jQuery( this ).removeClass( "landscape" );
    					}
    				});
    			}
    
    		  </script>
    

    posted in General Discussion read more
  • C comedowntous

    Actually - I just realized that navigating to any other page sends you back to the info page - as if the on-click event of loading the info page keeps repeating itself even after you navigate elsewhere.

    posted in General Discussion read more
  • C comedowntous

    Hi Marius! - I sort of got this to work:

    I created a page which would serve as an intro and went ahead and added the pertaining html + jquery. I can confirm it is running on the page however I have 2 problems:

    1- The slideshow will not load/play on initial page load - the only way I know it is working is when I click on the site title (which appears on mousehover) it directs me to the info page (this is the correct action/response), then when I click the back button on my browser, only then does the slideshow actually begin to play as it’s supposed to -

    2- which then brings me to problem number 2 // I then must wait till all the images are loaded for it to begin playing.

    The site-title is linked to this page as it is set as the front page - after clicking on the slideshow and arriving on the info page, if the user clicks on the site title again, the slideshow does this weird thing where it tries to reload halfway but then goes back to the info content - is there any way to load the slideshow on the first page load but then change the site-title (/) link thereafter so that this doesn’t happen?

    I read somewhere that lay theme is single page and so I must use newpage /newpageshown…

    The site title is completely centered - any way to completely center the images across different media as well?

    Thank you!

    posted in General Discussion read more
  • C comedowntous

    Thanks - The site is back up now, I'm still having trouble with the menu on mobile. None of my position settings seems to be registering and the menu links are fixed to the top of the page above the site title.

    posted in General Discussion read more
  • C comedowntous

    Example - the /artists page:

    There is a link here which I would like centered across different media sizes -

    In the gridder

    <p class="_Default" style="text-align: center;"><a class="artist-link" href="/linkname"><span style="color: #000000;">LINK NAME</span></a></p>
    

    Cudtom CSS

    .artist-link:link {
        width: 60%;
        left: 20%;
        position: absolute;
        text-align: center;
        top: 0;
    }
    

    posted in General Discussion read more