Flext | A Mootools Flexible Textarea Class | Data Manipulation library

I have a vertical navBar on the left side of the screen, filled with some navigation items. Look a the example bellow. I want to align within the menu 2 items at the top, 2 items at the bottom. Here is my navigation:

I tried many ways but unfortunately it still doesn't work please help me out!

I've tried reversing the Text and Icon but still doesn't work

Here is the class

So I needed a script that watches a directory and converts files using HandbrakeCLI. I found a part of this powershell here on stackoverflow and I adjusted some things for my project.

I need to have a sidemenu that scales depending on the browser size. But also i need a header and footer, and the also a content container next to the sidemenu. So lets say that the sidemenu is 1/4 of the width and the content container is 3/4 of the width, but the height of both the sidemenu and the content container is always 100% of the browser size or more, depending on the content inside the content container and the sidemenu.

I would think this would be simple, just have the flext-dir. to col. and "flex: 1" on the childeren. (and a little more code, its in the fiddle link under)

But as soon as I wrap the sidemenu inside a new div, so that I can make the content container go next to the sidemenu and not under. The vertical fill from flexbox, fails.

https://jsfiddle.net/frrvdq2n/2/

So do anyone have som suggestions on how to solve this, or maybe other tips to create this idea. Thanks ahead :)

IMG. of how om thinking the sizing should be on most browser sizes.

Here is also the code, just incase:

HTML

I am working on a top-down 2D HTML5 game that uses pixel-by-pixel area sampling and manipulation to create a wave rippling effect. I got this up and running in JavaScript, but the performance was iffy on FireFox and completely unacceptable on Chrome. I considered porting my entire prototype to a platform with better performance but learned about GL shaders along the way.

I thought it would be simple enough to adapt my algorithm to a GL fragment shader. I am on my fourth consecutive day trying to get my shader to produce any output whatsoever. I've done my very best to adapt solutions from other questions and tutorials to what I'm doing, but none of them are quite close enough to my specific needs.

First, I'll present an overview of what I need to happen conceptually. Then I'll provide code and explain the approach that I've tried to take so far. I'm willing to start from scratch if I can just make sense of what I need to do.

The algorithm for the wave effect works as described here. It involves rendering a new image from a source image by displacing certain pixels based on wave height data for each pixel, stored in two matrices with a corresponding entry for each pixel in the image. One is used as the current state of the water, and the other stores the results of the previous frame to use for calculating the current.

Per frame: waveMapCurrent is calculated by averaging values waveMapPrevious

Per pixel: displacement is calculated from the height in waveMapCurrent and (in psuedocode) newPixelData[current] = sourcePixelData[current+displacement]

At a minimum, I need my fragment shader to be able to access the data from the current wave height matrix and the image to use as a source. If I understand things correctly, it would be the most beneficial for performance to minimize the number of times I pass new data to the GL pipeline and instead perform the wave height calculations within a shader, but I can alternatively do the calculations in my script and pass the updated version of the wave height matrix to the fragment shader each frame.

Before I can even think about what the fragment shader is doing, though, there is the task of setting up an object to actually draw fragments to. As far as I can tell, this requires setting up vertices to represent the canvas and setting them to the corners of the canvas to get WebGL to render it as a flat, 2D image, but that seems unintuitive. I either need to render this to an image to use as a background texture or initialize a second canvas and set the background of the first to be transparent (which is what I've tried to do in my code below). If there is any way to get the fragment shader to run and simply render its output with each fragment corresponding 1:1 with the pixels of the canvas/image, that would be sublime, but I assume nothing with GLSL.

What I've tried to do is pack the current wave height matrix as a texture and send it in as a uniform sampler2D. In its current state, my code runs, but WebGL tells me that active texture 1, which is my wave height matrix packed as a texture, is incomplete and that it's minification/magnification filtering is not set to NEAREST, even though I have tried to explicitly set it to NEAREST. I have no idea how to debug it any further, because WebGL is citing my call to gl.drawElements as the source of the error.

That is as intelligently as I can describe this. Here is what I have: