Hot Full Carousel issue

bvesterdal
Inactive member
Topic Author
New Member

2 years 11 months ago #48416 by bvesterdal

Hot Full Carousel issue was created by bvesterdal

I have a problem with full width after adding more menus next to eacother in main menu.If I only have 2 menus, then the full carousel show full width on all browsers, but after adding more some browsers and mobile devices does not show full width. And the ones with full width, still have a little from another image on the left side. It´s bad on an IpadI have changed width to 100% in carousel module, which helped a little, but did not solve the problem.I have attached a screenshot from a mobile device showing the problem when it´s bad.on some browsers It get worse after going from another menu and then back to the main page.Any solution for that ?

Please Log in to join the conversation.

milos
Support Staff
Moderator

2 years 11 months ago #48417 by milos

Replied by milos on topic Hot Full Carousel issue

Hello,

For the Hot Full Carousel module, each change of the screen resolution requires a page refresh. So, after you rotate the mobile device, refresh the page and the carousel will show the images properly.

Best regards,
Milos

Please Log in to join the conversation.

milos
Support Staff
Moderator

2 years 11 months ago #48418 by milos

Replied by milos on topic Hot Full Carousel issue

Also, to prevent that and force the Hot Full Carousel to refresh on each screen size change, you can change its code. Edit the module file /modules/mod_hot_full_carousel/tmpl/default.php and change this part:

Code:

<script type="text/javascript">

    jQuery(document).ready(function(){

        /* calculates width of the carousel */
        var bodyWidth = jQuery('body').innerWidth();
        jQuery('.hero-carousel article.carousel-article').css('width', bodyWidth);

        jQuery('.hero-carousel').heroCarousel({
            <?php if($navArrows) { ?>navigation: true,<?php }else{ ?>navigation: false,
            <?php } ?>
            easing: '<?php echo $easing; ?>',
            css3pieFix: true,
            prevText: '<?php echo $arrowLeftText; ?>',
            nextText: '<?php echo $arrowRightText; ?>',
            animationSpeed: <?php echo $animSpeed; ?>,
            timeout: <?php echo $pauseTime; ?>,
            pause: true,
            pauseOnNavHover: true
        });

        <?php if($navArrows==1) { ?>
        jQuery('.hero').hover(function(){
            jQuery('.hero-carousel-nav').css('display','block');
        },function(){
            jQuery('.hero-carousel-nav').css('display','none');
        });
        <?php } ?>

        <?php if(!$responsiveMode && $responsiveImagePrefix) { ?>
        var screenWidth = jQuery(document).width();
        if( screenWidth <= <?php echo $responsiveImageScreenSize; ?> ) {    
            jQuery(".hero-carousel article > img").hide();
        }
        <?php } ?>
    });
</script>

to this:

Code:

<script>

    function hotFullCarouselInit() {
        /* calculates width of the carousel */
        var bodyWidth = jQuery('body').innerWidth();
        jQuery('.hero-carousel article.carousel-article').css('width', bodyWidth);

        jQuery('.hero-carousel').heroCarousel({
            <?php if($navArrows) { ?>navigation: true,<?php }else{ ?>navigation: false,
            <?php } ?>
            easing: '<?php echo $easing; ?>',
            css3pieFix: true,
            prevText: '<?php echo $arrowLeftText; ?>',
            nextText: '<?php echo $arrowRightText; ?>',
            animationSpeed: <?php echo $animSpeed; ?>,
            timeout: <?php echo $pauseTime; ?>,
            pause: true,
            pauseOnNavHover: true
        });

        <?php if($navArrows==1) { ?>
        jQuery('.hero').hover(function(){
            jQuery('.hero-carousel-nav').css('display','block');
        },function(){
            jQuery('.hero-carousel-nav').css('display','none');
        });
        <?php } ?>

        <?php if(!$responsiveMode && $responsiveImagePrefix) { ?>
        var screenWidth = jQuery(document).width();
        if( screenWidth <= <?php echo $responsiveImageScreenSize; ?> ) {    
            jQuery(".hero-carousel article > img").hide();
        }
        <?php } ?>
    }

    jQuery(document).ready(function(){
        hotFullCarouselInit();
    });

    jQuery(window).bind('resize', function(e){
        hotFullCarouselInit();
    });
</script>

Regards,
Milos

Please Log in to join the conversation.

milos
Support Staff
Moderator

2 years 11 months ago #48419 by milos

Replied by milos on topic Hot Full Carousel issue

Sorry, but the last solution I gave you can make some unpredictable effects to the carousel. The final solution that works well and that we will implement in the next version of the module and templates is this:

Code:

<script>

    jQuery(document).ready(function(){

        /* calculates width of the carousel */
        var bodyWidth = jQuery('body').innerWidth();
        jQuery('.hero-carousel article.carousel-article').css('width', bodyWidth);

        jQuery('.hero-carousel').heroCarousel({
            <?php if($navArrows) { ?>navigation: true,<?php }else{ ?>navigation: false,
            <?php } ?>
            easing: '<?php echo $easing; ?>',
            css3pieFix: true,
            prevText: '<?php echo $arrowLeftText; ?>',
            nextText: '<?php echo $arrowRightText; ?>',
            animationSpeed: <?php echo $animSpeed; ?>,
            timeout: <?php echo $pauseTime; ?>,
            pause: true,
            pauseOnNavHover: true
        });

        <?php if($navArrows==1) { ?>
        jQuery('.hero').hover(function(){
            jQuery('.hero-carousel-nav').css('display','block');
        },function(){
            jQuery('.hero-carousel-nav').css('display','none');
        });
        <?php } ?>

        <?php if(!$responsiveMode && $responsiveImagePrefix) { ?>
        var screenWidth = jQuery(document).width();
        if( screenWidth <= <?php echo $responsiveImageScreenSize; ?> ) {    
            jQuery(".hero-carousel article > img").hide();
        }
        <?php } ?>
    });

    jQuery( window ).resize(function() {
        setTimeout(function(){
          window.location.reload();
        });
    });
    
</script>

It simply automatically refreshes the browser when the user changes screen size or rotates the screen.

Regards,
Milos

Please Log in to join the conversation.

bvesterdal
Inactive member
Topic Author
New Member

2 years 11 months ago #48493 by bvesterdal

Replied by bvesterdal on topic Hot Full Carousel issue

Thanks this works perfect. I did not find the old code in the default.php, but I added the new code, and now It works

Please Log in to join the conversation.

Time to create page: 0.179 seconds