Discussion on SCRN - One Page Responsive Parallax Template

Discussion on SCRN - One Page Responsive Parallax Template

Cart 2,986 sales
Well Documented

clientica supports this item

Supported

This author's response time can be up to 1 business day.

284 comments found.

Hi there, thanks so much for the theme.

Question for you : on the pop up galleries where you have sub images image 1/4, etc. – can we embed a swf or flv video to play in there? I have FLV files and swf files (my motion design work) in my images folder that I want to play in a video player in the pop up window when you click on the thumbnail from the gallery. How do I do that? Please help, thanks!!

So far looks great on firefox and IE. On the iphone there are some alignment issues. Any fix for this?

Hi, thanks!

Yes it’s possible to play flv and swf with the prettyphoto plugin.

For flv you’ll need a player: http://flowplayer.org/

For swf, you only need to link to the file directly.

Your theme in IE7 :(

http://www.freeimagehosting.net/h3fr2

Responsive dosent work. Header is like … out of is range. Pretty everything dont show up correctly. Can we do something for this. Im at work and my site look like broken as hell. I zoomed out so you can see more of the theme.

Hi,

Yes I know.

I don’t plan to support IE7 , it’s old, full bugs and doesn’t support most modern properties in this template.

Alright, i was just wondering if you knew that problem whit this IE old version. I’m looking for a script that will notice IE7 user to use a other browser to browse the website. I think it should be a must have if you plan to don’t support old browser to tell the visitor that they should update their stuff, it also tell them that your website is not a piece of crap and its actually their fault if they use a 10 years old IE version.

I think your theme should come whit a script like this out of the box if you want to become a top seller on themeforest. I don’t usually buy theme from “beginner” author because they offend don’t come whit bulletproof code ready for everything, so you should really add stuff like this. It ads a lot of value, but the most important … credibility for regular buyers. Its all these small thing that make some theme really popular ( 1000 sales and more ).

If you want me ( and probably us ) to buy your stuff like crazy. Just keep rocking on

- Ultra responsive stuff whit a shitload of media queries for everything ( iphone landscape and portrait, ipad landscape and portrait, and more and more ) - Retina support. ( now becoming the standard for portfolio, agency, artist templates … just add it for every release ! ) - Out of the box script integration. ( pretty photo, contact form, parallax, big java menu, and moar ) - Innovative jquery content display and nice looking template.

Just for one example, your mobile menu version could have been like this out of the box. http://www.kodemtl.com/test/templates/index.html ( scale it down to mobile size ). I know its a small part of code to add, but it really give the theme a more responsive friendly feeling when you scale it down. because whiteout this, the nav just screw up in two lines and dont show up correctly on my mobile and im like :(

You are absolutely right and I’ll keep working to improve my themes.

What specific code was updated in the latest fix as I dont want to overwrite any changes I have previously made.

Thanks

Hi,

I replaced the smooth-scroll plugin. And made some minor changes in the media-queries section.

Great site. Can the first page take video? (where “Hello Welcome to scrn” is)

Thank you.

Thank you! : )

hi, actually i want to replace the home page banner image that is located in the css with video.

intro .bg1 {

background: url(../images/bg1.jpg) 0 0 repeat fixed; margin: 0 auto; padding: 0; position: absolute; z-index: 100; width: 100%; height: 600px;

How do i change the above so that .bg1 is equal to a youtube video?

The parallax effect is only possible with images.

But you can try adding a video to the #intro section with this: http://dfcb.github.com/BigVideo.js/

What is a good way to add another parallax layer on top of bg1 or bg2?

Hi, thanks.

You have to edit the nbw-parallax.js file:

create a new var like:

var bg1-2 = $("#intro .bg1-2");

scroll down and this in the proper section:

bg1-2.css({'backgroundPosition': newPos(50, windowHeight, pos, 400, 0.2)});
Play with the values 400 and 0.2 to change the vertical position and the scroll speed respectively.

Then in the HTML and CSS add the code in the same way I added to .bg1.

Great template.

When I scale my browser window larger than 1024, the intro line text disappears. How can I fix this?

Hi, thanks.

Larger than 1024? What browser are you using? I can’t replicate this issue.

Question…

How do I set the Intro background image to where the very LEFT & TOP of the image is what you actually see?

Hi,

Open the nbw-parallax.js file.

Go to line 71 and you’ll find this:
bg1.css({'backgroundPosition': newPos(50, windowHeight, pos, 400, 0.2)});

The value 50 controls the horizontal position and the value 400 the vertical position. Play with these to set your image correctly.

Hi Rod, Love your template and my website is nearly ready.

A question on the flexslider – is it possible to have an overlay of text to appear over the picture (without resorting to editing the pic itself).

thanks, cheers.

Hi, thanks!

Flexslider is a very basic slider, so I think that’s not possible.

The form is working well and sending the message to my e-mail as intended to. But when I try to send a second message, the old info entered in the form stays the same, and cannot be cleared nor edited. I tried to clear the cache if it was a cache issue. Still the same.

thanks, Brenda

Hi,

In a next update I will see if I can add a small script to clear the text.

Thanks.

Hi Rodbor, Firstly just wanted to say thanks for all your work. A very nice template! I’m having some trouble with getting the email contact form working. Would you be able to assist please?

The url of my site is www.canfordrecovery.co.uk

Thanks,

Oliver

Hi, thanks!

Did you change your email in process.php?

Sorry forgot to give details… Yes process.php updated and permissions on the file changed to 755

I get no errors but no email is received.

Thanks

Oliver

It should work, maybe the problem is in your webhost?

I’m thinking about buying but it seems to be broken in landscape mode on iPhone? The images seem to double up as well in the header? Is there a fix for this? Apart from that is looking top notch!

Hi,

Thanks, it will be fixed this week.

If you want to change the mobile menu for a drop menu like in this test.

http://www.kodemtl.com/test/templates/index.html

Just figured out how to do it. Correct me if im wrong, but since the nav is used whit a lot of jquerty to make it stick to the top when you scrool down most of the tuts out there to make the mobile menu dosent work since they use the same parameter as some other function used in this theme.

If somebody else is interested

Add to layout.css ( to style the drop down )

select { 
display: none; 
border:0; color:#F0F0F0 ; background:#303030 ;
font-size:20px; font-weight:bold; padding:2px 10px; width:400px;
*width:400px; *background:#000000; -webkit-appearance: none;  
}
#mainselection { overflow:hidden; width:350px;
-moz-border-radius: 9px 9px 9px 9px;
-webkit-border-radius: 9px 9px 9px 9px;
border-radius: 9px 9px 9px 9px;
-webkit-appearance: none;
}

Add your mobile navigation in the first main body container and not in the nav ! ( go chek to demo source code to find out where i put the mobile of your dont understand )

<select><option value=”#intro” selected=”selected”>Intro</option> <option value=”#work”>Bienvenue</option> <option value=”#services”>Sevices</option> <option value=”#about”>L’équipe</option> <option value=”#contact”>Contact</option> </select>

Under the prettyphoto plug-in script at the bottom of the index.html file add this ( to make the menu work )

<script>
$("select").change(function() {
  window.location = $(this).find("option:selected").val();
});
</script>

Now go back to the layout css in the media queries section. Add these line in these 2 medias queries section ( to hide and show the correct menu at the correct screen size )

@media only screen and (min-width: 480px) and (max-width: 767px) {
nav { display: none; }
select { display: inline-block; }
}                  
@media only screen and (max-width: 479px) {
nav { display: none; }
select { display: inline-block; }
}

And when you add more section the top menu bar don’t show up correctly in the smaller screen size …

http://www.kodemtl.com/test/templates/index.html

If you re-size the page to a smaller scale ( mobile ) you can see the menu going from 1 line to two line. Im looking to modify the script to make the menu a drop down menu at smaller with but I didn’t figure it out yet…. :(

I made a couple of adjustment in the media queries section to make the theme more responsive and custom for each screen size, just added more parameter like the h2 tag and chaged it by a couple of pt for each size ( so the user really feel the responsive transition )

Its based on this framework : http://www.getskeleton.com but i still didnt figure out how to edit the nav for the mobile version media queries

You have to change the css in the media queries. Try using a smaller font-size, or reducing the padding in:
nav ul li {
            padding-left: 5px;
            padding-right: 5px;
        }

Of course you can add a drop down menu, there are some good tutorials around.

Cheers!

Thanks, but rodbor dont fell like you need to response to every of my comments whit the coded solution. I just love your templates and im trying to tweek it to the max before lunching my website.

They are not a lot of good parallax templates, this one will be a great hit im pretty sure.

Also looking for an answer to Brenda’s question above about adding sections.

I am looking to add two more sections, but I am having trouble determining how you set the window height as there doesn’t seem to be a pattern to the numbers… (400/500 for the first section, 3410/1550 for the second, etc).

Any help?

Hi,

Well, you have to play with those values and found the ones that work with your images and your heights.

Great Work indeed! All the very best for more sales :)

Thank you!

In witch file is the update modification ?

I made a lot of mod to some CSS and java file and i don’t want to redo everything so if i could know at least witch file is involved in the update it would be nice. ( just add the file name modified in the update description )

The file updated was the layout.css. Scroll down to media queries and replace the first media query with this:
/* #Media Queries
================================================== */

    /* Smaller than standard 960 (devices and browsers) */
    @media only screen and (max-width: 1024px) {

        .title {
            position: relative;
        }

        #intro {
            height: 500px;
        }

        .title {
            padding-top: 20px;
        }

        h1 {
            font-size: 100px;
            margin-bottom: 60px;
        }
        h1.small {
            font-size: 80px;
            margin-bottom: 20px;
        }

    }

Very cute and fast design. I enjoy working on it.

Is it possible to add more pages (or sections) and menu choices to link them? Once more pages added, can they be linked from anywhere within the existing pages?

Also I purchased on 28th and downloaded rightaway. Theme Forest page says that it was updated on 29, so I downloaded again on 29th as well. But both 28th and 29th files were exactly the same. Do you have an idea when the update will be uploaded and available?

thanks,

Brenda

Hi, thanks!

The version available now for download is the latest, it was approved 6 hours ago.

Hi, thanks so much for the reply. You mentioned that you would include an example gallery in your next update (is that tomorrow???). Would you be able to include the type of gallery that addresses the following, if possible? Would be very grateful!

“When you click on each thumbnail in the work section, for each project I want about 3-4 image slides for that project with captions that you can click through using navigation arrows. For example, if you click on project one, then the lightbox thing opens and it will say 1/4 (first image out of 4) and then you click on the arrows to navigate within that project. How do I do this in this template?”

I hope the update will be available for download tomorrow night. And yes, you will be able to have this type of gallery.

Hi, I am planning to buy this template but it looks like you have an update coming real soon. Do I get to download a new template again then, or do I need to manually add in the changes? Cheers Bob

Hi, yes you get to download it again. Thanks.

great file! trying to make the background of the #work transparent but can’t figure it out using CSS . please help? thanks!

Hi, thanks!

I don’t think it will work that way. But, maybe if you put as the #work background the same one in #intro, you get the effect you want.

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve ThemeForest.

Sure, take me to the survey