Develop Reference

Hide div when URL contains

I want to hide the slider (and a bit more) if someone uses the search module on my Joomla site and tried several solutions mentioned here on stackoverflow like: https://stackoverflow.com/a/1760605/1641903
Currently my code looks like this:
<script>
if (/\/search\//.test(window.location)) {
$('#hideonsearch').hide();
}
</script>
I wrapped the slider in <div id="hideonsearch> and tried mentioned jquery in both the body and head (just to be sure), but it doesn't seem to work as you guys can see here.
Any idea on how to get in working?

I saw in your web site that the jquery is not loaded when your code is being executed.
You must put your code in the "onload" function, or make sure the jquery is loaded before doing this.
window.onload = function () {
if (/\/search\//.test(window.location)) {
jQuery('#hideonsearch').hide();
}
};
Or you can use the pure javascript code that is better.
window.onload = function () {
if (/\/search\//.test(window.location)) {
document.getElementById("hideonsearch").style.display = "none";
}
};
I saw another error in your web site now, related to this code:
jQuery(document).ready(function(){
jQuery('.hasTooltip').tooltip({"html": true,"container": "body"});
});
error:
undefined is not a function
And it is related to the same problem, jQuery is not loaded, so you can use "window.onload".

jQuery On Not working for simple script

There must be some mental block that I'm just not getting...My entire site is working fine, but dynamically created links with an ID are not. Something is wrong in my code...it's as simple as this but it's not working, please show me my dumb mistake (I know it's something simple).
so for example this would be a generated link:
Hi
and then I have this script:
$(document).ready(function() {
$(document).on('click','#himan',function(){
alert('hi');
});
});
but nothing happens, and I get no errors...I'm lost, maybe my coffee is not working today. Can someone help me?

Here is demo
It is working perfect:
$(document).ready(function () {
$(document).on('click', '#himan', function () {
alert('hi');
});
});
reason might be duplicate of id, there must only one element with specific id because id is a unique on a page, if you adding multiple element use class instead of id.

Handle the click event on #himan itself...
function initializeDynamicLinks() {
$('#himan').on('click',function(){
alert('hi');
});
}
$(document).ready(function() {
initializeDynamicLinks()
});
Here you see it working: http://jsfiddle.net/digitalextremist/emUWL/
Rerun initializeDynamicLinks() whenever you add links dynamically.
And... as has been pointed out several times in comments, you need to make sure #himan only occurs once in your source to be completely sure everything will function properly.

Slide down similar to google image result

I'm trying to make something similar to the slide down functionality that Google uses in their images search results.
I've got something somewhat working within this jsFiddle:
http://jsfiddle.net/ultraloveninja/X7rmK/
Using jQuery:
$(document).ready(function () {
$('.slider').click(function (e) {
e.preventDefault();
$('.internal').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
});
$('.internal').hide();
});
But I'm not sure how to get it so the content that pertains to the image is underneath it.
I did find this link:
http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/
But it's causing some issues when integrating it with isotope. So, I'm trying to roll my own and see if I can achieve something similar that will work when filtering with isotope.
Not too sure if I need to set something different within the CSS or if I need to make JS command it differently.

Why don't you just put your content inside the slider, after the image. They belong together, so it makes sense to group them. It would also make your problem (and js) a lot easier. Have a look at this:
http://jsfiddle.net/Pevara/X7rmK/2/
The html does now look like this:
<div class="slider">
<img src="..." />
<div class="internal">Content here</div>
</div>
And the js became a lot shorter:
$('.slider').click(function () {
$(this).find('.internal').slideToggle();
});

Manually Advancing Orbit Slider

I'm using the Zurb 'Orbit' Javascript slider, http://www.zurb.com/playground/orbit-jquery-image-slider, and I'd like to fire my own javascript at it to manually advance the slider left or right.
Basically, I'd like to fill it with my content, then have that content 'slide' in an out of view depending on a user interactions with the page as a whole, not only on a timer function or clicking a navigational image as already provided by the library.
So if I have a link named 'myLink', then something like this...
$('#myLink').click(function() {
... code to advance javascript slider...
$('#content').orbit(?????);
});
Failing that, my 'content' is going to be an html form and other similar stuff, anyone know a good free library that already does what I want?

Get a reference to the orbit object using "afterLoadComplete":
var myOrbit;
$(".orbitSlides").orbit({
afterLoadComplete: function() {
myOrbit = this;
}
});
Then use the 'shift' function to change slides:
myOrbit.shift(1);
or
myOrbit.shift('prev');
or
myOrbit.shift('next');

The easiest way would be
$(".slider-nav .right").click();
to simulate the arrow being clicked. Change if necessary to account for using the bullet-navigation option.
I don't think you're going to get anything more elegant than that, because the plugin doesn't expose an API of any sort - it's all privately closured up in the plugin.

I use this
$('#next').click(function(){
$('#rotator').trigger("orbit.next");
})
$('#prev').click(function(){
$('#rotator').trigger("orbit.prev");
})
assuming the div #rotator is the orbit slider.

I couldn't get some of these other answers to work. I know it's a little hacky but I found this easiest:
HTML:
<p id='back'>Back</p>
<p id='next'>Next</p>
CSS: (if you use the built-in navigation_arrows: false;, navigation arrows are removed and can no longer be manipulated, so visibility: hidden; to the rescue!)
.orbit-prev, .orbit-next {
visibility: hidden;
}
jQuery:
$('#back').on('click', function() {
$('.orbit-next').click();
});
$('#next').on('click', function() {
$('.orbit-prev').click();
});

jQuery code critque

Thought I'd post here. My first hour on jQuery, actually first programing ever done. Would love to learn whats not right and how it could be better.
$(function() {
function hide_me()
//A place to specify which elements you want hidden, on page load.
{
$("li.credentials").hide();
}
function first_bow()
//The div right_column takes a bow on initial load.
{
$("div#right-column").show("drop");
}
function bigpeek()
//The third column toggles in/out. All elements under div right_column.
{
$("div#right-column").toggle("drop", "fast");
}
function smallpeek()
//Smaller snippets like credentials or user assignment flying in/out.
{
$("li.credentials").toggle("drop", "fast");
}
$(document).ready(function() {
$("*").ready(hide_me);
$("*").ready(first_bow);
$(".btn-new-email").click(bigpeek);
$(".button").click(smallpeek);
$(".icon-delete").mouseover(function() {
$(this).effect("bounce", "fast");
});
});
});

The best thing to learn about programming is how to effectively re-use code. In your code, you have set up some functions that you yourself claim will do a bunch of the same thing. So instead, you could make it better by only writing code to do the repeated task once.
For one example, instead of creating a function where you place a bunch of things that need to be hidden, I would add a class to the elements that should be hidden, and then hide all those elements:
function hide_me()
//Hides anything with the "hide-me-onload" class
{
$(".hide-me-onload").hide();
}

$(function () {
...
}
is the same as
$(document).ready(function() {
...
}
So you can move the method calls from inside your $(document).ready() to be inside your $(function(){}). Also try to use IDs instead of class names wherever possible. Something like this will go through the entire DOM to look for an element
$(".item")
Be more specific
$("#itemID") // use IDs instead of Classes
//If you have to use class name then you can speed up the selector by adding the element tag before it
$("div.item")

Using $("*").ready() within $(document).ready() is redundant... you already know using all of the elements are ready! Also, in general using the universal selector $('*') is very inefficient.
So, the first two lines of your $(document).ready() can just be:
hide_me();
first_bow();
Other than that and a couple of issues with organization and nomenclature you're off to a great start, keep it up!