Sorry if this is a benign question but still new to ASP MVC3 - what is the best syntax for using an image as a link? It needs to navigate to the Index.cshtml page of another Controller (called Home).
What I have below causes the image to completely disappear:
<a href="#Url.Action("Index", "Home")><img src="#Url.Content("~/Content/images/Monet3.png")" id="MonetSig" /></a>
I think that there is a closing " missing after #Url.Action("Index", "Home") it might be the problem
I would use CSS to give the anchor a background image. This way you can easily change the image for mobile or tablets:
CSS:
#MonetSig {
display: block;
width:100px; /* change this to your image width and height */
height:100px;
background: url('../images/Monet3.png') no-repeat;
}
Html:
<a id="MonetSig" href="#Url.Action("Index", "Home")"></a>
Related
I would like to make a gif clickable to a new page. I'm not sure what code to include and have tried many options that did not work out. The following is part of the code:
<div class="col-md-7 col-sm-4 col-xs-12" style="background-image: url('xx.gif'); background-size: cover; background-position: 50% 50%;" id="xx" data-image-url="xx.gif">
Thank you in advance!
Welcome to SO. HTML link use the <a> tag with the intended URL in the href property. Wrap your GIF in an <a> tag to make it clickable.
I'm loading into another div with .load('settings.html') function in
The settings.html page being loaded contains:
<div style="text-align: center; border: 1px solid black">
Application Settings: <br>
Reset Application Key
</div>
The problem is that the button is not getting formatted as per jquery mobile button data-role. If I place this on my main page the button is displayed correctly whereas by load function its a simple link.
What am I getting wrong here?
After you load settings.html use enhanceWithin() to enhance the markup and css of the button. Give your div a class and enhance it after load
Read more here -- https://api.jquerymobile.com/enhanceWithin/
Demo Take out the enhance to see that it does not render properly even when you append it
https://jsfiddle.net/5es81kgd/
Code
$('.but').append('Reset Application Key').enhanceWithin();
Within our web application we are displaying a PDF document in an iframe using the following line of code:
<iframe id="iframeContainer" src="https://example.com/pdfdoc.pdf"
style="width:100%; height:500px;"></iframe>
This works fine in all the major desktop browsers with the width of the PDF scaling to fit inside the confines of the iFrame and a vertical scroll bar to view all the pages within the document.
At the moment however I can't get the PDF to display correctly in Mobile Safari. In this instance only the top left portion of the PDF is visible without any horizontal or vertical scrollbars to see the rest of the document.
Does anybody know of I workaround for this problem in Mobile Safari?
UPDATE - MARCH 2013
After hours of searching and experimentation I can conclude that this problem is a real mess!! There are a bunch of solutions but each far from perfect. Anybody else struggling with this one I advise to refer to 'Strategies for the iFrame on the iPad Problem'. For me I need to write this one off and look for another solution for our iPad users.
UPDATE - MAY 2015
Just a quick update on this question. Recently I have started using the Google Drive viewer, which has mostly solved the original problem. Just provide a full path to the PDF document and Google will return a HTML formatted interpretation of your PDF (don't forget to set embedded=true). e.g.
https://drive.google.com/viewerng/viewer?embedded=true&url=www.analysis.im%2Fuploads%2Fseminar%2Fpdf-sample.pdf
I'm using this as a fallback for smaller viewports and simply embedding the above link into my <iframe>.
I found a new solution. As of iOS 8, mobile Safari renders the PDF as an image within an HTML document inside the frame. You can then adjust the width after the PDF loads:
<iframe id="theFrame" src="some.pdf" style="height:1000px; width:100%;"></iframe>
<script>
document.getElementById("theFrame").contentWindow.onload = function() {
this.document.getElementsByTagName("img")[0].style.width="100%";
};
</script>
<iframe
id="ifamePdf"
type="application/pdf"
scrolling="auto"
src={"https://docs.google.com/viewerng/viewer?url="+"https://example.com/pdfdoc.pdf"+"&embedded=true"}
height="600"
></iframe>
My solution for this is to use google drive on mobile and a standard pdf embed in an iframe on larger screens.
.desktop-pdf {
display: none;
}
.mobile-pdf {
display: block;
}
#media only screen and (min-width : 1025px) {
.mobile-pdf {
display: none;
}
.desktop-pdf {
display: block;
}
}
<div class="outer-pdf" style="-webkit-overflow-scrolling: touch; overflow: auto;">
<div class="pdf">
<iframe class="desktop-pdf" scrolling="auto" src="URL HERE" width="100%" height="90%" type='application/pdf' title="Title">
<p style="font-size: 110%;"><em>There is content being displayed here that your browser doesn't support.</em> Please click here to attempt to view the information in a separate browser window. Thanks for your patience!</p>
</iframe>
<iframe class="mobile-pdf" scrolling="auto" src="https://drive.google.com/viewerng/viewer?embedded=true&url=URL HERE" width="100%" height="90%" type='application/pdf' title="Title">
<p style="font-size: 110%;"><em>There is content being displayed here that your browser doesn't support.</em> Please click here to attempt to view the information in a separate browser window. Thanks for your patience!</p>
</iframe>
</div>
</div>
For using the google preview in 2021, I had to do the following. Some small adjustments to how it was posted above.
"https://drive.google.com/viewerng/viewer?embedded=true&url=" + encodeURIComponent(pdfUrl)
try pdf.js should also work inside mobile safari: https://github.com/mozilla/pdf.js/
I got the same issue. I found that by setting the focus on an input (doesn't work with div tags) the pdf is displayed.
I fix it by adding an hidden input and set the focus on it. this work around doesn't slowdown the application.
<html><head>
<script>
$(document).ready(function () {
$("#myiframe").load(function () { setTimeout(function () { $(".inputforfocus").focus(); }, 100); });
});
</script></head>
<body>
<div class="main">
<div class="level1">Learning</div>
<input type="hidden" class="inputforfocus">
<div>
<iframe src="PDF/mypdf.pdf" frameborder="0" id="myiframe" allow="fullscreen"></iframe>
</div>
</div>
</body>
</html>
I'm new to jQuery mobile and Phonegap. Sorry if this is not the place to ask for this question.
I'm trying to put a custom image inside a button (not the small icon to the left or to the right but a bigger image).
I use the following code:
<a data-role="button" data-corners="false" data-shadow="false" >
<img src="images/car.png" />
</a>
In the rendering, the image is not centered but goes right.
I have also tried using a class="car-icon" and the corresponding css3 rule:
.ui-icon-car-icon {
background-image: url("car.png");
}
.ui-icon-car-icon {
text-align: center;
}
Any help will be greatly appreciated (I have spent the whole night trying to fix this).
Thanks in advance.
Try using the thing, like this: http://jsfiddle.net/den232/sFupf/
<button><img src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png" height=35 width=35 ></button>
Good luck!
You can try setting your image as the background of your link <a>, and centering it using background-position: center center;:
HTML:
<a id="mybutton" data-role="button" data-corners="false" data-shadow="false" > </a>
CSS:
#mybutton {
background: url('car.png') no-repeat scroll 0 0 transparent;
background-position: center center;
}
I have a page with a button with a background image (sprite). When I do not put my sprite in a table, I get repeated images scattered diagonally across the web browser, and no gallery. In HTML source view, everything looks fine, but if I go to the Inspector, it looks different, repeating buttons that I created diagonally from right to left going down.
Update:
I just realized that another way to get this working was to change:
<a href="../Gallery/Create" class="l_new" />
to
<a href="../Gallery/Create" class="l_new" ></a>
This is no hardship. The only thing I can think of is this must be some bug in my version of #renderbody used with _layout.chtml (I'm using the one generated by visual studio).
Looks like this is going to continue being a mystery but I'll keep my question posted, just in case.
The l_new style contains sprite info:
.l_new
{
width: 170px;
height: 36px;
background-position: -43px -155px;
background-image: url('img/sprites.png?v=6');
background-repeat: no-repeat;
overflow: hidden;
display:block;
}
I could not find anything unusual about the HTML, except the fact that it is in a section tag which I've never used before, and I do not see any javascripts running.
If I enclose the sprite in a table, everything is normal.
Here is what it looks like with Chrome's inspector. It does the same thing in IE9. I have not posted the HTML source, but believe me it's totally normal, and does not reflect the output below.
And here is an example of the index.chtml file which results in the issue:
#model List<AutoShow_MVC.Models.GalleryModel>
#using AutoShow_MVC.Models
#{
ViewBag.Title = "Index";
}
<h2>Photo Gallery</h2>
<a href="../Gallery/Create" class="l_new" />