I am a newbie and I can't figure out how to get rid of "#!/". I did not create this code each time I open a page it comes up like this:
site/index.html#!/
site/index.html#!/page_home
site/index.html#!/page_portfolio
pages.js:
$(window).load(function() {
var act='';
$('#content > ul > li').css({position:'absolute', display:'none'});
$('#content > ul > li').find('.box1').css({height:'0'})
$('#menu > li > a span').css({opacity:'0'})
$('#menu > li > a').hover(function(){
$(this).find(' > span').stop().animate({opacity:'1'},600);
}, function(){
if (!$(this).hasClass('active')) {
$(this).find(' > span').stop().animate({opacity:'0'},600);
}
})
$('#menu > li').each(function(num){
$(this).data({num:num})
})
$('#content > ul > li').each(function(num){
$(this).data({num:num})
})
if (location.hash.slice(0,3)=='#!/') {
page=location.hash.slice(3);
open_page('#'+page);
fl=false;
}
if ((location.hash=='#')||(location.hash=='')) {
open_page('');
fl=true;
$('#content').stop().animate({height:'668'})
}
$('a').click(function(){
if ($(this).attr('href').slice(0,3)=='#!/') {
page=$(this).attr('href').slice(3);
open_page('#'+page);
return false;
}
if ($(this).attr('data-type')=='close') {
close_page()
}
})
function open_page(page){
location.hash='#!/'+page.slice(1);
$('#menu a').removeClass('active').find(' > span').stop().animate({opacity:'0'},600);
Cufon.replace('#menu a', { fontFamily: 'Ubuntu', hover:true });
num=$(page).data('num');
$('#menu > li').each(function(){
if ($(this).data('num')==num) {
$(this).find('> a').addClass('active').find('> span').stop().animate({opacity:'1'},600);
Cufon.replace('#menu a', { fontFamily: 'Ubuntu', hover:true });
}
})
fl=false;
$('#content').stop().animate({height:'868'})
if (act!='') {
$(act).find('.box1').stop().animate({height:'0'},700,'easeOutCirc', function(){
$(act).css({display:'none'});
$(page).css({display:'block'}).find('.box1').stop().animate({height:'100%'},700, 'easeOutCirc', function(){
act=page;
});
})
} else {
$(page).css({display:'block'}).find('.box1').stop().animate({height:'100%'},700, 'easeOutCirc', function(){
act=page;
});
}
}
function close_page(page){
$('#menu a').removeClass('active').find(' > span').stop().animate({opacity:'0'},600);
Cufon.replace('#menu a', { fontFamily: 'Ubuntu', hover:true });
location.hash='#';
$(act).find('.box1').stop().animate({height:'0'},700,'easeOutCirc', function(){
$(act).css({display:'none'});
act='';
fl=true;
$('#content').stop().animate({height:'668'})
});
return false;
}
})
Related
I'm a new developer and still learning and i would appreciate a bit help in here coz I'm already insane.
I have this code, trying to make a dropdown with some options but i can't make it work. In inspector mode it says Uncaught ReferenceError, jQuery not defined it doesn't do the dropdown.
<div class="container">
<nav class="fixed-top nav-menu nav d-lg block justify-content-end">
<!--<div class="right">-->
<ul>
<li>
"Nome Utilizador"
</li>
<li class="drop-down">Action
<ul class="dropdown-menu">
<li class="dropdown-item">
exemplo
</li>
</ul>
</li>
</ul>
<!--</div>-->
</nav>
</div>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/counterup/counterup.min.js"></script>
<script src="vendor/owl.carousel/owl.carousel.min.js"></script>
<script src="js/main.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="vendor/jquery.easing/jquery.easing.min.js"></script>
<script src="vendor/php-email-form/validate.js"></script>
<script src="vendor/waypoints/jquery.waypoints.min.js"></script>
<script src="vendor/venobox/venobox.min.js"></script>
<script src="vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="vendor/aos/aos.js"></script>
This is the Main.js code
/**
* Template Name: OnePage - v2.2.2
* Template URL: https://bootstrapmade.com/onepage-multipurpose-bootstrap-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/
!(function($) {
"use strict";
// Preloader
$(window).on('load', function() {
if ($('#preloader').length) {
$('#preloader').delay(100).fadeOut('slow', function() {
$(this).remove();
});
}
});
// Smooth scroll for the navigation menu and links with .scrollto classes
var scrolltoOffset = $('#header').outerHeight() - 2;
$(document).on('click', '.nav-menu a, .mobile-nav a, .scrollto', function(e) {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
if (target.length) {
e.preventDefault();
var scrollto = target.offset().top - scrolltoOffset;
if ($(this).attr("href") == '#header') {
scrollto = 0;
}
$('html, body').animate({
scrollTop: scrollto
}, 1500, 'easeInOutExpo');
if ($(this).parents('.nav-menu, .mobile-nav').length) {
$('.nav-menu .active, .mobile-nav .active').removeClass('active');
$(this).closest('li').addClass('active');
}
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
return false;
}
}
});
// Activate smooth scroll on page load with hash links in the url
$(document).ready(function() {
if (window.location.hash) {
var initial_nav = window.location.hash;
if ($(initial_nav).length) {
var scrollto = $(initial_nav).offset().top - scrolltoOffset;
$('html, body').animate({
scrollTop: scrollto
}, 1500, 'easeInOutExpo');
}
}
});
// Mobile Navigation
if ($('.nav-menu').length) {
var $mobile_nav = $('.nav-menu').clone().prop({
class: 'mobile-nav d-lg-none'
});
$('body').append($mobile_nav);
$('body').prepend('<button type="button" class="mobile-nav-toggle d-lg-none"><i class="icofont-navigation-menu"></i></button>');
$('body').append('<div class="mobile-nav-overly"></div>');
$(document).on('click', '.mobile-nav-toggle', function(e) {
$('body').toggleClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').toggle();
});
$(document).on('click', '.mobile-nav .drop-down > a', function(e) {
e.preventDefault();
$(this).next().slideToggle(300);
$(this).parent().toggleClass('active');
});
$(document).click(function(e) {
var container = $(".mobile-nav, .mobile-nav-toggle");
if (!container.is(e.target) && container.has(e.target).length === 0) {
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
}
});
} else if ($(".mobile-nav, .mobile-nav-toggle").length) {
$(".mobile-nav, .mobile-nav-toggle").hide();
}
// Navigation active state on scroll
var nav_sections = $('section');
var main_nav = $('.nav-menu, #mobile-nav');
$(window).on('scroll', function() {
var cur_pos = $(this).scrollTop() + 200;
nav_sections.each(function() {
var top = $(this).offset().top,
bottom = top + $(this).outerHeight();
if (cur_pos >= top && cur_pos <= bottom) {
if (cur_pos <= bottom) {
main_nav.find('li').removeClass('active');
}
main_nav.find('a[href="#' + $(this).attr('id') + '"]').parent('li').addClass('active');
}
if (cur_pos < 300) {
$(".nav-menu ul:first li:first").addClass('active');
}
});
});
// Toggle .header-scrolled class to #header when page is scrolled
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('#header').addClass('header-scrolled');
} else {
$('#header').removeClass('header-scrolled');
}
});
if ($(window).scrollTop() > 100) {
$('#header').addClass('header-scrolled');
}
// Back to top button
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('.back-to-top').fadeIn('slow');
} else {
$('.back-to-top').fadeOut('slow');
}
});
$('.back-to-top').click(function() {
$('html, body').animate({
scrollTop: 0
}, 1500, 'easeInOutExpo');
return false;
});
// jQuery counterUp
$('[data-toggle="counter-up"]').counterUp({
delay: 10,
time: 1000
});
// Testimonials carousel (uses the Owl Carousel library)
$(".testimonials-carousel").owlCarousel({
autoplay: true,
dots: true,
loop: true,
responsive: {
0: {
items: 1
},
768: {
items: 2
},
900: {
items: 3
}
}
});
// Porfolio isotope and filter
$(window).on('load', function() {
var portfolioIsotope = $('.portfolio-container').isotope({
itemSelector: '.portfolio-item'
});
$('#portfolio-flters li').on('click', function() {
$("#portfolio-flters li").removeClass('filter-active');
$(this).addClass('filter-active');
portfolioIsotope.isotope({
filter: $(this).data('filter')
});
aos_init();
});
// Initiate venobox (lightbox feature used in portofilo)
$(document).ready(function() {
$('.venobox').venobox({
'share': false
});
});
});
// Portfolio details carousel
$(".portfolio-details-carousel").owlCarousel({
autoplay: true,
dots: true,
loop: true,
items: 1
});
// Init AOS
function aos_init() {
AOS.init({
duration: 1000,
once: true
});
}
$(window).on('load', function() {
aos_init();
});
})(jQuery);
First of all you need to include your jQuery script before your main.js file.
Also please consider in sharing your code here so we can help you better.
I'm getting error from using top property in my jquery code. The code is about navigation dots on my slider. This is the link to my page: http://54.169.61.153/teavana
Below is my code. I'm getting error in the console saying that:
Uncaught TypeError: Cannot read property 'top' of undefined
$(document).ready(function () {
var one = $("#slider").offset();
var two = $("#tabsDiv").offset();
var three = $("#teaWare").offset();
var four = $("#videoo").offset();
$(window).scroll(function () {
var screenPosition = $(document).scrollTop();
if (screenPosition < one.top) {
$(".teavanamenu li a").removeClass("active");
$(".teavanamenu li a.menu1").addClass("active");
}
if (screenPosition >= two.top) {
$(".teavanamenu li a").removeClass("active");
$(".teavanamenu li a.menu2").addClass("active");
}
if (screenPosition >= three.top) {
$(".teavanamenu li a").removeClass("active");
$(".teavanamenu li a.menu3").addClass("active");
}
if (screenPosition >= four.top) {
$(".teavanamenu li a").removeClass("active");
$(".teavanamenu li a.menu4").addClass("active");
}
});
$(window).scroll();
$(".one, .two").click(function () { $(window).scroll(); });
});
I'm not sure why it can't read the property top. Any help?
Here is a jsfiddle of slide menu:
http://jsfiddle.net/fh6p4/
$('#button').toggle(
function() {
$('#right').animate({ left: 250 }, 'slow', function() {
$('#button').html('Close');
});
},
function() {
$('#right').animate({ left: 0 }, 'slow', function() {
$('#button').html('Menu');
});
}
);
I need this menu to be closed when I click on item1, item2, etc. Is that possible?
Try this short jQuery snippet :-
$('#button, #menu > ul > li').click(function(){
var $this = $('#button');
$('#right').animate({ left: ($this.html() == 'Close' ? 0 : 250) },'slow', function(){
$this.html($this.html() == 'Close' ? 'Menu' : 'Close');
});
});
DEMO
OR
$('#button, #menu > ul > li').click(function(){
var left = parseInt($('#right').css('left'));
$('#right').animate({ left: (left == 250 ? 0 : 250) },'slow', function(){
$('#button').html( left == 250 ? 'Menu' : 'Close');
});
});
DEMO
yes it is possible
$('#button, #menu ul li a').toggle(
function() {
$('#right').animate({ left: 250 }, 'slow', function() {
$('#button').html('Close');
});
},
function() {
$('#right').animate({ left: 0 }, 'slow', function() {
$('#button').html('Menu');
});
});
You catch event when click on menu item, and process close menu.
Here are my code yu can reference
$("#menu ul li a").click(function(){
$('#right').animate({ left: 0 }, 'slow', function() {
$('#button').html('Menu');
});
});
I have some jQuery that needs to activate depending on the window size.
The current code I have does trigger correctly when the page is loaded, but if I resize the window the jQuery does not enable or disable according to the size of the screen
$(document).ready(function() {
var width = $(window).width();
if ((width < 980)) {
$( '.navigation > ul > li > a' ).click(function() {
if($(this).next('ul').is(':visible')){
$(this).next("ul").slideUp(400);
} else {
$( '.navigation > ul > li > ul' ).slideUp(400);
$(this).next("ul").slideToggle(400);
}
});
$( '.navigation > ul > li > ul > li > a' ).click(function() {
if($(this).next("ul").is(":visible")){
$(this).next("ul").slideUp(400);
} else {
$( '.navigation > ul > li > ul > li > ul' ).slideUp(400);
$(this).next("ul").slideToggle(400);
}
});
$( '.menu-link' ).click(function() {
if($(this).next("div").is(':visible')){
$(this).next("div").slideUp(400);
} else {
$( '.navigation' ).slideUp(400);
$(this).next('div').slideToggle(400);
}
});
}
});
Effectively what I need is for the jQuery to trigger under a screen size of 980px and disable over that figure.
As an extra googly I need to make sure that any expanded elements are able to close or are closed when the page size exceeds 980px as over this size the usual CSS media queries take effect on hover.
An earlier version of my code was able to take into account of a dynamic window size, but left the expanded items open and unable to close since the jQuery no longer functioned.
In case it helps here's a fiddle
You need to use window.onresize method.
EDITED CODE
// flag to check that events doesn't bind twice
var isNavigationEventsEnable = false;
// enable events
var enableNavigationEvents = function () {
$(".navigation > ul > li > a").on('click.screen-lt-980', function () {
if ($(this).next("ul").is(":visible")) {
$(this).next("ul").slideUp(400);
} else {
$(".navigation > ul > li > ul").slideUp(400);
$(this).next("ul").slideToggle(400);
}
});
$(".navigation > ul > li > ul > li > a").on('click.screen-lt-980', function () {
if ($(this).next("ul").is(":visible")) {
$(this).next("ul").slideUp(400);
} else {
$(".navigation > ul > li > ul > li > ul").slideUp(400);
$(this).next("ul").slideToggle(400);
}
});
$(".menu-link").on('click.screen-lt-980', function () {
if ($(this).next("div").is(":visible")) {
$(this).next("div").slideUp(400);
} else {
$(".navigation").slideUp(400);
$(this).next("div").slideToggle(400);
}
});
}
// disable events
var disableNavigatioEvents = function () {
$(".navigation > ul > li > a").off('click.screen-lt-980');
$(".navigation > ul > li > ul > li > a").off('click.screen-lt-980');
$(".menu-link").off('click.screen-lt-980');
}
// call this method on window resize
var redesignScreen = function () {
//function (e) { // comment this line
var width = $(window).width();
if ((width < 980)) {
if (!isNavigationEventsEnable) {
isNavigationEventsEnable = true;
enableNavigationEvents();
}
} else {
isNavigationEventsEnable = false;
disableNavigatioEvents();
}
//} // comment this line
}
$(document).ready(function () {
// attach onresize function
window.onresize = redesignScreen;
// calling redesignScreen initially
redesignScreen();
});
JSFiddle: http://jsfiddle.net/hEtTg/2/
WITH FORCE CLOSE
// flag to check on that events doesn't bind twice
var isNavigationEventsEnable = false;
// enable events
var enableNavigationEvents = function () {
$(".navigation > ul > li > a").on('click.screen-lt-980', function (e, data) {
data = (typeof data == 'undefined') ? {} : data;
if ($(this).next("ul").is(":visible") || data.forceClose) {
$(this).next("ul").slideUp(400);
} else {
$(".navigation > ul > li > ul").slideUp(400);
$(this).next("ul").slideToggle(400);
}
});
$(".navigation > ul > li > ul > li > a").on('click.screen-lt-980', function (e, data) {
data = (typeof data == 'undefined') ? {} : data;
if ($(this).next("ul").is(":visible") || data.forceClose) {
$(this).next("ul").slideUp(400);
} else {
$(".navigation > ul > li > ul > li > ul").slideUp(400);
$(this).next("ul").slideToggle(400);
}
});
$(".menu-link").on('click.screen-lt-980', function (e, data) {
data = (typeof data == 'undefined') ? {} : data;
if ($(this).next("div").is(":visible") || data.forceClose) {
$(this).next("div").slideUp(400);
} else {
$(".navigation").slideUp(400);
$(this).next("div").slideToggle(400);
}
});
}
// disable events
var disableNavigatioEvents = function () {
$(".navigation > ul > li > a").trigger('click', [{
forceClose: true
}]);
$(".navigation > ul > li > ul > li > a").trigger('click', [{
forceClose: true
}]);
$(".menu-link").trigger('click', [{
forceClose: true
}]);
$(".navigation > ul > li > a").off('click.screen-lt-980');
$(".navigation > ul > li > ul > li > a").off('click.screen-lt-980');
$(".menu-link").off('click.screen-lt-980');
}
// call this method on window resize
var redesignScreen = function () {
// function (e) { // comment this line
var width = $(window).width();
if ((width < 980)) {
if (!isNavigationEventsEnable) {
isNavigationEventsEnable = true;
enableNavigationEvents();
}
} else {
isNavigationEventsEnable = false;
disableNavigatioEvents();
}
// } // comment this line
}
$(document).ready(function () {
// attach onresize function
window.onresize = redesignScreen;
// calling redesignScreen initially
redesignScreen();
});
JSFiddle:http://jsfiddle.net/hEtTg/3/
Hopes it helps.
i want to concat some string(id) with parent id...
so i'v tried this-------------->
$(' #cate_id2 > ul > li:has(ul) ').hover(function () {
$('#cate_id2 > ul' + this + ' > ul').stop().slideDown('fast');
},
want to concat #cate_id2 > ul with this and than append > ul ....
string should becomes after execute '#cate_id2 > ul' + li:has(ul) + ' > ul'
i mean li:has(ul) will replaced by with its value.......
Try it like this
$(' #cate_id2 > ul > li:has(ul) ').hover(function () {
$(this).children('ul').stop().slideDown('fast');
}