Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • October 16, 2013 at 9:57 am #176321
    vruchtvlees

    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;">

    October 17, 2013 at 6:38 am #176876
    Josue

    Hi,

    Can you post the link to your website please?

    Regards,
    Josue

    October 17, 2013 at 9:36 am #176912
    vruchtvlees

    Hi,

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

    • This reply was modified 11 years, 4 months ago by vruchtvlees.
    October 17, 2013 at 10:23 am #176928
    vruchtvlees

    Attached an image to make things more clear

    October 17, 2013 at 6:54 pm #177124
    Josue

    Hey!

    Have you tried padding-bottom?

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

    Cheers!
    Josue

    October 17, 2013 at 7:29 pm #177143
    vruchtvlees

    Hi Josue,

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

    Michael

    October 17, 2013 at 8:13 pm #177155
    Josue

    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

    October 17, 2013 at 8:49 pm #177162
    vruchtvlees

    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

    October 19, 2013 at 10:28 am #177813
    Dude

    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

    October 19, 2013 at 10:31 am #177814
    vruchtvlees
    This reply has been marked as private.
    October 19, 2013 at 10:41 am #177816
    vruchtvlees

    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 11 years, 4 months ago by vruchtvlees.
    October 20, 2013 at 9:11 am #178026
    Dude

    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

    October 20, 2013 at 11:03 am #178039
    vruchtvlees

    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 );

  • Author
    Posts
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.