I m trying to add page number in footer this is my code
var pdfInfo = {};
var x = document.location.search.substring(1).split('&');
for (var i in x)
{
var z = x[i].split('=',2);
pdfInfo[z[0]] = unescape(z[1]);
}
function getPdfInfo() {
var page = pdfInfo.page || 1;
var pageCount = pdfInfo.topage || 1;
document.getElementById('page').innerText = page;
document.getElementById('topage').innerText = pageCount;
}
i m calling this js function on body load
<body onload="getPdfInfo()">
<div style="text-align:right; font-family: tahoma !important; font-size: 12px !important;">
Page
<span id="page" class="page"></span>
of
<span id="topage" class="topage"></span>
</div>
</body>
but some time footer show and some time not show and some time footer show on first page and not show on second page
You wrap your getPdfInfo code in a method that is called on page load, but not the code above it. Is there a reason it all can't be wrapped in that method? Then you can be sure that your pdfInfo object is populated all the time.
One thing you can do to debug this issue is to ensure that your pdfInfo object is properly set at the time the document is loaded by inserting a console.log(pdfInfo) statement at the very top of your method.
Related
My aim is to have a single web page which changes back and forth between two pieces of code every 60 seconds. I am able to do this with two urls/webpages using content refresh, however, ideally I am trying to include it all in one javascript file.
page1content and page2content indicate where I would want to insert the html code within the array. The HTML code is run within a js filter using Rhapsody Integration engine.
Any thoughts on how I might be able to get html content to switch between the two in a continous loop?
var next = output.append(input[0]);
var html = "";
html = html + "<style>";
html = html + "<span id=\"flicker\"></span>";
html = html + "</style>";
var pageContent = ["page1content", "page2content"];
var count = 0;
function changeContent() {
$("#flicker").text(pageContent[count]);
count < 2 ? count++ : count = 0;
}
setInterval(changeContent, 60000);
XMLData.setText(HTMLBody,'UTF8');
Try the snippet below:
const pageContent = [
` <p>This is from page 1.</p>
<p>This is another paragraph from page 1.</p>`,
` <p>This is from page 2.</p>
<p>This is another paragraph from page 2.</p>`];
let count = 0;
function changeContent() {
$("#flicker").html(pageContent[count]);
count++; count %= 2;
}
setInterval(changeContent, 5000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="flicker"></div>
P.S: Setting the interval to 5 seconds to showcase the functionality more quickly
I'm writing a small progam wherein I'm getting data using $.get then display the data so far so good and then there's this part then when I click a certain link it refresh the page but it has this blinking effect. Is there a way on how to reload the content get the new updated content then replace the previously loaded data.
NOTE: I didn't use setInterval or setTimeout function because it slows down the process of my website. any answer that does not include those functions are really appreciated.
Here's the code
function EmployeeIssues(){
$('#initial_left').css({'display' : 'none'});
var table = $('#table_er');
$.get('admin/emp_with_issues', function(result){
var record = $.parseJSON(result);
var data = record.data,
employees = data.employees,
pages = data.pages;
if(employees){
$('#er_tab_label').html('<b>Employees with Issues</b>');
for (var i = 0; i < employees.length; i++) {
$('#table_er').fadeIn('slow');
table.append(write_link(employees[i])); // function that displays the data
}
if(pages){
$('#pagination').html(pages);
}
}else{
$('#er_tab_label').html('<b>No employees with issues yet.</b>');
}
});
table.html('');
}
then this part calls the function and display another updated content
$('#refresh_btn').on('click', function(e){
e.preventDefault();
var tab = $('#tab').val();
if(tab == 'er'){
EmployeeIssues();
}
});
What should I do to display the content without any blinking effect?
thanks :-)
This section might be the issue :
if(employees){
$('#er_tab_label').html('<b>Employees with Issues</b>');
for (var i = 0; i < employees.length; i++) {
$('#table_er').fadeIn('slow');
table.append(write_link(employees[i])); // function that displays the data
}
if(pages){
$('#pagination').html(pages);
}
} else ...
It seems you're asking table_er to fade in once per run of the loop whereas s there can only be one such table, you only need to do it once ?
first try re-arringing it like this:
if(employees){
$('#er_tab_label').html('<b>Employees with Issues</b>');
$('#table_er').hide(); // hide it while we add the html
for (var i = 0; i < employees.length; i++) {
table.append(write_link(employees[i])); // function that displays the data
}
$('#table_er').fadeIn('slow'); // only do this after the table has all its html
if(pages){
$('#pagination').html(pages);
}
} else ....
Another possibility is that you're running through a loop and asking jquery to do stuff while the loop is running. It might be better to work out the whole HTML for the new page data in a string and then get the screen to render it in one line. I cna't do this for you as I don't know what's in write_link etc but something like this ..
if(employees){
$('#er_tab_label').html('<b>Employees with Issues</b>');
var sHTML ="";
$('#table_er').hide(); // hide it while we add the html
for (var i = 0; i < employees.length; i++) {
sHTML+=write_link(employees[i]); // maybe this is right ? if write_link returns an HTML string ?
}
table.append(sHTML); // add the HTML from the string in one go - stops the page rendering while the code is running
$('#table_er').fadeIn('slow'); // now show the table.
if(pages){
$('#pagination').html(pages);
}
} else ...
The script below works for posts that are already on the page. But, when I click on load more posts, the new posts that get added to the page don't change the source of the image so that they are blurry.
Is there a way to loop through all images and change the src of it, even the ones that are not shown?
function resizeThumb(size) {
var popularPost = document.getElementById('Blog1');
var image = popularPost.getElementsByTagName('img');
for (var i = 0; i < image.length; i++) {
image[i].src = image[i].src.replace(/\/s72\-c/g, "\/s" + size + "-c");
image[i].width = size;
image[i].height = size;
}
}
// Resize to 200 × 200
resizeThumb(200);
Yes. Basically locate the button that loads more, find it's name.
If your button looks like this:
Load more
Put this before it so it looks like this:
<span onclick="resizeThumb(200); ">
Load more
</span>
It's the lousiest solution but the question is lousy too.
The images named One.jpg to Ten.jpg are in a folder 'myFolder', which is at my desktop. Below is a code to rotate three images at a time from the total ten in myFolder and the html file is also in the same folder. How to write the src so that this code may work. Alert message gives the name of these 10 images, but further it does not work. Script does not work placed in body tags. What is wrong which is to be corrected for expedted results.
<html>
<body>
<img id = "im1"><img id = "im2"><img id = "im3">
<script type = "text/javascript">
var imgArray = ['One.jpg','Two.jpg','Three.jpg','Four.jpg','Five.jpg', 'Six.jpg', 'Seven.jpg', 'Eight.jpg', 'Nine.jpg', 'Ten.jpg'];
function randOrd(){return (Math.round(Math.random())-0.5)}
imgArray.sort(randOrd);
alert (imgArray); // FOR TESTING
var len = imgArray.length;
var count = 0;
rotate1();
rotate2();
rotate3();
function rotate1() {
document.getElementById("im1").src= imgArray[count];
count++;
if (count>=len) {count = 0}
var tim1 = window.setTimeout("rotate1()", 3000); // 3 seconds
}
function rotate2() {
document.getElementById("im2").src = imgArray[count];
count++;
if (count>=len) {count = 0}
var tim2 = window.setTimeout("rotate2()", 5000); // 5 seconds
}
function rotate3() {
document.getElementById("im3").src = imgArray[count];
count++;
if (count>=len) {count = 0}
var tim3 = window.setTimeout("rotate3()", 7000); // 7 seconds
}
</script>
</body>
</html>
A best-practice says that the script should be taken out in a separate file and then included at the end of the body like this:
<script src="scripts/YourScript.js"></script>
where src points to the file.
This is good because:
the browser renders the page as it parses it from top to bottom. This means that when it reaches the script part at the end of the body tag, your HTML should be loaded, so the elements used by your scripts will most likely be present.
you can display something to the user until the slowest part (the scripts) load.
you could server the scripts from a CDN so the request-response delay would be minimum.
The only exception to this rule I know of is modernizr or similar browser and feature detection libraries.
Update
You are missing a semicolon here:
if (count>=len) {count = 0}
it should be like:
if (count>=len) {count = 0; }
Also, when you pass the function to the setTimeout you can do it like:
window.setTimeout(rotate3, 7000);
Ideally, you'd load your script from an external file and there'd be no JavaScript at all in your HTML file. Then you'd serve your documents with CSP headers.
Ignoring the "best" practice thing, your problem is that you have no closing </script> tag.
CSS Sprites are working in the HTML of the page, but not in Javascript?
I am trying to install http://www.spyka.net/scripts/javascript/easy-social-bookmarks and add CSS Sprites to minimise the server calls.
I created the style sheet like this:
<style type="text/css">
<!--
.i_blinklist
{
width:21px;
height:21px;
background-repeat: no-repeat;
background-image: url(img_socialsprites.jpg);
background-position: 0 0;
}
.i_blogmarks
//-->
</style>
This code works in the HTML of the page like this:
<div class=i_blinklist></div>
When I add it to the javascript like this, it doesn't work:
sites[0] = new Array('http://blinklist.com/index.php?Action=Blink/addblink.php&Url={url}', 'Blinklist', '<div class=i_blinklist></div>');
Here is the main workings of the script which may also affect it:
function swgbookmarks()
{
for(i = 0; i < sites.length; i++)
{
var g = sites[i];
var u = g[0];
u = u.replace('{url}', escape(window.location.href));
u = u.replace('{title}', escape(window.document.title));
var img = (imagepath == '0') ? '' : '<img src="'+g[2]+'" alt="'+g[1]+'" /> ';
var k = ''+img+g[1]+' ';
window.document.write(html_before+k+html_after);
}
}
Any ideas or help is very much appreciated.
Thank you.
UPDATE:
I've been playing around with this, and finally got it working :o)
Here are the changes I have made.
The social bookmark and image JS code:
sites[0] = new Array('http://blinklist.com/index.php?Action=Blink/addblink.php&Url={url}', 'Blinklist', 'socialsprite social blinklist');
Here is the JS code from the base of the script:
function swgbookmarks()
{
for(i = 0; i < sites.length; i++)
{
var g = sites[i];
var u = g[0];
u = u.replace('{url}', escape(window.location.href));
u = u.replace('{title}', escape(window.document.title));
var img = (imagepath == '0') ? '' : '<img src="transparent1x1.gif" class="'+g[2]+'" alt="'+g[1]+'" /> ';
var k = ''+img+g[1]+' ';
window.document.write(html_before+k+html_after);
}
}
Here is the CSS Style Sheet code:
<style type="text/css">
<!--
.socialsprite {background:url(img_socialsprites.jpg);}
.social {height:22px;}
.social {width:22px;}
/* Social Images */
.blinklist {background-position:0px 0px;}
.blogmarks {background-position:0px -22px;}
This seems to be working.
I now have this working.
See main post Update at the bottom.
I wrote the update there, as the site wouldn't let me post my own answer for several hours, and I didn't want to waste anyone's time.
Thank you for the constructive comments, they helped a lot.
Take a look at the generated HTML. It looks like your missing some quotes around the class name:
sites[0] = new Array('http://blinklist.com/index.php?Action=Blink/addblink.php&Url={url}', 'Blinklist', '<div class=i_blinklist></div>');
Should be
sites[0] = new Array('http://blinklist.com/index.php?Action=Blink/addblink.php&Url={url}', 'Blinklist', '<div class="i_blinklist"></div>');
** EDIT **
Also, log variable "k" to the console "console.log(k)" and validate the html. It generates the below, which is also incorrect. Notice your img src equals a div and not an actual path:
<img src="<div class="i_blinklist"></div>" alt="Blinklist" /> Blinklist
From what I can tell, you should be using something like:
var k = ''+img+g[1]+' ';
With generates:
<div class="i_blinklist"></div> Blinklist
One last note is that you should be using a span and not a div inside your anchor tag. Again, this is not valid HTML. See https://stackoverflow.com/a/1828032/1220302 for more information.