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.
Related
I have written a script which should change a Link by clicking on an element. But it doesn't work. Can anyone help me out?
<!DOCTYPE html>
<html>
<h2 id="http://www.google.com" onclick="changeLink(google);" name="google">Google</h2 >
<h2 id="http://www.yahoo.com" onclick="changeLink(yahoo);" name="yahoo">Yahoo</h2 >
<h2 id="http://www.duckduckgo.com" onclick="changeLink(duckduckgo);" name="duckduckgo">DuckDuckGo</h2 >
LINK //should change the href after click on google, yahoo etc.
<script>
function changeLink(x){
document.getElementById('link').href=document.getElementsByName(x)[0].id;
}
</script>
</body>
</html>
Instead of using the string represents the name as the function argument, you're currently using undefined variables.
You have the change your HTML as such:
<h2 id="http://www.google.com" onclick="changeLink('google');" name="google">Google</h2 >
<h2 id="http://www.yahoo.com" onclick="changeLink('yahoo');" name="yahoo">Yahoo</h2 >
<h2 id="http://www.duckduckgo.com" onclick="changeLink('duckduckgo');" name="duckduckgo">DuckDuckGo</h2 >
(Mind the single quotes)
This is the most efficient way to achieve it and best performance wise by declaring a static JSON object to initialize the values.
Here is the JSFiddle Demo
//CODE
<!DOCTYPE html>
<html>
<head>
<style>
h2:hover{
color: blue;
cursor: pointer;
}
</style>
<script>
//JSON OBJECT LOADED ON DOC INIT
var sites = {
"google": "http://www.google.com",
"yahoo": "http://www.yahoo.com",
"duck": "http://www.duckduckgo.com"
};
function changeLink(site){
document.getElementById("target").href = site;
document.getElementById("target").innerHTML = site;
}
</script>
</head>
<body>
<h2 onclick="changeLink(sites.google);">Google</h2>
<h2 onclick="changeLink(sites.yahoo);">Yahoo</h2>
<h2 onclick="changeLink(sites.duck);">DuckDuckGo</h2>
http://www.example.com
</body>
</html>
I am wondering if there is any way that I can make ZeroClipBoard working on my popup page's buttons?I have the following code so far which will bring a popup page, the popup page is called from a php file include 2 buttons.
code for the first page:
<html>
<head>
<title>test</title>
<script type = "text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.js"></script>
</head>
<body>
<div id="myDiv">This is the content to get copied to the text area and then to clipboard</div>
<button id="testButton" data-clipboard-target="myDiv"><b>Copy To Clipboard</b></button>
<!--<script type="text/javascript">
var clicks = 0;
</script>-->
<button onclick="launchPopUp('', '', 700, 'embedCode.php');">test button</button>
<!--<script>
function test123(){
if(clicks>=1){
alert(clicks);
var client = new ZeroClipboard( document.getElementById('copyAll') );
}
}
</script>-->
</body>
<script>
var client1 = new ZeroClipboard( document.getElementById('testButton') );
</script>
I have tried make the "copy to clipboard" for "testButton" button working on my first page by using ZeroClipboard.
my code for second page which will be the content for popup page:
<?php
session_start();
$userName = "asdfbsadf";//$_SESSION['user_name'];
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type = "text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.js"></script>
</head>
<body>
<div id="copiedContent" style="border: 2px solid; margin: 30px 20px 10px 20px; padding: 4px 3px 5px 3px;">
Here will be the content and <?php echo $userName?> that be copied to the clipboard
</div>
<button id="copyAll" data-clipboard-target="copiedContent" style="float: right; margin-right: 20px;">Copy All</button>
<button style="float: right;" onclick="whatIsThis()">What Is This?</button>
<script>
function whatIsThis(){
alert("This is...");
}
</script>
</body>
<!--<script language="JavaScript">
var client = new ZeroClipboard( document.getElementById('copyAll') );
</script>-->
</html>
the "launchPopup()" function is called from an open source which called popUp2.0.js, if that js file is needed, I will post that, but that one is a 170 lines code.
The comment out codes above are the ones that I tried. I have tried add "var client = new ZeroClipboard( document.getElementById('copyAll') );" for my popup page's copyAll button to the second page, it didn't work; I tried to add that to first page, the button didn't work also.
I found that if the code "var client = new ZeroClipboard( document.getElementById('copyAll') );" is called after the button, that will work; but I have tried everything that I know to put it after the button, and when I run the page and click the test button to bring up the popup page, I found the code "var client = new ZeroClipboard( document.getElementById('copyAll') );" is always called before the button when I inspect the element.
I'm wondering if I have a function called test123(), is there any way that I can run this function after the button is clicked and the whole popup page is showed, so I can make the Javascript run after the popup page showed, and make the copyAll button working?
Or did I think that in a wrong way and my code is too bad? and if there have any way that can make it work I will appreciate as it's first time I use ZeroClipboard.
Have you tried calling the second function in the onclick event?
<button onclick="launchPopUp('', '', 700, 'embedCode.php'); test123();">test button</button>
In the following code. After save button clicked it is asking for download the output image generated from Html2canvas. How to chage this code so that instaed of asking to download it will generate the image on the fly with 'lightbox' feature.
I tried as :
<html>
<head>
<meta charset="utf-8"/>
<title>test2</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script type="text/javascript" src ="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="html2canvas.js?rev032"></script>
<script type="text/javascript">
$(window).load(function() {
$('#load').click(function() {
html2canvas($('#testdiv'), {
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href = img;
}
});
});
});
</script>
</head>
<body>
<div id="testdiv">
<h1>Testing</h1>
<h4>One column:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<br/>
</div>
<input type="button" value="Save" id="load"/>
</body>
</html>
Instead of redirecting the visitor to the image like you do here:
window.location.href = img;
You can add an invisible (display: none) image to the page:
<img src="" id="image" style="display: none; position: absolute; top: 30%; left: 30%; z-index: 1000;" />
And show it with your canvas image data like so:
$('#image').attr('src', img).fadeIn(200);
Now this won't create a very interesting lightbox without some additional work, but for that I would suggest you use a plugin instead. Something like Slimbox or Fancybox.
You can try
$("#containerID").empty().append(canvas); // containerID is the container element for your rendered image
to append image on your page. And in the same way try giving canvas or img (in your case) as url to your lightbox code.
I have a web page that has JQuery tabs with iFrames loaded in the 2nd through 4th tab. My problem is in a button I've added to the first tab. I want that button, when pressed, to change to the next tab.
EDIT 1: Here is a fiddler that shows my problem. http://jsfiddle.net/lochalan/AXa9J/
Webpage:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Student Application</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script src="/user/tabs.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html {
font-size:10px;
}
.iframetab {
width:100%;
height:auto;
border:0px;
margin:0px;
position:relative;
top:-13px;
}
.ui-tabs-panel {
padding:5px !important;
}
.openout {
float:right;
position:relative;
top:-28px;
left:-5px;
}
</style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr><td>
<img src="img/logo960x100moodle.png" width="960" height="92" alt=""><br>
</td></tr>
</table>
<div id="tabs">
<ul>
<li>Instructions</li>
<li><a class="tabref" href="#tabs-2" rel="/user/application-tab.php">Student Information</a></li>
<li><a class="tabref" href="#tabs-3" rel="/user/emergency-tab.php">Emergency Contact</a></li>
<li><a class="tabref" href="#tabs-4" rel="/user/healthform-tab.php">Health Form</a></li>
</ul>
<div id="tabs-1" class="tabMain">
<h2>Welcome to QSI Shekou!</h2>
<p>This application is designed to give the school all the information needed to make an informed decision as to whether QSI is the best school for your child. We believe all children can be successful and we are proud that you have choosen QSI Shekou as that place. In the next few minutes, you will be presented with 3 seperate application forms. The first application gathers the needed biographical information about your child. The second form provides the school with emergency contact information and instructions in the event the school needs to contact someone on your child's behalf. The third form is our health form. This provides the school with information about your child's health in order to help us make QSI Shekou a fun and safe place to learn and grow.</p>
<p><strong>Remember to give the following documents to the admissions department:</strong></p>
<ul>
<li>Immunization records (copy)</li>
<li>Health / Emergency Form (Found on our Website)</li>
<li>Previous School Records (copy)</li>
<li>Student's Passport (copy)</li>
<li>Student's Visa (copy)</li>
<li>Mother's Passport (copy)</li>
<li>Mother's Visa (copy)</li>
<li>Father's Passport (copy)</li>
<li>Father's Visa (copy)</li>
<li>3 Student Passport Photos</li>
</ul>
<button class="nexttab" href="#"><strong>Let's get started!</strong></button>
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
<div id="tabs-4">
</div>
</div>
</body>
</html>
Javascript / JQueryUI:
$(document).ready(function() {
var $tabs = $('#tabs').tabs();
$(".nexttab").click(function() {
var selected = $("#tabs").tabs("option", "selected");
$("#tabs").tabs("option", "selected", selected + 1);
});
//get selected tab
function getSelectedTabIndex() {
return $tabs.tabs('option', 'selected');
}
//get tab contents
beginTab = $("#tabs ul li:eq(" + getSelectedTabIndex() + ")").find("a");
loadTabFrame($(beginTab).attr("href"),$(beginTab).attr("rel"));
$("a.tabref").click(function() {
loadTabFrame($(this).attr("href"),$(this).attr("rel"));
});
//tab switching function
function loadTabFrame(tab, url) {
if ($(tab).find("iframe").length == 0) {
var html = [];
html.push('<div class="tabIframeWrapper">');
html.push('<div class="openout"><img src="data/world.png" border="0" alt="Open" title="Remove iFrame" /></div><iframe class="iframetab" src="' + url + '">Load Failed?</iframe>');
html.push('</div>');
$(tab).append(html.join(""));
$(tab).find("iframe").height($(window).height()-80);
}
return false;
}
});
Why won't my button change the tab?
Use active option to select current or change tab
var selected = $("#tabs").tabs("option", "active");
$("#tabs").tabs("option", "active", selected + 1);
There's a few things wrong here, more than I'm willing to cover on a forum unfortunately.
If you're going to use jQueryUI then I suggest you go use ThemeRoller. Do a UI theme and use the CSS it generates for you. The classes are named very intuitively and it will help you identify what your functions are working on. Use Firefox with Firebug plugin so you can debug. You're on the right track but you're still cloudy on some core concepts.
jQuery Tabs API
jQueryUI ThemeRoller
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.