I've created a local website to be used as a database where I work. It's made using Rails 3.2, and TwitterBootstrap for most of the CSS. The problem is, if I want to print the view on my browser by going to file-print, or tools-print, or rightclick-print (depending on the browser), the print preview looks completely different than the actual browser page does. For example, I have my "Index" view loaded with a nice table that has 6-8 columns, but when I print almost all of the information in the columns disapears and random code pops up in random places, including the URL, some SQL, and some folder paths where the links belong. I just want to be able to print the page as it looks in the browser (without having to do a print screen every time).
As it turns out, I need to set up a CSS specially for printing. Then inserting the css link into my HTML header with media="print".
As shown here: http://www.w3schools.com/css/css_mediatypes.asp
Related
I'm doing a chrome extension to manager tabs, and I need change their titles, but I also want to keep their original titles in chrome://history, but chrome always updates the page's modified title immediately, I've tried so many times and still struggling with it.
I've tried these following unsuccessful methods:
Using chrome.history.pushState() or chrome.history.replaceState().
Deleting a history entry then add this entry again with it's original title, chrome doesn't support that way (New added entry won't have title nor favicon).
Changing title back before closing the tab.
Changing chrome database directly (Extra native application will be needed).
....
So is it possible to do this for chrome ?
I have a site that has multiple pages. The first page is just a listview with icons and links to the other pages. CSS stylesheets work fine on the first page, but when I go to one of the linked pages, my custom css stylesheet (and js for that matter), related to that page, is being ignored. If I look in the FF inspector I see that it has dropped the associated lines that tell it about my stylesheet. If I directly go to the desired page or if I hit refresh, the styles look fine, but whenever I come from a link off the first page, the styles are gone. I see no errors when loading the page. Is this a know issue? How can I force it to not ignore my stylesheets.
I am using jquery mobile 1.4.5 in addition to my own.
Looking further. It looks like hitting the link is appending the body of the 2nd page at the end of the first and not simply loading the 2nd page.
It turns out that by default links behave a little different than normal when using jQuery Mobile. The don't do a full page load, but instead only inject the part contained in a div marked with data-role="page". I did not know this.
http://demos.jquerymobile.com/1.1.1/docs/pages/page-links.html
I have a question.
I am currently building a "blog" website. Not that it matters but..
I am trying to set my background to be a specific image that i have.
And it used to work! Until recently and I just don't know why it wont.
It works when i am on my computer, everything works fine.
But i am using 000Webhost as the hoster for the website.
So if u go to "http://pontuslundhblogg.uphero.com/"
You might see that the website is completely white. Cause the picture wont load for the background.
In my css sheet, i am using:
body {
background-image: url("bakgrund.jpg");
And yes, i did name the picture bakgrund.jpg and uploaded it to 000webhost. Its the exact same name etc. I wondering.. Could two different css stylesheets make so it gets weird or something? Cause I added a second css style sheet to be able to have a drop-down menu in a different sheet, and i added the drop-menu. Around that time it started messing with me..
Is it me doing something wrong.
Or is it 000Webhost?
(Might add that none of my pictures is working now, i can also contribute with more code if needed!)
If you go to pontuslundhblogg.uphero.com/bakgrund.jpg you get a message
"The image pontuslundhblogg.uphero.com/bakgrund.jpg cannot be
displayed because it contains errors".
If you go to pontuslundhblogg.uphero.com/bakgrund1.jpg you get 404 page, which means that the first path (bakgrund.jpg) is correct - but the image itself isn't good.
Try to upload it again or contact the hosting service.
If you use FTP maybe you need to change something in your FTP program settings - maybe change from ASCII to Binary transfer.
http://www.inmotionhosting.com/support/website/file-management/corrupt-file-ftp-transfer
I'm using Lightbox for the first time, and it's working for my images. However, for some reason, I get a strange box at the end of my page that shows the loading icon, even though there shouldn't be an image there.
The image: http://i.imgur.com/ACImB.png
Upon inspecting the element, I get the following HTML code.
<div id="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image"><div class="lb-nav"><a class="lb-prev"></a><a class="lb-next"></a></div><div class="lb-loader"><a class="lb-cancel"><img src="/z/styles/images/loading.gif"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"><img src="/z/styles/images/close.png"></a></div></div></div></div>
The strange part about this code is that I didn't make that div, it seems to have just been inserted by the script. Does anyone know what this might be and how to get rid of it?
This could easily be a problem with your css or script path.
If you look at the lightbox2 demo it displays that loading page you see and then removes it to display the loaded image. When either the javascript or stylesheets are not correctly linked it will not work properly.
Lightbox2 site: http://lokeshdhakar.com/projects/lightbox2/
You can try using (in chrome, for firefox there's firebug) right-click inspect element, go to the resources tab and expand the frames boxes until you see all the images, scripts and style sheets in a list. It'll let you know if one of them can't be found.
I had the same issue when I integrated Lightbox with an MVC site. The issue was I had referred both lightbox.js and lightbox.min.js files. I fixed the issue by removing one reference.
I have an app that displays transcripts, something like this myapp.com/transcript/1234 The transcripts are formatted so they can just be printed from the browser (ctrl+p).
What should I do to allow the users to be able to print multiple transcripts without visiting each page? e.g. Print transcripts for every user in group B.
Should I create a new view that just displays all of the requested transcripts at once?
Do I now have to look into creating PDFs? (shoot me)
Other thoughts?
If you want to keep it simple, create/change a view to display all the transcripts to be printed. Wrap each transcript in a container with a style class (like a div, <div class="transcript">...</div>). Use CSS to style each container such that a page-break occurs for each transcript. The style will look something like the following.
.transcript: {
page-break-after: always;
}
I personally just create pdfs. Using it for things such as official time sheets and various other forms I can't change. It is actually very simple to do with itextsharp and if your PDF has properly labeled input fields (aka isn't just one big scanned image or something).