I have an hidden div with a fixed height and a scrollbar. I would like to change the scroll position, but the browser won't le me do it, as the div is hidden.
The scrollTop property will stick to 0.
Also, I don't want to show and hide the div back, which causes flickering.
If anyone knows how to do it, it'll be really helpful.
Thanks!
You can save the scroll using jQuery's data function.
function SaveScroll(val)
{
$(the_element).data("Scroll", val);
}
function Show()
{
var element = $(the_element);
// prevent from showing while scrolling
element.css
({
position: "absolute",
top: "-50000px",
left: "-50000px",
display: ""
});
// Scroll to the position set when it was hidden
element.scrollTop(element.data("Scroll"));
// show the element
element.css
({
position: "",
top: "",
left: ""
});
}
This might do the trick
You maybe can just use visibility: hidden instead of display: none. The visibility keeps the element where it is. I believe it is the exact same thing as opacity: 0, but it is a cross-browser solution.
To prevent div flickering and fix <div> unavailability for scripts you can use position hiding instead of "display: none;":
.hidden {
position: absolute !important;
left: -9999px !important;
top: -9999px !important;
}
My question was not complete. The div is not hidden on his own. It's part of a container div, which is hidden. The inner div displays with his parent.
<div class="container hidden">
<div id="some_div">Content</div>
<div id="my_div">I wanted to scroll this one</div>
<div id="other_div">Content</div>
</div>
We use jQuery came up with a custom "onShow" event.
So now we can do this:
$('#my_div').bind('show', function() {
handle_scrollTopOffset();
});
When the show event is bound, it adds the class .onShow to the div. And the jQuery.fn.show() function has been overridden to trigger the 'show' event on the childs which have the .onShow class.
Thanks everyone for their suggestions. I'm sorry I provided a uncomplete question. I'll give all the details next time.
Related
So I'm using bootstrap as my responsive framework and I have a container, row I also have two div's that I'm going to be switching between using a button. So I setup my HTML and my second div I set the display to "none" to hide it. However when using Jquery fadeIn/fadeOut you can see there is some shifting/expanding in terms of the Height.
Now I think to get around this I have to set the position to Absolute and also change the z-index of the first and second div so one is hidden behind the other. Using absolute however breaks the bootstrap container... So is there a way to switch the Div without the shifting in height when the button is clicked. Added some source so you can see what happens when to buttons are clicked.
http://www.bootply.com/hBNIHfCpxR
Try this:
http://www.bootply.com/PIG2icyErI
Relevant CSS:
.row {
position: relative;
padding-top: 50px;
}
#content-one, #content-two {
position: absolute;
width: 100%;
top: 0;
}
How should I identify relative blocks and change them to absolute position but in the same place.
It can be programmed by javascript or jquery? Or actualli it's not possible?
Thanks you very much.
CSS
.relative
{position:relative;
}
.absolute
{position:absolute;
}
JQUERY
$('class/id').click(function() {
$('div').removeClass().addClass('absolute');
});
But if you do this the position of all div start from the top left corner depending on the parent div. I dont think you need to do this for all the elements.
If you're changing only specific divs to position:absolute your best option would be to do something such as this:
<div class="relative"></div>
<div class="relative absolute"></div>
<div class="relative"></div>
.relative {
position: relative;
}
.relative.absolute {
position: absolute;
}
If they need to be set absolute onload depending on whatever then you could append the .absolute class using addClass() jQuery function.
I hope I haven't misunderstood your question there, if I have please ignore the answer.
I'm trying to fix #fixed_header_bottom div right under #fixed_header_top div after scrolling 100px down but failed to do so. #fixed_header_middle div obviously will appear and disappear when scrolling up and down and only #fixed_header_top, #fixed_header_bottom and #body_block will be visible when (for example scrolling down come to an end).
JSFIDDLE is here
In the second image, #fixed_header_middle disappeared completely but will start appearing when scrolling up.
Thanks
First, you need to set a top style for your headers so they are in the correct position, you should think about a more robust way to do this.
Another way to consider doing this is to make a hidden clone of your bottom header.
Then, simply hide/show it when the scroll position is correct. This method avoids any funny business with the scroll bar changing size and/or position as the element is taken in and out of the scrollable portion of the page (because the original is still there):
JSFiddle Demo
An even better way is to simply make a placeholder that you show/hide as the bottom header is fixed/un-fixed:
<div id="fixed_header_top">fixed_header_top</div>
<div id="fixed_header_middle">fixed_header_middle</div>
<div id="fixed_header_bottom">fixed_header_bottom</div>
<div id="fixed_placeholder">Shouldn't ever see me</div>
JS:
$(document).ready(function () {
$(window).bind("scroll", function (e) {
if(!$('#fixed_header_bottom').hasClass('fixed')) {
if ($(document).scrollTop() >= 100) {
$('#fixed_placeholder').show();
$('#fixed_header_bottom').addClass('fixed');
}
} else {
if ($(document).scrollTop() < 100) {
$('#fixed_placeholder').hide();
$('#fixed_header_bottom').removeClass('fixed');
}
}
});
});
CSS:
#fixed_header_bottom, #fixed_placeholder {
display: block;
width: 100%;
height: 50px;
background-color: #11DD55;
}
#fixed_placeholder {
display: none;
}
.fixed {
position: fixed;
top: 50px;
}
JSFiddle Demo
This code works as it should.
Your problem is that you didn't set any top property, so it stays on its original top position.
Same Fiddle with jQuery 1.8.3 (as 1.10 don't handle scrollTop() method for IE) ;): http://jsfiddle.net/h8H6N/4/
I added top: 0; to the header top, and top: 50px; to bottom header, assuming that's the render you're looking for.
I've created an effect whereby an HTML element is initially hidden behind another HTML element, and the CSS 'top' value of the hidden element is animated to expose it from beneath the masking element in a smooth sliding motion.
Does anyone know if there is a way to recreate this effect without the masking element on top?
I want to avoid the jQuery'esque slideDown where the height of the element being shown is animated.
I have the feeling that this just isn't possible, but if someone is otherwise aware, your advise would be much appreciated.
You can easily do this with a wrapper that has overflow set to hidden
http://jsfiddle.net/xvNf6/1/
HTML
<div id="wrapper" style="height:0px;">
<div>content</div>
</div>
Sample CSS
#wrapper{width:300px;height:280px;margin:0 auto; overflow:hidden; background:#eee}
Javascript
//if you must not use jQuery
var animationTimer = setInterval(function(){
var wrapper = document.getElementById("wrapper");
wrapper.style.height = (parseInt(wrapper.style.height) + 1) + "px";
if(parseInt(wrapper.style.height) >= 280)
clearInterval(animationTimer)
},1);
//if you can use jQuery
$("#wrapper").animate({height:"280px"},1000);
Place your element within a parent div with overflow:hidden. Then, position your element beyond bounds of the parent div so that it is hidden.
#wrapper { overflow: hidden; }
#target { height: 100px; top: -100px; } /* shift element out of view */
You can then reveal it by animating to {"top":0} to get the slidedown effect that doesn't resize the height of the element.
Here's a rather crude demo: http://jsfiddle.net/7RSWZ/
Update: Here's another demo that attempts to deal better with different content sizes by dynamically setting the heights and top values. http://jsfiddle.net/7RSWZ/2/
The question might be a little bit confusing.
I have an inline div and the first one is meant to be a close/delete button. I'm trying to fadeIn the close button on hover, although when it's faded out the rest div's move to the left.
How would you prevent this?
Here is a fiddle: http://jsfiddle.net/x2SEv/
Hover on top of 'Some text goes here'
jQuery functions .show() and .hide(), use the CSS attribute display.
When attribute display is set to none, the space filled by HTML element which is hidden is remove. So your second div move to left.
You have to use the CSS attribute visibility. It does the same thing that display, but it keeps the space filled by HTML.
Let's try :
In your JS :
$(".todo").mouseover(function() {
$('.closebtn').css("visibility", "visible");
});
$(".todo").mouseout(function() {
$('.closebtn').css("visibility", "hidden");
});
And your CSS :
.closebtn, .actions{visibility:hidden;}
You'll have to absolutely position the element that you're fading, and move your text in a bit: http://jsfiddle.net/x2SEv/1/ .
.parent {
position: relative;
padding-left: 40px;
}
.div-to-fade {
display:none;
position: absolute;
left:0; top:0;
}