API tools faq
paste
Advertisement
lordloh

Stackoverflow Question - Loss of CSS Class

lordloh
Jun 25th, 2013
155
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 35.16 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html>
  3.     <head>
  4.                 <link href='http://bharath.lohray.com/scripts/jqui-ui-smoothness/jquery-ui-1.10.0.custom.css' rel='stylesheet' type='text/css' />
  5.                 <link href="/scripts/jQuery-contextMenu/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
  6.  
  7.         <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  8.         <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
  9.         <script src="/scripts/jQuery-contextMenu/jquery.ui.position.js" type="text/javascript"></script>
  10.         <script src="/scripts/jQuery-contextMenu/jquery.contextMenu.js" type="text/javascript"></script>
  11.         <title>Family Tree Script</title>
  12.         <style>
  13.             .shadow1 {
  14.                 box-shadow: 3px 3px 5px 1px rgba(0,0,0,.7);
  15.             }
  16.             .rShift {
  17.                 left: -10px;
  18.             }
  19.             .rShift:hover {
  20.                 left: 0px;
  21.             }
  22.             .charIcon {
  23.                 font-size: 30px;
  24.                 font-weight: bolder;
  25.             }
  26.             .roundedRight {
  27.                 border-top-right-radius: 7px;
  28.                 border-bottom-right-radius: 7px;
  29.                 -webkit-border-top-right-radius: 7px;
  30.                 -webkit-border-bottom-right-radius: 7px;
  31.                 -moz-border-top-right-radius: 7px;
  32.                 -moz-border-bottom-right-radius: 7px;
  33.             }
  34.             .doubleRight {
  35.                 border-top: double 3px;
  36.                 border-right: double 3px;
  37.                 border-bottom: double 3px;
  38.             }
  39.             .leftMenu {
  40.                 position: absolute;
  41.                 width: 100px;
  42.                 left: -110px;
  43.                 height: 300px;
  44.                 background: #fff;
  45.             }
  46.             body {
  47.                 overflow: hidden;
  48.             }
  49.             #treeCanvas {
  50.                 position: absolute;
  51.                 width: 100%;
  52.                 height: 100%;
  53.                 margin: 0px;
  54.                 padding: 0px;
  55.                 background: #FFF;
  56.                 cursor: default;
  57.             }
  58.             #treeCanvas:active {
  59.                 cursor: move;
  60.             }
  61.             #treeW {
  62.                 position: absolute;
  63.                 background-image: url(../im/Pattern002_c.png);
  64.                 background-repeat: repeat;
  65.                 margin: 0px;
  66.                 padding: 0px;
  67.                 left: 0px;
  68.                 top: 0px;
  69.                 right: 0px;
  70.                 bottom: 0px;
  71.                 width: 100%;
  72.                 height: 100%;
  73.                 overflow: hidden;
  74.                 z-index: 1
  75.             }
  76.  
  77.         </style>
  78.                 <script type="text/javascript">
  79.           var _gaq = _gaq || [];
  80.           _gaq.push(['_setAccount', 'UA-28154703-2']);
  81.           _gaq.push(['_setDomainName', 'lohray.com']);
  82.           _gaq.push(['_trackPageview']);
  83.           (function() {
  84.             var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  85.             ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  86.             var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  87.           })();    
  88.         </script>
  89.             </head>
  90.  
  91.     <body>
  92.         <div class="leftMenu" style="z-index: 2; top:45px;">
  93.             Hello Menu
  94.         </div>
  95.         <div class="leftMenuTab roundedRight doubleRight rShift" data-state="collapsed" style="cursor: pointer; float:left; position:absolute; top:45px; text-align: right; padding-right: 5px; width:30px; z-index: 2; border-color: #000; background-color:#FFF;">
  96.             <span class="charIcon">&raquo;</span>
  97.         </div>
  98.         <div class="shadow1" style="left; position:fixed; top:5px; text-align: right; padding: 0px; z-index: 2; border-color: #000; background-color:#FFF;">
  99.             <input type="text" style="font-size: 12px; border: solid 1px;"/>
  100.         </div>
  101.         <div id="treeW">
  102.             <div id="treeCanvas" class="context-menu-one box menu-1">
  103.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sollicitudin nisi purus, vel mattis tellus vulputate id. Aenean neque nunc, tristique eget lacinia ac, elementum in sem. Donec eu est ipsum. Aliquam ornare velit eu lorem viverra elementum. Pellentesque nulla est, fringilla suscipit ultrices luctus, aliquet ut velit. Maecenas dolor enim, semper et tempor a, ornare a augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris malesuada dui sed tempor semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a purus quis odio iaculis lobortis in sed ligula. Nulla vestibulum hendrerit diam vel tincidunt. Fusce sit amet aliquet est.</p>
  104. <p>Fusce accumsan dui quis bibendum dignissim. Vivamus vel elementum neque. Cras gravida odio nec adipiscing dignissim. Donec lobortis ante id urna vehicula luctus. Cras vel consequat dolor, sed gravida eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus ut interdum leo.</p>
  105. <p>Quisque ut rhoncus nisi, id tincidunt sapien. Integer ultrices ut odio nec feugiat. Phasellus suscipit, erat in blandit aliquam, odio sem lobortis tortor, et aliquet dolor sapien non erat. Sed nisi massa, egestas et nunc et, tincidunt accumsan tortor. Duis feugiat neque eget convallis elementum. Suspendisse potenti. Fusce sed nisl venenatis, viverra sem a, ornare lacus. Nulla at gravida magna. Nullam dictum aliquam dolor. Vivamus in tortor vitae ligula dignissim euismod.</p>
  106. <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam placerat purus urna, dapibus fringilla nulla euismod at. Pellentesque consectetur quam eget eros adipiscing, dictum porta leo varius. Phasellus sem augue, ultricies euismod porta vel, posuere ac tellus. Quisque metus est, laoreet ut massa quis, scelerisque posuere eros. Nam non rhoncus est. Vivamus auctor dignissim dolor, viverra ornare nunc ullamcorper vitae. Fusce vitae eleifend nibh.</p>
  107. <p>Curabitur consectetur lectus ac sem pretium, non pellentesque leo dapibus. Phasellus dapibus blandit justo, vel pretium nulla vehicula at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse viverra quam a lectus facilisis consectetur. Proin ultrices diam in porttitor lacinia. Integer quis volutpat magna. Proin venenatis, ipsum sed blandit dapibus, neque tortor posuere nisl, in placerat diam magna vel odio. Quisque nisl felis, egestas a euismod sit amet, blandit in lorem. Nulla commodo ultricies justo non sodales. Sed nec imperdiet enim.</p>
  108. <p>In hac habitasse platea dictumst. Nam iaculis imperdiet eros ac lacinia. Praesent in facilisis purus, eget consectetur est. Morbi porttitor nisl faucibus ipsum volutpat, id dapibus dui congue. Pellentesque ultrices lacus vel turpis molestie auctor. Nulla eu dui sed quam consequat pharetra ac vitae nulla. Phasellus mollis dignissim sapien ac varius. Praesent volutpat enim massa, ut accumsan eros vehicula in. Phasellus non eleifend leo. Praesent lacinia, enim sit amet rhoncus molestie, dolor massa porta ipsum, id volutpat tellus nisi ut orci. Mauris aliquet pharetra dui, at porta metus ultricies et. Nulla cursus tortor at erat pulvinar fringilla tempor et nibh. Nullam convallis purus id pretium consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc non velit ut risus pharetra mattis.</p>
  109. <p>Nulla consequat ac mauris at commodo. Morbi dignissim luctus tortor, id molestie ipsum posuere id. Sed vestibulum sem sit amet diam ultricies vehicula. Suspendisse lobortis quis nisl ac dignissim. Vestibulum condimentum nulla sit amet erat pretium aliquam. Vivamus quis ullamcorper ipsum, sit amet lobortis nibh. Cras eleifend, odio nec consequat viverra, erat lorem cursus velit, non tincidunt tortor lacus id quam. Fusce non elit condimentum, malesuada arcu sit amet, scelerisque mauris. Fusce eleifend nulla a turpis posuere tempor. Etiam sit amet augue lorem. Duis laoreet quis arcu laoreet consectetur. Proin sagittis nec felis ac vehicula. Etiam pharetra pulvinar lectus eu gravida.</p>
  110. <p>Proin tincidunt ac quam et imperdiet. Duis sodales tellus sodales mi ultrices, ac convallis justo feugiat. Sed rutrum, neque ac pharetra volutpat, metus metus pellentesque justo, nec porta tellus lacus vel purus. Etiam et nisi lectus. Vestibulum volutpat libero in est tristique iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis posuere venenatis augue, ut tincidunt diam ultricies eu. In purus quam, blandit non risus et, blandit accumsan risus. Sed in molestie dolor.</p>
  111. <p>Integer rhoncus enim non justo fringilla dignissim. Sed convallis metus nec mauris varius, vel condimentum leo mattis. Vestibulum eu quam pharetra ante condimentum lobortis varius vel arcu. Nulla at mattis enim. Pellentesque sagittis nibh sed dui accumsan, venenatis gravida est lobortis. Nam iaculis ipsum ultrices sapien luctus ultricies. Ut molestie tortor in felis hendrerit, vel lacinia dolor gravida. Donec suscipit quis massa non hendrerit. Vestibulum posuere nulla sit amet elit vestibulum dignissim at eu nunc. Aliquam hendrerit porttitor purus, a faucibus eros sodales at. In adipiscing euismod orci, in pellentesque dolor venenatis eu. Sed et dui semper neque dignissim tempus eu id sapien. Morbi porta magna tellus, at tincidunt dolor luctus et. Ut ac leo ac enim aliquet suscipit in ac enim. In neque nisl, ultricies id nulla a, tristique ultrices risus. Fusce vitae leo non magna ultrices lobortis eleifend id mauris.</p>
  112. <p>Aenean vel posuere eros, nec porttitor erat. Suspendisse condimentum convallis diam, luctus congue velit tempor id. Phasellus lobortis sagittis risus ac suscipit. Donec lobortis sollicitudin bibendum. Morbi sodales, massa sit amet consequat bibendum, nisi ipsum volutpat leo, hendrerit molestie elit tortor a elit. Integer nec suscipit lacus. Curabitur elit tellus, molestie sodales tellus et, rhoncus feugiat lacus.</p>
  113. <p>Sed urna augue, eleifend at nisl sed, ornare cursus neque. Aenean diam elit, rutrum ut lorem at, vulputate tristique leo. Suspendisse dignissim consequat quam eget elementum. Quisque sodales massa non velit bibendum dignissim. Etiam aliquet velit nec fringilla adipiscing. Integer iaculis porttitor risus at ornare. Nunc quis eleifend purus. Sed id ante ut dolor sagittis aliquet. Maecenas consequat cursus dui vel pretium. Donec turpis ligula, mollis malesuada vestibulum in, gravida vitae ligula. Etiam convallis egestas sollicitudin. Sed cursus ultrices metus vel rhoncus. Praesent augue purus, mollis in odio dignissim, euismod pharetra justo.</p>
  114. <p>Nam sed orci justo. Nunc dapibus tellus eget lectus sodales bibendum. Suspendisse id lobortis ligula. Vestibulum in eros nunc. Nunc molestie orci eget dignissim porttitor. Donec tristique est id tristique cursus. Sed vitae ultricies massa. Morbi lobortis commodo diam, non tincidunt metus condimentum at. Suspendisse imperdiet ipsum eget sem sodales faucibus. Sed turpis nisi, bibendum at odio sed, dictum volutpat sem. Nulla eu diam quis enim facilisis fermentum sit amet ut felis. Vestibulum et viverra leo.</p>
  115. <p>Suspendisse libero nisi, tincidunt scelerisque lacus id, fermentum gravida nulla. Morbi tristique nisi ac tempor vehicula. Proin porttitor odio ut justo interdum tincidunt. Quisque quis elit pellentesque lorem luctus mattis. Curabitur fermentum vestibulum tellus ac tincidunt. Integer id convallis leo, eget convallis justo. Nullam fermentum vitae nisi eu suscipit. Morbi ac sem vitae turpis dapibus varius eu quis eros. Vestibulum fermentum urna vitae lorem dictum, eget molestie magna hendrerit. Vivamus a nisi eu leo pretium tincidunt. Nulla facilisi.</p>
  116. <p>Nam molestie elementum magna, non condimentum libero tincidunt eu. Donec laoreet odio sed accumsan vulputate. Cras lacus turpis, rutrum at enim in, tempus auctor nibh. Aenean augue nunc, rutrum vel dui interdum, porttitor consectetur felis. Duis semper accumsan consequat. Phasellus tincidunt elementum mattis. Nulla volutpat a tortor et pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt nulla non fermentum dictum. Phasellus aliquet nec risus quis blandit. Cras in venenatis lorem, suscipit ultrices ipsum. Nam dolor tellus, rhoncus nec fringilla at, auctor nec metus. Donec placerat est ligula, ac rhoncus odio tempor at. Curabitur ut nulla ac ipsum sodales laoreet imperdiet quis erat.</p>
  117. <p>Donec mollis tellus ligula, a laoreet felis accumsan quis. Pellentesque ullamcorper nec enim a convallis. Etiam id volutpat ligula. Duis feugiat ante lectus, et ultrices orci dictum non. Aliquam faucibus dapibus sapien eu accumsan. Curabitur ut eros pretium, euismod libero eu, viverra lacus. Donec sit amet luctus dolor, a facilisis sapien. Duis et rutrum elit. Aliquam ornare risus nec ligula elementum, in semper eros rutrum. Morbi tincidunt, quam et egestas cursus, purus metus facilisis enim, sit amet mollis eros dui et nibh. Integer vitae est lobortis, gravida sem non, porta lorem. Curabitur sit amet consectetur purus, non congue justo. Mauris nulla diam, malesuada et vulputate vitae, faucibus sed neque. Nullam sed purus mi. Nunc dolor mauris, blandit non rhoncus sed, laoreet laoreet lectus. Curabitur luctus velit in dui pellentesque eleifend.</p>
  118. <p>Nulla facilisi. In quis nisi velit. Donec at tortor dolor. Integer molestie tellus quis dolor faucibus elementum. Cras condimentum tristique ornare. Pellentesque eget ultricies sapien, aliquet mattis quam. Morbi eu augue ac est venenatis varius quis eu ligula. Duis nec sollicitudin arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis justo eros, malesuada eu porta nec, lobortis eget nunc. Praesent vel gravida nulla.</p>
  119. <p>Donec cursus ante eget libero mollis, ut sollicitudin quam egestas. Curabitur ornare tortor vitae ullamcorper bibendum. Aenean ultrices feugiat massa nec posuere. Duis ligula felis, pulvinar vitae dapibus vel, ultricies id urna. Donec laoreet erat massa, a mollis purus elementum sed. Aliquam placerat, arcu vel dictum mattis, neque libero venenatis turpis, ac iaculis orci nunc id nibh. Vivamus massa justo, euismod non metus ac, aliquam mattis nibh. Nam facilisis, massa vel mattis molestie, libero arcu scelerisque lectus, sed consequat erat risus vitae nisi.</p>
  120. <p>Vestibulum dictum ultrices sodales. Suspendisse eget sapien a dolor facilisis cursus. Phasellus porta luctus lorem, ut consectetur risus aliquet a. Maecenas sed porttitor elit, in venenatis mauris. Vestibulum facilisis tincidunt dolor, at tincidunt tellus. Mauris tempor lobortis sapien. Sed vestibulum, sapien vitae consectetur lobortis, velit enim viverra justo, et ultricies orci nisl eu ligula. Vestibulum quis hendrerit elit. Quisque pulvinar nulla ac massa egestas dapibus. Aliquam erat volutpat. Phasellus sed nisl risus. Donec tincidunt et elit aliquet ultricies. Cras ut bibendum sapien. Mauris ultricies ac urna nec facilisis.</p>
  121. <p>Donec vehicula tincidunt eros, ut eleifend felis congue vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam in imperdiet neque, non pretium elit. Suspendisse pulvinar turpis nec dictum aliquam. Quisque eget justo pharetra, egestas mauris at, faucibus enim. Vivamus lectus ipsum, gravida non orci non, imperdiet rutrum dui. Proin imperdiet nisl arcu, vitae porta nibh porta a. Phasellus ipsum lorem, consequat in lacus non, varius rhoncus sapien.</p>
  122. <p>In laoreet leo eu nulla accumsan, et rhoncus ligula rutrum. Morbi consectetur sagittis eros. In vitae venenatis massa. Morbi vitae nulla semper, laoreet risus vel, tristique quam. Curabitur vitae dolor sit amet eros pharetra gravida non at nunc. Vivamus et eros vitae est elementum rhoncus sit amet vitae dui. Curabitur aliquam purus nec orci facilisis sagittis. Integer dapibus accumsan turpis eu ultricies. Cras arcu erat, tempor in enim nec, fermentum blandit libero. Nulla id ante eu lectus consectetur vulputate.</p>
  123. <p>Curabitur sit amet ligula nec nunc viverra ornare a sed diam. Sed non urna nisl. Nunc placerat velit porta augue consectetur ultricies. Sed congue lacus feugiat tortor feugiat scelerisque. Cras malesuada ligula dui, id eleifend nunc cursus sit amet. Suspendisse erat quam, lacinia eget libero tristique, rutrum sagittis felis. Curabitur fermentum eleifend ultricies. Aenean iaculis, nisi nec cursus tempor, arcu dolor elementum dui, ut tincidunt ligula leo et neque. Sed cursus elementum libero in vulputate. Aliquam erat volutpat. Phasellus pulvinar lectus leo, dignissim mollis enim consequat at. Nunc tempus nulla neque, eu blandit elit pellentesque et. In sollicitudin arcu ac est eleifend pellentesque. Pellentesque id orci suscipit, malesuada elit nec, tincidunt arcu. Cras interdum turpis tellus, a molestie mi fermentum sit amet.</p>
  124. <p>Duis ultricies sapien vitae nulla imperdiet, a hendrerit mauris ultrices. Donec fermentum odio gravida pellentesque imperdiet. Curabitur gravida eu neque eu sagittis. Donec tempor tristique nulla pulvinar faucibus. Ut aliquet imperdiet mauris, in faucibus est bibendum a. Mauris sodales consectetur leo, id fringilla nibh bibendum in. Ut viverra mauris dignissim elit aliquet sodales. Cras lacinia metus enim, id posuere diam tincidunt non. Maecenas eleifend, elit nec dignissim tempor, dolor velit vulputate massa, fringilla elementum tellus magna non nisi. Sed eget elit lacus. Donec posuere commodo blandit. Donec tincidunt ultrices sapien, in ornare turpis iaculis eu. Cras aliquam quis erat non ultricies.</p>
  125. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi urna turpis, luctus sit amet rutrum nec, rutrum non orci. Vivamus non massa ut eros venenatis semper at adipiscing lorem. Pellentesque eu accumsan purus, a cursus diam. Curabitur facilisis erat quis justo bibendum posuere. Praesent ac auctor ante. Duis congue felis et ultrices fermentum. Donec feugiat sagittis nisl, id condimentum sem vehicula nec. Phasellus id aliquet ipsum. Fusce eget condimentum neque. Sed sit amet egestas urna, sodales bibendum diam. Curabitur vel dui consectetur, volutpat eros at, rhoncus sapien. Cras sit amet semper purus. Phasellus ut hendrerit dolor, dignissim sodales odio.</p>
  126. <p>Aenean at felis lectus. Nunc vestibulum et eros eget pulvinar. Aliquam hendrerit odio id risus consequat, sit amet aliquet ligula eleifend. Integer lacinia odio mi, in ultricies libero egestas ut. Phasellus volutpat, velit ut tempus ullamcorper, nisi ante faucibus nulla, ac varius sem lacus eu erat. Quisque ullamcorper euismod aliquet. Quisque a magna facilisis, semper dolor ut, eleifend risus.</p>
  127. <p>Vivamus cursus est id sapien varius, a ultricies ante laoreet. Nullam mattis eros sapien, eget commodo nunc aliquet sit amet. Sed nisi mi, tincidunt sed consectetur et, commodo in sem. Mauris sagittis libero vitae rutrum gravida. Pellentesque pharetra, metus vitae sollicitudin pharetra, nisl lacus vehicula elit, vel lacinia purus elit sed neque. Integer et nibh vitae ligula convallis lacinia. Aliquam erat volutpat. Nam aliquet nisi nec venenatis consectetur. Proin dignissim purus et aliquet euismod. Nulla porttitor eleifend metus, a rutrum elit fermentum faucibus. Nunc at tempor urna. Fusce euismod, magna ac dictum facilisis, ante lorem ultrices quam, sit amet bibendum massa mi ut ipsum. Integer sed augue augue. Quisque egestas, magna id laoreet imperdiet, mauris mauris hendrerit odio, nec cursus lacus purus eu arcu. Morbi condimentum elementum magna, non placerat elit eleifend a.</p>
  128. <p>Vestibulum ac nisi ut dolor condimentum imperdiet. Ut quis nisi in eros suscipit egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque nec tortor ut ipsum accumsan volutpat et quis odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean adipiscing, neque in dictum rhoncus, leo nibh porta enim, in eleifend risus sem eu ipsum. Nam porttitor feugiat posuere. Integer eu lacinia quam. Nam at arcu metus. Integer at erat ac urna varius eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  129. <p>Vestibulum quis dui fringilla, varius lectus nec, bibendum enim. Praesent hendrerit faucibus euismod. Curabitur quam enim, placerat at sem eu, ornare blandit sapien. Etiam venenatis libero eu orci congue sollicitudin. In bibendum sed leo vel viverra. Proin vestibulum aliquam faucibus. Integer nisi sem, pulvinar quis ipsum non, porttitor ullamcorper erat. Quisque ut velit viverra, lobortis tortor eu, molestie eros. Suspendisse lacinia augue at augue sagittis, at feugiat lectus tempus. Cras sed hendrerit lacus. Mauris molestie nunc sed quam faucibus, malesuada pulvinar augue tincidunt. Aenean aliquet libero at metus lacinia tincidunt. Praesent eu pellentesque lectus.</p>
  130. <p>Nunc fermentum pellentesque ipsum ut iaculis. Curabitur placerat mattis malesuada. Praesent nec nibh semper est adipiscing rutrum non vel libero. Proin ac ultrices dolor, vitae tempor eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam erat volutpat. Suspendisse id ullamcorper est. Donec vel posuere magna, et aliquet mi. Etiam vitae cursus nisi. Sed convallis eu eros quis ornare.</p>
  131. <p>Ut lacus libero, dictum eu purus quis, viverra faucibus urna. Praesent ante enim, sodales ac aliquet nec, elementum et nibh. Sed eu eros facilisis orci bibendum facilisis non non est. Suspendisse tristique dui sit amet turpis mattis, sed pretium ligula pulvinar. Sed diam lectus, consectetur ac dapibus ut, interdum et odio. Pellentesque placerat pulvinar felis, vitae aliquam risus elementum et. In sit amet suscipit sapien, euismod feugiat risus. Maecenas diam massa, interdum eget lorem et, faucibus suscipit tortor. Phasellus at blandit magna. Aliquam arcu est, tempus sit amet elit et, varius varius neque. Fusce sollicitudin lectus eu urna pellentesque sollicitudin. Etiam interdum elit sed pulvinar iaculis. Praesent suscipit felis sit amet leo sagittis, at rutrum lectus ultrices. Morbi convallis viverra lorem, non dapibus quam pretium nec. Nullam feugiat quam ut risus cursus, cursus porttitor nunc cursus. Sed sit amet ultrices felis.</p>
  132. <p>Donec consectetur tortor nisi. Fusce risus elit, tincidunt vel enim sed, egestas posuere risus. Nunc lacinia mi a erat ultrices, ac pretium mi tempor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis elementum, velit quis elementum sagittis, dolor dolor tempor risus, a congue mi orci non lacus. Proin nisi odio, tempus sed erat sed, vulputate vehicula dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam faucibus, dui non eleifend posuere, mi risus commodo neque, placerat ultrices nibh dui a mi.</p>
  133. <p>Vestibulum dictum ultrices sodales. Suspendisse eget sapien a dolor facilisis cursus. Phasellus porta luctus lorem, ut consectetur risus aliquet a. Maecenas sed porttitor elit, in venenatis mauris. Vestibulum facilisis tincidunt dolor, at tincidunt tellus. Mauris tempor lobortis sapien. Sed vestibulum, sapien vitae consectetur lobortis, velit enim viverra justo, et ultricies orci nisl eu ligula. Vestibulum quis hendrerit elit. Quisque pulvinar nulla ac massa egestas dapibus. Aliquam erat volutpat. Phasellus sed nisl risus. Donec tincidunt et elit aliquet ultricies. Cras ut bibendum sapien. Mauris ultricies ac urna nec facilisis.</p>
  134. <p>Donec vehicula tincidunt eros, ut eleifend felis congue vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam in imperdiet neque, non pretium elit. Suspendisse pulvinar turpis nec dictum aliquam. Quisque eget justo pharetra, egestas mauris at, faucibus enim. Vivamus lectus ipsum, gravida non orci non, imperdiet rutrum dui. Proin imperdiet nisl arcu, vitae porta nibh porta a. Phasellus ipsum lorem, consequat in lacus non, varius rhoncus sapien.</p>
  135. <p>In laoreet leo eu nulla accumsan, et rhoncus ligula rutrum. Morbi consectetur sagittis eros. In vitae venenatis massa. Morbi vitae nulla semper, laoreet risus vel, tristique quam. Curabitur vitae dolor sit amet eros pharetra gravida non at nunc. Vivamus et eros vitae est elementum rhoncus sit amet vitae dui. Curabitur aliquam purus nec orci facilisis sagittis. Integer dapibus accumsan turpis eu ultricies. Cras arcu erat, tempor in enim nec, fermentum blandit libero. Nulla id ante eu lectus consectetur vulputate.</p>
  136. <p>Curabitur sit amet ligula nec nunc viverra ornare a sed diam. Sed non urna nisl. Nunc placerat velit porta augue consectetur ultricies. Sed congue lacus feugiat tortor feugiat scelerisque. Cras malesuada ligula dui, id eleifend nunc cursus sit amet. Suspendisse erat quam, lacinia eget libero tristique, rutrum sagittis felis. Curabitur fermentum eleifend ultricies. Aenean iaculis, nisi nec cursus tempor, arcu dolor elementum dui, ut tincidunt ligula leo et neque. Sed cursus elementum libero in vulputate. Aliquam erat volutpat. Phasellus pulvinar lectus leo, dignissim mollis enim consequat at. Nunc tempus nulla neque, eu blandit elit pellentesque et. In sollicitudin arcu ac est eleifend pellentesque. Pellentesque id orci suscipit, malesuada elit nec, tincidunt arcu. Cras interdum turpis tellus, a molestie mi fermentum sit amet.</p>
  137. <p>Duis ultricies sapien vitae nulla imperdiet, a hendrerit mauris ultrices. Donec fermentum odio gravida pellentesque imperdiet. Curabitur gravida eu neque eu sagittis. Donec tempor tristique nulla pulvinar faucibus. Ut aliquet imperdiet mauris, in faucibus est bibendum a. Mauris sodales consectetur leo, id fringilla nibh bibendum in. Ut viverra mauris dignissim elit aliquet sodales. Cras lacinia metus enim, id posuere diam tincidunt non. Maecenas eleifend, elit nec dignissim tempor, dolor velit vulputate massa, fringilla elementum tellus magna non nisi. Sed eget elit lacus. Donec posuere commodo blandit. Donec tincidunt ultrices sapien, in ornare turpis iaculis eu. Cras aliquam quis erat non ultricies.</p>
  138. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi urna turpis, luctus sit amet rutrum nec, rutrum non orci. Vivamus non massa ut eros venenatis semper at adipiscing lorem. Pellentesque eu accumsan purus, a cursus diam. Curabitur facilisis erat quis justo bibendum posuere. Praesent ac auctor ante. Duis congue felis et ultrices fermentum. Donec feugiat sagittis nisl, id condimentum sem vehicula nec. Phasellus id aliquet ipsum. Fusce eget condimentum neque. Sed sit amet egestas urna, sodales bibendum diam. Curabitur vel dui consectetur, volutpat eros at, rhoncus sapien. Cras sit amet semper purus. Phasellus ut hendrerit dolor, dignissim sodales odio.</p>
  139. <p>Aenean at felis lectus. Nunc vestibulum et eros eget pulvinar. Aliquam hendrerit odio id risus consequat, sit amet aliquet ligula eleifend. Integer lacinia odio mi, in ultricies libero egestas ut. Phasellus volutpat, velit ut tempus ullamcorper, nisi ante faucibus nulla, ac varius sem lacus eu erat. Quisque ullamcorper euismod aliquet. Quisque a magna facilisis, semper dolor ut, eleifend risus.</p>
  140. <p>Vivamus cursus est id sapien varius, a ultricies ante laoreet. Nullam mattis eros sapien, eget commodo nunc aliquet sit amet. Sed nisi mi, tincidunt sed consectetur et, commodo in sem. Mauris sagittis libero vitae rutrum gravida. Pellentesque pharetra, metus vitae sollicitudin pharetra, nisl lacus vehicula elit, vel lacinia purus elit sed neque. Integer et nibh vitae ligula convallis lacinia. Aliquam erat volutpat. Nam aliquet nisi nec venenatis consectetur. Proin dignissim purus et aliquet euismod. Nulla porttitor eleifend metus, a rutrum elit fermentum faucibus. Nunc at tempor urna. Fusce euismod, magna ac dictum facilisis, ante lorem ultrices quam, sit amet bibendum massa mi ut ipsum. Integer sed augue augue. Quisque egestas, magna id laoreet imperdiet, mauris mauris hendrerit odio, nec cursus lacus purus eu arcu. Morbi condimentum elementum magna, non placerat elit eleifend a.</p>
  141. <p>Vestibulum ac nisi ut dolor condimentum imperdiet. Ut quis nisi in eros suscipit egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque nec tortor ut ipsum accumsan volutpat et quis odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean adipiscing, neque in dictum rhoncus, leo nibh porta enim, in eleifend risus sem eu ipsum. Nam porttitor feugiat posuere. Integer eu lacinia quam. Nam at arcu metus. Integer at erat ac urna varius eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  142. <p>Vestibulum quis dui fringilla, varius lectus nec, bibendum enim. Praesent hendrerit faucibus euismod. Curabitur quam enim, placerat at sem eu, ornare blandit sapien. Etiam venenatis libero eu orci congue sollicitudin. In bibendum sed leo vel viverra. Proin vestibulum aliquam faucibus. Integer nisi sem, pulvinar quis ipsum non, porttitor ullamcorper erat. Quisque ut velit viverra, lobortis tortor eu, molestie eros. Suspendisse lacinia augue at augue sagittis, at feugiat lectus tempus. Cras sed hendrerit lacus. Mauris molestie nunc sed quam faucibus, malesuada pulvinar augue tincidunt. Aenean aliquet libero at metus lacinia tincidunt. Praesent eu pellentesque lectus.</p>
  143. <p> Nunc fermentum pellentesque ipsum ut iaculis. Curabitur placerat mattis malesuada. Praesent nec nibh semper est adipiscing rutrum non vel libero. Proin ac ultrices dolor, vitae tempor eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam erat volutpat. Suspendisse id ullamcorper est. Donec vel posuere magna, et aliquet mi. Etiam vitae cursus nisi. Sed convallis eu eros quis ornare.</p>
  144. <p>Ut lacus libero, dictum eu purus quis, viverra faucibus urna. Praesent ante enim, sodales ac aliquet nec, elementum et nibh. Sed eu eros facilisis orci bibendum facilisis non non est. Suspendisse tristique dui sit amet turpis mattis, sed pretium ligula pulvinar. Sed diam lectus, consectetur ac dapibus ut, interdum et odio. Pellentesque placerat pulvinar felis, vitae aliquam risus elementum et. In sit amet suscipit sapien, euismod feugiat risus. Maecenas diam massa, interdum eget lorem et, faucibus suscipit tortor. Phasellus at blandit magna. Aliquam arcu est, tempus sit amet elit et, varius varius neque. Fusce sollicitudin lectus eu urna pellentesque sollicitudin. Etiam interdum elit sed pulvinar iaculis. Praesent suscipit felis sit amet leo sagittis, at rutrum lectus ultrices. Morbi convallis viverra lorem, non dapibus quam pretium nec. Nullam feugiat quam ut risus cursus, cursus porttitor nunc cursus. Sed sit amet ultrices felis.</p>
  145. <p>Donec consectetur tortor nisi. Fusce risus elit, tincidunt vel enim sed, egestas posuere risus. Nunc lacinia mi a erat ultrices, ac pretium mi tempor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis elementum, velit quis elementum sagittis, dolor dolor tempor risus, a congue mi orci non lacus. Proin nisi odio, tempus sed erat sed, vulputate vehicula dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam faucibus, dui non eleifend posuere, mi risus commodo neque, placerat ultrices nibh dui a mi.</p>
  146.             </div>
  147.         </div>
  148.         <script>
  149.             var temp;
  150.             function canvasSizeUpdate() {
  151.                 var ww = $(window).width();
  152.                 var wh = $(window).height();
  153.                 var cw = $("#treeCanvas").width();
  154.                 var ch = $("#treeCanvas").height();
  155.                 var cx1 = cw - ww, cy1 = ch - wh;
  156.                 var constraints = [0, 0, ww, wh];
  157.                 //If WIndow is Larger than the canvass
  158.                 if (cw <= ww) {
  159.                     constraints[0] = 0;
  160.                     constraints[2] = ww - cw
  161.                 } else {
  162.                     constraints[0] = -cx1 - 10;
  163.                     constraints[2] = 10
  164.                 }
  165.                 if (ch < wh) {
  166.                     constraints[1] = 0;
  167.                     constraints[3] = wh - ch
  168.                 } else {
  169.                     constraints[1] = -cy1 - 10;
  170.                     constraints[3] = 10
  171.                 }
  172.                 $("#treeCanvas").draggable({
  173.                     //containment : [-cx1-10, -cy1-10, 10, 10]
  174.                     containment : constraints
  175.                 });
  176.                 var c = $("#treeCanvas").draggable("option", "containment");
  177.                 var p = $("#treeCanvas").position();
  178.                 if (p.top < c[1]) {
  179.                     $("#treeCanvas").css("top", c[1] + "px");
  180.                 }
  181.                 if (p.left < c[0]) {
  182.                     $("#treeCanvas").css("left", c[0] + "px");
  183.                 }
  184.             }
  185.  
  186.  
  187.             $(document).ready(function() {
  188.                 var ww = $(window).width();
  189.                 var wh = $(window).height();
  190.                 //var cw = 2.1 * ww, ch = 2.1 * wh;
  191.                 var cw = 2.1 * 1920, ch = 2.1 * 1080;
  192.                 var cx1 = cw - ww, cy1 = ch - wh;
  193.                 var constraints = [0, 0, ww, wh];
  194.                 $("#treeCanvas").css('width', cw + 'px');
  195.                 $("#treeCanvas").css('height', ch + 'px');
  196.  
  197.                 if (cw <= ww) {
  198.                     constraints[0] = 0;
  199.                     constraints[2] = ww - cw
  200.                 } else {
  201.                     constraints[0] = -cx1 - 10;
  202.                     constraints[2] = 10
  203.                 }
  204.                 if (ch < wh) {
  205.                     constraints[1] = 0;
  206.                     constraints[3] = wh - ch
  207.                 } else {
  208.                     constraints[1] = -cy1 - 10;
  209.                     constraints[3] = 10
  210.                 }
  211.  
  212.                 $("#treeCanvas").draggable({
  213.                     containment : constraints
  214.                 });
  215.                 var c = $("#treeCanvas").draggable("option", "containment");
  216.                 $("#treeCanvas").animate({
  217.                     "left" : c[0] / 2 + "px"
  218.                 }, {
  219.                     "queue" : false,
  220.                     "duration" : 1000
  221.                 });
  222.                 $("#treeCanvas").animate({
  223.                     "top" : c[1] / 2 + "px"
  224.                 }, {
  225.                     "queue" : false,
  226.                     "duration" : 1000
  227.                 });
  228.                 $(window).resize(function(e) {
  229.                     canvasSizeUpdate();
  230.  
  231.                 })
  232.  
  233.                 $.fn.HasScrollBar = function() {
  234.                     //note: clientHeight= height of holder
  235.                     //scrollHeight= we have content till this height
  236.                     var _elm = $(this)[0];
  237.                     var _hasScrollBar = false;
  238.                     if ((_elm.clientHeight < _elm.scrollHeight) || (_elm.clientWidth < _elm.scrollWidth)) {
  239.                         _hasScrollBar = true;
  240.                     }
  241.                     return _hasScrollBar;
  242.                 }
  243.  
  244.                 $.contextMenu({
  245.                     selector : '.context-menu-one',
  246.                     callback : function(key, options) {
  247.                         var c = $(this).draggable("option", "containment");
  248.                         if (key == "tl") {
  249.                             $(this).animate({
  250.                                 "left" : c[2]
  251.                             }, {
  252.                                 "queue" : false,
  253.                                 "duration" : 1000
  254.                             });
  255.                             $(this).animate({
  256.                                 "top" : c[3]
  257.                             }, {
  258.                                 "queue" : false,
  259.                                 "duration" : 1000
  260.                             });
  261.                         } else if (key == "tr") {
  262.                             $(this).animate({
  263.                                 "left" : c[0] + "px"
  264.                             }, {
  265.                                 "queue" : false,
  266.                                 "duration" : 1000
  267.                             });
  268.                             $(this).animate({
  269.                                 "top" : c[3] + "px"
  270.                             }, {
  271.                                 "queue" : false,
  272.                                 "duration" : 1000
  273.                             });
  274.                         } else if (key == "bl") {
  275.                             $(this).animate({
  276.                                 "left" : c[2] + "px"
  277.                             }, {
  278.                                 "queue" : false,
  279.                                 "duration" : 1000
  280.                             });
  281.                             $(this).animate({
  282.                                 "top" : c[1] + "px"
  283.                             }, {
  284.                                 "queue" : false,
  285.                                 "duration" : 1000
  286.                             });
  287.                         } else if (key == "br") {
  288.                             $(this).animate({
  289.                                 "left" : c[0] + "px"
  290.                             }, {
  291.                                 "queue" : false,
  292.                                 "duration" : 1000
  293.                             });
  294.                             $(this).animate({
  295.                                 "top" : c[1] + "px"
  296.                             }, {
  297.                                 "queue" : false,
  298.                                 "duration" : 1000
  299.                             });
  300.                         } else if (key == "c") {
  301.                             $(this).animate({
  302.                                 "left" : c[0] / 2 + "px"
  303.                             }, {
  304.                                 "queue" : false,
  305.                                 "duration" : 1000
  306.                             });
  307.                             $(this).animate({
  308.                                 "top" : c[1] / 2 + "px"
  309.                             }, {
  310.                                 "queue" : false,
  311.                                 "duration" : 1000
  312.                             });
  313.                         }
  314.                     },
  315.                     items : {
  316.                         "tl" : {
  317.                             name : "Top Left"
  318.                         },
  319.                         "tr" : {
  320.                             name : "Top Right"
  321.                         },
  322.                         "c" : {
  323.                             name : "Center"
  324.                         },
  325.                         "bl" : {
  326.                             name : "Bottom Left"
  327.                         },
  328.                         "br" : {
  329.                             name : "Bottom Right"
  330.                         }
  331.                     }
  332.                 });
  333.  
  334.                 $('.leftMenuTab').click(function(e) {
  335.                     temp = $(this);
  336.                     if ($('.leftMenuTab').attr('data-state') == "collapsed") {
  337.                         $(".charIcon", this).html("&laquo;");
  338.                         $('.leftMenuTab').attr('data-state', 'expanded');
  339.                         $(".leftMenu").css("left", "+=110px");
  340.                         $(".leftMenuTab").css("left", "+=100px");
  341.                     } else {
  342.                         $(".charIcon", this).html("&raquo;");
  343.                         $('.leftMenuTab').attr('data-state', 'collapsed');
  344.                         $(".leftMenu").css("left", "-=110px");
  345.                         $(".leftMenuTab").css("left", "-=100px");
  346.                         $(this).addClass("rShift");
  347.                     }
  348.                 });
  349.             });
  350.        </script>
  351.     </body>
  352. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!