1

I am trying show a pop up dialog with an image inside from a webview when clicked. my problem is that the pop up dialog is not being pop up but it open full screen inside the webview or it open in a browser. is it possible to make pop up inside webview ? i used the following websettings but it proved fruitless.

WebSettings settings = wvcontent.getSettings(); 
settings.setSupportMultipleWindows(true);
settings.setPluginsEnabled(true);
settings.setAllowFileAccess(true);
settings.setJavaScriptEnabled(true);

this is my html content.

html_content = 

"<strong>"+title+"</strong>" 
               + " <br><br><img src='"+single_image+" width='300' height='211'>" 
               + "<br> " 
               + ""+ content + "<br>"
               + str 
               + "<div id='popup' style='display:none'>"
               + "<a id='popup-close' href='' class='button'>"
               + "Fermer" 
               + "</a><p><img id='image-placeholder' width='300px';height='250px'  src=''>"

        + "<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js'></script>"
               + "<script type='text/javascript'>
                  $(document).ready( function() {
                        $('.popup-open').click( function(e)" 
               +        "{$('#popup:visible').hide(); 
                         e.preventDefault();

                 $('#image-placeholder').attr('src', $(this).attr('href'));" 
               + "$('#popup').fadeIn('fast');});
                  $('#popup-close').click( function(e) {e.preventDefault();                                                        $('#popup').fadeOut('fast');});});" 
               +"</script>";

can someone provides a hint please ?

Adil Malik
  • 6,279
  • 7
  • 48
  • 77
PIONA
  • 79
  • 1
  • 5
  • 12

1 Answers1

0

Instead of doing a normal popup window, you should try using a modal dialog. This will open in the same page, on top of the active content. I believe, on Android, what you are attempting to do with pop up's is not possible. They will always open in a new window.

http://jqueryui.com/dialog/#modal

drewan50
  • 294
  • 1
  • 7
  • where can i find an example for android? – PIONA Nov 22 '12 at 13:04
  • It doesn't have to be specific to Android since you are using a webview combined with jquery. – drewan50 Nov 22 '12 at 14:30
  • i have done this but its not filling my modal dialog http://stackoverflow.com/questions/13517028/display-div-content-in-a-modal-dialog-box-in-java#comment18504146_13517028 – PIONA Nov 22 '12 at 17:20
  • Why are you trying to use a webview? Have you thought about using a regular Android Dialog? http://developer.android.com/guide/topics/ui/dialogs.html#CustomDialog – drewan50 Nov 22 '12 at 17:31
  • The images are from html content i want to avoid lazyload image – PIONA Nov 22 '12 at 17:34
  • Maybe you could post more of your code. Maybe i'm missing exactly what your try to do. – drewan50 Nov 22 '12 at 17:43
  • i have images displayed in 3 by 3 row and column. when i click on one image it pops up wide in a dialog box. i tested it on browser it works fine but on webview its not the case. – PIONA Nov 22 '12 at 17:55
  • Maybe try including all of your html, js, and images inside the android project. And then load the html directly into the webivew. The same thing was accomplished here: http://stackoverflow.com/questions/3152422/webview-load-html-from-assets-directory – drewan50 Nov 22 '12 at 18:01
  • its a good example but my html content are dynamic and asset content are static. – PIONA Nov 22 '12 at 18:03
  • But your loading it in a browser, right? So you've got to have a .html file. Try loading that in the webview using the method above. – drewan50 Nov 22 '12 at 18:04
  • its working when loading the .html file inside the asset folder but not the dynamic way. – PIONA Nov 22 '12 at 18:17
  • Guess i'm not understanding why the HTML needs to be dynamic. – drewan50 Nov 22 '12 at 18:19
  • because the links are loaded from a web server to the android application – PIONA Nov 22 '12 at 18:28
  • Have you considered using phonegap? http://phonegap.com/ Load your html within the phonegap webview.. then build a phonegap plugin to dynamically retrieve the links from the web server. – drewan50 Nov 22 '12 at 18:34