I noticed my links are having ui-link appended to it. Interfering with CSS, as jQuery Mobile has styled it differently. I could overwrite, but all I need is to remove the class. Instead of removing after it has been added, is it possible to prevent jQuery Mobile from adding the class?
One way is http://forum.jquery.com/topic/a-s-still-styled-as-ui-link-despite-being-in-a-container-w-data-role-none but I prefer not to edit jQuery Mobile source
Just glancing at the jQuery Mobile source for v1.1.1... I see that links are enhanced in the pagecreate and create events except for the following:
.not(".ui-btn, .ui-link-inherit, :jqmData(role='none'), :jqmData(role='nojs')")
Meaning, you should be able to avoid enhancement by adding a .ui-btn or .ui-link-inherit class, or adding a data-role="none" or data-role="nojs" attribute to the links.
It also calls .jqmEnhanceable() on the links, which in turn calls $.mobile.enhanceable() and checks to make sure it is OK to enhance by traversing the parent elements. Have you tried adding data-role="none" to the links themselves or a wrapper element?
Of course, you can remove the classes after jQuery Mobile has initalized, however, I would advise against this as it may have a negative effect on some of jQM's features. I would venture a guess that jQM uses .ui-link for more than just styling.
$(document).bind('pageinit', function(event){
$('.ui-link').removeClass('ui-link');
});
Related
Is there an 'angular material way' to hide elements on small/mobile displays using a directive of some kind? Having used Angular and Angular Material for a while now, I thought this should be simple, but I'm just not finding it. I know about the ng-show / ng-hide directives, but I don't know if I can write an expression that inspects the current display size somehow.
Do I just need to fall back to good old media queries in CSS?
EDIT - forgot to include reference to Angular Material in my original post... oops!
You could create a matchMedia filter.
app.filter("matchMedia", function($window) {
return function matchMedia (mediaQueryString) {
return $window.matchMedia(mediaQueryString).matches;
}
});
Then use it in directives:
<div ng-if="'(min-width: 400px)' | matchMedia">
<h1>The viewport is at least 400 pixels wide</h1>
</div>
https://material.angularjs.org/latest/layout/introduction
use hide and show options depends on Breakpoint e.g hide-md, hide-lg
Angular Material Design - Change flex value with screen size
Use hide-sm css class. This class is provided by angular material
Modern browsers support the matchMedia function that lets you do media queries from JavaScript. You could make a custom directive that uses that.
I suggest doing this only if hiding things via JavaScript (probably more ng-if style rather than ng-show style) allows you to skip processing something unneeded and heavy in JavaScript on mobile browsers. If it's just a visual thing, use CSS. It's the correct tool for the job.
I think the best way is to use a component approach and keep directive's js + html + scss in one folder. Use scss (or less or sass) to declare your css styles. Doing that you can create media query in directive's scss and then use it in directive's html. And then you collect every directive's scss partials in one file. So you separate your concerns. Logic and presentation in js and html. And leave browser decide whether to display your directive depending on screen size.
For Mobile Device (max-widht:599px) use fxHide.xs in this
element.
For Tab Device (max-widht:959px) use "fxHide.sm"
Example :
<h2 fxHide.xs> Hide this h2 element in mobile device </h2>
I'm not sure this is possible, but id like to set all user styles back to chrome defaults for div and descendants.
I'm building a Chrome plugin that creates a popup on any web page, however due to the fact every page has a plethora of custom styles, trying to track down every inconsistency and overwrite it with my divs (and descendants) custom style, it is becoming a nightmare.
Every time I think I've covered all bases another site implements something else that needs to be overridden.
What would be the easiest approach to standardize my popup in this situation?
One approach I can think of is to (bite the bullet) and get a hold of the the default Chrome CSS styles and implement them into a series of catch all descendant selectors, however surely there is a better way.
If you want to be absolutely sure that the styling of your elements is not affected by the web-page's CSS, there are 2 possible solutions:
Use an iframe to implement your popup. (This solution is "safe" and simple enough, but based on the kind of interaction between the popup and the web-page it might become cumbersome.)
Utilize the Shadow DOM. (This is probably the "proper" solution, but the implementation might be a little more complicated.)
Some resources regarding the 2nd solution:
An introductory tutorial.
An actual example of incorporating the "Shadow DOM" concept into a Chrome extension:
RobW's Display Anchors extension
There is a third option worth discussing and rejecting, which is to reset all the style properties of the div and its descendents to its default value. Pseudo-code:
#my-div, #my-div * {
#for-every-css-property {
%propertyName: initial !important;
}
}
This answer shows an attempt at such a solution. It uses specific values instead of initial which will work in older browsers without the initial keyword, but will not correctly reset elements which have a different default from the base (e.g. user566245 mentions that textarea elements should have a border).
Issues:
Unfortunately initial is not actually the browser's default value.
If we don't use !important above then there is a risk that the page might have provided a rule with a more specific elector which overrides our own. For example if the page specified properties for table > tr > td then this would be applied over our rule because that selector is more specific than #my-div *.
Since we do use !important, any custom styling we want to do after the reset must also use !important on every property.
If the page happens to inject any additional CSS styles after ours that uses !important then these can override our reset.
It is rather inefficient. We are asking the browser to apply a huge bunch of CSS rules to every element under our div.
Vendor-specific properties should also be reset. (E.g. -webkit-animation-name.)
If new CSS properties come into existence in future, you will need to update your list.
Whilst this solution can be applied to current browsers, it is rather horrible, so roll on Shadow DOM! I would recommend the <iframe> solution in the meantime.
I don't know if anyone has tried this, but a more efficient solution might be to use Javascript to detect what site-defined CSS properties could be problematic, and reset only those.
I'm using jQuery mobile to create a list menu.
I use a 'slide' effect, when you click an element to show the next page.
I was using a css style sheet which had too many design elements.
So I went ahead and removed the stylesheet and instead added the required styling in the html document.
But now the slide effect doesn't work if I click the elements.
If I include the css style sheet, then it starts working again.
Here is the http://jsfiddle.net/r24XY/ code.
The whole reason why you see those cool looking animations is because of that CSS file.
You must have both JQuery Mobile .js and .css library files in order for things to move.
Ripping certain elements out of the library CSS files just to build your own is a bad idea, very bad idea. What if you miss something ? Even if you don't.. what if they release an update tomorrow? You're going to have to maintain a lot of code.
CSS animations (or transitions / transforms) are used in jQuery Mobile and other mobile web frameworks since these are hardware accelerated on certain devices (namely iOS). Thus, removing the CSS file of course removes the animations.
I'd like to import an external CSS (eg. Bootstrap) into my site-- the problem is I'd like to apply the Bootstrap styles only to a specific region of the page. When I include Bootstrap, it applies its styles to the entire page, restyling all tables, divs, etc.
Is it possible to only apply Bootstrap to a region (say a parent div or something?)
Thanks
The only way to do this is to have a separate iframe for the content you want to style with Bootstrap (unless you want to edit the Bootstrap CSS, and add your outer div's selector to the beginning of EVERY rule).
HTML5 introduced the new scoped attribute, which is made specifically for your use case, but has not yet been implemented by any one of the major browsers.
If you are using jQuery (which you probably are, since all of Bootstrap's Javascript functionality is dependent upon jQuery), you might wanna try Simon Madine's jQuery Scoped CSS plugin.
Import Bootstrap before your own styles. That way your own styles will overwrite the changes made by Bootstrap where applicable.
I've only tried this locally and not given it any thorough testing but it seems to work fine. I created a div around the content and assigned it an id. Then prefixed all of the bootstrap selectors with the id I assigned the surrounding div. The prefixing was done with a couple of search and replace operations. Perhaps it can be done easier with less
Forgot to mention that the body selector of the bootstrap.css has to be replaced with the id and not prefixed like the other selectors.
I am running into this problem where my page loads and then after a fraction of a second the CSS effects or styling takes place.
The main issue I am seeing is with the JQuery tabs that I am using
http://docs.jquery.com/UI/Tabs#source
When the page renders, the tabs show one below the other for a second like this:
One
Two
Three
and then render properly as tabs
Is there a quick and easy way to fix this.
Thanks
It's not the styling; it's the jQuery UI javascript library, which is appending the necessary html to your page so that the tabs can look all pretty-like.
You have a few options. First, you can hide your tabs and display them once jQuery UI has completed its magic. Second, you can style your tabs so they look close enough to the finished output so that the change isn't so noticeable. Third, you can drop jQuery UI and style the tabs with CSS only. All valid approaches, I'd say.
Hope this helps!
EDIT:
For the first option, let's say that this is your div containing the tabs:
<div id="tabs">
...stuff...
</div>
In your stylesheet, hide #tabs:
#tabs {
display:none;
}
Then, modify your jQuery UI call like so:
var t = $("#tabs");
t.tabs({
create:function(){
t.show();
}
});
weirdlover's response almost worked for me (using jQuery 1.5.2), but I had to hook the create event:
var t = $("#tabs");
t.tabs({
create:function(){
t.show();
}
});
Thanks!
Browsers usually load files as they appear in your HTML code. Be sure to put the reference to your CSS file first so it loads as soon as possible.
If the CSS is being applied using Javascript, it's not possible to make it load faster. The Javascript file needs to be loaded before it can be used.
Other than that, I don't think there's a way to control how the browser rendering works.
Is the CSS applied through Javascript? In that case you can add some static CSS that ensures the elements get at least shown horizontally arranged before the javascript is executed, by adding some static CSS.
If it is the case that the browser just decides to apply the CSS after rendering without it, there is not much you can do. It could however be, that the CSS is loaded to slowly (if its an external file), in this case, you could add the most important style to a CSS-section directly in the HTML.