While improving my CSS skills, I got an idea based on a UX design I found.
In that UX design, there's a modal, that underneath it, there's a shelf, that opens up and contains extra data.
Now, I'm using Mantine modals in my project (Mantine v4.2 & React v18), but I couldn't get the desired behavior and I want to create my component.
I'm not asking for the full implementation, because I want to achieve the goal myself, but I do need help with the positioning of the divs one under another:
Imagine that we have 2 divs inside the container div:
<div class="modal">
<div class="modal-content">
</div>
<div class="modal-shelf">
</div>
</div>
Now, when the shelf is hidden, it needs to be behind the modal, centered vertically to the viewport, and right aligned to the edge of the modal,
But when it opens, it moves the modal to the left, so it can take the space, and center both modal and shelf.
Now, the limitation that I have is the fact that I don't know the height of the content of the modal itself.
EDIT: For simplicity, this is what I mean:
Bootstrap calls it an Offcanves
[Bootstrap Offcanves][1]
[1]: https://getbootstrap.com/docs/5.2/components/offcanvas/
You can check it to see how it works.
Related
I have a set of bound classes inside a div and they appear as distinct objects one beside the other and the content inside the div is overflowing to the next line. I am looking for an approach which would be best suited to handle these text overflows. The two ideas I am contemplating on are:
Using tooltip- so when the mouse hovers on the div the extra content which is overflowing will be displayed and closes by default when the mouse moves away.
scrolling text- I am unsure about this one since like I said the objects are all bound classes and I am not listing them seperately so when I tried applying marquee to it all the headers of the different objects started scrolling as one long line.
This is how the code looks at present (does not contain the tooltip and scroll that I implemented since I reset the code to how it looks originally.
<div class="BoundClass">
<div>
<div style="white-space:normal"><%#Container.DataItem("cClassName")%></div>
</div>
</div>
Could someone please help me with what would be the best approach to handle the text overflows and also the html, css code for it.
Ok, so I have an update. The following code is working for me, the class names are scrolling in their respective divs.
<div class="BoundClass">
<div>
<marquee behavior="scroll" direction="left"><%#Container.DataItem("cClassName")%></marquee>
</div>
</div>
However I want to set a condition where the ONLY the text that overflows will scroll and the text which fits inside the div doesnt.
Well i never thought i'll go to stackoverflow with css problem, But i feel really puzzled with this structure.
As you may see on the picture there is a three tabs, and a content on the same height level. When i choose the next one, the content for it opens as shown on picture.
Now do not pay attention on the graph, lets say it is just a text. But this part should be responsive. Tab and features section have to stay fixed. by the way the whole structure is wrapped with
<div class="col-lg-8 col-md-10 col-md-offset-1 col-lg-offset-2"></div>
My first idea was just to wrap the tab and its section in div, but in this case not active tabs will be hidden under the active div and not be clickable.
Any idea how to do this??
Thanks in advance!!
I am using Twitter bootstrap for my portfolio site. The fluid layout seems to work up to a certain point, but there are a few issues with the home page.
Once I go smaller than about 997px, the nav menu disappears entirely. It almost looks like it drops down below the header bar and is hidden, but I can't seem to get it to show. It should actually switch to the mobile menu and remain in the upper right corner.
Also once you get down to smaller screen sizes, the "About Me" and "Contact" sections of the index page overlap each other. I'm sure this has to do with my structure somehow, but cannot find the problem.
Any bootstrap experts know what might be causing these issues?
Here is a link to the test version of the site. http://theiamzone.com/kyle_hagler/portfolio-site
From the source code I view from the site,
I Found out that you lacked of jquery file.
<script src="//code.jquery.com/jquery-1.10.1.min.js">
Put it and see if the dropdown work.
And for the About Us and Contact Us part.
A method you can try is put container to wrap them all, read from here for more information.
http://twitter.github.io/bootstrap/scaffolding.html#layouts
From my point of view in about us section, try no to wrap the 2 span 6 column,
Use the following code instead.
<div class="row-fluid">
<div class="span12">
<div class="span6"></div>
<div class="span6"></div>
</div>
</div>
Same situation happen on the contact us section,
the css class aren't assigned for them to work.
I'm new to html/html5, but not to programming, and i'm trying to code my personal website. I've read many resources and tutorials on the basics but I'm looking for some tips on how to begin achieving the layout I want.
In my layout (here) I'm looking to have the left half of my page as a fixed navigation panel with an image highlighting the current page, then with each option the right side refreshes to a new independently scrolling page and the highlight image animates in the nav panel to the new option.
How should I begin to achieve something like this? I just need a push in the right direction to the type of elements/scripts/whatever I will need to implement.
Thank you!
Here is a simple example to help you start out:
jsFiddle
You'll notice the text on the right slides out of the screen when you scroll but the green box stays in the same position. This is done with a slight bit of CSS.
The navigation div on the left is styled with position: fixed;. This keeps the navigation div in one place at all times.
In contrast, the content div on the right is styled with position: absolute; with a left: 25% set. The widths of the navigation div and content div are set in percentages. This allows the content to take up the same relative screen space whether the window is larger or smaller. Your content will adapt to your viewers resolution.
Using an <iframe> will is one possible solution to altering the content in the right hand content div. Another would be to use ajax but that is getting a little more advanced as you now must understand client and server scripting in order to receive the full benefits from it.
iFrame
Ajax
If you're information is static and will not change often, you could considering making a single page web app with multiple templates that are appended to the content div.
jQuery
jQuery Templates Plugin
jQuery is really good as well for learning JavaScript and makes building dynamic client side applications a breeze.
They also have ajax support as well:
jQuery Ajax
Hope this helps.
Good luck and Happy Coding!
You have the menu housed within an element that is set to position: fixed;
Position fixed will make sure the menu doesn't move around on the page regardless of scrolling the rest.
Then with javascript you can add an event listener for "scroll" on the window (or just the div you want to watch for scrolling). When this fires, check the scrollY property to see what range it is in and maybe highlight certain items in your menu.
Hopefully this leads you down the right path. It's a broad question, so here's a broad answer!
I second the suggestion from #Jeromy French -- I think Bootstrap , Foundation and other responsive frameworks have a lot going for them.
Here's an example using Bootstrap: http://jsfiddle.net/panchroma/2dF6s/
In addition to being HTML5, you can get a layout which works on everything from smartphones to wide desktops. It's not the only way to get a mobile friendly website, but it's one of several good options.
I think that with so much moving towards smartphones and tablets now, the more you can learn about responsive and mobile websites, the better off you will be in the future.
I think all the responsive frameworks use a grid based system, here's what the HTML looks like with Bootstrap:
<div class="container">
<div class="row-fluid" align="center">
<div class="span12">
<h1>Header</h1>
</div><!-- close span12 -->
</div> <!-- close row -->
<div class="row">
<div class="span3" id="side-nav" data-spy="affix" data-offset-top="200">
<h5>Option 1</h5>
<h5>Option 2</h5>
<h5>Option 3</h5>
<h5>Option 4</h5>
</div> <!-- end span3 -->
<div class="span9">
<p>Main Content Here </p>
</div> <!-- end span9 -->
</div><!-- end row -->
</div><!-- end containter -->
Good luck!
I'm experiencing some strange behavior with a project i'm working on:
http://daft.net76.net/yah/
When you click the rules link the entire layout shifts to the left by a pixel or three. I've attributed this to the amount of content in that div, because when you click the 'Scores' link, which has a smaller content height.
The lower div structure looks like the following:
<div id="lowercontent">
<div id="rulesDiv" >
<h1>Rules</h1>
<p>Clicking the roll button rolls the dice. You have 3 rolls per turn.
After rolling you can choose to keep dice through rolls. Click a die to keep it through a turn.
Submit a combination of dice by clicking an option and clicking Score Roll.
To claim yahtzee either click the zee button, or score roll without anything selected.
To claim yahtzee either click the zee button, or score roll without anything selected.
To claim yahtzee either click the zee button, or score roll without anything selected.
To claim yahtzee either click the zee button, or score roll without anything selected.</p>
</div>
<div id="scoresDiv">
<h1>Scores</h1>
<p>1</p>
</div>
<p id="closeTest"><span id="close">close</span></p>
</div>
I'm using jquery functions to swap between the scores and rules.
lowercontent is a fixed width div. The inner rules and scores divs have no width.
Any ideas? Let me know if more detailed css on the divs is needed.
When the Rules div is shown, it is causing the scrollbar to appear. First, its really not a big deal.. I would just leave it alone.
If it really bothers you, add this to your CSS:
html { height: 100% }
body { height: 101% }
This will force a scrollbar to always be present so the layout won't shift.
My original answers are below but the truth is, there's only one good answer to this if you feel you need to do anything at all: modal windows.
A modal window is one that pops to the foreground and needs to be actioned before you can carry on doing what you were doing. You've used one before even if you didn't know the name. One example is an open file dialogue in an application. You have to pick a file or cancel to carry on.
On the web, you can replicate this functionality quite easily. It involves "overlay" over the content to stop the user touching it and the modal box on top of the overlay. Most web-examples shade the overlay to let the user know what has focus.
This fixes your problem because it stops the content getting longer by putting the new content over the old content and therefore the scroll-bar doesn't need to show.
Luckily for you, there are prefab solutions (see the last line of this) but I think the one that will work best for you is Facebox. It's light and sexy and does the job of just showing some information. it doesn't look like you need to get too bogged down in other actions.
Here, at least, it's because the scrollbar on the window pops up.
There are a few ways to fix this but all are pretty hacky or imperfect:
Use a left-aligned design.
On load, if the height is bigger than the computed height of the content (no scroll bar) force the content to create a scrollbar. Compare widths. Deduct half this from your left margin on your content. Yuck!
Manually centre the content using onload and onresize hooks to change the margin on the content. Probably the cleanest and you can leave it on margin:auto just in case. This won't work for IE6 but I guess that's expected.
You can put the content into tabs that the user has to switch between.
Use pop-in modal layers instead of attaching the content to the bottom of the page. I'm thinking something like LightBox but with content instead of images. I think there's probably a script out there that does this with content already.
Edit: See this for more tips on modal windows.