We Keep Coding

jquery fadeIn/fadeOut not functioning properly

I have several divs that I want to have fade in and out depending on a nav panel. I am running into an issue with two of the divs, but the others work fine so I am not sure what is happening.
here is the jQuery code, here the two divs that are wacky have been singled out, the real code generalizes it to work for all divs:
$('#behind_the_lens').click(function() {
$('#gallaries-page').fadeOut(0);
$('#behind_the_lens-page').fadeIn(750);
$('#pricing-page').fadeOut(750);
});
$('#pricing').click(function() {
$('#pricing-page').fadeIn(750);
$('#behind_the_lens-page').fadeOut(750);
});
When the first function runs #pricing-page just hides, no fading and #behind_the_lens-page does fade.
When the second function runs #pricing-page waits for #behind_the_lens-page to fade out, then it instantly shows.
this does not happen for any other combination of divs so it is very strange to me.
as for the contents of these divs, one #pricing-page uses a table and the other uses a floating layout. but there layouts types are not unique from other divs.
In summary, why is it working this way for these divs but not the others? furthermore, why is it doing this at all?
Edit: was able to come up with a fiddle here that shows the problem.

You are fading in and fading out simultaneously. Watch the scrollbar, your "clicked" page is appearing as the currently visible is disappearing, and jumps up into position after the visible completely disappears (display:none).
Use the complete callback on fadeOut so that fading in happens after fading out finishes.
https://jsfiddle.net/u3u8jsqr/2/
JS
if (thisID != visibleID) {
$(visibleID).fadeOut(750, function () {
$(thisID).fadeIn(750);
});
}

My JavaScript slider work fine in the beginning and then it get corrupted

My JavaScript slider worked fine in the beginning and then it get corrupted after time, sometimes it takes one minutes, sometimes it takes five.
Actually I don't know if it is a conflict or what, could you please help me guys?
you can check it out here: http://test-code.bugs3.com/

When looking at the code it seems you do not yet have much web development skills. That is fine, and thereby I will go through each step of improving your webpage, as I want you to become a great developer too.
First, lets start with some CSS things. Instead of setting the padding for every side, you can also set it on all sides without needing four lines. Simply using padding:0; is enough in this case. For the margin, when you want the left and right sides to be auto, and the top and bottom 0px, you can 'chain' them in one property: margin:top right bottom left;, like a clock. Even shorter is margin:top&bottom left&right;, which in your case is margin:0 auto; <-- the top and bottom have 0 margin and the sides have auto margin. (btw if something is 0 you don't need to add a unit to it).
For a border I found this:
border: solid;
border-width: thick;
border-color: #E6E6E6;
You can also put that together by using border:thick solid #E6E6E6;
Now for the javascript. The problem that it is slow is because it uses a lot of timers and intervals to do things, and the timers do not get cleared well. My opacity is currently at -850. Instead of improving the code I suggest we rewrite it. You have written the same code over and over again for every picture, where only some variable names differ. What if we just write that code once? Would be a lot faster. And we could add as many pictures as we want.
To be able to instantly get a list of all the picture elements, I add a class to them: class="sliderPicture". Now when I want the list I can call document.getElementsByClassName('sliderPicture'); and there we have our array (I removed the ID's as we won't need em). We also need a variable to keep track of at which picture we are right now. I will elaborate on this later.
As we do not want the animation to be done by using javascript but just by using CSS, we are going to add some css code to the sliderPicture class:
.sliderPicture {
opacity:0; /*We want all images to be transparent, as we override this value when we want to display the picture*/
position:absolute; /*this puts all the pictures in the same place behind eachother, so that we do not need to display:none; and display:block; them*/
transition:2s opacity; /*this means, every time the opacity of the element changes, do not directly set it to that opacity but fade to it in 2 seconds*/
}
Now we create a class which will show the images. The script then only needs to add/remove the class:
.showPicture{
opacity:1;
}
Now on to the javascript code. It is pretty short, and I hope the comments explain good enough:
var images = document.getElementsByClassName('sliderPicture'); //this contains an array of all the images.
var imageTime = 3000; //the time in ms for when the pictures should change
var i = 0; //the picture we are at
setInterval(function(){
if(images[i].classList.contains('showPicture')) images[i].classList.remove('showPicture'); //if the element contains the class showPicture, remove it. (we first check for it to not generate errors when removing something that might not be there (it should, but never create any room for errors))
i++; //increment the image where we are at
if(i >= images.length) i=0; //if we are at the end of our array. Picture 2 of the array is the last picture, so, as we increment it above, our i value should be 3 then. The length of our array is also 3, so when i=length of the array we set it back to 0 to display the image
images[i].classList.add('showPicture'); //here we add the class so the element gets opacity 1
}, imageTime);
as we want the first picture to directly show up we just add showPicture to its class.
I also see nice buttons on the bottom. I think you want them to automatically switch to the picture. I can help you with automatically generating buttons to not have to bother about adding them manually.
Furthermore, if this slider is to display many different images, you can also write a little script to add the images from an array containing the url's. Then you don't need to add <img class="sliderPicture" src="..." /> every time, but let the javascript generate that for you (including generating the buttons.
All this code is combined in this jsfiddle.
If you have a question, any at all, feel free to ask them. I hope you enjoyed reading this answer and have a better understanding on how to combine css and javacript to generate nice webpages.
old:
this looks like a problem with all the intervals and clearing of things. your code does even look like it can be made much simpeler, as you are using timers to fade things, instead of css. For this fading you can use transitions. For the condition code, you'd better use an array and take the next item from it (or 0 if there is no next item).

Javascript slideshow "blank slide"?

In my simple javascript slide show I just want it to cycle through (at max of 5) divs that auto populate from a database. It populates and starts doing the slide show fine, but once it is suppose to loop it goes to a "blank" slide, then to the last one again and the it start cycling normally forever.
With this example I have to look at and play with it I am using two divs.
It can be viewed here: www.codekrewe.com/fbla
and the javascript code is here:
$(function() {
$('#dateHolder .featureHolder:gt(0)').hide();
setInterval(function() {
$('#dateHolder .featureHolder:first').fadeOut(1000)
.next('.featureHolder').fadeIn(1000)
.end().appendTo('#dateHolder');
}, 3000);
});
EDIT: I changed the JavaScript, the JS in the code block above is what I have now. However, I get the same problem.
Now with three divs in the slideshow you can see it is just the first slide that gets blanked out on the second loop through.

Well I found the fix for this, not quite sure why it had such an effect.
After all of the divs were called, a little <h1> was made to say featured divs in the holding box. Well that was getting pushed up with each slide changing, and once it reached the top it caused a blank slide.
So moving the <h1> to the top before the divs were called, fixed the blank slide issue.

Changing contents of a Div to cycle through ADs or Content or Whatever

I have a website that I am developing and I have multiple Divs on the main page. I have a div on the right side of the page labeled right_bar2 and I want it to change every 5-10 seconds. The entire div will just be an image that is a link. Basically I assumed the easiest way to do this would be to have a div with a bunch of hidden div's in it and then maybe some javascript that unhides one div at a time and then hides it again and unhides another. However I am unsure the best way to do it. I have looked at a bunch of example and can't get it to work 100% correctly.
Thanks for any advice ;)
JsFiddle examples would be great!
I tried something like this http://jsfiddle.net/VENLh/4/ but in my rails environment/setup, it breaks multiple things, so I'd like something cleaner and easier.

I cleaned it up a bit in this fiddle, but if you said the original breaks multiple things in your original environment, this might not fix them. What specifically did it break?
What I cleaned up was to avoid the need to keep a manual count of the DIVs for the JS or to worry about their IDs. The code is pretty simple:
$(function() {
var $divs = $('div', '#container'),
total = $divs.length,
counter = 0,
showDiv = function() {
$divs.stop().hide();
$($divs[counter]).show('fast');
counter = (conter + 1) % total;
setTimeout(showDiv, 3000);
};
$divs.hide();
showDiv();
});
​I didn't perform one optimization that should probably be done. You probably should cache the results of the jQuery selectors on each DIV. It would be easy to do with a jQuery map statement, but I didn't want to muddy the waters here.

The only problem I can see in this case is if you are going to use heavy image, it may take some time to load. As the image will start getting loaded when you show it first time. So for this I would say you should keep the opacity 0 and load the image at the time of pageload.
And also to remove the delay you are having where one div is getting hidden and other is getting visible can be removed by using opacity. reduce opacity of one from 100 to 0% and for other increase from 0 to 100%.

Best ways to display notifications with jQuery

I have a form which is a simple CRUD.
I am trying to display a cool looking success message when user enters or deletes a record. I've seen this a lot around the web.
I am very new to jquery. does anyone know any examples that would show how to do this?
Basically a div that would slowly dim out.

Your question is a little vague as a "cool looking success message" is not much to go with.
If you are interested, however, through answering questions here I have replicated the functionality of two of Stackoverflow's "notification" features that people seem to enjoy: the banner at the top of the page that comes up when you get a new badge, etc. and the red boxes around the site whenever something goes wrong with an action. I've used techniques similar to these to show success messages in my applications and my clients have loved them.
To show the top banners - demo
To show the red boxes - demo
The examples are very simple, as all it is doing is showing a DIV somewhere in the document and fading it in and out depending on the situation. That's all you really need to get started.
In addition to this, if you are a Mac fan (and even if you're not) there is the jQuery Growl plugin which is based on the OS X notification system. I am also a big fan of using the BeautyTips plugin to show messages near an element, as the bubbles are very nice and easy to style.

I really like jGrowl. It's very unobtrusive as the messages appear in the left corner and the user can continue to do whatever he's doing, but he does get feedback from the system. And it also looks very fancy :).

Just throw in a new absolutely positioned div and use the fadeOut-function to animate it's opacity with a slow animation.
Something like this:
var newDiv = $('div').css({position: 'absolute', left: '100px', top: '100px'}).text('SUCCESS!!!').appendTo($('body'));
newDiv.fadeOut(5000);

This should work:
function showSnazzySuccessMessage(text)
{
if($("#successMessage").length < 1)
{
//If the message div doesn't exist, create it
$("body").append("<div id='successMessage' style='text-align:center;vertical-align:middle;width:400px;position:absolute;top:200px;left:300px;border:2px solid black;background:green;margin:20px;display:none'>" + text + "</div>");
}
else
{
//Else, update the text
$("#successMessage").html(text);
}
//Fade message in
$("#successMessage").show('slow');
//Fade message out in 5 seconds
setTimeout('$("#successMessage").hide("slow")',5000);
}
You'll have to play with the style to get it to look the way you want, but you get the idea.

Perhaps you're looking for something like this or a straight fade like this. There are a few effects to choose from.