Pagination in jquery or jquery mobile - javascript

I am developing an app where i need to implement pagination for changing of images. The code i am using is.
index.html
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
</head>
<body>
<div class="imagesScreen" id="imagesScreen">
<img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
<img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
<img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
<img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
<img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
<img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
<img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
<img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
<img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
<img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
</div>
</body>
</html>
Here as per above code i am having two buttons in footer tag(not mentioned code above). in each page i want to display around 6-10 images & when i click next button or previous button in the same page data needs to be change using Pagination technique. Here i took static data, but in my app that data comes from server during runtime. so, i need to create dynamic data.
As per the link Pagination link here getting one image at a time. but i want around 6-10 images as per the below picture. when i click on next button page need to be same but data must change as per the Pagination link.
Can anyone please help me with this how to get that type of pagination technique & how to create dynamic data of div & image tags( & tags), as i want the view as per the below blackberry image shown.
Thanks in advance..


It's a fairly logical feature. First, I'm assuming you're pulling data with SQL using a limit
SELECT * FROM images ORDER BY time DESC LIMIT 0, 9
I'm assuming you're using PHP for the server-side scripting, if not, try accommodating this to your language.
Let's say we have a GET value that uses page=123 for the page ID, of course 123 is an arbitrary number; we need to pull the images starting at page number * items per page so for example, at page 2, we get 2 * 9 which is 18, so our first picture should be picture 18. Now I just go on taking the correct LIMIT clause in the SQL query:
PHP:
$start = $_GET['page'] * $items_per_page;
SQL:
SELECT * FROM `images` ORDER BY `time` DESC LIMIT {$start}, {$items_per_page}
That's the basic gist of it.


You can try the below URL as a reference.
http://cssglobe.com/lab/easypaginate/02.html
Thanks

Related

Show file name on the view

How do I show the file name in view? Currently, I just hardcoded the name of the file on view.
Can someone assist me? thank you very much
Here my code:
<li>
#if (Model.Picture2 != null)
{
base2 = Convert.ToBase64String(Model.Picture2);
var picture2_data = base2.Substring(0, 5);
if (picture2_data == "JVBER")//PDF
{
var downloadTag = "PDPA" + Model.SenderID;
imgSrc2 = String.Format("data:application/pdf;base64,{0}", base2);
<br>
<a download=#downloadTag class="fa fa-file-pdf-o" style="font-size:18px;color:red" href=#imgSrc2></a>
<a download=#downloadTag href=#imgSrc2 title='PDPA'>PDPA</a>
<br />
}
else
{
base2 = Convert.ToBase64String(Model.Picture2); imgSrc2 = String.Format("data:image/gif;base64,{0}", base2);
<a class="fancybox-buttons" rel="fancybox-button" data-lightbox="button" href="#imgSrc2" title="PDPA"><img src="#imgSrc2" style="max-width:100px; max-height:100px;" alt="" /></a>
}
}
</li>
View

Your code has a few flaws and not exactly clear what your aiming for.
The parts that work would for a pdf look like this (however I am using a png for the pdf as its much faster/simpler as one line of data. It is not a good idea to have multiple references to a single dataURL only one should be needed.
this line works <a download=#downloadTag href=#imgSrc2 title='PDPA'>PDPA</a>
because it is PDPA
this one does not work
<a download=#downloadTag class="fa fa-file-pdf-o" style="font-size:18px;color:red" href=#imgSrc2></a>
because you have nothing visible between >hello world</a>
the last one more difficult to test but also same needs>something</a><
perhaps your aiming for something like
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='icon' href='https://css-tricks.com/favicon.svg' type='image/svg+xml'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<a href="data:application/pdf;base64,JVBERi0xLjcNJeLjz9MNCjEgMCBvYmoNPDwvUGFnZXMgMiAwIFIvVHlwZS9DYXRhbG9nPj4NZW5kb2JqDTMgMCBvYmoNPDwvQ3JlYXRpb25EYXRlKEQ6MjAxNTA3MDExMTI0NDcrMDInMDAnKS9DcmVhdG9yKFBERiBDcmVhdG9yIGh0dHA6Ly93d3cucGRmLXRvb2xzLmNvbSkvTW9kRGF0ZShEOjIwMjIwNjA3MTgzNjAyKzAyJzAwJykvUHJvZHVjZXIoMy1IZWlnaHRzXDIyMiBQREYgT3B0aW1pemF0aW9uIFNoZWxsIDYuMC4wLjAgXChodHRwOi8vd3d3LnBkZi10b29scy5jb21cKSk+Pg1lbmRvYmoNNCAwIG9iag08PC9Bbm5vdHMgMTMgMCBSL0NvbnRlbnRzIDUgMCBSL01lZGlhQm94WzAgMCA2MTIgNzkyXS9QYXJlbnQgMiAwIFIvUmVzb3VyY2VzPDw+Pi9UeXBlL1BhZ2U+Pg1lbmRvYmoNNSAwIG9iag08PC9MZW5ndGggMT4+DXN0cmVhbQogCmVuZHN0cmVhbQ1lbmRvYmoNOSAwIG9iag08PC9CQm94WzAgMCA2MTIgMTQ4XS9GaWx0ZXIvRmxhdGVEZWNvZGUvRm9ybVR5cGUgMS9MZW5ndGggNDEvUmVzb3VyY2VzPDwvUHJvY1NldFsvUERGIC9UZXh0IC9JbWFnZUIgL0ltYWdlQyAvSW1hZ2VJXS9YT2JqZWN0PDwvSW0wIDExIDAgUj4+Pj4vU3VidHlwZS9Gb3JtL1R5cGUvWE9iamVjdD4+DXN0cmVhbQp4nFMo5CrkMjM0UjBQMFAwNLEA08m5XPqeuQYKLvlcgVwKgQoAjFMHhQplbmRzdHJlYW0NZW5kb2JqDTExIDAgb2JqDTw8L0JpdHNQZXJDb21wb25lbnQgOC9Db2xvclNwYWNlL0RldmljZVJHQi9GaWx0ZXIvRmxhdGVEZWNvZGUvSFJlcyA5Ni9IZWlnaHQgMTE1L0xlbmd0aCA0NTI4L1NNYXNrIDEyIDAgUi9TdWJ0eXBlL0ltYWdlL1R5cGUvWE9iamVjdC9WUmVzIDk2L1dpZHRoIDQ3NT4+DXN0cmVhbQp4nO2da5LbuhGFuZjsIJX4zoh0eWl3DanYojRx7iYp2fOLaZB6i33QePCh8HylH/bM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"
button class="w3-btn w3-white w3-border w3-border-red w3-text-red w3-round-large"
Download="ABC.pdf" >Click me to Download<br>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAFXUlEQVR4nO3d21LjOBRAUXuK//9lzxM9dIac+KLLkbRWVb80RQhBO0eOTdiP49iA3/3T+w5AZgKBwFfXr77v9ne9HMfe+y6MYG9+DCKK3ITzl3aBCGMsQtm2rVUg4hjX4qHUD0Qcc1g0FK9icc6+Hys+2dUNZMEHdHqL/UxNEK5bKBKBcM8ikdQLZJEHcGkL/IxNEJ6ZPBKB8NzEkQiEMiaNpO/Fiq8WPRlVVM+Fuu/HbD9DE2R1x7H/+VfCZJNEIPxHJP8jEP5WappMEolA+J1Itm0TCBGRCIQPFo9EIHy2cCQC4ZxFIxEI5y0YiUC4ZrFIBMJ1C0UiEO5ZJBKBcN8CkQiEZyaPRCA8N3EkAqGMSSMRCOVMGIlAKGuySARCeRNFIhDqmCQSgVDPBJEIhLoGj0Qg1DdwJAKhjUEjEQjtDBiJQGhrsEgEQnsDRSIQ+hgkEoHQzwCRCIS+kr8bvEDo72kkFaeIQMgh6SQRCHk8iaTSFBEIuSSbJAIhn7uRVJgiAoGAQMgpyRQRCHklOB4RCAQEAoGv3ndgSdE+ufW2IsEbI2RmgrT2aUFasKkIpCWLv42Cj7NAICCQ3o5jz/ByJr8TSCtXxr6tWBoCyejJRDGNihJITxZzegLJomQswitGIFmUPu4QSRECmZlIHhPI7LyM/IhrsVYxciT+/AHkJJAMnBhMSyA9CSM9gUBAIBAQSG+2WakJBAICaWXk8xALEwgEBAIBgWRjK5aKQCAgEAgIpCXbp+EIBAICgYBAICCQ1hyHDEUgEBAIBAQCAYFAQCAQEEhr/gTbUAQCAYFkZIqkIZCWLPzhCAQCAsnKtElBIK1Y8EMSSGai6k4gvfkDN6kJpIUnk8AU6UogWZgiKQmkp7NRmCLdCKS2K4s7CkYkXQgEAgKpKXrWfzctTJFUBJKRSNIQSC13pkeJ26YogWTlZd8UBJKZrVZ3Aqmh5vbq7NehCIFk9ykokVQlkNJqTA+RdCOQUZyJRCjFCaSk2sceZ25DJEUJZDQiaUogpbR65ers7dlyFSGQUV25VF4ot331vgNTaDk9Xm/77OLf9+PX+/IkngXO9gtkdFcjKend7U0Uji3WU72mR2YTbetMkNGMtPC+7+vATxQCeaLF9BgpiHfeHf8MQCDZzBDERARyV6npkT2IUu+8MugUEUgPNaKodYb95+dEX+P1Y9nDP0kgd9yZHqUWzJNn4e/PvXtfzsby/fEJIhFITVlPwv287RKxvLvtM/+fnECuOjM97iy6Xgvo6VR5NcHU+EkgV5T6C7UZn01LTJUJCaSVjFG8UzqWkb73FwI56+pCGXhR/OXJBY4TPAYCKWmCBXHKKt/nJpBzXJC4LFfzfuKAdWkC+c1Ce2xitlg//QzjUyTiWIJAts02irdssUY6601z6wby7tdCLX5+WDOQJ282IKClrHUM8vRCQ3EsZ50JYuFzwxoT5OyWSkS8mH+CiIMH5g7E+Q0emjeQKxPB9OCNOQMRB4XMF4g4KGi+QN6Z9H2bqGuuQDK89xRTmSuQd2ytuGmeQJzvoIJ5AjlDHFw0x6Umn6aH3w7kpvkniDh4YO5AxMFDcwcSEQcnzBHI1cUuDk6a4yB92/xGIFXME8i313cmFwUPzLHFekccPDR3IPCQQCAgEAgIBAICgYBAICAQCAgEAgKBgEAgIBAICAQCAoFArsvdvdshyZggEBAIBOoF4peV6KXg2jNBICAQCAgEAnUDcRxCa4XXnAnCPCo8IdcPxBRhYPtxNDx57Uw5NVR8Em67xTJNKK3ymmo7QWAwDtIhIBAICAQCAoGAQCAgEAgIBAICgYBAICAQCPwLH2kfzgOE8PAAAAAASUVORK5CYII="
width="100px" height="100px">
ABC.pdf</a>
you can replace the image with font icon
</body>
</html>
so like this but use pdf for first entry and an image or font icon for second,
<i class="fa fa-file-pdf-o" style="font-size:18px;color:red" aria-hidden="true"></i>
IF the files are on the server then on the server CPU you can program a means to provide custom icons
however converting just one pdf cover page to an image requires a powerful binary converter as javascript is limited and not always available. Here I can use a one line scripted conversion in irfanView without Ghost Script but most servers can run a single GS command

Javascript for changing image source not working

I am making a simple website which changes the image displayed when a button is clicked. But my code doesn't seem to be working as when I click on the button 'Click!' the alt text gets displayed instead of the image changing.The source of the images is perfectly fine, as when I use the same source outside the script the images show up.
<head>
<title>Pic Change</title>
<meta charset="utf-8">
<meta name="Pic Change">
<meta name="keywords" content="face,PES">
<meta name="author" content="Thalle">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body class="body" style="background-color:#4682B4">
<script>
function display(whichimage){
if(whichimage == 0){
document.getElementById('Click').src="C:\.....\Memes\Animals\initial.jpeg"
}
else{
document.getElementById('Click').src="C:\.....\Memes\Animals\Whenlife.jpeg"
}
}
</script>
<image id="Click" src="C:\......\Memes\Animals\initial.jpg" alt="Click Button to click picture" style="width:300px;height:300px" >
<p>
<button type="button" onclick="display(1)">Click!</button>
<button type="button" onclick="display(0)">Reset</button>
</p>
</body>
</html>

The code is fine, you just forgot the file:// before the start. This code shows that when you give a working image src in your code, it will work just fine. Also, don't use files from your disk on Stack Overflow, it gives out private information that you probably don't want on the web.
<head>
<title>Pic Change</title>
<meta charset="utf-8">
<meta name="Pic Change">
<meta name="keywords" content="face,PES">
<meta name="author" content="Thalle">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body class="body" style="background-color:#4682B4">
<script>
function display(whichimage){
if(whichimage == 0){
document.getElementById('Click').src="http://www.iconarchive.com/download/i86425/martin-berube/flat-animal/duck.ico"
}
else{
document.getElementById('Click').src="https://maxcdn.icons8.com/Share/icon/Animals//duck1600.png"
}
}
</script>
<image id="Click" src="http://www.iconarchive.com/download/i86425/martin-berube/flat-animal/duck.ico" alt="Click Button to click picture" style="width:300px;height:300px" >
<p>
<button type="button" onclick="display(1)">Click!</button>
<button type="button" onclick="display(0)">Reset</button>
</p>
</body>
</html>

You forgot the protocol (file://). It should be like
document.getElementById('Click').src="file://C:\Users...";
otherwise it will be just appended to the src everytime you click a button.

Try to put your JavaScript in the <head> section. Then it might work.
Also. There is no such thing as image in HTML. It's img.

In javascript, you need to escape backslashes in strings, so in adresses in particular. Replace all "\" by "\\".

You shouldn't load images from your disk. We and others can't see it. If you use relative paths and you make sure every images and the HTML file is in the same directory, that should be fine. Even if you do, you must specify the file:// protocol. But if you use external images from a website, we could see them.
There is no <image> element in HTML. It's just <img>.
You should type \\ instead of \, because the \ character has a special meaning. However, Javascript is smart, and you can use / too, don't have to follow Windows' method.
Please don't use the onclick attribute. It's really old. Instead use event listeners.
Right now I don't know what is the problem in your code extacly, however, there is a working example:
<!DOCTYPE html>
<html>
<title>Pic Change</title>
<script>
document.addEventListener("DOMContentLoaded", function() {
document.querySelector("button").addEventListener("click", function() {
document.querySelector("img").setAttribute("src", "file://C:/Data/300x300-colored.png");
});
});
</script>
<p><img src="file://C:/Data/300x300.png" /></p>
<p><button type="button">Click!</button></p>
</html>
If both images and the index.html is in the C:\Data directory, it works fine.

Spotfire: How to reload/refresh a text area html through Javascript

I have an HTML page which auto refreshes itself every 5 sec. This page contains 3 image from 3 different server which i want to show side by side and and refresh every 5 second.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>HMI Remote Monitoring</title>
<meta http-equiv="refresh" content="5" >
</head>
<body>
<table>
<tr>
<td>Chamber 1:100.206.214.19</td>
<td>Chamber 2:100.206.214.122</td>
<td>Chamber 3:100.206.214.145</td>
</tr>
<tr>
<td>
<img border="2" src="http://100.206.214.19/remote/display.bmp" alt="" name="displayImage" width="400" height="240">
</td>
<td>
<img border="2" src="http://100.206.214.122/remote/display.bmp" alt="" name="displayImage" width="400" height="240">
</td>
<td>
<img border="2" src="http://100.206.214.145/remote/display.bmp" alt="" name="displayImage" width="400" height="240">
</td>
</tr>
</table>
</body>
<html>
I am using the http-equiv to refresh the html and it works fine when it's an HTML page in Collaboration view. but now I need to move this same html into a Text area visualization and the refresh doesn't work there.(Mainly coz collaboration dont accept static HTML and i'll have to keep a server running somewhere to keep the html alive.Doable but not a nice solution.)
I know a few alternatives such as using iron-python to reload the html content of the text area(Feels like a overkill + making it sleep in a loop will freeze the viz - will be an unnecessary challenge) or just use the images as labels(it has it's own challenges and is subject of another question I have raised already.) But I was wondering if there's a way we could use JavaScript(clearly I'm bad with JS, so couldn't crack it.) to reload the text area content?
Thanks for your solutions and ideas.

try page refresh using meta tag and content with time you can check in below url
Auto refresh code in HTML using meta tags

Have you tried this?
setInterval(refreshWidth,500) //trigger every .5 sec
from here

Why won't javascript replace innerHTML on screen resolution check?

I'm trying to make my website check the screen resolution and replace installed font icons (using #webfont) with plain text links, so that the site is more mobile friendly. Im using Opera Mobile Emulator to check if it works. the user interface I am using clearly comes back with a res of 480x320 (in the very top left of the page), yet the .innerHTML javascript isn't firing off. Any help?
<!DOCTYPE html>
<html>
<head>
<title>Harry's Bar</title>
<meta name="keywords" content="Harry's, bar, st. petersburg, florida, kenneth city, drink specials" />
<meta name="description" content="Harry's Bar in St. Petersburg, Florida. Drink specials every night!" />
<meta name="author" content="Internet Solutions of Florida" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<script type="text/javascript">
var width=screen.width;
var height=screen.height;
document.write(width+'x'+height);
if (width<700)
{document.getElementById("homelink").innerHTML="Home";}
</script>
<div class="frame">
<div class="header">
<img class="logo" src="img/logo.png" alt="Harry's Bar" />
<div class="menu">
<ul>
<li><a id="homelink" href="index.html" title="home">&#xf015</a></li>
<li><a id="drinklink" href="drinks.html" title="drink menu">&#xf0fc</a></li>
<li><a id="piclink" href="images.html" title="picture gallery">&#xf030</a></li>
<li><a id="directionslink" href="directions.html" title="directions">&#xf0d1</a></li>
<li><a id="contactlink" href="contact.html" title="contact us">&#xf075</a></li>
</ul>
</div>
</div>

That javascript is executing before the HTML is being loaded. So there is no element with the id of "homelink" when the javascript fires.
Additionally, by using document.write, you're effectively overwriting your original HTML, so the tag will never load anyway.
Get rid of the document.write call and place the script just before your closing body tag and it should work as intended.

document.write() is not needed. If you want to diagnose you may use document.title or create a div and divid.innerHTML
Make sure your testing on a <700 area
Add a DOM ready fire.
Place this at the end of the
Things should work then :)

Avoid flickering (white screen) in jQuery mobile phone

I am devloping a phonegap app, I used a multi page template like page1.html, page2.html. Each page hits the server and renders the output and show it in a listview. So the problem is if I hit to redirect from one page to another page means it shows white screen.
And also I tried lot of possible ways when I did the google search. But it not helps for me.
My code is given below:
$('#content').append('<div class="wholediv"><span class = "wholediv_content"><a style="text-decoration:none!important;"href="'+v.pagename+'.html?id='+v.nodeId +'&catname='+ v.pagecat +'" data-ajax="false">'+'<img src="http://www.examole.com/'+image+' " class="eventsimages" alt = "image"/>'+'<br /><p>'+v.pagename+'</p></a></span></div>');
index.html:
<div data-role="page">
<div data-theme="a" data-role="header" data-position="fixed" data-tap-toggle = "false" style="height:45px;">
<h3 id = "title">
Moble
</h3>
<span class="off new_off" id = "off" >Off</span>
</div>
<div data-role="content" id="content">
</div><!-- /content -->
</div><!-- /page -->
</body>
I need to avoid the flickering. Please I did lot of search and applied all those answers it did not help me. If I use data-transition means I need to remove data-ajax="false". What to do?

Double flickering or Double flashing is a well known issue.
The solution posted by Rob is actually what works.
Setting in your mail css file:
.ui-page {
-webkit-backface-visibility: hidden;
}
Use this in your viewport tag aswell:
user-scalable=no
I made a basic template for phonegap. With Jquery mobile and so forth.
http://www.codemonkey.mobi/guides/base.zip
I dont see any whitescreens with my base.
Let us know if this worked for you.
Also try this:
http://blog.hackedexistence.com/phonegap-jquery-mobile-white-screen-flicker-solved
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

Categories