So, I have a div, named $slideshowContainer in jquery. I want to change it's left margin on resize to be a half of its width. I tried using
$slideshowContainer.css('margin-left',' + (' + $slideshowContainer.width() / 2) + 'px)';
and other similar variations, but it seems to not work (other resizes in the same function work well, so I guess there's something wrong in code above. I guess these pluses and apostrophes have something to do with it, I never really understood when to insert them in Javascript (I usually felt when I have to insert them, but when I didn't, I had no idea what's wrong)
Also if someone had a guide explaining where to insert pluses and apostrophes in situations like this, it would be really helpful (I tried to search for one but never found it)
PS: The code above of course was in the resize function, it didn't work. Just saying in case it wasn't clear
Thanks in advance for help
Remove the wrapping (...) around your pixel value. There is also syntax error with your code. All you need is this:
$slideshowContainer.css('margin-left', ($slideshowContainer.width() / 2) + 'px');
If you are keen on using ES6 template literal syntax, it makes things a lot more readable:
$slideshowContainer.css('margin-left', `${$slideshowContainer.width() / 2}px`;
Try this:
$slideshowContainer.css('margin-left', + ($slideshowContainer.width() / 2) + 'px;');
Related
I'm new to coding, and as a learning experience I've decided to make a little project.
I'm trying to modify an element's CSS style using JS, but i'm struggling with putting a JS variable as part of one of the arguments:
document.getElementById("squareContainer").setAttribute('"style","width:'+gridWidth+'*30 px"');
squareContainer is a div, and gridWidth is a JS variable with a value of a natural number larger than 0.
The goal is to set squareContainer's width attribute to be gridWidth*30 pixels wide, but console shows this error:
Uncaught TypeError: Failed to execute 'setAttribute' on 'Element': 2 arguments required, but only 1 present.
at life.html:33
I know it's because of the way I put single- and double-quotes in there, but I have no idea how to actually fix it. I've tried many combinations, but they don't work.
You seem to be passing just a single value to the setAttribute function. To fix this issue, you will have to get rid of the outer single quotes.
document.getElementById("squareContainer").setAttribute("style", "width:" + gridWidth * 30 + "px");
BONUS TIP:
As a better and clean alternative to string concatenation, you may use template strings for string interpolation, i.e., embedding a JS variable inside a string. Template strings use a backtick character (`) instead of usual quotation marks (' or "). You can rewrite the above line of code using template string as such:
document.getElementById("squareContainer").setAttribute("style", `width: ${gridWidth * 30}px`);
You are only passing only one value. Please try the below
document.getElementById("squareContainer").setAttribute("style","width:" + gridWidth * 30 + "px");
if you would like to use ES6
```js
document.getElementById("squareContainer").setAttribute("style",`width: ${gridWidth * 30}px`);
For more information
https://www.w3schools.com/jsref/met_element_setattribute.asp
https://www.w3schools.com/jsref/prop_html_style.asp
I am new to this so this could potentially be more simple than I think, but I am puzzled by this issue.
I can use number variables in .css() no issue, but a string doesn't appear to work. When testing, it simply won't do anything. Is there another way to do this?
var align = "center";
$this.css({'background-position': align + ' ' + -bgY + 'px'})
Simplified, but this is what I am doing. align is the variable in question, where it would actually act as a parameter you can set elsewhere rather than just typing center in there or so. I have checked and the align variable itself is the correct value when trying.
You can try formatting string:
var align = "center";
$this.css({'background-position': `${align}`});
Basically, everything you write between curly brackets in string with `` is js code.
I have a js function named "GetListColumnValue". This function causes some problems with IE6. Is there any way to avoid the problem? (I thnk the problem is occured because of the concat) Here is the code sample. The last line is my solution which I am not sure that it works well. Any suggestions? Thanks.
function GetListColumnValue(listName, columnName) {
return document.getElementById(listName + "_" + columnName).value;
}
var DISCOUNT_QUANTITY = GetListColumnValue("lstRecords", "DISCOUNT_QUANTITY");
var DISCOUNT_QUANTITY = document.getElementById("lstRecords_DISCOUNT_QUANTITY");
IE6 has many many problems, but simple JS string concat isn't one of them. I don't think that's your problem.
You didn't specify what exactly the problem is, but looking at the two code samples you provided, they will do different things:
The first one (ie the function) returns the object.value, whereas the second one (ie setting it directly), you've just returned the object.
So the two code blocks set DISCOUNT_QUANTITY to different things. If you remove the .value from the function, it should work exactly the same as the other code block.
Hope that helps.
The page having problems is...
http://schnell.dreamhosters.com/index.php?page=gallery#
I use Firebug to debug my jQuery and other code tidbits and it's been proving very useful for Javascript/jQuery debugging. However, at the same time, it's been one of the most frustrating debugging experiences I've ever gone through. I'm not sure why but sometimes it seems like I can copy someone else's methodology from a tutorial, character for character, and yet still come up with errors.
In any case, the problem here is that Firebug claims there is a bug on line 20 of the source.
missing : after property id
[Break on this error] $('#table').animate({"left: " + attr + "px"}, 2000);\n
This bug seems like a huge load to me because the colon is right there! And this is why debugging jQuery/Javascript is such a pain sometimes. The error messages are rather convoluted and sometimes don't even make a lick of sense to me. Or maybe that's just Firebug.
Either way, the goal I'm going for here is that I'm trying to dynamically change the animate function such that the more you click the left arrow, the further left the grid of images is shifted (due to the nature of the CSS 'left' property). I have Javascript variables and a hidden input tag to help hold essential values, but the major hurdle is getting the animate function to recognize these variables. Near as I can tell it will only accept string literals for arguments on how to animate and the documentation doesn't help me because it doesn't discuss the use of variables with animate, as if it's impossible.
Well, let's just say I don't like impossible, he likes to get in my way a lot.
The object literal passed to the animate function is not well formed, it should be:
$('#table').animate({left: attr + "px"}, 2000);
Edit: Looking closely to your code, you are also trying to get a value from an input with id = "count", and you have a missing # character to have an ID selector:
var count = +$('#count').val(); // get #count value as Number
You are also incrementing this count variable, but you should first convert it to Number, because the value attribute of input elements are string. (I did it using the unary plus operator on the right-hand side of the assignment).
You have to convert it to a number, because if you add two variables and one of them is a string, concatenation will take place:
"1" + 1 == "11"
Try:
$('#table').animate({left: attr}, 2000);
The "px" units of measurement here aren't necessary. That aside, the above is the correct creation of an anonymous object. You were just putting a string inside curly braces.
Can anybody tell me why this line isn't working?
window.open('entertainers/drilldown.php?state=' + varlocation + '?p=','performers_frame')
I know it's simple, and I know iframes suck but i am not familiar with javascript variables.
Thanks in advance!
Ryan
should this drilldown.php?state=' + varlocation + '?p=','performers_frame')
be this
drilldown.php?state=' + varlocation + '&p=','performers_frame')
replacing the second ? with &
There's nothing jQuery about that variable. If that's a jQuery wrapped set you'd need to show us the rest of the code or tell us what it represents so you can get the attribute you're looking for. You're not providing enough for us to help you.
EDIT:
Ryan, if the variable is defined as $.varlocation then you have to append it as that. Try this:
window.open('entertainers/drilldown.php?state=' + $.varlocation + '&p=','performers_frame')
Just because it is declared with a $ doesn't mean it is a jQuery wrapped set. In this case, it isn't.