I'm writing an MVC application. The result page shows a table with 10 columns. However, when the user hits the print button in the browser or hits Ctrl-P, I want two of the columns to disappear (they're just hyperlinks). Is there an easy way to know this is happening so I can hide or remove the display of those columns.
The best way is to use CSS for this. You can specify some styles that only apply when someone is printing using #media print.
One thing I tend to do is add the following style to my style sheet
#media print {
.dont-print {
display: none !important;
}
}
Then, anything you don't want to show up when the user prints the page, you give a class "dont-print".
Use a CSS file that defines classes that are applied during print.
Media Types are your friend here: http://www.w3schools.com/css/css_mediatypes.asp
Related
I have used angular ui-grid in my application and my page contains simple text box and validate button. usually we add some strings in the text box and clicks on validate button and those will get validated with some external service and display data in ui-grid
My logic is working like a champ but I see there is something which causes some confusion to users. lets say if I add something like "Event 87654" in my text box and click on validate button, it gets validated successfully from my service and display just as "Event 87654" in data grid. so thing is why ui grid eliminates multiple intermediate spaces in the given string automatically?? is it possible to avoid this elimination?? can anyone suggest me in the regard.
here is the solution.
UI grid eliminates multiple spaces and keep only one because white spaces are trimmed out by ui-grid-cell-contents css
So just we need to have override css like below.
.ui-grid-cell-contents {
white-space: pre !important; /*nowrap by default*/
}
I'm developing a web application that is making use of tabs. I've run one issue that seems small, but I haven't been able to locate a solution and I'm worried it is indicative of larger problems with my code.
My application has one main page that includes a tab container with several content panes then inserted as children. I figured that having each content pane load an external HTML file and loading it that way was a good solution - it seemed to provide modular design and allow for easy changing of the contents of an individual tab. The issue I am running into now is that while everything loads correctly, I'm unable to provide anchor links in inside a tab or between tabs. Here is some sample code:
var tabs = new TabContainer({
style: "height: 100%; width: 100%;"
}, "tab-container");
tabs.startup();
var metadata = new ContentPane({
title: "Metadata",
id: "Metadata"
});
/* repeat for the non-metadata content panes */
request.get("/js/viewer/templates/splash.html").then(function (results) {
splash.set("content", results);
});
/* repeat for each pane */
For my metadata page I want it to contain information about the datasets I am providing to users. Ideally, it would have a table of contents with anchor links to the proper entries. However, when I implement an anchor link, like so:
Click me to jump down the page!
<!-- some content here -->
<div id="test">We made it!</div>
The link is clickable and it does in fact bring you to the proper location, but it seems to invariably load this in a new frame that requires a user to reload the page if they wish to do anything else. I've tried playing with tag properties but it's been to no avail. I'm also hoping to be able to link between tabs (say, if a user is querying on one of the query pages I have presented them and then wants to know where a dataset came from or other information).
Here is a simple imgur album showing what happens: http://imgur.com/a/JCnlH
After clicking the link in the first image, you're sent down the page. However, the tab bar and the navigation bar of the page disappear completely, even when you scroll back up. I don't know why this is.
So, this has been a long question, but here is the core of it:
What am I doing wrong with anchor links?
To answer your first question:
You should put all JavaScript inside your main page, not inside partials. This is not considered a best practice with JavaScript because it means you will have to eval() the content and usually when you start doing that when you don't need to, then you're doing something wrong.
In this case you can easily add all JavaScript code to the main page. If you need to wait for a specific tab to be opened or loaded, you can use the onShow or onLoad events on the dijit/layout/ContentPane widgets.
Also, when you're using ContentPane you should use the proper setters for adding content/HTML to it.
Rather than doing:
request.get("/js/viewer/templates/splash.html").then(function (results) {
dojo.byId("Splash").innerHTML = results;
});
You should be doing:
request.get("/js/viewer/templates/splash.html").then(function (results) {
splash.set("content", results);
});
Or if you don't have a reference anymore to the splash variable, you should be using registry.byId("splash").set("content", results).
About the hyperlinks, I have no idea. I'm not getting the same behavior, so could you explain a bit further on that?
Here's a (as far as I can see) working example: http://jsfiddle.net/n4515tsz/
In my case, this behavior seems to be caused by interaction of the overflow: hidden CSS property of my website's body interacting with the height: 100% property of my tab container. I didn't realize that the overflow: hidden property was set because it was part of a framework I was using. By changing the overflow property I have been able to achieve the desired behavior.
All the form examples in the docs for jQuery mobile show each form element on its own line. I would like to have a standard button (which will link to another page), to the right of a search input field. Is that possible with jQuery Mobile?
Thanks
Not natively as an inline unit. However, form elements can be used together with the layout grid system reasonably effectively:
http://jquerymobile.com/demos/1.1.0/docs/content/content-grids.html
jQM's UI grids force columns of equal width. In my case, i wanted the submit button to be just the icon to allow the search box more room. i saw <table> mentioned in a couple posts, but discovered that other inputs (notably selectmenu) don't work correctly when they're children of unexpected elements. [1]
So to avoid breakage of the widgets, i managed this:
.ui-grid-a.my-grid-a .ui-block-a.my-block-8515-a {
width: 84.95%;
}
.ui-grid-a.my-grid-a .ui-block-b.my-block-8515-b {
width: 14.95%;
}
It's not bullet-proof, but it can be expanded to additional grid definitions. It uses specificity to get all the grid rules of the existing UI, but then redefine the column widths. No inline styles, no additional tags, and the widgets don't break. And because of specificity, it can be loaded before or after jQM's structure stylesheet.
[1]: https://github.com/jquery/jquery-mobile/issues/6077 jQM Github bug report
With new version you can:
http://view.jquerymobile.com/1.4.0/demos/controlgroup/#Textinputs
The old style solution still works:overwriting the ui-input-search
div.ui-input-search{
width: 55%;
display: inline-block;
}
don't forget to add ui-btn-inline in the class of the a href (if you use the Button markup syntax)
I'm trying to show a list of messages to the user where the first two lines from each message are showing and they can click to see more.
So I was thinking the accordion would be an interesting way to do this. The only problem is that I can only show the normal single line header row. Is there a way I can show multiple lines or do I need to look for an alternative control like Kwicks?
Ive just given it a go and you can use a < br > inside of the h3 to give it an extra line, or maybe try setting the wraping attributes for the css if you cant manually put a line break in.
Take a look at http://jsfiddle.net/YY7ML/ for a basic example.
Or maybe I have misunderstood?
I am working on an existing site which uses sifr. It was set up to substitute all h1, h2, etc with sifr. I need to prevent this from happening on just a couple headlines.
Unfortunately because of the timeline I do not have the time to change the sifr-config to be more locked down and then change all of the html pages too.
Is there some way I can add a class to an H1 to prevent sifr?
You can add the sIFR-ignore class to elements you do not want to be replaced.
Please note that any sIFR-related CSS applied to the elements in question (such as .sIFR-active h1 rules) may still apply.