my knowledge of web tech is mostly HTML and CSS.
I've used bootstrap and jQuery to allow the navigation to get stuck on scroll, it did for a while and then stopped once I started adding new pages. Here's my JavaScript:
$('.carousel').carousel({
interval: 5000 //changes the speed
})
$(document).ready(function() {
$(window).scroll(function () {
//if you hard code, then use console
//.log to determine when you want the
//nav bar to stick.
console.log($(window).scrollTop())
if ($(window).scrollTop() > 280) {
$('#nav_bar').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 281) {
$('#nav_bar').removeClass('navbar-fixed');
}
});
});
Here's my web page where you can see the issue. What can I do about it?
Thanks in advance
In your javascript, you are looking to apply the class nav-bar-fixed to an element with the ID nav_bar. However, you don't have that ID put on any element.
if ($(window).scrollTop() > 280) {
$('#nav_bar').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 281) {
$('#nav_bar').removeClass('navbar-fixed');
}
But, when I add and ID to <nav> it works. It needs some modification to look good, but it does work then. <nav id="nav_bar">
I'm guessing that with the new pages you created, you just missed adding the ID or copied an older version of code, etc.
Related
I have this button that will hide when no more content to load in review page. The button is working great except that it will still show up even if there are no more data to display. I want it to not show up if there is nothing left to load. Does anyone have any suggestions? Thank you.
Here is my code
$(document).unbind('click').on('click', ".recentreviews5 .showmore", function () {
$('#last').val(parseInt($('#last').val()) + 10)
$('.hide').each(function () {
var itmidx = $(this).index();
if (parseInt(itmidx) < parseInt($('#last').val())) {
var g = $(this).attr('id')
$(this).removeClass('recent').removeClass('hide')
$(this).addClass('recent').addClass('show')
}
});
if ((parseInt($('#last').val()) >= parseInt($('#total').val())) || (parseInt($('#last').val()) < 10)) {
$(".showmore").css('cssText', 'display:none!important')
}
});
You can use this code to manually set the style. The .css call generally speaking doesn't support !important.
$(".showmore").attr('style', 'display: none !important')
$(".showmore").attr('hidden', 'hidden')
This code toggle visibility with display:none / display:block
$(".showmore").toggle();
I'm currently looking into creating two separate logos located on the header nav section of this website.
The current navigation before scrolling along with logo is perfect to me. The fixed nav on scroll is also perfect apart from the logo will stay the same.
I have a second logo with the opposite colour to match the white background, the problem I face is what method to use when switching the image from the first to second.
My initial approach may be to use css but as far as things stand, I'm on the fence for how to deal with this, the text for the navigation styling has been fine, it's just any idea on how to switch the image to the second one that I plan on placing there.
If anyone has a rough idea to help me out, I'll highly appreciate that and take it on board.
URL: http://94.23.211.70/~cairngorm/
Something like that http://www.w3schools.com/jsref/event_onscroll.asp
<script type="text/javascript">
window.onscroll = function() {changeSource()};
function changeSource() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
$('.css_class_name').attr('src','new_image.png');
} esle{
$('.css_class_name').attr('src','old_image.png');
}
}
</script>
this is also at you general.js you can customize at this point customize it at line 210
customise the function //Sticky Menu
var sticky_menu = function(){
if( jQuery('.fly-header-site.fly-sticky-header-on').length > 0) {
var header_height = jQuery('.fly-header-site').outerHeight(),
sticky_open = header_height * 2;
jQuery(window).on('scroll', function () {
if (jQuery(window).scrollTop() > header_height + 5) {
jQuery('.fly-header-site').addClass('sticky-menu').css('top', -header_height);
} else {
jQuery('.fly-header-site').removeClass('sticky-menu').css('top', 0);
}
if (jQuery(window).scrollTop() > sticky_open) {
jQuery('.fly-header-site.sticky-menu').addClass('sticky-open')
} else {
jQuery('.fly-header-site.sticky-menu').removeClass('sticky-open')
jQuery('.fly-wrap-logo').src('http://www.vectortemplates.com/raster/superman-logo-012a.png')
}
});
}
};
I'm adding a Chatango HTML5 chat box to my website, but when users scroll up or down in the chat box, it also scrolls up or down the rest of the page. I've been experimenting with different codes I've found on this site, but so far nothing has worked.
I thought I found a solution here: How to disable scrolling in outer elements? and applied it to my chatroom. It works exactly how I want it to on this codepen editor: http://codepen.io/EagleJow/pen/QbOBJV
But using the same code in JSFiddle: https://jsfiddle.net/4bm6ou90/1/ (or on my actual website) does not prevent the rest of the page from scrolling. I've tested it in both Firefox and Chrome with the same results.
Here's the javascript:
var panel = $(".panel");
var doc = $(document);
var currentScroll;
function resetScroll(){
doc.scrollTop(currentScroll);
}
function stopDocScroll(){
currentScroll = doc.scrollTop();
doc.on('scroll', resetScroll);
}
function releaseDocScroll(){
doc.off('scroll', resetScroll);
}
panel.on('mouseenter', function(){
stopDocScroll();
})
panel.on('mouseleave', function(){
releaseDocScroll();
})
Any ideas?
It didn't work on JSFiddle because I didn't have jQuery set on the side menu and it didn't work on my website because the '$' symbol in the javascript conflicted with that same symbol in the jQuery (or something like that).
Here's the JSFiddle with better code and set to load jQuery: https://jsfiddle.net/4bm6ou90/7/
The Javascript:
$.noConflict();
jQuery( document ).ready(function( $ ) {
$(".panel").on("mouseenter", function(){
$(document).on("scroll", function(){
$(this).scrollTop(0);
});
});
$(".panel").on("mouseleave", function(){
$(document).off("scroll");
});
});
Also gotta have that jQuery CDN in the html head section.
http://nggalaxy.ru/en/about-us/ - here is the example of exact behaviour to be implemented. When you scroll down the page, the side menu disappears and appears on top of the page.
How it can be realized using bootstrap for example?
Thank you.
Here is an example of raw Javascript + jQuery making this happen:
<script type="text/javascript">
$(window).scroll(function(){
var a = 112;
var pos = $(window).scrollTop();
if(pos > a) {
$("menu").css({
position: 'fixed'
});
}
else {
$("menu").css({
position: 'absolute',
top:'600px'
});
}
});
</script>
This will add a CSS style if the user scrolled 112 pixel down. Like this you can create all styles for your menu.
In General: Use javascript to check on what scroll-position the user is, and append the styles or classes.
I'm using <a href> element along with :target css selector to show a <div> which by default is set to display:none. Problem is, that when I click on the link to show that <div>, it is automatically scrolling down my site towards that <div>.
Is there a way to stop the screen movement?
Unfortunately I am not yet proficient in anything besides CSS and HTML.
You can use event.preventDefault() to avoid this. Something like this:
$('a.yourclass').click(function(e)
{
//your code
e.preventDefault();
});
OR:
link
in the link enter:
Link here
You'll need JS anyway:
// (in jQuery)
$el.on('click', function(e) {
// find current scroll position
var pos = document.body.scrollTop || document.documentElement.scrollTop;
// let normal action propagate etc
// in the next available frame (async, hence setTimeout), reset scroll posiion
setTimeout(function() {
window.scrollTo(0, pos);
}, 1);
})
I don't know if this will flicker the screen. It might. It's a horrible hack either way.
In my Chrome, there's no flicker: http://jsfiddle.net/rudiedirkx/LEwNd/1/show/
There are two ways to tell the browser we don't want it to act:
The main way is to use the event object. There's a method
event.preventDefault().
If the handler is assigned using on (not by
addEventListener), then we can just return false from it.
Example:
Click here
or
here
This is a bit of a hack but you could use a basic css work around:
CSS only Example
#div1 {
height: 0;
overflow:hidden;
}
#div1:target {
height: auto;
margin-top: -110px;
padding-top: 110px;
}
#div2 {
background:red;
}
Click to show
<div id="div1">
<div id="div2">Content</div>
</div>
If you need it to be a little more flexible you can add some js...
More Flexible Example with JS
$('a').click(function () {
$('#div1').css({
'margin-top': 0 - $('#div1').position().top + $(window).scrollTop(),
'padding-top': $('#div1').position().top - $(window).scrollTop()
});
});
Basically you're pulling the top of div1 up with the negative margin and then pushing div2 back down with the padding, so that the top of div1 rests at the top of the window... Like I said its a hack but it does the trick.
Those links are anchor-links and by default made for those jumps :) You could use JS to prevent the default behaviour in some way. For example using jQuery:
$('a').click(function(e){e.preventDefault();});
or by default add return false; to the links
Avoid using :target all together and just use onclick event.
function myFunction()
{
document.getElementById('hiddenDiv').style.display = 'block';
return false;
}