1248349 - sticky menu plugin prevents displaying slider images correctly

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Adriano Bratovic]

Attachment: Firefox-bug-report.jpg

User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Dragon/45.9.12.392 Chrome/45.0.2454.93 Safari/537.36

Steps to reproduce:

On the web portal: http://istra.hr/, we changed menu plugin (before it was showing the menu and sub-menus horizontally). 


Actual results:

After that, all was working fine in other browsers, but in Firefox, the main slider that is below the menu, is moved right to the edge of the menu. After investigation, we noticed that when we comment (disable) the sticky plugin the slider is shown properly. But we do not want to disable stickies, and if possible we do not want to change the slider and the sticky plugin we use in all our cms systems.


Expected results:

All should be as usual, the slider images should appear in their respective place.
And the web site should have the sticky option enabled as it has before (so the main menu is always visible).

Comment 1

[Loic]

I saved the webpage locally and remove the comment tags for

$('#siteHeader').sticky({
			topSpacing:0,
			className: 'sticky'
		});
then I reloaded the page, same result as the website.

Could you attach a minimal testcase, please?

Comment 2

[Adriano Bratovic]

Dear Firefox team, we added testing possibility..

if you use the url: http://www.istra.hr/?sticky=on then stickies are on, and you will see the slider moving to the right from the menu (in Firefox). If you omit the "sticky" parameter in the url, or set it as sticky="off".. 

Thank you very much for your help.

Comment 3

[Adriano Bratovic]

if you use the url: http://www.istra.hr/?sticky=on then stickies are on, and you will see the slider moving to the right from the menu (in Firefox). If you omit the "sticky" parameter in the url, or set it as sticky="off", then it will work as it is set now, with sticky blocked.

Thank you

Comment 4

[Loic]

I see the issue, but if I scroll down a little bit (just one step), it's back to the left as it should be.

Comment 5

[Loic]

Clearly not a recent issue, FF33 has the bug too.

Comment 6

[Adriano Bratovic]

Yes, we do not know how to fix it.

Comment 7

[Loic]

Not a plugin issue, layout issue. The reporter speaks about a JS plugin called "sticky".

Comment 8

[Adriano Bratovic]

Dear Bugzilla team, we tried a few options. Also contacted flexslider and sticky plugins teams.. but were not able to fix the problem..

For now, we have disabled the sticky plugin, to our Client's dissatisfaction. 

Any further suggestion is most welcome.. 
Thank you very much.

Comment 9

[Loic]

As you are the webmaster of the website, could you provide a reduced testcase if possible. We need just a simple file showing the issue, not all the CSS and JS of the original website.

Comment 10

[Adriano Bratovic]

Yes, of course.. Here is the test case:
The portal is: www.istra.hr/en

The sticky menu is now disabled, but for testing purposes it can be seen with the following params in the url:

http://istra.hr/en/home?sticky=on

You will see, sticky works well, but the slides on the main slider are not shown well if the sticky is on..(a discrepancy appears on the left side until the some vertical scrolling with mouse is done.. )..

Comment 11

[Adriano Bratovic]

will send whatever needed.. just let us know.. thank you very much!!

Comment 12

[Loic]

The issue is with this line including the "sticky" class.

1) After loading the website, the slideshow is shifted on the right:
<div style="height: 101px;" class="sticky-wrapper" id="siteHeader-sticky-wrapper">
<header style="" id="siteHeader" class="siteHeader">

2) If the user scrolls down a little, it's back to its center position with modified CSS:
<div style="height: 101px;" class="sticky-wrapper sticky" id="siteHeader-sticky-wrapper">
<header style="width: 1519px; position: fixed; top: 0px;" id="siteHeader" class="siteHeader">

How do you add "sticky" and elements of style in the <div>? By JS? Which JS file?

Comment 13

[Adriano Bratovic]

Dear Bugzilla team,
the sticky is added/included within the head tags of the site..
source: "js/jquery.sticky.js"
The same way the flexslider is included: "js/jquery.flexslider-min.js"
the jq version is: "ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"

Then, within the "body" tag, there the "includes/foot_js.inc" script included where the flexslider and sticky skripts are initialised.. I can send you the script.

Comment 14

[Adriano Bratovic]

Yes, you are not able to see it because it is included within the file with the .inc ending.
Will change this in order for you to have full access..

Here is the script: (contents of the "foot_js.inc"

<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){

		$('#homeSlider').flexslider({
			useCSS: false,
			animation: "fade",
			animationLoop: true,
			pauseOnHover: true,
			controlsContainer: ".anchorPoint2",
			controlNav: true,
			directionNav: false
		});
		$('#gallerySlider').flexslider({
			animation: "slide",
			slideshowSpeed: 6000,
			pauseOnHover: true,
			itemWidth: 100,
			maxItems: 10,
			minItems: 1,
			move: 3,
			controlNav: false,
			directionNav: true,
			prevText: "<i class='im icon-angle-left'></i>",
			nextText: "<i class='im icon-angle-right'></i>",
		});

		$('#sidePanel').mmenu({
		}, {
			selectedClass: 'active'
		});
		$('#sidePanelRight').mmenu({
			position: 'right'
		}, {
			listClass: "troubleshoot"
		});
		
		// Denis. maknuo je init za zadnji tab posto se radi o jednostavnom linku
		$('#tabs').easytabs({
			tabs: 'ol.itemNav > li:not(#info-upit-special)'
		});
		$('.widget.meteo').easytabs({
			tabs: '.meteotabs > li',
			updateHash: false
		});
		
		$("#homeSlider.hsBooking .bookingformtoggler").click(function(){
			$("#homeSlider.hsBooking .mainBookForm").slideToggle();
			$(this).toggleClass('open');
		});
		$(".regions .bookingformtoggler").click(function(){
			$(".mainRegions .regions .mainBookForm").slideToggle();
			$(this).toggleClass('open');
		});
		$(".sidebar .bookingformtoggler").click(function(){
			$(".sidebar .mainBookForm").slideToggle();
			$(this).toggleClass('open');
		});

		$('.popup-image').venobox({
			numeratio: true,
			infinigall: false
		});
		$('.galleryImage').venobox({
			numeratio: true,
			infinigall: true
		});
		$('.galleryVideo').venobox({
			numeratio: true,
			infinigall: true
		});
		$('.popup-iframe').venobox({
			numeratio: false,
			infinigall: false
		});

		<?php 
		if($_GET["sticky"] == "on") 
		{ 
		?> 
		$('#siteHeader').sticky({
			topSpacing:0,
			className: 'sticky'
		}); 
		<?php 
		} else { 
		?> 
		/*$('#siteHeader').sticky({
			topSpacing:0,
			className: 'sticky'
		});*/
		<?php  
		} 
		?> 
		
		$('select').selecter();

		var $container = $('.listNoMargin');
		$container.imagesLoaded( function() {
			$container.masonry({
				itemSelector: '.listNoMargin > li'
			});
		});

		$('.listContentBoxed h4').click(function() {
			$(this).parent().parent().parent().find('.active').removeClass('active');
		    $(this).parent().addClass('active');
		});
		//$('.listMain .itemEvent .more').click(function() {
		//	$(this).parent().parent().parent().find('.selected').removeClass('selected');
		//    $(this).parent().addClass('selected');
		//    $('.listNoMargin').masonry('reload');
		//});
		$('.bookingButton').click(function() {
		    $(this).parent().toggleClass('active');
		});
		$('.expand').click(function() {
		    $(this).parent().parent().toggleClass('active');
		});

		$('#shareButton').socialShare({
			social: 'facebook,twitter,google,pinterest,tumblr,linkedin',
			whenSelect: true,
			selectContainer: '#shareButton'
		});

		$('.calendar input').datetimepicker({
			//datepicker:false,
			timepicker:false,
			//format:'d.m.Y',
			format:'d/m/Y',
			closeOnDateSelect:true,
			dayOfWeekStart:1,
			scrollInput:false
		});

		// Fixing touch click vs hover
		$('.sectionNavigation .parent').on("touchstart", function (e) {
			"use strict"; //satisfy the code inspectors
			var link = $(this); //preselect the link
			if (link.hasClass('hover')) {
				return true;
			} else {
				link.addClass("hover");
				$('.sectionNavigation .parent').not(this).removeClass("hover");
				e.preventDefault();
				return false; //extra, and to make sure the function has consistent return points
			}
		});






	});
	
</script>

Comment 15

[Loic]

Is it really not possible to have a REDUCED testcase?
By REDUCED, I mean, just a simple testcase with the issue, not a COMPLETE full website with a bunch of useless JS scripts and CSS sheets?

As I'm not a website dev, it's hard to me to isolate the issue, so please provide yourself a REDUCED testcase.

Comment 16

[Adriano Bratovic]

ok, we will do so asap! Will send you a link. Thank you very much.

Comment 17

[Adriano Bratovic]

Dear Debug Team, here is a reduced test case.. we stripped all that could be stripped (created a new hidden web page section that contains only the needed parts.

http://www.istra.hr/en/ffdebug?sticky=on

the sticky is added/included within the head tags of the site..
source: "js/jquery.sticky.js"
The same way the flexslider is included: "js/jquery.flexslider-min.js"
the jq version is: "ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"

The part that is initialising the sticky is visible and available now in the web page source.

Please let us know, we will do further whatever needed.
Thank you.
Adriano

Comment 18

[Loic]

Attachment: 1248349.zip (testcase)

I can't reduce less.

Comment 19

[Loic]

IMHO it's an issue about block and inline.
Alice, are you able to reduce more?

Comment 20

[Alice0775 White]

Chrome and IE11 are also something wrong.

Comment 21

[Mats Palmgren (inactive)]

We're in the process of removing support for plugins (bug 1677160) and bug 1687239 has removed the relevant Layout code, so I think this bug is irrelevant now.