Issues with aligning containers...

Targets Web
#1

Hello guys

As mentioned in another one of my posts, I want the site I am working on to show a message when cookies are disabled on the user’s browser. Eventually, I want it animated in a way that both the cookie message and the main part moves down, displaying the cookies message. The animation part I was able to get running, thanks to the inputs I got from members of this forum.

The issues I now have is when I try to align the elements. I deleted all the extra bits and pieces in order to keep only the part where it shows the two elements in question, trying to figure out where the problem was but I could not find anything. Since I want the main part to be always there, I put the code creating those elements in the Open event and I put the cookies message commands in the Shown event, so it will appear only after the page is drawn and after I was able to check if the cookies are enabled or not. Since I want both parts to be in the middle, I put a LockHorizontal property on both items.

Now, I found that there is a difference of about 8 pixels between the two elements even though I am using the exact same commands, but again, one in the Open event and one in the Shown event. Furthermore, the main part will move when the window is resized, keeping it in the middle, but not the cookie part.

If I put all the code in the Open event, they will align properly align and they will stay in the middle if the window is resized. If all of the code is in the Shown event, they will be in the middle but will not move when the window is resized.

Maybe the answer is to create both containers in the Open event but keep the cookies one not visible until I need it, and if I need it. But won’t that slow the Website? Furthermore, I don’t think it is a good idea to create all the necessary containers upfront even if they are not visible instead of creating them dynamically as needed. just to make sure they are centered in the page. The other solution I thought about was to create an empty container in the Open event in which I could create all other containers as needed, elsewhere in the code.

Now, I am trying to ascertain if the issues in with my browser (even though I tried both Firefox and Chrome with the same results), my code, my understanding of how the code works or even because it is snowing outside… so I would appreciate any light you might shed on this. So, if you happen to know why it is behaving this way, I would love to hear your explanations… :slight_smile:

The test file can be found here: Test file

Thanks a lot

Rick

#2

Is there any reason why you don’t use a dialog to show the cookie message ? That is what most sites do as far as I can see.

#3

Hello again Michel

You are right: using a dialog is definitely an option, but I was aiming for something similar to this example or this one, where the cookie message really looks like it is part of the site. I just think it looks way nicer…

Thanks again

Rick

#4

The horizontal bar used in the first site can very well be done with a dialog. Not sure I would go for the intrusive big blue arrow down, but it is fairly easy to do with another dialog styled as transparent, or with a WebContainer.

The second one seems to me like indeed part of the site, since it pushes down the menu. But then if you have such a menu bar, you can perfectly well make the bar part of it, and push it down when needed.

#5

So, just to make sure everything is clear, what you are saying is if I want to do something similar to the second example, I should just put, within the main container everything I need to show the cookie message but “hide it” over the top edge of the page and just move it down when needed. Is that correct?

For example, if the cookie part is 80 pixels high, just EmbedWithin the main part but with a Y of -80, actually hidding that part.

That sounds good, but still, do you know why, in the example I supplied, both elements do not align? Am I wrong in thinking that they should align?

Many thanks

Rick

#6

That is exactly what I suggest. I often use “off view” elements that I bring within view when needed, both in Web and Desktop.

About the example, it does not run here on Mac under macOS 10.12.3 with 2016R4.1.

At any rate, from what you tell, it seems to work alright when both are in Open. I suspect it could be due to a resize event happening between Open and Shown. The solution could be instead to trigger it in those separate events, to use a timer started in either event (probably shown), to do both at the same time.

#7