I'm a novice / beginner and I am trying to create a html page that has images that when you click on them, a text box pops up and provides information. The text is about 150 - 200 words and I want the pop up boxes to be responsive.
After a lot of time spent on this, the best solution I found (at my beginner level) was to use a modal box with scroll bars (due to the amount of text to read). I have used this code / guide:
http://www.w3schools.com/howto/howto_css_modals.asp
and I amended line 8 in the code from absolute to relative because the original version does not allow the scroll bars to scroll to the bottom to read the text fully when I used the code and tried it for myself.
.modal {
display: none; /* Hidden by default */
position: relative; /* Stay in place */
I have uploaded a version here with the slight amendment.
http://sugastore.com/test/modal-textbox.html
However, I want to have multiple modal text boxes on the same html page and I do not know how to do this. I have been reading online and the information about numbered div ID's but the information has been too advanced for me to understand.
My question is:
Q1. How can I use this modal code to create multiple modal boxes on one page? (and for them to be responsive)
Also, but not so important (I am sure I can find a way from reading online, but will ask here as well).
Q2. How do I change the link from a button to an image, so you click on an image and the modal box pops up?
Q3. When I change the modal from absolute to relative (as detailed above) the semi-transparent black background does not fit the whole page, is there a simple fix to amend this?
I also welcome anyone who already has a script / code example for a simple responsive multiple modal text box pop up (upon clicking an image) that is responsive and allows for scrolling to account for a lot of text.
Try this:
Q1: You can use the code to create multiple modals but you have to give them different ID's. eg #myModal, #myModal1, #myModal2 or better still name them according to what they display. They should be responsive as bootstrap modals are designed to be responsive
Q2: Replace the button tags with image tags and give it the ID "myBtn". Clicking on the image should trigger the modal
Q3: Change the relative to fixed. This should solve the problem.
Related
I am currently working on an AngularJS project for a tablet with the basic navigation through all the different pages. The project consists of all the basic features like Side Navigation Menu, a Header, the links of different pages, and a Footer.
The project is also created responsively using Bootstrap. I am not facing any responsiveness issue in all the elements created in the project except one.
When keyboard opens, the responsiveness gets disturbed.
Basically, the header div position gets distorted, the footer shifts above and gets placed right above the keyboard opened, and the side-navigation width also gets disturbed.
I tried the following things -
Used position: fixed, position: relative but nothing changed.
Looked into many different SO question links but got no fruitful result.
I have one option (hack) left that is stated in this SO answer given by Roberrrt but that's a long process and I'm short on time and doubt if it will be a positive hack.
Any help would be hugely appreciated.
Update :-
Giving an idea of how the structure of my project is -
This is the main page where a search box that is in-built in DataTables is used. The Header, Footer and Side-Navigation Burger Menu Button are as described here.
When clicked on the Burger menu, the side-nav opens in full-width as shown below -
Now on clicking the search box the following screen shows with all the elements distorted and responsiveness screwed -
For reference purpose, The theme that I'm working on is Inspinia
I'm fairly new to HTML and CSS work but have been very proud of how far I've come with the help of forums like this one. So first and foremost, thank you!
My question: I am using a Colorbox on my website that displays a popup on top of the current page. The problem is, if I scroll with the mouse wheel and the pointer is resting in the grayed out area (the original page I opened the colorbox from), the original page scrolls down...thus eventually moving the colorbox off the screen.
What I want is for the colorbox to always be visible in the middle of the screen, regardless of how a user scrolls. The only way to get rid of it would be to close it.
I've read a lot about using the position:fixed attribute, and have attempted to do that but had no success (tried surrounding the colorbox with a simple div with a "position: fixed" setting). Plus in looking through various comments is seems like the fixed position is something that should be used sparingly, if at all.
Does anyone have a suggestion on a div I can create to keep the colorbox positioned on the screen at all times? Or maybe an alternative idea, like preventing the ability for a user to scroll down the grayed out area of the original page?
Here's a link to the page that displays the issue. If you click on one of the dozens of sample story links, you'll see the colorbox appear. When it does, start scrolling down the original page and you'll see the box eventually goes off the screen.
Any advice would be greatly appreciated everyone. Thank you!
The problem is that the Colorbox Javascript appends inline style to the box which will override external or internal CSS. Give your property values !important to prioritize.
#colorbox {
outline: 0 none;
position: fixed !important;
top: 10% !important;
}
I am using lightbox to display the large versions of multiple thumbnails on this website.
So the best way to describe my problem is to follow this steps below.
Click the second image - notice it loads with a width of 100%
Close the image and click on the first image followed by clicking on the right arrow to display the second image.
Notice how the width of the previous image is retained making the second image (after clicking next) is very small.
I imagine its a css / js issue any help would be much appreciated.
It is a css problem probably caused by bootstrap,
if you are using bootstrap add this line in your lightbox.css.
.lb-image{ max-width: inherit; }
Cheers!
This is very strange and I'm pretty sure it's to do with some sort of width issue in CSS, but as you start to re-size the browser, it adds this strange gap to the right (Which is off screen).
Here is the page in question
I've tried looking through the CSS and I can't exactly find anything, I keep going over and over it but it's not sticking out to me.
The website is WordPress driven, so most of the CSS is in theme.css and lessframework.css. The Sidebar is a fixed width at 202px and the Content is next to it, which has different width sizes based on what screen size. I'm pretty sure it's something to do with that but I just need a second opinion/set of eyes!
Can anybody help?
I hope im not bringing an old question back to life, but i find Firefox's developer tools have been invaluable in ascertaining, on-the-fly, what elements are actually displaying.
The easiest way is to right click on the area in question, and choose the last option 'Inspect Element'. This will open up the source and CSS console and displays the elements current id/class and style.
To go one better, once the console is open, click on the 3D box icon on the right of the console bar to make Firefox render the page in 3D, which will allow you to spin and zoom in on the affected area.
I am working on this philippedecor.com site and I am having a difficulty in figuring out this css issue.
When I on mouse over on "Main categories" that appears on the right side, it shows a drop down with links in it.
Two things happens,
1) in IE(7) - the drop down hides behind another div
2) in both ie and ff, it pushes other div below that to go down and on mouse out, it looks fine.
I am not sure which css property can fix this.
please help me out
Next time, please make your URL clickable: http://philippedecor.com/
In Firefox, I also see a tiny bit of the background showing through the menu, as you can see. Mousing over this thing triggers a mouseout event, closing the menu. In IE 7, I don't see the push-down effect, only the hiding of the menu under the Flash panel and everything below it.
To prevent the menu pushing down other elements on your page, you should use position: absolute on #downmenu and probably incorporate it into the div containing "Main Categories" to position it in the right place. Use an appropiate z-index will likely prevent the drop down menu from popping under another div in IE (untested, as I don't have a debugging tool for IE at the university where I'm typing this message now).
Furthermore, I think you shouldn't use two menus containing exactly the same content, that can be confusing to visitors of your site (actually, I didn't read your post well enough and moused over the left instance). Also, you shouldn't put text in images without providing alternate texts, screen readers and the like can't "see" it this way (preferably use a suitable image replacement technique). And all those s in the lis are totally unnecessary and not according to rules for semantic HTML; just use padding on them or something. By the way, you should make the rounded cursors of 'Main categories' transparent (now two little white corners are shown). Just my $ 0.02...