I would like to create my own accordion component without using any AJAX toolkits, mostly for learning purposes. I am not sure quite where to start with this one. I'm assuming I would begin by creating div's for each section in the accordion. Perhaps each div would contain a header, which would be the actual button selected to move the accordion to that section. I am not sure the correct approach to take once an accordion's section button is selected though. Would I use the z-order, so that each section is of a higher z-order? Any help is appreciated.
Thanks
I would highly recommend picking up a book such as John Resig's Pro JavaScript techniques that will give you some ideas and initial thoughts about how to approach bulding your own client-side solutions.
Essentially, you would have an element to act as a header, for example <h1> or <div> under which you would have a <div> with an initial style of display: none;. Set up an event handler on the click event of the header to change the style of the div below to display: block and ensuring that any other content <div>s are hidden (do this by using a CSS class on each content <div> for example).
I'll leave the smooth animation to you as an exercise for how it might be accomplished. As a hint, I would recommend looking at how a JavaScript library like jQuery handles animation, by checking out the source.
The best way to order it would be like this
<div id="accordion">
<h3 class="accordion title">Title</h3>
<div class="accordion section">
Section Content
</div>
<h3 class="accordion title">Title 2</h3>
<div class="accordion section">
Section Content
</div>
<h3 class="accordion title">Title 3</h3>
<div class="accordion section">
Section Content
</div>
<h3 class="accordion title">Title 4</h3>
<div class="accordion section">
Section Content
</div>
</div>
You would want to avoid z-order entirely because it is a compatibility mess. Instead you would have the accordion titles be what you would click to open the accordion. You would want to set all of the accordion section <div>'s to visibility:hidden; by default, and then, when one of them is clicked, change it's visibility, and hide all the others. If you want it to work with any amount of accordion sections, you would have it count each <h3 class="accordion title"> and each <div class="accordion section">, and pair those up into an array. When a title is clicked, show it's corresponding div. Alternatively you could give each one a separate ID, but the first way would be much more useful.
Actually, it might be display:none; instead of visibility:hidden;, I would try both.
In addition it's worth mentioning that the animation is usually handled by changing things like the size of the div, so if you were hiding a section, you would make the height smaller and smaller until it reaches 0 and is hidden.
See this question, you will notice my answer contains a demo with the basic workings that should get you started. It was only asked a few minutes ago!
It uses jQuery.
Related
i need some help with a problem.
I have a sticky header, and he's actually coming from top to bottom while scrolling.
I need to make a javascript that makes it stop when it meets a specific element with a data-attribute.
Lets say this is the the structure
<div class="header" data-attribute="header-sticky"></div>
<div class="destination element" data-attribute="destination">
</div>
<div class="destination element" data-attribute="destination">
</div>
<div class="destination element" data-attribute="destination2">
</div>
i want to make the logic to stop it when scrolling when it reaches the first data-attribute.
(the idea is that we gonna stop it at first data-attribute selected if there is more than one with the same name) otherwise we can decide which element we have to reach (for example destination2)
Thank you all
I want to implement carousel on my web page.I have created a plunker page for the same.
In that link, i have used CSS3 transformations to create circle effects.
In the above link i have removed the code which i had for carousel implementation because it was not working.Actually what happens is that most of the jquery caosuel available like(elastslide,liquidcarosel,flexslider) etc work only if the img(which needs to be slided) is directly under "li" tag.But in my case, i can't keep img directly under "li" because of the css3 transformations i need.(See index.html page)
http://plnkr.co/edit/PxTtJ2expidIamWUqXLj?p=preview&s=carousel
for eg
<li>
<div class="ch-item">
<div class="ch-info ch-info1" >
</div>
<div class="ch-thumb ch-img-1">
<p class="text"> Java7</p>
</div>
</div>
</li>
Could anyone please suggest how can i implement it.
I have this code : http://jsfiddle.net/Qchmqs/BSKrG/
<div class="step"><-- this is darned wrong
<div id="step2"><a>Darn</a></div>
<div id="step2"><a>Darn</a></div>
<div id="step2"><a>Darn</a></div>
</div>
<div class="step"><-- this works fine
<div id="step2"><a>Darn</a>
<a>Darn</a>
<a>Darn</a></div>
</div>
The first block is three links inside three separate divs inside a surrounding div
The bottom block has the links inside one parent div
I am trying to change the background of an active link, but it won't turn off in the upper block.
The script works well with the bottom links but not working as expected with the upper ones
PS : The active class should be toggled only from the Links i have a lot of other scripts in the page that uses the .active links from this list.
For starters, do what JamesJohnson said and remove the multiple IDs. They can only cause you problems down the road.
In the upper links, the a tags aren't siblings because you put each one in its own div. So you need to do this to remove classes from the other as:
$(this).parent().siblings('div').children('a').removeClass('active');
http://jsfiddle.net/mblase75/BSKrG/1/
Unfortunately, that breaks the functionality on the lower links. You can achieve success in both places by adding andSelf to the parent siblings:
$(this).parent().siblings('div').andSelf().children('a').removeClass('active');
http://jsfiddle.net/mblase75/BSKrG/2/
It's not working on the upper ones because you're assigning the same id to the divs. You should probably use the class attribute instead:
<div class="step2"><a>Damn</a></div>
<div class="step2"><a>Damn</a></div>
<div class="step2"><a>Damn</a></div>
After making the above changes, you should be able to do this:
$(".step2 a").text("Hello World!");
maybe this:
<div class="step">
<div id="step2"><a>Damn</a>
<a>Damn</a>
<a>Damn</a></div>
</div>
<div class="step">
<div id="step2"><a>Damn</a>
<a>Damn</a>
<a>Damn</a></div>
</div>
Using radio inputs you can create this effect without any JS at all, which degrades gracefully from its intended appearance (a red backgrounded "damn") to damn with radios next to it (sending the same information).
ironically, this example at JSfiddle: http://jsfiddle.net/YvQdj/
My memory is a bit fuzzy, but I'm pretty sure this doesn't work in older versions of IE without some finagling.
I'm using Jqtouch to design a iphone app.
As I'm using a standard header/toolbar at the top, I want to simply have it fixed there without moving. I found out how to do this by creating a div with class toolbar and setting CSS display to block and min-height to 0px with important.
However, when it starts up and every time I change pages (technically, it's making different divs display and not display(?)), it autoscrolls to the top of the div that it just changed to, and I need to scroll up to see the toolbar (the toolbar is at the very top, above the div).
How do I make it actually scroll up to the toolbar or top of the page?
Here's a simplified layout of my current code: (For body section)
<body>
<div id="toolbar" class="toolbar" style="display: block; min-height: 0px !important;">
<h1>Header</h1>
<a class="button" href="#">Button</a>
</div>
<div id="home" class="current">
<!--Content in here-->
Link to next page
</div>
<div id="next">
<!--Content in here-->
</div>
</body>
I am not entirely sure I got your question, but It sounds like you want to have an element with "fixed" position. If that's the case, you may want to try the solution I posted for this question.
I am trying to have tooltip for my personal website http://www.stacked.in. when I move the mouse on the link, I want to have tooltip displayed. Tooltip display content is already available inside the html page as a div element, but it is hidden. I want the tool-tip to be displayed only when I move the mouse over the link. I use jquery and jquery plug-in
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ for this purpose. Even if I get the some other jquery-plugin, I would be happy.
Please note that tooltip-content div inner html would not shown. Tooltip supposed to get the element and display it.
#tooltip-content {
display:none;
width:250px;
}
here is HTML code..
<div id="widget" class="span-8 " >
<h2>Example.com</h2>
<ul>
<li><h3>Example News 1</h3>
<div id="tooltip-content">
<div class="published">Thu Jul 8, 2010</div>
<div class="content">
This detail news 1 shown only on tooltip..
</div>
</div>
</li>
<li><h3>Example News 2</h3>
<div id="tooltip-content">
<div class="published">Thu Jul 8, 2010</div>
<div class="content">
This detail news 2 shown only on tooltip..
</div>
</div>
</li>
</ul>
There would be more than 100 elements requires tooltip. Any better tool or way to handle this problem? If you give me the code sample, I would be greatful to you.. I already searched so many ways of doing it. http://code.google.com/p/jquery-very-simple-tooltip/ comes near to solution but it requires initialization for all the tooltip notes.
I've found jQuery Tools from http://flowplayer.org/tools/tooltip/index.html to have an excellent tooltip. You can use either a title attribute on the element, or use the next DOM node as the tooltip for a non-titled element.
Very flexible, and I'm sure it'll suit your needs appropriately. Good luck!