Develop Reference

Change CSS based on scroll position/anchor points

On my site I'm currently having users click on a set of navigation links that will, onclick, highlight their backgrounds yellow.
I remember seeing a similar effect on this site at http://docs.meteor.com/
Here, when user scrolls to a specific anchor in the document, the navigation element that links to it is highlighted. How does this work? How do I begin to implement something like this on my page?
Any brief pieces of example code would be greatly appreciated. I've been working with some JavaScript for a while now and haven't been able to recreate anything.
EDIT: To clarify the effect I'm looking at on the Meteor site, when you scroll in the right column, the associated menu element on the left column changes font color to red. NOT, the on hover effect.

There is ready thing for that in bootstrap called scrollspy

Integrating fancybox into galleriffic

I would like to integrate some of fancybox's features into galleriffic. Basically I want to have a gallery of images with their respective thumbnails using galleriffic. Besides the styles my approach looks very similar to: http://www.twospy.com/galleriffic/example-2.html
Additionally, I want to be able to zoom into the image being shown. For such prupose I am using fancybox. An example of its behaviour can be found here http://fancyapps.com/fancybox/demo/
I have managed to make what I described above slightly modifying the galleriffic buildImage function leaving it as follows:
.append('<span class="image-wrapper current"><a class="advance-link fancybox" rel="group" href="'+imageData.image.src+'" title="'+imageData.title+'"> </a></span>')
Now, galleriffic adds the fancybox class fancybox needs as well as the image source. This works wonderfully.
At this point I find a problem I don't seem to find a neat solution for. Fancybox allows to navigate through a collection of images by clicking on the right/left side of each image to go to the next/previous image in the collection (as you may have noticed in the demo provided above). I would like to make use of this feature as well, so that users can navigate through the gallery by navigating through galleriffic's thumbnails, as well as through a zoomed version of the images using fancybox.
The problem I find here is that galleriffic creates the a class="fancybox" only for the image whose thumbnail has been clicked. This makes that fancybox is only able to find one image of the gallery. I don't want to define the class fancybox to the 's that define the thumbs for galleriffic because i dont want the images to be zoomed when clicked on the thumbnail but on the main image.
In a way, what i need is to generate all the 's with the fancybox class but hide all the not shown, instead of generating each time the one I need via galleriffic. This is the only solution I can come up with but it is not neat. I like how galleriffic deals with generating the main image each time the thumbnail is clicked.
I am wondering if someone can come up with a nicer solution. For example, fancybox could be able to know which image comes next by searching in the next galleriffic thumbnail's .
I have tried to make a working jsfiddle demo but there's too much code involved. Also there is no definite problem but a conclict of implementations. I think you can replicate my current situation easily.
Thanks for the effort!

I tried your method above, editing the BuildImage function as you did. For me, it successfully links to the image, but does not load in FancyBox.
I have this code in the main file:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
You were successful combining the two, correct?

Appcelerator Titanium Slider

I am new to the whole Appcelerator world so I had a question:
Anybody is aware if appcelerator titanium provides slider functionality similar to this screenshot?
If not, what would be the first docs to look at?
No need for fancy animation or anything, just simplest transition.
I just need basic slider for titanium that has slide selectors looking like small circles (or something I could modify or adjust to custom needs).
Also, yes I'll use this as a startpoint
http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI.Slider-object
But the page doesn't have screenshots of how the slider object looks and acts.

You want the ScrollableView control, with the paging component enabled.
http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI.ScrollableView-object

For displaying such kind of progresbar or slider u have to create custom view and inside that custom view put as many as dots images as you have photos and just scrolling of each photos change dots image as per e.current / e.views ...
and set previous image to default image. and make it touch enabled = false.

ScrollableView control, with the paging.
link

Javascript carousel/slider with customizable navgation

I am currently developing a site and have a need for a javascript-based carousel/slider hybrid on the home page that fades between 3 or 4 different images automatically, giving the user the chance to click on one and go to another page on the site. I also need the different slides to have some sort of navigation, denoted either by names for each slide (like in the Coda slider effect) or by symbols (such as dots for each slide), to allow users to review their options before clicking on the slide to visit the particular highlighted section.
I have seen this done in many ways with flash , but the only javascript approach I have seen that meets my needs is the one used by Apple on the new iLife page (link). Does anyone have any ideas what they are using or if there is a project that is similar to their implementation?
Thanks in advance.

Unless I'm missing something, the navigation on iLife looks like a photo gallery where the large photo links to the destination. I've used the jQuery Galleria for photo galleries because the animation effects are superb. Also the forum provides helpful community-based support.
If you wanted a carousel-style animation with the images sliding left and right, might try the jQuery Carousel library. I have not used it myself though so cannot comment on its ease-of-use or quality.

jQuery animate or jCarousel

The YUI Carousel Control would be another starting point to have a look at. (Note as of writing it is currently in beta.)

Hey I am not sure how helpful this will be but check out this slider. It is super simple and has the navigation thumbnails i think you are looking for
http://codetutorial.caroshaw.com/jquery_image_slider.php

Need Images to maximize on mouseover in HTML pages

I m have thumbnail images in a table and on mouseover the image i should get as blow up and on mouseout it should be normal thumbnail. and i even need to navigate on clicking the Blowup image.
plz guide me with the code of how to do it using javascript or using CSS
I need some thing as in this website : link text

Have a look at the jQuery Plugins, you could probably configure the ThickBox plugin?

Or a pure CSS implementation, doesn't work on IE6 though.
CSS Light Box

question: do you have two pics? One for thumbnail one for enlarged pic? or only one image that changing size?
do u want it gradually maximize or instantly become large?
For 1st case, just do:
function mouseOverFun() {
document.getElementById('imageName').src = "largeImage.jpg";
} // just do the reverse for mouseOut event.
for 2nd case, if it enlarge gradually, look at jQuery.
if not, just change the element size.

jQuery, or any other Javascript library has a host of things you could use to make a fancy gallery.
Try this site:
http://flowplayer.org/tools/index.html
Take a look at the demos pages; excellent ideas for what you're looking for.