I'm working on a small part of a large web site. I'm having some problems with the print version of a page, which uses <css media="print">. I wonder if there is a way of displaying the print version of the page in the browser, so that I can inspect it and find the errors.
If you have a style sheet set to "screen" and another one set to "print" you could temporarily change the "print" one to also be "screen".
The extension Web developer (http://chrispederick.com/work/web-developer/) has a display print style function that may help you.
I think you have to create another page which is optimized for printer (printer friendly page), and Just add $(document).ready(function() {
window.print();
});
Then change the link to the 'print' button to this new file.
Related
I'm working on an assignment for a class where our teacher has given us a webpage built out with html and css. We are eventually supposed to create some animations with gsap, but first need to make our own edits to the webpage itself. I am using vscode and when I edit any of the html, the changes show up in my index.html, but not in the browser. Any idea why this is?
try to right click your browser and check in the sources to make sure it really saved your changes.
Try to use live server on VS Code and then whenever you save it will show up on the page.
-> https://techstacker.com/local-live-server-vscode/
Make sure you save the file and reload the page in the browser
I know you can't hide HTML / Javascript / CSS because it's run on the client side, but how does iCloud.com hide its HTML?
When I view the page source on iCloud.com I just get presented with loads of Javascript, but when I go to inspect element in Chrome I can see the HTML.
I was just curious as to how they did this.
If you look closer at the page source you'll see this:
#noscript div#container{position:absolute;top:0;left:0;right:0;bottom:0;min-height:500px;}
#noscript div#overlay{position:absolute;top:0;left:0;right:0;bottom:0;min-width:600px;min-height:550px;background:#0B080E;opacity:.84;}
#noscript div#container div.float-center-canvas{z-index:101;position:absolute;background-image:url
....
It seems all the markup is generated in javascript and if javascript isn't enabled they run noscript. Not that anyone would be able to use iCloud without JavaScript in the first place...
All that javascript you see when viewing the source is responsible for generating the document that you can then inspect in developer tools once the page is loaded. Nothing is hidden; it's just that the document doesn't get generated until after the page is loaded.
how to change title without refresh or reload ? It can be changed by jquery but effect will not be done on view source.
i've use document.title. On browser it is changing value but when i open page source it shows blank.
There is no way to change the source of a page with (client-side) JavaScript. The source is the raw code that was delivered to the browser.
You can change the current DOM, and a DOM viewer (such as you can find built into most browser Developer Tools) will show you a serialization of the current state of the DOM.
...but when i open page source it shows blank.
Could you elaborate? I've just tried this myself and it works fine:
<head>
<title>Abc</title>
</head>
$(document).ready(function() {
$('title').text('test');
})
When viewing the source of the page the title now contains "test".
JSFiddle example.
I am trying to access the HTML code source of AJAX dynamically loaded content. How could I do it?
For example on Gmail, I am trying to access the HTML code of a given email discussion's content (the different entries of a given email discussion) which is loaded only when I click on this email discussion's line in the main list. The code source I can access is only the one of the page initially loaded (the list of all email discussions). Any idea?
Right-click on the page and select "Inspect Element". The element view is updated when JavaScript makes changes to the page, whereas the "View Source" view only shows content from when the page was loaded.
If you right click -> "View Source", it will show you the contents of a reloaded version of the page you are on.
Using "Inspect element" (hotkey CTRL+SHIFT+i) in Chrome shows the source of the dynamic content.
I think you want to bind event on the dom element that loaded after initial page load using ajax. If so then you can use jQuery library and you can use live method of jquery.
Here is a link for live method, you can check that.
http://api.jquery.com/live/
What you need
Download jquery latest library (http://docs.jquery.com/Downloading_jQuery)
and then include it in script within head
or you can use cdn http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
then do like following
<script>
$(document).ready(function(){
$("#ajax_dom_element_id").live('click_or_any_event',function(){
code snippet you wan dot
});
});
</script>
I think it will be helpfull.
I'm trying to create a relatively basic custom fan page tab with Developer, and for some reason I'm unable to add the app to any pages. In the past with other similar , I've had a "view app profile page" link on the left, but for some reason it's not showing up.
Am I missing a step?
Go to: https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL where YOUR_APP_ID is found in your app settings, and YOUR_URL is indeed the URL of the tab (this has to be there an correct). This will take you to the Add to Page Dialog of your page.
This is taken from this tutorial: https://developers.facebook.com/docs/appsonfacebook/pagetabs/
If you want to make a button so that anyone can add the tab to their pages check DMCS' link.
See: http://developers.facebook.com/docs/reference/dialogs/add_to_page/