JavaScript menu that pops up

Hello everyone, I've recently created an HTML5 file that, when clicked on a specific href link, is supposed to display an image in a smooth and elegant manner. However, so far it hasn't been working for me as expected. Instead of smoothly popping up the image, it is opening a new web browser window, which is not the desired effect. What I'm aiming for is an effect similar to the one on Facebook, where the image fades open by fading out the background and glowing.

Here is the Javascript code I have:

 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 creative suggestions?

Answer №1

If you're looking for a solution similar to the functionality at , there are numerous jQuery plugins available that provide similar capabilities. Reinventing the wheel with plain javascript in this case may not be the most efficient approach.

Answer №2

Have you considered incorporating jQuery and jQuery UI dialogs into your project? http://jqueryui.com/demos/dialog/#modal

Here are some general steps to help you achieve this:

  1. Modify the createElement code to standard HTML code:
    <div id="dialogDiv"><img src=...
  2. Within the OnDomReady function, implement
    $('#dialogDiv').dialog({modal: true});
    (following the example on the jQueryUI documentation page)
  3. Add an event handler to open the dialog when clicking on your Part 1 (etc.) link(s):
    $('#Part1').click(function() {$('#dialogDiv').dialog('open');});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the method for turning off Bootstrap for viewport width below a specific threshold?

I'm currently utilizing bootstrap for my website design. However, there's a particular CSS rule causing some frustration on one specific page: @media (min-width: 576px) .col-sm-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-w ...

Steps for setting up i18nextStart by including the i

I am working on developing a multilingual app using the i18next package. Unfortunately, I am experiencing issues with the functionality of the package. Below is an example of the i18next file I have been using: import i18n from "i18next"; impor ...

The percentage height setting for a div is not functioning properly, but setting the height in pixels or viewport

Within a dialog box body, I am attempting to display a table and have applied a CSS class to the wrapping div. When specifying the height in pixels or viewport height units, it works as expected. However, when using a percentage like 50%, the height of the ...

"Utilizing jQuery's bind method with IE 7 compatibility and the use of

One of the scripts I'm working with is a treeview script, and a portion of it appears like this: root.find("." + classControl).each(function () { $(this).bind('click', function () { if ($(this).text() == "-") { $(thi ...

How to vertically align and center multiple divs with Flexbox programming

I have been grappling with the challenge of aligning two sets of rows vertically, each consisting of an image on one side and text on the other. While I usually use flex to achieve vertical alignment, it seems that a different approach is needed in this pa ...

Is it possible to store Socket.IO responses in a cache for quicker retrieval?

Consider this scenario where I have a websocket implementation shown below: let itemsArray = []; function fetchData() { itemsArray = await db.query(`SELECT * FROM Items`); } function emitData() { io.sockets.in("room_foo").emit("data", JSON.stringify ...

When passing a function in Flask, it is important to note that the function will be rendered

In my project, there are flask functions named lock(id) and unlock() def lock(roomId): RoomTDG.update(roomId,True) def unlock(roomId): RoomTDG.update(roomId, False) I have integrated these functions into my template. To lock a specific room, I c ...

How can a full-screen background image be created in Next.js?

To achieve a full height display in both the html and body tags, how can we do this within a next.js component? Check out [1]: https://i.stack.imgur.com/K1r9l.png [2] Visit: https://www.w3schools.com/howto/howto_css_full_page.asp "mainImage.jsx" import ...

ETags for webpages generated on the server-side and equipped with a CSP nonce

I have successfully implemented ETags in my server-side-rendered React app using Node/Express, allowing for client-side caching. The HTML is generated with inlined fragments of render-blocking CSS and JS for faster first renders according to Google's ...

Trying to arrange HTML elements in a diagonal configuration while ensuring they are all uniform in size

My goal is to create an attractive splash page with diagonal, circular links that are all the same size. The <p>'s will function as the links, but I'm struggling to figure out how to make them all diagonal and uniform in size. I've ex ...

Best scenarios for utilizing the new keyword in MongoDB

I'm curious about the behavior of the new keyword in node.js. I understand that it is used to create an instance of my schema in mongoose. However, I noticed that I don't have to use new when performing an update. Can someone clarify when exactly ...

The specified class is not found in the type 'ILineOptions' for fabricjs

Attempting to incorporate the solution provided in this answer for typescript, , regarding creating a Line. The code snippet from the answer includes the following options: var line = new fabric.Line(points, { strokeWidth: 2, fill: '#999999', ...

Is dynamic data supported by Next.js SSG?

I'm currently developing a web application with Next.js and I need clarification on how Static generated sites work. My project is a blog that necessitates a unique path for each blog entry in the database. If I were to statically generate my web appl ...

AngularJS encounters bad configuration on 'GET' request

I am facing an issue with my API that returns data to AngularJS based on a given ID. When the data is returned as JSON, AngularJS throws a 'badcfg' error, indicating that it could be due to the format of the returned data. I'm struggling to ...

Lightbox Thumbnail feature in Wordpress theme

Looking for some help with customizing code in my WordPress theme. The current setup includes a thumbnail image with two icons on top - one is a lightbox gallery icon that I want to focus on, and the other is a like button. My goal is to remove the lightb ...

NuxtJS Static generated HTML page fails to load JavaScript while accessing /index.html

I'm currently working on a project using Nuxt.js to generate static content, which involves utilizing JavaScript for tasks such as navigation and form functionality. Everything works smoothly when running the page with npm run dev. However, after ex ...

The POST Method encountering issues within the <code> tag

<form name="submit_form" action="./uploads/submit.inc.php" method="POST"> <div class="wrapper"> <code id="ace-editorid" name="code_editor">Input Your Code Here</code> </div> <script sr ...

Tips on adjusting the dimensions of a switch in kendo UI angular with CSS

Currently, I am utilizing angular in combination with Kendo ui. Is there a way to modify the dimensions of the switch button in Kendo UI Angular using CSS? ...

Unable to shrink array within an object

I'm encountering an issue while trying to reduce an array within an object. The error message I receive is: push is not a function To begin, I initialized my arrays as empty and created an add function to use as the first argument: function add(a,b ...

Eliminate resistance on HTML components

Have you ever noticed that when you click on an HTML element, such as images, you can drag a "shadow version" of them around on the screen? For example, take the Stack Overflow logo. If you click and drag it, you'll see a dark version of the logo mov ...