We all know that Firebug / Web Developer Toolbar, etc. can change the HTML/CSS of any page to our local machines. Upon refreshing, however, we know these changes are not saved.
How does someone save these changes for just our local machine, in an automatic fashion that would have our changes reappear after refreshing the site?
For example, say I go to a blog posting website, which is updated by someone every day. Say I wanted to color the background of every blog's title I've read a bright annoying red, (so quick viewing in the future would allow me to skip over these). In this case, imagine the title is always an h2 element. I would add an inline element to this heading, so:
<h2>The world ends this year!</h2>
becomes
<h2 style="color:red;">The world ends this year!</h2>
Is there any way to Mark, Highlight, or change this blog post title on just our local machine for automatic viewing in the future?
If you're aiming to personalize your own web experience I recommend a Greasemonkey script
that applies CSS programmatically. There is an equivalent plugin called Stylish which is the analog of GM for CSS. There are equivalents for Chrome.
If you're aiming to provide this functionality to users of a website you're creating, I'd look into storing personalized styling on the client-side using HTML5 DOM Storage.
You don't need any plugin or program to do that, just create the userContent.css file in your Firefox profile directory, and paste your custom CSS for the webpage you want, like:
#-moz-document url-prefix(http://www.domain.com/blog/) {
#content h2 {
color:red !important;
}
#content h2 a {
color:red !important;
}
}
you can find more customizable technique on the mozilla developer site
I'm sure there are browser plugins to do something like this - especially for Firefox, etc. (If not, it wouldn't be too complicated to create one.)
Otherwise, I'd investigate Greasemonkey, and write some custom user scripts to do just this. You could have the custom user script apply to all sites, and use a local data store to determine if the site has been previously visited or not.
Ideally, instead of duplicating the history store (since your web browser is already storing history), such a plugin would integrate with the browser history. However, this may not be desirable if you have your browser history configured to only save the most recent # of days, and if you want this listing of "read" posts to be maintained longer-term.
Related
I need to display my EULA page in our console games, but consoles have strict ways to display pages (no external link to other shop, social media, etc...). Therefore, I need to remove the navbar and the footer if I want to comply.
I have made a simple copy of my EULA page for now, but I'm wondering if there is a way to detect that the browser is actually a console game browser so we can just hide the navbar and footer easily and not duplicate the page/text.
I checked if it was possible via the User-Agent but most of the console web browser appear as Safari and I'm pretty sure it will fall under "Desktop" browser.
I'm using PHP + Laravel with Blade to generate the page. For now I have my dirty copy/paste solution, but I'm asking for curiosity if any of you have already done something similar.
Thanks,
Let's say, that I want to demonstrate a widget (or some HTML in a frame) that would be "injected" into another page.
For example: I want to show the people in Amazon.com that I can put let's say a ball image underneath every price tag they put on their web page. That is - I want to build a web server (or indeed a server less html web page) that would show their page and put some stuff of mine inside theirs. So it looks as if the client (Amazon.com here) has my software already installed on their server.
I am a web-dev total newbie, so if this is the simplest thing in the world please, ..
Thanks
There's TONS of special cases that can cause this to fail, but I'll present a simple way that will work for you on a decent amount of webpages(but not all).
save the webpages html source into a local html file.
edit the html source, adding a <base href="http://www.amazon.com/"> tag into the <head> element.
make any other modifcations to the page you want, such as adding new <script> tags to support your new functionality. Make sure your modifications use absolute urls.
If they navigate away from the page, your enhancements will obviously not carry onto the next page. ALso, you will have more success if you upload the file onto a web server. While a user can view the page by double clicking on the html file if they were to save it locally, differences in javascript security permissions will likely make some webpages not function correctly.
The reason you need to add the <base> tag is because the browser resolves relative urls by looking at the url in its address bar. So, if the amazon page had an image like this
<img src="logo.png">
and you saved the html and put it on you webserver at www.example.com, the browser would look for the image at www.example.com/logo.png, which clearly doesn't exist. The base tag tells it what base url to use.
If you need more automation, having them install a browser addon would be a good way to do this if your users are somewhat technical. Greasemonkey is a popular addon, and you can tell it to inject stuff into certain webpages. The benefit of an addon is that it can inject the new functionality into any page on the web, without you having to individually save and modify them. Also, it has the potential to work on all web pages, leaving their functionality perfectly in tact, opposed to the other suggestion. This is far more complicated though.
Is it possible to take a screenshot of the visible part of the website directly as it is seen by user (rendered by by the browser), including any changes made by user (e.g. moved divs, text typed in forms etc.)?
So you open a website, where you can make changes to its content. And there's a button (on the website of course), when you click it, the actual visible part of the website with all the changes you made is saved as an image and for example there goes a popup window where you can type in an email to send this image to, or something like that. Javascript, php, html5 or anything else? Old browsers and ie doesn't matter.
I've searched a lot for the answer, read lots of related articles, but I couldn't find the solution, cause what I need is not the script that would re-render the page like html2canvas, but capture the actual content displayed on the screen.
Any ideas and comments are much appreciated!
This is something that can be extremely tricky.
Essentially your only option of doing this in browser with no extensions or such is to try rendering HTML into the <canvas> tag.
There are several projects which do that, most reliable choices are noted in this SO question's answers: Render HTML in Canvas/WebGL
Note that none of the projects are 100% accurate, but a canvas can be rendered into an image and thus could be saved or emailed by the user like you asked.
I'd like to improve the "help" page of my website by adding screenshots of various sections of the site. I'm hesitant to make these static images since the site is still in development and is cosmetically changing constantly. In fact, I'm even thinking that creating images at all may be overkill.
Is it possible to load (via PHP or JQuery) a small section (with static size and x y) of another page and display it in a div?
We're doing a thing like that in our Help section, but I think that dynamically loading live screenshots is a waiste of resources.
Actually, we're doing this in our build process, just after our tests. A headless browser (selenium under xvfb) is used to take a full screen screenshot of our different pages, on our pre-deployed application.
Then, we a modification occured, the build process take care of including the modifications...
Load the Page you want the "screenshot" of into an <iframe> with the desired size and use an anchor or http://api.jquery.com/scroll/ to move the contents to the position, you want to show.
if you don't want the user to scroll away or interact with the iframe, just put a transparent layer over it.
It is also very helpful to make a GIF of the screen to show the user how to do something fast, instead of written explanations, so if there are cosmetics changes, the user can continue seeing how to do something, you can create the Screen recording GIFs with http://www.getcloudapp.com
Not sure the best way to describe what I mean, the best way is to look at Facebook whilst I explain.
The bar at the bottom of Facebook will always stay the same, with all chat windows open, and no flicking when you change a page, however, the webpage and the address bar will all change to the new page that you requested, to me that seems like the webpage doesn't actually change at all, and instead, the address bars' URL changes as well as the page content.
I am working on a music player for a bands website, that I want to keep static across all the pages on the site, without reloading and starting again every new page.
The bottom bar is positioned with position: fixed which makes it relative to the viewport, not the document.
The other pages are loaded with XHR, or AJAX.
The changing URL is probably the fragment identifier, unless you have a cutting edge browser, which appears to be using the HTML5 history API (GitHub currently is too).
Zach Rait, an engineer on our infrastructure team, implemented the History API to enable selective loading of page content via AJAX while preserving readable URLs. Previously, current application state was stored in the URL fragment which resulted in unseemly URLs like “profile.php?id=1586010043#!/pages/Haskell/401573824771”. Now, because HTML5 allows us to decouple the currently displayed URL from the actual state of the application, we’re able to display pages more quickly, save bandwidth, and avoid polluting users’ location bars.
Source.
sounds like you want a template and using JQuery or a similar language to dynamically load new content on a portion of the site?
In this way, JQuery will use ajax to load new content in part of the main window without you ever experiencing much of the main page reloading.
You can use css to style a bar at the bottom
#somelink{
position:absolute;
bottom:0px;
}
HTML
click me
<div id="news">Replace me with new content</div>
JQuery
$("#somelink").click(function(){
$("#news").get("album.html",function(data){$(this).html(data);});
});