My website system is running on chrome 37+ and using Angular.js and bootstrap.
For some reason, I can't print my website.
When i try to print my website (using the browser print dialog), I usually get a blank print preview ("can not load print preview"). Sometimes it is not blank, but not really show my website.
I tried to run my website on some google chrome versions and some computers and it is not working.
I have been searching for reasons, but can't find one that will fix this issue.
Let my know for reasons for this issue. Thank you.
Chrome actually does have emulation of printing. See
You'll find this in a tab adjacent to console within developer tools. By enabling CSS media on print, you'll see your site with any print media applied. Once enabled, you may use the element inspection as usual to see how those extra css rules affect your site.
In particular, bootstrap will remove any background, and run a bunch of defaults across many typical elements.
Also, see this answer https://stackoverflow.com/a/21156904/2923245
Related
UPDATE: I have updated this post more than 5 times but still couldn't
get appropriate answer , I'll appreciate if you could read my question
carefully and answer it <3
I want to create slideshow just like bwin's mobile version website. I started to analyse how it works. but it works weird, if you use inspect element in google chrome or any browsers you can see the slideshow works without any inline styles added dynamically.
in every slideshows that I've seen before there was inline styles that they added to HTML tags in a specific time interval. in this case I can't see any inline styles that add to tags but it works like a charm. I checked the CSS files for the keyframe property and there was nothing and of curse they don't use transition too.
for more information is good to say they use angular as their front-end framework.
Note: please open the mobile version of the website in computer to see what is going on !
The address is : https://sports.m.bwin.com/en/sports
I'll be appreciated if you tell how does the bwin's slideshow works? and how to create this slideshow?
thanks a lot <3
UPDATE: Special thanks to Sergiu Paraschiv that he figured out google
chrome's dev tools doesn't show inline changes for translateX property
of DOM Shadows , he tested the bwin's mobile version with his Safari
in his Mac machine and he captured screenshot "imgur.com/a/Php4EhB" ,
so you can see the inline changes in Safari browser of Mac OS . Why
google chrome or firefox doesn't show the changes of inline translateX
property of the DOM Shadows?
I am writing print CSS for my site. Now the problem is that Firebug or similar devtools don't work in the browser's print preview. So it's hard for me to detect the problem.
Does anyone have a suggestion how to debug CSS print layout?
The Chrome DevTools can do this by changing the Media CSS option in the Emulation menu.
Check this out: Suggestions for debugging print stylesheets?
On Firefox you must select the Display CSS by Media Type option with the Web Developer add-on and then Firebug will work. There's also an enhancement request for Firebug to support switching between different media types.
Check this out, too: How do you debug printable CSS?
I installed a WP theme recently and am having trouble getting a Facebook conversion box to display when I visit my site through Chrome. This problem doesn't exist on Firefox.
The response I get on Chrome is no visible pop-up box, but upon inspecting the element, I do see the code for the box in my header.php with a line from the Chrome User Agent saying:
script {
display: none;
Is there a CSS solution to override the User Agent and get the script to display? Again, I have no problems with the theme on Firefox. Here's a link to my site.
Thanks in advance!
I think I found the source of your problem. It's a browser extension.
Your conversion box appears on my personal laptop. However, it doesn't on my work laptop. That lead me to believe that it was a conflict with the script & a browser extension. So I opened your site in an incognito window. Voila! it worked. The next step was figuring out which extension was blocking it. For me, it is LastPass (my work requires the use of LastPass).
If you have LastPass enabled as an extension, disable it. Then test again.
It'd also be a good idea to get these console errors figured out:
Uncaught SyntaxError: Unexpected token ; (index):476
carouFredSel: No element found for "#foo1". jquery.carouFredSel-6.2.1.js?ver=3.8.3:4232
Uncaught ReferenceError: paginateVal is not defined cgview.js?ver=3.8.3:28
Solutions
Unfortunately, there isn't much you can do about people's individual extensions. If this is an absolutely critical feature for you, I'd look at finding a different implementation of it. One that does not conflict with common extensions (that's the easy option).
The other option (harder) is to look into the code of the plugin/script that you're using for the conversion box and identify the conflict.
Last option (hardest) is to look at LastPass extension source code and identify the bug that is preventing other scripts from running. I've had issues with LastPass interfering with javascript in the past.
I used tumblr's javascript embed code to embed my posts into an external website. Now I want to style the posts. Where can I find the full list of tags, classes, and all of that in order to do this? I see people posting some of the tags, for exampe ol.tumblr_posts, but no one has said how or where they actually found out that's the tag tumblr is using for that particular element.
Someone mentioned using the web developer extension in Firefox to pull out the HTML associated with the javascript file but I can't use Firefox so I need another suggestion? I did go to tumblr's docs but the tags and everything used for customizing themes WITHIN tumblr seem to be different from the ones used to display posts outside of tumblr.
I also looked around in the api section and didn't see anything that lists all of the tags. Thanks!
UPDATE: Here's a post that discusses what I'm talking about but none of the people giving answers that show what tags to use to format the script's output say how or where they got the tags.
tumblr javascript embed with css skin
This website is the one that said to use the FF add on but again, the person who figures out how to find the tags using it doesn't say HOW, they just say it worked. I'm finally in a place where I can use Firefox so I installed this web developer thing and I still don't see where I would go to see the info that shows the actual html with all the styles instead of just showing the link to the js code.
http://forums.macrumors.com/showthread.php?t=745299
Chrome and Opera's developer console is CTRL + SHIFT + I... try looking in the source there
IE's dev tools is f12 if you can't use Chrome
Also: I'm not sure if this is what you're talking about but I'll throw in this link for good measure:
http://www.tumblr.com/docs/en/custom_themes
I figured it out! Unfortunately, the only way I could do this was to use the Firefox Web Developer Toolbar Add-On. Once you have that installed, you go to the webpage where you've embedded your blog's javascript code.
Then, in the Firefox toolbar, there should be a tab that says "Miscellaneous". Click on that, then click on "Edit HTML". A new pane opens up towards the bottom of the browser. Inside, it will show the source of the webpage INCLUDING the information that the javascript code generates, which shows the classes, html, and all of that.
It's still not a ton that you can customize compared to using the api (which I don't know how to do) but it's a start. Thanks everyone!
I am trying to extend some Javascript in one of my pages and for quick "will this work" code it's a huge pain. Basically it consists of editing code in my IDE and save, switch to Firefox, reload page, set breakpoint in Firebug, examine and repeat
Are there any Firefox extensions that will aid me in this respect?
The only thing I can find is using javascript: ... in the address bar, but that's a huge pain, can only hold a single line, and there is no way of making the test code persist across a page reload.
Try jsfiddle.net. You can experiment with html, css and code within your browser and debug that with firebug for example. You can use a diversity of js-frameworks (or none), simulate XHR, and add your own (js/css)resources. It's not ideal, but much better than the practice you described.
You can also try using KomodoEdit, which offers 'view in browser' functionality, even for URLS and with a preset browser.
just use the js console that comes with firebug. You can write all manner of code in there and even declare functions and variables that can be referenced. if you need more than one line, firebug can do that too.
EDIT: except page reload.... if you need to do page reload it needs to be saved somewhere. I would use a Greasemonkey script
You can use the Web Console (new in Firefox 4 and higher) - press Ctrl-Shift-K to open it for a particular page. The command line is at the bottom, press Shift-Enter on the command line to enter more than one line.