Next & Closing Buttons - fancybox

First timer here!
Fancybox is just what I need, amazing.
I have set it up on one of my web pages but I can't get the next arrows or any buttons to go.
I have a temp page set up at www.burnmoorcc.org.uk/2bfit/index.html and the image is bottom left under gallery.
Also incidentally the page has for some reason moved to the left!
Thank you for any help,
Best wishes
Graeme

Related

Usability for confirm message in a long form

I term of usability, I'm wondering what's the best solution to display my confirm message.
I have a long form, and in small screen I can't see the top of the form.
When I'm submitting my form, where is the best position for my message "Your information has been saved"?
In the top of the form, and I add an automatic scroll up ?
In the bottom close to the save button?
In a dialog box?
Other solutions?
I tried to find that on Internet but nothing really interesting. Please quote your source if you have an answer for me.
Thanks!
If this is the only place in your application that has this functionality, it doesn't matter so much; if you already have it working one way or the other somewhere else, consistency is the most important.
Where will the user need to navigate to next? If navigation is at the top, auto-scrolling them to the top and showing a message there might be appropriate.
If the navigation is on the left side, auto-scrolling will lose the user's place in the page, which will make navigation harder. In this case, tell them right next to the submit button.
If there's only one place they can navigate to next, skip the AJAX and do an interstitial "success!" screen that also takes them to the next place they'll want to navigate.
But most of all? Consistency with the rest of your app.

facebook share dialog gets cropped

The problem is that my like button is quite at the bottom at the page,
And when someone clicks the like button, the dialog just gets cropped,
and I just can't do anything with it.
Did anyone have a similar problem?
The only way to fix this is by using some CSS to your page to move the dialog box. This is kind of a hack, but its the only way to really do what you want. The only downside is that the tiny triangle in the top left corner of the dialog will seem out of place.
One other option that does not involve moving the dialog is to make your page slightly longer.

scrollview with page control reset

Okay, I have a Scroll View with Page Control that works properly between 2 sections (2 pages).
So I can scroll left and right once. Is it possible to always scroll right?
Like when you get to page 2, it expands to the right, but not allowing to scroll back left.
I dont need it to simply add another page and have 3 pages then 4. at all times there should be only 2.
The reason I need this function is because I will use the scrolling to reset data. As you scroll to the right a duplicate of the interface with cleared fields will come on to the screen as the interface with the old data will go off. Its a neat way to reset, not just a boring old button.
Can someone point me in the right direction on how to do this?
There are many examples of this. Here are a couple.
InifiniteHorizontalScroll
StreetScroller
Hope this helps.

A few questions regarding the Facebook like button on external websites

I am working on a project where I need to manipulate the button in a few ways.
Is it possible to just have the button and not the 'X people like this' text after it?
Does it have to be for one's own page or can it be easily configured, e.g. can I have a button that when clicked likes the fan page for Coca-Cola?
If so, is it possible to get the pop up when you hover over the button, like the pages down the left hand side on https://www.facebook.com/Google
Thanks very much in advance for your help. Please let me know if I have been unclear.
You could try the button_layout layout, which just has the little speech bubble with the number of likers. If you don't like that, you can cut that bubble off by setting the width of the parent container to less than the width of the button.
You can use whatever page URL or web page URL you want.
Hovercards aren't available on fb:like right now, but might be at some point.
More documentation here.

How to achieve slideToggle effect similar to facebook "New Stories" button with jQuery?

As you may know not long time ago facebook added several new features. One of them was a "New Stories" button which when clicked expands (with what I guess is a slideToggle effect) and shows new stories.
Here is the button I am talking about:
I would like to know How to achieve same slide / toggle effect and fade in effect that comes in after this button is clicked, with a help of jQuery.
I tried searching for this on internet, but all effects I found were regular slideToggle effects, I mean they started showing div from top and slided down to it's bottom (here is what I mean by regular content http://jsfiddle.net/TwxB4/), where as one facebook uses starts from the bottom of the hidden div and sort of slides to the top of it. (You will see what I mean if you check it on facebook).
Edit: I am only looking for a slideToggle effect and nothing else, I want to be abble to expand and shrink hidden div when user clicks on the link that lunches the effect.
Edit: Here is an illustration of the effect I'm looking for:
This example works the way you described, showing bottom content first:
http://jsfiddle.net/SBLNn/16/
Also full screen view here:
http://jsfiddle.net/SBLNn/16/embedded/result/
They may also do it by having the overflow of the feed hidden, and then setting a negative margin on the inner feed wrapper, then when you click they just animate that negative margin down to 0.
Does this works for you
http://jsfiddle.net/wb7h6/1/
updated version
http://jsfiddle.net/wb7h6/9/ I hope this is what you need
You want slideToggle() I think. See this jsFiddle.