I am trying to have an advertisement block/div that will be switched to a fixed position once you scroll down the page.
Here is a demo of what I am trying to do and the code I am using to do it with...
http://jsfiddle.net/jasondavis/6vpA7/3/embedded/result/
In the demo it works perfectly how I am wanting it to be, however when I implement it on my live site, http://goo.gl/zuaZx it works but when you scroll down the div flickers in and out of view on each scroll or down key press. On my site to see the problem live it is the block on the right sidebar that says "Recommended Books"
Here is the code I am using...
$(document).ready( function() {
$(window).scroll( function() {
if ($(window).scrollTop() > $('#social-container').offset().top)
$('#social').addClass('floating');
else
$('#social').removeClass('floating');
} );
} );
css
#social.floating {
position: fixed;
top: 0;
}
My demo jsfiddle where it works correctly
http://jsfiddle.net/jasondavis/6vpA7/3/
The only thing different on my live site is the div/id name is different. As you can see it is somewhat working on my live site except the flickering in and out of view as you scroll down the page.
Anyone have any ideas why this would happen on my live site and not on my jsfiddle demo?
You'll notice that in the example code, and your jsFiddle, your inner div (#social, #text-2 etc) have a wrapper/container div which is where the scrollTop() test is performed. On your live code, you've ommited this wrapper, and you are both checking the scrollTop() AND setting the floating class on the same element (#text-2). So every time you scroll, it swaps between the classes, because the scrollTop() conditional keeps checking the same element. You need to wrap #text-2 in another div and perform the conditional on that, just like in your examples.
Also, #text-2 is an li element yet has no parent ul. You should either give it a parent ul or change it to a div, otherwise it's invalid HTML.
Related
Here's the deal. I have a small div who is position: absolute;. I'm using stickyfloat plugin to make it scroll ONLY within the <section class="software-content"></section>, like the demo they show on the github page. However this absolutely positioned div, where the menu is, instead of scrolling with the browser, it instead scrolls ALL the way to the top. I have no idea why it is having this behaviour. Here's a fiddle demonstrating it:
http://jsfiddle.net/yisera/19amn27z/1/
Note: Summary the above fiddle for some reason, does not emulate the behaviour. The div.store-menu element should scroll within the section.softwate-content element and stop as the user scrolls down into the div.prefooter element.
Can anyone figure out what the problem is?
Try that way:
$(document).ready(function(){
t = function(){$('.scroll-store-menu').stickyfloat({duration: 400, lockBottom: true});}
setTimeout(t, 50);
});
http://jsfiddle.net/19amn27z/2/
So I'm trying to have a div slide in on pageload. It has an id of "#crazyslide" and is absolutely positioned to the right -800px in the css.
So I used this code in the head:
<script type="text/javascript">
$(document).ready(function() {
$("#crazyslide").animate( { right: '0px' }, 2000 );
});
</script>
Shouldn't this work?
No, you can't hide it off the edge of the screen. Devices like mobiles will let people scroll past the edge and it will look bad.
I recommend using this example of hiding and showing it with javascript.
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show
Yes it should. I just tested with your exact code, and it worked fine. There are ways to prevent a parent element from showing scroll bars for offscreen content.
Check to be sure your div is properly named: (console.log($("#crazyslide"));
Be sure a parent element's css isn't preventing the div from being
shown at all, such as a strange body width or something.
Be sure the div has content, and a set width.
*This turned out to be a load order issue where jquery was not yet defined when the animation code was called.
I'm trying to make a nav that scrolls to a corresponding <div> for my site. The corresponding divs are nested inside another div with a max-height and scrollbar. That's when my jquery tends to fail me.
He's a fiddle from another question that I related to my problem: JSFIDDLE
Notice when you click the button, it doesn't scroll to the correct div, and it scrolls to an awkward position when clicked again.
How do I get it to scroll to the correct div and not strangely scroll back when it is clicked again? Thanks!
$(".third").offset().top) alternates coordinates between 1108 and 0 when clicked. These are the correct positions of .third before each click. You have to take into account the current scroll position and the position of the .first div.
Replace the scrollTop line of code with the following:
scrollTop: $(".third").position().top - $('div.nest').position().top + $('div.nest').scrollTop()},
http://jsfiddle.net/pyL62v58/3/
The Code works, it seems to be a padding/margin issue.
Just add this line in the css, and it should work:
* {paddin:0;margin:0}
/* tested on Chrome 39+ on Win7 */
here the Updated fiddle
Why it jumps up again, is hopefully clear. Documentation to the "offset" function can be found here: jQuery-Doc
I have a Div in which there is a lot of other elements like (for ease of understanding using inline-styles)
<div id="MainItemList" style="width:300px; height:50px;">
<h4>This is a long content div</h4>
<ul> <-- A Long List of Li --> </ul>
<p>Click on an list item</p>
<other divs>...
</div>
And then there is a dynamic series of other divs and I want to make my MainItemList div to be positioned just below any div I click. Like
<div id="DynamicDivs">
<div id="Dyn1"></div>
<div id="Dyn2"></div>
<div id="Dyn3"></div>
<div id="Dyn4"></div> //And so one
</div>
So, now when I click on Dyn1 then my MainItemList div should be placed below Dyn1 div. I tried it with Jquery something like
var MainListDiv = '<div id="MinItemList"'>...A lot of Elements..</div>;
$(document).on('click','#DynamicDivs div', function()
{
$(this).append(MainListDiv);
});
$(document).on('onmouseout','#DynamicDivs div', function()
{
//Check and remove
$('#MainListDiv').remove();
});
but in this way everytime a user clicks on such a div, a long code is ran to append a lot of stuff into it and remove it when user moves out. On PCs it isn't a big issue but on mobile devices it gets to much slow and that is making everything worse and worse.
What can be the trick to do so? I have made my above code running for 1 month and now it is being a headache when user complains.
Actually there is a list of some kind of pictures and icons on which user clicks then that item is appended to dynamic div and MainListItem must has to be just below Dynamic div so user click and be removed when onmouseout from that.
In my JQuery code everytime div is created and removed. MainItemList div is created on page load and is permanent (created once on page load but hidden) so it just has to be become visible and moved under any div user click and hide when mouseout? And one more thing which is making matter even worse is that when page scrolls, moves Dynamic Divs that's important :(
As you know, unhiding #MainListItem and giving it a fixed position next to the hovered-over div should do the trick, paying care to provide a correct 'top' value. The complicated part is figuring what a correct 'top' value would be. Using your example alone, that would be: the dynamic-div's top + the dynamic-div's height + any margins/other-spacing above.
Here's the code to make it happen (I included a basic fade so it's a little more seamless):
var marginOffset = 0;
$(document).ready(function(){
marginOffset = $('#DynamicDivs').offset().top;
$('#DynamicDivs div').mouseover(function(){
$('#MainItemList').css({ position: 'fixed', top: $(this).position().top + $(this).height() + marginOffset}).stop(false, true).fadeIn('fast');
}).mouseleave(function(){
$('#MainItemList').stop(false, true).css({ display: 'none', position: 'static' });
});
});
I have NOT tested this across multiple mobile devices, so do your due testing please. However, this method should be significantly less taxing on mobile devices than the appending html method.
Furthermore, this only handles the pop-up with scrolling. If you wish to have the pop-up list be delayed before it disappears, or if you have some complex margins, you'll have to revise the code accordingly.
JS Fiddle example: http://jsfiddle.net/wXKfv/10/
EDIT:
After further discussion in the comments, here is the Javascript that solves the specific problem:
$(document).ready(function(){
$('#DynamicDivs div').mouseover(function(){
$('#MainItemList').css({ position: 'absolute', top: $(this).position().top + $(this).height()}).stop(false, true).fadeIn('fast');
}).mouseleave(function(){
$('#MainItemList').stop(false, true).css({ display: 'none', position: 'static' });
});
});
JS Fiddle example: http://jsfiddle.net/wXKfv/11/
Your approach is wrong. Put the MainItemList and DynamicDivs in to separate divs. Instead if appending to the existing div try replacing the MainListDiv. or put an .empty() before append()
-or-
Assuming you are loading the MainListDiv via ajax:
load the MainListDiv on to the body and hide it.
on click event for "DynamicDivs div" position the div with jquery and css under the DynamicDivs
I have an html5 page with a dropdown menu using mootools. It's working if I use the hide() and show() functions. But, I want the menu's to slide in and out, like this:
var m = e.getElement(".dropdown-menu, .sidebar-dropdown-menu");
if (e.hasClass('active')) {
m.hide();
e.removeClass('active');
} else {
m.show();
e.addClass('active');
}
Instead of hide and show I want slideIn and slideOut:
var m = new Fx.Slide(e.getElement(".dropdown-menu, .sidebar-dropdown-menu"));
if (e.hasClass('active')) {
m.slideOut();
e.removeClass('active');
} else {
m.slideIn();
e.addClass('active');
}
Working example: http://jsfiddle.net/wzzeZ/
Not working: http://jsfiddle.net/37V53/1/
It's not throwing errors; where do I look to fix it?
There are a few things going on here.
First of all, you're not seeing any errors because there are none. If you litter the code with console.log() calls, they all run.
It's a style issue that's preventing the menus from displaying.
The FX.Slide Class in Mootools doesn't seem to explicitly set the 'display' property of the element you're sliding to block. You still need to call .show() for it to work.
Next, if you check out the docs for FX.Slide, you'll notice that it creates a wrapper element to do the slide effect (the container is needed for the height animation, overflow: hidden, etc.)
Unfortunately that seems to be messing with the positioning of the menu, which is positioned relatively to its containing element - but the containing element has height and overflow: hidden styles which then hide the menu (not to mention, even if you could see it, it's in the right place).
To see what I'm talking about check out this updated Fiddle here: http://jsfiddle.net/37V53/2/
If you run that in Firefox with Firebug, and you hover your cursor over the element that's logged to the console, you'll see Firebug's blue hilight appearing where your element actually is being displayed - in the middle of the window, and hidden from view.
This is a combination of assumptions made in the MooTools Classes you're using working against each other; You'll probably be better off writing your own (simple) slide-out script using FX.Tween rather than FX.Slide.
I created a sample of how to do this based on the original Fiddle (that works) - http://jsfiddle.net/LkLgk/
Trick is to show the element to the browser but not the user (by setting visibility: hidden before display: block, grab the height, set height to 1px, visibility back to visible, then tween the height to the previously detected value.
Hope that points you in the right direction; remember, when in doubt, console.log everything!