MyMuse for Joomla News

Written by Gordon Fisch.

Updating Older Versions CSS

By design, MyMuse updates do not overwrite your mymues.css file, in case you have made changes.

Since version 3.4.0, there is a new product view page, that uses javascript and a modal overlay to alert users that an item has been placed in the cart.

 

The modal requires some CSS additions. The specific classes follow, or you can grab the complete css here.

 

/* Add to cart Modal */
#my_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
    filter: alpha(opacity = 50);
    z-index: 1000;
}

#my_modal {
    position: fixed;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 14px;
    padding: 8px;
    z-index: 1001;
}

#my_content {
    border-radius: 8px;
    background: #fff;
    padding: 20px;
    z-index: 1001;
}

#my_close {
    position: absolute;
    background: url('../images/close.png') 0 0 no-repeat;
    width: 24px;
    height: 27px;
    display: block;
    text-indent: -9999px;
    top: -7px;
    right: -7px;
}  

 

And the MyMuse javascript has an update to center the modal. In components/com_mymuse/assets/mymuse.js


var my_modal = (function(){
    var 
    method = {}

    // Center the modal in the viewport
    method.center = function (target) {
		var top, left, topScreen;
		
		topScreen = jQuery(document).scrollTop();
    	top = jQuery(window).height() / 2  - jQuery("#my_modal").outerHeight() / 2;
    	 
    	left = jQuery(window).width() / 2  - jQuery("#my_modal").outerWidth() / 2;
    	
    	jQuery("#my_modal").css({
        	top:top, 
        	left:left
    	});
	};

    // Open the my_modal
    method.open = function (settings) {
		
		jQuery("#my_content").empty().append(settings.content);

    	jQuery("#my_modal").css({
        	width: settings.width || "auto", 
        	height: settings.height || "auto"
   		})

    	method.center(settings.target);

    	jQuery(window).bind('resize.my_modal', method.center);
    	jQuery("#my_overlay").show();
		jQuery("#my_modal").show();
		jQuery("#my_modal").delay(2000).fadeOut(1000,method.close);
	};
		

    // Close the my_modal
    method.close = function () {
		jQuery("#my_modal").hide();
    	jQuery("#my_overlay").hide();
    	jQuery("#my_content").empty();
    	jQuery(window).unbind('resize.my_modal');
    	//location.reload();
	};


    return method;
}());


jQuery(document).ready(function($){
	$("#my_modal").hide();
	$("#my_overlay").hide();
	jQuery("#my_close").click(function(e){
		e.preventDefault();
		my_modal.close();
	})
	jQuery("#my_overlay").click(function(e){
		e.preventDefault();
		my_modal.close();
	})
});