Advertisement
Viruthagiri

IEslider

Jul 16th, 2011
449
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.00 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  5.     <meta name="author" content="MESMERiZE" />
  6. <title> About Us </title>
  7. <link rel="stylesheet" href="css/orbit.css"/>
  8. <link rel="stylesheet" href="css/tipsy.css"/>
  9. <link rel="stylesheet" href="css/nivo-slider.css"/>
  10. <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
  11. <script src="js/jquery.tipsy.js" type="text/javascript"></script>
  12. <script type="text/javascript">
  13. var arr = new Array("Core Values","Faith","Family","Church","Youth","Education","Entrepreneurship");
  14. </script>
  15. <script src="js/jquery.orbit-1.2.3.min.js" type="text/javascript"></script>
  16. <script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>
  17. <script src="js/popup.js" type="text/javascript"></script>
  18. <script type="text/javascript">
  19.  
  20.     $(window).load(function() {
  21.  
  22.         $('.slider').nivoSlider({
  23.         effect:'slideInLeft',
  24.             directionNavHide:false,
  25.             manualAdvance:true,
  26.             animSpeed:10,
  27.             prevText: '.',
  28.         nextText: '.',
  29.             controlNav:false
  30.         });
  31.  
  32.     });
  33.  
  34.     </script><script language="javascript" type="text/javascript">
  35. <!--
  36. function popitup(url) {
  37.     newwindow=window.open(url,'name','height=800,width=1280');
  38.     if (window.focus) {newwindow.focus()}
  39.     return false;
  40. }
  41.  
  42. // -->
  43. </script>
  44. <style type="text/css">
  45. .gradient {
  46. position: fixed;
  47. top: 0px;
  48. left: 19%;
  49. z-index:-10;
  50. }
  51. body {
  52.     background:#f0f0f0;
  53.     height: 100%;
  54.     margin: 0px;
  55. }
  56. #container {
  57.     width:100%;
  58.     min-width: 800px; max-width: 1280px;
  59.     margin: 0 auto;
  60.     position: relative;
  61. }
  62. #backgroundPopup{
  63. display:none;
  64. position:fixed;
  65. _position:absolute; /* hack for internet explorer 6*/
  66. height:100%;
  67. width:100%;
  68. top:0;
  69. left:0;
  70. margin-top: 100px;
  71. z-index:1;
  72. }
  73. #popupContact{
  74. display:none;
  75. position:fixed;
  76. _position:absolute; /* hack for internet explorer 6*/
  77. height:412px;
  78. width:1280px;
  79. background: none;
  80. z-index:2;
  81. font-size:13px;
  82. }
  83.  
  84. #popupContact1{
  85. display:none;
  86. position:fixed;
  87. _position:absolute; /* hack for internet explorer 6*/
  88. height:412px;
  89. width:1280px;
  90. background: none;
  91. z-index:2;
  92. font-size:13px;
  93. }
  94. #popupContact2{
  95. display:none;
  96. position:fixed;
  97. _position:absolute; /* hack for internet explorer 6*/
  98. height:412px;
  99. width:1280px;
  100. background: none;
  101. z-index:2;
  102. font-size:13px;
  103. }
  104. #popupContact3{
  105. display:none;
  106. position:fixed;
  107. _position:absolute; /* hack for internet explorer 6*/
  108. height:412px;
  109. width:1280px;
  110. background: none;
  111. z-index:2;
  112. font-size:13px;
  113. }
  114. .popupContactClose{
  115. font-size:14px;
  116. line-height:14px;
  117. cursor: pointer;
  118. right:40px;
  119. top:18px;
  120. position:absolute;
  121. color:#6fa5fd;
  122. font-weight:700;
  123. display:block;
  124. z-index:1002;
  125. }
  126. .popupslidecontact {
  127. right: 23px;
  128. top: 363px;
  129. width: 85px;
  130. height: 30px;
  131. position: absolute;
  132. display: block;
  133. z-index: 1002;
  134. }
  135. .popupContactClose1{
  136. font-size:14px;
  137. line-height:14px;
  138. right:50px;
  139. top:18px;
  140. cursor: pointer;
  141. position:absolute;
  142. color:#6fa5fd;
  143. font-weight:700;
  144. display:block;
  145. z-index:1002;
  146. }
  147. .popupContactClose2{
  148. font-size:14px;
  149. line-height:14px;
  150. right:50px;
  151. cursor: pointer;
  152. top:18px;
  153. position:absolute;
  154. color:#6fa5fd;
  155. font-weight:700;
  156. display:block;
  157. z-index:1002;
  158. }
  159. .popupContactClose3{
  160. font-size:14px;
  161. line-height:14px;
  162. right:50px;
  163. top:18px;
  164. position:absolute;
  165. cursor: pointer;
  166. color:#6fa5fd;
  167. font-weight:700;
  168. display:block;
  169. z-index:1002;
  170. }
  171. .closebtn{
  172.  
  173.  
  174.  
  175.     position:absolute;
  176.  
  177.  
  178.  
  179.     top:28px;
  180.  
  181.  
  182.  
  183.     left:1190px;
  184.  
  185.  
  186.  
  187.     z-index:10;
  188.  
  189.  
  190.  
  191. }
  192.  
  193.  
  194.  
  195.  
  196.  
  197. .transbanner
  198.  
  199.  
  200.  
  201. {
  202.  
  203.  
  204.  
  205. position:absolute;
  206.  
  207.  
  208.  
  209. top:110px;
  210.  
  211.  
  212.  
  213. left:1px;
  214.  
  215.  
  216.  
  217. z-index:3;
  218.  
  219.  
  220.  
  221. }
  222.  
  223. .as2a1 {
  224. position: absolute;
  225. height: 30px;
  226. width: 100px;
  227. top: 330px;
  228. left: 670px;
  229. }
  230. .as3a1 {
  231. position: absolute;
  232. height: 30px;
  233. width: 80px;
  234. top: 319px;
  235. left: 654px;
  236. }
  237. .as3a2 {
  238. position: absolute;
  239. height: 30px;
  240. width: 180px;
  241. top: 319px;
  242. left: 756px;
  243. }
  244. .as4a1 {
  245. position: absolute;
  246. height: 30px;
  247. width: 160px;
  248. top: 250px;
  249. left: 133px;
  250. }
  251. .as4a2 {
  252. position: absolute;
  253. height: 30px;
  254. width: 165px;
  255. top: 250px;
  256. left: 308px;
  257. }
  258. .as5a1 {
  259. position: absolute;
  260. height: 30px;
  261. width: 320px;
  262. top: 370px;
  263. left: 355px;
  264. }
  265. .as5a2 {
  266. position: absolute;
  267. height: 30px;
  268. width: 225px;
  269. top: 370px;
  270. left: 700px;
  271. }
  272. .as6a1 {
  273. position: absolute;
  274. height: 30px;
  275. width: 90px;
  276. top: 290px;
  277. left: 690px;
  278. }
  279. .as6a2 {
  280. position: absolute;
  281. height: 30px;
  282. width: 150px;
  283. top: 140px;
  284. left: 940px;
  285. }
  286. .as7a1 {
  287. position: absolute;
  288. height: 25px;
  289. width: 250px;
  290. top: 300px;
  291. left: 870px;
  292. }
  293. .as7a2 {
  294. position: absolute;
  295. height: 25px;
  296. width: 250px;
  297. top: 330px;
  298. left: 870px;
  299. }
  300. .as3a3 {
  301. position: absolute;
  302. height: 30px;
  303. width: 100px;
  304. top: 319px;
  305. left: 965px;
  306. }
  307.  
  308. .homebtn {
  309.  
  310.     position:absolute;
  311.  
  312.     top:40px;
  313.  
  314.     left:40px;
  315.  
  316. }
  317.  
  318. /* float clearing for IE6 */
  319. * html .clearfix{
  320.   height: 1%;
  321.   overflow: visible;
  322. }
  323.  
  324. /* float clearing for IE7 */
  325. *+html .clearfix{
  326.   min-height: 1%;
  327. }
  328.  
  329. /* float clearing for everyone else */
  330. .clearfix:after{
  331.   clear: both;
  332.   content: ".";
  333.   display: block;
  334.   height: 0;
  335.   visibility: hidden;
  336.   font-size: 0;
  337. }
  338.  
  339. .partnerbanner{
  340.  
  341.  
  342.  
  343.     position:absolute;
  344.  
  345.  
  346.  
  347.     top:0px;
  348.  
  349.  
  350.  
  351.     left:0px;
  352.  
  353.  
  354.  
  355.     z-index:10;
  356.  
  357.  
  358.  
  359. }
  360.  
  361.  
  362.  
  363.  
  364. .aboutbtn {
  365.  
  366.     position:absolute;
  367.  
  368.     top:40px;
  369.  
  370.     left:120px;
  371.  
  372. }
  373.  
  374.  
  375.  
  376. .eventbtn {
  377.  
  378.     position:absolute;
  379.  
  380.     top:40px;
  381.  
  382.     left:220px;
  383.  
  384. }
  385.  
  386.  
  387.  
  388. .leadershipbtn {
  389.  
  390.     position:absolute;
  391.  
  392.     top:40px;
  393.  
  394.     left:310px;
  395.  
  396. }
  397.  
  398.  
  399.  
  400. .hogclogo
  401.  
  402. {
  403.  
  404.     position:absolute;
  405.  
  406.     left:30px;
  407.  
  408.     top:9px;
  409.  
  410. }
  411.  
  412.  
  413.  
  414. .twitter
  415.  
  416. {
  417.  
  418.     position:absolute;
  419.  
  420.     right:120px;
  421.  
  422.     top:9px;
  423.  
  424.     z-index:5000;
  425.  
  426. }
  427.  
  428.  
  429.  
  430. .contactus
  431.  
  432. {
  433.  
  434.     position:absolute;
  435.  
  436.     right:81px;
  437.  
  438.     top:9px;
  439.  
  440.     z-index:5000;
  441.  
  442. }
  443.  
  444.  
  445.  
  446. .gallery
  447.  
  448. {
  449.  
  450.     position:absolute;
  451.  
  452.     right:35px;
  453.  
  454.     top:9px;
  455.  
  456.     z-index:5000;
  457.  
  458. }
  459.  
  460.  
  461.  
  462.  
  463.  
  464. .text
  465.  
  466. {
  467.  
  468.     position:absolute;
  469.  
  470.     right:165px;
  471.  
  472.     top:17px;
  473.  
  474.     z-index:5000;
  475.  
  476. }
  477.  
  478. .readmorebtn {
  479.  
  480.     position:absolute;
  481.  
  482.     top:500px;
  483.  
  484.     left:500px;
  485.  
  486.     z-index:9000;
  487.  
  488.  
  489.  
  490. }
  491.  
  492.  
  493.  
  494. </style>
  495.  
  496.  
  497.  
  498. <script type="text/javascript">
  499.  
  500.  
  501.  
  502.  
  503.  
  504.         function newWindow(link) {
  505.  
  506.   var bookWindow;
  507.  
  508.   bookWindow = window.open(link, "new1", "width=1024,height=740");
  509.  
  510.   if (bookWindow.open) {
  511.  
  512.     bookWindow.close;
  513.  
  514.   }
  515.  
  516.   bookWindow.focus();
  517.  
  518. }
  519.  
  520.  
  521.  
  522. function funcCaller(img_name,img_src,img_name2,img_src2) {
  523.  
  524.             roll_over(img_name, img_src);
  525.  
  526.             roll_over(img_name2, img_src2);
  527.  
  528.        
  529.  
  530.         }
  531.  
  532.  
  533.  
  534. function roll_over(img_name, img_src)
  535.  
  536.    {
  537.  
  538.    document[img_name].src = img_src;
  539.  
  540.    }
  541.  
  542.    
  543.  
  544.    var newImage = "images/ai.png";
  545.  
  546. var newImage2 = "images/valuestrans4.png";
  547.  
  548. var newImage3 = "images/hogcstory1.png";
  549.  
  550. var newImage4 = "images/cap.png";
  551.  
  552. var newImage5 = "images/AIbanner.png";
  553.  
  554.  
  555.  
  556.   function initImage(newImage) {
  557.  
  558.  
  559.  
  560.                 imageId = 'thephoto';
  561.  
  562.  
  563.  
  564.                 image = document.getElementById(imageId);
  565.  
  566.  
  567.  
  568.                 image.src = newImage;
  569.  
  570.  
  571.  
  572.                 setOpacity(image, 0);
  573.  
  574.  
  575.  
  576.                 fadeIn(imageId,0);
  577.  
  578.  
  579.  
  580.             }
  581.  
  582.  
  583. function showclosebutton()
  584.  
  585.  
  586.  
  587. {
  588.  
  589.  
  590.  
  591. document.getElementById('closebtn').style.visibility="visible";
  592.  
  593.  
  594.  
  595. }
  596.  
  597.  
  598.  
  599.  
  600.  
  601.  
  602.  
  603. function hideclosebutton()
  604.  
  605.  
  606.  
  607. {
  608.  
  609.  
  610.  
  611. document.getElementById('closebtn').style.visibility="hidden";
  612.  
  613.  
  614.  
  615. }
  616.  
  617.  
  618.  
  619.  
  620.   function initImage2(newImage2) {
  621.  
  622. imageId = 'thephoto';
  623.  
  624. image = document.getElementById(imageId);
  625.  
  626. image.src = newImage2;
  627.  
  628. setOpacity(image, 0);
  629.  
  630. fadeIn(imageId,0);
  631.  
  632. }
  633.  
  634.  
  635.  
  636.   function initImage3(newImage3) {
  637.  
  638. imageId = 'thephoto';
  639.  
  640. image = document.getElementById(imageId);
  641.  
  642. image.src = newImage3;
  643.  
  644. setOpacity(image, 0);
  645.  
  646. fadeIn(imageId,0);
  647.  
  648. }
  649. function partneroverlay() {
  650.  
  651.  
  652.  
  653.             setTimeout('initImage(newImage)',100);
  654.  
  655.  
  656.  
  657.             showclosebutton();
  658.  
  659.  
  660.  
  661.             showlink();
  662.  
  663.  
  664.  
  665.            
  666.  
  667.  
  668.  
  669.         }
  670. function closebtnoverlay() {
  671.  
  672.  
  673.  
  674.             setTimeout('initImage2(newImage2)',50);
  675.  
  676.  
  677.  
  678.             hideclosebutton();
  679.  
  680.  
  681.  
  682.             hidelink();
  683.  
  684.  
  685.  
  686.         }
  687.  
  688.  
  689.  
  690.  
  691.  
  692.   function initImage4(newImage4) {
  693.  
  694. imageId = 'thephoto';
  695.  
  696. image = document.getElementById(imageId);
  697.  
  698. image.src = newImage4;
  699.  
  700. setOpacity(image, 0);
  701.  
  702. fadeIn(imageId,0);
  703.  
  704. }
  705.  
  706.  
  707.  
  708.   function initImage5(newImage5) {
  709.  
  710. imageId = 'thephoto';
  711.  
  712. image = document.getElementById(imageId);
  713.  
  714. image.src = newImage5;
  715.  
  716. setOpacity(image, 0);
  717.  
  718. fadeIn(imageId,0);
  719.  
  720. }
  721.  
  722.  
  723.  
  724. function setOpacity(obj, opacity) {
  725.  
  726. opacity = (opacity == 100)?99.999:opacity;
  727.  
  728.  
  729.  
  730. // IE/Win
  731.  
  732. obj.style.filter = "alpha(opacity:"+opacity+")";
  733.  
  734.  
  735.  
  736. // Safari<1.2, Konqueror
  737.  
  738. obj.style.KHTMLOpacity = opacity/100;
  739.  
  740.  
  741.  
  742. // Older Mozilla and Firefox
  743.  
  744. obj.style.MozOpacity = opacity/100;
  745.  
  746.  
  747.  
  748. // Safari 1.2, newer Firefox and Mozilla, CSS3
  749.  
  750. obj.style.opacity = opacity/100;
  751.  
  752. }
  753.  
  754.  
  755.  
  756. function fadeIn(objId,opacity) {
  757.  
  758. if (document.getElementById) {
  759.  
  760. obj = document.getElementById(objId);
  761.  
  762. if (opacity <= 100) {
  763.  
  764. setOpacity(obj, opacity);
  765.  
  766. opacity += 15;
  767.  
  768. window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
  769.  
  770. }
  771.  
  772. }
  773.  
  774. }
  775.  
  776.  
  777.  
  778. </script>
  779.  
  780.  
  781.  
  782.  
  783. </head>
  784.  
  785. <body style="overflow:hidden" bgcolor="#f0f0f0" class="clearfix">
  786.  
  787. <div id="container" class="clearfix">
  788. <div class="gradient"><img src="images/gradient2.png"></div>
  789.  
  790. <!-- gradient for the background -->
  791.  
  792.  
  793.  
  794.  
  795. <!-- header-->
  796.  
  797.  
  798. <div id="toplinks" class="clearfix" style="height: 100px;">
  799. <div class="homebtn"><a href="index.html"><img src="images/homeheader.png" /></a></div>
  800.  
  801. <div class="aboutbtn"><a href="aboutus.html"><img src="images/aboutheader.png" /></a></div>
  802.  
  803. <div class="eventbtn"><a href="events.html"><img src="images/eventsheader.png" /></a></div>
  804.  
  805. <div class="leadershipbtn"><a href="leadership.html"><img src="images/leadershipheader.png" /></a></div>
  806.  
  807. </div>
  808.  
  809. <!-- banners -->
  810. <div id="slider" style="height: 412px;position: relative;" class="clearfix">
  811. <div id="featured" class="clearfix">
  812. <div><img src="images/About1.jpg" alt="Core Values" /></div>
  813.      
  814.      <div style="position: relative;"><a href="howto.html" class="as2a1"><img src="images/trans4.png" alt="" border="0"/></a><img src="images/About2.jpg"  alt="Faith" data-caption="#htmlCaption"/></div>
  815.      
  816. <div> <a href="others.html" class="as3a1" onclick="return popitup('others.html')"><img src="images/trans4.png" alt="" border="0"/></a><a href="CCHpage3.html" class="as3a2" onclick="return popitup('CCHpage3.html')"><img src="images/trans4.png" alt="" border="0"/></a><a href="lifeworks.html" class="as3a3" onclick="return popitup('lifeworks.html')"><img src="images/trans4.png" alt="" border="0"/></a> <img src="images/About3.jpg" alt="Family" data-caption="#htmlCaption2" /></div>
  817.    
  818. <div><a href="#" class="as4a1" id="button"><img src="images/trans4.png" alt="" border="0"/></a><a href="#" class="as4a2" id="button1"><img src="images/trans4.png" alt="" border="0"/></a><img src="images/About4.jpg" alt="Church" data-caption="#htmlCaption3" /></div>
  819.      
  820.  
  821.     <div> <a href="#" class="as5a1" id="button2"><img src="images/trans4.png" alt="" border="0"/></a><a href="AE.html" class="as5a2" onclick="return popitup('AE.html')"><img src="images/trans4.png" alt="" border="0"/></a><img src="images/About5.jpg" alt="Youth" data-caption="#htmlCaption4" /></div>
  822.  
  823.    <div>  <a href="AE.html" class="as6a1" onclick="return popitup('AE.html')"><img src="images/trans4.png" alt="" border="0"/></a><a href="AE.html" class="as6a2" onclick="return popitup('AE.html')"><img src="images/trans4.png" alt="" border="0"/></a><img src="images/About6.jpg" alt="Education" data-caption="#htmlCaption5" /></div>
  824.  
  825.     <div><a href="#" class="as7a1" id="button3"><img src="images/trans4.png" alt="" border="0"/></a><a href="others.html" onclick="return popitup('others.html')" class="as7a2"><img src="images/trans4.png" alt="" border="0"/></a><img src="images/About7.jpg" alt="Entre"/></div>
  826.  
  827. </div>
  828. </div>
  829.  
  830.  
  831. <!-- Captions for Orbit -->
  832. <!-- popup -->
  833. <div id="popupContact" style="z-index: 1001;background-color: #000000;">
  834. <a class="popupContactClose"><img src="images/xsign.jpg" alt="" border="0"/></a>
  835.         <div class="slider-wrapper theme-default">
  836.  
  837.             <div class="ribbon"></div>
  838.  
  839.             <div class="slider" class="nivoSlider">
  840.  
  841.                 <img src="images/sli1.jpg" alt="" />
  842.  
  843.                
  844.  
  845.                 <img src="images/sli2.jpg" alt="" />
  846.  
  847.                 <img src="images/sli3.jpg" alt=""/>
  848.                 <img src="images/sli4.jpg" alt=""/>
  849.  
  850.             </div>
  851.  
  852.  
  853.  
  854.         </div>
  855.  
  856.     </div>
  857.     <div id="popupContact1" style="z-index: 1001;background-color: #000000;">
  858. <a class="popupContactClose1"><img src="images/xsign.jpg" alt="" border="0"/></a>
  859. <a class="popupslidecontact" href="contactus.html"><img src="images/trans.png" alt="" border="0"/></a>
  860.         <div class="servicetime">
  861.  
  862.                 <img src="images/servicetime.jpg" alt="" />
  863.     </div>
  864.     </div>
  865.     <div id="popupContact2" style="z-index: 1001;background-color: #000000;">
  866. <a class="popupContactClose2"><img src="images/blackx.jpg" alt="" border="0"/></a>
  867.         <div class="servicetime">
  868.  
  869.                 <img src="images/youthpopup.jpg" alt="" />
  870.     </div>
  871.     </div>
  872.     <div id="popupContact3" style="z-index: 1001;background-color: #000000;">
  873. <a class="popupContactClose3"><img src="images/ai7x.jpg" alt="" border="0"/></a>
  874.         <div class="servicetime">
  875.  
  876.                 <img src="images/ai7.jpg" alt="" />
  877.     </div>
  878.     </div>
  879.     <div id="backgroundPopup"></div>
  880. <!-- popup end -->
  881.  
  882. <!-- footer -->
  883. <div id="footerholder" class="clearfix" style="height: 100px;margin-top: 70px;position: relative;">
  884. <div class="hogclogo"><img src="images/hogclogo.png" /></div>
  885.  
  886. <div class="text"><img src="images/trans.png" name="but1" /></div>
  887.  
  888.  
  889.  
  890. <div class="twitter"><a href="twitter.html"><img src="images/twittericon.png" name="but2" onMouseOver="funcCaller('but2', 'images/twitterblack.png', 'but1', 'images/twittertext.png' )" onMouseOut="funcCaller('but2', 'images/twittericon.png', 'but1', 'images/trans4.png')"/></a></div>
  891.  
  892.  
  893.  
  894. <div class="contactus"><a href="contactus.html"><img src="images/contacticon.png" name="but3" onMouseOver="funcCaller('but3', 'images/contactblack.png', 'but1', 'images/contacttext.png' )" onMouseOut="funcCaller('but3', 'images/contacticon.png', 'but1', 'images/trans4.png')" /></a></div>
  895.  
  896.  
  897.  
  898. <div class="gallery"><a href="mediagallerysplash.html"><img src="images/mediagalleryicon.png" name="but4" onMouseOver="funcCaller('but4', 'images/mediagalleryblack.png', 'but1', 'images/picturestext.png' )" onMouseOut="funcCaller('but4', 'images/mediagalleryicon.png', 'but1', 'images/trans4.png')" /></a></div>
  899.  
  900.  
  901. </div>
  902. <script type="text/javascript">
  903. $(window).load(function() {
  904.      $('#featured').orbit({
  905.  
  906.       'timer': false,
  907.  
  908.       'bullets' : true,
  909.       'captions': true,
  910.  
  911.       'bulletThumbs': true,
  912.  
  913.           'bulletThumbLocation': 'orbit/'
  914.  
  915.      });
  916.  
  917.      $("ul.orbit-bullets li").tipsy({gravity: 'n'});
  918. });
  919. </script>
  920.  
  921. <script type="text/javascript">
  922.  
  923.  
  924.  
  925.  
  926. </script>
  927.  
  928.  
  929. </div>
  930.  
  931. </body>
  932.  
  933.  
  934.  
  935.  
  936.  
  937. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement