new config option to enable/disable responsive design
[mkws-moved-to-github.git] / experiments / spclient / index-mobile.html
1 <?xml version="1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4   <head>
5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6     <meta name="copyright" content="(c) 1999-2013 IndexData ApS, http://indexdata.com" />
7     <title>MKWS demo client</title>
8     <link rel="stylesheet" href="http://mkws.indexdata.com/mkwsStyle.css" />
9     <script type="text/javascript">
10         var mkws_config = { 
11                 lang: "da",
12                 debug: 1,
13                 use_service_proxy: true,
14                 switch_menu: false, 
15                 lang_menu: true, 
16                 lang_display: ["da", "en"], 
17                 termlist_menu: true, 
18                 sort_default: "relevance",
19                 query_width: 50,
20                 responsive_design: true,
21                 perpage_default: 20
22          }; 
23     </script>
24     <script type="text/javascript" src="http://mkws.indexdata.com/mkws-complete.js"></script>
25     <script type="text/javascript">
26         var timeout;
27
28         if (mkws_config.responsive_design) {
29             $(window).resize( function(e) { 
30                 if (timeout)
31                     clearTimeout(timeout);
32                 timeout = setTimeout(function () { mobile_resize() }, 100);
33             });
34             $(document).ready(function() { mobile_resize() });
35         }
36
37         function mobile_resize () {
38            debug("resize width: " + $(window).height() + ", width: " + $(window).width()); 
39            var list = ["mkwsSwitch"];
40            var obj;
41            if ($(window).width() <= 600) {
42                 for(var i = 0; i < list.length; i++) {
43                     $("#" + list[i]).hide();
44                 }
45                 
46                 $("#termlist").parent().hide(); 
47                 obj = $("#termlist").parent().html();
48                 $("#mkwsTermlist").html(obj);
49            } else {
50                 for(var i = 0; i < list.length; i++) {
51                     $("#" + list[i]).show();
52                 }
53                 $("#termlist").parent().show(); 
54                 $("#mkwsTermlist").html("");
55            }
56         };
57     </script>
58   </head>
59   <body>
60     <!-- These six mkws <div>s are provided by MKWS -->
61     <div id="mkwsSwitch"></div>
62     <div id="mkwsLang"></div>
63     <div id="mkwsSearch"></div>
64     <div id="mkwsRecords"></div>
65     <div id="mkwsTargets"></div>
66
67     <div id="mkwsTermlist"></div>
68
69     <div id="footer">
70       <div id="mkwsStat"></div>
71       <span>Powered by MKWS &copy; 2013 <a href="http://www.indexdata.com">Index Data</a></span> 
72     </div>
73   </body>
74 </html>