Develop Reference

How to change jQuery css style to vanilla JS

I got a code in jQuery and I need transform this to pure javascript code.
$(window).scroll(function () {
$('.baner').css({'transform':'translate3d(0px, '+(-($(this).scrollTop()/5))+"px"+', 0px'});
});
What i tried to do is:
let win = document.querySelector(window);
let banner = document.getElementById('#baner');
win.addEventListener('scroll',function () {
banner.css({'transform':'translate3d(0px, '+(-($(this).scrollTop()/5))+"px"+', 0px'});
});
<div class='#baner'>
</div>
How to change the jquery css code .css({'transform':'translate3d(0px, '+(-($(this).scrollTop()/5))+"px"+', 0px'}); to JS?

let banner = document.getElementById('#baner');
Make sure this is correct:
let banner = document.getElementById('banner');
You don't use '#' since you already said it's an Id.
document.getElementById()

As Kalinauskas mentioned in his answer, you could use document.getElementById().
// () => {} is ES6 shorthand for a function (also called arrow function, read about it here https://www.w3schools.com/js/js_arrow_function.asp
// Instead of the .css function for jQuery, you have .style.yourStyleAtributeHere
let banner = document.getElementById('baner');
window.addEventListener("scroll", () => {
banner.style.transform = 'translate3d(0px, ' + (-(banner.scrollTop / 5))+"px"+', 0px'
});

If statement is not working inside click/swipe event

I am trying to use if statement inside a jquery event but it is not worknig. This is my code:
$(".carousel").swipeleft(function(){
rightPos += 242;
$(this).animate({ "right": rightPos }, swipeSpeed);
var currentRightPos = $(".carousel").css("right");
alert(currentRightPos);
if(currentRightPos > 500){
alert("Its 500");
};
});
I dont know what is happening. If statement is not working even inside a click event. Swipe event also working fine. alert(currentRightPos); also working fine but only if statement is not working. I have read through 5-6 questions in stackoverflow but nothing was helpful. If you need any further information please comment. Thank You.

$(".carousel").css("right") returns 'Npx'.
Try with:
var currentRightPos = parseInt($(".carousel").css("right").replace(/px/, ''));

It should by something like this.
$(".carousel").click(function(){
var rightPos = "+=242";
var swipeSpeed = 500;
$(this).animate({right:rightPos},swipeSpeed);
var currentRightPos = $(".carousel").css("right");
alert(currentRightPos);
if(currentRightPos > "500"){
alert("Its 500");
};
});
https://jsfiddle.net/svejofck/
Hope it helps :)

JQuery text rotator

I am trying to create a simple jquery text rotator:
I have a span in which text should fade in and out.
There are similar questions here on stackoverflow but I can't apply their solutions to my situation
Here is what I wrote so far and I was wondering why this code doesn't work:
var i=0;
function rotate(spanid,w1,w2,w3){
var myspan = "#"+spanid;
var words = [w1,w2,w3];
$(words[i]).appendTo(myspan).fadeIn(2000).delay(2000).fadeOut(2000);
i==words.length? i=0:i++;
rotate(spanid,w1,w2,w3);
}
Is the approach to the problem correct? Why isn't this code working?
Thank you all in advance!
EDIT
The code isn't working as nothing is showing up.
Here is the html section relative to the function:
<p>Blah blah blah <span id="rotate"></span> blah blah blah </p>
<script>
$(rotate("rotate","word1","word2","word3"));
</script>

Okay, i've had a quick play and expanded it a little for you..
JS Fiddle: http://jsfiddle.net/4k3zfv5f/
function rotate(sID,aWords, iIndex){
$("#"+sID).html(aWords[iIndex]).fadeIn(1000, function() {
iIndex==(aWords.length-1)? iIndex=0:iIndex++;
$("#"+sID).fadeOut(1000, function() {
rotate(sID,aWords,iIndex);
});
});
}
rotate("test1",["Hello", "World", "Foo"], 0);
rotate("test3",["John", "Bob", "Billy", "Mike", "Larry"], 0);
EDIT - UPDATE
Basically there were a few corrections i had to make, so instead of going over each one.. Will just let you compare the changes.. Part of it is that the fade functions did not wait til they completed, the Delay command only applies to the jquery object and the append i reversed just for my visual sake.
Also the last part as you mentioned in the comments, was to swap appendTo with html.
Just as an extra bonus, a shuffle example:
JS Fiddle Showing With Shuffle Example: http://jsfiddle.net/ye3rjy2v/1/

The logic of the append > fade > delay > fade wasn't really working. I've added a Timeout and a callback function to the fadeout to make it working nicely. Also made it easier to write the call function so you have only one extra parameter. EXAMPLE
var i = 0;
function rotate(spanid, words) {
var arrWords = words.split(',');
var myspan = $('#' + spanid);
i == arrWords.length-1 ? i = 0 : i++;
myspan.text(arrWords[i]);
myspan.fadeIn();
setTimeout(function(){
myspan.fadeOut(400, function() {
rotate(spanid, words);
});
}, 2000);
}
rotate('rotate', 'word1,word2,word3');

$(function () {
function rotate(spanid, arrayOfWords) {
var $mySpan = $("#" + spanid);
(function repeatRotate(index) {
var i = index || 0;
$mySpan.text(arrayOfWords[i]).fadeIn(1000).fadeOut(1000, function () {
i = (i === arrayOfWords.length - 1) ? 0 : ++i;
repeatRotate(i);
});
})();
}
rotate("rotate", ["word1", "word2", "word3"]);
});
JSBIN DEMO
The above code will rotate the words defined in array after particular time interval.

jquery-1.4.1.min.js is not working

The code below works prefect in visual studio 2010 but doesnt work on visual studio 2008,
if there any others exception that i miss out? what else i should check for in order to know what am i missing?
Noted* i can only received alert(starting) but not alert(end1) and alert(end2)
newest edited comments - i found that my jquery file is not loaded correctly, i dont want to use url, can provide me local src? i got few project file inside a solution, my Script folder is inside one of my project file, so what should my local src look like?
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
alert("Starting");
var data = {
btnSaveDraft: "this is save draft button",
btnSubmit: "this is button submit"
}
function ShowTooltip() {
var Tip = $("<div class='dinamictip'></div>");
$("input").hover(function() {
Tip.text('');
var ToolTipID = $(this).attr('id');
var height = $(this).height() + 10;
var offset = $(this).offset();
if (data[ToolTipID].split('<br\>').length - 1) {
var temp = data[ToolTipID].split('<br\>').length - 1;
height = temp * 10;
} else {
height = 10;
}
Tip.html(data[ToolTipID]);
Tip.css('display', 'inline').css('position', 'absolute').css('background', 'lightyellow').css('border', '1px solid #cccccc').css('color', '#6c6c6c').css('left', offset.left).css('top', offset.top - height).css('border-radius', '15px')
Tip.appendTo('body');
},
function() {
Tip.remove();
});
}
$(function() {
ShowTooltip();
alert("End1");
});
alert("End2");
</script>

Use FireBug Console to check weather your script loaded or not..
add this line..instead of your jquery js file
http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js

May be this is the error, try to call in doc ready:
$(function(){
ShowTooltip();
});

Try running it in $(document).ready(function(){ }. Also, there is no need to chain multiple css() calls like that. Try using the syntax of css({prop1: 'value1', prop2: 'value2'})

Move background button using javascript

function changeBackground() {
var myVar = 100;
$('div.seventh').css({"background-position": myVar});
}
This is my code to make the background image move. It works but only only once... The solution I've tried to use to make it work more than once is this:
function changeBackground() {
var myVar = ($('div.seventh').css('backgroundPositionX'))+100;
$('div.seventh').css({"background-position": myVar});
}
Problem is that this doesn't seem to work like I want it to work. I get the right number that I want when doing:
alert($('div.seventh').css('backgroundPositionX'));
But it just won't work...
Any ideas?...

You can use the animate() function:
$('div.seventh').animate({
'background-position' : '+=50px'
});

You can try this trick :
$('div.seventh').css({"background-position": "+=50px"});
Hope this will help.