Whereas I have plenty of experience with PHP coding, I am pretty new to using javascript so I hope this question doesn't come off as stupid.
My goal here is to create a button that when pressed causes the background-position in a defined DIV object to alter its background-position by one pixel.
I've been doing a lot of searching on Google as well as this site in particular and following the tips I have found I've been playing around with the javascript functions a lot but I can't seem to get one that works the way I need it.
My current incarnation looks like this:
<SCRIPT TYPE="text/javascript">
var xObject = 0; // Global
function xMinus(ele) {
xObject-=1;
document.getElementById(ele).css({ 'backgroundPosition': xObject + 'px ' + 0 + 'px' });
}
</SCRIPT>
Where the goal is upon clicking the button (containing onclick="javascript:xMinus('divID');" ) the background should shift to the left by one pixel.
However currently when I click it, Error Console gives me "Error: document.getElementById(ele).css is not a function".
I've tried a few different variations but always get similar results, or "Variable is not defined". Clearly I have no idea what I am doing. Please help! I am coding this for friends and do not want to keep them waiting too long.
If you are not using jQuery then,
document.getElementById(ele).style.backgroundPosition = xObject + 'px ' +'0px';
What are you passing inside the ele? It should be a string of the id of the element and it shouldn't start with a number.
Try rewriting the code this way:
var xObject = 0; // Global
function xMinus(ele) {
xObject--;
$('#'+ele).css({ 'backgroundPosition': xObject + 'px ' + 0 + 'px' });
}
I hope you are using jQuery! :) If not using jQuery, it should be:
document.getElementById(ele).style.backgroundPosition = xObject + 'px ' + '0';
And for the handler, that <a> tag, the code should be: (shouldn't contain javascript:)
BG Left Push!
Related
so i have not found similar issue, i thought equivalent of .find is querySelector, and 'this' exist in pure JS too, i think similar script work so i hope it works the same
i am translating this function
$('.my-gallery').each(function() {
$(this).find('a').each(function() {
$(this).attr('data-size', $(this).find('img').get(0).naturalWidth + 'x' + $(this).find('img').get(0).naturalHeight);
});
});
and this is my current translated code
var elements = document.querySelectorAll('.my-gallery');
Array.prototype.forEach.call(elements, function(){
var a = this.querySelector('a');
Array.prototype.forEach.call(a, function(){
this.getAttribute('data-size', this.querySelector('img').naturalWidth + 'x' + this.querySelector('img').naturalHeight);
});
});
everything goes find but it gets stuck at this.querySelector('img').naturalWidth, i am not sure why beacuse this.getAttribute works fine, so why i cannot query chilren of this element
You can do more than just translate it. You can improve on it so you don't have to use this. It also looks like you're trying to set the attribute and not get it, based on your jQuery code.
The below should work for you.
Array.from(document.querySelectorAll('.my-gallery a')).forEach(function(anchor) {
anchor.setAttribute('data-size', anchor.querySelector('img').naturalWidth + 'x' + anchor.querySelector('img').naturalHeight);
});
First post here, so please be gentle ;-)
I've been learning coding over the last couple of weeks by making a dummy page, and been implementing what i learn on it incrementaly as i progress, hence it's a mixed bag where the functionality/code is according to when i wrote it, based on pure html/CSS, inline javascript, external javascript, and finally jquery.
So i mostly wrapped it up and i'm now cleaning up the mess, and part of my mission is to cull functions and lines of codes, and in one of them i'm kind of stuck.
The before was 30 buttons calling to 30 different functions onclick like so:
function cell3() {
document.getElementById('base3').src='images/1/3/' + x + '.png';
document.getElementById('base3b').src='images/1/3/' + x + '.png';
document.getElementById('v2base3').src='images/2/3/' + x + '.png';
document.getElementById('v2base3b').src='images/2/3/' + x + '.png';
document.getElementById('cell3').style.backgroundColor= x ;
}
Where a global variable (x) defines the folder paths for images to replace the images within some divs when clicking the button (cell3). It also changes the bGroung color of it. Sorry if the naming is a bit confusing...
So i'm removing all 30 functions and the 30 onclick calls with this bit of jquery:
$('button').click(function(){
var eyeD = $(this).attr("id");
var newURLa = 'images/1/' + eyeD + '/' + x + '.png';
var newURLb = 'images/2/' + eyeD + '/' + x + '.png';
$('base' + eyeD).attr('src', newURLa);
$('base' + eyeD + 'b').attr('src', newURLa);
$('v2base' + eyeD).attr('src', newURLb);
$('v2base' + eyeD + 'b').attr('src', newURLb);
$(this).css( "background-color", x );
document.getElementsByid('check').innerhtml = eyeD;
});
For that to 'work' i changed the button's names from 'cell1', 'cell2, etc. to '1', '2', etc.
Now the thing is, when clicking on the buttons the var 'eyeD' takes the value from the button ok. ('1', '2', etc.). The elements ID's are formed correctly ('base1', 'base2'... 'base1b', base2b'...), and the URL's are formed correctly. (The last line in the code is a p element that displays values so i could try to troubleshoot it) The background color also changes as expected. But the images do not get replaced.
Tried adding commas to the resulting URL's in case it was a syntax issue, but nothing happens. i even went freestyle and tried it with the =url() on it, different commas in different places, etc. So basically scraping the barrel here. Also wrote a url without variables to see if that would work, but still nothing. Also getting no errors when looking at the console.
It's probably a basic 'DOH!' thing, but right now i have a mental block...
Also, is there a way to keep the original naming and just retrieve the numbering part of the ID's? Thought about using the [4] identifier to get the 5th digit, but that won't work when running double digit numbers. (10, 11, etc)
Thanks!
Your jQuery lines accessing the elements are missing the # sign.
Change these...
$('base' + eyeD).attr('src', newURLa);
To this...
$('#base' + eyeD).attr('src', newURLa);
Also, your last line where you use plain JS, can be done in jQuery as well with less code.
document.getElementsByid('check').innerhtml = eyeD;
To...
$("#check").html(eyeD);
However, you should always use distinct ID's for elements. If you need to use multiple elements at the same time, use a class instead.
$(".check").html(eyeD);
You're grabbing an element incorrectly.
Either Grab an element by it's class name like so:
$('.v2base' + eyeD + 'b').attr('src', newURLb);
Or by its ID:
$('#v2base' + eyeD + 'b').attr('src', newURLb);
Problem solved!! It was indeed calling the id with the hash, but also it has to be called with double quotation marks. Single inverted commas won't work.
So the working format is
$("#v2base" + eyeD + "b")
but it won't work like so
$('#v2base' + eyeD + 'b')
Thanks everyone, it's been emotional
I'm pretty new to javascript, so this is probably a fairly easy question. However, part of the problem why I can't fix it myself is, that I don't know exactly what to search for.
I have multiple progress bars, these are distinguishable by implementing a class:
<div class=\"progress_bar bar" + pbid + "\" value =\"100\">
Now, in JS, I try to adress them directly by their class:
function updatepb(pbid) {
var val = $('.progress_bar.bar' + pbid).progressbar('value');
val += 60;
$('.progress_bar.bar' + pbid).progressbar('value', val);
};
This does not work.
If I adress the bars directly, e.g
$('.progress_bar.bar1').progressbar('value', val);
it works.
So the problem is basically just how to implement the variable.
Can someone please tell me what I'm missing? :-)
Hi i want to know if there is a way of setting a style of on object through javascript using a string, i don't know how to explain it very well hopefully my code will
function updateElementFromValue(inputval, valueOfStyle)
{
selectedActiveElement.style.valueOfStyle = inputval.value + "px";
}
so i have this function and when i call it, inputval will be an input field and valueOfStyle will be passed as top or left or width etc so it effectively becomes, ignore selectedActiveElement as it is a global object.
selectedActiveElement.style.top = 200 + "px";
i figure im not calling it right but i think their is a way of doing this.
Thanks for you help
You can use the setProperty function
element.style.setProperty(valueOfStyle, inputval.value + "px")
Also you're able to do sth. like this:
element.style[valueOfStyle] = inputval.value + "px"
but I would not recommend it since not every browser supports that.
I am trying to replace the content of a div tag with a certain value every 50sec via polling and jQuery. And I would like to access the value of that updated div, so I can save a request to the backend.
My problem is that once the content has been replaced, the browser displays it correctly, however the HTML stays the same as the beginning. I'm afraid this is a rather basic question, but I'm really curious about this.
Here I prepared an example to illustrate the issue: http://jsfiddle.net/LJgN6/7/
And you can see it out ot JSfiddle's context to check the final HTML here: http://jsfiddle.net/LJgN6/7/show
I would like to achieve a way to have in the final HTML(i.e. right click, view page source):
num 1.1 replaced with num 1.2
num 2.1 replaced with num 2.2
...
The code that you see in the View Source window is the HTML that was sent to the browser before anything client side was allowed to modify the DOM. If you want to see the source as it is modified by your javascript, you need to inspect the DOM (IE F12, Firebug, etc.)
If you need to access this value that was inserted earlier, using javascript to access the contents of your element (ie. $('#number-2').text()) should return its contents as they are currently in the DOM.
EDIT: Corrected typo
It looks like you're already familiar with jQuery so I would go ahead and head over to the extremely helpful API and take a look at AJAX calls. There is plenty of documentation there that will help you.
http://api.jquery.com/jQuery.ajax/
Here's an idea. Take a look at my fiddle of your problem
$(document).ready(function(){
$('#number-1').html("num " + 1.1);
$('#number-2').html("num " + 2.2);
$('#number-3').html("num " + 3.3);
$('#number-4').html("num " + 4.4);
setInterval(function(){newInfo();}, 3000);
});
function newInfo(){
var firstDiv = $('#number-1');
var secDiv = $('#number-2');
var thdDiv = $('#number-3');
var frthDiv = $('#number-4');
var firstDivInfo = firstDiv.text().substr(4);
var secDivNewInfo = firstDiv.text().substr(4);
var thdDivNewInfo = secDiv.text().substr(4);
var frthDivNewInfo = thdDiv.text().substr(4);
var newNumber = (Math.random() + 1).toFixed(1);
secDiv.html("num " + secDivNewInfo);
thdDiv.html("num " + thdDivNewInfo);
frthDiv.html("num " + frthDivNewInfo);
firstDiv.html("num " + newNumber);
}