Solved

J query, Java Script

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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
This article discusses how to create an extensible mechanism for linked drop downs.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

707 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now