dynamic scroll bar division with ajax - javascript

im trying to have a dynamic scroll bar with ajax in it, meaning i try and update the division with the scroll bar via ajax, im having a little trouble with this, im using a sample scroll bar i downloaded called Tiny Scrollbar: http://www.baijs.nl/tinyscrollbar/
you can have a preview of mine here : http://www.luminusconsult.com/apps/testing/index.html
this is what i have in the index page...
<div id="reloaded">
<div id="scrollbar1">
<div class="scrollbar"><div class="track"><div class="thumb">
<div class="end"></div></div></div></div>
<div class="viewport">
<div class="overview">
....
</div>
</div>
</div></div>
<script type="text/javascript">
$(document).ready(function(){
$('#scrollbar1').tinyscrollbar();
});
</script>
and when i try and reload the "reloaded" division with ajax...
<div id="scrollbar1">
<div class="scrollbar"><div class="track"><div class="thumb">
<div class="end"> </div></div></div></div>
<div class="viewport">
<div class="overview">
....
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#scrollbar1').tinyscrollbar();
});
</script>
is there any way i can solve this problem?

Add the tinyscrollbar update method in the success callback of your ajax request.
$('#scrollbar1').tinyscrollbar_update();

Related

How can I load a separate html page into my main index.html? I imagine it can be done by selecting an element id with jquery

Right now I am planning on using this on every page, but it is not loading the nav and I'm not sure why.
<!-- This is in my main HTML that I want nav in-->
<div id="nav-placeholder"></div>
<script>
$(function(){
$("#nav-placeholder").load("NavBar.html");
});
</script>
<!-- this is the NavBar.html file-->
<header>
<div class="header-row">
<div class="header-column d-lg-none">
<div class="header-row">
<h1 class="font-weight-semibold text-7 mb-0">
<a href="index.html" class="
text-decoration-none text-color-light
custom-primary-font
">Dynamic</a>
</h1>
</div>
</div>
</div>
</header>
it's not a terrible practice, depending on what components you are going to use inside this method. E.g., Navbars and footers, no problem.
Have a look on this question: How to separate html text file into multiple files?

Detect body scroll offset

I need to put the scrolling behaviour on the body rather than the HTML, due to using CSS Parallax. However, I have got an issue with adding sticky classes to my header using JavaScript.
I need to be able to detect that the body has scrolled, this works fine, however i'm unable to get the offset that the user has scrolled to!
I have tried everything when is online, for example:
$('body').scrollTop()
document.body.scrollTop
document.getElementsByTagName('body')[0].pageYOffset
None of this is working, it always returns 0!
Edit:
I can't modify any of the HTML apart from what is between the comments.
<html>
<body>
<div itemscope itemtype="http://schema.org/AutoDealer">
<div id="main-wrap" class="parallax">
<div class="row">
<div class="main twelvecol">
<!-- Editable -->
<div>
<div class="row-block finance parallax__group">
<div class="parallax__layer--back parallax__layer"></div>
<div class="wrapper">
<div class="container">
<div class="parallax__layer--base parallax__layer">
<p>This is all of the top level content</p>
</div>
</div>
</div>
</div>
</div>
<!-- END Editable -->
</div>
</div>
</div>
</div>
</body>
</html>
here is a codepen showing the various examples not working
https://codepen.io/anon/pen/RgPrQv
You are looking for
$(window).scroll(function() {
$(window).scrollTop();
});

Want to show the video by jquery but click event doesn't work

I am trying to show an video by using click event, but the click event doesn't trigger.
Here is the code:
<div id="video-section">
<div class="radial-progress">
<div class="r-circle">
<div class="mask full">
<div class="fill"></div>
</div>
<div class="mask half">
<div class="fill"></div>
<div class="fill fix"></div>
</div>
</div>
<div class="inset">
<i class="fa fa-caret-right"></i>
</div>
</div>
<iframe src="//player.vimeo.com/video/92371445"></iframe>
</div> <!-- end video-section -->
And this is my jquery codes
$('#video-section .radial-progress').on('click', function() {
$('#video-section > iframe').show();
});
You can see my live example here, it doesn't works for showing video.
Updated: I fixed myself. What happened is when I put the code in the last js file, there is another js get errors so it can't load this code. I also added a little code to make it play when play button is clicked.

How can I link the scrolling of two divs that are dynamically loaded without using .on?

I would like to link the scrolling of the wrapper1 and wrapper2:
<div class="wrapper1">
<div class="div1">
</div>
</div>
<div class="wrapper2">
<div class="div2">
<div data-ng-class="{'hidden': loading!=0 }"
data-ng-form="gridForm">
<table class="form grid table" style="height: 600px; width: 1500px;">
</table>
</div>
</div>
</div>
The above is loaded dynamically and from what I have read I cannot use the .on jQuery method with scroll. So I would like to use something like this:
<div id="mydiv" onscroll='myMethod();'>
function myMethod(){ alert(1); }
Can someone give me some suggestions as to how I can make the scrolls work at the same time using the onscroll call and methods?
Please note that this is not a duplicate question to:
How can I get two scroll bars to scroll at the same time with jQuery and .on?

jQuery: Gallerific Half Working

I'm trying to get the jQuery gallerific plugin working at http://justrecip.es/ViewRecipes.aspx?recipeid=S9ML32WQO3&act=view . The gallery is loaded correctly, but neither the thumb grid nor the navigation (next/previous image) buttons work. There are no script errors, but it seems this is a JavaScript problem of some sort.
Try this
<div class="gallery-content">
<!-- Move controls above slideshow -->
<div id="controls" class="controls"></div>
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
<div id="caption" class="caption-container">
<div class="photo-index"></div>
</div>
</div>
jsFiddle example

Categories