4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

Quick CSS Question

by jt47000
3 replies
  • WEB DESIGN
    • |
Hi guys,

I hate to bother but I have 2 quick questions having to do with the slider on my homepage: guitarmadeez.com

1. If you look at the logo at the top and then the slider below, there is a quarter inch white gap between the two. I'm trying to get rid of that area . i'm guessing its a padding issue. How can I remove that gap?

2. The 3rd slide in the slider is a video and I can't get it to automatically play for the life of me. Any idea why it won't play.

I need this done like in the next few hours and I don't have 3 days to wait to hear back from the theme tech support and no support forum for theme. You fellow warriors are awesome and you always come through for people in need.

Any help would be GREATLY appreciated,

Thank you

J
#css #question #quick
  • Profile picture of the author second2none
    Code:
    <p style="/* text-align: justify; */">&nbsp; 
    <script type="text/javascript">
    (function($){
    $(window).load(function(){

    $('#slider_1493115721').find('br').remove();

    /* install slider */
    $('#slider_1493115721').iosSlider({
        snapToChildren: true,
        desktopClickDrag: true,
        snapFrictionCoefficient: 0.8,
        autoSlideTransTimer: 500,
        horizontalSlideLockThreshold:3,
        slideStartVelocityThreshold:3,
        infiniteSlider:true,
        autoSlide: true,
        autoSlideTimer: 4500,
        navPrevSelector: $('.next_1493115721'),
        navNextSelector: $('.prev_1493115721'),
        onSliderLoaded: startSlider,
        onSlideChange: slideChange,
        onSliderResize: slideResize,
    });

      function slideChange(args) {
        $(args.sliderContainerObject).find('.inner').each(function(){
          $(this).removeClass($(this).attr('data-animate'));
        });
       
       /* start text animation */
       $(args.currentSlideObject).find('.inner').addClass($(args.currentSlideObject).find('.inner').attr('data-animate'));
     
       /* change slider height */
       var slide_height = $(args.currentSlideObject).outerHeight();
       $(args.sliderContainerObject).css('min-height',slide_height);
       $(args.sliderContainerObject).css('height','auto');


       /* add current class to slide */
       $(args.sliderContainerObject).find('.ux_banner').removeClass('current');
       $(args.currentSlideObject).addClass('current');

       /* update bullets */
       $(args.sliderContainerObject).find('.sliderBullets .bullet').removeClass('active');
       $(args.sliderContainerObject).find('.sliderBullets .bullet:eq(' + (args.currentSlideNumber - 1) + ')').addClass('active');
      }

     function slideResize(args) {
        /* set height of first slide */
        setTimeout(function(){
              var slide_height = $(args.currentSlideObject).outerHeight();
              $(args.sliderContainerObject).css('min-height',slide_height);
              $(args.sliderContainerObject).css('height','auto');
              $(args.sliderContainerObject).find('.center').vAlign();
        },300);
 
      }

     function startSlider(args){ 
        /* remove spinner when slider is loaded */
        $(args.sliderContainerObject).find('.loading').fadeOut();

        /* add current class to first slide */
        $(args.currentSlideObject).addClass('current');

        /* add parallax class if contains paralaxx slides */
        $(args.sliderContainerObject).find('.ux_parallax').parent().parent().parent().addClass('parallax_slider');

        /* animate first slide */
        $(args.currentSlideObject).find('.inner').addClass($(args.currentSlideObject).find('.inner').attr('data-animate'));

        /* set height of first slide */
        var slide_height = $(args.currentSlideObject).outerHeight();
        $(args.sliderContainerObject).css('min-height',slide_height);
        $(args.sliderContainerObject).css('height','auto');

        /* set text position */
        $(args.sliderContainerObject).find('.center').vAlign();

         
        /* add slider bullets */
        var slide_id = 1;
        $(args.sliderContainerObject).find(".slider > *").each(function(){
            $(args.sliderContainerObject).find('.sliderBullets').append('<div class="bullet" data-slide="'+slide_id+'"></div>');
            slide_id++;
        });
        
        /* add current class to bullets */
        $(args.sliderContainerObject).find('.sliderBullets .bullet:first').addClass('active');
        
        /* make bullets clickable */
        $(args.sliderContainerObject).find('.bullet').click(function(){
            $(args.sliderContainerObject).iosSlider('goToSlide', $(this).data('slide'));
         });
         


     }
    })
    })(jQuery);
    </script>
</p>
    Code:
    <p style="/* text-align: justify; */">&nbsp;
    This is what is causing your gap with a margin-bottom: 1.25em;
    From what I can see this paragraph isn't necessary and could simply be replaced with the script inside it.

    Code:
        <script type="text/javascript">
    (function($){
    $(window).load(function(){

    $('#slider_1493115721').find('br').remove();

    /* install slider */
    $('#slider_1493115721').iosSlider({
        snapToChildren: true,
        desktopClickDrag: true,
        snapFrictionCoefficient: 0.8,
        autoSlideTransTimer: 500,
        horizontalSlideLockThreshold:3,
        slideStartVelocityThreshold:3,
        infiniteSlider:true,
        autoSlide: true,
        autoSlideTimer: 4500,
        navPrevSelector: $('.next_1493115721'),
        navNextSelector: $('.prev_1493115721'),
        onSliderLoaded: startSlider,
        onSlideChange: slideChange,
        onSliderResize: slideResize,
    });

      function slideChange(args) {
        $(args.sliderContainerObject).find('.inner').each(function(){
          $(this).removeClass($(this).attr('data-animate'));
        });
       
       /* start text animation */
       $(args.currentSlideObject).find('.inner').addClass($(args.currentSlideObject).find('.inner').attr('data-animate'));
     
       /* change slider height */
       var slide_height = $(args.currentSlideObject).outerHeight();
       $(args.sliderContainerObject).css('min-height',slide_height);
       $(args.sliderContainerObject).css('height','auto');


       /* add current class to slide */
       $(args.sliderContainerObject).find('.ux_banner').removeClass('current');
       $(args.currentSlideObject).addClass('current');

       /* update bullets */
       $(args.sliderContainerObject).find('.sliderBullets .bullet').removeClass('active');
       $(args.sliderContainerObject).find('.sliderBullets .bullet:eq(' + (args.currentSlideNumber - 1) + ')').addClass('active');
      }

     function slideResize(args) {
        /* set height of first slide */
        setTimeout(function(){
              var slide_height = $(args.currentSlideObject).outerHeight();
              $(args.sliderContainerObject).css('min-height',slide_height);
              $(args.sliderContainerObject).css('height','auto');
              $(args.sliderContainerObject).find('.center').vAlign();
        },300);
 
      }

     function startSlider(args){ 
        /* remove spinner when slider is loaded */
        $(args.sliderContainerObject).find('.loading').fadeOut();

        /* add current class to first slide */
        $(args.currentSlideObject).addClass('current');

        /* add parallax class if contains paralaxx slides */
        $(args.sliderContainerObject).find('.ux_parallax').parent().parent().parent().addClass('parallax_slider');

        /* animate first slide */
        $(args.currentSlideObject).find('.inner').addClass($(args.currentSlideObject).find('.inner').attr('data-animate'));

        /* set height of first slide */
        var slide_height = $(args.currentSlideObject).outerHeight();
        $(args.sliderContainerObject).css('min-height',slide_height);
        $(args.sliderContainerObject).css('height','auto');

        /* set text position */
        $(args.sliderContainerObject).find('.center').vAlign();

         
        /* add slider bullets */
        var slide_id = 1;
        $(args.sliderContainerObject).find(".slider > *").each(function(){
            $(args.sliderContainerObject).find('.sliderBullets').append('<div class="bullet" data-slide="'+slide_id+'"></div>');
            slide_id++;
        });
        
        /* add current class to bullets */
        $(args.sliderContainerObject).find('.sliderBullets .bullet:first').addClass('active');
        
        /* make bullets clickable */
        $(args.sliderContainerObject).find('.bullet').click(function(){
            $(args.sliderContainerObject).iosSlider('goToSlide', $(this).data('slide'));
         });
         


     }
    })
    })(jQuery);
    </script>
    I haven't looked at it thoroughly but after tinkering with it for a couple of minutes, that seems to be the main cause, if you would like it completely removed as in have it touching the top with absolutely no space then you will need to tinker a few more properties in CSS.

    Also the video plays automatically for me with no issues.
    {{ DiscussionBoard.errors[9071500].message }}
    • Profile picture of the author jt47000
      Thank you so much!

      I havent quite got it yet but still working at it.

      I see the code your talking about when I inspect the element but this is a wordpress theme so would this line of code be located in the css?

      Thanks!

      J
      {{ DiscussionBoard.errors[9071579].message }}
  • Profile picture of the author jt47000
    Figured it out, you were right! Thank you
    {{ DiscussionBoard.errors[9072911].message }}

Trending Topics