I have a DIV on my page. Within the DIV I have other DIVs which I customize to look like buttons. Here's an example:
fiddle
Because I have so many buttons I need to have some means of scrolling so that the user can scroll down to the correct button (DIV). In the fiddle this is done using an iframe but I think I read that this can give problems with search engine optimization.
Is there some way that I can add a scroll bar to my DIV? I have never seen this done but I hope someone has some ideas.
Thanks,
You could do something like this:
Add
padding-right:30px; overflow:auto; height:500px;
to the main div
http://jsfiddle.net/jasongennaro/AQ7Ev/7/
You will need to set a height to make it work.
Also, you will need padding so the scroll bar does not overlap the content.
If you're willing to use some JQuery, JScroll Pane plugin is exactly what you're looking for
set the height for the containing div + overflow:auto or : scroll
<div style="width: 200px; height:240px;overflow:auto">
<div class = "abc" >.....
You need to set a height on the div and add overflow:auto;. I forked your fiddle, here's the code: http://jsfiddle.net/vxTqT/.
Related
I created a jsFiddle which shows the chosen-select control being 'truncated' by it's parent div. And even though the overflow is set to hidden for the y-axis, it's showing the scroll bar anyway when clicking on the chosen-select control.
The height of this parent div is fixed and set to 200px, and needs to remain this way.
How can I make chosen-select go over the parent div when clicked upon?
EDIT: jsFiddle updated with more CSS.
If I comment the div.content, it doesn't mess up the layout.
The chosen-select control is now on top of the 4th header. In this fiddle I can still select the chosen-select control, but in my application I can't.
Is there something I need to do for the header's positions?
EDIT2: jsFiddle. I just noticed that the chosen-select control stays on its place when heading 1/2 are sliding up. For the record, this doesn't happen in my application.
What does happen, is when you slide up the 3rd heading, chosen-select control is visible until it's slided up all the way. Unlike the other heading's, where the input's are slowly hiding.
Simply add this CSS class:
Added border to show you the definition of your other box is staying fixed.
div.content {
position:absolute;
}
View Here: http://jsfiddle.net/SinisterSystems/e62Wu/3/
When you select position:absolute, you are effectively telling it to ignore the constraints of your fixed parent div and be able to bound outside the box.
Does this answer the question? I can elaborate further if you'd like.
EDIT:
absolute positioning will remove it from the flow of the rest of the document and treat it as if it didn't exist (it displays where you tell it to, but will not modify other element flow).
Try just adding a spacer like so:
CSS:
div.filler {
height:30px;
}
HTML:
...
<div class="filler">
<div class="content">
<select class="chosen-select">
...
FIDDLE: http://jsfiddle.net/e62Wu/7/
ANOTHER Edit:
Try this:
JS Fiddle: http://jsfiddle.net/SinisterSystems/e62Wu/10/
Add CSS:
.hider {
position:static;
}
Add ID in HTML:
<div id="dropper" class="heading">header 3 <span class="glyphicon glyphicon-chevron-up pull-right"></div>
Add jQuery if/else:
if($this.attr('id')==='dropper'){
$('.content').toggleClass('hider').toggleClass('content');
}
I added
border: 1px solid black;
to the parentbox, and removed "overflow: hidden" and the dropdown stays in front of the div.
It was not based on any prior knowledge, just dumb luck. I was trying to figure out the exact borders of the divs...oh well.
It's always something...
I created an imagemap inside a div, but the div doesn't fit the image. Considering the div is inside a template I can't edit, how do I fix this so the image fits inside the div and not outside it?
Raja dance links
add
overflow:auto;
to #templatemo_welcome_area for the div to "overflow" the image.
Looks good in chrome and FFox now for me.
Supposing you are talking about #templatemo_welcome_area, you could start by adding display:inline-block to it.
Since your image is floating, it's normal that your div doesn't fit.
If you want to keep your float:right, you should add this to your CSS :
#templatemo_welcome_area:after {
content: '';
clear:both;
}
I have a website which contains a large (and wide) table. The table is placed inside jquery UI tabs.
It looks something like this: http://jsfiddle.net/Tq3Rg/
For the user this can be somewhat annoying since he has to go all the way to the bottom of the table and page to scroll right.
Is it possible to make the scrollbar always appear fixed on the bottom of the page?
Set a fixed height (and don't use inline-styles):
Your altered Demo
the code:
.top{
height:10%;
}
.center{
overflow:scroll;
height:80%;
}
.bottom{
height:10%;
}
If you really want to have the scrollbars at the very bottom of your page, you could check this answer on how to achieve this without needing custom scrollbars and such stuff.
Just set some fixed height to your middle div
like
<div style="background:white;overflow-y:scroll;height:400px;">
You need a custom scrollbar to do this, have a look http://baijs.nl/tinyscrollbar/ or http://www.jquery4u.com/plugins/10-jquery-custom-scrollbar-plugins/#.T_RSYxEe4hU.
I'm trying to do jquery pagination, however I'm having a problem keeping the navigator on the bottom, even with clear: both.
The problem is that the navigation div <div class="alt_page_navigation"></div> needs to be right where </ul> ends and cannot be in another div, or else the pagination get's broken.
Another problem is that because the page is dynamic, I don't know the width of the alt_page_navigation beforehand.
Here's a live page example, I've tried everything google spit up, to no avail.
If anyone knows of a simple solution, please let me know :)
Thank you :))
Clear won't work with your inline-block display, but you need that for centering.
Try this solution for creating a clearing div, then put
<div class="clearfix"></div>
between your products and your pager.
Put padding at the bottom equal to the height of your nav, and position like so:
.wrapper { position:relative; padding-bottom:1.5em }
.nav { height:1.5em; position:absolute; bottom:0 }
For example: http://jsfiddle.net/CwrMq/
But there's no reason to use absolute positioning, either; just make it a proper display:block item. For example: http://jsfiddle.net/CwrMq/1/
Your .alt_page_navigation div has display: inline-block set on it. If you delete this line in css - your div will clear the floats. If you want its content to be in the center of the page simply add text-align: center to it and make sure that its content is inline-block (now your a are block-level). You can see the working example here: http://jsfiddle.net/6FNH6/
Here is a solution i tend to use in situations like this.
Your paginator needs to go inside a container that positions it horizontally
See this fiddle - http://jsfiddle.net/94MwF/1/
Basically you are using text-align to horizontally center it, and position absolute to put it at the bottom.
I'm having trouble figuring out how to make the my pictures div show in the right place
here is a fiddle which looks worse the my page bust will give you an idea of what i"m trying to do
here is how it really looks a the of the page and at the `!
as you can see the div "pictures" has space above the pictures inside it and they pictures are pushed out at the bottom making my gradient incorrect.
I can't figure out where the extra space is coming from
additional
there is additional space on the right that grows while you expand the browser window until the next picture can fit then it shrinks. how can I make it so it stays at like 10px until the next picture fits
The problem you're having is that the div.spacer at the top of your pictures DIV is clearing the floated a.home (the sidebar, if I'm not mistaken). A possible solution would be to put overflow:hidden on the pictures DIV.
(Basically, you can control the "scope" of CSS clear by using overflow to create what is called a "block formatting context". If you apply overflow:hidden to the pictures DIV, then clear:both elements inside of that DIV cannot clear floats outside of that DIV.)
You have top: 200px; in the CSS of your pictures div
Hard to tell with the JSFiddle but:
div.pictures {
position:relative;
top:200px;
width:90%;
margin:auto;
background: rgba(255,255,238, 0.25)
}
Looks like that top:200px; rule is adding significant space.
try putting a <br style="clear:both;" /> at the end of the div!
Set top in the div.pictures to 0px;. However, it's difficult to tell if this is the result you want using Fiddle.