responsive single page scrolling theme?


  Page 1 of 2 Next Last 
Author Message
chi

Posted: 10/26/2013
Quote message 

Hey does anyone know how I can make this type of website with Artisteer?

It's a single page theme that when you hit the menu bar it scrolls down to the next section on the page.

here is an example below.. anyway input would be helpful.. thanks.

http://www.daba.in.rs/tf/jumper_wpr/#home
 
Arkymedes

Posted: 10/26/2013
Quote message 

I took a quick look and this is indeed just one big page with sections divided by div's with ID attributed to them.

The menu points to each link and a smooth transiction occurs, probably jQuery.

It's simple, elegant and very doable with Artisteer. Of course you still need to configure some jQuery/javascript for the smooth scrolling.

Cheers,
Arky
 
Elvira
Artisteer Team

Posted: 10/26/2013
Quote message 

Hi,

Unfortunately, you can't create such kind of template with Artisteer.
But maybe there is a third-party extension for your CMS that can do that.

Best regards,
Elvira
 
jrgweb

Posted: 10/26/2013
Quote message 

@chi - I agree with Elvira but with a little creativity you can create your template and modify a few elements after export and you have a smooth scrolling page.

I did a quick example which took about 15 mins and the external edits about 3 mins.

http://demo.artisteertoday.com/smooth_scroll/

Template was created with artisteer 4.2.0.60609
Need more info let me know. :-)
 
chi

Posted: 10/26/2013
Quote message 

@jrgweb thats Really Cool... its exactly how I wanted to make the site scroll like your example above..

How do I go about doing the 3 min external edits ?

And will the same external edits work on menu bars that horizontal instead of vertical as your demo website. (http://demo.artisteertoday.com/smooth_scroll)

Cheers :-)
 
guest

Posted: 10/26/2013
Quote message 

looks like crap on my galaxy

not mobile compstale st all
 
Arkymedes

Posted: 10/27/2013
Quote message 

Hi guys,

Got a working demo I did this morning.

It' s supposed to be responsive and all.

Thanks jrgweb for the scroll script.

http://caron-webdesign.com/demo/smooth-scroll-demo/

Cheers,
Arky

 
jrgweb

Posted: 10/27/2013
Quote message 

@chi - Yes you can use horizontal.
In this next demo I use horizontal and side menu and also fixed menu on scroll.

@Arkymedes - you beat me too it. LOL

@Guest - As a designer/developer by looking at the code you will know in a split second why it's not responsive.

demo: http://demo.artisteertoday.com/smooth_scroll3/

@chi - contact me at jrgweb [@] gmail.com
 
chi

Posted: 10/27/2013
Quote message 

@Arkymedes - I really like what you've done... How long did it take for you to add the code into the theme?

@jrgweb - thanks.


 
illwillsites

Posted: 4/18/2014
Quote message 

Hey, could someone PLEASE teach me how to do this for WordPress themes in Artisteer. I am dying to learn how you guys made responsive one page designs in artisteer. Please teach me your ways!!!!!!!!!


@Arkymedes I really liked yours

My email is wbncwebdesign1@gmail.com if you have ANY info you could teach me. Thanks in advance!!!!!!!!


 
Orrelix

Posted: 4/23/2014
Quote message 

jrgweb, please post some basic tips here for us. We all like your stuff and you usually show how to do things. Please!
 
jrgweb

Posted: 4/24/2014
Quote message 

Orrelix - I'll post the basic's tonight.
 
Whitemol

Posted: 4/24/2014
Quote message 

Really nice work done by jrgweb and Arkymedes..
Pls keep this threed active since it is a great learning for others like me that need to use alot of hours of research for doing this if needed..

Keep up the good work with helping others :D

Thx u ppl for helping everyone :D
 
jellyweb

Posted: 4/24/2014
Quote message 

I'd love to see some some info on this as well, to integrate with joomla.

Thanks

David
 
jrgweb

Posted: 4/25/2014
Quote message 

To all - Artisteer one page template basic's.

This is for the HTML website. We will convert this to a wordpress or joomla later.

Create your template as usual. Colors, menu's, background's etc.
You can layout you template with one column if you wish.
When it comes to content, the only page you care about is the main page.
On the main menu(home or whatever the name) right click, go to properties and edit the name/url. Enter index

Now lets enter some content. Go to your main page and enter content.
At the begging of each section we are going to insert <section id="1"></section> <section id="2"> </section> etc. etc. This gives your page specific sections that can be styles and also aloows your menu's to find the section.

After all content is created, export the template. Because artisteer doesn't allow us to edit the url while designing, we must edit after export.
The only file that is important is the index.html.
Open in a text editor(I use notepad++) and edit the menu items. Change menu item 1 to #1, menu item 2 to #2 etc. etc.

here is an example artx for artisteer 4.2 latest version.

http://demo.artisteertoday.com/smooth_scroll/smooth_scroll2.artx

view source: view-source:http://demo.artisteertoday.com/smooth_scroll/



 
Tayeb

Posted: 5/9/2014
Quote message 

All done inside artisteer:
http://zianalabdeen.com/eng/
 
Malas

Posted: 5/13/2014
Quote message 

Tayeb,
Nice
 
P.Hozza

Posted: 10/12/2014
Quote message 

Quote Tayeb:

All done inside artisteer:
http://zianalabdeen.com/eng/



Tayeb Nice work.. gives me a starting point.

However, I have a question, how can you make use of one menu only that does scroll? In Tayeb's example he duplicated the menu in all sections <a> </a> .
 
Ray Selby

Posted: 10/29/2014
Quote message 

:-@ demo.artisteertoday.com appears to be unavailable at the moment and I really want to see jrgweb's postings. It's very important to me, at this moment.

 
jrgweb

Posted: 10/29/2014
Quote message 

@Ray Selby - You'll have to look at them here:

http://demos.jrgweb.net/smooth_scroll/
http://demos.jrgweb.net/smooth_scroll3/
http://demos.jrgweb.net/smooth_scroll4/

http://demos.jrgweb.net/flat_draft/

 
jrgweb

Posted: 10/31/2014
Quote message 

@Dudek - Absolutely. Artisteer 4.2.x or better

http://demos.jrgweb.net/flat_draft/flat_draft.artx


 
P_Wojtas

Posted: 11/8/2014
Quote message 

@jrgweb - Could you shar with us smooth scroll template for artisteer ?
 
jrgweb

Posted: 11/8/2014
Quote message 

@P_Wojtas


http://demos.jrgweb.net/smooth_scroll/smooth_scroll2.zip
http://demos.jrgweb.net/smooth_scroll3/smooth_scroll3.zip
http://demos.jrgweb.net/smooth_scroll4/smooth_scroll4.zip

These are fairly old and the artx is included in the zip file but they may be from 4.1 or 4.2.
I didn't check. If you have any issues, do give me a buzz.

 
Da Webmasta

Posted: 11/9/2014
Quote message 

And how can we do this in Joomla? I would like to know.
 
jrgweb

Posted: 11/9/2014
Quote message 

@Da Webmasta - Follow these instructions.

Create your template as usual. Export for joomla and include content if desired.
(you can create content within joomla)
Install joomla then import content.

Once content is imported or created, the horizontal menu needs to be edited.
Select the 2nd menu item and set menu type to external. Select system link and enter
the given id. example #1 or #about which ever you setup in your document.
Do this for all menu items except the Home item.

Then go the the menu module and select the advanced tab.
In the menu id enter smoothmenu. More on this later.

Now the basics are set and we need to enter the script that will make this work.
You can put the script somewhere in the template but this take a number of steps so lets go and edit the script.js file.
In joomla, go to extensions/templates/templates and select the default template.
A list of files and directories will display. Select script.js
Go to the bottom of this file and insert this script.

jQuery(function() {
jQuery('#menusmooth a').click(function(){
jQuery('html,body').animate({
scrollTop: jQuery(jQuery(this).attr('href')).offset().top
}, 1000 );
return false;
});
});

save the file and test.

Here is an example:
http://joomla.jrgweb.net/

Let me know if you need additional help.
 
dawebmasta

Posted: 11/10/2014
Quote message 

@jrgweb

Sorry for my bad English

So i can manually put <section id="1"></section> on any html-module or article I find on my homepage?
Well that seems to work fine, but I can't make it 'smooth'
Oh now I see: It must be 'menusmooth' instead of 'smoothmenu' in the advanced tab of the menumodule :-D

But I'm still confused which ID I have to use to go to, for example a login-module, As long as it is a html-module or an article I can use <section id="1"></section> but wich ID I have to use with other modules than a html-module?


 
jrgweb

Posted: 11/10/2014
Quote message 

@Da Webmasta - Well joomla names the login form as "#login-form"

So I assume you have a menu item that will go to the form.
I added a login in form to the bottom of the example template.
When you select Login from the menu it will go to the bottom of the page.

I assume this is what you are asking?
 
Da Webmasta

Posted: 11/10/2014
Quote message 

@jrgweb

Yes that is what I'm asking. What's the best way to find the name of that form?
Using Firebug (for some modules I can't find an ID using firebug) or can I find it somewhere in the backend of Joomla?

Thanx for the help. I appreciate it a lot
 
Kalman

Posted: 3/26/2015
Quote message 

Hi Arky,


Could you send me the artx file of this template?
szilardi@freemail.hu

Thank you,
Kalman


Quote Arkymedes:

Hi guys,

Got a working demo I did this morning.

It' s supposed to be responsive and all.

Thanks jrgweb for the scroll script.

http://caron-webdesign.com/demo/smooth-scroll-demo/

Cheers,
Arky



 
Kalman

Posted: 3/26/2015
Quote message 

Hi jrgweb,

Could you send me this artx file?
szilardi@freemail.hu

Tahnk you,
Kalman


Quote jrgweb:

To all - Artisteer one page template basic's.

This is for the HTML website. We will convert this to a wordpress or joomla later.

Create your template as usual. Colors, menu's, background's etc.
You can layout you template with one column if you wish.
When it comes to content, the only page you care about is the main page.
On the main menu(home or whatever the name) right click, go to properties and edit the name/url. Enter index

Now lets enter some content. Go to your main page and enter content.
At the begging of each section we are going to insert <section id="1"></section> <section id="2"> </section> etc. etc. This gives your page specific sections that can be styles and also aloows your menu's to find the section.

After all content is created, export the template. Because artisteer doesn't allow us to edit the url while designing, we must edit after export.
The only file that is important is the index.html.
Open in a text editor(I use notepad++) and edit the menu items. Change menu item 1 to #1, menu item 2 to #2 etc. etc.

here is an example artx for artisteer 4.2 latest version.

http://demo.artisteertoday.com/smooth_scroll/smooth_scroll2.artx

view source: view-source:http://demo.artisteertoday.com/smooth_scroll/





 
  Page 1 of 2 Next Last