Right now I'm getting this strange problem where when I use jQuery's animate() function on a <div> it removes the ability to scroll. I'm adjusting the height with animate(). This problem only comes up with IE and works fine with Chrome and FF.
Below is my css class for my div
div.fullscroll{
height: 65%;
width: 75%;
overflow-x: hidden;
overflow-y: scroll;
border-top: 1px solid #347235;
border-bottom: 2px solid #347235;
border-right: 2px solid #347235;
border-left: 2px solid #347235;
-moz-border-radius-topleft: .1em;
-moz-border-radius-topright: .1em;
-moz-border-radius-bottomright: .2em;
-moz-border-radius-bottomleft: .2em;
border-top-left-radius: .1em;
border-top-right-radius: .1em;
border-bottom-right-radius: .2em;
border-bottom-left-radius: .2em;
background-color: #FFF;
padding: 0px;
margin: 0px auto;
position:relative;
}
Here is my JS Jquery animate where <div id='main'>
$('#main').animate({
height: "40%"
}
,"slow");
After the animate is finished the <div> tag no longer has the ability to scroll. I'm completely stumped on this and was wondering if anybody had an idea.
(Once again this only happens in IE)
I'm guessing that this might be IE's problem with setting percentage heights (ref). Try changing the height to a pixel value and see it if works.
Also, is #main and .fullscroll the same div?
I was able to fix this using a quick workaround. After the animation is finished I add the overflow property back to the element.
like
$('#main').animate({
height: "40%"
},function(){
$('#main').css('overflow-y','scroll');
}
);
Related
To give a basic idea of what I hope to accomplish;
I currently have a site live at:
http://shiinachi.com
As it is, the body element is changed using javascript when clicking between the home and email tab.
However, I hope to redo this. I aim to have the width of the body expand when a button is clicked, so the body "drops down" to show the menu in question.
I have experimented using an onload function to trigger a css class;
function bodyloaderS() { classList.add("body-loader")
The css of the body is set to a width of 0 by default, then I attempted to use the body-loader class in question to adjust the width.
body-section.body-loader{ width: 745px; }
I then called the transition onload to test it. However...
The results were less than successful.
Is there a better way I can go about doing this?
Edit:
Here's a dump of the code being used
Body tag;
<div id="body-section" onload="bodyloaderS(document.body-section)">
<h1>Home</h1>
<p>Hello.<br><br>Temp</p> </div>
Relevant CSS;
#body-section{
position: relative;
padding-left: 50px;
padding-top: 50px;
padding-right: 50px;
height: 350px;
width: 0px;
transition: width 2s;
border-color: #ffffff;
border-style: solid;
border-width: 1px 1px 3px 3px;
border-radius: 3px 9px 3px 0px;
top: -752px;
left: 325px;
background-color: #222222;
}
#body-section.body-loader{
width: 745px;
}
The script in use;
<script>
function bodyloaderS() { classList.add("body-loader")
}
</script>
If you also add a target element in your function it will work, e.g.
function bodyloaderS() {
document.querySelector('#body-section').classList.add("body-loader");
}
Also, you might want to consider start using event listeners instead
var thebody = document.querySelector('#body-section');
thebody.addEventListener('load', function() {
this.classList.add("body-loader");
})
Updated based on a comment and a question edit
The onload event doesn't work on div elements.
Here is a suggestion using a DOMContentLoaded listener
document.addEventListener("DOMContentLoaded", function() {
var thebody = document.querySelector('#body-section');
thebody.classList.add("body-loader");
});
#body-section {
position: relative;
padding-left: 50px;
padding-top: 50px;
padding-right: 50px;
height: 350px;
width: 0px;
transition: width 2s;
border-color: #ffffff;
border-style: solid;
border-width: 1px 1px 3px 3px;
border-radius: 3px 9px 3px 0px;
/*
top: -752px;
left: 325px;
background-color: #222222;
*/
}
#body-section.body-loader {
width: 745px;
}
<div id="body-section">
<h1>Home</h1>
<p>Hello.<br><br>Temp</p>
</div>
I am having issues placing my dT(Date/Time) div at the bottom of it's containing div. I have tried setting bottom: 0px; to no avail. Below is the html and css code I am using.
HTML:
<div class='container'>
<aside>
<img id="user-pic" src="images/blank-user.jpg">
#User_Name
<div id="trend"><h6>TRENDING</h6></div>
</aside>
<section class="main">
</section>
</div>
CSS:
#dT{
width:inherit;
bottom: 0px;
border-top: gray;
background-color: gray;
font-size: small;
}
.container{
margin-top: 80px;
}
section{
margin: auto;
width: 400px;
clear: left;
top: 100px;
}
.tweet{
width: 450px;
height: 225px;
background-color: #FFFFFF;
border: 4px solid #F1433F;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
margin-bottom: 15px;
padding: 25px 15px 0px 15px;
}
.tweetContent{
width: inherit;
height: inherit;
margin: 5px 5px 0 5px;
border-bottom: 1px solid #EEEEEE;
border-top: 1px solid #EEEEEE;
}
There is some JQuery elements within my code that I have not poseted because I do not believe it would have any effect on the positioning of a div.
It appears that the jquery aspect of the code might have something to do with it so here it is.
UPDATE: removed JQuery because it was not relevant.
Add position:relative to parent of your #dT element . Only if it is relative you can control the child elements using left , right , bottom and top.
Update:
And to the child elements for which you want to change position using left add position:absolute
P.S : Need to add relative for the div that contains #dT and absolute for #dT
#parentofdT
{
position:relative;
}
#dT
{
position:absolute
}
Easily pixed with position:absolute;: https://jsfiddle.net/1Lsnjou9/
Good luck.
You should add position: relative or position: absolute property to make the bottom: 0px work
#dT{
width:inherit;
bottom: 0px;
border-top: gray;
background-color: gray;
font-size: small;
position: relative;
}
use position property like position absolute or position relative so as to work with top, left,right,bottom properties
so what I'm trying to accomplish is to have a large image, in this case a map, inside a smaller div with scroll bars that let you look at the rest of the map. I'm using class="img-responsive" at the moment but it makes the image the same size as the div which i do not want since when the user is looking for a road if the map is too small they wont be able to see it. I also tried to set a max-height for the div but the image is overflowing onto the background. Please help.
.ibox-content {
background-color: #ffffff;
color: inherit;
padding: 15px 20px 20px 20px;
border-color: #e7eaec;
border-image: none;
border-style: solid solid none;
border-width: 1px 0px;
max-height: 350px;
}
<div class="ibox-content" id="ibox-1">
<div class="active content" id="elementMap">
<img class="img-responsive" src="//lorempixel.com/600/600">
</div>
</div>
Remove img-responsive, because it gives the style max-width: 100% to the element, meaning the image can never be wider than its parent.
Add overflow: auto; to the container:
.ibox-content {
background-color: #ffffff;
color: inherit;
padding: 15px 20px 20px 20px;
border-color: #e7eaec;
border-image: none;
border-style: solid solid none;
border-width: 1px 0px;
max-height:350px;
overflow: auto;
}
Div with overflow: scroll or overflow: auto will solve your problem.
I'm showing and hidding a div using its visibility in css. It works fine in every other browse except IE8 & 9 and I can quite figure out why. From looking at this, can anyone possibly give an answer?
HTML
<div id="action-panel">
Show mne
</div>
CSS
#action-panel {
position : fixed;
height: 80%;
width: 300px;
background-color: #EEEEEE;
right: 10px;
visibility:hidden;
display: block;
top: 10%;
overflow:scroll;
padding: 10px;
z-index: 1000;
border-color: #000;
border-width: 1px;
border-style: groove;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
And the javascript
$('#action-panel').css('visibility', 'visible');
Seems like it should work unless I am missing something back
The navigation menu at the top of the http://www.playframework.org site features a small arrow pointing upward for the currently selected section (Home, Learn, Download,...). I tried to get behind the implementation they used, but I can't wrap my head around it - the resource does not show up in Chrome's Resources window, and an inspection of the elements did not show any signs of a background image, nor a JS interceptor (although I might have missed that). What in hellhound's name is going on there? :)
This is the HTML:
<ul id="menu">
<li class="selected">
Home<span>></span>
</li>
...
And the magic happens in this piece of CSS:
#menu .selected a:after {
content: " .";
display: block;
text-indent: -99em;
border-bottom: 0.8em solid #8adc92;
border-left: 0.8em solid transparent;
border-right: 0.8em solid transparent;
border-top: none;
height: 0px;
margin-left: -.8em;
margin-right: auto;
margin-top: 14px;
position: absolute;
left: 50%;
width: 1px;
}
The technique is called CSS arrows, you can find a lot of articles and examples on the net
(EDIT: #jeroen posted a very good one).
It looks like they used a css arrow, see more information here.
Here's a link to see it in action
http://jsfiddle.net/zC5cp/
.box{
background: red;
color: #FFF;
width: 100px;
height: 100px;
position:relative;
}
.arrow-up {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid white;
position: absolute;
bottom: 0px;
margin-left: -10px;
left:50%;
}