Link to home
Start Free TrialLog in
Avatar of DCCoolBreeze
DCCoolBreeze

asked on

Unable to make HTML element adjust with the resizing of the browser.

OK.  I am pretty new to HTML , javascript, jquery and Adobe captivate.
I have to use captivate at work to build my e-learning courses.
Captivate does not have drop down lists, so I have a javascript application that overlays a Captivate text caption element with a "select" drop down element.
It works to a point.  The captivate slide opens with the "select" drop down covering the text caption element.
However, when I resize the browser, all Captivate elements change with the browser, but the "select" drop down remains in the same location.
I need it to follow the text caption element.
So, I opened a debugger and see that the DIV section where the text caption is located is in a DIV section created by Captivate, where the DIV section for the "select" drop down element is in a separate DIV section all together
If I understand HTML correctly, the problem is the "select" drop down element is NOT in the same blocks/frame as the text caption, so it does not move with the browser.

So my question is, how do I get that "select" drop down element to either over write the text caption element or how do I get (trick) the HTML to get the "select" drop down DIV to size with the DIV of the text caption element?
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Not enough information to answer the question - can you show us a link or some replication of the problem and how you have attempted to solve it.
Avatar of DCCoolBreeze
DCCoolBreeze

ASKER

sure.  thanks for the response.
I used the example from: https://elearningbrothers.com/blog/create-beautiful-custom-dropdown-menus-with-jquery-captivate-edition/

The comment on the website describes my problem:

If the slide changes size (player set to “scale to fit”) then the menu will not move with the other stuff. There is a way around this (watch for change and move) but I didn’t need it yet for my project.
Hi,

I don't understand the question (dropdown, and slider) but here are my suggestions

Dev these days use Bootstrap so the site resized base on the width of the devise screen.
https://getbootstrap.com/docs/4.0/getting-started/introduction/

Does the code is for a dropdown for form or for a menu?

If this is for a form I would use Select2 which is compatible with Bootstrap and resize well plus you have all cool features and great looking
https://select2.org/

If you are looking for a menu then you should use a package, because menu is the most difficult part to create yourself.
A menu is not only CSS some parts is JavaScript and it will be displayed differently if this is large or small device screen.

for 10$ you will have complete premium menu
https://codecanyon.net/item/web-slide-bootstrap-4-mega-menu-responsive/21299306
Demo https://uxwing.com/webslide/

or free
for free Bootstrap basic menu
https://getbootstrap.com/docs/4.0/components/navbar/

I always buy a theme because for 25$ you have all widget including menu and everything display nicely and save time and headache
So almost all include Revolution slider which will resize the slider correctly.
https://themeforest.net/category/site-templates
Thanks for the information.  I will take a look.  I am talking about dropdown menus...
This question needs an answer!
Become an EE member today
7 DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.