How to create HTML+jScript Scroll Triggered Box - javascript

I have a blog at Blogger.com and I want to add a Scroll Triggered Box like Dreamgrow or Qoate Scroll Triggered Box of Wordpress. I referred Scroll Triggered Box with jQuery. I have created a HTML file and testing it but this is not working for me. May be I have mistaken somewhere. My coding is
<html>
<head>
<title>Scroll Triggered Box With jQuery</title>
<style type="text/css">
.Comments
{
font:georgia;
display:none;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$(window).scroll(function () {
var y = $(window).scrollTop();
var c = $('#comments').offset();
if (y > (c.top - $(window).height())) {
$('#the_box').fadeIn("slow");
} else {
$('#the_box').fadeOut('slow');
}
});
});
</script>
<div>
<!--My long post here-->
</div>
<div class="Comments" id="the_box">
This is the DIV that triggers I scroll down to Comments</br>
This is the DIV that triggers I scroll down to Comments</br>
This is the DIV that triggers I scroll down to Comments</br>
This is the DIV that triggers I scroll down to Comments</br>
This is the DIV that triggers I scroll down to Comments</br>
This is the DIV that triggers I scroll down to Comments
</div>
</body>
</html>
I am little weak in jScript. I don't know how jScript works.
How can I resolve my issue and get this working in my Blogger.com blog?

i can tell your code is haywire.
var a =$(window).height();
var num = c-y;
if (y > num){
do your function
}else{
do whatever
}

Related

I am having an issue with my "top of the screen" button script

I created a database to display information to my user. I decided to put a "To the top of the page" button to help my users scroll to the very top of the page. It worked fine when I used <script> tags but I decided to clean it up (hoping to code like the pros) and create an external js folder, but it stopped working when I did so. I could no longer see the button when I scrolled down the page. I have very little experience with scripts, so any help is much appreciated.
<head>
<link rel="stylesheet" href="styles.css">
<script src="/js/top.js"></script>
</head>
<body>
<button onclick="topFunction()" id="myBtn" title="Go to top">Return to Top</button>
js external file - top.js
//Get the button
var mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
You include the script before myButton is in the DOM so your call to document.getElementById("myBtn"); returns undefined. You should include your <script> tag at the end of the page (just before </html>, so all the of the DOM is loaded before you try to do any operations.
There are other methods to this as well for instance
document.addEventListener('DOMContentLoaded', function() {
// your code here
})
would only run your code after the DOM content is loaded.
I kept playing with it and took the suggestions mentioned (thanks). It is working now. I moved the <button> and <script> tags before the </body tag.
<button onclick="topFunction()" id="myBtn" title="Go to top">Return to Top</button>
<script src="js/top.js" defer></script>

Button that moves when scrolling disappears prematurely when clicked

I have a button that only appears when a certain section on my webpage has been reached, and it's supposed to disappear when the user scrolls past this section.
When the user clicks the button, extra information pops up in the section.
The problem is, this extends the page, and then the button--if near the end of the section--disappears.
//App.js stuff--I'm setting a manual distance here for when the button should disappear
$(document).ready( function() {
$("#detailButton").hide(); //hide your div initially
var dbSearch = $("#search").offset().top;
var contactPage = 4500;
$(window).scroll(function() {
if($(window).scrollTop() > dbSearch && $(window).scrollTop() < contactPage) { //scrolled past the other div?
$("#detailButton").show(); //reached the desired point -- show div
}
else{
$("#detailButton").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
//Index.html stuff
<section id="search" class="search">
...//detailButton should be shown here
</section>
<section id="contact" class="closing-header">
...//last part of page--detailButton show be hidden here
</section>
I need a way to ensure that the button only disappears when it moves on to the last section (#contact). How can I do this?
Calculate the offset in scroll function.
//App.js stuff
$(document).ready( function() {
$("#detailButton").hide(); //hide your div initially
$(window).scroll(function() {
var dbSearch = $("#search").offset().top;
var contactPage = 4500;
if($(window).scrollTop() > dbSearch && $(window).scrollTop() < contactPage) { //scrolled past the other div?
$("#detailButton").show(); //reached the desired point -- show div
}
else{
$("#detailButton").hide();
}
});
});
//Index.html stuff
<section id="search" class="search">
...//detailButton should be shown here
</section>
<section id="contact" class="closing-header">
...//last part of page--detailButton show be hidden here
</section>

Javascript not activating

I have a script that is made to add .fix class to a header tag with #header-wrap id once the page is scrolled a certain amount, but for some reason nothing happens on scroll.
HTML:
<header id="header-wrap">
<div id="redline"></div>
<div id="velkommen"></div>
<div id="header">
<div id="indre">
<h1 id="logo">MCBERGBYS</h1>
</div>
</div>
</header>
<script>
var wrap = $("#header-wrap");
wrap.on("scroll", function(e) {
if (this.scrollTop > 143) {
wrap.addClass("fix");
} else {
wrap.removeClass("fix");
}
});
</script>
I'm very new to javascipt so I bet something obvious is off. Any help is appreciated, thank you.
You need to bind your .on('scroll') event to the $(window), not to your #header-wrap element. This will check when the document is being scrolled up and down, as opposed to seeing when an individual element is being "scrolled" (like when you move up and down in a textarea).

jQuery 'on mousemove' not slide when mouse out of the frame

I want to make a slider with jquery. but when I pulled it out the frame "silderContainer", "sliders" will stop moving and when it returned through the "sliderContainer", "slider" will move again. What I want is how "slider" still moving when I pulled the mouse out of the frame.
Here the code:
<style>
body{
padding:60px;
height:800px;
}
.sliderContainer{
//position:relative;
width:200px;
background-color:#CCC;
height:30px;
margin-top:16px;
cursor:pointer;
}
.slider{
position:absolute;
width:50px;
height:30px;
background:#fa565a;
float:right;
}
</style>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).on('ready', function(){
function moveSlider(e){
e.preventDefault();
var pos = $(e.currentTarget).offset()
, posX = e.pageX - pos.left;
if(posX >= 0 && posX <= $(e.currentTarget).outerWidth()){
$('.slider').css('width', posX+'px');
}
}
$('.sliderContainer').on('mousedown', function(e){
moveSlider(e);
$(this).on('mousemove', function(e){
moveSlider(e);
});
}).on('mouseup', function(){
$(this).off('mousemove');
});
});
</script>
<div class='sliderContainer'>
<div class='slider'></div>
</div>
</body>
Any help would be greatly appreciated. Thank you.
It's because the target element is .sliderContainer. So think about it like this - when you're on a web page and you hold down your mouse over any normal form button and then move your mouse in and out of it, the focus is lost on the object.
http://www.w3schools.com/html/html_forms.asp
Look for the 'Submit Button' section and test it out.
What your logic says is that while the focus is on the container element and a mouse move event is registered, then the javascript can respond to it. But as soon as focus is lost (eg. moving outside of the region of the element) then it can't respond anymore.
Instead of attaching events to the container element itself, you could register them with the document or window, or another object that has a larger space behind it, so that focus is maintained.
Here's an example:
Losing MouseUp event if releasing not over the same element

JavaScript event on scroll up or scroll down

Is it possible to write a JavaScript to make an action when a DIV Layer's scroll bar is manually scrolled up or scrolled down?
If so please give me a hint to implement a simple such as alert box saying you scrolled up and you scrolled down.
You can simple use onscroll event of java-script.
OnScroll Event Reference : http://www.w3schools.com/jquery/event_scroll.asp
Here is example,
<head>
<script type="text/javascript">
function OnScrollDiv (div) {
var info = document.getElementById ("info");
info.innerHTML = "Horizontal: " + div.scrollLeft
+ "px<br/>Vertical: " + div.scrollTop + "px";
}
</script>
</head>
<body>
<div style="width:200px;height:200px; overflow:auto;" onscroll="OnScrollDiv (this)">
Please scroll this field!
<div style="height:300px; width:2000px; background-color:#a08080;"></div>
Please scroll this field!
<div style="height:300px; width:2000px; background-color:#a08080;"></div>
Please scroll this field!
</div>
<br /><br />
Current scroll amounts:
<div id="info"></div>
</body>
Working copy here : http://jsbin.com/iledat/2/edit
Try jquery scroll event.
$('div').scroll(function(){alert('scrolled!')})

Categories