Solved

J query, Java Script

Posted on 2013-11-11
3
369 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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Batch, VBS, and scripts in general are incredibly useful for repetitive tasks.  Some tasks can take a while to complete and it can be annoying to check back only to discover that your script finished 5 minutes ago.  Some scripts may complete nearly …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Learn the basics of lists in Python. Lists, as their name suggests, are a means for ordering and storing values. : Lists are declared using brackets; for example: t = [1, 2, 3]: Lists may contain a mix of data types; for example: t = ['string', 1, T…
The viewer will learn how to dynamically set the form action using jQuery.

770 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