I'm modifying a websense block page to include a few functions based on a variable: $*WS_BLOCKREASON*$. I know the potential output of this variable, and I want to have a specific function for.
The issue is that the page is not passing even the default case to the '<'div'>' contents. Essentially I need the contents of the <div id="helpDiv"> to be a whole set of text including the button. Script below:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Access to this site is blocked</title>
<link rel="stylesheet" href="/en/Custom/master.css" type="text/css">
<script type="text/javascript" language="javascript" src="/en/Default/master.js"></script>
<script type="text/javascript" language="javascript" src="/en/Default/base64.js"></script>
<script type="text/javascript" language="javascript" src="/en/Custom/security.js"></script>
<style type="text/css">
.style1
{
width: 130px;
height: 70px;
}
</style>
</head>
<body>
<!--[if lt IE 7]> <div style="width: 725px; height: 381px;"> <![endif] -->
<img alt="BHI" class="style1"
src="/en/Custom/other.gif" /><br />
<br />
<br />
<div style="border: 1px solid #285EA6;width: 99.5%; max-width: 915px; overflow: hidden; margin-left: 1px; background-color: #EEF2F7;">
<iframe src="$*WS_BLOCKMESSAGE_PAGE*$*WS_SESSIONID*$" title="BHI_BLOCK"
name="ws_block" frameborder="0" scrolling="no"
style="width:100%; height: 200px; margin-bottom: 0px;">
</iframe>
<hr />
<!-- onload=function() possible fix -->
<script type="text/javascript">
var blockReason=$*WS_BLOCKREASON*$;
switch (blockReason)
{
case 'This Websense category is filtered: <b>Uncategorized</b>.':
document.getElementById('helpDiv').innerHTML='<p style="margin-left: 10px">Help: <INPUT TYPE="button" VALUE="Submit UNCATEGORIZED website to Websense" onClick="parent.location=\'mailto:suggest#websense.com?subject=Uncategorized Website&body=Please review and correctly categorize the website that is listed below:%0A%0A' + $*WS_URL*$ + '%0A%0AThank you.\'"></p>\
<hr />\
<p style="margin-left: 64px">Clicking on the above button will open your mail client to send an e-mail to Websense for recategorization of the above site.</p>\
<p style="margin-left: 64px">You will receive a confirmation e-mail and a case number from Websense indicating your request is proccessing.</p>\
<p style="margin-left: 64px">Please note the response time for your request will vary. Allow to three to four (3-4) hours for updates to take effect once approved.</p>\
<p style="margin-left: 64px">If you have any questions, please contact SOLV at this link.</p>';
break;
case 'This Websense category is filtered: <b>Parked Domain</b>.':
document.getElementById('helpDiv').innerHTML='<p>Parked domain</p>';
break;
default:
document.getElementById('helpDiv').innerHTML='<p>No Block message help.</p>';
}
</script>
<div frameborder="0" scrolling="no" style="width:100%; height: auto; margin-bottom: 0px;" id="helpDiv">
</div>
<iframe src="$*WS_BLOCKOPTION_PAGE*$*WS_SESSIONID*$" name="ws_blockoption"
frameborder="0" scrolling="no" style="width:100%; height: auto;">
<p>To enable further options, view this page with a browser that supports iframes</p>
padding: 2px 0px;">
<div style="clear: both; overflow: hidden; height:1px;"></div>
</div>
</div>
<!--[if lt IE 7]> </div> <![endif]-->
<div id="light" class="white_content"></div>
<div id="fade" class="black_overlay"></div>
</body>
</html>
Try this instead. You have some incorrect escaping going on...
The part in particular is around your onClick in the first line of the case
case 'This Websense category is filtered: <b>Uncategorized</b>.':
document.getElementById('helpDiv').innerHTML='<p style="margin-left: 10px">Help: <INPUT TYPE="button" VALUE="Submit UNCATEGORIZED website to Websense" onClick="parent.location=\'mailto:suggest#websense.com?subject=Uncategorized Website&body=Please review and correctly categorize the website that is listed below:%0A%0A' + $*WS_URL*$ + '%0A%0AThank you.\'"></p>\
<hr />\
<p style="margin-left: 64px">Clicking on the above button will open your mail client to send an e-mail to Websense for recategorization of the above site.</p>\
<p style="margin-left: 64px">You will receive a confirmation e-mail and a case number from Websense indicating your request is proccessing.</p>\
<p style="margin-left: 64px">Please note the response time for your request will vary. Allow to three to four (3-4) hours for updates to take effect once approved.</p>\
<p style="margin-left: 64px">If you have any questions, please contact SOLV at this link.</p>';
break;
UPDATE:
Having just had a play in jsFiddle I have come to the conclusion that your reference to helpDiv is invalid..
If you replace all of these with some alerts your switch will reach the default. It's dying because there is something wrong with your getElementById. Maybe the element doesn't have the ID helpDiv?
Here is a well and truly stripped down version
http://jsfiddle.net/5wvC3/
Here is another fiddle - and update on the last one, showing that the code mostly works. You deff have an issue with your HTML
http://jsfiddle.net/5wvC3/1/
You've escaped improperly on this line:
document.getElementById('helpDiv').innerHTML='<p style="margin-left: 10px">Help: <INPUT TYPE="button" VALUE="Submit UNCATEGORIZED website to Websense" onClick="parent.location="'\\"mailto:suggest#websense.com?subject=Uncategorized Website&body=Please review and correctly categorize the website that is listed below:%0A%0A$*WS_URL*$%0A%0AThank you."'\\"></p>
It should be (after onClick):
"parent.location=\'mailto:suggest#websense.com?subject=Uncategorized Website&body=Please review and correctly categorize the website that is listed below:%0A%0A' + $*WS_URL*$ + '%0A%0AThank you.\'"></p>\
A fiddle with the escapes corrected: http://jsfiddle.net/3UxCc/
It works.
Edit:
It looks like your $*WS variables are markers. In this case you're assigning blockReason to something, but unless your WebSense variable contains quotes (it doesn't btw), then you're assignment looks something like:
var blockReason = other;
Since there are no quotes around it, it believes that other is a variable not a string literal. You need to enclose this in quotes like:
var blockReason = '$*WS_BLOCKREASON*$';
This will establish it as a string literal that the switch will be able to use. Anything else will be a bad variable that will throw an error.
Related
I have created a simple addition program using HTML, CSS and Javascript.
HTML code is as follows:
<head>
<title>Input Output</title>
<link rel="stylesheet" type="text/css" href="io.css">
<body>
<h1>Sum App</h1>
<div class="container">
<script type="text/javascript" src="io.js"></script>
First Number <input type="text" id="numOne">
Second Number <input type="text" id="numTwo">
<button type="button" class="btn" onclick="submitBut()">Submit</button>
<p id="result"></p>
<div class="screen" id="screen1"></div>
</div >
The Javascript code is as follows:
function submitBut(){
var numOne= document.getElementById("numOne").value;
var numTwo= document.getElementById("numTwo").value;
var sum=parseInt(numOne)+parseInt(numTwo);
var element= document.createElement("p");
document.getElementById("result").innerHTML = sum;
}
I want to now style the result which as per the code seats in between paragraph tags with id "result".
What are the ways using which this is possible?
I tried using a standard style sheet format as below:
#result {
font-size: 45-px;
background-color= Yellow;
}
However, it is not working at all. Kindly let me know possible fixes.
Regards,
The problem is with the CSS you have written for this code. It's Invalid.
Change it like the following and it will work fine:
#result {
font-size: 45px;
background-color: yellow;
}
I have written a simple html file to display the page provided by a hyper link under the table in the same page.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function(){
$('.link').on("click", function(e) {
e.preventDefault();
var href = $(this).attr('href');
$("#content").html('<object data='+href+' />');
return false;
});
});
</script>
<style>
object {
width: 1570px;
height: 1000px;
border: 1px solid green;
}
</style>
</head>
<body bgcolor="#EBF5FB">
<h1 align="center" >SLA Monitor Reports </h1>
<div align="center">
<table cellpadding="25px" border=1>
<tr>
<td><a class="link" href="https://www.wikipedia.org/"><img src="\\TSHomeServer\TSHome$\231456\Downloads\1ITD.png" alt="SRs Proposed Due Date" style="width:200px"></a></td>
<td><a class="link" href="https://bwp.wdf.nova.corp/irj/servlet/prt/portal/prtroot/pcd!3aportal_content!2fcom.nova.pct!2fplatform_add_ons!2fcom.sap.ip.bi!2fiViews!2fcom.nova.ip.bi.bex?BOOKMARK=CU4A95OJ17A355B2112ML30G6"><img src="\\TSHomeServer\TSHome$\231456\Downloads\1Google.png" alt="Ticket Aging" style="width:200px"></a></td>
</tr>
</table>
<br><br>
</div>
<div id="content">
</div>
</body>
</html>
The first hyper link which is targeted to wikipedia.org is properly displayed in a div under the table.
But when i try to access the second link which is an intranet site pointed to a bw report hosted in a intranet server,i get a access-control-allow-origin error and the page keeps on trying to validate against the bw server.
But if i try to open the same intranet link in a new browser window..it validates and i can access the BW report.
Can you please let me know how to access the same BW report in the same page using div tag and handle this Access-Control_Allow_Origin issue.
I m having following code to convert image using html2canvas. It is working fine but the select tag icon (down arrow) is not coming when capture the image
<!DOCTYPE html>
<html>
<head>
<title>html2canvas</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<style>
button{
display:block;
height:20px;
margin-top:10px;
margin-bottom:10px;
}
.icon-diamond:before {
content: "\e943";
}
</style>
</head>
<body>
<div id="target">
<div style="position:relative;" class="noteclasscontainer" >
<span style="font-size: 60px;" class="glyphicon">
<span style="color:white;font-size: 21px; position: absolute; top: 16px;left:10px;">dd</span>
</span>
</div>
<div style="position:relative;" class="noteclasscontainer">
<select>
<option>1</option>
<option>1</option>
</select>
</div>
</div>
<button onclick="takeScreenShot()">to image</button>
<script>
window.takeScreenShot = function() {
html2canvas(document.getElementById("target"), {
onrendered: function (canvas) {
document.body.appendChild(canvas);
},
width:320,
height:220
});
}
</script>
</body>
</html>
Image is capturing correctly but only the select icon is not coming properly.how to fix this issue ?
This is part of browsers default CSS, everything is not accessible to html2canvas, and it should not be (possible leak of privacy info on some OS).
Maybe this exact one could be tweaked for chrome, since chrome does expose some of its shadow selectors, but I don't even know if it is in the list, and anyway, since non-standards these selectors could change at any time in the future, and here is how it looks like on my FF :
So the best for you, is to create the dropdown entirely from scratch. This way all UAs will show the same, and html2canvas will be able to "snapshot" it.
I tried to show the div tag to another frame set while checkbox click.
My index.html file is
<html>
<head>
<title></title>
</head>
<frameset cols="25%,75%">
<frame src="left-panel.html"></frame>
<frame src="right-panel.html"></frame>
</framset>
</html>
left-panel.html
<html>
<body>
<script src="min.js"></script>
<script src="file.js"></script>
<input type="checkbox" value = "1" class="theClass">Click<h1>
<input type="checkbox" value = "2" class="theClass">Click<h1>
<input type="checkbox" value = "3" class="theClass">Click<h1>
</body>
</html>
right-panel.html
<html>
<body>
<script src="min.js"></script>
<script src="file.js"></script>
<div id="footer" style="width:98%; background:blue; height:10%; position:absolute; bottom:0; visibility:hidden;"></div>
</body>
</html>
Then my js file is
$('.theClass').change(function(){
($('.theClass:checked').map(function(){ myfunction(this.value); }).get())
});
function myfunction(ad)
{
document.getElementById("footer").innerHTML = ad;
}
When click the checkbox I want to display these checkbox value into the footer div in another html
First define the names of the frames:
<frameset cols="25%,75%">
<frame name="left" src="left-panel.html"></frame>
<frame name="right" src="right-panel.html"></frame>
</framset>
And then in the javascript:
function myfunction(ad) {
top.left.document.getElementById("footer").innerHTML = ad;
}
You can access only to parent:
function myfunction(ad) {
parent.left.document.getElementById("footer").innerHTML = ad;
}
First, the sub-frames should have the same origin(same domain) in order to manipulate them.
Then, get the parent frame by parent.
Get the sub-frame by (according to http://javascript.info/tutorial/frames-and-iframes):
window.frames[0] - access by number
window.frames['iframeName'] - access by iframe name
So the answer is
$().ready(function(){
$("#cli").hover(function () {
parent.frames[1].$("#footer").css("visibility","visible");
},
function () {
parent.frames[1].$("#footer").css("visibility","hidden");
});
});
edit: sorry to find that the question is modified.
Each frame is a diferent web, with his own copys of the JS variables, for security reasons one page cant modify other page using JS. For example, when you call document variable from leftpanel, is diferent than the document variable called from rightpanel, and diferent tha the document variable called from index.html
Remember JS is executed in client side.
Maybe you must to use two divs:
your.css
#wrapper {
}
#left {
float: left;
width: 75%;
background-color: #CCF;
}
#right {
float: right;
width: 25%;
background-color: #FFA;
}
#cleared {
clear: both;
}
index.html
<html>
<head>
<title></title>
<link rel="stylesheet" href="your.css">
<script src="min.js"></script>
<script src="file.js"></script>
</head>
<body>
<div id="wrapper">
<div id="left">
<input type="checkbox" value = "1" class="theClass">Click<h1>
<input type="checkbox" value = "2" class="theClass">Click<h1>
<input type="checkbox" value = "3" class="theClass">Click<h1>
</div>
<div id="right">
<div id="footer" style="width:98%; background:blue; height:10%; position:absolute; bottom:0; visibility:hidden;"></div>
</div>
<div id="cleared"></div>
</div>
</body>
</html>
If you wants to use frames, maybe you must use PHP with ajax to make the changes in the server side
I have tried to create a simple JavaScript which was supposed to switch images when links are clicked. This is the code of the whole site (It's not much, but it was only meant to be a test):
<html>
<head>
<title>Slideshow</title>
<style type="text/css">
#wrapper {
width: 800px;
height: 250px;
margin: 75px auto auto auto;
}
</style>
<script type="text/javascript">
function changeImg(x) {
document.getElementById(presentationImg).src='x';
}
</script>
</head>
<body>
<div id="wrapper">
<div id="mainnav">
<ul>
<li>Design</li>
<li>Realisation</li>
<li>Deployment</li>
</ul>
</div>
<div id="presentation">
<img id="presentationImg" src="design.jpg" />
</div>
</div>
</body>
I was pretty sure it would work, but it doesn't, and I have no idea why... does anyone know why, and what the solution is?
Get rid of the quotes around x in your function, and quote the element ID instead:
document.getElementById("presentationImg").src = x;
You will also need to quote the string you pass in to your function:
<a href="#" onclick="changeImg('design.jpg')">
The way you have it currently, presentationImg will be undefined, as you haven't declared a variable of that name. To make it work the way you had it originally you could do this:
var presentationImg = "presentationImg";
document.getElementById(presentationImg).src = x;