CODEWITHSUNDEEP
javascriptcsshtml
ELias Rahme
ELias Rahme

Reputation: 107

PopUP Javascript menu

hy all, I have created an html5 file that should when clicked on a certain href pop's up an image in a smooth way. Till now it didn't work with me, that's when clicked, it opens up a new web browser, but that's not what i need. I need it to fade open, by fading out the background and glowing, like the facebook effect.

My Javascript code : 

 xhttp=new XMLHttpRequest();
 // alert("step 1");
  xhttp.open("GET","xml/emp2.xml",false);
    } 
    xhttp.send("");
    xmlDoc=xhttp.responseXML;
var TestP = new Array();

function loadImg(n){

TestP[n] = xmlDoc.documentElement.childNodes[n].textContent;
var img = document.createElement('img');
/////////alert(TestP[n]);
img.src = TestP[n];


/////////alert(n);
/////////alert(TestP[n]);
//document.getElementById('right').appendChild(img);
elem = document.getElementById('right');

/////////alert(document.getElementById( 'right' ).firstChild);
child = elem.firstChild;
/////////alert(child);
if ( child )
  elem.replaceChild(img, child);
else
  elem.appendChild( img );

//for(var i =0; i<10 ; i++){
//TestP[i] = xmlDoc.documentElement.childNodes[(i*2)+1].textContent;
//var img = document.createElement('img');
//img.src = TestP[i];
//document.body.appendChild(img);

//}

//////////////////////////////////////////////////////////////////////////Write to another Window ///////////////////////////////////////////////////////////////////////////




        function OpenNewWindow(n, width, height)
        {
              if( navigator.appName == "Microsoft Internet Explorer"){
                xhttp=new ActiveXObject("Microsoft.XMLHTTP");
                xhttp.open("GET","http://www.multimediaprof.com/test/emp2.xml",false); 
                }
            else if(navigator.appName == "Netscape"){

            xhttp=new XMLHttpRequest();
            // alert("step 1");
            xhttp.open("GET","xml/emp2.xml",false);
            } 
            xhttp.send("");
            xmlDoc=xhttp.responseXML;
            var TestP = new Array();



TestP[n] = xmlDoc.documentElement.childNodes[n].textContent;
var img = document.createElement('img');
/////////alert(TestP[n]);


img.src = url="pic/"+ TestP[n];
alert(img.src);


/////////alert(n);
/////////alert(TestP[n]);
//document.getElementById('right').appendChild(img);
///elem = document.getElementById('right');

/////////alert(document.getElementById( 'right' ).firstChild);
//child = elem.firstChild;
/////////alert(child);
            alert(TestP[n]);
            var newWindow = window.open("", "pictureViewer", "location=no, directories=no, fullscreen=no, menubar=no, status=no, toolbar=no, width=" + width + ", height=" + height + ", scrollbars=no");
            newWindow.document.writeln("<html>");
            newWindow.document.writeln("<body style='margins: 0 0 0 0;'>");
            newWindow.document.writeln("<a href='javascript:window.close();'>");
            newWindow.document.writeln("<img src='" + img.src + "' alt='Click to close' id='bigImage' border='0'/>");
            newWindow.document.writeln("</a>");
            newWindow.document.writeln("</body></html>");
            newWindow.document.close();

}

My html snippet : 

<div class="arrowlistmenu">   
<div id="container">
<div id="center">
<h3 class="menuheader expandable">Section 1</h3>
<ul class="categoryitems">



<!-- Create first Sub Element -->

<li id="sub">
<h3 style="text-align:center" class="menuheader2 expandable2">Chapter 1</h3>
    <ul class="categoryitems2" >

        <li><a href="#" onClick="OpenNewWindow(1,800, 600)">Part 1</a></li>

Any ideas??

Upvotes: 0

Views: 345

Answers (2)

Ian Grainger
Ian Grainger

Reputation: 5516

Can I suggest using jQuery and jQuery UI dialogs? http://jqueryui.com/demos/dialog/#modal

General steps to do this:

  1. Change the createElement code to normal html code <div id="dialogDiv"><img src=...
  2. In OnDomReady use $('#dialogDiv').dialog({modal: true}); (as per jQueryUI example page)
  3. Attach event to open dialog to your Part 1 (etc.) link(s): $('#Part1').click(function() {$('#dialogDiv').dialog('open');});

Upvotes: 1

Eric Lennartsson
Eric Lennartsson

Reputation: 589

It looks like you want something like http://www.shadowbox-js.com/

There are a lot of jQuery plugins that does roughly what you're describing. Inventing it all over in plain javascript looks like a bad idea here.

Upvotes: 2

Related Questions