Solved

J query, Java Script

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jQuery scrollTop 2 40
control character echo in html input field with javascript or jquery 7 33
My dialog box isnt work, no box displays but text does 8 38
jQuery Syntax 2 47
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article will show, step by step, how to integrate R code into a R Sweave document
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…
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 …

911 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

22 Experts available now in Live!

Get 1:1 Help Now