Develop Reference

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

Codrops Horizontal Slide Out Menu - Show submenu on page load

I'm working on a project based on one of the Codrops blueprints: http://l3s11023.zeus03.de/test/
I want to have the first submenu 'Lovely Spirits' already open when the page loads. I tried to do this with jQuery $( document ).ready(function() and a trigger event but without success.
Any help would be greatly appreciated. thanks.

Here is a fiddle with a part of your code and an example how you could trigger the click in
$(document).ready(function(){});
Make sure you include jQuery
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
$(document).ready(function(){
$('.cbp-hsmenu').children('li').children('a').on('click',function(){
$(this).next('ul').css('display','block');
});
/* HERE IS the interesting part*/
/* Trigger click on that function opening your sub-nav */
$('#gesu').trigger('click');
});
http://jsfiddle.net/Zms3T/
(Your question is not good. Next time please try to show only that part of code which is needed)
UPDATE THE ANSWER AFTER LOTS of trying on your site
The Code above was just an example of how you could try it. I was sure you trigger the function to open that navigation. However, replace the document ready with this: That will do what you where looking for.
$(document).ready(function(){
var elemHeight = $('.cbp-hsmenu li:first-child ul').height()
$('.cbp-hsmenubg').css('height', elemHeight+'px');
$('.cbp-hsmenu li:first-child').addClass('cbp-hsitem-open');
});

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.

Ajax Load in jquery when hit a link from the menu

I'm new to Jquery and Ajax and have tried to solve a problem for over 1h now.
You can see the page here: http://smartcreations.se/test/test.html (If you click in the green area it have the effect I want it to have.)
Almost everything works as I want except i can't use the menu at the top to have the boxes to aminate and load the content as it does when you click on the green div.
So what I want from you guys is some input on how I can solve this, another point of view.
$(window).load(function(){
$(".box").click(function(){
$(this).animate({
top: '-50%'
}, 500, function() {
$(this).css('top', '150%');
$(this).appendTo('#container');
$(".loadinghere").load($(this).attr('name'));
});
$(this).next().animate({
top: '50%'
}, 500);
});
});
This is the closest I get, but the links not works at all.

You can just fake the click on the box by using e. g.
$("#box1").click();
but I would do it completely different:
About me!
Portraits
Weddings
Action
<script type='text/javascript'>
$(document).load(function(){
$("a.show").on("click", function(e){
e.preventDefault();
var click=$(this);
var link=click.attr("href")+"#box";
$("#box").after("<div id='box2' />").load(link, function(){
$(this).animate({
// your effect and stuff
});
// Rename the new box and throw out the old one
// Make sure, it is not visible
$("#box").remove();
$("#box2").attr("id","box");
});
});
});
</script>
The idea is, to use full html and extract just the html out of #box and insert it on your current page. You can also use the newer history api or anchors for this. The main advantage is, that you can still use your page if JS is turned of. (Miss)using name or other html attributes for this is a really bad practice. If you need to, use the data attribute.
(The code is untested and the quick and dirty way just to give you an idea.)

jQuery: Why is by box collapsing on first click

The homepage of our website (legendboats.com) is 4 small cells, that if you click on, the large image changes. Pretty standard stuff, but there is a problem.
When you click on one of them the first time, the large area collapses before the new image reappears. This doesn't happen again, you can continue to click on different images, and they will fade in and out properly. Here is the code I'm using:
$('.home_boxes a.content_box').on('click', function(e) {
e.preventDefault();
var new_slide = this.hash;
$('#home_box div.active').fadeOut(function() {
$('#home_box ' + new_slide).fadeIn().addClass('active');
}).removeClass('active');
});
Any ideas on what I'm doing wrong, or any improvements?

It collapses because you're removing the class="active".
The reason it doesn't collapse after the first time is because jQuery is adding an inline style "display:block" which overrides the missing class="active".
Initially:
<div id="standard_equipment" class="active">
Subsequently:
<div id="more_power" style="display: block;" class="active">

Well I don't know why it happens, but I can see the symptoms. For some reason on first click the content collapses. This causes the odd flashing. If you set a min-height on home_box it sorts it out.
#home_box { min-height: 482px; }

Try doing this way
$('.home_boxes a.content_box').on('click', function(e) {
e.preventDefault();
var new_slide = this.hash;
$('#home_box div.active').fadeOut(function() {
var parent = this;
$('#home_box ' + new_slide).fadeIn(function(){
//You can shuffle following two lines and try
$(parent).removeClass('active');
$(this).addClass('active');
});
});
});
Hope this works you.