Indexhibit Support

First: Big thanks to everyone involved with Indexhibit! This tool is incredible and has made my LIFE better and the forums have taught me a lot about style sheets... I got up and running with this in a few hours and already passed it on to a few friends... Big props for such a simple to use yet powerful tool!

2nd: Does anyone out there know if it's possible to maneuver the horizontal scroll bar in my site(which uses crabs to scroll images horizontally) so that it sits right below the images and above the menu instead of at the bottom of the screen?

Thanks in advance, gil
www.gilnevo.com

There's a few things I can think off.

set a fixed height to the div containing all of your content (its called "content" I believe if you still use the defaults) this should give you the expected effect (but check all the browsers you intend to support to be sure you do not have unexpected surprises).

If you want more control, build yourself a javascript scrollbar... check out jquery UI for a quick and easy support of drag and drop. You can see an example of that on www.naturehumaine.com. I don't mind you taking a sneak peek at the code.

Be warned, although the logic is not that hard, this is not a beginners tasks. If you do take this way and build one for your site, consider packaging it and giving it back to the community ;) (Yeah, I know, I should be the one doing this...)

Hello Antoine, beautiful website. That java script scrollbar is very nice but I must warn you that it doesn't work with two finger scroll on my pb trackpad.
Gilnevo, wonderful photos! Actually I find the scrollbar at the bottom of the page to be less obtrusive and more ui friendly than in the middle of the screen.

What is a "two finger scroll?"... this probably emulates a mouse scrollwheel...
If that's so, even a regular mouse will have no luck with that site... this is not a browser scrollbar skin or something of the kind... this is just some javascript trickery ;)

Thanks for the heads up!

btw I agree with cruz's statement that a scrollbar in the middle of the screen tends to be obtrusive... you be the judge ;)

hey antoine, i'm looking for some similar java to scroll photos on my site. any advice?

jordanbower.com

sorry, i realized this doesn't make sense: i love the way your photos scroll from image to image when you click the directional arrows on your gallery. i want to create a similar scroll on my site. i found a jquery plugin called scrollTo and have tried it, but it's not working. i'm sure i'm screwing up something easy. any ideas?

    $('a#right').hover(function() {
        $('#content').scrollTo('+=100px', 800, { axis:'x', });
        return false;

$('a#right').click(function() {
$('#content').scrollTo('+=100px', 800, { axis:'x', });
return false;

Why not just use the animate function provided by jquery... I will not really take the time to check that plugin... you can do what I did using the basic jquery library. Have a peek at the code I wrote for that navigation...

And if you want us to check your stuff quickly, please link to a live example of what you're trying to achieve. (even if it's buggy)

Btw, your site is coming along pretty well. I see you've manage to hide/show your menu ;)

And if I might suggest, this thread might be an interesting modification suggestion for your textual content that runs a bit on the long side (would let you make it run in 2-3 clumns) I think i will have to make this a permanent modification to the crabs template someday, but for now you can read how to go about and implement it yourself.

thanks antoine, let me deal with the scroll first; i'm sure i'll have questions for you about the text afterward :D.

checking your code, and adding some thoughts. can you correct me where i'm wrong?

activePicture = 1;

// what are you defining above?

function moveImgContainer(){
    target = "#_"+activePicture;
    newPosition = 275 - $( target ).offset().left + $("#img-container").offset().left;
    $("#img-container").animate({
        left: newPosition
        }, 850, "easeOutQuint" );
    checkScrollbarStatus();
}

//so here it looks like you're defining a function called moveimgcontainer. you're creating a target, but i don't understand what #+activepicture means - it must be something about defining the new position. you do that in the next line: new position = 275 - target - imgcontainer? care to explain that briefly?

function natureNavi(){

//this must be the actual function to move the images that you're referencing in index.php.

    numberOfPictures = $("#img-container .small, #img-container .large").length;

//totals the number of pictures to define the length.
    
    $('#image-navi').prepend('');    

//inserts the arrow icons

    $('#image-navi-left').click( function() {
        
        if( activePicture - 1 >= 1 ){
            $("a.numbers[href='_"+activePicture+"']").css("font-weight", "normal");
            activePicture--;
        }
        moveImgContainer();
        $("a.numbers[href='_"+activePicture+"']").css("font-weight", "bold");
        return false;
    });

//on click, move left and update your numbers layout at the bottom. if i just wanted icons and now numbers, i'd remove the lines that referred to 'a.numbers', right?

    $('#image-navi-right').click( function() {
        if( activePicture + 1

by the way antoine, this is the effect i'm trying to achieve:

Webpage

thanks again for all your help!

Oh boy, you have to hide that link... what a pain for the eyes.... :)

You can use my code for reference, but you'll have to adapt/write your own to get your own thing going. I won't explain this here in detail since this is not a plugin for indexhibit and this is too much of a custom solution to be able to provide support for every install out there. (this is based on the design grid... won't work if the dimensions are different and all)

Write your thing and if you get stuck I'll gladly give you some advice on how to debug YOUR code ;)

thanks antoine. i'm brand new to this, so i'm trying to get my bearings... i'll be back when i get lost, i'm sure.

I suddenly saw a scroll bar underneath my Index. You guys have an idea how can I make it disapear? I would appreciate an answer! thank you! :D

And we would appreciate a link to your site
;)

i also have some problems with the jScroll..
i applied it to the content for the paragraphs :

    #content p { /* sets the properties for all paragraphs in the content area */
            
        overflow:auto;
        width: 420px;
        height:100%;
        max-height: 300px;
        background-color: #FFF;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 20px; /* sets the space between paragraphs */
        margin-left: 0px;     
     line-height: 10px; /* use this the change the leading (space between lines) */
    }

and also to my index:

path = '/files/gimgs/';

$(document).ready(function()
{
    setTimeout('move_up()', 1);
    $(function()
{
    $('#content p').jScrollPane();
    
    
});

    
});

but it appears whenever it likes and in any content.
i don't know what's the problem.

any idea?

www.gg3.gr

@gg the scroll bar will appear whenever the container is smaller than its contents: it's necessary, otherwise you wouldn't be able to see all of the contents

check with firebug in firefox to identify different containers and their width/height definitions, etc
http://www.w3schools.com/ is a good reference

1. the problem seems to exist only in safari and chrome while in firefox scroll bar is loading only for paragraphs (that was my intention):
2. $(document).ready(function()
3. {
4.     setTimeout('move_up()', 1);
5.     $(function()
6. {
7.     $('#content p').jScrollPane();
8.     
9.   });    
10. });
11. </script>

anyways i cannot find the container with this increasing height and the problem still that i cannot apply it just for my paragraphs in safari and chrome..

** thank you for your answer pernin!! (: