Resizing elements in popout window

[dloss]

I’m new to working with CSS (I’ve been involved in backend administration for many years, but have to update some web content that was handed to me) and could use some guidance. We have a webpage where, when a link is clicked on a new web page pops out over the original page. Here is a screen shot of an example:

[screenshots.firefox.com ]

What I would like to do is to increase the amount of space that’s being used in the white section of this screenshot and decrease the amount used by the purple section. The white section is the event-info section in this stylesheet:

[codepen.io ]

I don’t know where to modify this code to get the effect I need. Oh, the main page using this stylesheet includes these Javascript settings:

<!-- .cd-schedule -->
<a href="http://js/modernizr.js">http://js/modernizr.js</a>
<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js">https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js</a>

 if (!window.jQuery) document.write('');

<a href="http://js/main.js">http://js/main.js</a>
<!-- Resource jQuery -->

I’d appreciate any guidance anyone could give, just pointing me at the section that needs addressing would help. Thanks!

[lucy24]

Does the "event-info" class exist only in these popups, or is it also used in pages with different proportions?

I can't find its width. What's the purple half called? Does it have a width? (And what's the original source of the CSS? It seems to be awfully fond of spelling out defaults, like "display: block" or "width: 100%".)

:: wandering off to look up what the heck an "s" is, as a unit of measure ::

[dloss]

The purple half is "header" while the entire white section is "body." I was fiddling with the FireFox Web Developer tools and looking at the code in the Inspector and Style Editor both, and found those called out in the Inspector when I highlighted those areas. As to the original source of the CSS, I don't know. The entire bundle of HTML, CSS, and JS was passed over to me to work with as a mass. In fiddling with the Style Editor I managed to change it to have pretty much the look we need (I'd add a screenshot but I don't see any way to attach a file to these posts and FireFox won't do screenshots of the Responsive Design Mode); the HTML in the Inspector then showed this:

<header class="header" style-"width: 178px;">

and under that:

<div class="body" style="margin-left: 178px;">

That of course doesn't appear in the actual HTML code of the files being displayed. I tried to figure out where I might add those style settings in the CSS, but no matter where I put it it doesn't seem to take effect.

[NickMNS]

My guess is that the pop-up is being created by the jQuery, and thus your issue is likely not directly related to CSS.

The reason that these styles are not in the CSS is that they are being added in the jQuery script. Can you provide a copy of the script that is used to create the pop-up?

[dloss]

Sorry for the delay; I wasn't able to login successfully from my Linux system at home over the weekend. Here's another codepen, with the javascript added:

[codepen.io ]

I hope someone can point me in the right direction here. Thanks for all your help!

[NickMNS]

Wow why makes things simple when you can make them complicated....

This is definitely a javascript issue. But I'm not sure what exactly is the problem due to the complexity of the code and since only half the pages code is included. So below is my best guess, it is a bit of a shot in the dark. Really what you need to do, is play around with the js and change things and see what the impact is on the layout.

I think it may have to do with this code (@line 152) specifically the variable contextAdjust:

var contextAdjust = 1;
if (typeof event.find('.third-div').html() !== "undefined") {
contextAdjust = 3;
}
if (typeof event.find('.half-div').html() !== "undefined") {
contextAdjust = 2;
}

Try setting the values in the ifs to something between 1 and 2, like 1.25 and 1.75. I think what this is doing (See line 186) is setting the window(modal) size to 2x or 3x the size of the content.

//set modalHeader width
self.modalHeader.css({
width: eventWidth * contextAdjust +'px',
});

[dloss]

I don't think the contextAdjust value is causing the problem, for this reason. I see that lots of css values in the javascript are defined as "eventWidth * contextAdjust + 'px'", which would mean that if the contextAdjust value changed it would just change the width of all the elements by the same proportion rather than enlarging some and reducing others. Like here (@line 186):

//set modalHeader width
self.modalHeader.css({
width: eventWidth * contextAdjust +'px',
});

//set modalBody left margin
self.modalBody.css({
marginLeft: eventWidth * contextAdjust + 'px',
});

self.modalBody.css({
width: eventWidth * contextAdjust + 'px',
});

I also see this (@line 317):

var modalWidth = ( windowWidth*.8 > self.modalMaxWidth ) ? self.modalMaxWidth : windowWidth*.8,
modalHeight = ( windowHeight*.8 > self.modalMaxHeight ) ? self.modalMaxHeight : windowHeight*.8;

var HeaderBgScaleY = modalHeight/eventHeight,
BodyBgScaleX = (modalWidth - eventWidth);

Is javascript always this complex? As I say, I'm not up on the code, but this seems really rococo.

[dloss]

OK, I think I figured it out. Through trial and error, but still. Here's what seems to work.

The initial code was this (at line 152):

   var contextAdjust = 1;
   if (typeof event.find('.third-div').html() !== "undefined") {
    contextAdjust = 3;
   }
   if (typeof event.find('.half-div').html() !== "undefined") {
    contextAdjust = 2;
   }

I changed it to:

   var contextAdjust = .5;
   if (typeof event.find('.third-div').html() !== "undefined") {
    contextAdjust = 3;
   }
   if (typeof event.find('.half-div').html() !== "undefined") {
    contextAdjust = 2;
   }

And at line 196 I changed:

   self.modalBody.css({
    width: eventWidth * contextAdjust + 'px',
   });

to:

   self.modalBody.css({
    width: eventWidth * 1.71 + 'px',
   });

That makes the popup look pretty much like what I wanted.

[dloss]

Sadly, I spoke too soon. This javascript change does look as I wanted when the browser is at full screen on a 1920 x 1080 display, but when the browser isn't using the full screen the popups' body section reverts to some unsatisfactory display. I'll keep poring over the code, but if anyone has any suggestions I'm certainly open to them.

[NickMNS]

So far as I can tell from what I understand the goal is and the code provided, the code seems uselessly bloated for nothing. Have you considered ditching it altogether and using something like Bootstrap?

[getbootstrap.com...]

[dloss]

Honestly, I was hoping to be able to take the existing code, massage it slightly, and successfully repurpose it for our needs. It's beginning to appear that the code is just too complex for that to be feasible. I'll look into Bootstrap and see if I can get what I want from it. Thanks for all your help!