I’m using the accordion widget in JQuery UI. their demo looks smooth… mine has a jitter after a new section is opened. I’ve tried it with and with out the easing option. What am I over looking? http://2.turtlewolf.info/
Try removing the margins from the h3 and use padding if you want space.
Margins always seem to make those query animations jumpy so never have them separated by margins.
1 Like
Hi,
In addition to what Paul says, try adding the jQueryUI accordion CSS styles to your project.
This works for me (demo):
<!doctype html>
<html>
<head>
<!-- http://www.sitepoint.com/community/t/accordion-jitter/113343/ -->
<base href="http://2.turtlewolf.info/" />
<meta charset="utf-8">
<title>Accordion</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/fonts/Harting-fontfacekit/web fonts/harting_plain_macroman/stylesheet.css">
<style>
.ui-accordion .ui-accordion-header {
display: block;
cursor: pointer;
position: relative;
margin: 2px 0 0 0;
padding: .5em .5em .5em .7em;
min-height: 0; /* support: IE7 */
font-size: 100%;
}
.ui-accordion .ui-accordion-icons {
padding-left: 2.2em;
}
.ui-accordion .ui-accordion-icons .ui-accordion-icons {
padding-left: 2.2em;
}
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
position: absolute;
left: .5em;
top: 50%;
margin-top: -8px;
}
.ui-accordion .ui-accordion-content {
padding: 1em 2.2em;
border-top: 0;
overflow: auto;
}
</style>
</head>
<body>
<div id="accordion">
<h3><a href="mailto:@gmail.com"><p id="email">Early Beta</p></a></h3>
<div>
<div id='screen'></div>
<p id="myText"></p>
</div>
<h3>First header</h3>
<div>
First content panel <p>Hello world! This is HTML5 Boilerplate.</p>
</div>
<h3>Second header</h3>
<div>Second content panel</div>
<h3>3rd header</h3>
<div>
3rd content panel <p>Hello world! This is HTML5 Boilerplate.</p>
</div>
<h3>4th header</h3>
<div>4th content panel</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
</body>
</html>
1 Like
As an aside, I found the typewriter effect maddening whilst trying to help you with this.
Maybe you should add some functionality to show this to your users only once.
Also, it should stop typing once a user clicks one of the accordion panels.
2 Likes
Thanks guys, I’m trying it now & great feed back, I was curious about turning the sound off once I open another section… haven’t really thought of how to do that yet.
Where do you have the typewriter script from?
Yes it works great! I overlooked your demo until after I had mine working, haha I noticed you took the “typing” out, it does getting annoying on about the 3rd refresh. The blue box for “focus” seems to be coming from the browser it’s self. Is there a way to override it locally to just be a white box and not show a blue around the selected header?
http://www.codeproject.com/Tips/811921/jQuery-Typewriter-Effect-on-HTML-Text
took me a second to find it again. I’ve book marked a lot of versions for different best features, but this is one of the few that had audio in sync. I was going to have it type out an email with href so they could click to open a mail client, but most have trouble parsing the html tags so I left them out for now.
As far as stopping the audio when you click on another header, it seems the audio and typing are happening at the same time, so when the sound stops the typing would still need to finish.
Now I’m curious about adding a drawer sound to the other headings opening… but that’s a lot in one thread. I can start a new topic for it…
You can do:
h3:focus{
outline: none;
}
Usability wise, this isn’t always the best idea, however.
Regarding the typing effect, when one of the headers is clicked, you need to clear the setInterval function that is running and insert the completed text into the appropriate div element.
You can do that like this (I updated my demo):
<!doctype html>
<html>
<head>
<!-- http://www.sitepoint.com/community/t/accordion-jitter/113343/ -->
<base href="http://2.turtlewolf.info/" />
<meta charset="utf-8">
<title>Accordion</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/fonts/Harting-fontfacekit/web fonts/harting_plain_macroman/stylesheet.css">
<style>
.ui-accordion .ui-accordion-header {
display: block;
cursor: pointer;
position: relative;
margin: 2px 0 0 0;
padding: .5em .5em .5em .7em;
min-height: 0; /* support: IE7 */
font-size: 100%;
}
.ui-accordion .ui-accordion-icons {
padding-left: 2.2em;
}
.ui-accordion .ui-accordion-icons .ui-accordion-icons {
padding-left: 2.2em;
}
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
position: absolute;
left: .5em;
top: 50%;
margin-top: -8px;
}
.ui-accordion .ui-accordion-content {
padding: 1em 2.2em;
border-top: 0;
overflow: auto;
}
h3:focus{
outline: none;
}
</style>
</head>
<body>
<div id="accordion">
<h3><a href="mailto:@gmail.com"><p id="email">Early Beta</p></a></h3>
<div>
<div id='screen'></div>
<p id="myText"></p>
</div>
<h3>First header</h3>
<div>
First content panel <p>Hello world! This is HTML5 Boilerplate.</p>
</div>
<h3>Second header</h3>
<div>Second content panel</div>
<h3>3rd header</h3>
<div>
3rd content panel <p>Hello world! This is HTML5 Boilerplate.</p>
</div>
<h3>4th header</h3>
<div>4th content panel</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script>
function typeWriter(l,s,a,i){
var track = "";
var len = s.length;
var n = 0;
var aud = new Audio(a);
$(l).text("");
window.si = setInterval(function(){
if(!aud.paused){
aud.pause();
aud.currentTime = 0;
}
var res = track + s.charAt(n);
$(l).text(res);
if(s.charAt(n)!==" "){
aud.play();
}
track = res;
if(n===len-1){
clearInterval(si);
}
n = n + 1;
},i);
}
</script>
<script>
$( "#accordion" ).accordion();
var text = "EarlyBeta@gmail.com";
typeWriter("#myText", text,"example.ogg",500);
$("h3").on("click", function(){
clearInterval(si);
$("#myText").text(text);
});
</script>
</body>
</html>
Awesome! thanks man… I’m almost ashamed to show you what I’m working on. I started out trying to update my resume and ended up making a website, but it hardly feels like a sample of my work when I’ve let you do all the work. but then I let my friend open it on his eye phone and realized the great challenge of all designers. I may need to look at Jquery mobile or I heard them talking about Ionic on dotnetrocks today. but this is where I’m at for now, I’ll add your updates this evening! Thank you again
Hey, no problems.
Don’t forget that people on mobile often have a slow connection, so I would be inclined to leave out the libraries (jQuery, jQuery UI and jQuery mobile) if you want the site to be snappy and responsive on those devices.
Ionic is a framework for building hybrid mobile apps and is not necessary for a portfolio site.
…well, I got the blue box to go away. the css code you showed me was easy enough. but I’ve been playing with canceling the noise for the last 2 hours. Actually it seems to work on it’s own, but I’ve added hover intent in the mean time and they both tend to work ok on their own, Is it possible they are conflicting some way. I’ve got the sound to stop, but now hovering over the other tabs doesn’t 'cause a reaction.
this variation is pretty much the same as your last one, but I broke out the css and javascript. I’m adding the hover intent on line 26 of the javascript.
Yup.
You need to alter the order of your scripts, then attach the hander to the “click hoverintent” event:
function typeWriter(l,s,a,i){
var track = "";
var len = s.length;
var n = 0;
var aud = new Audio(a);
$(l).text("");
window.si = setInterval(function(){
if(!aud.paused){
aud.pause();
aud.currentTime = 0;
}
var res = track + s.charAt(n);
$(l).text(res);
if(s.charAt(n)!==" "){
aud.play();
}
track = res;
if(n===len-1){
clearInterval(si);
}
n = n + 1;
},i);
}
$.event.special.hoverintent = {
setup: function() {
$( this ).bind( "mouseover", jQuery.event.special.hoverintent.handler );
},
teardown: function() {
$( this ).unbind( "mouseover", jQuery.event.special.hoverintent.handler );
},
handler: function( event ) {
var currentX, currentY, timeout,
args = arguments,
target = $( event.target ),
previousX = event.pageX,
previousY = event.pageY;
function track( event ) {
currentX = event.pageX;
currentY = event.pageY;
};
function clear() {
target
.unbind( "mousemove", track )
.unbind( "mouseout", clear );
clearTimeout( timeout );
}
function handler() {
var prop,
orig = event;
if ( ( Math.abs( previousX - currentX ) + Math.abs( previousY - currentY ) ) < 7 ) {
clear();
event = $.Event( "hoverintent" );
for ( prop in orig ) {
if ( !( prop in event ) ) {
event[ prop ] = orig[ prop ];
}
}
// Prevent accessing the original event since the new event
// is fired asynchronously and the old event is no longer
// usable (#6028)
delete event.originalEvent;
target.trigger( event );
} else {
previousX = currentX;
previousY = currentY;
timeout = setTimeout( handler, 100 );
}
}
timeout = setTimeout( handler, 100 );
target.bind({
mousemove: track,
mouseout: clear
});
}
};
$( "#accordion" ).accordion({
event: "click hoverintent"
});
var text = "EarlyBeta@gmail.com";
typeWriter("#myText", text,"example.ogg",500);
$("h3").on("click hoverintent", function(){
clearInterval(si);
$("#myText").text(text);
});
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.