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>
Related
hai iam trying to place hover in an dynamic image have to show a dynamic div, if remove mouse div has to be hidden, if i over to the div after hover on image div needs to remain visible if i move out from the div it has to be hidden i tried something like this, but not working as expected, If i over to image div appears if i place mouseout tag there it hides the div once i remove the mouse couldn't use the options in the div, if i place the mouse out in div once i remove the mouse from image the div not closing, sorry for bad english as solutions for this case?
function GoView_respond(id){
console.log('hovering');
document.getElementById("pending_req_"+id).style.display="block";
}
var cl=0;
function ExitView_respond(id){
console.log('not hovering');
if(cl!=1){
document.getElementById("pending_req_"+id).style.display="none";
}
}
<a onmouseover="GoView_respond('1');" onmouseout="ExitView_respond_one('1');">over_here</a>
<div class="respond_request" style="display:none;" id="pending_req_1" >
<p class="user_details" onmouseout="ExitView_respond('1');">asdfasdfasfsdffsadfsadfasf</p>
</div>
Below code may help to solve your problem:
Javascript code:
function GoView_respond(id){
console.log('hovering');
document.getElementById("pending_req_"+id).style.display="block";
cl = 1;
}
var cl=0;
function ExitView_respond(id){
console.log('not hovering');
if(cl!=1){
cl=0;
document.getElementById("pending_req_"+id).style.display="none";
}
}
function GoView_respond_one(id) {
setTimeout(function() {
if(cl == 1) {
cl = 0;
document.getElementById("pending_req_"+id).style.display="none";
}
}, 2000);
}
}
And Html code as below
<a onmouseover="GoView_respond('1');" onmouseout="GoView_respond_one('1');">over_here</a>
<div class="respond_request" style="display:none;" id="pending_req_1" >
<p class="user_details" onmouseover="GoView_respond('1');" onmouseout="ExitView_respond('1');">asdfasdfasfsdffsadfsadfasf</p>
</div>
Demo Link for your reference.
Am developing a WOrdPress Site and would to know:
How can I make it work that when I click on a menu item it leads me to that section and the content display perfectly on any screen size?
My menu works fine on big screens.When I click on about,it goes to the about section fine. But on mobile devices,this process is not working properly.
When I load the page,and click on the about menu item,it goes to the about section,but it skips a lot of the content of that section as the picture shows:
This is how it should look like when I click on the about menu item:
So. that happens with other sections as well.
This is what I did in jquery
$(document).ready(function(){
$(".burguer-nav").on("click", function(){
$("header nav ul").toggleClass("open");
});
$("#primary-menu > li:first-child > a").addClass("active-menu");
$("#primary-menu > li > a, ul#menu-menu-1 > li > a, .allcontacts a").on("click", function(event){
event.preventDefault();
var bookMark = $(this).attr("href").substring(1,$(this).attr("href").length);
bookMarkTag = $("a[name='"+ bookMark +"']");
var animateSpeed = 1000 ;
if(bookMark !== undefined) {
$('html,body').animate({scrollTop: bookMarkTag.offset().top}, animateSpeed );
}
});
});
var num = 150; //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('nav#site-navigation').addClass('fixed');
} else {
$('nav#site-navigation').removeClass('fixed');
}
});
This is the structure of the html:
<a name="home"></a>
<section id="home">
// content goes here
</section>
<a name="about-us"></a>
<section class="about container" id="about-us">
// content goes here
</section>
<a name="products-and-services"></a>
<section class="container products" id="products-and-services">
// content goes here
</section>
and so for the other sections.
in my website I'd like that a certain div will appear only when that portion of page is displayed and will fadeIn and fadeOut when I scroll.
My code is the following:
bio.html
<div ng-controller="bioCtrl" id="bio">
<h1 style="color:white">Here goes my biography</h1>
<div id="bioContainer" style="display: none">
<h3>My Name</h3>
<p>Hi my name is Pluto and here I write some stuff about my bio.</p>
</div>
</div>
and the javascript is the following
bio.js
angular.module('allApps').controller('bioCtrl', function($scope, $location, $window) {
$(window).bind("scroll", function() {
if ($(this).scrollTop() > 520) {
$("#bioContainer").fadeIn();
} else {
$("#bioContainer").stop().fadeOut();
}
});
});
this works fine, actually but, as you may see, I said the fadeIn must start when I scroll over 520px.
Now, 520px is fine for my computer's window but if I had a smaller or bigger monitor, it will have a different value so what I want is that the fadeIn starts when I am into the "#bio" section.
Get the top position of #bio using .offset().top and then just adjust you if statement to check if $(this).scrollTop() is greater than that.
$(window).bind("scroll", function() {
var fadeHere = $("#bio").offset().top
if ($(this).scrollTop() > fadeHere) {
$("#bioContainer").fadeIn();
}
// . . .
This will cause fadeIn when #bio gets to top of the window. If you want fadeIn when #bio first appears in bottom of window, use
var fadeHere = $("#bio").offset().top - $(window).height()
Here's a working fiddle: https://jsfiddle.net/zqwhnkns/
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
}
I'm creating a page with an image at the top, and a menu below. When the user clicks on on of the 3 menu buttons, the image slideUp and the page scrolls down so the menu is at the top of the page, then the right .content div fades in. The slideUp should only happen the first time the user clicks on of the buttons.
What the absolute best way to do this with jQuery? (no plugins)
I also need to know how I can't prevent it to fade in the page that is already visible if i click the same button twice?
I'm using rel instead of href, since the href made the page jump, even with return false.
This is what I have so far:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
imgVisible = true;
$('#mainmenu a').click(function(){
var $activeTab = $(this).attr('rel');
if(!imgVisible){
$('html:not(:animated),body:not(:animated)').animate({scrollTop:$('#mainmenu').offset().top-20},500);
$('.content').hide();
$($activeTab).fadeIn();
} else{
$('#imgholder').slideUp(500,function(){
imgVisible = false;
$('#mainmenu a[rel="'+$activeTab+'"]').click();
});
}
return false;
});
});
</script>
<div id="imgholder"><img src="image.jpg" /></div>
<div id="mainmenu">
<ul>
<li><a rel="#tab1"></a></li>
<li><a rel="#tab2"></a></li>
<li><a rel="#tab3"></a></li>
</ul>
</div>
<div id="container">
<div class="content" id="tab1">
content
</div>
<div class="content" id="tab2">
content
</div>
<div class="content" id="tab3">
content
</div>
</div>
The following code accomplishes what you need:
$('#mainmenu a').click(function(){
var myrel=$(this).attr('rel');
$('.content:not([id='+myrel+'])').hide();
$('#imgholder').slideUp(500,function(){
$('#'+myrel).fadeIn();
});
});
....
<li><a href='#' rel='tab0'></a></li>
I have removed the '#' sign from your rel='' piece ;-)
I am not sure why you would want to scroll the page. When a user clicks on the menu, he/she already has it focused (so it is visible inside the current viewport). But do you have a very large top image? If that is the case, let me know and I will modify the snippet. (Still, it depends on the amount of content below the menu visible when the page first loads.)
Also, for SEO reasons you might want to use the href instead of the rel attribute and create separate content holding pages. The following snippet would remove the navigation action.
$('#mainmenu a').each(function(){
var myhref = $(this).attr('href');
$(this).attr('href','#').attr('rel',myhref);
}).click(function(){
var myrel=$(this).attr('rel');
$('.content:not([id='+myrel+'])').hide();
//....etc
I think this is a great example of what your looking for: Organic Tabs
var imgVisible = true;
var $activeTab, $lastTab;
var $mainmenu = $('#mainmenu');
var offset = $mainmenu.offset().top - 20;
$mainmenu.find('a').click(function() {
$activeTab = $($(this).attr('rel'));
if (!imgVisible) {
// dont fire any events if already open
if ($lastTab.attr('id') == $activeTab.attr('id')) return false;
$lastTab.fadeOut('normal', function() {
$activeTab.fadeIn(500, function() {
$lastTab = $activeTab;
});
});
} else {
$('#imgholder').slideUp(500, function() {
imgVisible = false;
window.scrollTo(0, offset);
$activeTab.fadeIn(500, function() {
$lastTab = $activeTab;
});
});
}
return false;
});
I highly suggest adding <a href="#"> as this will not make the page jump when done properly and will ensure validation on your anchor links. Someone let me know if I missed something, it can be resolved quickly (or you can do it for me if you have an optimization or improvement).