I am using some CSS3 toggle switches in a project of mine and they are currently toggling just fine, but what i would like to have happen is for all other toggles to turn off when a new one is activated. Can anyone help get me started on this. I am not even sure where to start. These are the toggles I am using:
http://wsnippets.com/styling-checkbox-toggle-switches-css3/
is there a way for Javascript to be able to do this? Any guidance would be helpful.
If you're using jQuery, this will do the trick:
$(function() {
$('.checkbox-switch input').change(function() {
if($(this).prop('checked')) {
$(".checkbox-switch input").prop('checked', false);
$(this).prop('checked', true);
}
});
});
See the demo using the example html/css in your link here: http://codepen.io/anon/pen/MymGqP.
Without knowing too much about your project, one solution could be to use radio buttons instead of checkboxes for your toggle switches. That way, the default behaviour of the radio buttons will deselect the other/s when a new one is activated.
On this page I am making I have a button at the bottom of the page, which has to get wider and then move up when clicked. After the button has reached its new place, new content should load.
I have found a lot about CSS transitions an animations on hover, but I want to use this as a page transition.
How do I get this transition to happen before loading the new page??
I would love to do this with as little JS as possible..
Thanx Y'all!
Based on what you asked:
This delays the page load until the transition is complete (the setTimeout just need to be set to whatever the duration of the CSS transition is).
$('.link').click(function () {
$(this).addClass('clicked');
setTimeout( function() {
window.location.href = "url for page goes here";
}, 500);//set 500 to whatever timeout you want
});
See pen example: (http://cdpn.io/vyuch)
BUT
This is not a good idea... If CSS transitions aren't available, it will just look like a terrible link and confuse users. If they are, it is still slow and frustrating.
If you want the content to load on the same page, you need to use AJAX. To help with this, some more information would be helpful...
Yet another question about the angular calendar directive. I need to display multiple calendars on one page and am using the jquery tabs widget. However, only one calendar will render properly. In normal jquery fullCalendar, you use the 'render' method to ensure that the calendar shows when the tab is selected. However, this doesn't seem to be working with the angular-ui calendar directive.
Here is a plunker showing what I mean. Delete the $().tabs() and the three angular calendars display just fine. Wrap them in tabs, and it no longer works:
http://plnkr.co/edit/HEEX4iqb8kFAsjwdGmkM
Any ideas on why this is not working and how to fix it?
Thanks!
PS. I will cross-post this question in Google Groups. Thanks.
It appears that despite the fullCalendar documentation, "show" is not the place to trigger a fullcalendar('render'). I should say, at least not when working with Angular. I don't know if that is correct under normal jQuery usage. Use the "Activate" event instead:
$("#tabs").tabs({
activate: function(){
("#calendar").fullCalendar('render');
}
});
http://plnkr.co/edit/HEEX4iqb8kFAsjwdGmkM
Use timeout while rendering.
<tab heading="{{tabs[0].title}}" active="tabs[0].active" select="renderCalendar()" disabled="tabs[0].disabled">
$scope.renderCalendar = function() {
$timeout(function(){
$('.calendar').fullCalendar('render');
}, 0);
};
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";
});
}
Is it possible to prevent an asp.net Hyperlink control from linking, i.e. so that it appears as a label, without actually having to replace the control with a label? Maybe using CSS or setting an attribute?
I know that marking it as disabled works but then it gets displayed differently (greyed out).
To clarify my point, I have a list of user names at the top of my page which are built dynamically using a user control. Most of the time these names are linkable to an email page. However if the user has been disabled the name is displayed in grey but currently still links to the email page. I want these disabled users to not link.
I know that really I should be replacing them with a label but this does not seem quite as elegant as just removing the linking ability usings CSS say (if thats possible). They are already displayed in a different colour so its obvious that they are disabled users. I just need to switch off the link.
This sounds like a job for JQuery. Just give a specific class name to all of the HyperLink controls that you want the URLs removed and then apply the following JQuery snippet to the bottom of your page:
$(document).ready(function() {
$('a.NoLink').removeAttr('href')
});
All of the HyperLink controls with the class name "NoLink" will automatically have all of their URLs removed and the link will appear to be nothing more than text.
A single line of JQuery can solve your problem.
I'm curious on what it is you which to accomplish with that. Why use a link at all?
Is it just for the formatting? In that case, just use a <span> in HTML and use stylesheets to make the format match the links.
Or you use the link and attach an onClick-Event where you "return false;" which will make the browser not do the navigation - if JS is enabled.
But: Isn't that terribly confusing for your users? Why create something that looks like a link but does nothing?
Can you provide more details? I have this feeling that you are trying to solve a bigger problem which has a way better solution than to cripple a link :-)
A Hyperlink control will render as a "a" "/a" tag no matter what settings you do. You can customize a CSS class to make the link look like a normal label.
Alternatively you can build a custom control that inherits from System.Web.UI.WebControls.HyperLink, and override the Render method
protected override void Render(HtmlTextWriter writer)
{
if (Enabled)
base.Render(writer);
else
{
writer.RenderBeginTag(HtmlTextWriterTag.Span);
writer.Write(Text);
writer.RenderEndTag(HtmlTextWriterTag.Span);
}
}
}
Could be a bit overkill, but it will work for your requirements.
Plus I find is usefull to have a base asp:CustomHyperlink asp:CustomButton classes in my project files. Makes it easier to define custom behaviour throughout the project.
If you merely want to modify the appearance of the link so as not to look like a link, you can set the CSS for your "a" tags to not have underlines:
a: link, visited, hover, active {
text-decoration: none;
}
Though I would advise against including "hover" here because there will be no other way to know that it's a link.
Anyway I agree with #pilif here, this looks like a usability disaster waiting to happen.
If you mean to stop the link from activating, the usual way is to link to "javascript:void(0);", i.e.:
foo
This should work:
onclick="return false;"
if not, you could change href to "#" also. Making it appear as a rest of text is css, e.g. displaying arrow instead of hand is:
a.dummy {
cursor:default;
}
Thanks for all the input, it looks like the short answer is 'No you can't (well not nicely anyway)', so I'll have to do it the hard way and add the conditional code.
If you are using databind in asp.net handle the databinding event and just don't set the NavigateUrl if that users is disabled.
Have you tried just not setting the NavigateUrl property? If this isn't set, it may just render as a span.
.fusion-link-wrapper { pointer-events: none; }
Another solution is apply this class on your hyperlink.
.avoid-clicks {
pointer-events: none;
}
CSS solution to make tags with no href (which is what asp:HyperLink will produce if NavigateURL is bound to null/empty string) visually indistinguishable from the surrounding text:
a:not([href]), a:not([href]):hover, a:not([href]):active, a:not([href]):visited {
text-decoration: inherit !important;
color: inherit !important;
cursor: inherit !important;
}
Unfortunately, this won't tell screen readers not to read it out as a link - though without an href, it's not clickable, so I'm hoping it already won't be identified as such. I haven't had the chance to test it though.
(If you also want to do the same to links with href="", as well as those missing an href, you would need to add pointer-events:none as well, since otherwise an empty href will reload the page. This definitely leaves screen readers still treating it as a link, though.)
In the OP's use case, if you still have the href being populated from the database but have a boolean value that indicates whether the link should be a 'real' link or not, you should use that to disable the link, and add a:disabled to the selector list above. Then disabled links will also look like plain text rather than a greyed-out link. (Disabling the link will also provide that information to screen readers, so that's better than just using pointer-events: none and a class.)
A note of caution - if you add these sorts of rules globally rather than for a specific page, remember to watch out for cases where an tag has no (valid) href, but you are providing a click handler - you still need those to look/act like links.