I have written some javascript under a text item html and it is working perfectly when in eclipse birt designer. When I deploy the report to Birt viewer in apache, it does not seem to work. I am not sure if the click is not working or the javascript behind it is not working but something is wrong the I am not getting the desired result on clicking the text item
Basically, I am hiding few charts when I click on the text item (I wrote an html script to make it a button and then called a javascript function to hide a chart). It is working in birt designer but not working in birt viewer on apache
below is the button html script
<button type="button"
style="width: 120px; height: 30px; color: #5a698b; font: bold 12px Arial;
padding-top: 1px; padding-bottom: 1px; background: #ddddff; text-align: center;"
onclick=" showhidetab(1,'Population','2.5in')";">Overview
</button>
here is the javascript function that the button is calling
<script>
function showhidetab(showflag,bookmark, heightval)
{
if (showflag == 1)
{
document.getElementById(bookmark).style.visibility="visible";
document.getElementById(bookmark).style.display = "block"
document.getElementById(bookmark).style.height= heightval;
}
else
{
document.getElementById(bookmark).style.visibility="hidden";
document.getElementById(bookmark).setAttribute("style","display:inline;height:1px");
document.getElementById(bookmark).style.height='1px';
}
}
</script>
Can someone please suggest what could be wrong here
Regards
Syed
Some quick fixes:
Your line document.getElementById(bookmark).style.display = "block" is missing a semicolon.
I think the id should be js3_Population... check in your browser.
The brackets closing the else statement is missing a semicolon.
When I made those changes it worked for me. Your code is only resizing the item and not hiding it since the state of the bookmarked object is already visible. You might consider using style.display="none" to avoid holding space for hidden items.
Related
I'm facing difficulty to solve an issue. I have made a custom pagination in my view page, but the pagination items get line breaks like following picture:
I tried to avoid that by adding <div>, but couldn't get it solved.
I used the following line just after the end of my </table> tag.
{{ $managementReport->render()}}
There's nothing wrong with your pagination code; it's likely just outputting an unordered list, in which every item is rendered in it's own line by default. You can easily override this behaviour with plain CSS using the following rule (I'm assuming you've added the .pagination class to your ul):
.pagination {
padding-left: 0;
list-style: none;
}
.pagination > li {
display: inline-block;
}
I created a classic report in oracle apex 5.0 which has a few product info (colour, szie, price etc.) as well as a Barcode column. To display the barcode column in a specific barcode font, I uploaded a piece of jquery code as plugin and managed to get the barcode displayed correctly like below
But when it comes to printing, the print function that comes with APEX doesn't work, because it only prints out the original barcode value (6208217iFiEiGi1i) which is returned by the sql. As a workaround, I created a button that calls a javascript which does window.print(), and used some CSS to get rid of the header and the sidebar of the web page, and managed to only print the main content of the web page which is the report.
The way I did is, I have the below CSS code in the html header of my page
<style media="print" type="text/css">
#media print
{
body * { visibility: hidden; }
#print-content * { visibility: visible; }
#print-content { position: relative; top: 0; left: 0; width:100%; padding:0; }
}
</style>
and the below in the region header and footer section I want to print
<div id="print-content" >
</div>
However, this approach left me with another issue. Sometimes the row gets cut off at the end of the page, that makes it look like below
Can anyone give me some suggestions on how I get around with this issue?
Thanks a lot
Try using this CSS - I'm not sure what you should apply it to, perhaps table rows in general:
#media print {
tr {page-break-inside: avoid;}
}
Possibly a more specific selector would be preferable like div#myreport tr.
Hope my Question is enough clear. I own a website.
http://khchan.byethost18.com
My problem is in the tab "Calendar", it run properly in chrome, ie. but not in fixfox.
my design is that when I hover the calendar tab. the page of calendar will show.
but in firefox, when I do that, it don't show properly. developer tool show $bookblock.bookblock is not a function. If I reload the frame, such error message will not show.
If I directly load "http://khchan.byethost18.com/cal.php
It can show properly and such error message don't appear.
so I guess may be something is not load properly. I already try add $(top.document,document).ready({function(){}); or replace the jquery library to the head or body. the problem still exist.
since the coding is very long. I only write the iframe tag.Please try to use developer tool to view my code.
I tried document.getElementById('CalF').contentWindow.location.reload();
if I already hover the calendar tab, the tab can be reload properly.
but if not, the developer tool display the same error message.
so, I think the major key to the problem is that the jquery tab affect something so that the tab "CalF" can't work properly.
.boxoff{
display: none;
}
<article class='boxoff'> //this article will be hidden until I delete the class.
<iframe id=CalF src="cal.php" style="top: 0;"></iframe>
</article>
Thanks.
iframeLoaded()
Update 2
OP explained that the iframe must be invisible initially. While this may seem an impossibility since iframes do not load when it or one of it's ancestor elements are display: none;. The key word is invisible which is a state in which the iframe is not visible.... There are three CSS properties that come to mind and one of them is actually shouldn't be used in this situation.
display: none; This is the property being used by OP and this property actually hinders the iframe's loading. The reason why is when in that state of invisibility, the iframe is not in the DOM according to Firefox's behavior.
opacity: 0; This property renders the iframe invisible as well and Firefox seems to recognize the invisible iframe just fine.
visibility: hidden; This seems to be an acceptable as well....
So try this code that I use to suppress the FOUC:
Child Page
function init(sec) {
var ms = parseFloat(sec * 1000);
setTimeout('initFadeIn()', ms);
}
function initFadeIn() {
$("body").css("visibility","visible");
$("body").fadeIn(500);
}
HTML
<body style="visibility: hidden;" onload="init(2);">
Update 1
I made an alternative solution because I hate leaving a demo that doesn't completely work★.
Ok this relies on cal.php window.onload event which is basically the slowest but the most stablest phase of loading there is.
Initially, #overlay will block any user interaction while calF is loading.
Once calF is completely loaded, it will call iframeLoaded function that's located on the parent page.
iframeLoaded will remove #overlay (I added a setTimeout for good measure but it's probably not necessary.)
I'm not that familiar with PHP syntax, so you'll have to modify the following code✶ and place it in cal.php
window.onload = function() {
parent.iframeLoaded();
}
Then on the parent page:
function iframeLoaded() {
setTimeout(function() {
$('#overlay').hide(750);
}, 1500);
}
The code above as well as the required HTML and CSS is in the snippet below.
★ Note: The code in the snippet should work, but this snippet won't of course because there's some code that needs to be on the child page. That's just a shoutout to all the downvoters out there ;-)
Snippet 1
// iframeLoaded will remove the overlay when cal.php has completely loaded
function iframeLoaded() {
setTimeout(function() {
$('#overlay').hide(750);
}, 1500); //<========[1 to 2 (1000 - 2000ms) seconds should give you plenty of time]
}
/*~~~~~~~~~~~~~~~~~~~~~~~~[Code in cal.php]~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// When everything (DOM, script, images. etc...) is loaded on cal.php, call iframeLoaded function that is on the parent's page.
window.onload = function() {
parent.iframeLoaded();
}
#overlay {
background: rgba(0, 0, 0, .3);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
#CalF {
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="overlay"></div>
<iframe id="CalF" src="http://khchan.byethost18.com/cal.php" height="100%" width="100%" frameborder="0" style="top: 0;"></iframe>
✶ Function loadedIframe() inspired by SO5788723
Snippet 2
document.getElementById('CalF').onload = function(e) {
var over = document.getElementById('overlay');
over.classList.add('hide');
}
#overlay {
background: rgba(0, 0, 0, .3);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
.hide {
display: none;
}
#CalF {
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="overlay"></div>
<iframe id="CalF" src="http://khchan.byethost18.com/cal.php" height="100%" width="100%" frameborder="0" style="top: 0;"></iframe>
$(document).ready seems to be called too soon, based on parent page instead of iframe content.
here you have solution to a similar problem:
jQuery .ready in a dynamically inserted iframe
I'm using jquery cycle plugin by malsup for a slide show that includes text. I want sifr to replace the text. It does so on the first slide, but not the subsequent ones. Any idea what might be done so that sifr is applied to the text on each slide as it is displayed?
Here's my sample page (I've made the sfir text blue and green so I know immediately it it works--it does work in FF 3.6, but not Safari 5.0.3 or Chrome 8 on my Mac...
http://ianmartinphotography.com/test-site/testimonials/index-07.html
Thanks!
Okay--so I just added in a second call sIFR.replace code--this time with a very brief delay so that the nest paragraph loads and then sIFR.replace is called. Here's the jquery code:
$('#next').click(
function() {
to = setTimeout(function ()
{sIFR.replace(helvetica,
{selector: 'p',
css: '.sIFR-root { background-color: #e6e6e6; color: #0000FF; font-size: 13px; text-align: justify; text-indent: 30px; }'}); },
100); // call sIFR code after this many milliseconds
}); });
I have simplified a problem I faced in Firefox (the original code is generated by server side controls). Open the following snippet in IE and in Firefox:
<html>
<style>
.AllInline, .AllInline * { display: inline; }
</style>
<span class="AllInline">
Test
<script type="text/javascript">
<!-- var obj = {}; //-->
</script>
</span>
</html>
In IE, I get:
Test
While in Firefox, I get:
Test <!-- var obj = {}; //-->
The content of the script block becomes visible somehow.
I was not expecting the styling rules to be applied to script blocks (can't really see a reason why one would want this either).
Would anyone have an explanation ?
base, basefont, datalist, head, meta, script, style, title, noembed and param tags are hidden by the simple expedient of setting display: none; in html.css (which is a UA stylesheet). So they are subject to being unhidden by page CSS such as your example. area on the other hand has display: none ! important; because it has special internal handling (the image effectively owns the area).
Don't put JavaScript there. Insert it just before </body></html>.
Test your HTMl in the Echochamber.
fascinating bug!
you can add .AllInline script {display: none;} to your css to hide it.