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?
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?
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.
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.
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
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
ASKER
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 TRIALMembers 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.