Develop Reference

Navbar hover, show subnav html

I'm making a website where I have a navbar on top, and when I hover my mouse over 1 of the nav-items, a sub-nav drops down, but now I have a javascript / ajax function on my nav-item when I click the nav-item, it shows another html page in my subnav, like this:
Home
Is it possible to get the function in the 'href' part also work when I only hover the link? So when I hover a nav-item, the sub-nav with the included html subnav drops down.

In html5 you can attach another javascript to mouseover event:
Home
Note: remove javascript word now, because this argument itself is a javascript function. You add only javascript to events, basically. href is different, it is an address in normal case.

Clear main image in gallery on mouseout of thumbnail?

I'm using script found here:
Automatically load an image using javascript
I'm using them to build image gallery where the main image loads thumbnail image on mouseenter, but my main image begins blank not with the first thumbnail as in the answer. I need to know how to clear the main image back to blank on mouseout of each thumbnail?

Try JQuery .mouseout() like this:
$('.thumbnails img').mouseout(function () {
this.src = '';
});
Click http://jsfiddle.net/cnx65ev0/ to see it running. Hover over the images and when you leave them, they become blank. I hope this is what you wanted.

Remember div hover state after page refresh

I have a navigation bar that grows in width when it is hovered over.
Here's an example:
http://jsfiddle.net/Gsj27/822/
Now, if for example I have a home button in the area that the hover effect applies to, when it is clicked and the home page is loaded the result is as follows:
The page is loaded with the navigation area in default size (small width), and after an instance it increases in width, as per the hover effect, when the hover effect "kicks in".
The Question
How to make the page load with the hover effect keeping its state right before a hyperlink is clicked? So in my example, if the home button is clicked then load home page with the hover effect already active (since home button is on navbar area so hover effect will necessarily be on). But if a hyperlink elsewhere (e.g. gray area in my example) is clicked then load page with hover effect off.
I think this can be achieved using js toggleClass? Something like
$(document).ready(function(){
if(/* hover effect was on */) {
$('nav').toggleClass('hovered');
}
})

You can save status in url:
<a href="?active=true">
if(window.location.href.indexOf('active=true') > 0) {
$('.nav').addClass('hovered');
}
Code: http://jsfiddle.net/Gsj27/824/
Demo: http://fiddle.jshell.net/Gsj27/824/show/
You can also use hash(#) to save status.

How to make a thumbnail page that links to images in the royal slider gallery

I am trying to create a page that holds a set of thumbnails containing images loaded in via a cms. These thumbnails have a clickable event that once clicked will open a page with all the images from that slider loaded into a slideshow of my choice.
Right now I am toying with different ideas but I wondered how easy it would be to link a page of external thumbnails to a template with a royal slider gallery so that when the thumbnail is clicked it goes to the right image in the gallery on that external page?
I know that there is the use of the api with currSlide etc. Could this be applied to the same principle of this idea so each image in the thumbnail list could have an id/number and when that is clicked it corresponds with the currSlide in the gallery and shows that one when opened?
slider.currSlideId // current slide index
slider.currSlide // current slide object
Would it also use this from the api:
slider.ev.on('rsSlideClick', function() {
// triggers when user clicks on slide
// doesn't trigger after click and drag
});
Any thoughts would be great on this.
Thanks,
Mark

This should be pretty straightforward. Using RoyalSlider you can do something like the following (where the user clicks a thumbnail link and it goes to the correct slide in the slideshow):
// Get slider instance from royalSlider data
var slider = $(".royalSlider").data('royalSlider');
// Activate the thumbnail links
$("ul#thumbnails a.fullScreenGallery").click(function(e) {
e.preventDefault();
var slideIndex = $("ul#thumbnails a.fullScreenGallery").index(this);
slider.goTo(slideIndex);
});

jQuery: Change image on checkbox click

I want to change an image when a checkbox is clicked. Until the new image is fully loaded a loader image should appear on top of the current image. While loading the opacity of the current image should also change to 0.5.
The function should therefore consist of the following steps:
On checkbox click:
Change img src
While loading:
Set opacity of current image to 0.5
Display loader.gif
When new image is loaded:
Change opacity back to 1.0
Hide loader.gif
Display new image
How can this be done with jQuery?
Thanks in advance for all proposals!

The steps should actually be
on checkbox click, start to preload the new image
Start by creating an Image object, and then setting its load property to a function that will be called once the image has been completely loaded. Then (after setting the load property) set the src attribute of the Image object we created to the Url of your image.
while waiting, set the opacity, show the loader
Opacity you can control with the css property opacity. You should have the loader already in the page but hidden, and just show it while the preloading is in progress..
when preload is complete hide preloader, show image reset opacity
The function we defined for the load attribute gets called and inside the handler we reset the opacity, hide the preloader and set the src of our element in the page to the src of the Image object we created..
here is a full example: http://www.jsfiddle.net/kqC9U/

Well, lets take a quick moment and dissect the problem:
If your changing the image source (which can be done almost instantly) why do you need a loader gif? In fact, displaying the loader gif takes as long as displaying the new image. If you'd like the loader gif for dramatic appeal you can display the loader.gif, wait 5 seconds, then change to the new image.
Changing the image can easily be accomplished by changing the src attribute on a current image. For instance,
$.('#myCheckboxID').change(function()
{
$.('#myPictureID').attr('src', "path/to/new/image/");
});
Let me know if you decide you need that loader gif for dramatic effect and I'll help you wire it up
edit:
Because the loading effect is desired, try something like this. I'll pencil down some psuedocode, let me know if its not specific enough.
Change the source on your first picture
Hide the first picture for x seconds (get a feel for how long it takes to load)
Unhide a loading gif of the same size with opacity already set
hide the loading gif and unhide the first picture