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.
Related
I've made a bunch of JavaScript functions to show, hide and populate various elements on a zooming menu. All seem to working except for one which I need the function to only run if a CSS setting is a specific value (width of 195%). I am very new to JavaScript so there may be more than one issue here.
<script>
function zoomShowF2() {
var widthNow = document.getElementById('svg1').style.width;
if widthNow = '195%' {
document.getElementById('zoomTitle').style.display = 'flex';
else
document.getElementById('zoomTitle').style.display = 'none';
}}</script>
You need to use comparison operators write the if statement as follows
if (widthNow == '195%') {
as the single = is assigning the value not comparing it
There are a few issues with your syntax:
function zoomShowF2() {
var widthNow = document.getElementById('svg1').style.width;
if (widthNow === '195%') {
document.getElementById('zoomTitle').style.display = 'flex';
} else {
document.getElementById('zoomTitle').style.display = 'none';
}
}
Thanks everyone. It works now with a combination of the changes suggested. I assume my curly braces are all in 'tidy' positions?
EDIT. I've adjusted the curly brace positions to as per Ed's layout.
Thanks all!
Your code does not called when the element changes it size or width. You must put all your code inside window.onresize event.
var displayOutput = document.getElementById("display-option");
function reportWindowSize() {
displayOutput.text = document.getElementById("element-to-check").style.width;
}
window.onresize = reportWindowSize;
<p id="element-to-check">Resize the browser window to fire the <code>resize</code> event.</p>
<p>Display: <span id="display-option"></span></p>
looking for some help on a dumb problem.
I have these functions:
function update_pred(){
var sum_pred = 0;
$('.pred').each(function(){
var importo_pred = this.value;
importo_pred = importo_pred.replace(",",".");
sum_pred += parseFloat(importo_pred);
$('#pred_tot').html(sum_pred);
});
}
function update_ipo(){
var sum_ipo = 0;
$('.ipo').each(function(){
var importo_ipo = this.value;
console.log(importo_ipo);
importo_ipo = importo_ipo.replace(",",".");
sum_ipo += parseFloat(importo_ipo);
console.log(sum_ipo);
$('#ipo_tot').html(sum_ipo);
});
}
These are supposed to update a table cell based on the values of some other field with a specific class.
If I call each of these functions from a change event in Jquery everything works fine.
What is not working is this:
$(document).ready(function(){
update_pred();
update_ipo();
});
I am not able to fire the two functions on page load. I load each value from mysql and I want to display the sums on load.
What do I miss?
Thanks for the help as usual!
Solved. The problem was related to this piece of code:
$('.ipo').each(function(){
$(this).change(function(){
update_ipo();
});
});
Turning it to the right form of:
$('.ipo').change(function(){ update_ipo(); });
did the trick.
This code was working by itself but was hanging all other javascript from working.
Can you please tell me how to remove the div content? I am getting data from server regularly. I check if div height is "100" .
Then it remove content and write data from top in jQuery.
I tried very thing nothing is working for me.
var scrollerDivHeight=$('#scroller').height();
if(scrollerDivHeight==100){
// $('#scroller').val()='';
$('#scroller' ).innerHTML = '';
$("#scroller").empty();
$('#scroller').val('');
$('#scroller').html('');
$('#scroller').refresh();
myScroll.refresh();
}
You can try replacing this with your code
var scrollerDivHeight=$('#scroller').height();
if(scrollerDivHeight >= 100){
$('#scroller').replaceWith('<div id="scroller"></div>');
}
Use > not == also fix the id
setInterval(function () {
$('#scroller').append("Hiiiii. is div").css("line-height", "100px");
var scrollerDivHeight=$('#scroller').height();
//alert(scrollerDivHeight)
console.log(scrollerDivHeight)
if(scrollerDivHeight>100){
$("#scroller").empty();
}
}, 1000);
DEMO
Us the Empty() method in jquery
setInterval(function () {
$('#realtime').append("Hiiiii. is div").css("line-height", "100px");
var scrollerDivHeight=$('#realtime').height();
if(scrollerDivHeight>100){
$("#realtime").empty();
}
}, 1000);
See fiddle Demo
Read Jquery Empty Documentation here
I want to replace the number in the image src (eg. from eyes1 to eyes2) when I click a button.
moveRightBtn.on('click', function(){
var eyesImg = $('#eyesImg').get(0).src;
console.log(eyesImg) // <--- folder/folder/folder/img/eyes1.png
//iterate with one (eg. eyes1.png to eyes2.png) and change the src?
}
What is the best way to do this?
Just to expand on pmandell answer, you could also keep an increment (if that's what you want to do)
Also, it seems your image has an ID of eyesImg, so I've taken that into account also
var counter = 0;
moveRightBtn.on('click', function(){
$('#eyesImg').attr('src','folder/folder/folder/img/eyes' + counter + '.png');
counter++
}
Edit
Here's an example involving cats. Cats always help
http://jsfiddle.net/alexjamesbrown/6Cve9/
moveRightBtn.on('click', function(){
$(this).attr('src','new_src_string');
}
moveRightBtn.on('click', function(){
$(this).prop('src','folder/folder/folder/img/eyes2.png');
}
Use like this
var image = $(this).attr('src');
//alert(image);
var newimage = image.replace('1.png','2.png');
$(this).attr('src',newimage );
fiddle
Try this one:
$('#eyesImg').attr('src',$('eyesImg').attr('src').replace('eyes1','eyes2'));
I've tried a lot of things, but nothing is working.
When I click on an mage, I want it's z-index to be "9999". When I click to show another image, I want the previous image's z-index to go back to "0".
So basically, I only want one image to show at a time - I want a specific function to run for each image.
http://jsfiddle.net/WarrenBee/a78R7/
PLEASE help me!
Change your JavaScript to this:
$('.char').click(function () {
$('.char img').css({'z-index' : '0'});
$(this).children('img').css({'z-index' : '9999'});
});
This will set the z-index of all imgs inside a char class back to 0, before setting the one that was clicked to 9999.
Just remember the last image and value and put the old value back:
var lastImage, lastZIndex;
$('.char').click(function () {
var thisImage = $(this).children('img');
if (lastImage) {
lastImage.css('z-index', lastZIndex);
}
lastImage = thisImage;
lastZIndex = thisImage.css('z-index');
thisImage.css({'z-index' : '9999'})
});
Updated fiddle
Ideally, avoid creating global variables by wrapping all of that in a function:
(function() {
var lastImage, lastZIndex;
$('.char').click(function () {
var thisImage = $(this).children('img');
if (lastImage) {
lastImage.css('z-index', lastZIndex);
}
lastImage = thisImage;
lastZIndex = thisImage.css('z-index');
thisImage.css({'z-index' : '9999'})
});
})();
Further updated fiddle