I am trying to add print functionality to one of our web maps, and am having trouble getting an absolutely-positioned div to display when I print. It displays correctly on my page, even when just the print stylesheet is applied to the page. But when I print it doesn't show up at all.
Rather than trying to add all the code here, I just put up a quick demo page to demonstrate the problem: http://maps.nps.gov/maps/rich/footstepsofhistory. To see the problem:
Load the page
Click on a point on the map
Try to print it
The print capability works exactly as expected, other than the fact that the InfoBox does not display.
Any help is much appreciated, and I can supply more information, if needed.
Related
I've been trying for a while to get the bullets in Roam (RoamResearch) to extend all the way to where the filter button is in the "linked references" section at the bottom of the page. When the sidebar is close, the bullets actually do extend out that far and they can show more content on a single line. But I want to always have the bullets reach that far.
I've dug into the CSS but can't find out how. Here's a link to the Roam help page with a demo graph to dig into.
I'll attach a screenshot below to show where I want it to extend. For some reason, I just can't figure this one out. I've used the developer tools in Chrome to try and figure it out, but I just can't.
I'm working on printing product web page. Employ #media print {...} to customize components for proper appearance on print canvas. But one issue I even can't understand how to drill to the root of the problem. The issue is that 3 out of 5 total pages are blank. First two pages rendered with content and then three blank pages. Chrome print preview popup window just give result and I have no clue what component(s) responsible for "printing" blank pages.
I find how to use chrome devtool to emulate print canvas and drill down to trouble maker
I have created a print button in my application that opens a new window that goes to print device layout by appending the current url with QueryString of Print device(?p=1 in my case) and onload it calls window.print() function. But this is useless because all the data user has entered will be lost when it opens a new window containing print device layout of the current page.
I can't think of a way by which I can use the print device layout and pre-populate the page with data user has entered. Can anyone help me with this?
Thanks in advance.
The point of the Print Device to be able to have a different set of Presentation components for display or print. Sometimes it is sufficient (and easier) to just use a print stylesheet, which hides/restyles certain elements: https://stackoverflow.com/a/12773239/19112
Obviously Devices works fine for non-form pages, or forms that have been posted and a confirmation page is shown (no input boxes, just text).
An alternative would be to use Rendering Parameters to set on each control, which could add a .print or .do-not-print class to then be used by the print stylesheet. You would then have to set the appropriate styles in the stylesheet to hide those elements. Note however that you cannot style the iframe content from the parent, you must link a separate stylesheet to the iframe src page if you want to style when printing.
You can append the user inputs to the print URL query string using javascript, for example:
var url = 'Current-Page-URL' + '?p=1' + '&input1=[INPUT1]'+ '&input2=[INPUT2]' etc..
Then in Page load event, you can set these inputs in the corresponding text/dropdown elements
Like mentioned above that device is a different set of presentation that can be used for many purpose. Early years when there weren’t responsive design, I used device to rendering different mobile device. You can use device to render rss feed or anything you want where you want to have different render set.
Another example if you have multi sites and want to rendering them differently you can use device as well.
Sitecore is very flexible that’s why I love it so much. There are always other ways to get same or similar results. From your context I don’t know what you are trying to achieve. If I want to have different set of presentation
here is some approach I will look into, Lavage rendering rules, tap into request pipeline, swap rendering controls in code, on item level specify style sheet…
If you can tell us what you are trying to achieve, I am sure someone will provide you their own solution. Then you will have more options to choose from and get the best fit to your project.
Hope this help.
I have to build a site like France24.com, There is a navigation on the left and two arrows on sides for scrolling to the sides. when you click on the arrows or one of navigation items , the related page (preloads) and appears without refreshing the page. How to do that? Is there any usable framework or sample for this?
Regards
After looking at the website, I see what you are trying to do. I see a way to do this, which is through a simple JQuery method load() ( http://api.jquery.com/load/ ). This behaves like get(), so on clicking the arrow, an event could be triggered where you can load another piece of HTML code in place of the one the user is currently looking at.
If you need dynamic content to load instead of a simple static HTML code, it's possible to achieve that by filling in the dynamic part into the HTML code that you want to load before actually loading it. A library that you can use to achieve something like this is React js, developed by FB. Good luck!
I have a Wordpress site that uses a JQuery plugin called Hover-Caption ( https://github.com/coryschires/hover-caption ).
The main page of site: (http://brighidfitzsimons.com) looks good.
However in Internet Explorer 9, a similar page based on Category adds a 282px top offset to the post thumbnail image. (http://brighidfitzsimons.com/category/lifestyle/)
I am new web developer so I am struggling to figure out how to isolate problem. Based on this stackoverflow entry ( How do I get rid of an element's offset using CSS? ) my current train of thought is to add a IE specific CSS sheet to 'reverse' the offset but I can't seem to get at the offending element. Also I'm confused why works on main page but not on category page. If you watch page loading carefully, it initially loads correctly then at the very end the images are moved down. Perhaps this is a clue.
First stackoverflow entry so I hope I have followed correct ettiquete. Please advise if you need me to provide any more information.
Thanks for taking time to read problem.
Regards Simon
It has something to do with the substitutions of the content inside the title, probably some quirk about ie9 which someone else would have more of an idea for me
just so you can take my word for it: http://jsfiddle.net/BXjK3/
the first two i have removed all the greater, lesser and quotes and it works, but I would say the browser does the substitutions before Javascript can see it, and it all goes down-hill
edit: worth mentioning the reason it looks like that is because the text is no longer properly contained, and so the display none is not taking effect on it, pushing all the images down and making it a jumble, due to the way the content is loaded the ie inspection cannot show me how the text is after the javascript, only what was loaded on page load, so i can't give you more help than that