Ajax Control Toolkit Slider Handler Image Positioning - javascript

like the title says, i am using ajax control toolkit SliderExtender . Everything works fine but not the styling of the control. I am using this code in aspx page
<asp:TextBox runat="server" ID="textBoxSlider"></asp:TextBox>
<asp:SliderExtender Orientation="Horizontal" ID="sliderExtenderControl" TargetControlID="textBoxSlider" HandleCssClass="handleClass" RailCssClass="railClass" EnableHandleAnimation="True" runat="server"></asp:SliderExtender>
and the CSS classes :
.handleClass {
width: 44px;
position: absolute;
height: 18px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
overflow: hidden;
background-color: #455f47;
background-image: -webkit-linear-gradient(bottom, #5e5e5e, #8f8f8f);
background-image: -moz-linear-gradient(bottom, #5e5e5e, #8f8f8f);
background-image: -o-linear-gradient(bottom, #5e5e5e, #8f8f8f);
background-image: -ms-linear-gradient(bottom, #5e5e5e, #8f8f8f);
background-image: linear-gradient(to top, #5e5e5e, #8f8f8f);
}
.railClass {
width: 450px;
height: 8px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background: #61bb46;
position: relative;
}
and i have an image for slider handler with height : 18px and width 44px .
The control looks like this :
what i am trying to do but without success is to align the handle image slightly higher so that the rail will be in the middle of the handler. Also i want that the left side of the slider to be a some color and the right side some other color and this colors will change on slider dragging. i think this could be done with some javascript.
In the end i would like the slider to look something like this :

I'm not sure what the sliding js for the component looks like and if it changes the top position for the handle. If it does not change, you can add this to .handleClass
top:-5px;
If you want to make colors change, you must have another div over the handle with opacity:0, which changes it's transparency as the handle moves right. If you supply some the handle js, maybe I can add some code.

Related

Vue - Why are some images getting a hash in production and others not?

I have this CSS for some of my icons:
ul.grid-list li.input-grid-box input.input.consumption {
background: url(../img/icons/icon-consumption.png) no-repeat scroll 3px 14px;
background-size: 21px;
}
ul.grid-list li.input-grid-box input.input.workforce {
background: url(../img/icons/icon-workforce.png) no-repeat scroll 3px 11px;
background-size: 14px;
}
ul.grid-list li.input-grid-box input.input.time {
background: url(../img/icons/icon-time.png) no-repeat scroll 3px 10px;
background-size: 16px;
}
ul.grid-list li.input-grid-box input.input.rooms {
background: url(../img/icons/icon-rooms.png) no-repeat scroll 3px 7px;
background-size: 20px;
}
Every time I build my project and look inside dist/assets/img there is only one icon (icon-rooms) that has a hash (icon-rooms.575a049f.png) while all the others are just inside /icons/ folder without such a hash. Why is this?
By default, generated static assets contains hashes in their filenames for better caching control.
See official vue.js documentation
You can disable this though.

circle with gradient background border and changing colors with js

I need to make a circular border something like this code snippet / fiddle:
.box {
width: 250px;
height: 250px;
position: relative;
margin: auto;
margin: 30px;
border-radius: 50%;
background: #fff;
}
.box:after {
content: '';
position: absolute;
top: -15px;
bottom: -15px;
right: -15px;
left: -15px;
background-image: linear-gradient(to bottom left, #7B73A4 0%, #150E5E 100%);
z-index: -1;
border-radius: inherit;
}
<div class="box"></div>
except the inner space needs to be transparent and there needs to be a way of changing the border's gradient color.
I can use anything with js/jquery/css/html
Is it possible? If yes, how? Thanks
It is possible using a <canvas> element (which is supported in all browsers except for IE 8 and older).
Here are some useful links:
Canvas tutorial - MDN
Canvas API - MDN
Canvas Cheat Sheet
You could also use an SVG element, but that makes the animation much more difficult.

Positioning disables hover selector and mouseover events

This jsfiddle..
https://jsfiddle.net/9e1wd245/12/
..demonstrates a browser behavior I'd like to understand better than I do.
If you remove the positioning from the crumbtray and the crumb, the hover- selected CSS is applied when the crumb is hovered and mouseover events are triggered when the mouse enters the crumb.
With the positioning in place, neither of those things happen; but if you hover over the top border, the hover CSS is applied and the mouseover event is triggered.
(In this situation, the approach used uses positioning to enable z-indexing so that the curved right border will appear over the left side of the adjacent elements.)
Note that you can take the negative right margin off the crumb, and the problem persists, so it isn't being caused by the negative margin.
I realize I could use an svg for a crumb, or maybe use a couple of separator elements over a shared background rather than using positioning and z-indexing, but why doesn't this work? Is there something in the spec that says hover and mouseover events aren't expected to work for positioned elements? Is there something else entirely that I'm overlooking?
html:
<div class="crumbtray">
<span class="crumb">USA</span>
<span class="crumb">California</span>
<span class="crumb">Sacremento</span>
</div>
css:
.crumbtray {
position: relative;
top: 0px;
left: 0px;
display: inline;
z-index: -10;
font-family: ariel, sansserif
font-size: 12px;
}
.crumb {
position: relative;
top: 0px;
left: 0px;
display: inline;
border: solid 1px gray;
border-left: none;
border-radius: 0px 10px 10px 0px;
padding: 0px 8px 0 12px;
margin-right: -10px;
cursor: pointer;
background: #c3f4c6;
background: -moz-linear-gradient(top, #c3f4c6 0%, #96f788 8%, #98e0a4 92%, #419330 96%, #188700 100%);
background: -webkit-linear-gradient(top, #c3f4c6 0%,#96f788 8%,#98e0a4 92%,#419330 96%,#188700 100%);
background: linear-gradient(to bottom, #c3f4c6 0%,#96f788 8%,#98e0a4 92%,#419330 96%,#188700 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3f4c6', endColorstr='#188700',GradientType=0 );
}
.crumb:hover {
background: none;
background-color: yellow;
}
.crumb:first-child {
border-left: solid 1px gray;
z-index: 60;
padding-left: 2px;
}
.crumb:nth-child(2) {
z-index: 50;
}
.crumb:nth-child(3){
z-index: 40;
}
JavaScript:
var ViewModel = {
init: function(){
console.log("ViewModel.init called");
$('.crumbtray').on('mouseover','span',function(){
console.log('mouseover crumb: ', this);
});
}
};
$(ViewModel.init);
Your problem is here:
z-index: -10;
This puts the element behind the background, which means although you can see it, the mouse can't "see" it because it is behind the (transparent) background, so it does not recieve mouseover events.
Now, it should still work, because the .crumbs have a positive z-index, above the background. It's likely that there is simply a bug, I do not believe this behaviour is documented anywhere.
It doesn't work, because you've set a negative z-index to parent element (Why did you do that?). Just remove it from there or change it to some positive value, like 1, for example.
When you set a negative z-index to element, it creates negative stacking context of all children element, so z-index width 40, 50, 60 just make sense inside it's parent, but main z-index will be negative (under body element).
So the main problem is negative z-index, you can cut it and search some information with 'negative z-index hover' keywords to clear the situation
.crumbtray {
position: relative;
top: 0px;
left: 0px;
display: inline;
z-index: -10;
font-family: ariel, sansserif
font-size: 12px;
}

Button will not change color (HTML5)

I have three buttons that act much like radio buttons - where only one can be selected at one time:
<button id="btn-bronze" name="btn-bronze" type="button" class="blue-selected">Bronze</button>
<button id="btn-silver" name="btn-silver" type="button">Silver</button>
<button id="btn-gold" name="btn-gold" type="button">Gold</button>
For the normal, unselected state, all the buttons use a gradient background:
#btn-bronze
{
float: left;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F8F8F8), color-stop(1.0, #AAAAAA));
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
width: 33%;
height: 100%;
}
#btn-silver
{
float: left;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F8F8F8), color-stop(1.0, #AAAAAA));
width: 33%;
height: 100%;
}
#btn-gold
{
float: left;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F8F8F8), color-stop(1.0, #AAAAAA));
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
width: 33%;
height: 100%;
}
When selected, the selected button should add this class to modify the background color:
.blue-selected
{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #FFFFFF), color-stop(1.0, #6699CC));;
}
This is done using jQuery in the method that is called when the body loads:
$("#btn-bronze").click(function()
{
console.log("bronze");
$(this).addClass('blue-selected');
$("#btn-silver").removeClass('blue-selected');
$("#btn-gold").removeClass('blue-selected');
});
$("#btn-silver").click(function()
{
console.log("silver");
$("#btn-broze").removeClass('blue-selected');
$(this).addClass('blue-selected');
$("#btn-gold").removeClass('blue-selected');
});
$("#btn-gold").click(function()
{
console.log("gold");
$("#btn-broze").removeClass('blue-selected');
$("#btn-silver").removeClass('blue-selected');
$(this).addClass('blue-selected');
});
When I click one of these buttons, the console log message appears, but the background color remains the same. What am I doing wrong? Here is the fiddle.
I would fix a couple of things.
Use class instead of ID targeting. I left the IDs in, but you don't really need them now:
<button class="btn" id="btn-bronze" name="btn-bronze" type="button" class="blue-selected">Bronze</button>
<button class="btn" id="btn-silver" name="btn-silver" type="button">Silver</button>
<button class="btn" id="btn-gold" name="btn-gold" type="button">Gold</button>
Then I would use these styles. This way I could add more buttons without creating new styles:
.btn
{
float: left;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F8F8F8), color-stop(1.0, #AAAAAA));
width: 33%;
height: 100%;
}
.btn:first-child {
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
}
.btn:last-child {
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
}
.btn.blue-selected
{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #FFFFFF), color-stop(1.0, #6699CC));
}
Finally, I would simplify the hell out of the javascript:
$(".btn").click(function () {
$(".btn").removeClass("blue-selected");
$(this).addClass('blue-selected');
});
http://jsfiddle.net/4ZygH/1/
#btn-bronze has a higher specificity than .blue-selected, so its background takes precedence.
You can get around this by using !important, but that's probably not the best solution.
The most reliable would be if the parent element also has an ID, then you can select #parent-element>.blue-selected and get a higher specificity.
A ID selector have a more priority then an class selector. You could use important in your css code.

Image in placeholder html?

Can I do something like this with pure html and if needed css and javascript:
And when the mouse focuses, it becomes like this:
So I was thinking of an image placeholder. Am I on the right track, or is there a better/more simpler or more straightforward method?
EDIT: Just out of pure curiosity, how would I accomplish this using JavaScript, as all the current answers are all CSS-related?
From my knowledge this is simply CSS background image.
http://www.w3schools.com/cssref/pr_background-image.asp
Have it look there, you can accomplish this by setting its position like here: http://www.w3schools.com/cssref/pr_background-position.asp
You can also change the background image depend on if the item is focused or not simply showing the back ground image when focused and hiding it when its not like:
#item:focus{
bacground image code here
}
More details on focus here: http://www.w3schools.com/cssref/sel_focus.asp
And some focus usage example: http://www.mozilla.org/access/keyboard/snav/css_usage.html
UPDATE WITH RESOURCE - THANKS #MrMisterMan
http://developer.mozilla.org/en/CSS/background-image
http://developer.mozilla.org/en/CSS/background-position
JAVASCRIPT:
Using JavaScript add the attribute to your element like below:
This will call your function when it has focus and pass it the input element.
Also you can detect onfocusout
Hope this helps, any questions just ask :)
If you only need to support the latest Browser use this:
HTML:
<input placeholder="Google Custom Search" type="search" name="q">
CSS:
#myInput::-webkit-input-placeholder {
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/150x20");
background-position: 0 50%;
background-repeat: no-repeat;
}
#myInput::-moz-placeholder {
/* Firefox 19+ */
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/150x20");
background-position: 0 50%;
background-repeat: no-repeat;
}
#myInput:-moz-placeholder {
/* Firefox 18- */
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/150x20");
background-position: 0 50%;
background-repeat: no-repeat;
}
#myInput:-ms-input-placeholder {
/* IE 10- */
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/150x20");
background-position: 0 50%;
background-repeat: no-repeat;
}
JSFiddle
Browser Support
If you need an image (google logo in the question) you should set the placeholder image as the background of the text field:
input.search {
background-image: url("placeholder.gif");
background-repeat: no-repeat;
}
input.search:focus {
background-image: none;
}
Note: :focus is a pseudo-class in css, which is activated on focus
You may use just CSS.
You can give a solid border with say 4px width.
You can make round corners foor your input using moz-border or webkit-border radius.
You can use a border background image.
here you can read about css3 borders http://www.w3schools.com/css3/css3_borders.asp
You may try
input {
border:2px solid #dadada;
border-radius:7px;
font-size:20px;
padding:5px;
}
input:focus {
outline:none;
border-color:#9ecaed;
box-shadow:0 0 10px #9ecaed;
}
Here is the working fiddle

Categories