I'm wondering if anyone can help solve this problem it would be much appreciated. Why isn't my navbar appearing on my website? I have reviewed my HTML, CSS AND JS and can't seem to identify the problem. Here is my GitHub website link. I do believe the problem could be with the JS though.
JS
var scroll = new SmoothScroll('a[href*="#"]');
jQuery(document).ready(function($) {
$(document).on("scroll", function() {
const features_top = $(".features-icons").position().top;
const top_of_window = $(window).scrollTop();
if (top_of_window >= features_top) {
$('.navbar').css('display', 'flex') // display: flex
} else {
$(".navbar").hide();
}
});
}); // This is just a sample script. Paste your real code (javascript or HTML) here.
if ('this_is' == /an_example/) {
of_beautifier();
} else {
var a = b ? (c % d) : e[f];
}
You need to add reference of smooth-scroll.js file before javascript.js file because of javascript.js code use smooth-scroll.js object.
<script src="js/smooth-scroll-master/dist/js/smooth-scroll.js"></script>
<script src="js/javascript.js"></script>
It will fix your problem.
you javascript.js uses smooth scroll so it should be included first.
else
you can include or use it in javascript.js like this
$.getScript("js/smooth-scroll-master/dist/js/smooth-scroll.js", function() {
var scroll = new SmoothScroll('a[href*="#"]');
jQuery(document).ready(function($) {
$(document).on("scroll", function() {
const features_top = $(".features-icons").position().top;
const top_of_window = $(window).scrollTop();
if (top_of_window >= features_top) {
$('.navbar').css('display', 'flex') // display: flex
} else {
$(".navbar").hide();
}
});
}); // This is just a sample script. Paste your real code (javascript or HTML) here.
if ('this_is' == /an_example/) {
of_beautifier();
} else {
var a = b ? (c % d) : e[f];
}
});
Related
Am trying to change the background color of the timeline on scroll like on this site.My replication of the sample is development site. Take a look at the codepen I tried using. The closest I have come to replicating it is with the code below which makes the change in color on each timeline circle flicker on/off on scroll.
jQuery(document).ready(function($) {
function onScroll() {
$('.cd-timeline-block').each( function() {
if( $(this).offset().top <= $(window).scrollTop()+$(window).height()*0.05 && $(this).find('.cd-timeline-img').hasClass('cd-inactive') ) {
$(this).find('.cd-timeline-img').removeClass('cd-inactive').addClass('cd-active');
$(this).find('.cd-date').addClass('cd-ssf-color');
} else {
$(this).find('.cd-timeline-img').addClass('cd-inactive').removeClass('cd-active');
$(this).find('.cd-date').removeClass('cd-ssf-color');
}
});
};
$(window).scroll(onScroll);
});
I have made some modification to the above code.
CodePen link:
http://codepen.io/anon/pen/KzqWVm
Javascript:
jQuery(document).ready(function($) {
var $timeline_block = $('.cd-timeline-block');
var firstelm = $timeline_block.first();
//on scolling, show/animate timeline blocks when enter the viewport
$(window).on('scroll', function() {
var _win = $(window), iselm = null;
$timeline_block.each(function(index) {
var _this = $(this);
if (((_this.offset().top - _win.height())) <= (_win.scrollTop())) {
iselm = _this;
}
});
if (_win.scrollTop() < $(firstelm).offset().top) {
iselm = $(firstelm);
}
if (iselm) {
$('.cd-active').removeClass('cd-active').addClass('cd-inactive');
iselm.find('.cd-timeline-img').removeClass('cd-inactive').addClass('cd-active');
if ((iselm.offset().top - _win.height()) > (_win.scrollTop() * 0.75)) {
$('.cd-date').removeClass('cd-ssf-color');
}
iselm.find('.cd-date').addClass('cd-ssf-color');
}
});
});
Continuing each loop on scroll might not work properly.
I have developed a jquery code that should let the menu hide a bit when I scroll down, and reappear as soon as I start scrolling up.
I had this perfectly working on my static html website, but I soon as I migrated it to wordpress, it stopped working. All my other js code works perfectly.. here is the part of code:
$(document).ready(function(){
$(window).scroll(function () {
var prevScroll;
var hidden = false;
var currentScroll = $(this).scrollTop();
if($("body").scrollTop() > 492){
if (prevScroll) {
console.log(currentScroll + " " + prevScroll);
console.log(hidden);
if (currentScroll < prevScroll && hidden) {
console.log('show');
$("#header-wrap").animate({marginTop: '0px'}, 200);
$("#menu").fadeIn("fast");
hidden=false;
} else if (currentScroll > prevScroll && !hidden) {
console.log(hidden);
console.log('hiding');
$("#header-wrap").animate({marginTop: '-60px'}, 200);
$("#menu").fadeOut("fast");
hidden=true;
}
} else if(!hidden){
console.log('first time');
$("#header-wrap").animate({marginTop: '-60px'}, 200);
$("#menu").fadeOut("fast");
hidden= true;
}
prevScroll = currentScroll;
}
else{
if(hidden){
console.log('show');
$("#header-wrap").animate({marginTop: '0px'}, 200);
$("#menu").fadeIn("fast");
hidden=false;
}
}
});
});
What is the problem with my code? I have it alongside all my js code in a script.js page.
Thanks
EDIT: I forgot to say that the menu is hiding , which is good, but it is not reappearing as soon as I scroll up. So part of the code is working, the other is not!
There's probably happen a conflict here between jQuery and Wordpress since both of them are using $ sign, try to use jQuery instead of $ or wrap your jQuery code inside:
jQuery(document).ready(function($){
$(window).scroll(function () {
// Your code here
});
});
I did it, the problem was that I was declaring var prevScroll;and var hidden = false; after the beginning of the function$(window).scroll(function () {, and not before it. Thanks for the help anyway..
Let's say we have a div with id = '123'
Ho to make it invisible with js without affecting its html code?
So document.getElementById('123').style.display = 'none' is not an option.
JS only
UPD:
I just have interesting task! I have to hide some comments with js from guestbook , but when I change html code to hide it, Server somehow understands what I've done and redirects me to warning Page. So I have to do something with that.
UPD2:
I had obfuscated script on my page
function check_divs() {
var try_again = true;
var arr_divs = document.getElementById('content').getElementsByTagName('div');
if (arr_divs.length != divs_count) {
try_again = false;
} else {
for (var i = 0; i < arr_divs.length; i++) {
if ((arr_divs[i].style.display == 'none') || (arr_divs[i].style.position == 'absolute')) {
try_again = false;
};
};
}; if (try_again) {
setTimeout(check_divs, 998);
} else {
document.location.href = '/alert.html';
};
}
This one, so my solution was to clear all timeouts.
document.getElementById('123').style.visibility = 'hidden';
or
document.getElementById('123').setAttribute('style','display:none');
or
document.getElementById('123').setAttribute('style','visibility:hidden');
or if you have jQuery libraries
$('#123').css('visibility','hidden')
or
$('#123').css('display','none')
Any of that help?
I am new to JS just playing around to understand how it works.
Why isn't my sign (+,-) changing?
When the div expand it remains with a + sigh never goes to -
Thanks
$(document).ready(function(){
$(".expanderHead").click(function(){
$(this).next(".expanderContent").slideToggle();
if ($(".expanderSign").text() == "+"){
$(".expanderSign").html("−")
}
else {
$(".expanderSign").text("+")
}
});
});
Just guessing at the relationship, since you haven't shown your HTML, but you probably need something like this:
$(document).ready(function () {
$(".expanderHead:visible").click(function () {
var content = $(this).next(".expanderContent");
var sign = $(this).find(".expanderSign");
if (content.is(":visible")) {
content.slideUp();
sign.text("+");
} else {
var expanded = $(".expanderContent:visible");
if (expanded.length > 0) {
expanded.slideUp();
expanded.prev(".expanderHead").find(".expanderSign").text("+");
}
content.slideDown();
sign.text("-");
}
});
});
FIDDLE
Im currently creating a website for one of my classes in school.
I want the site to be setup so it doesn't look like its reloading.
BY doing the pages in a query: ?page=index.
I do this by fading in the Div depending on the query. I know the page actually reloads, but it doesnt look like its not reloading with the fade. You can see my site here: http://yolatools.yolasite.com/resources/project.html?page=index
Now the only problem is that when I do ?page=fcduj its suppose to show the page not found DIV.
My code is:
function load(){
var profile=location.search;
if(profile=="?page=index")
{
$('.section, #home').fadeIn(1500);
$('.i').addClass('active');
$('.a, .m').addClass('grey');
}
else if(profile=="?page=about")
{
$('.section, #about').fadeIn(1500);
$('.a').addClass('active');
$('.m, .i').addClass('grey');
}
else if(profile=="?page=more"){
$('.section, #more').fadeIn(1500);
$('.m').addClass('active');
$('.a, .i').addClass('grey');
}
else if(profile==="")
{
location.href = '?page=index';
}
if(profile !== '?page=index' && profile !== '?page=about' && profile !== '?page=more') {
var rsts = profile.substr(6);
$('#query').html(rsts);
$('#wrong').fadeIn(1500);
}
}
I launch this function with onload in the body tag.
The part that is suppose to make the Page not found DIV to show is:
if(profile !== '?page=index' && profile !== '?page=about' && profile !== '?page=more') {
var rsts = profile.substr(6);
$('#query').html(rsts);
$('#wrong').fadeIn(1500);
}
But it doesn't seem to be working, but I have no Idea why. For the ?page=index I don't want to use PHP even though that's usually used with PHP. Thanks in advance.
The #wrong div is shown, but the parent .section div is not shown.
Change that if statement to:
if(profile !== '?page=index' && profile !== '?page=about' && profile !== '?page=more') {
var rsts = profile.substr(6);
$('#query').html(rsts);
$('.section, #wrong').fadeIn(1500);
}
Create a custom 404 error page, that has the needed JS
replace your javascript with this:
function home(){
$('#home').fadeIn(1000);
$('#about, #more').fadeOut(10);
}
function about(){
$('#about').fadeIn(1000);
$('#home, #more').fadeOut(100);
}
function more(){
$('#more').fadeIn(1000);
$('#about, #home').fadeOut(100);
}
function menu(){$('#h1').fadeIn(1000);setTimeout('other()',1000)}
function other(){
$('#h3').fadeIn(500);
setTimeout('$("#menu").fadeIn(500);', 500)
}
function load(){
var profile=location.search;
if(profile=="?page=index")
{
$('.section, #home').fadeIn(1500);setTimeout('menu()', 1500)
}
else if(profile=="?page=about")
{
$('.section, #about').fadeIn(1500);setTimeout('menu()', 1500)
}
else if(profile=="?page=more"){
$('.section, #more').fadeIn(1500);setTimeout('menu()', 1500)
}
else if(profile==="")
{
location.href = '?page=index';
}
else {
var rsts = profile.substr(6);
$('#query').html(rsts);
$('#wrong,#articles').fadeIn(1500);
$('#about, #more, #home').hide();
}
}