Develop Reference

How to use javascript example with external js? highlighting a div after scroll

I've been struggling with Javascript, of which I'm very unfamiliar.
I'd like to highlight the div after scrolling. I keep finding references to this highlight example, but anything I try doesn't do anything.
I think the problem is the example is showing how to do it in a simple html file with everything self-contained. I'm working within a PHP ecommerce platform (prestashop) and have to put the JS and CSS in their respective places. I'm not understanding how to call what's in that example correctly. Since I don't get any errors, I don't know how to troubleshoot. No errors, it just doesn't do anything.
In my HTML I have
<div>
<a onclick="test('myID')">test highlight</a>
<div id="myID">Here's the div</div>
</div>
In the JS I have
function test(myId){
$( document ).click(function() {
$( myId ).toggle( "highlight" );
});
}

Well, I fixed your problem buddy ;-)
This is the html
<div>
<a>test highlight</a>
<div id="myID">Here's the div</div>
</div>
the jQuery code
function test(myId) {
$("#" + myId).toggle("highlight");
}
$("a").click(function() {
test("myID");
});
What I did is remove your onclick from the anchor element and binded the click event with jQuery instead. And that did the trick ;-)
Here's a fiddle if you want to see it in action.
EDIT
The reason my highlighting wasn't functioning as you wished for, was because I was using an older version of the UI library. And the update also contains a way to use classes to bind click events. The fiddle above will show you.

Or if you what it more link the Highlight example you linked
you could do it like this:
EDIT
Look at this, it will maybe help you:
Fiddle
This is the HTML:
<div>
<p>Click to toggle</p>
<p>highlight</p>
<p>on these</p>
<p>paragraphs</p>
</div>
This is the Java script:
$('p').toggle(
function () {
$(this).css('background-color', 'yellow');
},
function () {
$(this).css('background-color', 'white')
});
But it is highly dependent on which version of jQuery you end up using.
This example uses 1.8.3

NivoSlider - Disable Right Click

I have been asked to put in place disabling of the right clicks on a website, I've informed them there is so many ways that people can still download the images via Google Images, Cache, Firebug etc etc, but none the less my arguments have gone ignored and they insist this must be done.
Any, I've put in the footer some code that disables right clicking on all elements using <IMG src=""> this fails to work on NivoSlider, I did change the script to use window load on disabling the right click which works but after slide1 it stops working and I assume this is something to do with changes to the DOM.
JavaScript is by far my weakest point and I'm hoping that someone without to much trouble can either give me a full working solution or something to go on. Thanks in Advance.
They are using NivoSlider with the following trigger:
<script type="text/javascript">
(function($) {
$(window).load(function() {
$('#slider').nivoSlider();
});
})(jQuery);
</script>
And this is the code that I've placed in the footer that fails to work on slide2+
<script>
$(window).load(function() {
$('img').bind('contextmenu', function(e) {
return false;
});
});
</script>

You're absolutely right with the DOM changes. You need to delegate the event to a parent element.
Try something like this:
$('#slider').delegate('img', 'contextmenu', function(e) {
return false;
});
Or this if using jQuery > 1.7:
$('#slider').on('contextmenu', 'img', function(e) {
return false;
});

You might be able to do it by preventing the default behaviour of a right click on the image.
See this answer: How to distinguish between left and right mouse click with jQuery

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 or JS to show larger image

I'm looking for a way too display images like google does. when someone hovers over an image, an larger view is shown I would like to know how I can achieve this.

Something like this?
http://jsfiddle.net/roXon/HmTrw/

There are tons of plugins out there if you still aren't very good at jQuery yet. The imgPreview plugin seems like it would fit your needs. Another really slick looking one is ZoomerGallery.
On the other hand, if you want to do it exactly like Google, just go to the page where it does what you want, view source, and grab the script they are using.

$("img").hover(
function () {
//mouse enter
//do animations
},
function () {
//mouse leave
//do animations
}
);
Thats what i'd look at. Also see here:
http://api.jquery.com/hover/

Changing Galleriffic controls

I am using the jQuery Galleriffic gallery and I am trying to do somthing that I am not sure is possible.
I want to take the buttons that changing the pictures and start the slide show and put them inside divs.
I was able to put all of them in a div out side the gallery but I can't find a way to put them separately inside divs.
Is it even possible to do that?
I looked in the javascript code and I found a code that change the pictures:
next: function(dontPause, bypassHistory) {
this.gotoIndex(this.getNextIndex(this.currentImage.index), dontPause, bypassHistory);
return this;
}
But when I try to use it outside the Galleriffic initialization the script breaks.
My javascript is not the best, is it possible to call that function?
Sorry for my english.
EDIT:-----------------------------------------------------------------------------
I found the solution after looking the Galleriffic source again and found the correct functions.
They called:
gallery.next(); //for going foward.
gallery.previous(); // for going backwards.
You can make a div style him the way you want and link this function to it with javascript (I use jQuery).
Here a simple example:
$("#foward").click(function () {
gallery.next();
});
$("#backward").click(function () {
gallery.previous();
});

$("#foward").click(function () {
gallery.next();
});
$("#backward").click(function () {
gallery.previous();
});