Joomla Templates Club 406,261 posts

[wan fadli Developer wan fadliJoin date: January 2011Posts: 98Downloads:2Uploads:28 Thanks: 31 Thanked: 2 times in 1 posts]

#193506

Dear JA,

I want to make my main menu items able to scroll down when user clicked the menu..

this menu will smooth scroll down go to specific position/module (refer to image attached) .

so my website will view only one page (inspired from JA One Page)

How can i do like that.?

---

Attachments:

1. 

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#517506

You can refer to our detailed documentation to know how to create a onepage site on our JA Onepage template. Please follow the steps carefully, especially the alias of External URL menu item.

[wan fadli Developer wan fadliJoin date: January 2011Posts: 98Downloads:2Uploads:28 Thanks: 31 Thanked: 2 times in 1 posts]

#517526

<em>@Leo Burnetts 404695 wrote:</em><blockquote>You can refer to our detailed documentation to know how to create a onepage site on our JA Onepage template. Please follow the steps carefully, especially the alias of External URL menu item.</blockquote>

Hi @leoburnetts,

I have applied the concept like the documentation given.. by applying “#anchor” in the menu links field..

but when i clicked the menu at the frontpage, my page not scroll down slow and smooth effect..

then i found this smooth script http://gomakethings.com/smooth-scroll-with-easing/#more-5125 ,

but my problem is.. i don’t know where to integrate this script into this JA Portfolio template and menu items.

or you have other alternative to make the scrolling effect going down smoothly..

thank you

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#517532

Hi Wan,

I missed to realize that you are trying to apply the smooth scroll menu of JA Onpage on your current JA Portfolio template. In fact, it will be really hard to get this effect on JA Portfolio because it was built for only JA Onepage template by our developer.

You can see that this smooth scroll feature is used for the onepage layout with modules at onepage position, especially the Homepage menu. While the layouts of JA Portfolio template contains more than 2 positions in the mainbody blocks.

So, in this case I would like to suggest you to use the Onepage template rather than JA Portfolio, it will save your time.

<blockquote>but my problem is.. i don’t know where to integrate this script into this JA Portfolio template and menu items.</blockquote>

If you still want to modify our JA Portfolio template to get this scroll effect, make sure that you are quite good at javascripts or you can ask/hire an experienced developer to handle this. You can add the scroll scripts on this template by following this steps:

– Create a js file named script.js (i.e) in templatesja_portfoliojs path and put your scripts into.

– Open templatesja_portfolioetclayoutsdefault.xml file, add the red line to load the new scripts:

<!--Extra js load for this layout-->
<scripts>
<file>js/script.js</file>
</scripts>
<!--Extra css load for this layout-->
<stylesheets>
</stylesheets>

– Clear JAT3 cache after updating changes and make sure you did backup the related files.

[wan fadli Developer wan fadliJoin date: January 2011Posts: 98Downloads:2Uploads:28 Thanks: 31 Thanked: 2 times in 1 posts]

#517605

Hi @leoBurnett

thanks for reply..

latest status for this problem, now i found the solution by get the smooth scrolling script same as OnePage template
this script i get from JA Cloris template = “…/template/ja_cloris/blocks/onepage.php” and copy the script:


<script type="text/javascript">
/*<!.getProperty('rel');
if (theme) japagenav.removeClass (theme);
}
pageactive = -1;
}
}

function activetopage (active) {
if (active == pageactive) return;
pagetitles.removeClass ('active');
pages.removeClass ('active');
pagetitles.addClass ('active');
pages.addClass ('active');

//get current theme
if (pageactive >= 0) {
var theme = pages[pageactive].getProperty('rel');
if (theme) japagenav.removeClass (theme);
}
theme = pages.getProperty('rel');
if (theme) japagenav.addClass (theme);

pageactive = active;
}
});
/*]]>*/
</script>

at the bottom of the code… and try to copy into JA Portfolio template : “…/templates/ja_portfolio/page/default.php” before </body> tag…

and so far its seems works fine for me.. 🙂

1 user says Thank You to wan fadli for this useful post

1. phong nam

[wan fadli Developer wan fadliJoin date: January 2011Posts: 98Downloads:2Uploads:28 Thanks: 31 Thanked: 2 times in 1 posts]

#518019

@leoburnetts

Now another script conflicted wtih that code.. that code conflicted with my JotForm form:

<script src="http://cdn.jotfor.ms/static/feedback.js?3.2.71" type="text/javascript">
new JotformFeedback({
formId : "40091498851864",
buttonText : "REGISTER NOW",
base : "http://jotform.co/",
background : "#FFCC00",
fontColor : "#49481c",
buttonSide : "left",
buttonAlign : "center",
type : 1,
width : 750,
height : 500
});

</script>

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#518076

Hi Wan,

In my opinion, maybe the conflict comes from the feedback.js (v3.2.71) of JotForm extension and I also saw that you raised a question on this 3rd party extension forum. It will be better that you can follow that thread to get a better solution from this extension devs on this concern.

[Author]

Posts