I would like to style a form button (input or button tag) with 2 background images to create a stretchable button (relative to the text-length). The form button should also have a hovered state and it should be cross browser (at least IE7 & +) would need to support it.
I know how to obtain the effect with just css with an tag => test
If anyone could help me a little bit, I would be pleased
yours truthfully
See this link.
This will only work with button because an inner element like a spanis needed.
Try JQuery UI. They have a very easy cross-browser set of user interface controls that might satisfy your requirements. You can change the backgrounds used for the buttons, etc.
Related
I was wondering if there was a way to get the nz-popover to center on another element.
I basically have a text input followed by two buttons in a div, I would like to center the popover on the div rather than on the button that triggers it.
I found that i could add the popover to the actual div and then use the nzVisible to trigger it but then i loose the ability to close the popup when the user leaves the area (prob when they hover over the mask or click it). I tried many ways to close it once the popover looses focus etc but that would cause the popover to close if the popover contains a menu or datepicker (when they are used).
Anyone got any ideas? (i used to use angular material and i believe they had something similar (think it was called target or something).
Thanks in advance,
For anyone who is interested in this, we have submitted a PR to provide this feature. You would be able to use this in 9.x (and future) versions.
I am attempting to use the Bootstrap-multiselect plug-in by David Stutz; documentation is located at http://davidstuts.github.io/bootstrap-multiselect
This is a plugin to convert ordinary select drop-downs to use better styling and features such as filtering. However, the output of the plug-in uses mark-up where a radio button is enclosed within an anchor tag. This means that when using a screen reader, the screen reader picks up the anchor tag and ignores the radio button since it is enclosed within the element. I have tried to modify this behaviar to enhance accessibility by removing the anchor tag and replacing it with a span, but the missing anchor causes keyboard accessibility to break.
So i'd like to request help on finding a way where the keyboard and screen reader accessibility can work together using alternative mark-up to the default in the plugin; adding a role of 'radio' did not work either since the screen reader interacts with the anchor and not the enclosed radio button.
The most likely way for your "keyboard accessibility to break" would be if the anchor tags had a tabindex attribute on them. If you replaced one with a span then the radio button inside would be left without that tabindex. That would mean the keyboard tabbing would skip it in the tab order, and leave it until last, after all the other (tabindexed tags) had been done. That's how tabindex works.
If this guess is wide of the mark, then please give us exact information saying what broke and how, what the symptom is. We need that info to see what the problem is.
Is there any way to style an internally-linked div when it becomes focused? Like say I've got a link at the top of a page that I internally link (<a href="samepage.html#more">) to a div further down the page (<div id="more">), when someone clicks to that div, is there any way to style it to show that it's focused (like I'd maybe use a change in its background color or give it a border when it's clicked to)? It's not really like giving it a hover styling, it's more giving it styling on active or on focus or something like that. Is there any way to do that?
I'm not sure if there's just no way to do it, or if I'm being dense and there's an easy way, but I'm not seeing it so far. Thanks.
You should bind a JavaScript function to the window.onhashchange event:
window.onhashchange = function () {
var hashloc = window.location.hash;
// hashloc is a string like '#focusDiv'
// .. manipulate DOM
};
This miniature working jsFiddle example uses jQuery, and adds a CSS class to the focused DIV when a hash change event occurs.
The event is bound using plain JS because jQuery doesn't natively provide this hook, which may not at all be supported for older browsers as noted by Matt. To solve this I highly recommend this jQuery plugin for simple hash events.
Divs don't have a focus property that I'm aware of, but you'd probably want to bind to an event when the hash in the URL changes, then apply the changes to the div with an ID of the value of the hash.
For example, bind to this event: window.onhashchange -- it will only work on modern browsers (ie8+, Chrome 5+, Firefox 3.6+, etc) without some tweaking.
I am using AJAX modal popup in my project, but there is problem with it.
Now I decided to acheive similar behaviour using javascript
I am able to show popup using
document.getElementById('dv').style.display = "block";
Now I just need, how can I make background disable like in modal popup?
you create a div that spans the whole page but initial style is display:none; along with any other styles. i.e transparency 80% with background colour of black..
When you show dv change the display attribute of the div (above). Just make sure that the dv has a higher z-index than the background div and the background div has a higher z-index than the content on the page :)
Have you considered using a library for this? The most programmer-friendly and flexible I have found is NyroModal (jQuery based). The advantage of a library is it will deal with many subtle things that happen with modal dialogs, e.g. ensuring it works effectively across all browsers (and overcomes the various quirks around things like positioning), animating on and off, lightbox effect around it.
NyroModal lets you generate dialogs dynamically, whereas most libraries are geared owards simpler use cases such as "make all images clickable so they show up as lightboxed when the user clicks on them".
Is there any way, how to make rounded HTML <select>, without using any javascript?
I have this insane design and I have absolutely no idea how to do it only with CSS.
The same problem is with checkbox and radiobutton. Does anybody know how to make them rounded?
I need solution that works for IE6+, Firefox 2+, Opera 9+ ...
alt text http://uploader.chytry.cz/select-checkbox.png
No. Form styling is very problematic, there are no guarantees that any styling will work. Simple borders and background colours/images generally work OK in most browsers. I believe Safari will let you style very little. Check this page for more detailed info.
Honestly, the best solution is to use javascript. jQuery click menu is a great solution I used recently to mimic a select box (used JS to set a value on a hidden field when an element in the menu was selected).
I'm sure there are other solutions around too if you search.
No.
Now the long answer: Internet Explorer does not lend itself well to being styled. You will be able to set a background image for the left-hand side (the text content) that has rounded corners, but the drop-down arrow will be fixed as the default browser. You'll also find that the mousedown and mouseover states for the control will be fixed as the default style.
I think that in many cases, the ideal preferred design needs to be a little pragmatic about limitations in browser standards support. Specifically, the problem that IE6 doesn't support a fair number and IE7 is only slightly more compliant.
Sorry for the bad news.
no
please see this site for radiobutton and checkbox
http://www.maratz.com/blog/archives/2006/06/11/fancy-checkboxes-and-radio-buttons/
No, Whit out javascript or jQuery you can not do this. But if you need with jQuery try this link. It contains the HTML select box with rounded corners by jQuery.
http://webworld-develop.blogspot.com/2011/11/cool-html-5-select-with-jquery-and-css.html