First, why isn't http://jsfiddle.net/s4eMT/ working?
Second, the js-code that I put in jsfiddle is working in my project but I have a some kind of browser-support issue.
When I run the website in Chrome it works as expected, it gets fixed when you scroll down to the navbar, when I run it in Safari and Firefox it sets the navbar fixed but also shrinks the navbar way smaller and floating left. I can't figure out what it is that's not supported by the last mentioned browsers.
Here's my code:
HTML
<div id="navbar-wrapper">
<div class="navbar">
<div class="navbar-inner hidden-phone">
<ul class="nav">
<li #if(page=="services"){class="active"}>#Messages("NavServices")</li>
<li #if(page=="work"){class="active"}>#Messages("NavWork")</li>
<li class="logo hidden-phone"><img src="#routes.Assets.at("images/HF_logo_inverted.png")" class="img-circle" alt="Home" /></li>
<li #if(page=="wall"){class="active"}>#Messages("NavWall")</li>
<li #if(page=="contact"){class="active"}>#Messages("NavContact")</li>
</ul>
</div>
<div class="navbar-inner visible-phone">
<ul class="nav phone-only">
<li #if(page=="services"){class="active"}>#Messages("NavServices")</li>
<li #if(page=="work"){class="active"}>#Messages("NavWork")</li>
</ul>
<ul class="nav phone-only">
<li #if(page=="wall"){class="active"}>#Messages("NavWall")</li>
<li #if(page=="contact"){class="active"}>#Messages("NavContact")</li>
</ul>
</div>
<div id="language" class="hidden-phone">
<img src="#routes.Assets.at("images/gb.png")" />
<img src="#routes.Assets.at("images/se.png")" />
</div>
</div>
</div>
CSS
#navbar-wrapper {
position: relative;
min-width: 100%;
border:1px solid red;
}
JAVASCRIPT
$(document).ready(function () {
var stickyNavTop = $('#navbar-wrapper').offset().top;
var stickyNav = function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('#navbar-wrapper').css({
'position': 'fixed',
'top': '0'
});
alert('afa');
} else {
$('#navbar-wrapper').css({
'position': 'relative'
});
}
};
stickyNav();
$(window).scroll(function () {
stickyNav();
});
});
What am I missing?
regards,
Related
Im using Bootstrap 4 and for some reason the scroll to div function is only working on mobile phone/smaller screen sizes.
Javascript code:
<script>
$(".navbar-nav li a").click(function(event) {
if (!$(this).parent().hasClass('dropdown'))
$(".navbar-collapse").collapse('hide');
}); </script>
Navbar link:
<li class="nav-item">
<a class="nav-link" href="#about-us"><button type="button" class="btn btn-green">About</button></a>
</li>
Div:
<div class="about" id="about-us">
<div class="container">
test
</div>
</div>
navbar-brand class is overlapping the navbar-nav.So add z-index to the navbar-nav in your html page i.e
<ul class="navbar-nav ml-auto" style="z-index:1;">
You can add following to your css file:
.navbar-brand.mx-auto {
width: 216px;
right: 0;
left: 0;
}
I have created bootstrap tab and their corresponding tab-content as per http://getbootstrap.com/javascript/#tabs
The html snippet is given below.
<ul class="nav nav-tabs nav-justified">
<li class="active" role="presentation">
<a href="#tab1" data-toggle="tab" aria-controls="tab1" role="tab">
</li>
<li>
<a href="#tab2" data-toggle="tab" aria-controls="tab2" role="tab">
</li>
</ul>
<div class="tab-content">
<ul class="list-group media-list media-list-stream tab-pane active" id="tab1" role="tabpanel">
</ul>
<ul class="list-group media-list media-list-stream tab-pane" id="tab2" role="tabpanel">
</ul>
</div>
How to check if the tab-content has been scrolled to it's bottom.
The usual solution as mentioned in https://www.sitepoint.com/jquery-check-div-scrolled/ doesn't seem to work.
$(document).ready(function(){
$(tab1).bind('scroll',chk_scroll);
});
function chk_scroll(e)
{
var elem = $(e.currentTarget);
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight())
{
console.log("bottom");
}
}
I have two solution for your answer.
Check the example code here CODEPEN.
1. If you do not fix the height of tab-content div then try this code(don't include CSS):
JS:
$(window).scroll(function() {
if (isScrollBottom()) {
alert('scroll end');
}
});
function isScrollBottom() {
var documentHeight = $(document).height();
var scrollPosition = $(window).height() + $(window).scrollTop();
return (documentHeight == scrollPosition);
}
2. If you fix the height of tab-content, the try this code:
JS:
$("#myTabContent").scroll(function (e) {
e.preventDefault();
var elem = $(this);
if (elem.scrollTop() > 0 &&
(elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight())) {
alert("At the bottom");
}
});
CSS:
.tab-content {
height:150px;/*set height here*/
overflow:auto;
}
I hope this resolves your issue.
Enjoy :)
The code below is scrolling down just fine but not to top. It gets stuck when it goes to the bottom or top. But if dont be so close to the bottom and top it work fine.
It seems like if you clicks more time that it should be when you rich the bottom you have to click the same number to getting scroll to top.
Any clue?
var scrolled = 0;
$(function () {
$("#upClick").on("click", function () {
console.log("upClick");
scrolled = scrolled - 100;
$(".nav").animate({
scrollTop: scrolled
});
});
$("#downClick").on("click", function () {
console.log("downClick");
scrolled = scrolled + 100;
$(".nav").animate({
scrollTop: scrolled
});
});
});
.arrow-button {
cursor: pointer;
}
.arrow-button:hover {
position: relative;
top: 1px;
left: 1px;
border-color: #e5e5e5;
cursor: pointer;
}
#sidebar {
width: 880px;
font-weight: bold;
}
.nav {
max-height: 150px;
overflow-y:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row second-row">
<div class="col-md-11">
<div id="sidebar" role="navigation" style="float:left">
<div class="well sidebar-nav">
<ul class="nav">
<li class="active">Maths</li>
<li>English</li>
<li>Art and Design</li>
<li>Drama</li>
<li>Music</li>
<li>Physics</li>
<li>Chemistry</li>
<li>Biology</li>
<li>Home economics</li>
<li>Physical Education</li>
<li>Computing Science</li>
<li>French</li>
<li>German</li>
<li>Mandarin</li>
<li>Religious Education</li>
<li>Modern Studies</li>
<li>Geography</li>
<li>History</li>
<li>Creative computing</li>
<li>Craft, Design and Technology</li>
</ul>
</div><!--/.well -->
</div>
</div>
<div class="col-md-1" style="padding-left:35px;">
<img src="images/arrow-up.png" width="70" class="arrow-button" id="upClick" />
<img src="images/arrow-down.png" width="70" style="margin-top:50px;" class="arrow-button" id="downClick" />
</div>
</div>
well... it works :3
little tip:
.stop() animation before playing another.
check max and min value of scroll
var scrolled = 0;
$(function () {
$("#upClick").on("click", function () {
console.log("upClick");
scrolled = scrolled - 100;
if(scrolled < 0) scrolled = 0;
$(".nav").stop().animate({
scrollTop: scrolled
});
});
$("#downClick").on("click", function () {
console.log("downClick");
scrolled = scrolled + 100;
if(scrolled > $(".nav").prop("scrollHeight"))
scrolled = $(".nav").prop("scrollHeight");
$(".nav").stop().animate({
scrollTop: scrolled
});
});
});
.nav {
max-height: 150px;
overflow-y: auto;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="row second-row">
<div class="col-md-11">
<div id="sidebar" role="navigation" >
<div class="well sidebar-nav">
<ul class="nav">
<li class="active">Maths</li>
<li>English</li>
<li>Art and Design</li>
<li>Drama</li>
<li>Music</li>
<li>Physics</li>
<li>Chemistry</li>
<li>Modern Studies</li>
<li>Geography</li>
<li>History</li>
<li>Creative computing</li>
<li>Craft, Design and Technology</li>
</ul>
</div>
</div>
</div>
<div class="col-md-1" >
<img src="images/arrow-up.png" width="70" class="arrow-button" id="upClick" />
<img src="images/arrow-down.png" width="70" class="arrow-button" id="downClick" />
</div>
</div>
When you trying scroll always remember it should not go in negative value.
At the start of your program it goes in -ve value, add condition
$("#upClick").on("click", function () {
console.log("upClick");
scrolled = scrolled - 100;
if(scrolled>0){
$(".nav").animate({
scrollTop: scrolled
});
}
});
I've seen lot of infinite scroll but it basically makes an ajax call to the next page and displays that when the window reaches a certain breaking point.
I'm dealing with HTML code that has 100 light-weight li elements already loaded on the page but for UI purposes, we want to lazy-load the divs as they are scrolled to instead of showing them all at once. The basic structure looks something like this :
<ul class="container">
<li class="element">one</li>
<li class="element">two</li>
<li class="element">three</li>
<li class="element">four</li>
<li class="element">five</li>
<li class="element">six</li>
<li class="element">seven</li>
.... 100 times
</ul>
If anyone could suggest me the simplest way to achieve this jQuery functionality.
Ok, finally it works as shown in this JSFIDDLE
//initialize
winHeight = $(window).height();
liHeight = $('li.element').height();
next = Math.ceil(winHeight / liHeight);
ulLength = $('li.element').length;
$('html, body').animate({ scrollTop: 0}, 0);
//hide elements not in the view as the page load for the first time
$('li.element').each(function () {
if ($(this).offset().top > winHeight) {
$(this).fadeOut(0);
}
});
//show elements on scroll
$(window).scroll(function (event) {
scrollPos = $(window).scrollTop();
if (scrollPos + winHeight == $(document).height()) {
$('#li' + next).fadeIn();
next++;
}
});
* {
padding:0;
margin:0;
}
.container {
padding:0;
list-style-type:none;
}
li.element {
height:100px;
background-color:#BBB;
border-bottom:1px dotted gray;
font-size:3em;
padding-top:10px;
text-align:center;
color:#444;
text-shadow:#222 0 1px 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="container">
<li id="li1" class="element">1</li>
<li id="li2" class="element">2</li>
<li id="li3" class="element">3</li>
<li id="li4" class="element" style="height:300px;">4</li>
<li id="li5" class="element">5</li>
<li id="li6" class="element">6</li>
<li id="li7" class="element">7</li>
<li id="li8" class="element">8</li>
<li id="li9" class="element">9</li>
<li id="li10" class="element">10</li>
<li id="li11" class="element">11</li>
<li id="li12" class="element">12</li>
<li id="li13" class="element">13</li>
<li id="li14" class="element">14</li>
<li id="li15" class="element">15</li>
<li id="li16" class="element">16</li>
<li id="li17" class="element">17</li>
<li id="li18" class="element" style="height:600px;">18</li>
<li id="li19" class="element">19</li>
<li id="li20" class="element">20</li>
<li id="li21" class="element">21</li>
<li id="li22" class="element"> and so on till 100 </li>
</ul>
$(document).ready(checkWidth);
$(window).resize(checkWidth);
function checkWidth() {
var $window = $(window);
$("pre").text($window.width());
if ($window.width() < 321) {
$('.grve-tablet-column-1-4')
.removeClass('grve-tablet-column-1-2').addClass('grve-tablet-column-1');
}
else {
$('.grve-tablet-column-1')
.removeClass('grve-tablet-column-1').addClass('grve-tablet-column-1-2');
}
}
<footer id="grve-footer">
<div class="grve-container">
<div id="grve-footer-area" class="grve-section" data-section-type="fullwidth-background" style="visibility: visible; margin-left: 158px; margin-right: 158px;">
<div class="grve-row">
<div class="grve-column-1-4 grve-tablet-column-1-2"><div id="text-3" class="grve-widget widget widget_text"> <div class="textwidget"><ul class="footerlist">
<li class="maintitle">Home</li>
<li class="title">Features</li>
<li>Venue Setup</li>
<li>Visitor's App</li>
<li class="title">Pricing</li>
<li>Venue Plan Request</li>
<li>Venue Hardware</li>
</ul></div>
</div></div><div class="grve-column-1-4 grve-tablet-column-1-2"><div id="text-2" class="grve-widget widget widget_text"> <div class="textwidget"><ul class="footerlist">
<li class="maintitle">Support</li>
<li> FAQ</li>
<li class="secondtitle">Try Sine for Free<br>Enterprise Login</li>
<li>Privacy Policy</li>
<li>Terms of Use</li>
</ul></div>
</div></div><div class="grve-column-1-4 grve-tablet-column-1-2"><div id="text-4" class="grve-widget widget widget_text"> <div class="textwidget"><ul class="footerlist">
<li class="maintitle">Free Download</li>
<li><img src="http://www.sine.co/wp-content/uploads/2014/11/appstorebutton.png"></li>
<li><img src="http://www.sine.co/wp-content/uploads/2014/11/googleplaybutton.png"></li>
</ul></div>
</div></div><div class="grve-column-1-4 grve-tablet-column-1-2"><div id="text-5" class="grve-widget widget widget_text"> <div class="textwidget"><ul class="footerlist">
<li class="mail">info#sine.co</li>
<li class="skype">sinehelp</li>
<li class="phone">+61 8 8121 5956</li>
<li class="twitter">SineHQ</li>
<li class="linkedin">SineHQ</li>
</ul></div>
</div></div> </div>
</div>
<div id="grve-footer-bar" class="grve-section" data-section-type="fullwidth-element" data-align-center="yes" style="visibility: visible; padding-left: 0px; padding-right: 0px; margin-left: 158px; margin-right: 158px;">
<div class="grve-row">
<div class="grve-column-1-2">
<div class="grve-copyright">
<p style="text-align: center;">Copyright 2015 Sine Group Pty Ltd. Patents Pending.</p> Website by Bugeja Studio
</div>
</div>
</div>
</div>
</div>
</footer>
I would like to find out how i would go replacing class names, using JavaScript for 4 divs in my footer named: class="grve-column-1-4 grve-tablet-column-1-2".
I have tried using this code with no luck:
$(document).ready(function() {
var $window = $(window);
// Function to handle changes to style classes based on window width
function checkWidth() {
if ($window.width() < 321) {
$('.grve-tablet-column-1-2').removeClass('grve-tablet-column-1-2').addClass('grve-tablet-column-1');
}
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
});
What happens is when you access the website on mobile, the footer looks like this:
To fix this issue i can change the classes of these 4 divs to grve-tablet-column-1, and as a result it will organise under a single column like this:
Try this :
// Execute on load
$(document).ready(checkWidth);
// Bind event listener
$(window).resize(checkWidth);
// Function to handle changes to style classes based on window width
function checkWidth() {
var $window = $(window);
$("pre").text($window.width());
if ($window.width() < 321) {
$('.grve-tablet-column-1-2')
.removeClass('grve-tablet-column-1-2').addClass('grve-tablet-column-1');
}
else {
$('.grve-tablet-column-1')
.removeClass('grve-tablet-column-1').addClass('grve-tablet-column-1-2');
}
}
fiddle here: http://jsfiddle.net/u4cn338g/1/
Finally after searching for ages, i found that there was a 30% width placed on those elements which was causing the problem.
When i changed the width to 100% the columns started to work using css.
So turns out i didnt even need the JavaScript, although its some useful information if i need it next time for something :)
Thanks for you help guys.
Alex