Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #176321

    There is something I can’t figure out. Main goal is making the Fullscreen Slider “100% minus 100px in height, instead of 100% height of the screen so you will see some of the content at the bottom.

    In the code below you’ll see a height of 836px, which is auto updated when I rescale the browser window. Changing the code manually with Chome > inspect element to the height -100px does the job.

    I think I need to edit a piece of JS, but can’t find out what I should edit.

    Please, advice. Thanks!

    <div data-size="no scaling" data-animation="slide" data-ids="3196" data-autoplay="false" data-bg_slider="true" data-slide_height="100" data-handle="av_fullscreen" data-interval="5" data-class=" " data-css_id="fullscreen_slider_0" data-stretch="" data-lightbox_size="large" class="avia-slideshow avia-slideshow-1 avia-slideshow-no scaling av_fullscreen avia-slide-slider " itemscope="itemscope" itemtype="http://schema.org/ImageObject" style="height: 836px;">

    #176876

    Hi,

    Can you post the link to your website please?

    Regards,
    Josue

    #176912

    Hi,

    thanks for your reply. You can take a look at the(work in progress) website here

    • This reply was modified 9 months ago by  vruchtvlees.
    #176928

    Attached an image to make things more clear

    #177124

    Hey!

    Have you tried padding-bottom?

    .avia-fullscreen-slider .avia-slideshow{
    padding-bottom: 100px; 
    }
    

    Cheers!
    Josue

    #177143

    Hi Josue,

    thanks for your suggestion. Too bad it i’snt working.
    The slider will still display fullscreen.

    Michael

    #177155

    Hi Michael!

    The only solution i see is to apply some JavaScript, can you create an administrator account and post it here as a private reply?

    Regards,
    Josue

    #177162

    Hi Josue,

    will do that later. Thanks!

    Meanwhile: isn’t there a piece of JavaScript running that measure the browsers height and sets the height as inline css (element.style) for the slider div? The marked green area in the above image?

    I have the idea that with a simple customization of the JS we can set the height we want :)

    For example something like this:

    $browserheight=100%
    $correction=100px
    $newheight = $browserheight – $correction

    <div style=”$newheight”>slider content</div>

    Michael

    #177813

    Hey!

    I did not test this modification but try to adjust the height variable in wp-content\themes\enfold\js\shortcodes.js to calculate the new height. Search for

    
        		this.$slider.height(slide_height);
    

    and replace it with

    
    this.$slider.height(slide_height);
    if($('body').hasClass('.page-id-3014')) this.$slider.height(slide_height) =  this.$slider.height(slide_height) - 100;
    

    Note that the code will only work on the page with the id 3014. By going this way we avoid to break other sliders on different pages.

    Cheers!
    Peter

    #177814
    This reply has been marked as private.
    #177816

    Thanks Dude!

    This is coming closer to what I want! But unfortunatly your code isnt working. But I found this:

    _setSize: function( )
        	{
        		var viewport		= this.$win.height(),
        			slide_height	= Math.ceil( (viewport / 100) * this.options.height );
    			
    			if(this.$subtract.length)
    			{
    	    		this.$subtract.each(function()
    	    		{
    	    			slide_height -= this.offsetHeight;
    	    		});
        		}

    If i change “viewport / 100″ to “viewport / 125″ it give me almost what I want. This is still relative. I want it to be fixed instead of relative. Meaning you can always see 125px of the page beneath the slider.

    Michael

    edit: i applied the / 125 at the moment

    • This reply was modified 9 months, 1 week ago by  vruchtvlees.
    #178026

    Hi!

    I just noticed that my code won’t work because the hasClass check is wrong . It must be

    
    this.$slider.height(slide_height);
    if($('body').hasClass('page-id-3014')) this.$slider.height(slide_height) =  this.$slider.height(slide_height) - 100;
    

    instead. If it still doesn’t work just try:

    
    this.$slider.height(slide_height);
    this.$slider.height(slide_height) =  this.$slider.height(slide_height) - 100;
    

    Best regards,
    Peter

    #178039

    Hi all, thanks for all the responses in this thread. Thanks for pointing me in the right direction.

    I finally solved it adding “- 125″ to this line of code in shortcodes.js:

    slide_height = Math.ceil( (viewport / 100) * this.options.height - 125 );

Viewing 13 posts - 1 through 13 (of 13 total)

The topic ‘Fullscreen Slider: change the height of 100% to 100% – 100px’ is closed to new replies.