Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
New Contributor
Posts: 6
Registered: ‎09-21-2011
My Device: I am a developer
My Carrier: dsa

Jquery confirm boxes are not displaying at the center of the screen

I am developing an application using Jquery on blackberry and android.I am facing a problem in blackeberry.Jquery confim boxes are not comin at the center of the screen.Instaed it is coming at the top of the screen.Also the loading screen is not coing inthe center of the scrren.In android it is working fine.So,please tell me that how it can be displayed at the center of the screen.

Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Jquery confirm boxes are not displaying at the center of the screen

Can you list up the device model, OS version (eg. 5.0.0.345), the version of jQuery you are using and if this is happening int he simulator or an actual device.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
New Contributor
Posts: 6
Registered: ‎09-21-2011
My Device: I am a developer
My Carrier: dsa

Re: Jquery confirm boxes are not displaying at the center of the screen

I am using Black berry Torch 9800.version v6.0.0.246,Platform 6.4.0.105.I am using Jquery 1.4.4.

New Contributor
Posts: 6
Registered: ‎09-21-2011
My Device: I am a developer
My Carrier: dsa

Re: Jquery confirm boxes are not displaying at the center of the screen

I am using the actual device ,not simulator.

Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Jquery confirm boxes are not displaying at the center of the screen

are you using <meta> viewport tags that may be throwing it off?

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
New Contributor
Posts: 6
Registered: ‎09-21-2011
My Device: I am a developer
My Carrier: dsa

Re: Jquery confirm boxes are not displaying at the center of the screen

Yes,I am using meta tag.but if I remove that tag then also it is not fixed.Also removing meta tag is making my application very  very slow.Please help me.

New Contributor
Posts: 6
Registered: ‎09-21-2011
My Device: I am a developer
My Carrier: dsa

Re: Jquery confirm boxes are not displaying at the center of the screen

FYI,

Here is the meta tag I am using:

 

<meta name="viewport" content="width=device-width, height=device-height,initial-scale=1.0, maximum-scale=1.0, user-scalable=no," />

Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Jquery confirm boxes are not displaying at the center of the screen

You'll likely have to trace into the jQuery code to find out what they are using to determine the center point and see what may be different on the device than in a desktop browser.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
New Contributor
Posts: 6
Registered: ‎09-21-2011
My Device: I am a developer
My Carrier: dsa

Re: Jquery confirm boxes are not displaying at the center of the screen

Here is the library code for Jquery alert

 

jquery.alerts.js:

 

// jQuery Alert Dialogs Plugin
//
// Version 1.1
//
// Cory S.N. LaViska
// A Beautiful Site (http://abeautifulsite.net/)
// 14 May 2009
//
// Visit http://abeautifulsite.net/notebook/87 for more information
//
// Usage:
//  jAlert( message, [title, callback] )
//  jConfirm( message, [title, callback] )
//  jPrompt( message, [value, title, callback] )
//
// History:
//
//  1.00 - Released (29 December 2008)
//
//  1.01 - Fixed bug where unbinding would destroy all resize events
//
// License:
//
// This plugin is dual-licensed under the GNU General Public License and the MIT License and
// is copyright 2008 A Beautiful Site, LLC.
//
(function($) {
 
 $.alerts = {
  
  // These properties can be read/written by accessing $.alerts.propertyName from your scripts at any time
  
  verticalOffset: -75,                // vertical offset of the dialog from center screen, in pixels
  horizontalOffset: 0,                // horizontal offset of the dialog from center screen, in pixels/
  repositionOnResize: true,           // re-centers the dialog on window resize
  overlayOpacity: .01,                // transparency level of overlay
  overlayColor: '#FFF',               // base color of overlay
  draggable: true,                    // make the dialogs draggable (requires UI Draggables plugin)
  okButton: '&nbsp;OK&nbsp;',         // text for the OK button
  cancelButton: '&nbsp;Cancel&nbsp;', // text for the Cancel button
  dialogClass: null,                  // if specified, this class will be applied to all dialogs
  
  // Public methods
  
  alert: function(message, title, callback) {
   if( title == null ) title = 'Alert';
   $.alerts._show(title, message, null, 'alert', function(result) {
    if( callback ) callback(result);
   });
  },
  
  confirm: function(message, title, callback) {
   if( title == null ) title = 'Confirm';
   $.alerts._show(title, message, null, 'confirm', function(result) {
    if( callback ) callback(result);
   });
  },
   
  prompt: function(message, value, title, callback) {
   if( title == null ) title = 'Prompt';
   $.alerts._show(title, message, value, 'prompt', function(result) {
    if( callback ) callback(result);
   });
  },
  
  // Private methods
  
  _show: function(title, msg, value, type, callback) {
   
   $.alerts._hide();
   $.alerts._overlay('show');
   
   $("BODY").append(
     '<div id="popup_container">' +
       '<h1 id="popup_title"></h1>' +
       '<div id="popup_content">' +
         '<div id="popup_message"></div>' +
    '</div>' +
     '</div>');
   
   if( $.alerts.dialogClass ) $("#popup_container").addClass($.alerts.dialogClass);
   
   // IE6 Fix
   var pos = ($.browser.msie && parseInt($.browser.version) <= 6 ) ? 'absolute' : 'fixed';
   
   $("#popup_container").css({
    position: pos,
    zIndex: 99999,
    padding: 0,
    margin: 0
   });
   
   $("#popup_title").text(title);
   $("#popup_content").addClass(type);
   $("#popup_message").text(msg);
   $("#popup_message").html( $("#popup_message").text().replace(/\n/g, '<br />') );
   
   $("#popup_container").css({
    minWidth: $("#popup_container").outerWidth(),
    maxWidth: $("#popup_container").outerWidth()
   });
   
   $.alerts._reposition();
   $.alerts._maintainPosition(true);
   
   switch( type ) {
    case 'alert':
     $("#popup_message").after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /></div>');
     $("#popup_ok").click( function() {
      $.alerts._hide();
      callback(true);
     });
     $("#popup_ok").focus().keypress( function(e) {
      if( e.keyCode == 13 || e.keyCode == 27 ) $("#popup_ok").trigger('click');
     });
    break;
    case 'confirm':
     $("#popup_message").after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /> <input type="button" value="' + $.alerts.cancelButton + '" id="popup_cancel" /></div>');
     $("#popup_ok").click( function() {
      $.alerts._hide();
      if( callback ) callback(true);
     });
     $("#popup_cancel").click( function() {
      $.alerts._hide();
      if( callback ) callback(false);
     });
     $("#popup_ok").focus();
     $("#popup_ok, #popup_cancel").keypress( function(e) {
      if( e.keyCode == 13 ) $("#popup_ok").trigger('click');
      if( e.keyCode == 27 ) $("#popup_cancel").trigger('click');
     });
    break;
    case 'prompt':
     $("#popup_message").append('<br /><input type="text" size="30" id="popup_prompt" />').after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /> <input type="button" value="' + $.alerts.cancelButton + '" id="popup_cancel" /></div>');
     $("#popup_prompt").width( $("#popup_message").width() );
     $("#popup_ok").click( function() {
      var val = $("#popup_prompt").val();
      $.alerts._hide();
      if( callback ) callback( val );
     });
     $("#popup_cancel").click( function() {
      $.alerts._hide();
      if( callback ) callback( null );
     });
     $("#popup_prompt, #popup_ok, #popup_cancel").keypress( function(e) {
      if( e.keyCode == 13 ) $("#popup_ok").trigger('click');
      if( e.keyCode == 27 ) $("#popup_cancel").trigger('click');
     });
     if( value ) $("#popup_prompt").val(value);
     $("#popup_prompt").focus().select();
    break;
   }
   
   // Make draggable
   if( $.alerts.draggable ) {
    try {
     $("#popup_container").draggable({ handle: $("#popup_title") });
     $("#popup_title").css({ cursor: 'move' });
    } catch(e) { /* requires jQuery UI draggables */ }
   }
  },
  
  _hide: function() {
   $("#popup_container").remove();
   $.alerts._overlay('hide');
   $.alerts._maintainPosition(false);
  },
  
  _overlay: function(status) {
   switch( status ) {
    case 'show':
     $.alerts._overlay('hide');
     $("BODY").append('<div id="popup_overlay"></div>');
     $("#popup_overlay").css({
      position: 'absolute',
      zIndex: 99998,
      top: '0px',
      left: '0px',
      width: '100%',
      height: $(document).height(),
      background: $.alerts.overlayColor,
      opacity: $.alerts.overlayOpacity
     });
    break;
    case 'hide':
     $("#popup_overlay").remove();
    break;
   }
  },
  
  _reposition: function() {
   var top = (($(window).height() / 2) - ($("#popup_container").outerHeight() / 2)) + $.alerts.verticalOffset;
   var left = (($(window).width() / 2) - ($("#popup_container").outerWidth() / 2)) + $.alerts.horizontalOffset;
   if( top < 0 ) top = 0;
   if( left < 0 ) left = 0;
   
   // IE6 fix
   if( $.browser.msie && parseInt($.browser.version) <= 6 ) top = top + $(window).scrollTop();
   
   $("#popup_container").css({
    top: top + 'px',
    left: left + 'px'
   });
   $("#popup_overlay").height( $(document).height() );
  },
  
  _maintainPosition: function(status) {
   if( $.alerts.repositionOnResize ) {
    switch(status) {
     case true:
      $(window).bind('resize', $.alerts._reposition);
     break;
     case false:
      $(window).unbind('resize', $.alerts._reposition);
     break;
    }
   }
  }
  
 }
 
 // Shortuct functions
 jAlert = function(message, title, callback) {
  $.alerts.alert(message, title, callback);
 }
 
 jConfirm = function(message, title, callback) {
  $.alerts.confirm(message, title, callback);
 };
  
 jPrompt = function(message, value, title, callback) {
  $.alerts.prompt(message, value, title, callback);
 };
 
})(jQuery);

 

 

 

The css is as follows:

 

#popup_container {
 font-family: Arial, sans-serif;
 font-size: 12px;
 min-width: 300px; /* Dialog will be no smaller than this */
 max-width: 600px; /* Dialog will wrap after this width */
 background: #FFF;
 border: solid 5px #999;
 color: #000;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px; 
}

#popup_title {
 font-size: 14px;
 font-weight: bold;
 text-align: center;
 line-height: 1.75em;
 color: #666;
 background: #CCC url(images/title.gif) top repeat-x;
 border: solid 1px #FFF;
 border-bottom: solid 1px #999;
 cursor: default;
 padding: 0em;
 margin: 0em;
}

#popup_content {
 background: 16px 16px no-repeat url(images/info.gif);
 padding: 1em 1.75em;
 margin: 0em;
}

#popup_content.alert {
 background-image: url(images/info.gif);
}

#popup_content.confirm {
 background-image: url(images/important.gif);
}

#popup_content.prompt {
 background-image: url(images/help.gif);
}

#popup_message {
 padding-left: 48px;
}

#popup_panel {
 text-align: center;
 margin: 1em 0em 0em 1em;
}

#popup_prompt {
 margin: .5em 0em;
}

Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Jquery confirm boxes are not displaying at the center of the screen

I can't tell by looking at the code.. you'll have to debug the code to find out what path it takes and what values are incorrect.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter