• Page:
  • 1

Make modal popups responsive to screens

OFFLINE

Make modal popups responsive to screens

3 years, 8 months ago
Squuezebox / modal popups are really kool But, if you are opening it by giving it some custom size in the rel tag or in the Squeezebox.open function, then many times if your size is greater than the size of your window, the popup will spread out of the window...this definitely kills RESPONSIVENESS

I was looking for a solution to this since long and finally got the time to do this simple work around

Work around is simple, open your modal.js, find the following code:
	open: function(subject, options) {
		this.initialize();

		if (this.element != null) this.trash();
		this.element = document.id(subject) || false;

		this.setOptions(Object.merge(this.presets, options || {}));

		if (this.element && this.options.parse) {
			var obj = this.element.getProperty(this.options.parse);
			if (obj && (obj = jQuery.parseJSON(obj, this.options.parseSecure))) this.setOptions(obj);
		}
		
		this.url = ((this.element) ? (this.element.get('href')) : subject) || this.options.url || '';

		this.assignOptions();

		var handler = handler || this.options.handler;
		if (handler) return this.setContent(handler, this.parsers[handler].call(this, true));
		var ret = false;
		return this.parsers.some(function(parser, key) {
			var content = parser.call(this);
			if (content) {
				ret = this.setContent(key, content);
				return true;
			}
			return false;
		}, this);
	}


Replace it by

	open: function(subject, options) {
		this.initialize();

		if (this.element != null) this.trash();
		this.element = document.id(subject) || false;

		this.setOptions(Object.merge(this.presets, options || {}));

		if (this.element && this.options.parse) {
			var obj = this.element.getProperty(this.options.parse);
			if (obj && (obj = jQuery.parseJSON(obj, this.options.parseSecure))) this.setOptions(obj);
		}
		//added by vicky to make modals perfectly responsive...make sure the size of squeezebox is not more than window size
		if(this.options.size.x>jQuery(window).width())
			this.options.size.x = jQuery(window).width() - 50;
		if(this.options.size.y>jQuery(window.parent).height())
			this.options.size.y = jQuery(window.parent).height() - 100;
		//done with adding -----vicky
		
		this.url = ((this.element) ? (this.element.get('href')) : subject) || this.options.url || '';

		this.assignOptions();

		var handler = handler || this.options.handler;
		if (handler) return this.setContent(handler, this.parsers[handler].call(this, true));
		var ret = false;
		return this.parsers.some(function(parser, key) {
			var content = parser.call(this);
			if (content) {
				ret = this.setContent(key, content);
				return true;
			}
			return false;
		}, this);
	}


Done !!!!
The following user(s) said Thank You: Farhan Sahibole
  • Page:
  • 1

Upcoming Events

No events found.

Who's Online

2 users online