I'm fixing an old Android app, more exactly a Xibo player: you create a kind of presentation on the website and schedule it on your displays (in that case some Android devices).
I didn't got very good the mechanics yet (since some part of code are obfuscated), so I can't say who creates the files, but there are some html, javascript and raw files (pdf, jpeg, etc) and I know the app uses soap service.
Now the app is working pretty good, but if there is a pdf in the presentation (OK with jpg, bit I didn't try with other files) I see a string on the top of the view (WebView) and a string at the bottom, respectively "GetResourceRespond{resource=“ and "} ;".
I noticed those string at in the html file itself, but if I remove them, I can't see the file (I got a white view instead).
Those string are outside the <. html> tag, first one before <. doctype> and the second one after <. /html>, but I believe this is wrong.
Does somebody have an idea?
This is one html file:
GetResourceResponse{resource=<!doctype html>
<html lang="en">
<head>
<title>Xibo Open Source Digital Signage</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Copyright 2006-2017 Spring Signage Ltd. Part of the Xibo Open Source Digital Signage Solution. Released under the AGPLv3 or later. -->
<style type="text/css">
body {
margin: 0;
overflow: hidden;
font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
}
h1, h2, h3, h4, p {
margin-top: 0;
}
#iframe {
border: 0;
}
.cycle-slide p, p.cycle-slide {
margin-bottom:0;
}
</style>
<link href="fonts.css" rel="stylesheet" media="screen" />
</head>
<!--[if lt IE 7 ]><body class="ie6"><![endif]-->
<!--[if IE 7 ]><body class="ie7"><![endif]-->
<!--[if IE 8 ]><body class="ie8"><![endif]-->
<!--[if IE 9 ]><body class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><body><!--<![endif]-->
<div id="content"></div>
</body>
<script type="text/javascript">var options = {"type":"text","fx":"none","duration":15,"durationIsPerItem":false,"numItems":1,"takeItemsFrom":"start","itemsPerPage":0,"speed":0,"originalWidth":"1920.0000","originalHeight":"1080.0000","previewWidth":0,"previewHeight":0,"scaleOverride":0,"marqueeInlineSelector":".item, .item p"}; var items = ["<p style=\"text-align: center;\"><span style=\"font-size:168px;\"><strong><span style=\"font-family:arial,helvetica,sans-serif;\"><span style=\"color:#FFFFFF;\">Welcome to Xibo<\/span><\/span><\/strong><\/span><\/p>\n\n<p style=\"text-align: center;\"><span style=\"font-size:80px;\"><span style=\"font-family:arial,helvetica,sans-serif;\"><span style=\"color:#FFFFFF;\">Open Source Digital Signage<\/span><\/span><\/span><\/p>\n\n<p style=\"text-align: center;\"><span style=\"font-size:48px;\"><span style=\"color:#D3D3D3;\"><span style=\"font-family:arial,helvetica,sans-serif;\">This is the default layout - please feel free to change it whenever you like.<\/span><\/span><\/span><\/p>\n"];</script> <script type="text/javascript" src="jquery-1.11.1.min.js"></script> <script type="text/javascript" src="xibo-layout-scaler.js"></script> <script type="text/javascript" src="xibo-text-render.js"></script> <script type="text/javascript" src="xibo-image-render.js"></script> <script type="text/javascript">$(document).ready(function() { $("#content").xiboTextRender(options, items); $("body").xiboLayoutScaler(options); $("#content").find("img").xiboImageRender(options); }); </script> </html> ; }
Just a guess, "GetResourceRespond{resource=“ and "} ;" could result from JavaScript, which is allowed inside and after the <html></html>. If you don't see more of the JavaScript, it's likely obfuscated with the rest.
Related
using HTML5+CSS3+jQuery.
Since I am changing my CSS file frequently, I would like to force users' browsers always to fetch the CSS file and never use the cached version.
I found that I should write something like this:
<link rel="stylesheet" type="text/css" href="index.css?t=[...some unique id...]"/>
How can I automatically generate such unique Id? ( maybe current time?)
Thanks
You can use a server timestamp
<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />
A better Idea is to use a version of your css:
<link rel="stylesheet" type="text/css" href="style.css?version=<?php echo $CSS_VERSION; ?>" />
If your CSS is small and dynamic, your best solution would be to inject it inline in the <head> using <style> tags: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style
This way your styles will be updated on every page refresh and you will not need to wait for an additional http request.
For example, if your stylesheet looks like this:
/* This stuff hardly ever changes */
html {
background-color: white;
font-size: 16px;
}
/* This stuff changes all the time */
body {
background-image: url('todays-image.png');
}
And your html looks something like this:
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<h1>My Page</h1>
</body>
</html>
Change the css to look like this:
/* This stuff hardly ever changes */
html {
background-color: white;
font-size: 16px;
}
And the html to look like this:
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="index.css" />
<style>
/* This stuff changes all the time */
body {
background-image: url('todays-image.png');
}
</style>
</head>
<body>
<h1>My Page</h1>
</body>
</html>
If all of the contents of index.css change frequently, you can remove the file entirely and remove the link tag.
For your particular issue, you could inject the link via javascript using ticks. In this example the code would insert the css as the last styleset processed. I would recommend doing this on the back-end though.
<html>
<head>
<title>Test</title>
<script type="text/javascript">
var sourceName = 'test.css?v=' + ((new Date().getTime() * 10000) + 621355968000000000); // using ticks
var linkElement = document.createElement('link');
linkElement.setAttribute('type', 'text/css');
linkElement.setAttribute('rel', 'stylesheet');
linkElement.setAttribute('href', sourceName);
document.getElementsByTagName('head')[0].appendChild(linkElement);
</script>
</head>
<body>
<h1>Test</h1>
</body>
</html>
I tested it before publishing it and went through various methods. Many did not execute the href change. It only seemed to execute if it was injected into the DOM.
This may be a very basic question. I am new to LESS and would like to understand
what the dumpLineNumbers property of the less JavaScript object does. I've added
it to the html file but cannot see any difference in the browser output or in
the browser debugging tools. How does it work?
Here are the source files I'm using:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example Code</title>
<meta name="description" content="Example Code" />
<meta name="author" content="John Doe" />
<link rel="stylesheet/less" type="text/css" href="less/styles.less" />
<script type="text/javascript">less = { env: 'development', dumpLineNumbers: 'mediaQuery' };</script>
<script type="text/javascript" src="less-1.6.0.js"></script>
</head>
<body>
<h1>Less is Cool!</h1>
<p>Hello World!</p>
</body>
</html>
less/styles.css:
.mixin {
color: green;
}
p { .mixin; }
Even if I introduce an error in my CSS, for instance as follows where I removed a closing brace:
h1 {color:red; }
.mixin { color: green; // closing brace omitted on purpose to cause an error
p { .mixin; }
I still don't see any difference in the output when I remove the dumpLineNumbers property.
Thanks.
Firstly you will have to write mediaquery lowercase, than it will work in Less till at least version 1.7.5.
In the compiled CSS you will find lines such as:
#media -sass-debug-info{filename{font-family:file:///home/t.less}line{font-family:\0000315}
In your index.html you should use:
<script type="text/javascript">
less = {
env: "development",
dumpLineNumbers: 'mediaquery'
}
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.5/less.min.js" type="text/javascript"></script>
Alternatively you append #!dumpLineNumbers:mediaquery to the URL.
Notice that you can do the same when compiling server side by running the following command:
lessc --line-numbers=mediaquery index.less
Secondly you should find a tool which can read these #media -sass-debug-info lines. For firefox there was fireless, which seems to be a dead end now. Fireless required a patched version of LESS which is not available / supported any more.
Also see:
Less/Sass debugging in Chrome Dev Tools/Firebug
http://www.wimpyplayer.com/
Was searching in the docs, but did not find how to run in full screen. Anyone maybe knows it?
Or where is the new version of skin machine for that player? When I enter to Google, I only find some old which is for Rave, I assume its for old version of the player. But I saw one online editor for new version, which I can't find.
I would then just remove panel of buttons, and set the size of the player with setSize() function.
Skin machine found, from browser history. Google does not find it even when it looks like I use exact keywords http://www.wimpyplayer.com/skinmachine/
In the download ZIP there is a folder named "test" which includes this file:
"option-responsive-size-fullscreen.html"
... which you can use as a reference.
The trick is to use the "data-responsive" option to get wimpy to expand into the size of the page as defined in the CSS.
This is a cleaned-up version o the HTML needed to run in fullscreen:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Wimpy Player - Fullscreen</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!-- The following META tags are used to inform mobile-device browsers to present this page in full-screen mode.-->
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-title" content="Wimpy Player" />
<style type="text/css" media="screen">
/* Make page fill device window */
html, body {
width : 100%;
height : 100%;
margin:0;
padding:0;
overflow:hidden;
background-color:#484848;
}
/* For the Player Instance DIV */
.full {
left:0px;
top:0px;
width : 100%;
height : 100%;
}
</style>
<!-- Prevent entire page from "bouncing" -->
<script>document.addEventListener('touchmove',function(event){event.preventDefault();},false);</script>
<!-- Wimpy Engine -->
<!-- NOTE: Change WIMPY_INSTALLATION_FOLDER to target the wimpy.js file correctly. -->
<script src="WIMPY_INSTALLATION_FOLDER/wimpy.js"></script>
</head>
<body>
<!-- Set the DIV's class to "full" and set the "responsive" option
so the player automatically adjusts to fit snuggly within the view.
The responsive option also causes the player to adjust itself when
the orientation changes (e.g. from landscape to portrate) -->
<!-- NOTE: Change data-media to target media files or a playlist. -->
<div class="full" data-wimpyPlayer data-responsive data-media="song1.mp3|song2.mp3|song3.mp3"></div>
</body>
</html>
UPDATE:
This page on wimpyplayer.com that explains this as well.
On our company website http://exciga.com/Services.php# when one clicks on any of the services on the right hand side (ex: the IT Governance image), a Window Pops Up with information regarding IT Governance along with a Blue Menu on the left hand side. This Blue Menu can be seen in IE 10 but not in Chrome. Please help as I cant figure out what I have done wrong :-)
The 2nd issue I face is in the Service Lists. When I click on the list of Services (ex: the "+"sign near IT Governance), I get a list of services related to it. As you can see the fonts are different here. I am unable to place the same font as in the Service List header ("IT Governance"). If I try making a change, the font for the entire webpage changes. I want the font in the drop down list to be the same as the one in the Service List header ÏT Governance +" Hope I was clear for u guys.
Finally, what is the syntax to ensure that the size of an object does not change if I Zoom in and out in a browser.
The blue menu is actually present in Chrome. It's just that it's getting hidden by the pop up window's size: <div class="popupbox3_pm" id="popuprel3" style="display: block; margin-top: -355px; margin-left: -380px;">, which is its parent element. Because this <div> has position: fixed; and a set width/height, anything outside of its dimensions gets cut.
I'm not quite sure why the z-index: 999 on the blue menu is not setting it above the black space around it though. That might have to do with the placement of the element in the HTML. Also, it should have a higher z-element than the black fade box, which has z-index: 9999;.
First fix <head> section, you have included multiple jQuery libraries, if your plugins can work with latest jQuery (you should test it) then I suggest you to download jQuery 1.10.2 put it in your js folder and replace <script src="js/jquery-1.6.js" ></script> with <script src="js/jquery-1.10.2.min.js"></script>.
Now replace your <head> element with this new one and I wish you luck ;) P.S. I don't say that this will fix the problem you have.
<head>
<title>Exciga</title>
<meta charset="utf-8">
<meta name="description" content="Write short description of your site here.">
<meta name="keywords" content="write, site, keywords, here, like, this, comma, delimited">
<meta name="author" content="Name of the site author">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/style2.css"> <!-- Why style2.css ? Is this another style for entire site or you could merge style.css with style2.css ? -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/hover/style_common.css">
<link rel="stylesheet" href="css/hover/style2.css">
<link rel="stylesheet" href="css/jquery.akordeon.css">
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="popup/style.css">
<link rel="stylesheet" href="assets/application-d7d505356b55e600106ef945bd484e9f.css">
<script src="js/jquery-1.6.js"></script>
<!-- These scripts you can/should put just before the </body> tag, if after that some elements lose functionality then put that script again in the <head> section -->
<script src="js/atooltip.jquery.js"></script>
<script src="js/jquery.akordeon.js"></script>
<script src="js/cufon-yui.js"></script>
<script src="js/cufon-replace.js"></script>
<script src="js/Vegur_300.font.js"></script>
<script src="js/PT_Sans_700.font.js"></script>
<script src="js/PT_Sans_400.font.js"></script>
<script src="popup/custom.js"></script>
<script src="assets/application-aa8aaa30c70f4a42013dec916e9b29b0.js"></script>
<script>
$(function() {
$('#buttons').akordeon();
$('#button-less').akordeon({ buttons: false, toggle: true, itemsOrder: [0, 1,2,3,4,5,6,7] });
});
</script>
<!-- End of scripts -->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="all">
<![endif]-->
<!--[if lt IE 7]>
<div style="clear: both; text-align:center; position: relative;">
<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
</a>
</div>
<![endif]-->
</head>
Update: About font-family for the Service Lists open style.css and insert code below then change font family and size in accordance with your desires.
.responsive,
.responsive-half {
font-family: Verdana !important;
font-size: 16px !important;
}
Today, I found this link. So I installed the Google Chrome Frame plugin on IE 8 on Windows XP and enabled it.
http://davidwalsh.name/chrome-frame
I'm trying to get a multiple file upload working in Internet Explorer 8 using the HTML 5 API. I placed the meta tag in my page, but it's not supporting drag and drop. It didn't work.
It's my understanding that this plugin allows IE to use Google Chrome's HTML 5 JavaScript engine. Is this HTML 5 File API related to this JavaScript engine, or are they completely different things?
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Plupload Example</title>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/extjs-4.1.1-gpl/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/extjs-4.1.1-gpl/examples/shared/example.css" />
<style>
#dragload
{
width: 300px;
height: 300px;
background:#BBBBBB;
padding: 30px;
text-align: center;
margin: 0 0 20px 0;
}
</style>
</head>
<body>
<h1>Plupload Example</h1>
<p>Simple Upload Button</p>
<p>The js is not minified so it is readable. See upload.js.</p>
<script type="text/javascript" src="http://extjs.cachefly.net/extjs-4.1.1-gpl/bootstrap.js"></script>
<div id="dragload"><h1>Drag files here, or use the button below</h1></div>
<script type="text/javascript" src="../../ux/upload/plupload/js/plupload.js"></script>
<script type="text/javascript" src="../../ux/upload/plupload/js/plupload.html4.js"></script>
<script type="text/javascript" src="../../ux/upload/plupload/js/plupload.html5.js"></script>
<script type="text/javascript" src="../../ux/upload/plupload/js/plupload.flash.js"></script>
<script type="text/javascript" src="../../ux/upload/plupload/js/plupload.silverlight.js"></script>
<script type="text/javascript" src="upload.js"></script>
</body>
</html>