Develop Reference

After adding elements to a div with javascript, an untouched existing link stops working?

I have some html like this
<div id='myArea'></div>
<div id='aDifferentUnrelatedArea'></div>
<a href='#' id='closeButton' class='myButton'>Close</a>
the button has a listener like this
$('#closeButton').click(function(event){
event.preventDefault();
var myNode = document.getElementById("myArea");
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
});
and I add elements to myArea like this
document.getElementById('myArea').innerHTML = 'a title';
var newElement = document.createElement('a');
newElement.setAttribute('href', "#");
newElement.appendChild(document.createTextNode('a string'));
document.getElementById('myArea').appendChild(newElement);
Before I add elements, the Close button looks fine. There's nothing to close, but my hover css is applied to it and my cursor becomes the clickable one. After I add elements to myArea like this, the button acts more like a picture and there is no click related to it (it doesn't act like an <a> tag anymore nor does it do the click event).

Sorry for the confusion but thanks for helping me find the problem. The actual problem was I had this floating footer button at the bottom of the page. It seemed to take up the whole line's functionalities (I mean anything on the same line as the button would behave like a picture). I just added extra space at the bottom of the body so nothing would be on the same line as the footer.

javascript click image display

What I'm trying to do is, when one of six divs is clicked, a separate div will have 3 specific divs appear in it. Each of the original six divs have three similar but different divs related to it.
http://jsfiddle.net/petiteco24601/hgo8eqdq/
$(document).ready(function () {
$(".talkbubble").mouseout(function(){
$(".sidebar").show();
});$
$(".talkbubble").click(function(){
$
How do I make it so that when you click a "talkbubble" div, a different "sidebar" div appears with all its contained elements, and when you mouseout, the first talkbubble div automatically activates?

Here is a demo of how to do this: http://jsfiddle.net/n1xb48z8/2/
The main part of this example is some javascript that looks like this:
$(document).ready(function(){
showSideBar(1);
$('.expander').click(function(){
var sidebarIndex = $(this).data('sidebar-index');
showSideBar(sidebarIndex);
});
$('#Container').mouseleave(function(){
showSideBar(1);
});
});
function showSideBar(index){
$('.sidebarContent').hide();
$('.sidebarContent[data-index="' + index + '"]').show();
}
.data('some-name') will get you the attribute data-some-name="" on the specific element, this is a html 5 attribute and if you do not want to use it you can instead give each of the elements their own class names such as:
<div class="sidebarContent subBarContent_1">
<!-- content -->
</div>
and use the '.subBarContent_1' as your jquery selector instead. You would then also have to have some sort of data attached to your clickable divs to identify which one you wanna show, you could use a hidden field to do that like:
<input type="hidden" class="subContentSelector" value="subBarContent_1" />
The javascript for that looks like this:
$(document).ready(function(){
showSideBar(1);
$('.expander').click(function(){
var sidebarSelector = $(this).find('.subContentSelector').val();
showSideBar(sidebarSelector );
});
$('#Container').mouseleave(function(){
showSideBar('subBarContent_1');
});
});
function showSideBar(selector){
$('.sidebarContent').hide();
$('.sidebarContent.' + selector).show();
}
Ps. the overflow:hidden css is because chrome was messing up the placement of the sidebar content otherwise... oh chrome, you silly goose

Want to print a particular section of a page using JavaScript

I'm basing my code off of this solution by Ben Nadel
Here is the code included in the page
<script type="text/javascript">
// When the document is ready, initialize the link so
// that when it is clicked, the printable area of the
// page will print.
$(function() {
// Hook up the print link.
$("a").attr("href", "javascript:void(0)").click(function() {
// Print the DIV.
$( ".printable" ).print();
// Cancel click event.
return(false);
});
});
</script>
Here is a codepen
The Buttons are not working in the pen but do work locally.
What i'm trying to do is have the user print the contents of each list item which as you can tell is a Q&A so essentially have the user be able to print each Q&A pair when they click the button.
I've only included two to provide the minimal example to help me figure out where my error is.
What's happening is that no matter which button I click it will always print the first "li" with the class of "printable" and i'm not sure how to distinguish each section so that the button understands to only print 'this' and not the first li that has that class which is what it's doing.
Obviously this is a problem since each Answer will have a "click to print" button and I don't want them to all print the same Q&A pair.
Does this make sense?
My instinct is to have some kind of loop in play or iterate through an array, but i'm very new to JavaScript so i'm looking for a moderately challenging solution.

Yes, it does make sens. You are selecting elements to print with $('.printable').print([1]); It means, print the first element that match my selection, that is .printable. The first element that has the class printable. What you should do is bind each button with the appropriate section and use IDs instead of classes to select elements. As IDs are unique !
function(){
$('.printBtn').attr('href', 'javascript:void( 0 )').click(function(){
//select the corresponding section, first parent li that have .printable class
var section = $(this).closest("li.printable");
// Print Div
$(section).print([1]);
// Cancel click event
return(false);
});

You can use simple java script to print specific div of a page
var prtContent = document.getElementById("your div id");
var WinPrint = window.open('','','letf=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();

gallery script only functioning on certain pages

I am using a gallery script with thumbnails on the following post on my site
http://www.lookbookcookbook.com/2012/03/apple-cinnamon-pancakes.html
It works fine, but when you go to the main page (third post down), it stops working. Is it because I have another post with the same script that is interfering?
Any help would be much appreciated, thanks!

Your script uses ids to target the picture to show. Ids should be uniques, only one element can have any given Id.
Your two galleries' img are sharing same Ids : #pic-0, #pic-1, etc. So on click, only the first one found is shown, the img in the first gallery.
It should not be too hard to solve, but a lot of your code must be CMS-generated, so I must know what you can change to help more.
(that's the piece of code handling your gallery:)
function myshowImages(id) {
/* $(".mainPic").hide();
$("#pic-"+id).show();*/
$('.mainPic').css({'display':'none'});
$("#pic-"+id).fadeIn('slow');
}
edit after comments :
So, honnestly your code is a bit of mess, there would be lots of change to achieve something clean.
However, for your immediate needs, you should use two showImage functions :
function myshowImages1(id) {
$('.mainPic1').css({'display':'none'});
$("#pic-"+id).fadeIn('slow');
}
function myshowImages2(id) {
$('.mainPic2').css({'display':'none'});
$("#pic-"+id).fadeIn('slow');
}
And edit your links :
for the first gallery.
for the second one.
Keep in mind that it's ugly and not scalable : if you have three gallery, it'll break.
I'm going to look at your code to see how you could do to have a unique function.
Edit2 :
So, a cleaner function for you to use :
1/ setup : chose a classname for each link/img pair. Per exemple :
<a href="" class="image_1">
<img alt="" height="80" src="(some long path)/lookbookcookbooksaya267b.jpg" title="" width="80">
</a>
the thumb link and the image to show :
<a href="(some long path)/lookbookcookbooksaya267.jpg">
<img alt="" class="image_1" height="470" src="(some long path)/lookbookcookbooksaya267.jpg"></a>
Then, I've seen you have JQuery, so this kind of function :
$(document).ready(function()
{
$(".gallery div div a").on("click",function()
{
var myClass = $(this).attr('class');
var $parentGallery = $(this).parents('.gallery');
$parentGallery.find("div > a > img").css("display","none").find("myClass").fadeIn();
return false;
});
});
First, it binds a click event on all your links which are two div depth in the .gallery element. That's your thumbs.
On click, it fetches the class of the clicked thumb link.
Then it searches for the parent .gallery of this link, hide alls images and show the good one.
I can't really guarantee it'll work out the box because your markup is very complex, but it should.

How can accomplish a dual div swap on rollover?

I am looking for advice on a way to accomplish this. Given the following:
[Div A (contains an image)]
[Div B (contains a horizontal list of 8 or so text links)]
[Div C (contains text)]
Upon rolling over any link in Div B, how can I have Div A and Div C swap their respective contents out to something different that corresponds to the content of that link?
For example, if one were to rollover a Div B link called "Dogs", then upon that rollover, Div A would replace its contents and display an image of a dog and Div C would replace its contents and display text about dogs.
After rolling over that link, the new Div A and Div C contents will remain in place until a new link is rolled over.
I hope this makes sense. Does anyone have advice on the best way to accomplish this?

Assuming the href points to one resource that contains the content for both, but you can't just inject the entire output of the link into one element, something like this could work:
$('#divB a').mouseover(function() {
//get images from link, inject into divA
$('#divA').html('<strong>Loading...</strong>')
.load($(this).attr('href') + ' img');
//get divs from link, inject into divC
$('#divC').html('<strong>Loading...</strong>')
.load($(this).attr('href') + ' div');
});

Hmm... this should be pretty simple with jQuery (compared to some of the other answers here):
If you're unfamiliar with jQuery, the $() is a shortcut for calling jQuery(), and using
$(document).ready(function() {
// put all your jQuery goodness in here.
});
is a way to make sure jQuery fires at the right time. Read more about that here.
So first, add a class (ie .dogs) to each <a> element in your #divB list. Next, give each of the corresponding images the same class, and contain each of your text blocks in #divC in divs with the same class as well. The HTML would look something like this:
<div id="divA">
<img src="dogs.jpg" class="dogs" />
<img src="flowers.jpg" class="flowers" />
<img src="cars.jpg" class="cars" />
</div>
<div id="divB">
<ul>
<li>Dogs</li>
<li>Flowers</li>
<li>Cars</li>
</ul
</div>
<div id="divC">
<div class="dogs"><p>Text about dogs.</p></div>
<div class="flowers"><p>Text about flowers.</p></div>
<div class="cars"><p>Text about cars.</p></div>
</div>
Then use the following jQuery, putting this up in the <head> section of your HTML doc:
$(document).ready(function() {
$('a.dogs').hover(function() {
$('#divA img').hide("fast");
$('#divA img.dogs').show("fast");
$('#divC div').hide("fast");
$('div.dogs').show("fast");
});
});
We say when the document is ready, when you hover over the <a> element with the .dogs class, perform a function. That function will hide all of the images in #divA and immediately show the image with the .dogs class. Then it will hide all of the divs in the #divC and immediately show the div with the .dogs class.
You can do the same thing twice more for .flowers and .cars, or however many you have.
Keep in mind, there are more efficient ways of doing this too, if you're interested in looking deeper into jQuery, but this will be a solid way to get started in helping you understand exactly what jQuery is doing. And it keeps the script OUT of the HTML body, too!

You can change a div's contents with something like this:
<script type="text/javascript">
function over() {
var a = document.getElementById('a');
var c = document.getElementById('c');
a.style.backgroundImage = "url(/path/to/image)";
c.innerHTML = "<b>Dogs rock</b>";
}
</script>
<div id="a"></div>
<div id="b" onmouseover="over();"></div>
<div id="c"></div>
Then all you need to do is add whatever other div's you want and write code to change them appropriately. Set the initial state of A and C using css, or just call the over() function on page load.