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.
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
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;');
Hi Guys I've been dealing with an estrange thing while trying to pass string parameters to a JavaScript function from code behind, this is what I have actually in code behind which is wrong:
thumbnail = "<a href = 'javascript:RemovePirctureDetail(" + field1 + ",'" + tempname + "');' class='label label-default' rel='tooltip'>Remove</a>";
So this is the bad result I'm getting in the browser:
Remove
Meas that for some reason when I try to pass the string parameter, the html comes out bad formatted. The result should looks like this:
Remove
I tried already send the quotation marks like this /' from code behind, it did not work neither. How can I achieve this?
Thanks.
string thumbnail = "Remove";`
You need to use \ to escape the quotes inside, not /..
With javascript attribute I wouldn't use single quote, because it could be messy
Try to change in this way:
thumbnail = "Remove";
PS: Actually, I would NEVER use single quotes with attributes, it will cause an HTML validation error, HTML is not well formed with single quotes for attributes (although with inspection tools you see double quotes.. because inspection tools have the need to work with a well formed HTML, so if you want to see the real HTML of your page, view the source code (generally the option is on right-click on the page)
My question is simple but I can't seem to find the solution. I'm changing my html through javascript. I have a header with an image that I want to change every 3 seconds or so. I made an array with the name of the images I want in my cycle.
For changing the image I made a variable with the name of the image. I then try to insert the value of the string into the follow statement:
imageParent.style.backgroundImage = "url('images/"nextImage".jpg')";
But as you see this is completely the wrong syntax. What is the correct syntax for this?
What you're trying to do is known as string concatenation. In JavaScript it is most easily done using the + operator:
"url('images/" + nextImage + ".jpg')"
See The + Operator Used on Strings at http://www.w3schools.com/js/js_operators.asp.
try maybe +nextImage+ instead of nextImage
Still muddling my way through Javascript, I'm trying to pass the contents of variable playnoyes to the long line of code below to decide whether or not to autoplay the flash movie, but doing it as I have below, the resultant line of code has the variable in quotes and therefore the code doesn't execute it as expected. My question is, how can I pass the variable so that the resulting line of code doesn't have the quotes around the variable value.
Many thanks, and sorry for the noobness of the question.
var playnoyes='true';
var testtext = "<script type='text\/javascript'>AC_FL_RunContent ('codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0','width','320','height','220','id','HTIFLVPlayer','src','HTIFLVPlayer','flashvars','&MM_ComponentVersion=1&skinName=HTI_Skin&streamName=nigel&autoPlay=\""+playnoyes+"\"&autoRewind=true','quality','high','scale','noscale','name','HTIFLVPlayer','salign','lt','pluginspage','http://www.macromedia.com/go/getflashplayer','wmode','transparent','movie','HTIFLVPlayer');<\/script>";
alert (testtext);
Thats because you are explicitly adding the quotes:
change
nigel&autoPlay=\""+playnoyes+"\"&autoRewind=true'
to
nigel&autoPlay=" + playnoyes + "&autoRewind=true'
Try this:
var playnoyes='true';
var testtext = "<script type='text\/javascript'>AC_FL_RunContent ('codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0','width','320','height','220','id','HTIFLVPlayer','src','HTIFLVPlayer','flashvars','&MM_ComponentVersion=1&skinName=HTI_Skin&streamName=nigel&autoPlay="+playnoyes+"&autoRewind=true','quality','high','scale','noscale','name','HTIFLVPlayer','salign','lt','pluginspage','http://www.macromedia.com/go/getflashplayer','wmode','transparent','movie','HTIFLVPlayer');<\/script>";
alert (testtext);
Remove the two '\"' on each side of the variable, no?