Solved

J query, Java Script

Posted on 2013-11-11
3
370 Views
Last Modified: 2013-11-12
I need Clear information about this template..how is work on j script & Query and i need sample script..

the links is:

http://static.livedemo00.template-help.com/wt_34640/index.html#page_0/
0
Comment
Question by:jnj_web_solutions
  • 2
3 Comments
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39640874
Well, this page is a mix of a lot of plugins.
The js file that actually initializes everything is this one:
http://static.livedemo00.template-help.com/wt_34640/js/pages.js

And these are the plugins used, although I didn't actually test which are needed for the effect.
From what I can see it's almost all of them.
<script src="js/jquery-1.5.2.js" type="text/javascript">
<script src="js/mobilyblocks.js" type="text/javascript">
<script src="js/script.js" type="text/javascript">
<script src="js/jquery.transform-0.9.3.min.js">
<script src="js/superfish.js">
<script src="js/atooltip.jquery.js" type="text/javascript">
<script src="js/pages.js" type="text/javascript">
<script src="js/jScrollPane.js" type="text/javascript">
<script src="js/jquery.mousewheel.js" type="text/javascript">
<script src="js/contact-form.js" type="text/javascript">
<script src="js/jquery.prettyPhoto.js" type="text/javascript">

Open in new window

Bea aware that this doesn't support IE8, which may eventually be a problem if it's meant to be used in a corporate website.

The IE compatibility problems are mostly related to the rotation effect provided by jquery.transform.js which doesn't support IE8.

Also have a look at the script.js file: http://static.livedemo00.template-help.com/wt_34640/js/script.js
At the end you have this:
function menu_hover(){
$('#menu li a').mouseenter(function(){
nav=$(this).parent().attr('id');
nav= nav.substr(3);
deg=(parseInt(nav)-1)*51.4+360*k;
if (last-deg>180) {deg=deg+360; k=k+1} else {
if (last-deg<-180) {deg=deg-360; k=k-1};}
last=deg;
$('#menu li').find('.img_act').stop().animate({opacity:'0'},400, function(){$(this).css({visibility:'hidden'})});
$(this).find('.img_act').css({visibility:'visible'}).stop().animate({opacity:'1'},400);
$('.menu_box .tittles > div').stop().animate({opacity:'0'},400, function(){$(this).css({visibility:'hidden'})});
$('.menu_box .tittles .nav'+nav).css({visibility:'visible'}).stop().animate({opacity:'1'});
$('.menu_box .images span').stop().animate({rotate:deg+'deg', opacity:'0'},400, function(){$(this).css({visibility:'hidden'})});
$('.menu_box .images .nav'+nav).css({visibility:'visible'}).stop().animate({rotate:deg+'deg', opacity:'1'},400);
}
) 

Open in new window

which seems to be the initialization script.

As for the markup is a simple UL > LI list.

You can easily see it inspecting the page source after line 86.

Also be aware that this is implemented as a single page application statically, meaning that all the pages HTML is loaded at once and then managed with one of the plugins I mention above (pages.js). You see the pages as they are separated by <li> elements with id="page_x", being x the page index (zero based).

I think you can build a test case easily just by copy/pasting.

Have fun!
0
 

Author Comment

by:jnj_web_solutions
ID: 39640953
I worked on template like this. i need a script for my template similar about the template format.
Template.jpg
0
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 500 total points
ID: 39640960
Like I told you, the sample site you presented here is quite complex as it uses several plugins.
Making you a sample would take me a lot of time and end up being the same as you already have on that sample page.

From your image I don't think you need all that, so maybe the best approach is to go through all the plugins and choose which are the ones you need.
For instance, the circular placement itself is achieved with this plugin: http://plugindetector.com/mobilyblocks

See the scripts reference and test them out separately, then start combining.
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
This article will show, step by step, how to integrate R code into a R Sweave document
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question