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
Related
I've been learning HTML and CSS this semester and originally started to code my project in HTML and CSS, but in order for my project to work, I had to link HTML pages to each other. It ended up making a lot of HTML pages just to change one line of text. I've been trying to get a handle on JavaScript to make my project more efficient. My HTML code looks like this:
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Oakwood</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<link rel=stylesheet type=text/css href=default.css>
</head>
<body>
<div id=back></div>
<div id=drdick></div>
<div id=choice></div>
<div class="typewriter">
<script src="run.js"></script>
<p id=text>While out running someone says “Hi” causing you to trip. He helps you up.</p>
</div>
<div id=move>
<button type="button" onclick="changeThis()">Next</button>
</div>
</body>
</html>
My Javascript Looks like this:
var quoteIndex = 0;
var quotes = [
"Thank you.",
"Are you ok?",
"Yes, I’m not normally this clumsy"
];
function changeQuote() {
++quoteIndex;
if (quoteIndex >= quotes.length) {
quoteIndex = 0;
}
document.getElementById("text").innerHTML = quotes[quoteIndex];
}
function showPic()
{document.getElementById("drdick").src="img/drdickab.png";}
function changeThis() {
changeQuote();
showPic();
}
when I test my code my quotes update how I want them to. My picture does not show up at all. Is there something I am missing when it comes to how HTML and Javascript interact? I have been looking through the forums to figure out what I have wrong, and I haven't been able to figure that out.
Your image is not displaying because you did not specify your image anywhere in your markup, and your javascript is also not enough. But try this inside your body tag:
<body>
<!--replace your button with this code.-->
<div id=move>
<button type="button" onclick="showMyImage();" value="Next"></button>
</div>
<!--I assumed you will display the image just below your button, note that initially your image is hidden and displayed on button click event-->
<div>
<img id="myImage" src="img/drdickab.png" style="visibility:hidden"/>
</div>
</body>
.
<!--There's really no need to have multiple scripts, just one will do the job-->
<script type="text/javascript">
function showMyImage(){
document.getElementById('myImage').style.visibility="visible";
}
</script>
I have been trying to implement an accesibility function for a Website and one of my requirements is having a grayscale activated or deactivated on the click of 2 links. The users are still on Internet Explorer 11, so the compatibility with that navigator is a must.
So far, I have implemented some styles and code I found on the web and those are working great, I adapted the code, so I have 2 hyperlinks that execute a javascript function. One for enabling the grayscale and another one for disabling it.
But I have an issue, the grayscale is always turned on from the start whenever I load the page. I would like the grayscale starting disabled and then being enabled on by the click of one of my links.
Testing with Chrome and Firefox, the grayscales are turned off by default by adding the "grayscale-off" class to my images. Despite this, the issue persists on Internet Explorer.
So, I tried forcing the call to my javascript function that disables the grayscale on several parts:
Body
<body onload='enableEG(null)'>
Images themselves
<img src="img/FOV_8967.JPG" alt="Goal 1" width="600" height="400" class="grayscale grayscale-off" onload="enableEG(null)">
On the required script tag
<script src="js/jquery.gray.min.js" onload="enableEG(null)"></script>
Even tried creating a new script tag all the way to the bottom of my code, just before closing the body tag.
<script>enableEG(null);</script>
Interestingly, I put a couple of alerts that pop up when the function is executed, and they do appear when loading the page in IE with those forced function calls, however, the images still are grayscaled initially.
Here's my entire html code for reference (without the forced calls to the function):
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Gray</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/gray.min.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script>
function enableEG(t){
var activeT = t;
//Internet Explorer
var isIE = /*#cc_on!#*/false || !!document.documentMode;
if (isIE) {
if ( activeT == null ){
alert ("activateEG1: NULL; disable");
$('.grayscale').toggleClass('grayscale-off',true);
}
else {
alert ("activateEG1: 1; enable");
$('.grayscale').toggleClass('grayscale-off',false);
}
}
//Other navigators
else {
if ( activeT == null ){
document.documentElement.style.webkitFilter = 'grayscale(0%)';
}
else {
document.documentElement.style.webkitFilter = 'grayscale(100%)';
}
}
}
</script>
</head>
<body>
<p>Grayscale Test</p>
<p><a id="linkEnable" href="#" onclick="enableEG(1);">Enable</a></p>
<p><a id="linkDisable" href="#" onclick="enableEG(null);">Disable</a></p>
<div class="gallery">
<a target="_blank" href="img/FOV_8967.JPG">
<img src="img/FOV_8967.JPG" alt="Goal 1" width="600" height="400" class="grayscale grayscale-off">
</a>
<div class="desc">Goal 1</div>
<a target="_blank" href="img/FOV_9088.JPG">
<img src="img/FOV_9088.JPG" alt="Goal 2" width="600" height="400" class="grayscale grayscale-off">
</a>
<div class="desc">Goal 2</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="js/jquery.gray.min.js"></script>
</body>
</html>
Any help will be appreciated!
Update:
Found that I can turn off the grayscale if I put a script executing on a Window Load event after calling the external js, and it works like a charm on a single index page!
<script>
$(window).on('load', function() {
alert ("script function: turn off gray");
enableEG(null);
});
</script>
However, I'm still looking for a more permanent solution, because this fix doesn't work on internal pages that go beyond the index of the site I'm testing.
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.
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"></a></li>
<li><a id="drinklink" href="drinks.html" title="drink menu"></a></li>
<li><a id="piclink" href="images.html" title="picture gallery"></a></li>
<li><a id="directionslink" href="directions.html" title="directions"></a></li>
<li><a id="contactlink" href="contact.html" title="contact us"></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 :)
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