jQuery animate issue - javascript

My function looks like that
$.fn.animateHighlight = function(highlightColor, originalColor, type, duration) {
var highlightBg = highlightColor || "#FFFF9C";
var animateMs = 500;
var animateVal1 = {};
animateVal1[type] = highlightColor;
var animateVal2 = {};
animateVal2[type] = originalColor;
this.stop().animate(animateVal1, animateMs).delay(duration).animate(animateVal2, animateMs);
};
Calling this like that
$("#variants").animateHighlight("red", "#9c9c9c", "borderColor", 3000);
The problem is,
This is default border color of fieldset
And this is after animation color
I know that animate adds extra style attribute to element. What I wanna do is, return back original fieldset border color (removing style attribute will return back original border color).
Tried to change last line of function to this
this.stop().animate(animateVal1, animateMs).delay(duration).animate(animateVal2, animateMs).removeAttribute('style');
Animate didn't even start.
How can I animate and reset back to original version after flashing?


this.stop().animate(animateVal1, animateMs).delay(duration).animate(animateVal2, animateMs, function() {
this.removeAttribute('style');
});


I think the two method for this.
1.If you used border color in stye attribute for VariantDiv.Default Styles will be lost in style when you remove style attribute. So you should hold first border color.
For Example :
http://jsfiddle.net/tEwa9/
2.if when you don't use style you can do this way.
You can call this code when animate completed.
$(this).attr('style','');
For example:
http://jsfiddle.net/xSYWS/

Related

Inner DIV CSS style updation with Javascript

For the following styles, how does one change the value of background color using javascript.
i)Internal Style sheet and/or ii) External Style sheet
I am using the card deck slide show from https://github.com/dynamicdriverepo/carddeckslideshow
div.stackcontainer > div.inner{
background: #D7F9FF; }

One way would be to use a CSS variable (Only available in the latest browsers)
div.stackcontainer > div.inner{ background: var(--inner-bg-color, #D7F9FF); }
Then you can use JS to set the value for --inner-bg-color anywhere from div.inner or above.
document.querySelector('div.stackcontainer').style.setProperty('--inner-bg-color', 'red')
But if you can't change their CSS then you need to adjust the style for that element:
var el = document.querySelector('div.stackcontainer > div.inner');
if (el) {
el.style.backgroundColor = '#FF0000';
}
Be aware that you are now messing with the specificity values that determine what CSS to use. And, if you want to reset to the original then you need to remove the style value from that element.
var el = document.querySelector('div.stackcontainer > div.inner');
if (el) {
el.style.backgroundColor = '';
}

snap svg toggle animation

I'm using Snap.svg to create an animated icon that toggles between search and X on click. I've got the animation working in one direction. I know it probably uses a callback function to toggle back but I don't have enough experience to get it working properly.
JSFiddle
//Creates Snap object
var paper = Snap("#search");
//Creates lines
var top = paper.path("M42.5,104.7L98.3,44c0,0,8.9-11.2,21.2-2.5c17.5,12.3,19.2,56-7.7,66.4c-6.8,2.7-12.7-3.2-12.7-3.2L80.8,85.7l0,0c-4,4.3-9.7,6.9-16.1,6.9c-12.2,0-22.1-9.9-22.1-22.1c0-1.3,0.1-2.6,0.3-3.9").attr({fill:"none", strokeWidth:"10px", stroke:"#b7b7b7",strokeLinecap:"round", strokeLinejoin:"round", strokeMiterlimit:"10", strokeDashoffset:"0",strokeDasharray:"80, 220"});
var bottom = paper.path("M43,66.7c1.8-10.3,10.9-18.2,21.7-18.2c12.2,0,22.1,9.9,22.1,22.1c0,5.8-2.3,11.1-5.9,15.1c0,0-16.9,15-49.8,4.3C9.8,83.2,5.8,57.3,17.1,46.4C30.8,32.9,42,45.6,42,45.6l57.2,59.3").attr({fill:"none", strokeWidth:"10px", stroke:"#b7b7b7",strokeLinecap:"round", strokeLinejoin:"round", strokeMiterlimit:"10",strokeDashoffset:"81",strokeDasharray:"80, 220"});
//Animates on click
paper.click(function(){Snap.animate(0,-200, function(value){top.attr({'strokeDashoffset': value })},300, mina.easein );});
paper.click(function(){Snap.animate(0,-300, function(value){bottom.attr({'strokeDashoffset': value })},300, mina.easein);});

The simplest solution would probably just involve toggling between two different states. My implementation looked like:
var toggle = true;
paper.click(function() {
if (toggle) {
toggleTo();
toggle = false;
} else {
toggleFrom();
toggle = true;
}
});
function toggleTo() {
Snap.animate(0,-200, function(value){top.attr({'strokeDashoffset': value })},300, mina.easein );
Snap.animate(0,-300, function(value){bottom.attr({'strokeDashoffset': value })},300, mina.easein);
}
function toggleFrom() {
Snap.animate(-200, 0, function(value){top.attr({'strokeDashoffset': value })},300, mina.easein );
Snap.animate(-300, 81, function(value){bottom.attr({'strokeDashoffset': value })},300, mina.easein);
}
To start, I set a boolean variable toggle to true. Then on the click event for the SVG you created, I check which state the element is in (based on the boolean value) and then call the appropriate function to animate the SVG.
Edit: Here's the JSFiddle.
Here's a similar Stack Overflow question.

Spectrum color picker: How can I change the position of the custom added colors

I am using Spectrum color picker plugin.
I am trying to change the position of the custom added colors (sp-palette-row-selection) over to another place? How can I edit the JavaScript to allow me to do so?
Here's a link to the full JavaScript code: spectrum.js.
I think the important function were looking for (of the JavaScript file) is this:
function drawPalette() {
var currentColor = get();
var html = $.map(paletteArray, function (palette, i) {
return paletteTemplate(palette, currentColor, "sp-palette-row sp-palette-row-" + i, opts);
});
updateSelectionPaletteFromStorage();
if (selectionPalette) {
html.push(paletteTemplate(getUniqueSelectionPalette(), currentColor, "sp-palette-row sp-palette-row-selection", opts));
}
paletteContainer.html(html.join(""));
}
I removed the inside of the if-statement, and added the following:
$('.sp-input-container').after($('.sp-palette-row-selection'));
But when I did that, I didn't see the "custom added colors" at all.

Set background colour to Input box in SAPUI5

I'm trying to change the colour entire input of sap.m.Input.
Since it is having place holder & inner only border colour is changing.
document.getElementById("loginuser-placeholder").style.backgroundColor = "#232055 !important";
document.getElementById("loginuser-inner").style.backgroundColor = "#232055 !important";
This is how I tried forcing the elements to change its colour.
I also tried this:
var loginuser = new sap.m.Input("loginuser",{placeholder:"Username"});
loginuser.addStyleClass(".loginuser{background-color:#232055 !important }");
https://i.stack.imgur.com/uMTzb.jpg

When setting multiple values with JavaScript, it is not possible to do it in one, you need to call document.getElementById multiple times, like this:
function myFunction(){
document.getElementById("div1").style.backgroundColor = "blue"
document.getElementById("div1").style.backgroundColor = "!important"
}
not
function myFunction(){
document.getElementById("div1").style.backgroundColor = "blue !important"
}

If you want to use a class, all you need to do is
oInput.addStyleClass("loginInput")
and in your css file you will add the style
.sapMInput.loginInput {
color: blue;
}

change background color of window from data inputed from text field

I am building a 'Carpark Logger' app in Titanium. I have 2 textfields, where users enter what level they are on and what color (area) they are parked in. When the save button is clicked, I need the background of the next window (saved Location) to change to that color.
I have set a variable of the textField.value and have created a function to change the background color to the text.field value. So far when the save button is clicked it just changes the background for the savedLocations window to black (or transparent??).
Any ideas on how I can use the text entered in the color textField and save it as the background to savedLocations window. Here is a snippet of my code:
var colourData = colourTextField.value;
saveButton.addEventListener('click', function(e){
savedLocationsWindow.backgroundcolor = bgColour(colourData);
carLoggerTabGroup.setActiveTab(savedLocationsTab);
});
function bgColour(color){
backgroundColor = color;
};

If would forget about that extra function and just do it like this:
saveButton.addEventListener('click', function(e){
savedLocationsWindow.style.backgroundColor = colourTextField.value;
});

I'm not familiar with titanium, but here's a couple of suggestions:
function bgColour(colourData) {
// do some transformations on the color data perhaps?
// 1. We need to actually return the data:
return colourData;
}
saveButton.addEventListener('click', function (e) {
// 2. We need to get the value of the text field AFTER the saveButton
// has been clicked, so this part of code is inside the event listener:
var colourData = colourTextField.value;
// 3. Mind the "style" and capital "C" in backgroundColor
savedLocationsWindow.style.backgroundColor = bgColour(colourData);
carLoggerTabGroup.setActiveTab(savedLocationsTab);
});

Categories

Resources