I've created a page with CSS. Now I must change from my editor to my browser and refresh the full page, just to have a look at every little change. But I don't want to refresh the page, because I have some animations.
So is there anything which I can use that my site updates automatically after a CSS update?
Maybe with JavaScript, jQuery, Ajax or something?
Here you are: http://cssrefresh.frebsite.nl/
CSSrefresh is a small, unobstructive javascript file that monitors the CSS-files included in your webpage. As soon as you save a CSS-file, the changes are directly implemented, without having to refresh your browser.
Just insert the javascript file and it works!
But note: It only works when you have the files on a server!
Edit: LiveStyle
If you develop with Sublime Text and Google Chrome or Apple Safari, then you should use Emmet LiveStyle. This is a more powerful Live CSS-Reloader.
Now I use it instead of CSS Refresh.
If you want more information about this awesome plugin, please read the Post by Smashing Magazine
With jQuery you can create a function that reloads external stylesheets.
/**
* Forces a reload of all stylesheets by appending a unique query string
* to each stylesheet URL.
*/
function reloadStylesheets() {
var queryString = '?reload=' + new Date().getTime();
$('link[rel="stylesheet"]').each(function () {
this.href = this.href.replace(/\?.*|$/, queryString);
});
}
Have a look at http://livereload.com/.
It works as a browser plugin for OS X and windows. I like it because I do not have to embed additional javascript which I could accidentally commit in my versioning control.
I find browser plugins/extensions to be the easiest solution. They don't require any code changes to your individual sites. And they can be used for any site on the web — which is useful if I modify something in-memory real quick to hide a toolbar or fix a bug temporarily; once finished mucking with it, I can press a key and all the CSS is back to normal.
Once installed, (most) CSS reloaded plugins/extensions don't reload the CSS automatically. But usually work with something as simple as a toolbar button, a context menu item, and/or a simple key press to reload the CSS. I find this method is less error prone anyway, and is much less complicated then some of the automated solutions out there.
Some examples (feel free to suggest some others):
Chrome:
tin.cr (includes automatic reload, and can persist in-browser changes to source files)
CSS Refresh
Firefox:
CSS Reloaded
CSS Refresh
Here is my little Project. Please give it a try
CSS Auto reload on Github
Yes you can manipulate the CSS via jQuery:
$(".classToBeReplaced").switchClass( "classToBeReplaced", "newClass", 1000 );
You could also use the toggleClass method.
http://api.jquery.com/toggleClass/
http://jqueryui.com/demos/switchClass/
Firebug for FireFox.
It's a plugin in an attached/separate window. Changes to HTML/CSS appear instantly, elements are highlighted.
Advantage over JS hacks is that you can't copy this accidentally to your production instance.
You are looking for Live Reload:
It's available as a browser extension and easy to implement
http://livereload.com/
The new open-source code editor, brackets, has a Live Development feature where you can edit CSS in the editor and it will immediately be reflected in the chrome browser. It currently only works for CSS editing, but HTML editing is coming soon!
Firebug for Firefox is my prefered method:
https://addons.mozilla.org/de/firefox/addon/firebug/
You can edit HTML and CSS on the fly, quickly deactivate CSS rules (without deleting them), add or remove HTML and so on. If you wan't to tweak your design this is your choice. You can even save changes to a local copy, but I hardly ever use that feature.
If you are using Firefox then you can install Web Developer Toolbar 1.2.2 from Add-on of Firefox which has option of Reload Linked Stylesheets.
Try using CSS Brush, a chrome plugin for creating CSS live. You needn't have to write all CSS in a text editor, come back to browser and reload it, rather write the CSS live as if you were doing it in a text editor. You will have more features than a text editor here like context-sensitive-menu, use duplicate properties, select complete CSS path or a filtered path of a element directly from the page.
This might help -> chaicode
Its a live CSS, Javascript and HTML editor that is opensource and a wip.
github
Related
my problem is that I am expanding my website to a mobile version. So I've created a script to check user's screen size and redirect to the mobile version. That works perfectly! But now, I want to create a link in the mobile version to the desktop version. So, I figured out that it would be possible to include some parameters in the URL to alert the script that the user don't want to be redirected to the mobile version. Something like that: href="desktoppage.htm?mode='desktop'". The problem is the link is not working (error 404 - page not found). I guess, because of the parameter the hiperlink is being misinterpreted. Is there a way to do that without having to change all my pages to js or php? Pardon my poor english. Thanks.
Change
href="desktoppage.htm?mode='desktop'"
To this
href="desktoppage.htm?mode=desktop"
I don't think href lets you put quotes around values.
If you want a mobile version of your site, why not just adjust the CSS to use Media Queries? There's plenty of resources out there to help you get started on that. You don't have to mess with the existing HTML version of your site, and it'll automatically adjust the layout based on the type of screen your users are using.
CSS-Tricks has a good list of queries for standard devices that you can start with. You basically fill in those braces with the special code you want to run for those particular devices. You can probably combine many of them, and remove the "Desktops and Laptops" version so that it would be default. Make sure you place these definitions after your main css!
I cannot find a way to identify whether the CSS, which was created dynamically via creating a <link> tag and then specifying the href attribute had indeed loaded.
Consider the following example:
var css = document.createElement("link");
css.href = "not-a-directory/not-a-css";
document.body.appendChild(css);
Some browsers (Firefox), will dispatch "onload" event even if the path doesn't designate an existing file, however, this would only happen if sandbox policies would have not been violated, if file existed. Opera, Google Chrome and Safari - all report the problem in some way, but I can't find a way to handle that in JavaScript.
I'm not interested in supporting MS Internet Explorer (the project will be deployed to embedded WebKit / Opera browsers), but if there is a crossplatform way - that's, of course, welcomed.
PS. "onerror" doesn't seem to trigger in any browser.
CLARIFICATION
Sorry, I had to provide more info. Now I'll try to fix that:
I prefer not to use other libraries (like jQuery), but if they solved it somehow, that's a valid solution, if I can take a look at how they did it.
The code will be deployed to either Opera or WebKit browsers on SmartTV (read it as severe size limitations + files may be required to load from file-system rather than from the net). This is why I can't use XMLHttpRequest.
If you can think of a way to test whether the text file exists given the path (think iframe, link - perhaps other elements?) That is a good option too.
Finally, after much struggle, here's what I did (but alternative solutions are welcome!):
Created a class with the name which is unlikely to happen in other CSS files, say:
.x29048723049820394 { color: #514159 }
and then created a div tag in the HTML page, where I wanted to test whether the CSS has indeed loaded. After creating a link tag (don't forget - you also need to specify the rel attribute, otherwise the style won't load), I set timer to wait for the div I just created to change color. After the color changed I'd assume that the CSS had loaded. Or if the time ran out, I'd give up, assuming that the CSS didn't load.
On the way I also discovered, that in case the CSS file is loaded from the file system, even the same directory as the original HTML, which requests it, you will run into security-related errors when either trying to access the innerHTML of the link or when trying to iterate through the style sheets of the document.
If you know a specific class name that should be loaded then you could use javascript to loop through all the style sheets and class names to see if it was loaded.
It is my understanding that there's no elegant and reliable way of detecting it, everything is more or less hacks.
Here's my hack off the top of my head:
$.ajax({
url: "/style.css",
dataType: "text",
success: function (cssString) {
// css file exists, and was loaded correctly.
$("head").append($("<style/>").text(cssString));
},
error: function (e) {
// css file did not exist, we can check status code with e.status (404 etc)
}
});
We basically load the css file as text using ajax and then attach the loaded data to the dom. This way we can reliably detect failures, but other than that it's a total hack. You most likely get a flash of unstyled content. I'm not sure I would use it, but I thought it might be fun to throw it out there along with all other hacks :-)
I'm working on an ASP.NET MVC project which uses the MarkdownDeep Editor to add a rich editor on top of a basic markdown input textbox (very similar to the Stackoverflow editor window).
Generally it works great. However, in certain scenarios, I would like to disable the preview window. This is automatically generated below the textarea by MDD. Can this be disabled?
Just to be clear, I know I can use CSS to hide the preview. But on some devices it's slow and makes typing painful. I want to entirely turn off that feature. I don't see anything in the docs other than how to customize the preview.
Any ideas?
In the docs it specifically mentions that it is recommended that you have the div preview already in your document because it will be created if it isn't found and consequently, could could a visible page refresh if any re-layout has to occur.
Note: the associated divs are all optional and if missing, the plugin will create them. However... you might experience the page jumping around during load if you do this. ie: it's recommended to explicitly include them.
Thus from the sounds of this, and that there doesn't appear to be any option to turn it off in the API page I would say no, it's not possible.
I am a little confused here: if you don't want the preview, use a regular text area instead of mdd_editor... So, under the scenarios where you don't need the previews, instantiate a plain vanilla editor. What am I missing here?
I know this is old, but I was looking for something else on mdd. I recently had this same requirement.
Just comment out the code
// Update the DOM
if (this.m_divHtml)
this.m_divHtml.innerHTML=output;
in MarkdownDeepEditor.js
We have an option of disabling the right click event on the HTML page at same user can click on view menu > source and can get a copy of the content displayed.
How do i make it into unreadable format? Just like when you do a google search and see the source of page very similar to it? How can this be done?
You can't. You can obfuscate the scripting and minify the html (remove all unnecesary whitespace) that's what google does). So, making the readability of the html (by obfuscation, minification) more difficult is the best option (if you must).
You can also go flash ofcourse, like in this website
How do i make it into unreadable format? well you can't change the format, its plaintext, this is how the browser expects AFAIK, when gmail first came out, its source code was sort of hidden, what they did actually is have the entire source of the page rendered using hidden iframes and JS, as such users would right click and get <!DOCTYPE html><html><head></head><body><div></div></body></html> but this is no longer the case.
how does Gmail hide its source
Try to compress the code using this site http://www.textfixer.com/html/compress-html-compression.php
It will remove all the whitespace and compress the code to make it unreadable.
I want a single online web page for my bookmarks. The page should include small windows which opens the following pages:
Fizy, Facebook, Guardian.
There should also be a button for adding a new window with an URL text input.
Here's an illustration of how the page should look: http://i54.tinypic.com/2hrkb48.jpg
I've built a version of this at http://bit.ly/heqEd1, but as you may see, it uses iframes under javascript windows, which can not open frame-breaking sites (like fizy.com), or Facebook.
I'll make the research and but I am not sure how to proceed. Any solution will be accepted, like HTML5, XUL, Flex, AJAX or others. A solution with a local installation(like a Firefox extension) is not preferred, but still be ok.
Note: Piro Sakura has built a Firefox extension called split-browser. There's an element of the project called "subbrowser". An AJAX window that can show a subbrowser MAY solve the problem. I know the page will only be available from Firefox, but that is ok. (Again, a solution without an installation is preferred)
Any suggestions? How should I proceed? What should I learn? Is this possible?
Thanks.
I think you should use a Javascript with iFrames to do this. I'm not too sure what you're trying to accomplish with this, but it should be possible. As for which framework you'll use, it's up to you, but there will be a lot of custom code needed to implement this.
You can make multiple draggable windows in FLEX same as you have in you app
Please check sample as Starting point Movable/Draggable window and its demo
also u knows JS-DESKTOP lib with little customization to achieve that one of them are
jsdesk
sonspring-JQuery based
also you can do this using
Hopes that helps