Discussion on Slidexy - HTML5/jQuery One Pager With Transitions


tallhat does not currently provide support for this item.

45 comments found.

hahaha! crazy theme! awesome!

Good luck with sales dude!

Hey! Awesome job! I love it! and the fact it just works on iPhones etc is a massive bonus so thanks for that. I wanted to know if it would be possible to add a music player to the page that would play on the iPhone etc as well?!.. the way this one works for example: http://www.gunua-works.com/tf/templates/musician/blue.html#images

I’m very very very new to this. Thank you, Daniel

hi, yes you should be able to add a music player to this template, in a content section anywhere you like. you’d need to add the JS file for jPlayer – have a look through: http://jplayer.org/latest/demos/ (i’m pretty sure this is the audio player component that the musician template uses)


Will it work with all unicode characters? Is it UTF -8 compatible? I need it to support non-english letters.

Regards, Sebastian

hi, that should be fine – it’s just an HTML5 document – you might need to add <meta charset=”utf-8”> to the header for your HTML5 charset declaration. the only question would be the fonts – i’ve used 2 google fonts in the template – you’d need to check if they support all the characters you need. look up Rokkitt and Lato at http://www.google.com/webfonts – or it would be easy enough to change the fonts used as required.

Thank you for the reply. Can you please give those two font names?

um, they’re in my reply above – Rokkitt and Lato e.g. http://www.google.com/webfonts/specimen/Rokkitt

If you needed your website in, for instance, Arabic you’d obviously need to switch to an appropriate font.

Hmm. Sorry I missed that. Even if one of those fonts is made by Polish designer, it doesn’t have Polish letters :) I will have to change to something default like Helvetica but thank you again for the information.

I will definitely buy your template – good work!

does this one help? http://www.google.com/webfonts/specimen/Signika or go to http://www.google.com/webfonts and select ‘latin extended’ from the dropdown on the left – about a quarter of the fonts are tagged as ‘latin extended’ – have a look through… click ‘pop out’ to see the character sets for each font.

“I will definitely buy your template – good work!”

I’ll second that, THANK YOU !!!


How difficult would it be to add custom i-frames inside each landing section?

This shouldn’t be a problem at all. What are you thinking? Google maps etc.?

awesome template, any chance of this becoming a wordpress theme some how?

Have considered this, it would be quite a complicated set up I think and I’d be a little concerned about performance. I’d need to see how other wordpress themes have tackled one-page set ups, and I’ll see how the HTML version sells first perhaps and if there’s more demand for a WP version

Hey there… i buy your template! WONDERFUL !!! I like it!!!

only two questions,

1. i can´t see the article h1 … <article id="s2" class="s2"> <h1>HEADING</h1> i tested it with safari, firefox, ie8/9 but it´s not different..

2. content links when i click on a link in a content eg for contact the content is 5cm under the menu and don´t come in with the normal effect…

thank you for this great template!

hi, yes as you say point 1) is for mobile version – or resize your viewport to see it.

point 2) it should work if you target your links within the content correctly – e.g. http://www.tallhat.com/templates/slidexy see the link to page 2 at the bottom of the homepage content. just something like <a href="#s2">link</a>

if you can’t get it to work send me a link to your setup if possible (send it privately if you like via my profile) and i’ll have a look

i´am sorry… the article headings are only for small mobile screens.! very nice :-)

but the second question is still open!


Brilliant template. I don’t see where to rate this, but I give it FIVE STARS .

thank you! if you log into themeforest and go to your downloads page (profile > downloads) you should be able to rate your downloads there.

Before I buy this I would just like to know if there is a way to stop the scrolling bar to not scroll down with the mouse just to scroll down when it is dragged down? If so how?

hi, i don’t quite follow – do you mean disabling the mousewheel (or equivalent e.g. mac mouse ‘swipe’)? if so i’d need to look into it. (why would you want to by the way, most people would expect their mousewheel to function as usual?)


Will thumbnail images be able to expand? Will this take you to a new page? Or can I incorporate lightbox?

Also, I would like to incorporate a large video thumbnail (ie: 500w x 300h) that would link to an embedded vimeo player on the first page. Is this possible? Would a smaller thumbnail be needed for an iphone?

I love the design, simplicity, and cross platform, I’m just looking for the best way to show my demoreel as it is the main point of interest for me.

Sorry for my noob questions, and thanks for your response!

hi, have a look at my latest template http://www.tallhat.com/templates/scrollcase – this is similar to slidexy but i added some components e.g. a lightbox plugin. in this case i used touchtouch http://tutorialzine.com/2012/04/mobile-touch-gallery/ and if you look at ‘page’ 5 of scrollcase you’ll see the implementation of the lightbox (view source).

if you wanted to used fancybox, have a look at that link above i.e. http://fancyapps.com/fancybox/ and the instructions for implementation are there. sorry, i can’t provide support for third party plugins, but first thing is to check to make sure you’ve got the plugin’s js file linked in correctly and have the right classes on the thumbnail image links. you may also need to check compatibility of the plugin’s JS file with the jQuery version being used.

Thanks for your reply. I am still struggling to achieve a lightbox style pop up window for displaying vimeo, or quicktime movies. I’m mostly troubleshooting with fancybox, as touchtouch cannot support videos. I understand you cannot fix every issue on here, so I appreciate your help thus far.


hi, i’d suggest you get fancybox working in a very plain HTML wrapper document first of all so that you know it works (and HOW it works). once you’re happy with setting that up then try adding it to slidexy. it could be that there is a jQuery or fancybox conflict with the template JS, but it should work. sorry i don’t have time to actually deploy fancybox with this and test at the moment.

Thanks tallhat!

Excellent work! Have not been this excited by a theme in a long time.

Bought it and rated 5 stars!

thanks very much – glad you like it! appreciate the comments and rating :)

Hi tallhat,

I’m very happy with the template so far.

Is there an easy way to right justify the menu items (losing the phone number)?

Thanks for your response!

hi, yes it’s a touch complex because of the phone number being right aligned already. basically, look at line 445 of the original CSS file.

.iscroll nav a { display: block; float: left; margin-left: 1em; position: relative; } .iscroll nav a.first { margin-left: 0; }

it’s the float: left; bit above you need to change to float:right; and then you’ll need to change the ‘first’ item margin as appropriate, and reverse the items in the HTML . (alternatively you could introduce another div to wrap the entire nav content and right align this div)

Thanks, it worked!


i have bought this template, very nice

one question: how can i delete ‘page’ 6, so that it can not be seen on iphone and als not in the menu on the iphone


hi, please can you clarify? do you want to delete page 6 from only the iphone view (but keep it visible on other devices), or delete page 6 from all devices? if the former (iphone only removal) you’d need to use ‘display:none;’ on that chunk of content in the iphone CSS (i.e. the non .iscroll) definitions. if you simply want to remove p6 completely chop it out from the HTML .

ok, it works, i hadn’t refreshed my page (but <article id=”s6” class=”s6”> en </article> must be active, otherwise the other sections aren’t aligned )

and another problem: if you delete section 6, in the menu on an iphone, ... keep staying a sixth line. is it possible to delete this line also?

(i don’t know why my comment has been flagged inappropriate?)


i want to place a contact-form on this site

there is no example of a form with a submit-button, so i have placed one that i’m used to use if i want to check the required fields, i go back to the first section and then if i go to the section with the contactform, there are errors because i haven’t filled in the required fields.

so that’s not vere usefull if an visitor can’t see immediately the errors or see a message if the form is filled in correctly

do you have an example of a form that works on this site?

thanks ahead tom

hi tom, i purposely didn’t add lots of components to this template to keep it lean and focus on what was ‘different’ about it compared to other themes – namely the single-page XY scrolling concept. there are of course lots of examples of contact forms with field validation that could be added. obviously i don’t know which you are using and whether there would be any conflict with the template. i didn’t quite follow your explanation of the ‘going back’ to another section and the errors on your form… can you send me a link?

(i know if won’t help you but i am considering creating a more fully featured theme based on this concept, perhaps even with a wordpress framework, but i don’t have a timescale on this at the moment.)

thanks, chris

okay, it works



i have set a footer on each section, but i don’t want to have this footer visible on the mobiles

how can i do this?

this is the code for the footer:

<?php include "copyright.php" ?>

firstly, all the .iscroll CSS definitions (automated) are for the desktop and ipad display. so if you wrap your footer bit in a div and give it a name then you can do something like:

.footer {display:none;} /* HIDE THIS ON MOBILE VERSION */
.iscroll .footer {display:block;} /* SHOW ON DESKTOP VERSION */

okay, it works