We Keep Coding

Add another element inside created element

$(document.createElement('div'))
.attr({
'class':'sniper-alert'
})
.html(words)
.css({
'position':'fixed',
'width':'30%',
'height':'30%',
'box-shadow':'0 1px 3px #888',
'top':'30%',
'left':'50%',
'transform':'translate(-50%, -50%)'
})
.fadeIn()
.prependTo('body');
hi, I have got a problem here. I just want to ask how to create another element inside my div. I want to add button on it. I'm making my own alert-type-box. a big thanks for those who want to help

There are two main ways: element.appendChild(node) and element.innerHTML = "html-as-string". Both of these have jQuery equivalents, but the plain javascript seems just as easy/supported to me.
For a button, your script might be something like
var elem = $("div-id"); // the code in the question has no id, but you'll need some way to select the div
var button = document.createElement("input");
button.type = "button";
button.innerHTML = "Click Me!";
elem.appendChild(button);
This is untested and may have typos. Hope it helps.

Before you add the new <div> to the document you can append another element; in this example it will be put right after the text contents:
$('<div>', {
class: 'sniper-alert',
html: 'words',
css: {
'position':'fixed',
'width':'30%',
'height':'30%',
'box-shadow':'0 1px 3px #888',
'top':'30%',
'left':'50%',
'transform':'translate(-50%, -50%)'
}
})
.append('<button>button</button>')
.fadeIn()
.prependTo('body');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You can append anything you like, including another jQuery object.

Try this jquery function "append()" this will append at the end of your div selector Like that way :
$("#div_id").append("<input type='button' id='clickbtn' name='Click' value='Click
> Button'>");
if you would like to perform click event on that button then you need to bind the click event like this :
$("#clickbtn").on('click',function(){
// Your Code
});

Alternate colors on click with jQuery

I'm sure there is a simple solution to this, and I'm sure this is a duplicate question, though I have been unable to solve my solution particularly because I don't really know how to phrase it in order to search for other questions/solutions, so I'm coming here hoping for some help.
Basically, I have spans with classes that assigns a background-color property, and inside those spans are words. I have three of these spans, and each time a user clicks on a span I want the class to change (thus changing the background color and inner text).
HTML:
<span class="alternate">
<span class="blue showing">Lorem</span>
<span class="green">Ipsum</span>
<span class="red">Dolor</span>
</span>
CSS:
.alternate span { display : none }
.alternate .showing { display : inline }
.blue { background : blue }
.green { background : green }
.red { background : red }
jQuery:
$(".alternate span").each(function() {
$(this).on("click", function() {
$(this).removeClass("showing");
$(this).next().addClass("showing");
});
});
This solution works great using $.next until I get to the third click, whereafter .showing is removed, and is not added since there are no more $.next options. How do I, after getting to the last-child, add .showing to the first-child and then start over? I have tried various options including if($(".alternate span:last-child").hasClass("showing")) { etc. etc. }, and I attempted to use an array and for loop though I failed to make it work.
Newb question, I know, but I can't seem to solve this so as a last resort I'm coming here.

try this:
$(".alternate span").each(function() {
$(this).on("click", function() {
$(this).removeClass("showing");
if($(this).is(":last-child"))
$(".alternate span:first-child").addClass("showing");
else
$(this).next().addClass("showing");
});
});
http://jsfiddle.net/NPx2x/

Check this, and also it performs faster. .next() returns undefined if no element found.
$(".alternate span").on("click", function() {
$(this).removeClass("showing");
var next = $(this).next();
next.length ? next.addClass("showing") : $("span.blue").addClass("showing");
});

jQuery changed ID won't run function

I'm trying to make a blue div that turns red when clicking on it and the red div turns back to blue ( so I can add more events on the click after clicking, so .css isn't really an option)
When clicking on the div when it's blue, it turns red. But when I click the red div it doesn't respond, even when I add a simple alert()
Does anyone know what I'm doing wrong?
This is my current code and a JSFiddle
code:
$("#Blue").click(function(){
$("#Blue").attr("id","Red");
});
$("#Red").click(function(){
$("Red").attr("id","Blue");
});
If anyone could tell me what Exactly I'm doing wrong that would be great, thank you in advance

You need to use event delegation -- your click handlers are bound to the matching elements at the time the code is first run, and only then. Since there's no #Red element at that point in time, that second click handler isn't bound to anything.
$(document).on('click',"#Blue", function(){
$("#Blue").attr("id","Red");
});
$(document).on('click',"#Red", function(){
$("#Red").attr("id","Blue");
});
http://jsfiddle.net/mblase75/HDFyn/
http://api.jquery.com/on
That said, the "proper" way to do this would be to add and remove a class, not change the ID:
$('#btn').on('click', function(){
$(this).toggleClass("red blue");
});
http://jsfiddle.net/mblase75/mKMW6/

.click() binds only to existing elements at the time you call it; it will not bind to a later-created element or an element to which you assign the id later.
The fix is to use event delegation. See here and here for more information.
Also, use classes, instead -- much more flexible.

HTML
<div class="Test blue">Test</div>
jQuery
$(".blue, .red").click(function(){
$(this).toggleClass('red blue')
});
CSS
.Test{
width: 50px;
height: 50px;
}
.blue{
background-color: blue;
}
.red{
background-color: red;
}
Fiddle: http://jsfiddle.net/8FmSt/3/

You could use the class and update the ID like below instead of having 2 function to do that action,
$('.Test').on('click', function () {
this.id = (this.id == 'Blue')?'Red':'Blue';
});
DEMO: http://jsfiddle.net/8FmSt/2/
If it is all about changing color, then use a css to change to color like below,
$('.Test').on('click', function () {
$(this).toggleClass('Red Blue');
});
http://jsfiddle.net/8FmSt/5/

Try:
$(".Test").click(function(){
var id = $(this).attr("id");
if(id == "Red"){
$(this).attr("id","Blue");
}
else{
$(this).attr("id","Red");
}
});
Updated fiddle here.

Let's uncomplicate
HTML
<div class="Test">Test</div>
JQUERY
$(".Test").on('click', function () {
$(this).toggleClass("red");
});
CSS
.Test {
width: 50px;
height: 50px;
background: blue;
}
.red {
background: red;
}

Trying to make menu items pink when viewing their div

I have a list of links that make divs slide in above them, which I made using a script I found here: http://flesler.blogspot.ca/2007/10/jqueryscrollto.html.
I want the link to change color when they are clicked, so that the user can clearly see where they are. I would like to do something like:
<li>Promo Package</li>
Except that changes the color back to its original color when another link is clicked. Also of course external would be better.

I'd use a click listener on the list:
$('ul').on('click', 'a', function() {
$('ul a').css('color', '#000000'); // set all links to black;
$(this).css('color', '#00FF00'); // set curent link to green;
return false;
});

Why don't you use a CSS style instead ?
if you have jQuery :
<li>Promo Package</li>
jQuery(document).ready(function(){
jQuery('.link_black').click(function(){
jQuery(".link_green").removeClass('link_green');
jQuery(this).addClass('link_green');
});
});
<style>
.link_black{
color : black;
}
a.link_black{
color : green;
}
</style>
if you do not use jQuery :
<li>Promo Package</li>
<script>
function clickedGreenLink(obj){
if (window.currentGreenLink!=undefined){
window.currentGreenLink.class=window.currentGreenLink.class.replace('link_green','');
}
window.currentGreenLink=obj;
window.currentGreenLink.class+='link_green';
}
</script>
That should work

How can I change a CSS values on a DIV by clicking on an A tag?

When any <a> tag is clicked with the id="cnt" I want to set the border color of div#fancybox-content to #000. My attempt:
$(document).ready(function(){
$('a#cnt').click(function(){
$("#fancybox-content").css("border-color","#000");
});
});
This code does not work.

are you sure you meant "id of 'cnt'"? you said "When any a tag is clicked"... is there more than one?
Make sure you set the other border parameters as well
If there is more than one, use a class:
$().ready( function() {
$("a.cnt").click(function() {
$("#fancybox-content").css({"border-width":"1px", "border-style":"solid", "border-color":"#000"});
});
})
see - http://jsbin.com/avuxe3/3
If there really is one:
$().ready( function() {
$("#cnt").click(function() {
$("#fancybox-content").css({"border-width":"1px", "border-style":"solid", "border-color":"#000"});
});
})
enter code here

The trick is in which selector you use. If you have a single HTML element that has an ID, use the # selector. If there is more than one element, you should use a class rather than ID and use the . selector. Below are examples:
If you have a single A tag, with an id="cnt" then you would use:
$('a#cnt').click(function() {
$('#fancybox-content').css({"border":"solid 1px #000"});
});
If you have more than one anchor with the cnt notation, set it as class="cnt" and use:
$('a.cnt').click(function() {
$('#fancybox-content').css({"border":"solid 1px #000"});
});
Better yet, keep your styles in a stylesheet like this
.borderOn { border: solid 1px #000; }
And then toggle this class on (and off if you like) with your links' click events:
$('a.cnt').click(function() {
$('#fancybox-content').addClass('borderOn');
});