jQuery Plugin Interfering W/ Other Javascript - javascript

So I am using a plugin that creates a vertical paging animation.
It basically makes a fullscreen box and moves the "sections" through this box.
Here is the html to help show what I mean.
<div id="fullpage">
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>
I had a simple javascript function to hide my nav whenever you scroll down. The problem is, with this new plugin, you don't actually scroll down. Sections just move inside a stationary box.
Here is the javascript function I was using for the nav.
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y > 0) {
$('#navBar').addClass('scroll');
}
else{
$('#navBar').removeClass('scroll');
}
});
So the y > 0 doesn't trigger with this plugin anymore so the nav won't hide properly.
I'm thinking there has to be a way to change this simple code a little and make it work. Maybe by using IDs inside the sections possibly?
Here is how my html looks with the general structure from the plugin applied.
<!DOCTYPE html>
<html>
<head>
<title>Aldi Rebrand</title>
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css"/>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body class="red">
<div id="navBar" class="preHidden">
<img id="navLogo" src="images/navLogo.png">
<ul>
<li class = "navLink mainLink">Work</li>
<li class = "navLink mainLink">About</li>
<li class = "navLink mainLink">Blog</li>
</ul>
</div>
<div id="fullpage">
<div class="section">
<div id="aldiPhoto"></div>
<div id="descriptionAldi">
<h2>ALDI Rebrand <span>BRANDING | LOGO | PRINT</span></h2>
<p class="intro"><strong>ALDI</strong> is an international grocer, spanning from Germany to The United States and many other countries around the world.</p>
<p class="prjctDescription">The premise behind this semester long project was to immerse ourselves in the company/brand we were assigned. I was assigned ALDI. In this scenario, the goal of the rebrand was to convey a new “fresh and local” side to ALDI and their proposed farmers market addition to their stores. We were asked to create a brand new logo, at least four pieces of collateral and a brand guideline to demonstrate our research, branding applications and flexibility.</p>
<div class="btnDiv">
<div class="btn1"><p>VIEW ON DRIBBBLE</p></div>
<div class="btn2"><p>VIEW ON BEHANCE</p></div>
</div>
</div>
</div>
<div class="section">
<div id="aldiPage2"></div>
</div>
<div class="section">
<div id="aldiPage3"></div>
</div>
</div>
<div class="ticker"><p class="currentPage">1</p><div class="tickerBtm"><p class="maxPage">3</p></div></div>
</body>
</html>
And here is a jsfiddle of this page: https://jsfiddle.net/L0h1uxLo/1/

You can use the onLeave event to get the scrolled index value and toggle the class scroll.
$('#fullpage').fullpage({
onLeave: function (anchorLink, index, slideIndex, direction) {
//console.log(index);
if (index > 1) {
$('#navBar').addClass('scroll');
} else {
$('#navBar').removeClass('scroll');
}
}
});
Fiddle Demo

Related

problem with bootstrap : id does not active whether it is displayed?

I am newbie with bootstrap and here is my problem. I code a very simple page with bootstrap 5 and link 4 button "Home" "Explore" "Create" "Share"
Here is my code
https://github.com/nguyencuc2586/project2
In my code, as you can see, I code for example
<li class="nav-item">
Explore
</li>
And below I coded
<section id="explore-head-section">
<div class="container">
<div class="row">
<div class="col text-center py-5">
<div class="display-4">Explore</div>
<p class="lead">Lorem, ipsum.</p>
Find out more
</div>
</div>
</div>
</section>
So I think when I clicked to the Explore, it must linked to the "Lorem, ipsum..." text ?
But it did not.
By the way, may be because the javascript below ?
Could you please give me some advices for this problem? Thank you in advance.
You need to use the jQuery full version, not slim version.
Please change the code for jQuery import
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
to as follows:
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
You can use JavaScript to do this job just add listener and window scroll
document.querySelector('.nav-link').addEventListener("click", function(e){
var el = e.currentTarget.getAttribute("href");
const y = el.top + window.scrollY;
window.scroll({
top: y,
behavior: 'smooth'
});
});
Explore
<div style="height: 1000px"></div>
<section id="explore-head-section">
<div class="container">
<div class="row">
<div class="col text-center py-5">
<div class="display-4">Explore</div>
<p class="lead">Lorem, ipsum.</p>
Find out more
</div>
</div>
</div>
</section>
<div style="height: 1000px"></div>

Change position of an element using CSS/JS only

I am using Uikit 2 (https://getuikit.com/v2) - and I need to solve a problem.
I got this markup: https://codepen.io/anon/pen/jZwNeB
Now I need to do the following. This part:
<div class="toc uk-panel uk-panel-box-primary sticky-toc" style="margin: 0px;"> ...</div>
Should be shown on the left side - right under the time datetime part. But - and this is important: I can not change the source itself. I can only add a class to toc uk-panel uk-panel-box-primary sticky-toc and add custom CSS and custom JS.
Any idea how to solve this?
var obj = document.getElementById("node");
var parent = document.getElementById("parent");
parent.appendChild(obj);
Here, node is the "toc uk-panel uk-panel-box-primary sticky-toc" element.
parent is the "uk-width-large-1-4" element
You can obviously use any other DOM method than the one I have used.
So, if you want to select the DOM of the entity using its class name class, you have to use getElementsByClassName("big long class name")[0] to correctly reference that entity
I just wanted to highlight the appendChild method
I believe the best answer is using CSS, but because I don't know about getukit and I don't know how to solve this using CSS only.
Here you can try with jQuery. Tell me if you want do this using pure JS.
<link href='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.5/css/uikit.min.css' rel='stylesheet'>
<div class="uk-grid">
<div class="uk-width-large-1-4">
<p class="uk-article-meta tm-article-date uk-margin-small selectionShareable">
<time datetime="2018-02-12T12:00:58+00:00">12.02.18</time>
</p>
</div>
<div class="uk-width-large-3-4">
<h1 class="uk-article-title">Test Content</h1>
<div class="uk-margin">
<div class="uk-sticky-placeholder" style="height: 52px; margin: 0px;">
<div class="toc uk-panel uk-panel-box-primary sticky-toc" style="margin: 0px;">
<ol class="toc-list ">
<li class="toc-list-item">
Testa
<ol class="toc-list is-collapsible">
<li class="toc-list-item">Test 2</li>
</ol>
</li>
</ol>
</div>
</div>
<p class="selectionShareable">Test Content.</p>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
function recreate(){
let newElem = $('.sticky-toc').clone();
$('.sticky-toc').remove();
$('.tm-article-date').after(newElem);
}
recreate();
})
</script>

Displaying info from sidebar on the same page

I am a beginner at this stuff, and right now I am working on a project. To keep it simple, my project right now has a sidebar that has four different options. (Schedule, progress, add course, drop course). I want users to be able to click on this options (after expanding the side bar) and display the information from which ever of the four they clicked on. I want this information to display on the same page, not link to another page. I have done this before by having invisible pages and using a showpage function. This time around though it is coded differently with classes, and I'm not sure how to go about this. Any help is appreciated!
Note: I don't have any data for these 4 pages right now - I just want to set it up so they function right now. To keep it short: I'm asking what code I need and where to display information (Ex: "Here is your schedule") on the same page when Schedule is clicked.
<!doctype html>
<html>
<head>
<title>STUDENT SCHEDULER APP</title>
<link rel="stylesheet" type="text/css" href="ssaStyles.css">
<script src="jquery-3.2.1.min.js"></script>
<script>
$(function() {
console.log("jQuery was loaded");
});
$(document).ready(function() {
function toggleSidebar() {
$(".button").toggleClass("active");
$("main").toggleClass("move-to-left");
$(".sidebar-item").toggleClass("active");
}
$(".button").on("click tap", function() {
toggleSidebar();
});
$(document).keyup(function(e) {
if (e.keyCode === 27) {
toggleSidebar();
}
});
});
</script>
</head>
<body>
<div id="header">
<h1>Welcome!</h1>
</div>
<div class="nav-right visible-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>
<!-- nav-right -->
<main>
<nav>
<div class="nav-right hidden-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>
<!-- nav-right -->
</nav>
</main>
<div class="sidebar">
<ul class="sidebar-list">
<li class="sidebar-item">Schedule
</li>
<li class="sidebar-item">Progress
</li>
<li class="sidebar-item">Add a course
</li>
<li class="sidebar-item"><a href="#" class="sidebar-anchor">Drop a
course</a></li>
</ul>
</div>
</body>
</html>
Its really simple all you have to do is create sections and these sections will be linked to your link, let me show you how.
<html>
<head>
<title>Example</title>
</head>
<body>
<!--create the links but add a # sign before you give them the section names-->
<div class="side-nav">
About
Contact
</div>
<!--Create an id with the same name as the link href source but leave out the # sign-->
<!--this is the about section-->
<div id="about">
<h1>Hello</h1>
</div>
<!--this is the contact section-->
<div id="contact">
<p> done</p>
</div>
</body>
</html>
the name you give your link should be the same as the div id name, and you will have to disable overflow in CSS if you want to....hope it made sense, if you need more help just ask.

JavaScript animate function doesn't work

This is what the code looks like.
<head>
<link type="text/css" rel="stylesheet" href="C:\Users\User\Desktop\css1.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="C:\Users\User\Desktop\js.js"></script>
</head>
<body>
<div id="header_wrap">
<div id="header">
<div id="logo">
LOGO
</div>
<div class="nav">
<a href="http://www.google.se">
Stuff
</a>
<a href="javascript:void(0)">
Other stuff
</a>
<a href="javascript:void(0)">
More stuff
</a>
</div>
<div class="mobile_nav"></div>
<div class="mobile_nav_menu">
<div class="mobile_menu">
<span>Stuff</span>
<span>Other stuff</span>
<span>More stuff</span>
</div>
<div class="mobile_close">
</div>
</div>
</div>
</div>
<div class="image_container">
<div class="inner_content" id="slide1">
<h2>
CONTENTS
</h2>
</div>
<a class="button" href="javascript:void(0)"></a>
</div>
</body>
the .js file contains this code
setTimeout(function(){
$("#slide1").css('opacity', '1');
},800);
setInterval(function(){
$(".button").toggleClass("opacity");
},1000);
//Navigation
$(".mobile_nav").click(function() {
$(".mobile_nav_menu").animate({right: 0});
})
$(".mobile_close").click(function() {
$(".mobile_nav_menu").animate({right: -270});
})
Can anyone help me out with what I'm doing wrong and how it can be fixed?
Thank you! /AJ
UPDATE: The .js loads (tried the alert function), but does not fill the function it should. Original pen can be found on http://codepen.io/yuriylianguzov/pen/qjwEe
One of the problems is that you are trying to reference a javascript file from a physical file path, and not a url (or relative path). You can't use your harddrive path in an html file to include javascript.
<script src="C:\Users\User\Desktop\js.js"></script>
If your javascript is in the same folder as your html, try something like this:
<script src="js.js"></script>
I'm not exactly sure what the expected behavior for the JavaScript is, because it appears to be doing what it is intended to do. If you look at the DOM in the codepen link that you provided the element with the id of 'slide1' has its opacity style set to 1 (see below) and the anchor tag with class of 'button' is getting the class 'opacity' toggled on and off every second (not depicted below, but you can see it happening in firebug).
<div class="image_container">
<div id="slide1" class="inner_content" style="opacity: 1;">
<h2>
We are who we choose to be.
</h2>
</div>
</div>
The other two click handler's are targeting empty elements (the element with class of 'mobile_nav', and the element with class of 'mobile_close') so they aren't going to do anything.
$(".mobile_nav").click(function() {
$(".mobile_nav_menu").animate({right: 0});
})
$(".mobile_close").click(function() {
$(".mobile_nav_menu").animate({right: -270});
})
<div class="mobile_nav"></div>
<div class="mobile_nav_menu">
<div class="mobile_menu">
<span>Projects</span>
<span>Profile</span>
<span>Contact</span>
</div>
<div class="mobile_close"></div>
</div>
I hope this helps!
1) Some of the elements your javascript is acting on don't have any content
2) Change the line $(".mobile_nav_menu").animate({right: 0}); to: $(".mobile_nav_menu").animate({"right": "0"}); and do the same with the other one, though it won't have any functionality, really.
3) your class mobile_nav_menu needs to have css that says position:relative for the attribute "right" to work.
4) I'd recommend moving your mobile_close div outside the mobile_nav_menu div so it doesn't move when you click it
If anyone has stuff to add, please do so.

How do I fix: Uncaught TypeError: Object [object Object] has no method 'goToSlide' with bxslider?

I'm trying to use bxslider to slide an entire page's worth of content using the goToSlide function from bxslider with a custom set of buttons. When I load the slider with the .bxSlider function, it loads just fine. But when I click the button to go to a specific slide, it says the method does not exist! Any idea on where I made the mistake?
Here is my code:
<html>
<head>
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/grids.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/jquery-1.11.0.min.js"></script>
<script src="js/main-test.js"></script>
<script src="js/vendor/jquery.bxslider.min.js"></script>
</head>
<body>
<section class="section-3" id="lastBlock-wrapper">
<ul id="lastBlockCtrl">
<li class="switch">
<div class="switchbar"></div>
<div class="switchbar"></div>
<div class="switchbar"></div>
</li>
<li class="diamond"><a onClick="jumptoslide(0);" class="active">Performance</a></li>
<li class="diamond"><a onClick="jumptoslide(1);">Durability</a></li>
<li class="diamond"><a onClick="jumptoslide(2);">Transparency</a></li>
</ul>
<ul id="slider">
<li>
<section class="feature">
<div class="grid" style="height: 100%;">
<div class="grid__item two-fifths grid--center slider-bg">
<h1>Test</h1>
</div>
<div class="grid__item three-fifths cont">
<h1>Performance</h1>
<p>Two perfect examples of live sites using Startup Framework: Crumbs and Hipsta Food. These guys have a passion for cooking food and they are really a good deal. Have you created a project using Startup Framework? Share it with us and you just might be featured on Designmodo!</p>
</div>
</div>
</section>
</li>
<li>
<section class="feature">
<div class="grid">
<div class="grid__item two-fifths grid--left">
</div>
<div class="grid__item three-fifths cont">
<h1>Showcase</h1>
<p>Two perfect examples of live sites using Startup Framework: Crumbs and Hipsta Food. These guys have a passion for cooking food and they are really a good deal. Have you created a project using Startup Framework? Share it with us and you just might be featured on Designmodo!</p>
</div>
</div>
</section>
</li>
<li>
<section class="feature">
<div class="grid">
<div class="grid__item two-fifths grid--left">
</div>
<div class="grid__item three-fifths cont">
<h1>Showcase</h1>
<p>Two perfect examples of live sites using Startup Framework: Crumbs and Hipsta Food. These guys have a passion for cooking food and they are really a good deal. Have you created a project using Startup Framework? Share it with us and you just might be featured on Designmodo!</p>
</div>
</div>
</section>
</li>
</ul>
</section>
</body>
$( document ).ready( function () {
//last slider
var bxslider = $('.slider').bxSlider({
controls: false,
easing: 'ease-in-out'
});
jumptoslide = function (slide) {
bxslider.goToSlide(slide);
};
} );
You have no slider class. You only have a slider ID.
Change
var bxslider = $('.slider').bxSlider({
controls: false,
easing: 'ease-in-out'
});
to
var bxslider = $('#slider').bxSlider({
controls: false,
easing: 'ease-in-out'
});
Change the $('.slider') to $('#slider') in your javascript code as slider is id as you mentioned in your html its not class.
. is used to represent class.
# is used to represent id.
Hope it helps.

Categories