I'm using jQuery UI with a custom theme, and I have an <input type="submit"> element on my page. Since jQuery is around this button gets the jQuery UI look and feel - it is automagically added the css classes ui-button ui-widget ui-state-default.
How do I get rid of these ?
Want the button to be a plain old button without those classes.
Thanks.
The buttons don't automatically get the classes set - you must be calling something like the following
$("button, input:submit, input:button").button();
you need to remove input:submit
To change your button back to 'normal' style you could either use ManseUK's answer, or if you just want to restyle this button you can remove the three classes by adding $("#yourButtonID").removeClass("ui-button ui-widget ui-state-default")
Another way to solve this problem is that if you look in the jquery-ui.js file there will be a block comment that starts with something like: "jQuery-UI Button", delete that entire block from the start of the comment to the start of the next comment for another widget.
This solved the problem for me.
Related
I have a template that has a some text updated reactively once every second.
I also have a button, that when clicked, gets it's style changed to display a disabled button - this works fine but as soon as the template re-renders due to the condition above then the button reverts back to it's original style. It is almost as if the entire template is rendering from scratch (template.render is fired every second).
Is this normal? do I need to control the style via a reactive {{btnstyle}} type mechanism?
Yes, the typical way to do this is to set the style via a class that is set by a template helper function. For disabling button/input elements, you can just use the disabled attribute instead of class:
<button type="button" {{#if buttonDisabled}}disabled{{/if}}>Button Text</button>
or
<input type="button" value="Button Text" {{#if buttonDisabled}}disabled{{/if}} />
and then do:
Template.yourFormTemplate.buttonDisabled = function() {
// return true or false depending on if the button should be disabled
};
The problem is that when Meteor re-renders your template, the element which you set the style of is actually getting replaced with a new one. Note that the Meteor team is currently working on a new templating engine that works on a more fine-grained level, so that elements don't necessarily get replaced like that. You can try your current code with the preview release of the new templating engine with this command:
meteor --release shark-1-29-2014-e
or
mrt --release shark-1-29-2014-e
However, it is still generally recommended to style elements via the class attribute, set with a template helper. This is a more declarative, template-driven approach that just fits better with the "Meteor way" to do things, rather than the imperative approach of setting the style directly from your JavaScript. It also helps with separating concerns, by allowing your CSS to control the actual style.
This is may be very noobish and a bit embarrassing but I am struggling to figure out how to make checkboxes 'checked' using CSS?
The case is that if a parent has a class setup (for example) I'd like to have all the checkboxes having setup as parent to be checked. I'm guessing this is not doable in pure CSS, correct? I don't mind using JS but am just very curious if I could toggle the state of the checkboxes along with that of their parent (by toggling the class).
Here's a fiddle to play around with.
A checkbox being "checked" is not a style. It's a state. CSS cannot control states. You can fake something by using background images of check marks and lists and what not, but that's not really what you're talking about.
The only way to change the state of a checkbox is serverside in the HTML or with Javascript.
EDIT
Here's a fiddle of that pseduo code. The things is, it's rather pointless.
It means you need to adding a CSS class to an element on the server that you want to jQuery to "check". If you're doing that, you might as well add the actually element attribute while you're at it.
http://jsfiddle.net/HnEgT/
So, it makes me wonder if I'm just miss-understanding what you're talking about. I'm starting to think that there's a client side script changing states and you're looking to monitor for that?
EDIT 2
Upon some reflection of the comments and some quick digging, if you want a JavaScript solution to checking a checkbox if there's some other JavaScript plugin that might change the an attribute value (something that doesn't have an event trigger), the only solution would be to do a simple "timeout" loop that continuously checks a group of elements for a given class and updates them.
All you'd have to do then is set how often you want this timeout to fire. In a sense, it's a form of "long polling" but without actually going out to the server for data updates. It's all client side. Which, I suppose, is what "timeout" is called. =P
Here's a tutorial I found on the subject:
http://darcyclarke.me/development/detect-attribute-changes-with-jquery/
I'll see if I can whip up a jQuery sample.
UPDATE
Here's a jsfiddle of a timeout listener to check for CSS classes being added to a checkbox and setting their state to "checked".
http://jsfiddle.net/HnEgT/5/
I added a second function to randomly add a "checked" class to a checkbox ever couple of seconds.
I hope that helps!
Not possible in pure css.
However, you could have a jQuery event which is attached to all elements of a class, thereby triggering the check or uncheck based on class assignments.
Perhaps like this:
function toggleCheck(className){
$("."+className).each( function() {
$(this).toggleClass("checkedOn");
});
$(".checkedOn").each( function() {
$(this).checked = "checked";
});
}
In my case, I have an HTML/CSS Menu in the site master.
So, when you hover your mouse over "Graphics", it highlights it (using CSS onHover).
Now what I need to do is that when you actually click on "Graphics" (and it takes you to the graphics page), it remains highlighted, if possible in a different colour.
I'm thinking of modifying the Site.Master style from C# or VB code.
Any ideas? Thanks.
An idea would be to check what page you are in, and apply a css class:
<li class="<%= this.Page.ToString().ToLower().EndsWith("graphics_aspx") ? "selected" : "normal"%>">
Graphics<li>
Hope it helps!
You can either use the CSS active state if the page you are on directly relates to the link, however if the menu points to sections (i.e. multiple pages) you may need to use a bit of server side code to your master page, that gets the requested URL and determines which link is active. Usual convention is to then add the class 'active' or similar to the outputted html.
You can convert the UL/LI with runat = "server" and finally add styles in the code behind
Example
Control.Style.Add("display", "none");
Has anyone tried to customize this button?
https://developer.linkedin.com/plugins/apply
Beyond the built-in customization options, please don't change the look-and-feel of this button. It's part of our "Brand".
The Apply With LinkedIn button does have some customizations available. See this page for more information:
https://developer.linkedin.com/apply-visual-display-options
You could wait for the window to completely load with jQuery, then apply your css overrides. You'd want to hide the button initially and then show it when the css overrides are applied. There might be a bit of a race condition that will show the button without your styling applied at first though.
something like:
$(document).ready(function() {
$(".IN-widget").hide();
});
$(window).load(function(){
// change LinkedIn's things you shouldn't change because their branding is important here
$(".IN-widget").show();
});
I'm looking to get ideas on how to not change at all the code used to create css tabs (so that I can place it into an include file to avoid duplicating the code across all files that use it), but my current implementation doesn't allow this because I need to select the active tab using id="selectedTab".
The only implementation I found so far that solves this is the following one:
http://unraveled.com/publications/css_tabs/
It requires assigning a class to each tab and uses the body id to determine the active tab.
Is this the only way or is there any other alternatives?
My current code looks like this (the id=noajax" is used to avoid using ajax to load certain pages):
<div class="productTabsBlock2">
<a id="selectedTab" href="/link1" >OVERVIEW</a>
SCREENSHOTS
<a id="noajax" href="/link3" >SPEED TESTS</a>
<a href="/link4" >AWARDS</a>
</div>
EDIT: asp is available as server side and is already used on these pages.
If you're looking for a non-JS solution, then the body class/id provide the easiest way to do what you want.
If you have access to JS library, you can easily add "selected" class to any of the <a> element and modify its appearance.
Just in case you haven't notice, you can use more than one class definition in an element. For example, <a class="noajax selected" /> is valid and both CSS selectors .noajax and .selected will be applied to the element.
An include file for what? If it's a server side programming language like PHP, you can pass a parameter for the selected tab through various methods.
you could use jQuery to add the `selectedTab' id (or class) like so
$('.productTabsBlock2 a').mouseover(function () {
$(this).addClass('selectedTab');
});