I was trying to make a slider, all good, i finished it, but i saw that the links aren't active, when i hover on them, the cursor is not pointer, if i click on them nothing happens,except the last one.
I remove the css and i saw that the links is ok. So i've tried to find the problem in css.
first:
.caption-wrapper{
position: absolute;
text-align: center;
width: 100%;
}
if i remove position: absolute the links are active, but the jquery movment animating doesn't work anymore.
second:
ul.slides li{
position: relative;
width: 100%;
float: left;
margin-right: -100%;
height: 500px;
}
This time, if i remove float:left the links are active again, but the rest is going crazy.
Here http://screencast.com/t/KLpp6DysMZ8l is a part of the html code. there are 5 li's , and only the last li links works. I have no idea why.
I don't know what to do. I worked a lot at this slider. Anybody has this problem? Thank you!
I suspect they're layering on top of each other because of they're positioned absolute, try using z-index to order them. Use a higher z-index on the active link.
Related
I want to make a div scrollable when its touching the bottom div.
I tried this:
margin-bottom:30px;
position: relative;
overflow: auto;
but it didn't work.
I created a fiddle tho show you my problem:
https://jsfiddle.net/wp3wvuj2/1/
For explanation: When you type in in a input field a new field is added to the div (This function is simplified). I want that before the input fields touch the element below (the START-div) it gets scrollable (overflow: auto).
Somebody have an idea?
Edit:
I noticed that nobody understands my problem.
I'll try to explain it better:
I have list where players add their names. The list has minimum 4 players maximum ∞.
The start buttonis placed at the bottom. The problem is in a iphone 5 it looks like this:
And now if i would add another player input field it would Overlap with the START-Button. Thats the reason why I want it scrollable now. I already get that work with a fixed height, but i want it responsive!
Because on a iPad for example it looks like this:
And I want prevent an overlap with the start button like this:
So it should get scrollable before it overlaps (dependent on the display size).
Updated JS fiddle, try this, i have updated CSS part in your code
https://jsfiddle.net/wp3wvuj2/2/
.main_input {
width: 209px;
top: 70px;
margin: auto;
margin-bottom:30px;
/* position: relative */
overflow: auto;
height:216px; //Give some height always to apply overflow auto
}
.main_start {
width: 100%;
margin: auto;
/* position: absolute */ //Not required
bottom: 20px;
font-family: Pamela;
font-size: 36px;
text-align: center;
}
I've only changed the styles on class main-input
.main_input {
width: 226px;
height: 234px;
top: 70px;
margin: auto;
margin-bottom:30px;
position: relative;
overflow-y: auto;
}
EDIT:
Please note for this solution to be able to work, I needed to remove the Top and Bottom positions of some elements as they were breaking the layout. Please use Margins or Paddings to get that styling you desire.
This now works to scroll once the space runs out on the page.
https://jsfiddle.net/wp3wvuj2/5/
I am trying to implement a drop-down menu containing notifications, like this page has: http://infinite-woodland-5276.herokuapp.com/index.html. The bullhorn icon in the top right part of the site, and it's menu, is what I am trying to recreate.
I have succesfully made a header menu icon, with a list of items. However I can't make the scrollbar work.
It's using the jquery plugin slimScroll, found here: http://rocha.la/jQuery-slimScroll.
The attatchment of the scrollbar seems extremely simple and straight forward, in the tutorials. Here is what I do:
$(document).ready(function(){
$('#main-navbar-notifications').slimScroll({
height : 250
});
});
After implementing this code, This code appears in my DOM:
<div class="slimScrollBar" style="width: 7px; position: absolute; top: 0px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 195.925px; background: rgb(0, 0, 0);"></div>
<div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; opacity: 0.2; z-index: 90; right: 1px; background: rgb(51, 51, 51);"></div>
These appear not inside the #main-navbar-notifications, as I would have expected, but subsequently. However, I found that the exact same DOM structure is present in the example I am trying to copy. Seems like it is as it should.
But my scrollbar simply does not work. If I hover the mouse over the div, nothing happens. I tried setting the scrollbar to always be visible, and still nothing happened. Then I went into the HTML itself, in chrome inspector, and manually set the scrollbar and rail to be visible. That worked for visibility, as they visually appeared exactly as I would have expected them to, but they still didn't react to any mouse actions.
The only info I have been able to find on the subject, is to make sure that my scrolling div is set to position: relative;, but that didn't do anything. There are no error messages, or any messages at all in my console either.
I've tried to recreate my problem in a fiddle, but I was unable to upload the slimscroll-library there.
Does anyone know what this error could be about? Or any strategies for figuring out what the problem actually is?
Turns out, I had manually copied a <div class="slimScrollDiv">, a wrapping div which is supposed to be generated from the plugin, for the scrolling pane. Once I removed that div, slimScroll worked perfectly...
I have some expanding content in my #main (or) #panel (got this from a template) div, but when you expand it, it pops to the unknown, under the page...
How could I make my main div expand with my content.
CSS
#main
{
position: relative;
overflow: hidden;
}
I also have some JS/Ajax scripts that expand the page to the right size when you switch page, could they affect...?
See live demo here! (The (i) button)
The divs expand when you click on them.
A few times it worked on another computer, but very randomly..
Tell me if you need the scripts or more code.
Basically, everything's wrapped in .main -> .panel
Simple: When the div is expanded, expand the main div's height to fit it.
.panel
{
position: relative;
display: table-cell;
width:100px;
vertical-align:middle;
}
The problem is not with the main div, but the class panel.
.panel {
padding: 3.5em 2.5em 3.5em 2.5em;
position: absolute; // I'm the problem
top: 0;
left: 0;
width: 45em;
}
This is also a problem.
#me .pic img {
position: relative; // I'm evil
display: block;
height: 100%;
}
My debugging may have been awry though, since it doesn't want to play nice and stick with what I want it to do sometimes.
Let me know if this helps in some way, and if you need help debugging anything from there.
EDIT
Your problem may just be a matter of recalling the Script that you use to re-size the main div when the script that displays the hidden divs content goes off. That should re-size the page to fit the new content.
I can't locate where this script goes off, so if you can provide it, I could figure it out.
If your question is actually "how do I make my main div's height change dependent on it's contents" then all you need to do is remove overflow: hidden; from the css class.
I am working on this site http://www.group---me.my/national/
Please remove --- in the url.
For certain deals, there is options, and when you click on the BuyNow button, a popup comes up. I would like to dim (darken) the background, while the popup is shown.
To do this, on my local test site, I added the following div class:
.overlay{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 333%;
background-color: black;
z-index: 20;
opacity: 0.8;
filter: alpha(opacity=80);
}
Then on the Buy Now button, I added
onclick="javascript:document.getElementById('fade').style.display='block';"
I also have this in the site
<div id="fade" class="overlay"></div>
But the problem is, the overlay always hides all the layers, including the popup, regardless how high I set the popup div's z-index.
Any help is much appreciated. Thanks.
Which browser? Which version. I am getting it right here. It should hide right?
And it is prominent. What is that you wanna do here?
If you doesn't specify some parent element to be relative positioned, your overlay div will be positioned relative to body so it can be above all other content.
I have a a list of image swatches when on mouseover a div popup should appear above all content. However I am finding that in IE6 that the div popup is sitting behind the elements that are generated after the popup. It is sitting correctly ontop of elements rendered before the popup.
A rough idea of what I have:
<ul>
<li>
<img src="image path to swatch">
<div class="tooltip">TOOLTIP POPUP</div>
</li>
<li>
<img src="image path to swatch">
<div class="tooltip">TOOLTIP POPUP</div>
</li>
</ul>
I have quite a few of these ULs stacked on the page.
Rough idea of the CSS
ul li {
width: 150px;
height: 20px;
position: relative;
}
div.tooltip {
width: 300px;
height: 300px;
position: absolute;
top: -20px;
left: -20px;
z-index: 1000;
display: none;
}
I have tried making the parent li have a z-index of -1 and position relative, but this also hides the swatch. The swatches are generated dynamically and I need the individual tooltips to be positioned near the swatch itself, which is why I structured it inside a list.
I have also tried to increase the z-index using javascript when the swatch is hovered over so that it is the highest above all else, but this hasn't worked either. Eg:
$('ul li').hoverIntent(
function(){
$('div.tooltip', this).css('z-index', '9000');
$('div.tooltip', this).stop(true,true).show();
},
function() {
$('div.tooltip', this).hide();
$('div.tooltip', this).css('z-index', '1000');
});
Running out of ideas, so if anyone could help please? Thanks.
The code can be seen on JS Fiddle at: http://jsfiddle.net/melon/nUTgB/13/
To fix a lot of IE z-index bugs, keep this rule in mind:
If something has a position attribute, it always needs a z-index
That has helped me a lot with browser testing. That means that the LI tags need a z-index: 1 set, because they have the position:relative attribute
ie6 work on position relative more than absolute
https://stackoverflow.com/a/10280332/1312610