Having Trouble Setting Up Velocity Js - javascript

I'm trying to use Velocity Js for the first time and I'm having trouble getting it to work. Below is a nav menu that I'm trying to create. Everything in the code works fine except for the Velocity Js bits. The animation for the menu even works, but the menu doesn't open. I included both links that the Velocity JS site told me to include, as well as a page link to velocity.min. js. I tried using one or the other, or both, and nothing worked. What am I missing or doing wrong here?
HTML:
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>Testing Velocity JS</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="//cdn.jsdelivr.net/npm/velocity-animate#2.0/velocity.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/velocity-animate#2.0/velocity.ui.min.js"></script>
<scrpt src="velocity.min.js"></scrpt>
<script src="navmenutest.js" async></script>
</head>
<body>
<script>document.body.classList.add('fade');</script>
<div id="container">
<div class="overlay-navigation">
<nav role="navigation">
<ul>
<li>Gallery</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
<li>Custom PC's</li>
</ul>
</nav>
</div>
<section class="home">
<div class="open-overlay">
<span class="bar-top"></span>
<span class="bar-middle"></span>
<span class="bar-bottom"></span>
</div>
</section>
JS:
$('.open-overlay').click(function() {
$('.open-overlay').css('pointer-events', 'none');
var overlay_navigation = $('.overlay-navigation'),
top_bar = $('.bar-top'),
middle_bar = $('.bar-middle'),
bottom_bar = $('.bar-bottom');
overlay_navigation.toggleClass('overlay-active');
if (overlay_navigation.hasClass('overlay-active')) {
top_bar.removeClass('animate-out-top-bar').addClass('animate-top-bar');
middle_bar.removeClass('animate-out-middle-bar').addClass('animate-middle-bar');
bottom_bar.removeClass('animate-out-bottom-bar').addClass('animate-bottom-bar');
overlay_navigation.removeClass('overlay-slide-up').addClass('overlay-slide-down')
overlay_navigation.velocity('transition.slideLeftIn', {
duration: 300,
delay: 0,
begin: function() {
$('nav ul li').velocity('transition.perspectiveLeftIn', {
stagger: 150,
delay: 0,
complete: function() {
$('nav ul li a').velocity({
opacity: [1, 0],
}, {
delay: 10,
duration: 140
});
$('.open-overlay').css('pointer-events', 'auto');
}
})
}
})
} else {
$('.open-overlay').css('pointer-events', 'none');
top_bar.removeClass('animate-top-bar').addClass('animate-out-top-bar');
middle_bar.removeClass('animate-middle-bar').addClass('animate-out-middle-bar');
bottom_bar.removeClass('animate-bottom-bar').addClass('animate-out-bottom-bar');
overlay_navigation.removeClass('overlay-slide-down').addClass('overlay-slide-up')
$('nav ul li').velocity('transition.perspectiveRightOut', {
stagger: 150,
delay: 0,
complete: function() {
overlay_navigation.velocity('transition.fadeOut', {
delay: 0,
duration: 300,
complete: function() {
$('nav ul li a').velocity({
opacity: [0, 1],
}, {
delay: 0,
duration: 50
});
$('.open-overlay').css('pointer-events', 'auto');
}
});
}
})
}
})

You misspell the scrpt keyword, It should be script.
<script src="velocity.min.js"></script>

Related

How to add some text labels to roundSlider

Below, is the html script that I have for the roundSlider widget, I was trying to add some label text into this widget but couldn't figure it out. Since I will need multiple widgets of those for my project, I will have to give each one a different label/name.
In the below attached image, thats where I am thinking of adding these labels
Please, any help would be highly appreciated. Thanks.
html script:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>roundSlider</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.js"></script>
<style>
.slider {
position: absolute;
align:center;
}
.row1 {top:100px;}
.col1 {left:75px;}
</style>
</head>
<body>
<div id="slider1" class='slider row1 col1'></div>
<!-- <p>Slider</p> -->
<script>
// create sliders
$("#slider1").roundSlider({
sliderType: "min-range",
radius: 150,
min: 0,
max: 100,
value: 0, // default value at start
//change: function(event) { $.getJSON('/valueofslider', {slide1_val: event.value}); }
change: function(event) { $.getJSON('/set_my_number/' + event.value); }
});
$("#turn_off_button").click(function(){
// set sliders
$("#slider1").data("roundSlider").setValue(0);
// send to server
$.getJSON('/valueofslider', {
slide1_val: 0,
});
});
</script>
</body>
</html>
Image:
roundSlider Image
Three roundSlides:
<meta charset="utf-8">
<title>roundSlider</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.js"></script>
<style>
.slider {
position: absolute;
align:center;
}
.row1 {top:100px;}
.row2 {top:450px;}
.row3 {top:750px;}
.col1 {left:75px;}
.col2 {left:470px;}
.col3 {left:870px;}
</style>
</head>
<body>
<div id="slider1" class='slider row1 col1'></div>
<div id="slider2" class='slider row1 col2'></div>
<div id="slider3" class='slider row1 col3'></div>
<script>
// create sliders
$("#slider1").roundSlider({
sliderType: "min-range",
radius: 150,
min: 0,
max: 100,
value: 0, // default value at start
//change: function(event) { $.getJSON('/valueofslider', {slide1_val: event.value}); }
change: function(event) { $.getJSON('/set_my_number/' + event.value); }
});
$("#slider2").roundSlider({
sliderType: "min-range",
radius: 150,
min: 0,
max: 1000,
value: 0, // default value at start
//change: function(event) { $.getJSON('/valueofslider', {slide2_val: event.value}); }
change: function(event) { $.getJSON('/set_abcd/' + event.value); }
});
$("#slider3").roundSlider({
sliderType: "min-range",
radius: 150,
min: 0,
max: 10000000000,
value: 0, // default value at start
//change: function(event) { $.getJSON('/valueofslider', {slide3_val: event.value}); }
change: function(event) { $.getJSON('/set_fghkva/' + event.value); }
});
$("#turn_off_button").click(function(){
// set sliders
$("#slider1").data("roundSlider").setValue(0);
// send to server
$.getJSON('/valueofslider', {
slide1_val: 0,
});
});
</script>
</body>
</html>
Remove the position absolute so that your text appears after the slider.
Hope this is what you expected.
If you are using multiple sliders use flex to add numerous sliders with one parent div for both the slider and paragraph
<meta charset="utf-8">
<title>roundSlider</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.js"></script>
<style>
.container {
display: flex;
}
.child
{
margin-left:100px;
}
</style>
<body>
<div class="container">
<div class="child">
<div id="slider1" class='slider row1 col1'></div>
<center>
<p>slider1</p>
</center>
</div>
<div class="child">
<div id="slider2" class='slider row1 col2'></div>
<center>
<p>slider1</p>
</center>
</div>
<div class="child">
<div id="slider3" class='slider row1 col3'></div>
<center>
<p>slider1</p>
</center>
</div>
</div>
<script>
// create sliders
$("#slider1").roundSlider({
sliderType: "min-range",
radius: 150,
min: 0,
max: 100,
value: 0, // default value at start
//change: function(event) { $.getJSON('/valueofslider', {slide1_val: event.value}); }
change: function(event) {
$.getJSON('/set_my_number/' + event.value);
}
});
$("#slider2").roundSlider({
sliderType: "min-range",
radius: 150,
min: 0,
max: 1000,
value: 0, // default value at start
//change: function(event) { $.getJSON('/valueofslider', {slide2_val: event.value}); }
change: function(event) {
$.getJSON('/set_abcd/' + event.value);
}
});
$("#slider3").roundSlider({
sliderType: "min-range",
radius: 150,
min: 0,
max: 10000000000,
value: 0, // default value at start
//change: function(event) { $.getJSON('/valueofslider', {slide3_val: event.value}); }
change: function(event) {
$.getJSON('/set_fghkva/' + event.value);
}
});
$("#turn_off_button").click(function() {
// set sliders
$("#slider1").data("roundSlider").setValue(0);
// send to server
$.getJSON('/valueofslider', {
slide1_val: 0,
});
});
</script>
</body>
</html>
In roundSlider you have the tooltipFormat property, through which you can make any custom tooltip text or element.
Refer the below demos:
https://jsfiddle.net/soundar24/deLqk8sr/
https://jsfiddle.net/soundar24/deLqk8sr/1
https://jsfiddle.net/soundar24/deLqk8sr/131/
https://roundsliderui.com/demos.html#custom-tooltip
Some use-case demos:
https://jsfiddle.net/soundar24/j7ady5o8/
https://jsfiddle.net/soundar24/jwjwrLw7/
Hopes this helps you...
Just use the below inside the call to roundSlider after the change event
create: function(event) {$(".rs-tooltip-text").append("<br/><span>test</span>");}
just uses the class for the existing tooltip and appends some html after that

Jquery animation pagePiling

I am looking for jquery animation similar to this website http://cuberto.com/.
So far i have accomplished this link http://codepen.io/mirmibrahim/pen/MJoGBY through pagePiling.js. Can anyone assist me complete it exactly the way on curberto. I dont know how to load half of the page with image and half with text and open the next section to be from the square animating on first slide.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pagePiling.js plugin - Horizontal scroll</title>
<meta name="author" content="Alvaro Trigo Lopez" />
<meta name="description" content="pagePiling.js plugin by Alvaro Trigo." />
<meta name="keywords" content="pile,piling,piling.js,stack,pages,scrolling,stacking,touch,fullpile,scroll,plugin,jquery" />
<meta name="Resource-type" content="Document" />
<link rel="stylesheet" type="text/css" href="../jquery.pagepiling.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!--script src="../jquery-1.9.1.js"></script-->
<script type="text/javascript" src="../jquery.pagepiling.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/*
* Plugin intialization
*/
$('#pagepiling').pagepiling({
direction: 'horizontal',
menu: '#menu',
scrollingSpeed: 2000,
anchors: ['page1', 'page2', 'page3', 'page4'],
sectionsColor: ['black', '#1C252C', '#F27B1D', '#39C'],
navigation: {
'position': 'right',
'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Pgae 4']
},
afterRender: function() {
$('#pp-nav').addClass('custom');
console.log("After Render ");
},
afterLoad: function(anchorLink, index) {
// $.fn.pagepiling.setAllowScrolling(false);
console.log("After Load " + index);
if (index == 1) {
console.log("index " + index);
} else if (index == 2) {
}
if (index > 1) {
$('#pp-nav').removeClass('custom');
} else {
$('#pp-nav').addClass('custom');
}
},
onLeave: function(index, nextIndex, direction) {
console.log("After Load " + index);
if (index == 1) {
/* $( "#block" ).animate({
width: "100%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "12em",
borderWidth: "20px"
}, 4000 , function() {
// Animation complete.
//alert("s");
});
*/
$("#block").animate({
width: "58%"
}, 1000, function() {
console.log("animation finished");
$.fn.pagepiling.setScrollingSpeed(500);
});
} else if (index == 2 && nextIndex == 1) {
$("#block").animate({
width: "0%"
}, 3000, function() {
console.log("animation finished");
$.fn.pagepiling.setScrollingSpeed(2000);
});
}
}
});
});
</script>
<style>
#section1 img {
margin: 20px 0;
opacity: 0.7;
}
/* colors
* --------------------------------------- */
#colors2,
#colors3 {
position: absolute;
height: 163px;
width: 362px;
z-index: 1;
background-repeat: no-repeat;
left: 0;
margin: 0 auto;
right: 0;
}
#colors2 {
background-image: url(imgs/colors2.gif);
top: 0;
}
#colors3 {
background-image: url(imgs/colors3.gif);
bottom: 0;
}
/* Overwriting fullPage.js tooltip color
* --------------------------------------- */
#pp-nav.custom .pp-tooltip {
color: #AAA;
}
</style>
</head>
<body>
<ul id="menu">
<li data-menuanchor="page1" class="active">Page 1</li>
<li data-menuanchor="page2">Page 2</li>
<li data-menuanchor="page3">Page 3</li>
</ul>
<div id="pagepiling">
<div class="section" id="section1">
<!--img src="imgs/pagePiling-plugin.gif" alt="pagePiling" /-->
<div class="intro">
<div>
<div style="background:#F6303F;border-left: thick solid #F6303F; height:150px; width:8px; margin-left:42%;" id="block">
</div>
<h1 style="color: white;">DIGITAL</h1>
<p style="color: white;">CREATIVE AGENCY</p>
</div>
</div>
</div>
<div class="section">
<div class="intro">
<h1>Simple to use</h1>
<p>Just use the option direction: 'horizontal' to have it working!</p>
</div>
</div>
<div class="section" id="section3">
<div class="intro">
<h1>Isn't it great?</h1>
<p>Just as you expected!</p>
<div id="colors2"></div>
<div id="colors3"></div>
</div>
</div>
</div>
</body>
</html>
I think pagepiling.js might be the wrong direction because it just animates on one page, rather than animating between two pages.
The way I've handled stuff like this in the past is with a PJAX plugin like Barba.JS, which allows you to add animated transitions between site navigation events. Barba hijacks the page change by changing the URL manually, grabbing new content for the new page, and performing a transition (in which you can animate elements like Cuberto does!) between the old and new pages.
Let me know if this is helpful, or if I missed the point, and I'll try to update my answer accordingly!
EDIT: Just realized this is a seven-month old question, but hopefully this is helpful to someone nonetheless!

HTML Header Menu Drop-Down Is Impossible To Click On

Ok. I have a header I've designed in HTML - however every time I attempt hover over products, then click on ANY sub menu - I am unable to (they disappear before they are clickable.)
A live example of this can be seen at http://www.bwl-ny.com
Any suggestions?
Custom.js
$(document).ready(function() {
//INITIALIZES PRETTYPHOTO PLUGIN
$("a[rel^='prettyPhoto']").prettyPhoto({theme:'light_square'}); //choose between different styles / dark_rounded / light_rounded / dark_square / light_square / facebook /
//INITIALIZES TWITTER FEED PLUGIN
$('.twitter-feed').tweet({
username: 'ABrighterWorld', //just enter your twitter username
join_text: 'auto',
avatar_size: null,
count: 2, //number of tweets showing
auto_join_text_default: '',
loading_text: 'loading latest tweets...' //text displayed while loading tweets
});
// FLICKR PLUGIN
$('#flickr-images').append('<ul></ul>');
$('#flickr-images ul').jflickrfeed({
limit: 10,
qstrings: {
id: 'myflickrID', // enter Flickr ID i.e. 67956216#N02
tags: 'tags-here' // Displays images with selected tags (optional)
},
itemTemplate: '<li><a href="{{image_b}}" rel="prettyPhoto" ><img src="{{image_s}}" alt="{{title}}" /></a></li>'
}, function(data) {
$('#flickr-images li a').prettyPhoto({theme:'light_square'});
});
// TEXTBOX ACTIVE
$('.textbox, #message, #comment').focus(function (){
$(this).css({borderColor : '#bbb'});
$(this).blur(function (){
$(this).css({borderTopColor : '#d1d1d1', borderLeftColor : '#d1d1d1', borderBottomColor : '#e1e1e1', borderRightColor : '#e1e1e1'});
});
});
//TAB NAVIGATION
$('ul.tab-nav').tabs('.tabs > .tab-panels > div', {effect: 'fade'});
// PORTFOLIO HOVER EFFECT - OVERLAY
$('.gallery-overlay a img').hover(function() {
$(this).stop().animate({
opacity : '.1'
}, 300);
}, function() {
$(this).stop().animate({
opacity : '1'
}, 500);
});
// PORTFOLIO FILTER
$('ul#filter a').click(function() {
$(this).css('outline','none');
$('ul#filter .active-filter').removeClass('active-filter');
$(this).parent().addClass('active-filter');
var filterVal = $(this).attr('href').toLowerCase().replace(' ','-');
if(filterVal == 'all') {
$('ul.gallery-thumbs li.hidden').fadeIn('slow').removeClass('hidden');
} else {
$('ul.gallery-thumbs li').each(function() {
if(!$(this).hasClass(filterVal)) {
$(this).fadeOut('normal').addClass('hidden');
} else {
$(this).fadeIn('slow').removeClass('hidden');
}
});
}
return false;
});
//TOGGLE PANELS
$('.toggle-content').hide(); //hides the toggled content, if the javascript is disabled the content is visible
$('.toggle-header a').click(function () {
if ($(this).is('.tog-close')) {
$(this).removeClass('tog-close')
.addClass('tog-open')
.closest('.toggle-header')
.next('.toggle-content')
.slideToggle(300);
return false;
}
else {
$(this).removeClass('tog-open')
.addClass('tog-close')
.closest('.toggle-header')
.next('.toggle-content')
.slideToggle(300);
return false;
}
});
// TOOLTIPS
$('.social-links li[title]').tooltip({
effect: 'fade',
fadeInSpeed: 300,
fadeOutSpeed: 200,
opacity: 0.9,
offset: [-5, 0]
});
// SOCIAL LINKS
$(function() {
$('.social-links li').animate({
opacity : '.4' // sets the opacity to 50% to all social link images
});
$('.social-links li').hover(function() {
$(this).stop().animate({
opacity: '1' // on hover sets the opacity to 100% to all social link images
});
}, function() {
$(this).stop().animate({
opacity : '.4'
});
});
});
// SCROLL TOP
$('.scroll-top').hover(function() {
$(this).stop().animate({
opacity : '1'
}, 300);
}, function() {
$(this).stop().animate({
opacity : '.6'
}, 500);
});
$('.scroll-top').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
//NAVIGATION DROPDOWN ANIMATION
$('#navigation ul').css({display: 'none'}); // Opera Fix
$("ul#navigation").superfish({
hoverClass: 'dropdown', // the class applied to hovered list items
pathClass: 'overideThisToUse', // the class you have applied to list items that lead to the current page
pathLevels: 1, // the number of levels of submenus that remain open or are restored using pathClass
delay: 1000, // the delay in milliseconds that the mouse can remain outside a submenu without it closing
animation: {opacity:'show',height:'show'}, // an object equivalent to first parameter of jQuery’s .animate() method
speed: 'fast', // speed of the animation. Equivalent to second parameter of jQuery’s .animate() method
autoArrows: false, // if true, arrow mark-up generated automatically = cleaner source code at expense of initialisation performance
dropShadows: false
});
// IE Button hover fix
$(function (){
var button = $('.button');
if ($.browser.msie) {
$(button).css( {backgroundPosition: "-20px 35px"} ).hover(function() {
$(this).stop()
.animate({
backgroundPositionX: "-20px",
backgroundPositionY: "94px"
},300);
},
function() {
$(this).stop().animate({
backgroundPositionX: "-20px",
backgroundPositionY: "35px"
},300).css({backgroundPosition: "-20px 35px"});
});
}
});
}); //END of jQuery
HTML Source:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Brighter World Lighting - NY</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--imports the main css file-->
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<!--imports prettyPhoto css file-->
<link rel="stylesheet" type="text/css" media="screen" href="css/prettyPhoto.css" />
<!--imports jquery-->
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<!--imports twitter feed plugin-->
<script type="text/javascript" src="js/jquery.tweet.js"></script>
<!--imports easing plugin-->
<script type="text/javascript" src="js/easing.js"></script>
<!--imports prettyPhoto plugin-->
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<!--imports jQuery Tools plugin-->
<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<!--imports jQuery superfish plugin-->
<script type="text/javascript" src="js/superfish.js"></script>
<!--imports jQuery jflickrfeed plugin-->
<script type="text/javascript" src="js/jflickrfeed.min.js"></script>
<!--imports jQuery AsyncSlider plugin-->
<script type="text/javascript" src="js/jquery.asyncslider.min.js"></script>
<!--imports custom javascript code-->
<script type="text/javascript" src="js/custom.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
// Setup Slider
$("#async-slider").asyncSlider({
keyboardNavigate: true,
easing: 'easeInOutExpo',
minTime: 600,
maxTime: 1500,
autoswitch: 4800,
centerPrevNextNav: false,
slidesNav: false
});
});
</script>
<!--[if IE 7]><link href="css/ie7.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
<!--[if IE 8]><link href="css/ie8.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
</head>
<body>
<div id="header" class="pattern-1">
<div id="header-inner">
<div id="logo">
<img src="img/logo.png" alt="image description" />
<div id="title">
<h1></h1>
<p></p>
</div><!-- end title -->
</div><!-- end logo -->
<ul id="navigation">
<li>
<a class="active-nav" href="index.asp">Home</a>
</li>
<li>
<a href="partnership.html">
Energy Partnership Program
</a>
</li>
<li>
<a href="http://bwl.ereverseauction.com">
Energy Auction
</a>
</li>
<li>
Affiliates
</li>
<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current_page_ancestor menu-item-23">
Products
<ul class="sub-menu">
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-31">
Indoor Lighting
</li>
<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34">
Outdoor Lighting
<ul class="sub-menu">
<li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-68">Street Lighting</li>
</ul>
</li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30">OEM/ODM Support</li>
</ul>
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
</ul><!-- end navigation -->
It s becuase of a CSS rule. It is in file style.css line 557, selector of media="screen"
#navigation ul margin-top: 24px. This pushes the child UL below the parent, so when you hover the parent, it displays, but as soon as you go down, you move off the parent element and into the top margin of the child, you are not hovering the parent anymore so the child disappears. This top margin, is causing a 'gap' between them, so you have to be really quick to keep the hover event to keep the child open. I would possibly change it to a padding? but you will need to change you background color from the UL to the LI, or potentially add a delay in the hover event to give them time to move down to the child elements, but if they hover in the gap, it could still disappear on them
It is a simple fix. In your custom.js javascript file you have the following code:
$("ul#navigation").superfish({
// the class applied to hovered list items
hoverClass: 'dropdown',
// the class you have applied to list items that
// lead to the current page
pathClass: 'overideThisToUse',
// the number of levels of submenus that remain
// open or are restored using pathClass
pathLevels: 1,
// the delay in milliseconds that the mouse can
// remain outside a submenu without it closing
delay: 300,
// an object equivalent to first parameter of
// jQuery's .animate() method
animation: { opacity: 'show', height: 'show' },
// speed of the animation. Equivalent to second
// parameter of jQuery's .animate() method
speed: 'fast',
// if true, arrow mark-up generated
// automatically = cleaner source code at expense of initialisation
// performance
autoArrows: false,
dropShadows: false
});
To fix your problem all you should have to do is increase the 300 parameter to something like 1000 (1 second), this gives the user time to hover to the navigation sub menu. Play around with the time until you find something that fits what you want. Other than that, the site looks great; pm me if you have any other questions.

creating page navigation unable to hide and show containers

i am trying to do a single page navigation, but unable to show and hide other containers.
basicall, it is 3 links . i capture the click event and set the appropriate container hide or show with sliding effect.
code is shown below. Thanks for help.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.current
{
display: block;
}
#about_container, #principles_container, #programs_container
{
display: none;
}
</style>
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('[id^=btn_]').click(function (event) {
event.preventDefault();
//here you can also do all sort of things
var elementToShowId = this.id;
elementToShowId = elementToShowId.replace("btn_", "") + "_container";
alert(elementToShowId);
if ($('.current').exists()) {
$(".current").hide('slide', { direction: 'right',
complete: function () {
show(elementToShowId);
$(this).removeClass('current');
}
}, 500, null);
}
else {
show(elementToShowId);
}
if ($('.active').exists()) {
$(".active").removeClass('active');
}
$(this).addClass('active');
});
});
function show(elementId) {
$("#" + elementId).show('slide', { direction: 'left', complete: function () {
$(this).addClass('current');
if (elementId == "contact") {
initializeMap();
}
}
}, 500, null);
}
</script>
</head>
<body>
<ul>
<li><a id="btn_about" href="#about"><strong>About</strong></a></li>
<li><a id="btn_principles" href="#principles"><strong>Principles</strong></a></li>
<li><a id="btn_programs" href="#programs"><strong>Programs</strong></a></li>
</ul>
<div id="home_container" class="current">
Home</div>
<div id="about_container">
about</div>
<div id="principles_container">
principles</div>
<div id="programs_container">
programs</div>
</body>
</html>
U can try this:
#about_container, #principles_container, #programs_container
{
display: none !important;
}

Live Scroll Issues (JS)

Im working on a website right now and have run into an issue. Im pretty new to all of this so im sure its a simply fix. basically, i would like to use javascript to have an onlick event in which clicking a link in the header will result in a live animated scroll down to a point on the page. The issue? no live scroll, it just jumps. heres a snippet of the code. thanks!
<head style="overflow-x: hidden">
<title>Dupont Studios</title>
<link href= 'style.css' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oxygen:300' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="waypoints.js"></script>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script>
$(function() {
// Do our DOM lookups beforehand
var nav_container = $(".nav-container");
var nav = $("nav");
nav_container.waypoint({
handler: function(direction) {
nav_container.toggleClass('sticky', direction=='down');
}
});
});
</script>
<script>
$(".nav-item").on("click", function( e ) {
e.preventDefault();
$("body, html").animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 600);
});
</script>
</head>
<div id = 'nav-items-container'>
<ul class = 'nav-items'>
<li class = 'nav-item'><a href='#what'>what</a></li>
<li class = 'nav-item'><a href='#how'>how</a></li>
<li class = 'nav-item'><a href='#why'>why</a></li>
<li class = 'nav-item'><a href='#where'>where</a></li>
<li class = 'nav-item'><a href='#who'>who</a></li>
</ul>
</div>
example of a jump point:
<div class = 'mark' id = 'how'></div>
another attempt at the js which doesnt work
$("a.nav-item").click(function() {
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top + "px"}, {duration: 500, easing: "swing"
});
return false;
});
It didn't work out because you tried my answer from This Question but you have a different setup.
So this will work:
$("li.nav-item").click(function() {
$("html, body").animate({
scrollTop: $($(this).children().attr("href")).offset().top + "px"}, {duration: 500, easing: "swing"
});
return false;
});
The point is that the element you are looking for #tag is inside an A element inside the LI element. Ypu can see a Fiddle here
EDITED
There are quite a few errors in your document, that's why is not working. When in trouble open FF or Chrome Dev Tools (Console...) so that you can see what's wrong. There is an error within the code "waypoint" and can't load it. I commented it for now. The following works like a charm:
<html>
<head style="overflow-x: hidden">
<title>Dupont Studios</title>
<link href= 'style.css' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oxygen:300' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
$(document).ready(function(){
/*Do our DOM lookups beforehand
var nav_container = $(".nav-container");
var nav = $("nav");
nav_container.waypoint({
handler: function(direction) {
nav_container.toggleClass('sticky', direction=='down');
}
});*/
$("li.nav-item").click(function() {
alert("ok");
$("html, body").animate({
scrollTop: $($(this).children().attr("href")).offset().top + "px"}, {duration: 500, easing: "swing"
});
return false;
});
});
</script>
<style type="text/css">
.long_div{
background-color: lightblue;
min-height: 600px;
border: thin solid blue;
}
</style>
</head>
<body>
<div id = 'nav-items-container'>
<ul class = 'nav-items'>
<li class = 'nav-item'><a href='#what'>what</a></li>
<li class = 'nav-item'><a href='#how'>how</a></li>
<li class = 'nav-item'><a href='#why'>why</a></li>
<li class = 'nav-item'><a href='#where'>where</a></li>
<li class = 'nav-item'><a href='#who'>who</a></li>
</ul>
</div>
<div id="what" class="long_div">
What
</div>
<div id="how" class="long_div">
How
</div>
<div id="why" class="long_div">
Why
</div>
</body>
</html>

Categories

Resources