i'm using detectmobilebrowsers js file for detection on mobile devices ,i also added in the tablets for it , i do not want it for a redirection method so i set the redirect url to original site , i was wanting to use to link a different stylesheet for a few particular devices i have issues with. I've tried using media queries but they won't isolate the specific device.
So , can a script be added to the detectmobiledevice.js where i can link a style sheet , say for an ipad ? if so , not knowing anything about jquery/java can someone illustrate this.
if....ipad {add css}
else....all others {add css}
You can use http://rafael.adm.br/css_browser_selector/
Its easy to implement just use specific class
i found this and it works great https://github.com/matthewhudson/device.js
Related
What is the best way to choose the stylesheet that will be shown depending on the useragent?
Example, i want to show a css style for Android and a different one for IPhone.
Is it possible with css only?
Can i use something like media queries?
Thanks in advance
With Internet Explorer you can use conditional comments (http://msdn.microsoft.com/en-us/library/ms537512.aspx) to include stylesheets in a specific browser. This technique does not work in other browsers, and I believe it does not work in the latest version of Internet Explorer.
To my knowledge, the only way to accomplish this is with Javascript. The simplest method is to add a class to the HTML tag of the page (i.e. ".android" or ".iphone") with Javascript based on the user agent string. In the CSS simply reference .android or .iphone in your stylesheet to specifically target one or the other.
However, the best approach is to avoid doing specific browser detection whenever possible. Feature detection is the preferred approach (http://www.joezimjs.com/javascript/feature-detection-vs-browser-detection/). This is an exception as your intentions are to have a different theme based on the device.
See the isMobile Javascript library (https://github.com/kaimallea/isMobile) to easily detect an Apple or Android device. As long as the stylesheet isn't huge for each theme, I would recommend merging the Android and Apple stylesheets into one. Than use isMobile library with a little custom Javascript to add the necessary CSS class to the HTML tag.
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'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
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
We are developing a social networking project, in this project we are adding content , e.g. images , video,audio,link(html).
Currently we are using shadowbox.js to show it.But for better and effectiveness we want to use some other better plugin, or want to make own window for showing images and link.
Please help , what is the best solution for this project.
I want to know this is the white board quesion means programmer.stackexchange question or stackoverflow quesion?
Thanks
There are 31 here:
http://www.dreamcss.com/2009/03/31-mind-blowing-collection-of-jquery.html
You should find one or more that suits your needs.
I would suggest using colorbox.js it can be found here :
http://colorpowered.com/
It is easily styled, comes with a pleathera of options including an image slideshow, can handle iFrames, Ajax content, Images, etc, and comes with a few options for styling to begin with.
Made my own div and use that for displaying content :)