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.
Related
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>
I am new to HTML, CSS and JS/jQuery. I'm creating a test website just to get familiar with jQuery and can't seem to figure an issue out.
I have a navigation bar at the top of the page which contains a logo on the left and links on the right. I've set up the below jQuery code to fade the links in and out upon mouse enter/leave:
$(document).ready(main);
function main() {
$('.marquee').marquee({
/* pauseOnHover: true */
})
$('.nameorlogo, .navitems').mouseenter(function() {
$('.nameorlogo').fadeTo('fast', 1);
$('.navitems').fadeTo('fast', 1);
})
$('.nameorlogo, .navitems').mouseleave(function() {
$('.nameorlogo').fadeTo('fast', 0.5);
$('.navitems').fadeTo('fast', 0.5);
})
};
Here is the html:
<!DOCTYPE html>
<html>
<head>
<title>JSTest1</title>
<link href="../css/style.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src='../js/jquery-3.2.0.js'></script>
<script type="text/javascript" src='../js/main.js'></script>
<script type="text/javascript" src='../js/marquee.js'></script>
</head>
<body>
<header class=topheader>
<nav class=navtop>
<div class=nameorlogo>
<h1>JSTest1</h1>
</div>
<div>
<ul class=navitems>
<li>Contact</li>
<li>Services</li>
<li>About</li>
<li>Home</li>
</ul>
</div>
</nav>
</header>
<main>
<div class=marquee>This is a test for JavaScript</div>
</main>
</body>
</html>
The problem I have is when I hover over a link, either nav links or the logo, everything fades in and out, I want them all to be independant.
I know you can do this in CSS, this is purely to help me learn and understand.
Thanks for your help.
Jim
Use the the this keyword like $(this) to refer to the currently hovered item
$(this).fadeTo('fast', 1);
Also, notice that .navitems is the whole UL element, while you need to target the LI elements. Therefore
$('.nameorlogo, .navitems li').mouseenter(function()
Additionally here's other similar ways to achieve what you desire:
using .on() method
$('.nameorlogo, .navitems li').on({
mouseenter : function() {
$(this).stop().fadeTo(250, 1);
},
mouseleave : function() {
$(this).stop().fadeTo(250, 0.5);
},
});
// .stop() is here to prevent animation buildups
.nameorlogo,
.navitems li{
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=nameorlogo>
<h1>JSTest1</h1>
</div>
<div>
<ul class=navitems>
<li>Contact</li>
<li>Services</li>
<li>About</li>
<li>Home</li>
</ul>
</div>
Using .hover() method
$('.nameorlogo, .navitems li').hover(function(evt) {
var isMouEnt = evt.type === "mouseenter";
$(this).stop().fadeTo(250, isMouEnt ? 1 : 0.5);
});
// .stop() is here to prevent animation buildups
.nameorlogo,
.navitems li{
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=nameorlogo>
<h1>JSTest1</h1>
</div>
<div>
<ul class=navitems>
<li>Contact</li>
<li>Services</li>
<li>About</li>
<li>Home</li>
</ul>
</div>
I have the following code.
When I select a link, it goes from blue to red - great!
When I refresh the page, the clicked link will remain red - great!
When I click the red link, it returns to blue - great!
However, when I refresh the page that blue link goes red - not great!
I want it to remain blue when refreshed. Can someone help me out with this?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<style type='text/css'>
a {color: blue}
.active {color:red}
</style>
<script type='text/javascript'>
$(document).ready(function(){
$('.filters a').on('click', function() {
var data_filter = $(this).closest("a").data('filter');
if($(this).hasClass("active")) {
$(this).removeClass("active");
localStorage.setItem(data_filter,true);
}
else {
$(this).addClass("active");
localStorage.setItem(data_filter,false);
}
});
$('.filters a').each(function(){
var data_filter = $(this).closest("a").data('filter');
var checked = localStorage.getItem(data_filter);
if(checked){
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
});
</script>
</head>
<body>
<div class="filters slide-down">
<ul class="groups inline naked right">
<li class="group">
<h3 class="text-right filter-heading trigger" data-target="#colours_filters">Colour</h3>
<ul class="naked" id="colours_filters">
<li class="filter-option">Black</li>
<li class="filter-option">Blue</li>
<li class="filter-option">Brown</li>
<li class="filter-option">Gray</li>
</ul>
</li>
<li class="group">
<h3 class="text-right filter-heading trigger" data-target="#theme_filters">Theme</h3>
<ul class="naked" id="theme_filters">
<li class="filter-option">Carefree</li>
<li class="filter-option">Decay</li>
<li class="filter-option">Dramatic</li>
<li class="filter-option">Family</li>
<li class="filter-option">Nautical</li>
</ul>
</li>
</li>
</ul>
</body>
</html>
it should be $('.filter-option a'), not $('.filters a').
localStorage setting true and false should change their places (true when it was false and vice versa).
if (checked) actually will work even for false value, because it turns out that checked is String, not Boolean. So it should be if (checked == 'true')
I also simplified some places in code.
Updated fiddle.
$(document).ready(function()
{
$('.filter-option a').on('click', function()
{
var data_filter = $(this).data('filter');
$(this).toggleClass("active");
localStorage.setItem(data_filter, $(this).hasClass("active"));
});
$('.filter-option a').each(function()
{
var data_filter = $(this).data('filter');
var checked = localStorage.getItem(data_filter);
if (checked == 'true')
{
$(this).addClass('active');
}
});
});
I have searched for 3 days the web to find a solution to my simple problem.
I try to run the pause function in a external <a> tag from this script: http://www.twospy.com/galleriffic/js/jquery.galleriffic.js
pause: function() {
this.isSlideshowRunning = false;
if (this.slideshowTimeout) {
clearTimeout(this.slideshowTimeout);
this.slideshowTimeout = undefined;
}
I tried something like this: pause
edit: whole script:
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/galleriffic-2.css" type="text/css" />
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
<!-- We only want the thunbnails to display when javascript is disabled -->
<script type="text/javascript">
document.write('<style>.noscript { display: none; }</style>');
</script>
</head>
<body>
<!-- Start Advanced Gallery Html Containers -->
<div id="gallery" class="content">
<div id="controls" class="controls"></div>
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
<a id="sstop" href="#">pause</a> <!--here the link-->
<div id="caption" class="caption-container"></div>
</div>
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<li>
...
</ul>
</div>
<div style="clear: both;"></div>
<script type="text/javascript">
var galleryswtch=0;
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
//$('div.content').css('display', 'none');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 3,
preloadAhead: 10,
enableBottomPager: true,
maxPagesToShow: 11,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '‹ Previous Photo',
nextLinkText: 'Next Photo ›',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: false,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onPageTransitionOut: function(callback) {
this.animate({opacity: '0'}, 500, 'linear', callback);
},
onPageTransitionIn: function() {
this.animate({opacity: '1'}, 500, 'linear');
}
});
$('#sstop').click(function() {$('#gallery').galleriffic('pause');}); //here the js
});
</script>
</body>
As Galleriffic is a jQuery extension that acts on DOM elements it should be:
$(myselector).galleriffic("pause");
where myselector is a reference to whichever element has had the gallery attached to it [e.g. '#thumbs' if you're using the same element IDs as in the Galleriffic examples.]
Ideally, make this association in your JS files rather than doing it inline in the HTML by first giving your link and ID:
Pause
and then:
$(document).ready(function() {
// do all of the rest of your galleriffic setup
$('#thumbs').galleriffic(
// initial options
);
// and then link the pause link with the gallery
$('#pause_link').click(function() {
$('#thumbs').galleriffic('pause');
});
});
[rationale - in modern HTML putting your Javascript inline is considered "olde worlde"]
To invoke a function with no parameters (such as this one), you should call it like pause().
try this
yourobjectname.pause();
Any reason why
$('#myElement').delay(2000)
wont work?
or is it pausing for undefined time?
if so just make a new function and call it on your a.click event :)
I have a JavaScript slide-out menu on my page. As the page is loading the menu shows in the wrong place and as opened (it should be closed by default). It then jumps into the correct position and state once the page has loaded.
I would like the menu to either load last or be in the correct position to start with. I have tried making the style for the menu hidden and the display it as a block on page load with JavaScript but the menu just stays hidden.
<link rel="stylesheet" type="text/css" media="all" href="<css/style.css" />
<link rel="stylesheet" type="text/css" media="all" href="</css/reset.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tabSlideOut.v1.3.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle',
pathToTabImage: 'images/closed_menu.png', //class of the element that will become your tab
imageHeight: '230px', //height of tab image //Optionally can be set using css
imageWidth: '62px', //width of tab image //Optionally can be set using css
tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
speed: 600, //speed of animation
action: 'hover', //options: 'click' or 'hover', action to trigger animation
topPos: '270px', //position from the top/ use if tabLocation is left or right
leftPos: '30px', //position from left/ use if tabLocation is bottom or top
fixedPosition: false //options: true makes it stick(fixed position) on scroll
});
$("div.slide-out-div").mouseover(function(){
$('.handle').css("background-image", "url(images/open_menu.png)");
}).mouseout(function(){
$('.handle').css("background-image", "url(images/closed_menu.png)");
});
$('#sliderimages').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
next: '#next',
prev: '#prev'
});
});
</script>
<body onload="javascript:document.getElementByClass('slide-out-div').style.display = 'block';">
and then the CSS
.slide-out-div {
display: none;
padding-left: 0px;
width: 200px;
z-index: 3;
position: relative;
}
A possible solution might be this. In the <head> of your html add:
<script>document.documentElement.className += ' js'</script>
This will add a "js" class onto the <html> element.
Next, in your css file style your menu as you would normally, but immediately after, hide it by adding the .js class. For example:
.menu { /* your normal styling goes here */ }
.js .menu { display: none; }
This makes sure that your menu is shown in clients that do, for whatever reason, not support JavaScript but hidden in clients that do support JavaScript.
Next up, adapt your JavaScript file to show the slide-out menu when needed.
Looked at this with fresh eyes this morning and just realised I was using trying to use a Class in my Javascript and not an ID.
I changed from this
<body onload="javascript:document.getElementByClass('slide-out-div').style.display = 'block';">
to this
<body onload="javascript:document.getElementById('menu').style.display = 'block';">