We Keep Coding

JS Toggle Submenu within Mega Menu

The issue I'm having is, creating a submenu inside another menu.
Demo: LIVE DEMO (Important, cause CSS is needed as well
$(function () {
// Desktop Menu
var categoriesMenu = $(".list-ausbildung-categories li");
var triggerMenu = $(".dropdown-submenuSide");
var highlightsList = $(".list-ausbildung-highlights");
var submenuList = $(".list-ausbildung-submenu");
$('.list-ausbildung-categories').on('click', 'li', function () {
if( $(this).hasClass('active') ){
triggerMenu.removeClass('asg-gray-bg-200');
$(".dropdown-submenuSide .list-ausbildung-submenu ul").html('');
} else {
highlightsList.hide();
submenuList.show();
triggerMenu.addClass('asg-gray-bg-200');
$('li.active').removeClass('active');
$(this).addClass('active');
var subMenu = $(this).find(".dropdown-submenu").html();
$(".dropdown-submenuSide .list-ausbildung-submenu ul").html(subMenu);
}
});
$('.asg-megamenu div[class^="col"]:first-child').on('click', function () {
categoriesMenu.removeClass('active');
triggerMenu.removeClass('asg-gray-bg-200');
submenuList.hide();
highlightsList.show();
});
});
I'm having this Bootstrap Mega Menu, which also contains a submenu (Column 2). On click, it should hide Column 3, and show the submenu items. (it does its job)
Currently, I'm grabbing the submenu content with jquery html() and then placing it on the third column (probably not the cleanest method).
The problem: whenever I close a submenu and click again, it won't open back.

It looks like currently, the active class isn't removed on the second click. Instead, it just clears out the HTML of column three. We could fix that by adding a line to remove the active class when we hide the submenu.
if( $(this).hasClass('active') ){
$(this).removeClass('active'); // add in this line here so it will trigger properly on the next click
triggerMenu.removeClass('asg-gray-bg-200');
$(".dropdown-submenuSide .list-ausbildung-submenu ul").html('');
}

Change colour of elements previously clicked

I have a list of elements that I want to change color after the user has click a button (then clicked a different one). I know to change the button colour on click I would use onclick, but how would I change the colour of the button AFTER I've clicked?
For example, the user clicks Titanic. Nothing happens. Then the user clicks Titanic7, Titanic changes colours and remains that colour. Then the user clicks Titanic9. Titanic and Titanic7 both have the "visited" colour.
See JSFiddle here

If I understand you correctly, I would do something like this:
http://jsfiddle.net/KHwcU/
$('.song').click(function(e) {
e.preventDefault();
$('.selectnext').css('background-color', 'blue').removeClass('selectnext');
$(this).addClass('selectnext');
});

Seeing that you're already using data-, I would do something like the following:
$(function() {
var currentButton;
$('a.song').on('click',function() {
if(currentButton === this) return;
currentButton = this;
$('a.song').each(function() {
if($(this).data('visited') == 'true' && !$(this).hasClass('visited'))
$(this).addClass('visited');
});
$(this).data('visited','true');
});
});
have a data-visited which keeps track of which button has been clicked
everytime a button is clicked, check if it's the same one that was clicked previously. if not, change the background for the previously clicked button, and set the current button as visited.
example fiddle: http://jsfiddle.net/9eJPD/

$(function(){
$( "a" ).click(function() {
$( this ).toggleClass( "color" );
});
});
css
.color{
background: yellow;
}
or double click
$(function(){
$( "a" ).each(function() {
var count = 0;
$( "a" ).click(function() {
count++;
//$( this ).text( "clicks: " + count );
$( this ).toggleClass( "color", count % 3 === 0 );
});
});
});

Slide Effects for Tabs Part 2

Ok so my original question got answered and now my slide effect only happens when I click in anywhere in my div region..here is the code:
$(document).ready(function(){
$('#tabs').tabs();
$("#tabs").click(function() {
$(this).effect( "slide", "medium" );
});
});
Now I'm wondering what if somebody wants to copy text from one of my tab regions? Every single time they try to highlight, the tab will slide away. How do I make it so that the tab region only slides when the actualy tab ul is clicked?

Use combination of mousedown and mouseup:
Demo Fiddle
var down=0;
$(document).ready(function(){
$("#tabs").mousedown(function(event){
down=event.clientX+"||"+event.clientY;
});
$("#tabs").mouseup(function(event){
var up=event.clientX+"||"+event.clientY;
if(up==down)
$(this).slideUp("medium" );
});
});
Updated code which prevent slidedown on right-click copy text:
Demo Fiddle 2
var down="||";
$(document).ready(function(){
$("#tabs").mousedown(function(event){
switch(event.which){
case 1:/*Left mouse button pressed*/
down=event.clientX+"||"+event.clientY;
break;
default:/*middle or right mouse button pressed*/
down="||";
}
});
$("#tabs").mouseup(function(event){
var up=event.clientX+"||"+event.clientY;
if(up==down)
$(this).slideUp("medium" );
});
});

You can use the event capturing option on click method. By using that, you can get the element on which the mouse is clicked. And then you can use the target object as below,
$('#tabs').click(function(e){
if(e.target.nodeName == 'P') {
e.stopPropagation();
return;
}
$(this).effect( "slide", "medium" );
});
Hope it will help.

Creating Jquery sliding menu

Want to create jquery menu like on this website slide from left and when click on icon restores to its orignal position.
http://wittlingerorthodontics.com/default2.asp
only able to achieve this on jsFiddle
http://jsfiddle.net/messi1987/tfASa/
$(function() {
// run the currently selected effect
function runEffect() {
// get effect type from
var selectedEffect = "slide";
// most effect types need no options passed by default
var options = {};
// run the effect
$( "#effect" ).effect( selectedEffect, options, 1000 );
};
// set effect from select menu value
$( "#button" ).click(function() {
runEffect();
return false;
});
});
whereas i want to make it slide in and on click to button/image slides back to orignal positon. New to jquery so do'nt get the helping content any where. Help me out to do this.
for complete understanding check the referenced website.

try this fiddle , i think this is what u want
$(function() {
$('#button').click(function(){
$(".ul_menu").toggleClass('show');
if( $(".ul_menu").hasClass('show')){
$(".ul_menu").show("slide",{direction: 'left'});
}else{
$(".ul_menu").hide("slide",{direction: 'left'});
}
});
$('#button').mouseleave(function(){
if($(".ul_menu").hasClass('show')){
$(".ul_menu").hide("slide",{direction: 'left'});
}
})
});

sliding transitions not listening to each other in js

I have a js transition I can not resolve. There are three links, blue/green/red, when you select one of the links a color swatch slides into the up position. Push that same link again to make the color swatch slide into the down position.
How can I have each swatch slide all other swatches into the down position before sliding into the up position?
// When the DOM is ready, initialize the scripts.
jQuery(function( $ ){
// Get a reference to the container.
var container = $( ".container" );
// Bind the link to toggle the slide.
$( "a" ).click(
function( event ){
// Prevent the default event.
event.preventDefault();
// Toggle the slide based on its current visibility.
if (container.is( ":visible" )){
// Hide - slide up.
container.slideUp(500, function(){ $('').show(); });
} else {
// Show - slide down.
container.slideDown(500, function(){ $('').hide(); });
}
}
);
});
JSFiddle Demo

I've forked your jsfiddle with a simple solution: http://jsfiddle.net/cwmanning/jvj2u/2/
All in the fiddle, but it uses data attributes to switch classes instead of onClick attributes.
// Bind the link to toggle the slide.
$( "a" ).click(function( event ){
// Prevent the default event.
event.preventDefault();
var $this = $(this);
var $target = $("#target");
if ($target.attr("class") === $this.attr("data-color")) {
container.slideUp(500);
} else {
// Hide - slide up.
container.slideUp(500, function(){
$target.attr("class", $this.attr("data-color"));
// Show - slide down.
container.slideDown(500);
});
}
});

This is a quick workaround. I am sure there is a much more elegant way, but seems to work.
just change the following:
function slider(v) {
colors = {
'blue':'blue2',
'red' :'red2',
'green':'green2'
}
var confirm = document.getElementById("target");
if (colors.hasOwnProperty(v)){
setTimeout(function(){target.className = colors[v]},500);
}else {target.className = "chart";}
}
Substitute the following in place where you currently have the if(.... is(":visible").
I don't mean at the bottom of the code. Just sub the following in where it sits now in your code.
if (container.is( ":visible" )){
// Hide - slide up.
container.slideUp(500,function(){$().hide()});
setTimeout(function(){
container.slideDown(500, function(){ $('').show(); })
},500);
}else{
container.slideDown(500,function(){$().hide()})
}