API tools faq
paste
computeroverhauls

Untitled

computeroverhauls
Mar 31st, 2017
518
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.33 KB | None | 0 0
raw download clone embed print report
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  2. <script>
  3. // handles the click event for link 1, sends the query
  4. function getOutput() {
  5. var model = document.getElementById('model').value;
  6. var carrier = document.getElementById('carrier').value;
  7. var condition = document.getElementById('condition').value;
  8. var storage = document.getElementById('storage').value;
  9.  
  10. getRequest(
  11. 'quotest/PHPExcel//getQuote.php?model=' + model + "&condition=" + condition + '&storage=' + storage + '&carrier=' + carrier , // URL for the PHP file
  12. drawOutput, // handle successful request
  13. drawError // handle error
  14. );
  15. return false;
  16. }
  17. // handles drawing an error message
  18. function drawError() {
  19. var container = document.getElementById('output');
  20. container.innerHTML = 'Please try again later or contact us at [email protected]';
  21. }
  22. // handles the response, adds the html
  23. function drawOutput(responseText) {
  24. $('#outputcont').show(300);
  25. var container = document.getElementById('output');
  26. container.innerHTML = responseText;
  27. }
  28. // helper function for cross-browser request object
  29. function getRequest(url, success, error) {
  30. var req = false;
  31. try{
  32. // most browsers
  33. req = new XMLHttpRequest();
  34. } catch (e){
  35. // IE
  36. try{
  37. req = new ActiveXObject("Msxml2.XMLHTTP");
  38. } catch(e) {
  39. // try an older version
  40. try{
  41. req = new ActiveXObject("Microsoft.XMLHTTP");
  42. } catch(e) {
  43. return false;
  44. }
  45. }
  46. }
  47. if (!req) return false;
  48. if (typeof success != 'function') success = function () {};
  49. if (typeof error!= 'function') error = function () {};
  50. req.onreadystatechange = function(){
  51. if(req.readyState == 4) {
  52. return req.status === 200 ?
  53. success(req.responseText) : error(req.status);
  54. }
  55. }
  56. req.open("GET", url, true);
  57. req.send(null);
  58. return req;
  59. }
  60. $(document).ready(function(){
  61. $("#1").hide(); //Hides all the capacity fields
  62. $("#2").hide();
  63. $("#3").hide();
  64. $("#4").hide();
  65. $("#5").hide();
  66. $('#model').change(function(e){
  67. if($(this).val() == "iPhone 7 Plus" || $(this).val() == "iPhone 7"){ //Only show the right capacity field for the right model, hide all others
  68. $("#1").show();
  69. $("#2").show();
  70. $("#3").hide();
  71. $("#4").show();
  72. $("#5").hide();
  73. }
  74. if($(this).val() == "iPhone 6s Plus" || $(this).val() == "iPhone 6s"){
  75. $("#1").hide();
  76. $("#2").show();
  77. $("#3").show();
  78. $("#4").show();
  79. $("#5").show();
  80. }
  81. if($(this).val() == "iPhone SE"){
  82. $("#1").hide();
  83. $("#2").hide();
  84. $("#3").show();
  85. $("#4").hide();
  86. $("#5").show();
  87. }
  88. if($(this).val() == "iPhone 6 Plus" || $(this).val() == "iPhone 6"){
  89. $("#1").hide();
  90. $("#2").show();
  91. $("#3").show();
  92. $("#4").hide();
  93. $("#5").show();
  94. }
  95. });
  96. $('#model').on('change', function() { //Removes the placeholder after anything has been selected
  97. if ( this.value !== 'none') //Also fades in the next dropdown
  98. {
  99. $("#modelplaceholder").hide();
  100. $("#storage").show(300);
  101. $("#storageHeader").show(300);
  102. }
  103. });
  104. $('#storage').on('change', function() {
  105. if ( this.value !== 'none')
  106. {
  107. $("#carrier").show(300);
  108. $("#carrierHeader").show(300);
  109. $("#storageplaceholder").hide();
  110. }
  111. });
  112. $('#carrier').on('change', function() {
  113. if ( this.value !== 'none')
  114. {
  115. $("#condition").show(300);
  116. $("#conditionHeader").show(300);
  117. $("#carrierplaceholder").hide();
  118. }
  119. });
  120. $('#condition').on('change', function() {
  121. if (this.value !== 'none')
  122. {
  123. $(".btn").fadeIn(300);
  124. $("#conditionplaceholder").hide();
  125. }
  126. });
  127.  
  128. $('#condition').change(function(e){ //Fades in the blurb for each condition, fades out all the others
  129. if ($(this).val() !== 'none'){
  130. var cond = '#' + $(this).val();
  131. $(".blurb").fadeOut(300, function() {
  132. $(cond).fadeIn(300);
  133. });
  134. }else{
  135. $(cond).fadeIn();
  136. }
  137. });
  138. $("#ip7p").click(function () {
  139. if($('#model').val() == 'none'){
  140. $('#model').val('iPhone 7 Plus');
  141. $('#model').change();
  142. $(".modelscont").fadeOut(300);
  143. $(this).fadeIn(300);
  144. }else{
  145. $(this).fadeOut(function(){
  146. $('.modelscont').fadeIn(300);
  147. $('#model').val('none');
  148. });
  149. }
  150. });
  151. $("#ip7").click(function () {
  152. if($('#model').val() == 'none'){
  153. $('#model').val('iPhone 7');
  154. $('#model').change();
  155. $(".modelscont").fadeOut(300);
  156. $(this).fadeIn(300);
  157. }else{
  158. $(this).fadeOut(function(){
  159. $('.modelscont').fadeIn(300);
  160. $('#model').val('none');
  161. });
  162. }
  163. });
  164. $("#ip6sp").click(function () {
  165. if($('#model').val() == 'none'){
  166. $('#model').val('iPhone 6s Plus');
  167. $('#model').change();
  168. $(".modelscont").fadeOut(300);
  169. $(this).fadeIn(300);
  170. }else{
  171. $(this).fadeOut(function(){
  172. $('.modelscont').fadeIn(300);
  173. $('#model').val('none');
  174. });
  175. }
  176. });
  177. $("#ip6s").click(function () {
  178. if($('#model').val() == 'none'){
  179. $('#model').val('iPhone 6s');
  180. $('#model').change();
  181. $(".modelscont").fadeOut(300);
  182. $(this).fadeIn(300);
  183. }else{
  184. $(this).fadeOut(function(){
  185. $('.modelscont').fadeIn(300);
  186. $('#model').val('none');
  187. });
  188. }
  189. });
  190. $("#ipse").click(function () {
  191. if($('#model').val() == 'none'){
  192. $('#model').val('iPhone SE');
  193. $('#model').change();
  194. $(".modelscont").fadeOut(300);
  195. $(this).fadeIn(300);
  196. }else{
  197. $(this).fadeOut(function(){
  198. $('.modelscont').fadeIn(300);
  199. $('#model').val('none');
  200. });
  201. }
  202. });
  203. $("#ip6p").click(function () {
  204. if($('#model').val() == 'none'){
  205. $('#model').val('iPhone 6 Plus');
  206. $('#model').change();
  207. $(".modelscont").fadeOut(300);
  208. $(this).fadeIn(300);
  209. }else{
  210. $(this).fadeOut(function(){
  211. $('.modelscont').fadeIn(300);
  212. $('#model').val('none');
  213. });
  214. }
  215. });
  216. $("#ip6").click(function () {
  217. if($('#model').val() == 'none'){
  218. $('#model').val('iPhone 6');
  219. $('#model').change();
  220. $(".modelscont").fadeOut(300);
  221. $(this).fadeIn(300);
  222. }else{
  223. $(this).fadeOut(function(){
  224. $('.modelscont').fadeIn(300);
  225. $('#model').val('none');
  226. });
  227. }
  228. });
  229.  
  230. });
  231. $(window).on('resize', function(){
  232. if ($(this).width() < 800) {
  233. $('#model').show();
  234. $('.modelscont').hide();
  235. }else if($('#model').val() == 'none'){
  236. $('#model').hide();
  237. $('.modelscont').show();
  238. }
  239. });
  240.  
  241. </script>
  242. <!-- Google Code for Add to Cart Conversion Page
  243. In your html page, add the snippet and call goog_report_conversion
  244. when someone clicks on the chosen link or button. -->
  245.  
  246. <style>
  247. #model{
  248. display:none;
  249. }
  250. .itemcont {
  251. display: flex;
  252. overflow: hidden;
  253. margin:15px;
  254. align-items: center;
  255. }
  256. .itemheader{
  257. margin-right: auto;
  258. }
  259. .modelscont{
  260. display:inline-block;
  261. background-color:white;
  262. border-radius:5px;
  263. padding:20px 20px 0px 20px;
  264. transition:background-color .25s, color .25s;
  265. user-select: none;
  266. -moz-user-select: none;
  267. -khtml-user-select: none;
  268. -webkit-user-select: none;
  269. -o-user-select: none;
  270. cursor:hand;
  271. margin-bottom:20px;
  272. border:solid #a5a5a5 1px;
  273. }
  274. #outputcont{
  275. display:none;
  276. margin:20px;
  277. }
  278. #output{
  279. font-size:3em;
  280. margin:20px;
  281. }
  282. .modelscont:hover {
  283. background-color:rgba(121, 169, 128, 1);
  284. }
  285. .modelscont:active{
  286. background-color:rgba(20, 20, 20, 0.73);
  287. color:#e2e2e2;
  288. }
  289. .models{
  290. height:100px;
  291. width:100px;
  292. }
  293. #output{
  294. margin-top:50px;
  295. }
  296. body {
  297. color: #333333;
  298. font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
  299. }
  300. .btn {
  301. -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
  302. -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
  303. box-shadow:inset 0px 1px 0px 0px #ffffff;
  304. background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1eeb66), color-stop(1, #0ac937) );
  305. background:-moz-linear-gradient( center top, #1eeb66 5%, #0ac937 100% );
  306. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1eeb66', endColorstr='#0ac937');
  307. background-color:#1eeb66;
  308. -webkit-border-top-left-radius:6px;
  309. -moz-border-radius-topleft:6px;
  310. border-top-left-radius:6px;
  311. -webkit-border-top-right-radius:6px;
  312. -moz-border-radius-topright:6px;
  313. border-top-right-radius:6px;
  314. -webkit-border-bottom-right-radius:6px;
  315. -moz-border-radius-bottomright:6px;
  316. border-bottom-right-radius:6px;
  317. -webkit-border-bottom-left-radius:6px;
  318. -moz-border-radius-bottomleft:6px;
  319. border-bottom-left-radius:6px;
  320. text-indent:0;
  321. border:1px solid #dcdcdc;
  322. display:inline-block;
  323. color:#424242;
  324. font-family:arial;
  325. font-size:15px;
  326. font-weight:bold;
  327. font-style:normal;
  328. height:50px;
  329. line-height:50px;
  330. text-decoration:none;
  331. text-align:center;
  332. text-shadow:1px 1px 0px #ffffff;
  333. transition:background .25s, background-color .25s, filter .25s;
  334. display:none;
  335. outline:none;
  336. }
  337. .btn:hover {
  338. background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0ac937), color-stop(1, #1eeb66) );
  339. background:-moz-linear-gradient( center top, #0ac937 5%, #1eeb66 100% );
  340. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0ac937', endColorstr='#1eeb66');
  341. background-color:#0ac937;
  342. }.btn:active {
  343. position:relative;
  344. top:1px;
  345. }
  346. #jumbotron {
  347. width:100%;
  348. margin:0 auto;
  349. text-align:center;
  350. padding:20px 0 20px 0;
  351. background-color:rgba(0, 0, 0, 0.06);
  352. border-radius:3px;
  353. }
  354. #5 {
  355. display:none;
  356. }
  357. #items{
  358. width:40%;
  359. margin:0 auto;
  360. }
  361.  
  362. select {
  363. border: 1px solid #ccc;
  364. border-radius: 3px;
  365. overflow: hidden;
  366. background: #fafafa ;
  367. display:inline-block;
  368. width:100px;
  369. }
  370.  
  371. select option {
  372. padding: 5px 8px;
  373. width: 130%;
  374. border: none;
  375. box-shadow: none;
  376. background: transparent;
  377. background-image: none;
  378. -webkit-appearance: none;
  379. }
  380.  
  381. select select:focus {
  382. outline: none;
  383. }
  384. #output{
  385. transition:all .25s;
  386. }
  387. #output p{
  388. margin:0 auto;
  389. width:60%;
  390. }
  391. .blurb{
  392. display:none;
  393. margin:15px;
  394. text-align:left;
  395. }
  396.  
  397. </style>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!