Develop Reference

AJAX Transition Effect

I'm trying to get this transition effect working with AJAX but the effect doesn't work with it. I essentially have a wrapper class and an innerwrap class in each of my html pages. When you click one of the navbar items, the innerwrap in the current page fades out and the innerwrap in the clicked navbar link fades in. Here is my script:
$(document).ready(function () {
$('#navbar a').click(function () {
var url = $(this).attr('href');
$('.wrapper').fadeOut('.innewrap').load.fadeIn(url + ' .innerwrap');
return false;
});
});
The way I'm seeing it is that the current innerwrap fades out and the innerwrap of the clicked url fades in. I've been struggling with finding a solution through different questions here but I can't seem to find one that's similar to the way I have the code presented. If you can't help but can guide me towards a question where the code is kind of similar that would be awesome. Thank you!

Maybe I'm wrong, but what you do in your code is fading in something like http://example.com/ .innerwrap and that's because you are using url variable where you put value of href attribute from a element.
Try using .load(url, function(){}) to achieve what you want. HERE you'll find more about load() from jQuery ;) Also your fadeIn() and fadeOut() syntax seem to be a little strange.
I think this is more what you want:
$(document).ready(function () {
$('#navbar a').click(function () {
var aObj = $(this);
var url = $(this).attr('href');
$('.wrapper').load(url, function(){
$(this).find('.innerwrap').fadeOut();
$(a).find('.innerwrap').fadeIn();
});
return false;
});
});
I haven't tested this code.

Jquery - Trying to hide and show bunch of images

I'm having slight problem with my jquery code. I'm new to Jquery, so please help me improve my code. Well I'm trying to hide and show this 4 images. Let me elaborate it a bit:
I created this 4 images (put side by side)
When one clicked it should expand and hides the other
When the expanded click it should return to its normal dimension and shows the other
Then it should be repeated
My code seems to work on the first go, but it messes up on the second run (the images doesn't behave like what i envision them to behave)
Here is my code:
http://codepen.io/sallyiee/pen/onkKs

You can simplify your code with toggleClass and toggle metods:
$(".showcase" ).on("click", "img", function(e) {
$(this).toggleClass("expand");
$(this).siblings().toggle("fast");
});
Demo: http://codepen.io/anon/pen/mlBEI

Try
$(".showcase img" ).click(function(e) {
if( $(this).hasClass('expand')) {
$(this).removeClass("expand").addClass("normal").show("fast");
$(this).siblings().show("fast");
} else {
$(this).addClass("expand").removeClass("normal");
$(this).siblings().hide("fast");
}
});
http://codepen.io/tamilcselvan/pen/HpbiK

whole page moves a bit when a show function is executed

I am trying to build my first website www.angelosmavraidis.com
I have inserted a javascript to show 8 divs of the same class when clicking on the "artwork" div.
The problem is that when the "artwork" is clicked and the rest of the divs show up the whole page moves a bit to the left.
Anyone know why this is happening?
Also can you recommend a better alternative to the following script to do the job?
$(document).ready(function(e) {
$('.mainmenu').each(function(index, element) {
$(this).click(function() {
$('.artwork').eq(index).show();
});
});
});
Thanks

Use preventDefault here like
$(document).ready(function(e) {
$('.mainmenu').each(function(index, element) {
$(this).click(function(ev) {
ev.preventDefault();
$('.artwork').eq(index).show();
});
});
});

how can you change remove a class on one li and move it to another

So I am in the middle of coding a navigation bar for the side of my website and I am creating it so that you click on a li, inside of it is an a tag with no href attribute so that it acts like a button (I don't use # since it jumps to the top of the page and I don't want that)it has a drop down section come out underneath it pushing the other tabs down. What I've found online is
$('li').click(function() {
$(this).siblings().removeClass('active');
$(this).addClass('active');
});
or
$('li').click(function() {
$(this).addClass('active').siblings().removeClass('active')
});
(and other variations of this)
However after I tested this out several times, either by adding multiple classes to each li or attempting to change the class active to an id and I've had no luck.
EDIT: It seems like the code works perfectly in other testing websites (codepen/jsfiddle) but it doesn't seem to work in my own browser when I open up the VisualStudio emulator (opens in the actual browser window)
Here's my code that contains this navigation bar: http://codepen.io/PorototypeX/pen/sjDBL

This might help :
$("ul.navbar > li").click(function () {
$("li[.active]").removeClass('active');
$(this).addClass('active');
});

Actually your code is fine, but it seems you are using JQuery, and it's not a native part of JS it self, it utilizes JS. So first you need to load JQuery.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
Then try this code, it's the same but a different variation of what you have done:
$(".navbar > li").click(function () {
$(".navbar").children("li").removeClass("active");
$(this).addClass('active');;
});
JS Fiddle

jQuery not added in the page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
Demo: CodePen
Another problem could be that the code is not in a dom ready handler
jQuery(function () {
$("ul.navbar > li").click(function () {
$(this).siblings().removeClass('active');
$(this).addClass('active');
});
})
Demo: Fiddle

I figured out what was wrong with my jquery. Although the code would work perfectly on outside sources such as codepen and jsfiddle, the only way that it will work on a local server is to have this code instead:
$(document).ready(function () {
$("ul.navbar > li").click(function () {
$(this).siblings().removeClass('active');
$(this).addClass('active');
});
});
The $(document).ready(function() { remaining code goes here... }) allows it to run locally.

Using jQuery mCustomScrollbar and links to anchor

I'm using jQuery mCustomScrollbar script to scroll the content element in one column with id="scroll_box". I also have couple of images (in other column) who has anchor links to elements in "scroll_box". The links has that syntax: http://www.example.com/index.php?id=17#c33.
I'm using that script for moving after click to anchor:
function scrollTo(hash) {
location.hash = "#" + hash;
}
That piece of code working fine but only when I disable mCustomScrollbar script - so I don't have "good looking" and working scroller. When it's turned on the scroller looks and working ok, but anchor links didn't work...
My mCustomScrollbar code:
(function($){
$(window).load(function(){
$("#scroll_box").mCustomScrollbar({
callbacks:{
onScroll:function(){
onScrollCallback();
},
onTotalScroll:function(){
onTotalScrollCallback();
},
onTotalScrollOffset:40,
onTotalScrollBack:function(){
onTotalScrollBackCallback();
},
onTotalScrollBackOffset:20
}
});
});
})(jQuery);
Is it possible to conect that two script into one working?

Actually the plugin have a lot of crazy issues! that make me drop it!; i just customize my self scroll bar and delete this plugin from my project for same reason.
But i fixed the scroll to anchor by using this solution:
$(document).ready(function() {
$("a").click(function() {
if($(this).attr('href') == "#top"){
//this bit is for wordpress, where top is default: .entry-title
var elID=".entry-title";
$(".jsoverflow").mCustomScrollbar("scrollTo",elID);
}else{
if ($(this).attr('href').indexOf("#") >= 0){
//this bit is for any other anchor
$(".jsoverflow").mCustomScrollbar("scrollTo",$(this).attr('href'));
}
}
});
});
It's worked for me 100% and i get it from Get-Hub.