scroll() event not firing when attached to a div - javascript

<div class="row">
<div class="col-md-8" id="homeview-story"></div>
<div class="col-md-4" id="homeview-stream">
<div id="log"></div>
</div>
</div>
#homeview-story {
overflow: scroll;
width: 72%;
height: 800px;
}
#homeview-stream {
overflow: scroll;
width: 28%;
height: 800px;
}
$(document).ready(function() {
$('#homeview-story').scroll(function() {
$("#log").append("<div>Handler for .scroll() called.</div>");
});
});
Objective is to implement infinite scrolling for both homeview-story and homeview-stream separately to load respective data. The scroll function works on the window obj ($(window).scroll) but is not working with specific div.

"scroll" only works when the element is actually scrollable / scrolling. If you want scroll data regardless of element size, you can use "wheel" if your browser supports it.
document.addEventListener("wheel", function(event) {
console.log(event);
});

The issue is that, #homeview-story isn't overflowing, So it isn't scrolling. First of all it should have some content larger than that for it to scroll, which is missing in your code.
Here's a Demo, where #logo has a height greater than it's parent #homeview-stream and we're listening to it's scroll.

Well I can't see what's not working for you. Here is a working fiddle
Have to paste some code so:
$(document).ready(function() {
$('#homeview-story').scroll(function() {
$("#log").append("<div>Handler for .scroll() called.</div>");
});
});

Are you actually scrolling inside the #homeview-story div? So not the page itself, because the jquery scroll() event obvious needs that (http://api.jquery.com/scroll/)
Are you loading your custom CSS after the bootstrap CSS? Otherwise your div might still not be set to overflow:scroll. Hmm, on second thought it probably would since you are referencing an ID. Just to make sure then.

Put a inner div in #homeview-story
<div class="row">
<div id="homeview-story">
<div class="inner"></div>
</div>
<div id="homeview-stream"></div>
</div>
$(document).ready(function() {
$('#homeview-story').bind('scroll',function() {
var html = "<div id='log'>Hello</div>";
$('#homeview-stream').append(html);
});
});
Hope this demo can help you in what you want to achieve.

I was facing the same problem as you do, and I solved it by putting that specific selector that I want to be triggered by the scroll() function inside the $(window).scroll() function like this:
$(window).scroll(function() {
$('#homeview-story').scroll(function() {
$("#log").append("<div>Handler for .scroll() called.</div>");
});
});
I'm not sure if this solution is correct way of fixing this, but works fine for me.

Related

Where to add a script that acts on the scrolling action?

I am trying to make a div visibe only after a certain scroll length.
There are already some threads here on Stackoverflow about it and so I have tried to use the suggested scripts listed in the answers, but no one of them seems to work.
So, I suppose that I don't know how to use them.
I have put this block into the head, surrounded by the two script tags:
function scroll_bar() {
if (document.body.scrollTop > 700) {
document.getElementById("navigation_bar").show();
}
else
{
document.getElementById("navigation_bar").hide();
}
}
And in the body, I have a div (the one that I want to make visible/hidden) with these attributes:
<div onload="scroll_bar();" class="container" id="navigation_bar" style="position: fixed; z-index: 1; background-color: white; height: 50px; width: 100%;"></div>
What is wrong over here?
(I am using Bootstrap anyway, that "container" class comes from it.)
You have to add an event listener to the 'scroll' event: window.addEventListener('scroll', scroll_bar). Also in your handler I would use window.pageYOffset instead of document.body.scrollTop.
Instead of putting your <script> in your <head>, put in just before your closing body tag (</body>). This will make sure that content is loaded before the script and therefore your script should run correctly.
<p>I'm some content!</p>
<script>console.log('JavaScript!');</script>
</body>
Also, you need to make sure that your script function fires on the body scroll event.
Are U sure it's good??
document.getElementById("navigation_bar").show();
"document.getElementById("navigation_bar")." is javascript.
"show()" is jquery.
try:
document.getElementById("navigation_bar").style.display = 'block'/'none'
or
$("#navigation_bar").show();
You misplaced your event to div.
please move your event BODY
code
<body onload="scroll_bar();" >
<div class="container" id="navigation_bar" style="position: fixed; z-index: 1; background-color: white; height: 50px; width: 100%;"></div>
</body>

Can't get height of div to adjust

I'm in a pickle.
I'm working on a layout, and I need the main div to adjust to the window size, mainly to get that middle div to make a scrollbar upon resizing. It's acting as a table cell currently, which is why it's forcing itself to simply become taller instead of using a scrollbar. It's in a containing div in the efforts to keep from doing this though.
<div id="ALL">
<div id="VOLTRON">
<div id="MAINSIDEBAR">ok</div>
<div id="CONTENT">
<div id="TICKER">please</div>
<div class="WRAP">
<div id="POSTSGOHERE">
<p>Lorem ipsum dolor sit amet, ...</p>
</div>
<div id="RIGHTSIDEBAR">WELL THEN.</div>
</div>
</div>
</div>
</div>
I resorted to Jquery, and though I found a code for this very thing, it's not working.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type='text/javascript'>
$(function(){
$('#ALL') .css({'height': (($(window).height()))+'px'});
$(window).resize(function(){
$('#ALL') .css({'height': (($(window).height()))+'px'});
});
});
</script>
I've tried setting a max height, I've tried setting it to vh instead of percent, I've tried containing it, and I feel like I've exhausted a pretty decent amount of time on this conundrum myself to finally get help.
Here is the entire code, in case that also helps. I'm certain that the way I'm doing this is the reason it's not working.
So, any idea for a fix for this? And why what I'm trying isn't working?
EDIT: I need to specify this again: I want the entire "table" to only fit the window, but the purple div is the one that should scroll. The problem is, though I've set it to overflow-y: scroll; it just changes the size of the entire container. The entire table just grows past the window to compensate for the overflow.
Your code looks good, you just don't see it as it takes the exact size of the window. You would see it better if you subtracted a little off of it and added the overflow-y:scroll to #ALL instead of the container:
#ALL {
background-color: red;
max-width: 100%;
max-height: 100%;
overflow-y: scroll;
}
$(function () {
$('#ALL').css('height', $(window).height()-50 + 'px');
$(window).resize(function () {
$('#ALL').css('height', $(window).height()-50 + 'px');
});
});
HERE IS A DEMO
EDITED: Following your edit, and I know this would threw off your layout completely, but the only thing that worked for me, if you wanted the purple one to move only, was to remove the table-cell display and set the height to the container instead of ALL, and adding the scroll only to that:
#ALL {
background-color: red;
max-width: 100%;
max-height: 100%;
}
#POSTSGOHERE {
background-color: purple;
max-height: inherit;
overflow-y: scroll;
}
$(function () {
$('#POSTSGOHERE').css('height', $(window).height()-50 + 'px');
$(window).resize(function () {
$('#POSTSGOHERE').css('height', $(window).height()-50 + 'px');
});
});
I updated the demo
Keep the max-height and set
overflow:scroll;
This should do the trick.
PS: Also try adding it to the Wrap class.
You think to display the #all div as an iframe style in fullscreen?
like here:
You can check it here
You were just missed one line of CSS.
#all
overflow: scroll
SASS syntax
NOTE: pls use small letter div selectors dont use capital ones, thanks ;)
This might work better
Place the window height in a var
so the div can read it, and rewrite the var when the user resizes
$(document).ready(function(e) {
var heightt = $(window).height();
$('#ALL').css('height',heightt);
$(window).resize(function(){
var heightt = $(window).height();
$('#ALL').css('height',heightt);
});
});

Fixing the position of a div on webpage

I have a div whose position has been fixed. Everything is fine till the window is re-sized. On re-size, when we scroll to the rightmost part of the webpage, the fixed div still remains at the left-most end of screen. I wish it to scroll left along with the window, but not scroll down along with the window.
If I am unclear in expressing my doubt. You can have a live demo here.
Search for any product say Apple Ipod Touch there. Once the results are displayed , resize window and scroll to rightmost part .
Can anyone suggest some CSS or Javascript to resolve the same.
Thanks !
I would restructure your layout and remove position fixed. For example something like this. Obviously this isn't exactly like your code. But the concept is the same. If you have your div with the control inside of the same container as the results and the history, it should then move with it.
#wrapper {
width:960px;
margin:0 auto 0 auto;
}
#left-col,
#right-col {
width:100px;
float:left;
}
#mid-col {
width:710px;
float:left;
}
<!-- holds your column containers -->
<div id="wrapper">
<!-- your control -->
<div id="left-col">
</div>
<!-- your search results -->
<div id="mid-col">
</div>
<!-- your history -->
<div id="right-col">
</div>
</div>
Either use CSS Media Queries or Javascript. A quick way is on Jquery $(window).resize method.
I think you just need to remove
position: fixed from #completeSlider
at least that worked for me on chrome.
EDIT:
then I'd say you need to use JQuery to handle this. You can't have both a fixed positioning and still relative to other elements. Still remove position: fixed as mentioned above and add some JQuery magic like follows:
$(window).scroll(function() {
$('#completeSlider').offset({ top: $(window).scrollTop(), left: 0});
});
Seems like the standard $ for jQuery is reserved for some other function on your page... try this:
jQuery(window).scroll(function() {
jQuery('#completeSlider').offset({ top: jQuery(window).scrollTop(), left: 0});
});

Handle mouseenter/mouseleave on a div and nested elements with jQuery

I want to display a toolbar if the mouse is over a div or any of the div's nested elements. But the following solution with jQuery 1.7 only works if the mouse is over the div directly what is only possible if I add a padding to the item css class.
<head>
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<style type="text/css">
.toolbar { display: none; }
.item { padding: 1px; } /* doesn't work without padding! */
</style>
<title>Demo</title>
</head>
<body>
<div class="section">
<div class="item">
<p class="toolbar">TOOLS</p>
<p>content</p>
</div>
<div class="item">
<p class="toolbar">TOOLS</p>
<p>content</p>
</div>
</div>
<script type="text/javascript">
$(".section").on(
"mouseenter",
".item",
function(event) {
$(event.target).children('.toolbar')
.show(100);
}
)
$(".section").on(
"mouseleave",
".item",
function(event) {
$(event.target).children('.toolbar').hide();
}
)
</script>
</body>
A padding of 1px wouldn't be so bad, but it leads to bigger padding at the top and bottom and this workaround doesn't work properly - especially if the mouse enters from the left or right side.
How can I handle mouseenter and mouseleave events without the padding trick?
It seems that the event.target is not the div - changing to $(this) fixes the problem -> http://api.jquery.com/event.target/
http://jsfiddle.net/manseuk/StUvz/
This fiddle I created works fine without padding. Maybe you just need to tweak something small (like a width inherited in the CSS chain).
If that doesn't answer it for you, give us a fiddle that reproduces the problem so we can modify it for you.
This one work without the padding, too http://jsfiddle.net/rkpVW/ you can directly do a on(".item") i think it's the easiest solution for binding elements.
Edit : http://jsfiddle.net/rkpVW/1/ using live for dynamic content
Using $(event.currentTarget) will clear up the issue and will behave the same as $(this) only better as it will continue to work in situations where this is something else:
init: function()
{
$("button").on("mouseenter", this.proxy(function(event)
{
this.classMethod();
console.log( event.currentTarget );
}) );
}
As you can see, event.currentTarget is this:
$("button").on("mouseenter", function(event)
{
console.log( event.currentTarget === this );
});

How to make div slidedown

Sorry I'm really new to JQUery and would like to know how do I make an Div Slide Down?
JQuery is confusing to me and really just need help
Try this:
HTML:
<button id="click_to_slide"></button>
<div id="me_down" style="display:none;">I'm Sliding down</div>
Javascript:
$('#click_to_slide').click(function () {
$('#me_down').slideDown();
});
And Optional CSS:
#me_down {
color:white;
width: 100px;
height: 100px;
background-color: #000;
}
Try this, and it will work :)
HTML
<a id="click_to_slide">Click To Slide Down</a>
<div id="slide_me_down"></div>
CSS
#slide_me_down {
display: none;
width: 100px;
height: 100px;
background-color: #000;
}
JAVASCRIPT
$(document).ready(function () {
$('#click_to_slide').live('click', function () {
$('#slide_me_down').slideDown();
});
});
Here is a jsfiddle of the above code: http://jsfiddle.net/EfmeW/
Also if you want to have the div slideUp and Down depending on whether or not the div is already visible or not you can use .slideToggle() instead of .slideDown()
To slide an element down, just use this:
<script type="text/javascript">
$(document).ready(function() {
$('#test').slideDown();
});
</script>
<div id="test" style="background-color:lightgrey;border:2px solid grey;padding:10px;">Hello, this will slide down.</div>
Check out an example here: http://jsfiddle.net/WvVf3/1/
Hope this helps.
When you say slide down, do you mean:
make the div appear by sliding down: $('#me').slideDown();
or
make the div slide down: $('#me').css('position','relative').animate({top:'+200'},'slow');
http://jsfiddle.net/rkw79/AnTDk/5/
Use the following JQuery. You'll need to have a div with class myDivClass as JQuery uses CSS-selectors to find elements. The document.ready part is to ensure your page is fully downloaded / parsed before the Javascript is executed (this is a crucial step).
$(document).ready(function() {
$('.myDivClass').slideDown();
});
Here is a JSFiddle as an example to have a div slide down on a button press.
P.S. If you are using Firebug or Chrome right, you can try this out right now on this page!
$('#hlogo').hide().slideDown('slow');

Categories