Develop Reference

AngularJS show image on mouseover

In this fiddle, I want to hover over "Your Truly" and have the image appear, while the text disappears. Does an app have to be initialized for this to work? I didn't think it did...
The angular HTML look like this (I didn't move my whole app in here, just trying to get this part to work)
<a ng-init="imgsrc='http://wallpaper-gallery.net/images/pig-images/pig-images-12.jpg'">
<span ng-hide="imgsrc.show"
ng-mouseover="imgsrc='http://wallpaper-gallery.net/images/pig-images/pig-images-12.jpg'"
ng-mouseout="imgsrc.hide">
Yours Truly
</span>
<img ng-src="{{imgsrc}}"/>
</a>,

It is possible to make something like this work without making a proper controller, though I'd discourage it. That said, I went ahead and got it working anyway:
<p class="text-justify last-body" ng-app>
This growing collection of studies, curated by
<a ng-init="imgsrc={
src: 'http://wallpaper-gallery.net/images/pig-images/pig-images-12.jpg',
show: false,
};">
<span ng-mouseover="imgsrc.show = true" ng-mouseout="imgsrc.show = false">
Yours Truly
</span>
<img ng-src="{{ imgsrc.src }}" ng-show="imgsrc.show" />
</a>,
is focused primarily
on studies dealing with eh tohp ah key pig*. As a fan of mooshoo and aigeiaig, I'm open to
working with any dataset ranging from yakdkat studies to lakuktauka. If you would like
to submit a study for publishing, or if you have any questions about a particular study,
please feel free to Contact Me. Thank you for visiting, and happy wamotiem!
</p>
This will display the image when you hover over "Yours Truly", and hide the image when you move the mouse away. The main thing preventing your example from working was the missing ng-app directive from the top-most element. Aside from that, I also cleaned up some of the logic to make it easier to reason out what was going on.
Here's a JSFiddle if you want to see it in action: https://jsfiddle.net/kv4qvu3w/2/

Overlay conflict with input field

Had a question. I'm trying to include a widget (which is contained in a div) for my landing page. Now, essentially what I am trying to do is when i hit the button is to fire the OverLayTwo BUT have it fall to the background, instead of the foreground. I tried the z-index method and it doesn't seem to help.
<div class="OverLay">
<div class="widgetContainer">
<li>This is a Div</li>
First Name: <input type="text" name="fname"></input>
</div>
<div class="OverLayTwo">
</div>
<button class="randomButton">Hello</button>
</div>
So essentially what I want is when User hits button, to have 'OverLayTwo' drop however have it fall to the BACKGROUND/backdrop behind the "widgetContainer" div. --
The reason is I want the user to be able to type into the input field(s), however, lately everything I have looked at or referenced is not solving the problem. Essentially just drops the overlay ontop/into the front of the widget - Not allowing the user to enter text into the appropriate input field.
Hope that made sense. The land of CSS is a true maze o.o ...Also, it should be noted I am using javascript and jQuery functionality.
Any tips and/or suggestions would be truly appreciated!
Thank you!

would be hard to make it fall in the background when it lives inside the first overlay.. try something like this..
<div class="OverLay" style="z-index:100">
<div class="widgetContainer">
<li>This is a Div</li>
First Name: <input type="text" name="fname"></input>
</div>
<button class="randomButton">Hello</button>
</div>
<div class="OverLayTwo" style="z-index:90">
</div>

How to print a hidden div content using jquery?

I have an anchor button and a hidden div. I write a code to print the content of div. But some time its shows the content in print file and some time it is blank. Please help me
<div class="row-fluid printdiv" id="printdiv" style="display:none;">
<div class="col-md-8 indexleft">
<div class="blog">
<!-- blog details -->
<div class="blogdetail row-fluid">
<div class="col-md-5">
<figure><img src="images/24hr-Gym-Logo-2014-698x198.jpg" alt="" /></figure>
</div>
<div class="col-md-7">
<div class="title">
<h2>Relief For Chronic Back Pain 1</h2>
</div>
<div class="writer">
<label>Writtern By :- </label>
Bev Matushewski</div>
</div>
</div>
<!-- blog text -->
<div class="blogtext row-fluid">
<p>“Back problems are among the most common chronic conditions in Canada. Four out of five adults will experience at least one episode of back pain at some time in their lives. It can be highly disabling, it may cause significant work loss, and reduce the quality of life for the individual. Over the years that I have been teaching the Alexander Technique, I estimate that 75% of my students come because of pain. It could be back or neck pain, pain from injuries that have been slow to recover or pain from working at the computer for long hours. Singers, actors, musicians, dancers or people who just want to develop more self-awareness and self-growth make up the rest.</p>
<p>Back pain can occur at any point of the spine, and is characterized by a range of symptoms including pain, muscle tension or stiffness, weakness in the legs or feet, and a possible tingling or burning sensation. It is often caused by strain on muscles and ligaments that support the spine. Lower back problems are most common, because it bears the most weight and physical stress. The discs in the lumbar spine are often subjected to constant pressure by exaggerated bending and postural distortion which can impinge on the spinal cord or one of its outlet nerves. It may result not only in back pain but also in pain travelling down the leg. This condition is usually known as “sciatica”.</p>
<p>If you have back pain and you would like to try the Alexander Technique, it is important to ask why you have back pain. There are many causes for back pain such as infections or injuries. Please consult your doctor, if your pain is sudden or acute. Teachers of the Alexander Technique are not trained in diagnosing your issue medically. If you are in doubt, see your GP.</p>
<p>Secondly, you may ask yourself, if your pain is life-style related. In most cases, it is. Unconsciously, we develop movement habits that harm our bodies, and we often use too much effort in all our daily activities. For instance, sitting all day at the computer with poor posture can contribute to back pain. Activities in the house done with too much strain might create back pain. Even sports activities such as running, if done badly, make pain more likely. Most often, ongoing postural habits are the causing or contributing factor for many back problems. This is when the Alexander Technique can help you.</p>
</div>
</div>
</div>
<!-- side bar -->
<div class="col-md-4 blogright">
<!--<h2 class="color-text" style="color:#000000;">Our Features</h2>-->
<!--div>
<div><img src="/images/yoga-add3.jpg"> </div>
</div-->
<section id="calender" class="stag-custom-widget-area ">
<aside id="text-22" class="widget widget_text">
<div class="textwidget"><br>
<div class="row">
<div class="col-md-12" style="float:left"> <img src="http://foreverfit.today/wp-content/uploads/2014/12/rock_ad.jpg" height="200" width="300"> </div>
Lorem ipsum here Lorem ipsumLor sumLorem ipsumL orem ipsumLo rem ipsumLorem ips umLorem ipsumLorem ipsum Lorem ipsum here Lorem ipsumLor sumLorem ipsumL orem ipsumLo rem ipsumLorem ips umLorem ipsumLorem ipsum
</div>
</div>
</aside>
</section>
</div>
<!-- end of side bar -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
function printbox(){
var content = $('#printdiv').html();
var printWindow = '<html><head><title>my div</title><link rel="stylesheet" href="css/print.css" /></head><body>'+ content +'</body></html>';
mywindow = window.open('', 'print div', 'height=400,width=600');
mywindow.document.write(printWindow);
mywindow.print();
return true;
}
$(function(){
$('#printbtn').click(function(e) {
printbox();
});
});
</script>

Just delaying the call of your print by a short amount of time will give your browser the time to actually write the content into the printWindow.
You can achieve this by replacing the line
mywindow.print();
with
setTimeout(function(){ mywindow.print() }, 100);
This will delay the print() call and should solve your problem.

Javascript reveal text animations?

I am a bit stumped on this. I just started working with javascript and I am having a little trouble getting this to work. Basically I have links within paragraphs that expand when clicked using javascript. However, I would like to add an effect to this expansion such as fading or scrolling. Previously, I have only added effects to div classes but this isn't a div. Anyway here is my code thanks!
Javascript:
function reveal(a){
var e=document.getElementById(a);
if(!e) return true;
if(e.style.display=="none"){
e.style.display="inline"
} else {
e.style.display="none"
}
return true;
}
html:
<title>Project Star in a Jar</title>
<link rel="stylesheet" type="text/css" href="/../default.css"/>
<script type="text/javascript" src="/jscript/function.js"></script>
</head>
<link rel="shortcut icon" href= "/../images/favicon.png"/>
<link rel="icon" href="/../images/favicon.png" type="image/x-icon">
<body>
<div class="wrapOverall">
<div class="header">
<div class="logo">
<img src="/../images/starJar.png" href="index.php" style="width:100px;height:100px">
<div class="moto">
<h1> Project Star in a Jar</h1>
</div>
</div>
<div class="nav_main">
<ul>
<li>Home</li>
<li>Tutorial</li>
<li>Videos</li>
<li>Other Resources</li>
</ul>
</div>
</div>
<div class="sideContent">
<div class="sideTitle">
<h3>Table of Contents</h3>
</div>
<div class="sideLinks">
<ul>
<li>i. Introduction</li>
<li>1. What is Fusion?</li>
<li>2. Hazards and Safety</li>
<li>3. Vacuum Chamber</li>
<li>4. Inner Grid</li>
<li>5. Outer Grid</li>
<li>6. Vacuum System</li>
<li>7. Electrical System</li>
<li>8. Achieving Fusion </li>
<li>9. Putting it all Together</li>
<li>10. Great, Now What?</li>
</ul>
</div>
</div>
<div class="Content">
<div class="contentTitle">
<h1>Star in a Jar - A How-To Guide</h1>
<h2>Introduction</h3>
</div>
<div class="contentText">
<!--Paragraph One-->
<p>
Why would anyone want to build a <q>star in a jar</q>? Is it because they want to feel like a mad scientist? Because they want to impress their friends or peers? Although these are all possible reasons, the main reason why people have been building and researching these incredible devices is because quite frankly, we are running out of energy solutions. If we don't have a working solution in the next 20-50 years, we either won't have energy or the little energy we produce will be outrageously expensive. The energy that we consume is almost directly matched with the human exponential growth model and we simply cannot be sustained with conventional energy production methods. The more people that are aware or interested in this technology, the faster we will be able to develop fusion based energy solutions.
</p>
<!--Paragraph Two-->
<p>
Since this is an advanced topic and this writing will use highly technical lexis, I will write in such a way as to target multiple audiences. I understand that some of you reading this are doing so because you are planning on building or already built a fusion device and are looking for more useful information to further develop and experiment with your device. On the other hand, some of you may be reading this from a purely academic standpoint and have nor the intention or means to build such a device. That is perfectly fine! If the former, and you are familiar with the terms and already have an understanding of the concepts in this text, then you can read it without expanding the text for a better tailored experience. However, if the latter, and you are unfamiliar with the terms of this field, I have developed the writing on the site to be dynamic and interactive. Every word or phrase you see that is in orange, can be expanded into an explanation when clicked. Try it out with the following phrase!
What is Tritium?.
<a id="para1" style="display:none">
(Tritium is a radioactive isotope of hydrogen with one proton and two neutrons)
</a>
I implemented this feature because I realize that this writing will be read by many different audiences with their own unique purposes for reading. As the writer, I strive to make this writing dynamic to fit their needs independently without compromising convince or enjoyment. Although the main purpose of this tutorial is to give a detailed analysis of the device and its workings in a tutorial based format, it is also to educate and address the needs and wants of the reader and hopefully, in the process raise awareness to a phenomenal technology that will change the world.
</p>
<!--Content Image-->
<div class="contentImage">
<img src="/../images/intro1.jpg" style="width:300px;height:300px">
</div>
<!--Paragraph Three-->
<p>
This tutorial is not going over any new exotic technology. The particular machine described uses very basic principles of classical physics and has been around since the mid 60's. Depending on the materials you have on hand, your results will vary. I can guarantee at the bare minimum, you will have a working demo fusor if you follow this tutorial. A demo fusor essentially does everything a normal fusor does, with the exception that no fusion of atoms is occurring. It is called demo because it is typically much easier to build and operate safely and is used to demonstrate the operation of a fusor. The picture on the right is of a preliminary run of my first demo fusor.
</p>
<!--Paragraph Four-->
<p>
<b>WARNING:</b>
</p>
<!--Paragraph Five-->
<p>
Before we begin the tutorial, I would like to point out that although this machine is of a very simple design and can be built from essentially junk, does NOT mean it is by any means safe. The minimum operating voltage for most demo fusors are 2-6kv and 10-30kv for fusors achieving fusion reactions. High voltages are extremely dangerous and the high voltage supplies discussed can and most likely will kill you if an accident occurs or you misuse them. The Hazards and Safety section will go into more detail about the all possible hazards presented and how to deal with them accordingly.
</p>
<!--Paragraph Six-->
<p>
Understand that this is a dangerous experiment that if done improperly, has the potential to harm or kill you or others who do not follow proper safety measures. I do not take any responsibility for death, injury, property damage, potential outrageous energy bills, blown breakers, glowing in the dark, fecaled pants, becoming a green hulk when angry, or failure of experimenter to hold sufficient health, liability or property insurance.
</p>
</div>
<div class="contentSelector">
>>
</div>
</div>
</div>
<div class="footer">
<a>
Copyright # 2014 Project Star In A Jar. All Rights Reserved.<br>
Website and Content Created by Joshua Hess <a target="blank" href="http://www.youtube.com/s28400"><u>(s28400)</u></a>
</a>
</div>
</body>

Your question isn't entirely clear... but it seems like you're just asking how to do animations in JavaScript.
Here's some code you can use for fading in (taken from http://youmightnotneedjquery.com/):
function fadeIn(el) {
el.style.opacity = 0;
var last = +new Date();
var tick = function() {
el.style.opacity = +el.style.opacity + (new Date() - last) / 400;
last = +new Date();
if (+el.style.opacity < 1) {
(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
}
};
tick();
}
fadeIn(el);
or, if you are using jQuery (not sure if the tag was listed correctly or not), a similar function has already been made for fading in the library:
$(el).fadeIn();
Do note that a fade in in this way requires you setting opacity values (not display values).
You also mentioned in your question "Previously, I have only added effects to div classes but this isn't a div". Classes are just one way to implement CSS styles, if you've used CSS animations before, the same CSS animation will work for nearly any element (there are cases where they won't), you just have to give that element a class with the animation you want. As this wasn't asking for CSS in specific, you can take a look here for more information: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations or at this question for fade in specifically: Using CSS for fade-in effect on page load

Move an element from div to anther - not working

I am trying to MOVE Grid3 to Grid2 - and I am using This code, but it's not working, what I am doing wrong?
Also is there anyway to move half of the Div's in Grid3 to Grid1, and the other half to Grid2?
JS
$("#grid3").appendTo("#grid2");
HTML
<div class="wrapperA1">
<div class="content">
<div id="home-sectionD">
<div id="grid1"><!--Gird 1-->
<article class="testimonial">
<img alt="Neal Kilburne​​" src="assets/images/neal kilburne​​.jpg"/>
<div>
<h3>Neal Kilburne​​</h3>
<p>CEO, iTEQ Global www.iteqglobal.com</p>
<br>
<p>“Loai is a great asset to our company and provides us with great and quick responses,Such a talented designer which we have the honour of working with.” 2011 - 2012</p>
</div>
</article>
<article class="testimonial">
<div>
<h3>Amanda Chui​</h3>
<p>Owner of www.beautyroom.ca</p>
<br>
<p>Just what my website needed! When I had finished my website, I felt that it was missing something,so I enlisted in the help of Loai. He did a great job of giving my website the professional and polished look it needed without having me wait for days on end. Thanks, Loai!” June 23, 2012</p>
</div>
</article>
</div><div id="grid2"><!--Gird 2-->
<article class="testimonial">
<img alt="Geeta Martinez" src="assets/images/geeta martinez.jpg"/>
<div>
<h3>Geeta Martinez</h3>
<p>Lawyer & Business Consultant</p>
<br>
<p>"Leo did a great job! He designed and put together several websites for me in less than a week. He was incredibly patient and flexible throughout the whole process, and took a lot of the stress out of the whole situation for me. He is a really nice guy to work with - I really appreciated his approach! I would definitely recommend working with him". July 14, 2013</p>
</div>
</article>
<article class="testimonial">
<div>
<h3>Richard Jackson</h3>
<p><em>Photographer www.rjpstudios.co.uk​</em></p>
<br>
<p>“Loai designed my website last year on wix though I could have done it myself loai added a proffesional touch to the design which is so important in creating the best first impeson.” 2013</p>
</div>
</article>
</div><div id="grid3"><!--Gird 3-->
<article class="testimonial">
<img alt="Glen Eric Huysamer" src="assets/images/glen eric huysamer.jpg"/>
<div>
<h3>Glen Eric Huysamer​</h3>
<p>Specialist Service Provider.</p>
<br>
<p>“I would like to take this opportunity to warn people who might consider using Loai Design Studio. You will have to buckle up and strap yourself in as this young designer and associates take you through the process of creating your design needs. I was pleasantly surprised from start to finish, and can say that even though Loai took control of the creative process the end result felt like it was mine. You can not go wrong with this young lad, go ahead surprise yourself”. December 30, 2011</p>
</div>
</article>
<article class="testimonial">
<div>
<h3>Ciprian Filip​</h3>
<p>Founder of Pontomat.ro​</p>
<br>
<p>“Worked with Loai on designing exposure of our social media presence on Facebook for our E-commerce initiative. He is very passionate and expert in his field of work, coming with breakthrough innovations in real time. He is able to manage an end to end social media exposure with accent on clarity, effectiveness and innovation. His working capabilities are awesome and I am sure that he will make good contribution to any project he works on.” August 4, 2011</p>
</div>
</article>
</div>
</div>
</div>
</div>

Seems to be working for me (http://jsfiddle.net/k2NMD/9/).
You may be calling append too early, before the browser has actually processed all of the html. Try wrap your append function in a $(document).ready() function.
$(document).ready(function () {
$("#grid3").appendTo("#grid2");
});

The move does work (if you are running the code after the document has loaded such as in $(document).ready() event). Check in the developer console for the elements (if you are using Chrome) to see that #grid3 is actually inside #grid2 like so
<div id="grid2">...
<article...>
<article...>
<div id="grid3">...
</div>
If you would like to move the contents of grid3 inside grid2, then you have to get the articles using $('#grid3').find('article').appendTo('#grid2') and that will remove the articles from grid3 and insert it into grid2. Moving parts of it can be accomplished by separating the article and insert one into grid1 and the other into grid2.