Develop Reference

Div not displaying correctly on show

<script type='text/javascript'>
$(document).ready(function () {
var fenster = $(location).attr('href');
if (fenster == 'http://www.cyrill-kuhlmann.de/index.php/') {
$('#intro-page').show(function () {
$(this).click(function () {
$(this).fadeOut(250);
});
});
}
});
</script>
I have a div that needs to be displayed in full-screen as an intro. The problem is that it doesn't display correctly; it just displays itself in the top left corner and grows until its full-screen. Why is it doing this?

show() takes the duration of the animation as a first parameter. You have given it a function, which is incorrect. Either you meant to chain your methods:
$('#intro-page').show().click(function () {
$(this).fadeOut(250);
});
Or, you did mean to put a callback function in there, but you missed out the first parameter; the duration:
$('#intro-page').show(250, function(){
$(this).click(function(){
$(this).fadeOut(250);
});
});
Documentation
show()

<script type='text/javascript'>
$(document).ready(function () {
var fenster = $(location).attr('href');
if (fenster == 'http://www.cyrill-kuhlmann.de/index.php/') {
$('#intro-page').show(function () {
$(this).click(function () {
$(this).fadeOut(250);
});
});
}
});
</script>
try the following:
<script type='text/javascript'>
$(document).ready(function () {
var fenster = $(location).attr('href');
if (fenster == 'http://www.cyrill-kuhlmann.de/index.php/') {
$('#intro-page').show();
$('#intro-page').click(function(){
// seperate it from show function call so you can have more access to object
// and do logic on it.
$(this).fadeOut(250);
});
}
});
</script>

Change the css based on select value item using jquery

Fiddle
i have a jquery which is for that, if the selected value is "<>"(Between) i want to change the style to display:block to an input box .. but here all the selected items css is changed
$(document).ready(function () {
$('.condition-change').change(function () {
if ($('select[name="SearchCondition"]').find('option[value="<>"]').attr("selected", true)) {
$('.second-value').css("display", "block");
}
});
});

Wrong condition
$(document).ready(function () {
$('.condition-change').change(function () {
if($('select[name="SearchCondition"]').find('option[value="<>"]').prop("selected")==true)
{
$('.second-value').css("display", "block");
}
});
});

You simply need to access the selected option value which you can get using val(), so put condition on val(),
Live Demo
$(document).ready(function () {
$('.condition-change').change(function () {
if ($(this).val() == "<>") {
$('.second-value').css("display", "block");
}
});
});
Also using show and hide instead of setting css.
Live Demo
$(document).ready(function () {
$('.condition-change').change(function () {
if ($(this).val() == "<>")
$('.second-value').show();
else
$('.second-value').hide();
});
});

Try,
$('.condition-change').change(function () {
if($(this).val().trim() === '<>') {
$('.second-value').show();
}
});
DEMO
Or
$('.condition-change').change(function () {
$('.second-value').toggle($(this).val().trim() === '<>');
});
DEMO I

// add .is(":checked") function to check whether "<>" value option is selected
$(document).ready(function () {
$('.condition-change').change(function () {
if($('select[name="SearchCondition"]').find('option[value="<>"]').is(":checked"))
{
$('.second-value').css("display", "block");
}
else
{
$('.second-value').css("display", "none");
}
});
});

what is a better way of switching panels in javascript?

I have some code that swaps panels when a button is pressed, hiding any others that might be on the screen before displaying the next. it is a bit messy because of the way it has to be worked around to prevent both panels from appearing at once.
http://jsfiddle.net/zDeveloper/X4sMF/
$(document).ready(function () {
$("#pref-sliders-swap").appendTo($("#sliderbox"));
$("#sliderbox").hide();
$("#characters").hide();
$("#currentdesires").hide();
$("#important").hide();
$("#sliderbutton").click(function () {
$("#welcome").fadeOut(function () {
$("#characters").fadeOut(function () {
$("#currentdesires").fadeOut(function () {
$("#important").fadeOut(function () {
$("#sliderbox").fadeIn();
});
});
});
});
});
$("#homebutton").click(function () {
$("#sliderbox").fadeOut(function () {
$("#characters").fadeOut(function () {
$("#currentdesires").fadeOut(function () {
$("#important").fadeOut(function () {
$("#welcome").fadeIn();
});
});
});
});
});
$("#charactersbutton").click(function () {
$("#sliderbox").fadeOut(function () {
$("#welcome").fadeOut(function () {
$("#currentdesires").fadeOut(function () {
$("#important").fadeOut(function () {
$("#characters").fadeIn();
});
});
});
});
});
$("#desirebutton").click(function () {
$("#sliderbox").fadeOut(function () {
$("#welcome").fadeOut(function () {
$("#characters").fadeOut(function () {
$("#important").fadeOut(function () {
$("#currentdesires").fadeIn();
});
});
});
});
});
$("#impbutton").click(function () {
$("#sliderbox").fadeOut(function () {
$("#welcome").fadeOut(function () {
$("#characters").fadeOut(function () {
$("#currentdesires").fadeOut(function () {
$("#important").fadeIn();
});
});
});
});
});
});
The code I have placed there does exactly what I want,smoothly fading in and out the panels(at least in firefox) though it is a bit cumbersome. is there a better way to acheive the same effect?

Try
<!--use the class trigger to group the trigger elements, then use data-target to specify the id of the target element to be displayed-->
<div id="sliderbutton" data-target="#sliderbox" class="trigger">sliderbutton</div>
<div id="homebutton" data-target="#welcome" class="trigger">homebutton</div>
<div id="charactersbutton" data-target="#characters" class="trigger">charactersbutton</div>
<div id="desirebutton" data-target="#currentdesires" class="trigger">desirebutton</div>
<div id="impbutton" data-target="#important" class="trigger">impbutton</div>
<!--Use the class content to group all the content elements-->
<div id="sliderbox" class="content">sliderbox</div>
<div id="characters" class="content">characters</div>
<div id="currentdesires" class="content">currentdesires</div>
<div id="important" class="content">important</div>
<div id="welcome" class="content">welcome</div>
then
jQuery(function () {
$("#pref-sliders-swap").appendTo("#sliderbox");
$(".content").not('#welcome').hide();
var $contents = $('.content');
$contents.not('#welcome').hide();
$(".trigger").click(function () {
var $visible = $contents.stop(true, true).filter(':visible'),
$target = $($(this).data('target')).stop(true, true);
if ($visible.length) {
$visible.fadeOut(function () {
$target.fadeIn();
});
} else {
$target.fadeIn();
}
});
})
Demo: Fiddle

onmouseover show/ hide div and can select the text of div

I want to Show and hide one tooltip on hover of an anchor. but tooltip should be there till my cursor on it.
fiddle
$('#showReasonTip').mouseover(function(){
$(this).parent().find('#reasonTip').slideDown()}).mouseout(function(){
$(this).parent().find('#reasonTip').slideUp()
}
)
thanks in advance.

Try
jQuery(function ($) {
$('#showReasonTip').hover(function () {
var $target = $('#reasonTip');
clearTimeout($target.data('hoverTimer'));
$target.stop(true, true).slideDown();
}, function () {
var $target = $('#reasonTip');
var timer = setTimeout(function () {
$target.stop(true, true).slideUp();
}, 200);
$target.data('hoverTimer', timer);
});
$($('#reasonTip')).hover(function () {
clearTimeout($(this).data('hoverTimer'));
}, function () {
$(this).stop(true, true).slideUp();
});
});
Demo: Fiddle

You should try using mouseleave instead of mouseout and that too on #reasonTip and not on #showReasonTip.
$('#showReasonTip').mouseover(function(){
$(this).parent().find('#reasonTip').slideDown()
});
$('#reasonTip').mouseleave(function(){
$(this).parent().find('#reasonTip').slideUp()
});
Here's the modified fiddle with a small change in your code.

Trying to condense javascript into for loop

I've got the following code that I am trying to condense to a for loop but am having no luck:
$("#motion1-sub1-1").hover( function () {
$("#motion1-sub1-1 div").show();
},
function () { $("#motion1-sub1-1 div").hide();
}
);
$("#motion1-sub1-2").hover( function () {
$("#motion1-sub1-2 div").show();
},
function () { $("#motion1-sub1-2 div").hide();
}
);
$("#motion1-sub1-3").hover( function () {
$("#motion1-sub1-3 div").show();
},
function () { $("#motion1-sub1-3 div").hide();
}
);
$("#motion1-sub1-4").hover( function () {
$("#motion1-sub1-4 div").show();
},
function () { $("#motion1-sub1-4 div").hide();
}
);
$("#motion1-sub1-5").hover( function () {
$("#motion1-sub1-5 div").show();
},
function () { $("#motion1-sub1-5 div").hide();
}
);
Here's the for loop code that have to condense the above code:
for (var i = 1; i <= 5; i++) {
$("motion1-sub1-" + i).hover( function () { $("motion1-sub1-" + i + "div").show();
},
function () { $("motion1-sub1-" + i + "div").hide();
}
);
}

No need for a for-loop, just bind to those elements that have a certain id pattern, and use this to reference them from within the hover functions:
$("[id^='motion1-sub1-']").hover(
function(){
$("div", this).show();
},
function(){
$("div", this).hide();
}
);
I don't know what type of element we're binding to, but you should provide that tag as part of the selector. For instance, if this is a div we're hovering, modify the selector to include that:
$("div[id^='motion1-sub1-']")
Or an even shorter, more DRY version:
$("[id^='motion1-sub1-']").on("mouseenter mouseleave", function(e){
$("div", this).toggle( e.type === "mouseenter" );
});

How about giving all your divs a class of motion-sub and then doing
$(".motion-sub").hover(function() {
$(this).show() }, function() { $(this).hide(); }
});

You're missing a space on motion1-sub1-x div selector right before the div
$("motion1-sub1-" + i + " div")