richard1320 / lava-lamp Goto Github PK

Hello, thanks for the amazing library, I've been using it on many projects :)

I'm working on a single page website with a sticky menu, and I'm using Bootstrap 4's ScrollSpy which adds the '.active' class to the menu item related to the currently visible section.

I can use $(window).on('activate.bs.scrollspy') to trigger a callback once ScrollSpy has added the '.active' class to the currently visible section.

I'm hoping to have the lavalamp-object to follow the .active class on the menu as the user scrolls through the page, so here is my code, pretty simple:

HTML:

<ul id="main-menu">

	<li class="lava-active">
	   <a class="active" href="#">A</a>
	</li>

	<li>
	   <a href="#">B</a>
	</li>

	<li>
	   <a href="#">C</a>
	</li>

	<li>
	   <a href="#">D</a>
	</li>

</ul>

JS:

	$('#main-menu').lavalamp({
		activeObj: '.lava-active'
	});

	$(window).on('activate.bs.scrollspy', function () {

		$('#main-menu li.lava-active').removeClass('lava-active');
		$('#main-menu li .active').parent().addClass('lava-active');

		$('#main-menu').lavalamp('update');
		
	});

I think the flow here should be pretty straight forward but for the love of me I can't get Lavalamp to update. I've also tried with autoUpdate: true but still no luck. The lava-active class is being correctly assigned/removed to the li elements.

If I use this code it kinda works but the lavalamp-object obviously starts from the far left every time and it's also very bad practice performance-wise:

	$(window).on('activate.bs.scrollspy', function () {

		$('#main-menu').lavalamp();

	});

Any help would be highly appreciated :)

Thank you very much!

Hi!
You have the following code:

enter = function() { ...
...
leave = function() {...

I think exposing enter and leave functions to the global scope is not required. I tried just to add var before them and it seems everything still works fine.

I want install it by bower!

The lavalamp-object does not update un resize

Hello @Richard1320! I was using your script today and I noticed that we aren't enabling it on focus, just on hover, so I checked out the code and came here just to discuss with you what you think about it. Do you agree? Would it be an improvement? If won't have time to do that just let me know, maybe I can help you with that and make you a PR sometime soon, since I am the one who's asking you this. Best wishes to you and thanks for the project. Bye!

Hi,

We are using this component on my website for few months now. But yesterday we came across 2 issues, they are listed below:

1. When we toggle the tabs, and check the Console on firebug. We can see an error, but functionality wise it works fine:

TypeError: destination.position(...) is null

... h=destination.outerHeight(margins);var t=destination.position().top || 0;var l=...

2. This is a major issue: When we click on the tabs a hash (#) gets appended on the url. Now if we navigate to any other page and click back button, page loads with that hash (#) already in place in the url. And then tabs stops working. Infact if # is already there in the URL, tabs stop working completely.

You can find both the error on our website page: http://www.researchaffiliates.com/Our%20Firm/Our%20Team/Pages/ourteam.aspx#

Can you please provide us a solution ASAP.

The items.addClass('lavalamp-item').css({ zIndex ..}) was causing problems for me. I imagine this could cause problems for others. I tried shifting my other z-indexes around so I wouldn’t have the change the JS; but then the behavior of ‘lavalamp-object’ became erratic. I ended up removing items.addClass('lavalamp-item').css in the 2 places all together.

My setup was ‘menu > li > a’ and I have ‘lavalamp- object’ over ‘li’ under ‘a’ and it looks really nice. Feature request 1: an option to turn off 'lavalamp-item' css
Feature request 2: delay before return.

Dear Richard1320,

When I updated to jquery 3.1.0 on my website, the lava lamp plugin broke. Do you know of a patch for that?

Thanks,
llewcellist

Hi,

I am trying to get the lavalamp effect to update as the page scrolls into different sections. I have the 'active' class changing on each li element as the page scrolls using the code below. But for some reason the lavalamp plugin isn't updating it's position.

var sections = $('.menu-update'),

        links = $('#menu-main li');

        $(window).scroll(function() {

            var currentPosition = $(this).scrollTop();

            sections.each(function() {

                var top = $(this).offset().top,

                    bottom = top + $(this).height();

                if (currentPosition >= top && currentPosition <= bottom) {

                    links.removeClass('active');

                    $('a[href="#' + this.id + '"]').parent().addClass('active');

                }

            });

        });

Is there a way to force lavalamp to update? Maybe something like

$('#menu-main').lavalamp('update');

Thanks!

Because LL is ready before LESS has finished rendering the page, the lavalamp-object is often out of place.
Here’s the solution i placed in a later JS file:
if(less||false){ less.pageLoadFinished.then(function(){ $('.lavalamp .active').mouseover() }) }

On touch screen devices (iPad ios 5 and ios7) i have to click twice on a navigation item to change the page. The animation works correctly.
I've set 'setOnClick: true'

You can reproduce that on your homepage (http://lavalamp.magicmediamuse.com/).