I'm having some images change on the value change of a <select> dropdown. I've simplified the code here to get the general idea across. Here's what I've got (let me know if you have any questions; I know I haven't shown 'select_text' in here but I don't think it's entirely necessary and I'd have to unravel a bunch of code to simplify here):
var select_option_select = select_text.parent().find('select');
select_option_select.change(function(){
var changed_value = select_text.parent().find('select option[value="' + $(this).val() + '"]').text();
});
//THIS IS WHERE THE IMAGE CHANGES
if(changed_value=="Standard Crossline Grips (free)"){
$('#grip_image').attr('src','/v/vspfiles/images/grip_image.jpg');
}
I know this works but because of the way it's set up, the string of changed value has to be exact the same value as what I put in the IF statement. I've been trying to use 'contains' so it will give me more flexibility moving forward on the site. I know that I can't use 'contains' on a text() value so I re-wrote it like this (note that I get rid of the text() function):
var select_option_select = select_text.parent().find('select');
select_option_select.change(function(){
var changed_value_2 = select_text.parent().find('select option[value="' + $(this).val() + '"]');
});
//THIS IS WHERE THE IMAGE CHANGES
if(changed_value_2.contains("Standard Crossline Grips (free)")){
$('#grip_image').attr('src','/v/vspfiles/images/grip_image.jpg');
}
This gives me the error:
Uncaught TypeError: Object #<Object> has no method 'contains'
Which I guess means it's not recognizing any 'option' and changed_value_2 isn't actually returning anything?
I hope I've explained this well enough. Let me know if you have any questions. Thanks so much for your help.
This may be what you want:
if(changed_value.indexOf("Standard Crossline Grips") >= 0){
$('#grip_image').attr('src','/v/vspfiles/images/grip_image.jpg');
}
or
if(changed_value.indexOf("(free)") >= 0){
$('#grip_image').attr('src','/v/vspfiles/images/grip_image.jpg');
}
Source
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);
});
I have dynamically created elements on the page, a picture and three buttons which are created upon clicking the main button.
All of this works, but now I am trying to change the display on the dynamically created div with the pics to "none".
More than one issue arises here for me, first I cannot find out how to make the div "images" the target, or select it.
I am trying to get one function to do this for all the elements, they are all structured equally just the pictures are different.
function hidePic(arrayPos){
var elem = document.getElementsByClassName("closingButton") + "[" + arrayPos + "]",
finalTarget = elem.getElementsByClassName("images")[0];
finalTarget.style.display = "none";
}
document.getElementsByClassName("closingButton")[0].addEventListener("click", function(){
hidePic(0);
});
This is the relevant code, lines 4 to 10. If this is commented out, the rest of the code works, but as it is I get entirely unrelated errors in dev Tools.
Click this link to see Codepen.
So the question is, how can I best implement the above code?
So just working on the code above you can do this in order to make it work for all instances. First let me point out that this:
var elem = document.getElementsByClassName("closingButton") + "[" + arrayPos + "]";
will never work. That line is building a string. What you really want to make that line work is:
var elem = document.getElementsByClassName("closingButton")[arrayPos];
But even that I find unnecessary. Take a look at this code.
function hidePic (elem) {
var finalTarget = elem.getElementsByClassName("images")[0];
finalTarget.style.display = "none";
}
var closingButtons = document.getElementsByClassName("closingButton");
var index = 0, length = closingButtons.length;
for ( ; index < length; index++) {
closingButtons[index].addEventListener("click",
function () {
hidePic(this);
}
);
}
This first finds all elements with the class closingButton. Then for each one we attach a click event listener. Instead of attempting to pass some index to this hidePic function we already have our function context which is what you seem to be trying to find in the function so lets just pass that and use it to find the image inside.
Let me know if you have any questions. I took a look at your codepen as well. I am not sure you should be forcing all that interactive HTML into a button element honestly, which itself is considered an interactive element. Not sure that meets the HTML spec. Perhaps add that HTML below the button. I bet when you click on things inside of that button it will register as clicks on the button as well unless you remove the event upon inserting your elements but then it seems like its getting too complicated for the simple stuff you are trying to do here.
The codepen complains because there is no element with the "closingButton" class, so it's trying to call addEventListener on nothing, but I'm doubting that's the actual error you're seeing.
It's also worth nothing that I think this:
var elem = document.getElementsByClassName("closingButton") + "[" + arrayPos + "]",
is excessive.
var elem = document.getElementsByClassName("closingButton")[arrayPos];
should be sufficient. Also not the syntax error at the end of the same line: it should be ; not ,. If this is the error in your code it could explain why you were getting "unrelated errors" syntax errors can cause misleading problems that are supposedly in other areas of the code!
Lastly, I'd highly recommend using JQuery to do your selection magic - it's exactly what it was designed for. If you're averse to using JS libraries, fair enough, but it would make your code a lot simpler and you can have reasonable confidence that it will perform the tasks about as optimally as is possible.
I'm building an HTML page that receives data from another page with the below code
$arrayPosition = $_POST['arrayPosition'];
echo '<span id = "arrayPosition">'.$arrayPosition.'</span>';
I'm then trying to use javascript to get the value of the element and pass it to a function with the below code
var initialPosition = document.getElementById('arrayPosition').value;
function displayWork(position){
$("#displayArtwork").detach()
.append(holdImages[position])
.hide()
.fadeIn("fast");
}
When I alert the value of initial position to the screen it informs me that null is its value, however, when I inspect the element it looks like this
<span id="arrayPosition">4</span>
Am I making some really stupid error, or misunderstanding the way to access this posted data?
Thanks for your help!
Since arrayPosition is a span, it has no value. You can get its innerHTML:
var initialPosition = document.getElementById('arrayPosition').innerHTML;
Or using jQuery:
var initialPosition = $('#arrayPosition').text();
A span-element has no value. Only form-elements can contain the value-attribute. To get the text inside your span you can use the innerHTML-porperty:
var initialPosition = document.getElementById('arrayPosition').innerHTML;
Demo
As you are already using jQuery you can also use it's text()-function:
var initialPosition = $('#arrayPosition').text();
here you can also use:
$(document.getElementById('arrayPosition')).text();
Harder to maintain and more difficult to read but faster than the jQuery-Selector. (see here)
Demo 2
Reference
.innerHTML
.text()
Good morning and happy new year everyone!
I've run into a snag on something and need to figure out a solution or an alternative, and I don't know how to approach this. I actually hope it's something easy; meaning one of you all have dealt with this already.
The problem is that I'm doing rollovers that contain information. They're divs that get moved to the absolute location. Now I've tried this with jquery 1.6 - 1.9.1. Of course this has to work in multiple browsers.
What needs to happen is on rollover show a div, and when you rollout of that div, make it hide.
...
// .columnItem is class level and works
$(".columnItem").mouseleave(function() {
$(this).css("display", "none");
});
...
$(".column").mouseenter(function() {
var currentItem = $(this)[0]; // this is where the problem is
// hide all .columnItems
$(".columnItem").css("display", "none");
// i get this error: Object #<HTMLDivElement> has no method 'offset' (viewing in chrome console)
var offsetTop = currentItem.offset().top;
var columnInfoPanel = $("#column" + currentItem.innerText);
});
So the immediate thought of some would be don't use $(this)[0]. Instead, I should use $(this), and you are correct! Where the other problem comes into play is by removing the array index, currentItem.innerText is now undefined.
The only thing I can think of is I'll have to mix both, but it seems like there should be a way to use the selector and get both options.
What have you all done?
Thanks,
Kelly
Replace:
var currentItem = $(this)[0];
With:
var currentItem = $(this).eq(0);
This creates a new jQuery object containing only the first element, so offset will work.
Then you can use either currentItem[0].innerText or currentItem.text(), whichever you prefer.
Skip the [0] at the beginning as you are saying.
But then change the last line to:
var columnInfoPanel = $("#column" + currentItem[0].innerText);
De-referencing the jQuery selector gives you the DOM-object.
If you want to stick to pure jQuery, the .text() / .html() methods will give you the same functionality.
This should be a really simple problem, but I can't quite figure out what I am doing wrong. I am trying to access the CSS property 'border-bottom' like this:
var temp = $('#divName').css('border-bottom');
Unfortunately, after this, temp contains the string ""
Does anyone know why this is not working or what I should do differently to make it function? Thanks.
The styles have to be more specific. Since border-bottom is a short-property for other properties (similar to background, to name a common one), the property has to be explicitly given.
var elem = $('#divName');
var border_width = elem.css('border-bottom-width');
var border_color = elem.css('border-bottom-color');
var border_style = elem.css('border-bottom-style');
var border_bottom = border_width + " " + border_color + " " + border_style;
Fiddle: http://jsfiddle.net/6wRj4/
See also: MDN: border-bottom short-hand.
Check to ensure that $('#divName') does select a single element. You can use array syntax on a jquery object to get back the underlying DOM object. You should also check (for example, using Firebug) to make sure that the DOM element you're looking at does have the style that you're looking for.
If both of those things are working correctly, you might try using the more granular border properties... border-bottom-style, border-bottom-width, etc.
Try with document.getElementById("divName").style.borderBottom;.