Canvas Support

Issue with the header and slider feature when doing browser resizing

1 reply · opened Nov 30, 2020

PpyaephyohlaingNov 30, 2020

Dear Author,

I appreciate the efforts of creating the theme and love it so much. But, I’m having a big issue with the header and slider feature when doing resizing. I have also uploaded a screen record, and please check the below link. ( Note: I’m testing with the latest version 6.1.3 by using slider-canvas-autoplay.html in my screen record )

https://drive.google.com/file/d/1BCdDfz8V40kKX0feVqI0rG-arKp6UrnV/view?usp=sharing

Here are the steps that I have done in the video.

  1. Open slider-canvas-autoplay.html (It happens in other sliders too)
  2. Don't Scroll down first and Resize the browser
  3. We can see that there are some errors in the menu and slider too. But when we refresh, we can see the original menu and slider without any issue.

Note: We won't face this issue if we scroll down first and then doing browser resizing. It only happens without scrolling down and resizing the browser first.

Since my site will be in production, this is a big issue for us. Could you please check the bug, and please reply to me if the team found any solution to this issue.

Wishing you and the team having a great day again.

SSemicolon WebSTAFFNov 30, 2020

Hello,

Thanks for your Patience and Apologies for the Inconvenience caused due to this issue.

This is primarily done to reduce Javascript Computation Times and Memory Usage on the Browser to make everything work smoothly on different browsers for your Website's Visitors. Ideally, in real-world usage, users do not resize the browsers to check your Website, and they simply Open your Website in either a Browser or a Mobile Device.

However, you can enable to resize the Header/Slider functions to make it work in Browsers on resizing. Simply find the following code in the js/functions.js File:
[ch_pre]SEMICOLON.documentOnResize = {

init: function(){

	SEMICOLON.header.menufunctions();
	SEMICOLON.header.fullWidthMenu();
	SEMICOLON.header.stickyMenu();
	SEMICOLON.initialize.dataResponsiveHeights();
	SEMICOLON.initialize.stickFooterOnSmall();
	SEMICOLON.slider.sliderDimensions();
	SEMICOLON.slider.sliderParallax();
	SEMICOLON.widget.html5Video();
	SEMICOLON.widget.masonryThumbs();
	SEMICOLON.initialize.dataResponsiveClasses();
	SEMICOLON.customization.onResize();

	windowWidth = $window.width();

	$(window).trigger( 'scwWindowResize' );

}

};[/ch_pre]

and replace it with:
[ch_pre]SEMICOLON.documentOnResize = {

init: function(){

	setTimeout( function(){
		SEMICOLON.header.menufunctions();
		SEMICOLON.header.fullWidthMenu();
		SEMICOLON.header.stickyMenu();
		SEMICOLON.initialize.dataResponsiveHeights();
		SEMICOLON.initialize.stickFooterOnSmall();
		SEMICOLON.slider.sliderDimensions();
		SEMICOLON.slider.sliderParallax();
		SEMICOLON.widget.html5Video();
		SEMICOLON.widget.masonryThumbs();
		SEMICOLON.initialize.dataResponsiveClasses();
		SEMICOLON.customization.onResize();

		windowWidth = $window.width();

		$(window).trigger( 'scwWindowResize' );
	}, 500);

}

};[/ch_pre]

This will definitely fix the issue you are facing on Browser Resize. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard