Solved

J query, Java Script

Posted on 2013-11-11
3
374 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Learn the basics of while and for loops in Python.  while loops are used for testing while, or until, a condition is met: The structure of a while loop is as follows:     while <condition>:         do something         repeate: The break statement m…
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…

728 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