Closing on Mobile

  • Hey,

    I really appreciate the simplicity of your plugin, however the boxes won’t close on mobile. This issue has already been addressed here: https://www.ads-software.com/support/topic/usability-on-ipad/

    Since it wasn’t fixed I thought you might not have the time to do so. To fix this, just use the following code:

    /* mysticky blocks animation */
		$('.mysticky-block-left .mysticky-block-icon').click(function(){
			$(this).toggleClass("mse-open");
			if ($(this).hasClass("mse-open")) {
		          $(this).parent().stop().animate({'left' : '0px'});
			} else {
                          var x = $(this).parent().width();
			  $(this).parent().stop().animate({'left': 0 - x});
			} 			
		});

		$('.mysticky-block-left .mysticky-block-content').mouseleave(function(){
			var x = $(this).parent().width();
			$(this).parent().stop().animate({'left': 0 - x});
		});

		$('.mysticky-block-right .mysticky-block-icon').click(function(){
			$(this).toggleClass("mse-open");
				if ($(this).hasClass("mse-open")) {
			$(this).parent().stop().animate({'right' : '0px'});
			} else {
                        	var y = $(this).parent().width();
				$(this).parent().stop().animate({'right' : 0 - y});
			} 
		});

		$('.mysticky-block-right .mysticky-block-content').mouseleave(function(e){
			var y = $(this).parent().width();
			$(this).parent().stop().animate({'right' : 0 - y});
		});

    Edit: The file is mystickyelements.js, you have to overwrite the respective code.

    Edit2: What this actually does is that when someone clicks on the icon box while it is open, it will close again instead of doing nothing. One might improve this by making it close when someone clicks anywhere other than the icon box, but this solution is good enough for me.

    This only applies to the click event, you can take care of the hover part likewise.

    Please merge this into your code so my version won’t get overwritten with updates ??

    Kind regads
    Daniel

    • This topic was modified 8 years, 2 months ago by sighan.
    • This topic was modified 8 years, 2 months ago by sighan.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter sighan

    (@sighan)

    In fact, you need to add
    $(this).removeClass(“mse-open”);
    to both mouseLeave events, sorry about that. (Wouldn’t let me edit it for a third time :D)

    Heres the whole thing again with the added code:

    /* mysticky blocks animation */
		$('.mysticky-block-left .mysticky-block-icon').click(function(){
			$(this).toggleClass("mse-open");
			if ($(this).hasClass("mse-open")) {
		          $(this).parent().stop().animate({'left' : '0px'});
			} else {
                          var x = $(this).parent().width();
			  $(this).parent().stop().animate({'left': 0 - x});
			} 			
		});

		$('.mysticky-block-left .mysticky-block-content').mouseleave(function(){
			$(this).removeClass("mse-open");
			var x = $(this).parent().width();
			$(this).parent().stop().animate({'left': 0 - x});
		});

		$('.mysticky-block-right .mysticky-block-icon').click(function(){
			$(this).toggleClass("mse-open");
				if ($(this).hasClass("mse-open")) {
			$(this).parent().stop().animate({'right' : '0px'});
			} else {
                        	var y = $(this).parent().width();
				$(this).parent().stop().animate({'right' : 0 - y});
			} 
		});

		$('.mysticky-block-right .mysticky-block-content').mouseleave(function(e){
			$(this).removeClass("mse-open");
			var y = $(this).parent().width();
			$(this).parent().stop().animate({'right' : 0 - y});
		});

    Thank you Sighan. I added your code and I also modified it to remove mso-open class on mouseleave… All is updated and live in a new 1.1 version

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Closing on Mobile’ is closed to new replies.