I have a wizard control which I have customized using Jquery and Css to look like this :
But I want it to look like this:
The blue one being the currect/active link/tab.
I tried using this:
.tab a:active
{
background: none repeat scroll 0% 0% #EEEEEE;
color: #FFF;
cursor: default;
}
But it shows the effect only as long as I keep the mouse key pressed. As soon as postback occurs it loses its effect, which makes sense but how do i make it stay?
Related
Consider a scenario where your form utilizes custom radio buttons. These radio buttons have the following CSS applied to them - which creates the illusion of selectable images - no js at all.
#ImageSelector label > input{ /* HIDE RADIO */
display:none;
}
#ImageSelector label > input + img{ /* IMAGE STYLES */
cursor: pointer;
border: 2px solid transparent;
opacity: 0.5;
filter: alpha(opacity=50);
}
#ImageSelector label > input + img:hover{ /* (CHECKED) IMAGE STYLES */
opacity: 1.0;
filter: alpha(opacity=100);
border:2px solid #00a8ff;
}
#ImageSelector label > input:checked + img{ /* (CHECKED) IMAGE STYLES */
opacity: 1.0;
filter: alpha(opacity=100);
border:2px solid #0184c8;
}
The problem occurs when the user attempts to click on an image and the cursor is still moving - the item won't become clicked. This is expected behavior of typical radio buttons. Is there a quick way to make the radio buttons more 'sensitive' to the click action or clickable while the mouse cursor is moving?
UPDATE: https://jsfiddle.net/7aLbgqr6/
Also, the solution can definitely include jQuery - but it MUST as simple as possible.
Thanks!
Modified your fiddle to attach mousedown events to the buttons using jQuery. Additionally, I converted the images to use background-image instead so that the ghost image does not appear when the mouse cursor moves. Just a slight optional improvement.
https://jsfiddle.net/kpLLr03y/6/
I am not sure why I am having such troubles with this. I have browsed Jquery's slider css file and found the class name of the handles. .ui-slider-handle and it even says in the API docs that is the name of it Slider API doc link, but whenever I add background or background-color and give it a color, it does nothing. The same thing for trying to get the handles to cover the entire bar.
I created a demo page on a site I have to show what I am trying to do. Demo page
.ui-slider-handle {
height: 100%;
color: #000;
margin: 0;
}
Also if someone doesn't mind. I am trying to make the words "Budget" appear in the red part (the budgeted range), but when I applied this: <div class="ui-slider-range">Budget</div> into my html, the word Budget shows to the far left of the slider. The html is like this:
<div id="slider-range">
<div class="ui-slider-range">Budget</div>
</div>
.ui-slider-range {
background: red;
text-align: center;
}
How can I add the background-color to the slider handles and add the word "budget", so that it is in the middle of the red area?
To change ui-slide-handler color, try:
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
background: yellow !important;
}
This is the rule to be overwritten.
The original rule is the following:
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
border: 1px solid #d3d3d3;
background: #e6e6e6 url("images/ui-bg_glass_75_e6e6e6_1x400.png") 50% 50% repeat-x;
font-weight: normal;
color: #555555;
}
It's very easy to see all the rules that apply to any element in the page using browser dev tools element inspector.
Your rule isn't specific enough based on the existing rules that have higher specificity with selectors like:
.ui-widget-content .ui-state-default
/* and */
.ui-slider-horizontal .ui-slider-handle
A simple way to make more specific for one instance would be to use your ID of main widget in selector
#slider-range .ui-slider-handle
Or for more broad reaching use.... copy the most specific selector and use that. Last rule in page with same selector takes precedence
On my webpage, I have a footer which has a textarea box. When the user clicks in the textarea, I want the rest of the page to darken by 60%, kindof like they are in a modal. I am a noob when it comes to advanced css so I am unsure of the properties to apply.
I am using bootstrap 3, javascript and knockout. I know how to detect when the user is in the text area I just want to change the background so everything else is opaque.
A jsFiddle would be wonderful as well :)
We use a combination of CSS and JQuery JavaScript for that. You'd basically use some Overlay method first to overlay the whole page (e.g. See Technique #1 from the Link).
With the help of JavaScript, We attach to events of the forms to:
Show the Overlay
Make the required form elements, e.g. the first Div inside the form, appear above the Overlay ("z-index" CSS attribute)
CSS:
Overlay has Z-Index 10, so give the relevant element the Z-Index 11 to appear on top:
form > div { z-index: 11; }
this JQuery JavaScript can look like this:
$(document).on("focus", "textarea", function() {
$(".overlay").show();
});
Beware, this is not only a "background" topic, if you want to prevent users to do any interaction with the page, you need an overlay which actually blocks clicks. Also, in our case, we also had to prevent any links to be triggered which are below the overlay. Users were still able to go through the links using the TAB key on they keyboard to navigate to a button and click it using the Space key, so we also added JavaScript code to prevent that when in editing mode.
EDIT: a very basic Fiddle
Here is how I would do this - When the user clicks in the text area, set a class on body, and style the class.
with jQuery (you can use vanilla js too)
$('.my-textarea').on('focus', function() {
$('body').addClass('dark');
});
$('.my-textarea').on('blur', function() {
$('body').removeClass('dark');
});
body.dark {
background-color: #333;
opacity: 0.6;
}
A good solution is to make a modal appear behind the input and not just making the background darker, this can be accomplished with css alone
...
<style>
textarea:focus{
z-index: 901;
position: relative;
}
textarea ~ .textarea-modal{
position: fixed;
background-color: transparent;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 900;
pointer-events: none;
transition: background-color .5s ease;
}
textarea:focus ~ .textarea-modal{
pointer-events: auto;
background-color: rgba(0,0,0,0.3);
}
</style>
...
<div>
<textarea></textarea>
<div class="textarea-modal"></div>
</div>
...
feel free to change the selectors to target specific elements, however at the moment when you focus on the textarea a modal would appear below it with other elements behind.
I am not familiar with css or javascript and I am wondering how to have a notification highlight similar to the case when a person commented on a Facebook post, and upon clicking, you will be directed to the said comment with temporary highlight.
Thanks in advance
You can use the CSS3 animation property. Just make sure to add the -webkit- vendor prefix for it to work in all major browsers. The vendor prefixes you need for other CSS3 properties can be found at caniuse.com.
The trick is to add a special class to the element you want highlighted, and applying the animation to that class with CSS.
Try it:
.post{
padding: 1em;
margin: .2em;
background: #ffffff;
border: 1px solid #eceded;
}
.post.highlighted {
-webkit-animation: highlight 6s ease;
animation: highlight 6s ease;
}
#-webkit-keyframes highlight {
from { background: #ddddff }
to { background: #ffffff }
}
#keyframes highlight {
from { background: #ddddff }
to { background: #ffffff }
}
<p class="post">This is just a regular post</p>
<p class="post highlighted">But this one's new!</p>
It looks like you have a few problems you need to solve. I'll walk you through the logic behind each problem. Some of these problems already have solutions posted online, so in those cases I've linked you to the appropriate pages.
1) Respond to a click on an element
http://clubmate.fi/detect-click-with-pure-javascript/
2) Scroll to a specific part of the page
Smooth scroll to specific div on click
3) Highlight an element
This involves changing attributes of an html element, for example the background color. This can be done by changing the class with javascript, and using css to style the element differently when it has the right class
CSS:
.element {
background-color: #0000ff; /* A blue background by default */
}
.element.highlighted {
background-color: #ff0000; /* A red background when the element is highlighted */
}
JS:
document.getElementsByClassname('element')[0].setAttribute('class', 'element highlighted');
Now you just have to run that line of javascript at the appropriate time (after the scrolling has ended - step 2 should give insight on how to do this)
4) Remove the highlighting after a delay
Take advantage of javascript's setTimeout function to remove the highlight class after a delay:
JS:
setTimeout(function() {
document.getElementsByClassname('element')[0].setAttribute('class', 'element'); // Replace "element highlighted" with just "element"
}, 1000); // 1000 means a one-second delay
I am trying to add icons to buttons, which I have dynamically created using jQuery. I created the css class for the button. On running, I am getting a grey round circle on the side of the button, instead of the image. On inspecting elements, I get that the image for the button has been overridden.
How do I ensure that button icons appear instead of the grey circle?
The Code I have used is:
JS:
var btn1 = $("<button/>", {'id': 'TestButton'}).html('Sample Button');
btn1.buttonMarkup({ theme: 'c', icon: 'btn1' });
CSS:
.ui-icon-btn1 {
background-image: url('../../images/gallery.jpg');
background-color: rgb(255,255,255);
border-style: hidden;
-webkit-box-shadow: none;
box-shadow: none;
}
A simple solution is that you put !important to that property.
background: url('../../images/gallery.jpg') !important;
background-color: rgb(255,255,255) !important;
This worked for me on similar issue with jQuery- mobile.
Edit:
To remove the Disc around the button, you need to add
`border: 0 !important;`
to the class
.ui-li-link-alt .ui-btn but make sure you do not override the default behavior of the jQuery UI.