Discussion on Slidexy - HTML5/jQuery One Pager With Transitions


tallhat does not currently provide support for this item.

45 comments found.

How do I choose which side of the transition will be performed?

hi there, not quite sure what you mean here – could you clarify? thanks!

When you click a menu I want him to go, when you click the one that he goes to the right side, and another left, I really want to be able to decide what position it will take.

hi there, this one is a little complicated! to explain… the ‘sections’ are spread out automatically based on their size (and relationship to those sections around them) and follow a logical linear positioning rule (see the ‘spreadArticles’ function in the HTML file). this was done intentionally and allows the ‘spread out’ to be done dynamically at page render time, based on the viewport size, and also means that the layout is responsive. there isn’t really an easy way to individually position the sections because then we would lose this dynamic (automatic) spread and it wouldn’t be so responsive to the viewport/content size etc.

you could potentially start experimenting with hardcoding the ‘top’ and ‘left’ attributes in the spreadArticles function for each section, but i wouldn’t recommend this.

Hi Chris,

I’ve run into a couple of problems with this plugin.

I resized the browser in order to test the responsiveness and the functionality somewhat broke.

Instructions to duplicate error (on Chrome):
  • Resize browser to handheld-mobile width, might need to do this a few times.
  • Click on menu item.
  • Click on “Back to top…” in menu item content section. Behavior: It tries to “ease” back to the top, similar to the easing on the “desktop” version. However, it doesn’t quite make it back to the top and causes the content to be pushed over to the left (half cutting it off) and the menu is hidden when attempting to click on it.

Refreshing the browser causes it to recognize the screen size and the site behaves normally. However, when re-expanding the browser width to full size, the plugin still believes that I’m on a mobile. Thus, another refresh for it to realize it’s in desktop mode.

It looks like it’s misfiring somewhere in the responsive design configuration and not fully switching to mobile from desktop (and vice versa) when resizing the browser window.

I have a video that I uploaded to Youtube (unlisted) that I used CamStudio to record the behavior in case my description was not clear to you. I have sent that link and copy of this message to you via the email address provided in the help document. (I didn’t think it prudent to share the link far and wide).

The plugin works great on the mobile devices (tested iPad and iPod).

Will you please let me know if this issue will ever be fixed?

Thank you for a wonderful plugin, I look forward to your response! I would love to be able to use this for a current project I’m working on right now.

Sincerely, Courtney

hi there. thank you for your description. does it do the same with browsers other than chrome? for some reason i didn’t receive your email with the video link. could you resend please? many thanks. i’ll look into this.

i think it’s probably very ‘edge case’ behaviour for a desktop user – you’re only really getting this because you’re artificially changing the viewport size down to a very narrow width on a desktop. but i agree it would be good to iron this one out, i’ll see what i can do.

Thank you for getting back to me so promptly! :)

I went ahead and used your site’s (tallhat.com) contact form to send you the link.

I tested the plugin in IE9 , FF12 , Saf 5.1.7, and Opera 11.62 and it had the same issue as I reported above with Chrome.

Thanks again for your time! I look forward to your response. :)

Sincerely, Courtney

This is a review for those of you who might be interested in purchasing this jQuery plugin.

Short version: Buy it if you’re looking for a responsive multi-directional eased scrolling jQuery plugin.

Long version: I have rated this plugin 4 stars because:

  1. The maintainer was quick to respond to an issue;
  2. It works right out of the box.
  3. Did I mention it works?
There are a few reasons why I did not give it five stars.
  1. The code is slightly messy. Indentation and comments in the CSS are not consistent and some of the CSS is disorganized (e.g., styles for .s4 are before .s3). For some, this will not be a big deal.
  2. There is a hiccup in responsiveness that occurs during an edge case when a user resizes the browser that requires a page refresh to fix. See my above comments. Please note that the maintainer said he would look into this issue.
  3. There are some inefficiencies in the CSS , such as multiple header style declarations (e.g., h1 and then .home h1).
  4. No “blank” theme to work from to add my own look and feel. This may not be a big deal to some if you just need to swap some images and change a couple of colors. However, if you’re planning on creating a brand new theme, note that you will have to do a lot of editing to the stylesheet and HTML in order to get a clean “template” to work from. I may be unique though in that I purchased this plugin for functionality only.
  5. Aside from my above grumblings, I have to say that overall, I am happy with this purchase. It’s a good plugin to have, it works, and the maintainers seem keen to answer/address any questions, comments or concerns.

    Thanks again for a great jQuery tool! :)

hi there – thanks for the feedback – useful! we’re still looking into that edge case issue, not as straightforward as i’d hoped. will update again…

Hi there, just to let you know we’ve now fixed the edge case issue you pointed out. I’ve uploaded a v1.1 of the template. Hopefully you can download that. The changes are primarily within the Javascript chunk at the end.

Hi Tallhat

Ive purchased slidexy from themeforest. Most of it i have figures out.

However 1 part is eluding me.

I have some content that has images in it. when viewing on a horizontal iphone, it shows as expected, however when viewed in vertical mode, the images width are cropped.

It is like the containing div is getting its width resized.

the site is live at www.chubcheeks.com/lab.html

Can you tell me what i have to do to make sure that the images dont get cropped, ( i suspect that somehow i have to stop the content from getting resized on the iphone orientation change )

Thanks in advance Anton

Hi again Tallhat,

I managed to fix the issue i was having by stopping the javascript from changing to the mobile layout.

the end website is looking pretty cool i think!


good stuff! works well with youtube embeds! just one thing i noticed – your blog link doesn’t work.

I have back for navegator

www.tallhat.com/templates/slidexy/#s3 for www.tallhat.com/templates/slidexy/#s2 more change the content.

Using my firefox.


6 days?

I have back for navegator www.tallhat.com/templates/slidexy/#s3 for www.tallhat.com/templates/slidexy/#s2 more change the content. Using my firefox. .

sorry i’d love to help but i’m afraid i don’t understand your message at all! could you clarify please?

Back page using the navegator in site.

7 days go…

sorry, i have asked for clarification of your issue a few times now… the messages have so far been impossible to decipher.

I want to go back to page thru the browser

i’ve had a quick look into this. the built in browser navigation buttons by default only seem to work at a ‘page’ level. as (by definition) slidexy is a ‘single page’ this is where the problem occurs. however, apparently it IS possible to target hashtag and jquery events with the browser navigation but it would involve setting up another jquery plugin to track the ‘history’. have a read of http://www.electricfairground.com/2009/10/01/restoring-conventional-page-navigation-to-your-javascript-application-with-jquery-history-plugin/ . unfortunately i don’t have the time/resource for the foreseeable future to implement something like this.

You said in an earlier reply to someone: “you could potentially start experimenting with hardcoding the ‘top’ and ‘left’ attributes in the spreadArticles function for each section, but i wouldn’t recommend this,” in response to someone wanting to make each section go to a specific location. Why wouldn’t you recommend it? If you know that you won’t need to change the location of each section in the future, what kind of harm will it do?

it wouldn’t do any real harm. the main reason i wouldn’t recommend it was that the locations/positions are automatically calculated dependent on the viewport size, so it all works nicely and you don’t end up, for instance, with bits of other ‘sections’ appearing at the edges on large viewports etc (as this is all taken into account in the algorithms).

by hard coding positions you’d lose this ‘context awareness’ and you’d need to do a lot of testing with a wide range of viewport sizes to make sure things position as expected in all scenarios.

it could be done though. (but i think by doing that you’d lose the main idea of the whole template and the javascript algorithms for the positioning which was actually the main purpose of the template. not wanting to jeopardise my own sales, but if you wanted to hard code section positions it might actually be more straightforward to find a more basic scrollto template – if one exists!)

Thanks for the detailed response. I understand what you are saying. I have a project that needs to be able to scroll in both directions. I’m amazed at how little info there is on doing that.

I love this theme but I’m having two problems:

1) In Firefox the original grey background comes up rather than the orange background in which it was changed.


2) On mobile Deives, Androd and iPad the links don’t work.

Please advise. THANKS !!

hi, there are several background gradient definitions – to cover all browser bases – make sure they’re ALL changed to your orange scheme. it might also be the background graphic fallback that’s kicking in… check that too.

re: links – where do you mean? they work fine on my ipad2…

Are you referring to the gradient definitions in CSS ? So, if I change the background graphic fall back I should be ok.

On my HTC phone when I click on menu it seems to be hit or miss if the “pages” work and when I am able to go to another section when I click on the TOP button it takes me to grey area of the page and not the top.

Also, in IE the phone number at the top next to the menu, seems to work like a page link that says “Webpage cannot be displayed”. Any ideas?

yes, change ALL CSS definitions AND the fallback background graphic if you want good compatibility on various browsers/systems.

how does your HTC phone work with the original template? i.e. http://www.tallhat.com/templates/slidexy/

the phone number does have a link on it – take it off/change it as required: <a href="tel:123456789" class="tel">123 345 6789</a>

How can I use this template in the wordpress since i have purchased this template and not able to make in work as a template in wordpress. Please help me.

Thanks tallhat for the fix and the quick reply thank you so much. Now its working perfect.

no problem – would love to see what you’ve done in terms of wordpress integration on this when you’re ready…. :)

hi, is your wordpress version of this live now? would be interested to see! thanks, chris

Hi. I have purchased this theme and cleared most of the HTML / CSS except the core and I have themed it without problems. I decided I want to use jScrollPane but whenever I add the appropriate selector, it is playing with the height. Can I use jScrollPane without changing the heights? I’ve already set the height of the DIV’s to what I want them to be and put overflow-y: scroll. All I want to do now is customise them with jScrollPane. Many thanks in advance.

I do not want them to “Resize the content according to remaining space” (as you have commented it in your code).

Up until now I have not been using your .content class as a container for my content – I have gone a different direction. I need jScrollPane on the site which I have discovered is present on the .content class. However that .content class also dynamically resizes any DIV that the class is attached to and I do not want this.

What I would like from you is to answer how I would edit that portion of the code so I can continue to use jScrollPane but REMOVE the bit that dynamically resizes the height.

Mant thanks.

have you tried removing/playing around with the updateContentHeight calls/function? if not can you just apply scrollpane to your new classes – in this way: class.jScrollPane(); ?

With regards to your second suggestion, how would I implement this? Where do I add the class.jScrollPane(); ? Thanks.

Hi there, tallhat. I see you’re in the middle of a discussion with hatzipanis, but if I could get a quick assist from you as well, that would be brilliant. To make a long story short, I’m trying to get your canvas/scroll effect to effect the base background rather than just float above it. In other words, when I browse between “articles” (ie Pages), and the scroll effect happens, I’d like my background to move in time with the transition as well.

Here’s an example of a website that does what I’m trying to achieve as it relates to the “traveling background” effect: www.agedordujeuvideo.fr . As you can see (following along with the solid and broken white lines), the background graphics all appear to be “connected” (for lack of a better term) to the HTML5 canvas path. Is it possible to get that effect with this template, and if so, what other sections should be edited in the “style.css” file if not only the info on lines 20 and 94 in that class sheet (eg: background: #2a2a2a url('../img/gradient.png') repeat-y top center;? I look forward to your speedy reply!

Thanks for the reply on this. Interesting, performance doesn’t seem to be an issue for the guy that made that site. It looks like he has embedded (Youtube) videos and other jQuery parallax effects all going on simultaneously without any noticeable lag on the browsers/systems I checked that site against (LINK) . I only plan on doing a fraction of what this person did, so I’m not sure I understand why that would be such a performance concern.

But even if it was an issue, I was hoping that your template would at least set me in the right direction. So, are you saying that there’s absolutely no way to modify your template to have a fixed style/persistent background, or at least fake it in some way?

hi, no i’m not saying it can’t be done, but it’s a fairly major customisation from the sound of it, beyond the scope of general support/bug fixing. at this point in time i wouldn’t have the capacity to help with this i’m afraid.

Fair enough, thank you all the same then.


I bought “slidexy” and I am very excited by the possibilities and originality of your work. But I have a problem on the mobiles: the menu is displayed but the links and the buttons “back to top”do not work. So I did tests: - For the version on your server everything works. - I put the folder “build” full on 2 different servers and it does not work.

Thank you for helping me! (sorry for my bad english …)


hi, yes, sorry a bug got into the JS on a previous upload. i’ve just submitted a new zip to themeforest – i’ll update the description when it’s ready. in the meantime you could grab the working JS from http://www.tallhat.com/templates/slidexy/ (view source and grab the main chunk of JS at the bottom of the file and replace yours with this)

new file zip uploaded to themeforest now

Hi tallhat great product.

I am trying to change the names of s2,s3,s4 etc. for seo purposes. It’s not as easy as changing the href and article id tags as it breaks the layout. Can you suggest a painless way for me to be able to re-label s2,s3 etc. to something else.

Thank you so much.

you need to edit those references in the HTML (they are referenced in the JS at the end of the file) AND in the CSS file. best bet would be a find and replace (make sure you backup first then test thoroughly!)

Hello everybody, Very nice template, a bit tricky but surely an original one. We need to have some menu items that are links to other pages (social pages in general), but when added in the nav area the left click does nothing. The links are there, but no action is done. Could you please help? Thank you in advance!

hi, this may be related to inferno64’s issue – there’s a bug in the JS code – new version submitted. in the meantime you could grab the working JS from http://www.tallhat.com/templates/slidexy/ (view source and grab the main chunk of JS at the bottom of the file and replace yours with this)

new file zip uploaded to themeforest now

Thank you for your quick response! It works very well.