Develop Reference

How do i use 'cssText' in javascript?

I got an error message
"Uncaught TypeError: Cannot set property 'cssText' of undefined"
My Code:
var div = $('.postImg2')
var img = $('.postInner2');
var divAspect = 20 / 50;
var imgAspect = img.height / img.width;
if (postData.files != null) { // if attached images or videos exist
for (var i = 0; i < postData.files.length; i++) {
if(postData.files.length == 1){
postView = postView + "<div class='postImg1'><img class='postInner1' src='img_timeline/" + postData.files[i].url + "'></div>"
} else if(postData.files.length == 4){
if(imgAspect <= divAspect){
var imgWidthActual = div.offsetHeight / imgAspect;
var imgWidthToBe = div.offsetHeight / divAspect;
var marginLeft = -Math.round((imgWidthActual-imgWidthToBe)/2);
postView = postView + "<div class='postImg2'><img class='postInner2' src='img_timeline/" + postData.files[i].url + "'></div>"
img.style.cssText = 'margin-left:'+marginLeft+'px;'
} else {
img.style.cssText = 'margin-left:0;'
}
} else if (postData.files.length > 4){
postView = postView + "<div class='postImg3'><img class='postInner3' src='img_timeline/" + postData.files[i].url + "'></div>"
}
}
}
How do I use cssText in javascript?

The problem you have is you have a jQuery object and you act like it is DOM.
img.get(0).style.cssText = 'margin-left:0;'
//or
img[0].style.cssText = 'margin-left:0;'
but why use cssText? Seems better to do
img[0].style.marginLeft = "0px";
or since you are using jQuery
img.css("marginLeft", "0px")
And after that is complete it still will not work. The reason is the fact you are selecting the element before it is added to the page. The $('.postInner2'); is not going to pick up the image you added to the page in the loop since you select it before it is added. In reality you can not update the widths and select the elements until you append postView to the page.

Replace this
img.style.cssText = 'margin-left:'+marginLeft+'px;'
With this
img.css('margin-left',marginLeft+'px')

Here is a really basic example of how cssText works. I suspect your img variable is not set or is referencing a non-existant element.
Whatever the case, img.style is undefined.
Update To show how you could do this in jQuery (but why are you not using .css or .attr rather than mixing and matching pure JS with jQuery) ?
var img = $('.postInner2');
// Get the first element from the jQuery array and apply a style with cssText.
img[0].style.cssText = "width:100px;";
/**
* A better solution would be ".css" because it will apply to
* ALL elements with class .postInner2 without having to loop
*/
// $(".postInner2").css({width:"100px", marginLeft: "10px"});
/**
* Or if you have to override everything in the class:
*/
// $(".postInner2").attr("css","width:100px;margin-left:10px");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="postInner2" src="//placehold.it/400x200" alt="Placeholder" />
Edit2: actually, based on your updated code it looks like there is no way it can work. You are trying to fetch and manipulate your image before it even exists in the DOM, for example: div.offsetHeight / divAspect where the actual div is actually only described on the next line, and not ever added into the HTML anywhere.
I think you are going to have to re-think the flow of logic in your code.

Unable to alter the css 'background-image' with Jquery

I am trying to cycle through an array of pictures to make a photo-viewer on my webpage. The cycling method is working fine, but the transferring the message unto the css is not. I am wondering if there is any syntax issues within my javascript code or a concept that I am missing out on. I know that the cycling works because the alert I have is working.
var changeIt = ""
var backgroundPic = new Array(4);
backgroundPic[0] = '("images/displayPic1.jpg")';
backgroundPic[1] = '("images/displayPic2.jpg")';
backgroundPic[2] = '("images/displayPic3.jpg")';
backgroundPic[3] = '("images/displayPic4.jpg")';
backgroundPic[4] = '("images/displayPic5.jpg")';
var picCounter = 0;
var numberOfPics = 5;
var picTimer;
function setPic(){
alert("hi I want this pic: " + backgroundPic[picCounter]);
$('slider').css('background-image', url + "backgroundPic[picCounter]");
picCounter += 1;
if(picCounter >= numberOfPics){
picCounter = 0;
}
}
$(document).ready(function(){
$('.slider').css('background-image', backgroundPic[picCounter]);
picTimer = setInterval(setPic, 2000);
});

The issue is due to the incorrect syntax you're using when concatenating the CSS property value. Try this:
var backgroundPic = [ 'images/displayPic1.jpg', 'images/displayPic2.jpg', 'images/displayPic3.jpg', 'images/displayPic4.jpg', 'images/displayPic5.jpg' ];
var picCounter = 0;
var picTimer;
function setPic() {
// note the . in the jquery object below to indicate a class selector
$('.slider').css('background-image', 'url("' + backgroundPic[picCounter % backgroundPic.length] + '")');
picCounter++;
}
$(document).ready(function() {
picTimer = setInterval(setPic, 2000);
setPic();
});

You have to set background image like this:
$('.slider').css('background-image', "url('" + backgroundPic[picCounter] + "')");

You inverted the positioning of the quotemarks on the second line of setPic.
Try: $('slider').css('background-image', 'url' + backgroundPic[picCounter]);

On your setPic function, this line
$('slider').css('background-image', url + "backgroundPic[picCounter]");
isn't missing a dot on $('.slider')?

You'll need to include double quotes (") before and after the imageUrl like this:
$('slider').css('background-image', 'url("' + backgroundPic[picCounter] + '")');
This way, if the image has spaces it will still be set as a property.

Can't figure out why my JS doesn't work

I've been messing around with JavaScript samples and ever since I edited this one I can't figure out why it wont work. Everything looks fine to me, but here is the code (JSFiddle)
https://jsfiddle.net/en2a8c1v/1/
function click(e) {
document.body.style.backgroundColor='" + e.target.id + "';
}
document.addEventListener('DOMContentLoaded', function () {
var divs = document.querySelectorAll('div');
for (var i = 0; i < divs.length; i++) {
divs[i].addEventListener('click', click);
}
});

First, make sure that in the JS settings you have no-wrap enabled (I used no-wrap head) in the load type dropdown.
Next, you need to understand that when you call e.target.id, this is already a string variable. You are literally making the background color "e.target.id". That isn't a color.
Simply change document.body.style.backgroundColor='" + e.target.id + "';
to document.body.style.backgroundColor= e.target.id;
I'm not going to touch on the fact that this is a terrible way to go about this as I am assuming you are just playing with event handling.

Maybe someone will find this usefull. Use CSS attribute: background-color:rgb(x,y,z);
You can do it on simple way, for example:
document.getElementById("elementID").style.backgroundColor = 'rgb('+ this.red + ', ' + this.green + ', ' + this.blue + ')';
These r,g,b values can be, for example:
this.red = 0;
this.green = 255;
this.blue = 130;

jQuery: Storing a Div name in a variable, then calling it in an action

So i've been trying to wrap my head around this, all i'm trying to do is store a div name in a variable for easy editing, then allow it to be called in standard actions such as show/hide.
Without the variables, my code works fine but with them it will not load the div, i've done a console log to make sure it knows what the div name is based off the stored variable and it returns correctly.
Here is my code:-
var buttonActive = 0;
var yourMenuDiv = '.menu-menu-1-container';
$(function() {
$(yourMenuDiv).before('<div class="responsiveButton"><div id="rBBar"></div><div id="rBBar"></div><div id="rBBar"></div></div>');
$(yourMenuDiv).before('<div class="responsiveMenu"><div id="responsiveTitle"></div></div>');
$(yourMenuDiv + 'ul').clone().appendTo('.responsiveMenu');
$('.home #logoImage').clone().appendTo('#responsiveTitle');
console.log(yourMenuDiv);
$(window).resize(function() {
if ($(window).width() < 600) {
$(yourMenuDiv).hide();
$('.responsiveMenu, .responsiveButton').show();
}else{
$('.responsiveMenu').removeClass('expandMenu');
$('.responsiveButton').removeClass('expandMenuButton');
$('.responsiveMenu, .responsiveButton').hide();
$(yourMenuDiv).show();
buttonActive = 0;
}
});
$(function() {
if ($(window).width() < 600) {
$(yourMenuDiv).hide();
$('.responsiveMenu, .responsiveButton').show();
}else{
$('.responsiveMenu, .responsiveButton').hide();
$(yourMenuDiv).show();
buttonActive = 0;
}
});
$('.responsiveButton').click(function() {
if (buttonActive == 0){
$('.responsiveMenu').addClass('expandMenu');
$('.responsiveButton').addClass('expandMenuButton');
buttonActive = 1;
}else{
$('.responsiveMenu').removeClass('expandMenu');
$('.responsiveButton').removeClass('expandMenuButton');
buttonActive = 0;
}
});
});
Thank you

You should try something like:
var yourMenuDiv = $('.menu-menu-1-container');
and then just call the methods with: yourMenuDiv.methodHere.

In your code:
$(yourMenuDiv + 'ul').clone().appendTo('.responsiveMenu');
Does the above line work correctly? - I mean should there be a space character in between. Something like below:
$(yourMenuDiv + ' ul').clone().appendTo('.responsiveMenu');
and as a matter of interest. Does it make any difference if you place your first two lines of code:
var buttonActive = 0;
var yourMenuDiv = '.menu-menu-1-container';
after $(function() { ?

Appending in the middle of a src attribute of Image in Jquery

I have a bit of code which I want to add just the letters "mb" at the beginning of the name of my image file using JQuery. This is quite green to me so I ask for your forgivness of my naivety in advabce. An example of what I am seeking to do is switching my image name from "images/folder/photo.jpg" to "images/folder/mb_photo.jpg". The images I plan to use already in classes so I have the mock up for selecting those classes already layed out. I am just stuck on how to insert in the middle of the image tag.
As requested, what I have so far is:
$(window).resize(function(){
if ($('#content').width() < 700 ){
$('#photos_member').;
$('#photos_group').;
}
});
Thank you guys in advance for your help.

This should do what you need...
function updateImageSrc(add) {
if (add === true) {
$("img.photos_member:not(.src-modified), img.photos_group:not(.src-modified)")
.attr("src", function() {
var split = this.src.split("/");
split[split.length - 1] = "mb_" + split[split.length - 1];
return split.join("/");
})
.addClass("src-modified");
}
else {
$("img.photos_member.src-modified, img.photos_group.src-modified")
.attr("src", function() {
var split = this.src.split("/");
split[split.length - 1] = split[split.length - 1].substr(3);
return split.join("/");
})
.removeClass("src-modified");
}
}
And to call it in a window resize handler, do this...
$(window).resize(function() {
if ($("#content").width() < 700) {
updateImageSrc(true);
}
else {
updateImageSrc(false);
}
});

use like
<img id="test" src="images/folder/photo.jpg"/>
<input type="button" id="btn" value="change src"/>
$("#btn").click(function(){
var newSrc=$("#test").attr("src").split("/");
newSrc[newSrc.length-1]="mb_"+newSrc[newSrc.length-1];
$("#test").attr("src",newSrc.join());
});
DEMO

Use the replace method.
var img = "images/folder/photo.jpg";
var newImg = img.replace(/\/(\w+.jpg)/, "/mb_$1");
newImg would contain the updated filename("images/folder/mb_photo.jpg")