There Is A Date Picker Code In my Program (Of Course We Placed A Calendar Picture In The Web Page) The Problem Now Is That How Can We Be Able Not To Include The Picture Of The Calendar Picture In Printing?
Use a specific CSS for printing: http://www.alistapart.com/articles/goingtoprint/
Manipulate the dom (remove the image) before printing and insert it back afterwards.
The picture is most likely a background image. Browsers don't print background images by default. You'll need to activate printing of background images (and colors) in your browsers options.
If that's not a option you'll need to change your code, so that the image becomes a normal image instead of a background image.
First You should clarify what is Date Picker - is it Your custom code, or Jquery's one. If its javascript widget as with Jquery, its a common problem with different browsers. My suggestion would be - try YUI calendar instead, it shows well on IE, Firefox and even old Opera. Example:
http://developer.yahoo.com/yui/examples/calendar/formtxt.html
By the way, Jquery's DatePicker shows well in Firefox 3.6.
Related
Strange bug I fixed once in the past but did not write it down/document it/report it so now I'm lost in the same workframe.
So, it's an Angular 2 app, the content is hardcoded html, no Angular binded variables, data banding or similar.
The bug show up on Chrome, not on Firefox.
If I refresh 10 times in a row, the content will show up sometimes and won't others, there is no pattern or clues about it.
Once the content is hidden, if i change whatever element property, will show up all the content instantly.
I have attached a gif which explains the bug clearly.
Thanks for any idea/suggestion/help :)
EDIT 1:
I just added 2 pictures of the css computed, one with Bootstrap 4 and other without the framework, same result.
Not related at all to Angular or any stuff like that.
I am importing a font from the GoogleFonts page. If I download this font, I get TTF format, which is having a bug on Chrome and does not work properly, but if I link to their server, it's using WOFF2 format.
See this picture attached which it shows the different formats for the same font.
I have a select box where each option has the potential to be very long. On desktop it's fine, but on mobile the text gets cutoff at the end of each line with an ellipsis. I need to be able to show the full text, or else the options may not be clear to my users. If I can make the text wrap rather than cutting off that would be fine, but I don't know how to accomplish this since I'm not sure how the iPhone handles select elements.
Select options on iPhone
According to this StackOverflow answer, there is no way to change the styling of <select> elements on iOS, as their display styles are built into the browser and not modifiable via CSS.
This answer suggests that you can use a customizable replacement such as Chosen if you would like more control over the style of your <select> boxes.
Apparently Chosen doesn't support iOS. A comment on another answer recommends Selectize.js as an iOS-compatible replacement.
I use Responsive Web design to turn my page into mobile layout, but something weird happens,, why the style of checkbox in IOS changes like that, the checkbox border disappear, and the check symbol is hollow.
please see the attachment.
The first image is the screenshot of Chrome
The first image is the screenshot of iphone4
What should I do to make the checkbox in IOS as same as normal checkbox?
In general, you shouldn't. Each browser and OS can style their controls differently. This is not a part of the HTML standard.
MacOS also styles their checkboxes different, as does Linux.
Why do you feel the need to change the way the checkboxes are styled? Users of that platform are used to the checkboxes looking the way that OS makes them. If you style them differently, then users will find this odd.
I have a page with a series of divs. Each div represents a slide in a slide deck. I need a series of thumbnails, one for each slide. Ideally these thumbnails would be rasterized versions of the slides: a PNG data: url would be perfect. I'd like the work to be done in the browser, and I'm okay with things that only work in one of the modern browsers (e.g. chrome, or firefox). I suspect this is impossible, but would love to hear otherwise.
The method toDataURL() on the canvas object is essentially what I want, but the divs in question aren't instances of canvas, so that won't work.
One solution can be to render HTML to a canvas by embedding the HTML into an SVG image as a <foreignObject> and then drawing the resulting image via ctx.drawImage().
Read the article on MDN here, or take a look at rasterizeHTML.js which is an implementation of said approach.
The limitations are that your content should all be same-origin clean (i.e. accessible by AJAX).
Disclaimer: I am the author of rasterizeHTML.js.
It isn't possible on the client side as this is forbidden to protect from potential frauds like for ie script that would take a screenshot of your page with some private data and send it god one knows where.
Although...
it is possible to copy whole HTML to use it as a thumb preview/whatever and use CSS3 transformations (scaling) + add overlay over it to prevent interactions/text selection etc to mimic a thumbnail of a div.
and there was an option in firefox/chrome extensions to save page to an image - though not sure if it was possible to take only part of the page as an image
or you can always do like google does on its search results page with their page preview (click the magnifying lens near the result title) - have a robot machine which enters the page and takes a screenshot of whatever to produce the preview of the page using this data - don't know how much you WANT to do that but if you wanted it that bad... :)
I'm afraid there is no easy way to do what you want and the CSS3 trick one seems to be the easiest one to pull of.
you can rasterize html to a <canvas> element in javascript with the rasterizeHTML library:
http://cburgmer.github.io/rasterizeHTML.js/
I use a screenshot tool like SnagIt and this tool is able to make a screenshot of a specific element inside a website. I tried this feature with firefox, safari and ie, all runs fine. When I use the mouse pointer to aim an element, SnagIt shows a red box around the hovered element in the browser. For example, this tool knows the exact coordinates of a div or img element.
What is the technique behind this feature? Is there a common way for every browser? I've already used Spy++ to get the window handles, unfortunately this isn't the resolution.
I'm in a project in which I need this feature for different browsers.
Thank you very much,
Mark
If you want to know the x,y coordinates of any element in javascript, Then I suggest you use jquery [http://jquery.com] on your page and use its offset function.