We Keep Coding

jQuery - change style of uncreated div elements

I was trying to searchengine for this, but I'm not sure how to call it exactly.
I can change the style of my div elements successfuly, for example:
$(document).ready($('div.element1').css("float", "left"));
This will successfully change all the elements of class element1 that exist. However, the new (after above is executed) elements will still spawn with old option of float: right;. What is my best/simplest option for permanently changing the style of this div? I can inject it manually after the element is created but that feels wrong to be honest.

It is better if you don't add inline style using .css() method, but instead just add/remove classes having your style, so create a class for all those elements' style.
If the newly created elements have the class you define, then they will have the style too.
Optionally, you can do this:
$(document).on('change or_other_event','your_selectors', function(){
// your code
});
If the new elements have classes element1, element2 ..., you would need something like this:
$(document).on('change','div[class*="element"]', function(){
// your code
});

Just create a new class on your css and then add that class to your new element
.newElement{
color:red//example style
}
$("<div>",{class:'newElement'})

Your code:
$(document).ready($('div.element1').css("float", "left"));
is equivalent to:
var element = $('div.element1').css("float", "left");
$(document).ready(element);
This means any un-drawn elements will not be affected. Instead use:
$(document).ready(function() {
$('div.element1').css("float", "left");
});
The above code ensures changes are made once the page has loaded.

Swapping CSS with a Click addEventListener in JavaScript

I am having trouble getting a click event to work on a page. I have a Div with an ID of 'icon', and the class of 'lock', and I want to be able to click on this Div's background image to change the class from 'lock' to 'locked'.
Before any confusion happens, I have both classes in my external CSS file, and they add a background image to the Div. Also, I don't want to use JQuery, but addEventListener with a function. so far, this is what my JS looks like:
var elLock = document.getElementById('icon');
function changeLock(){
var imgSwitch = elLock.getAttribute('class');
if(imgSwitch !== 'unlock'){
elLock.className = 'unlock';
}else{
elLock.className('lock');
}
}
elLock.addEventListener('click', changeLock, false);
The desired result is what is in this youtube video: https://www.youtube.com/watch?v=oI2sRCN7CiM
Any help would be greatly appreciated. I would love to learn from mistakes i've made.

I would use the Element.classList property rather than what you're doing here ...
Then you could simply do:
elLock.addEventListener('click', function() {
elLock.classList.toggle('lock') },
false);
and leave unlock as a default class on the element. Every time you click on the element, it will toggle the lock class on-and-off, and you can use the cascading properties of CSS to override the background properties that are on your default unlock class.

Change an element's CSS with Javascript may provide some help, although it does reference to jQuery. Element.className could be what you need, or element.classList.
I'd check if the current class is 'unlock'. If one class is considered a default, the other class can toggle. Using CSS's cascading properties will allow the toggling class to override the default when it is present.
Alternatively you could remove the currently applied class and apply the other.
if (elLock.classList.contains('unlock')) {
elLock.classList.remove('unlock');
elLock.classList.add('lock');
}
else {
elLock.classList.remove('lock');
elLock.classList.add('unlock');
}

get computed or default style of button and set on a new element

I am working on a project where i have define Custom html elements and give them a style.
I am trying to create a button with default style and take computed style of button and set it to another custom element, with button active and hover effects.
but its not work for me.. is any buddy have solution or idea ?
here my code :
var A_btnfake = document.createElement('button');
cS = document.defaultView.getComputedStyle(A_btnfake, null);
A_btn = document.createElement('custbtn');
A_btn.style=cS;
some_elm.appendChild(A_btn);
//i don't want to define each style one by one,like : A_btn.style.background = cS.backGround
Is there any way to define all style at once .

A_btn.style=cS;
The style property is read-only - you cannot assign a completely new CSSStyleDeclaration object to an element, only get its (probably element-tied) one.
If you want to copy a style to another, you will have to do it property-by-property:
for (var prop in cS)
A_btn.style[prop] = cS[prop];

You need to do this via CSS, especially if you want to inherit the :active and :hover states. And it’s really easy, just add the new element to the selector list, f.ex:
button,
custbtn { color: yellow; }
Note that in some older versions of IE, you need to virtually add new custom elements in order to be able to target them via CSS (same goes for HTML5 elements).

Creating a "selected item" javascript code for navigation menu?

I have a navigation menu with about 10 items, and I put together this code to update the links for which is selected and which is not. It manually updates classes. The problem is, as you can probably tell, its inefficient and its a pain to update. Is there a better way of doing it?
$('#Button1').click(function(){
$('#Button1').addClass("selectedItem");
$('#Button2').removeClass("selectedItem");
$('#Button3').removeClass("selectedItem");
$('#Button4').removeClass("selectedItem");
$('#Button5').removeClass("selectedItem");
$('#Button6').removeClass("selectedItem");
$('#Button7').removeClass("selectedItem");
$('#Button8').removeClass("selectedItem");
$('#Button9').removeClass("selectedItem");
$('#Button10').removeClass("selectedItem");
});

You could try something like this -
$("[id^='Button']").removeClass("selectedItem");
$('#Button1').addClass("selectedItem");
This will first remove all the selectedItem classes from any element which has an id attribute starting with "button". The second command then adds the class to Button1
You could also simply bind all the elements with the same handler like this -
var $buttons = $("[id^='Button']");
$buttons.on('click', function ()
{
$buttons.removeClass("selectedItem");
$(this).addClass("selectedItem");
});
For each element, when clicked, the class will be removed - the element that was clicked with then have the class added.
Checkout the Attribute Starts With Selector [name^="value"] selector.

I would suggest using classes because this is exactly what they are for - to denote groups of elements. While you can easily select your buttons using the method proposed by Lix (and you should use this method if you can't modify HTML), using class is a more unobtrusive:
var $buttons = $('.button').on('click', function() {
$buttons.removeClass('selectedItem');
$(this).addClass('selectedItem');
});
Meta example: http://jsfiddle.net/88JR2/

You could have a class .button and apply it to all your buttons then
$('#Button1').click(function(){
$('.button').removeClass("selectedItem");
$('#Button1').addClass("selectedItem");
});

How to reuse a CSS class, of a webpage, in a created div?

I want to reuse the certain class of CSS style of a webpage to the new Div element that I have added. I am using Greasemonkey to redesign the page.
How can I add bar1 style to myDiv?
Original div:
<div id="bar1" class="bar1">
New Div:
var myDiv = document.createElement('div');

myDiv.className = 'bar1';
or
myDiv.className = document.getElementById ('bar1').className;

Sounds like your end goal is really to make something like a bookmarklet. If you are just looking to add a class you can always just set the "className" on a object since the word 'class' is protected.
http://jsfiddle.net/scispear/tCzZM/
I also threw in something style sheet dynamically (but only for more modern browsers, older browsers require a bunch more work).

Due to CSS inheritance, copying the class name is not enough, unless the new element is a sibling of the other. Even then, CSS3 selectors like nth-child may mess things up.
You should instead iterate over all relevant style properties and copy their computed values like so:
var stylesToCopy = ['color', 'background-color', ...];
var oldStyle = getComputedStyle(bar1);
for (var i = 0; i < stylesToCopy.length; i++) {
myDiv.style[stylesToCopy[i]] = oldStyle[stylesToCopy[i]];
}