I looked online for a few references to my question, but having a hard time understanding what it is I truly need to do to make this work.
For example, if I want to search for the keyword "necessary" or any keyword I need to find, how would I go about finding that keyword using a Input search field throughout all the text in the page and go down to that keyword?
Would this require some JavaScript?
For reference, I provided some basic HTML code i'm trying to filter through and the word necessary is toward the bottom...
Any ideas would help!
<div class="course-title">
<h4>Difficult Conversations: Situation, Behavior, Impact</h4>
</div>
<div class="course-info">
<p><span>Course Description:</span> The Situation/Behavior/Impact model is perfect to prepare feedback statements when it’s critical to give clear, actionable feedback. Learn more about the model, how to use, and how to manage through complicated conversations.
</p>
<p><span>Subject:</span> Personal Growth</p>
<p><span>Provider:</span>L&D</p>
<p><span>Timing:</span> 1.5 Hours</p>
<p><span>Formats Offered:</span> Virtual</p>
<p><span>Link:</span> </p>
</div>
<br><br>
<div class="course-title">
<h4>Leading Change</h4>
</div>
<div class="course-info">
<p><span>Course Description:</span> Change is a constant in innovative organizations, so it’s imperative to handle it well and adapt. In this workshop, discover what happens neurologically when change is experienced, and learn easy techniques to reduce resistance and increase inspiration, commitment, and decisive action.
</p>
<p><span>Course Type:</span> Leadership Development</p>
<p><span>Provider:</span> LL</p>
<p><span>Timing:</span> 2 Hours</p>
<p><span>Formats Offered:</span> Virtual</p>
<p><span>Accessing:</span> </p>
</div>
<br><br>
<div class="course-title">
<h4>Managing Difficult Conversations: Issue Clearing</h4>
</div>
<div class="course-info">
<p><span>Course Description:</span> Difficult conversations are a common and necessary aspect in growing a strong, connected team with a high trust climate. In this session, we'll explore Issue Clearing, a tool to help guide conversations towards open, clear, vulnerable communication.
</p>
<p><span>Course Type:</span> Leadership Development</p>
<p><span>Provider:</span> L&D</p>
<p><span>Timing:</span> 2 Hours</p>
<p><span>Formats Offered:</span> Virtual</p>
<p><span>Accessing:</span> </p>
</div>
You could give each section its' own anchor. for example by changing each h4 (such as this one):
<div class="course-title">
<h4>Managing Difficult Conversations: Issue Clearing</h4>
</div>
to:
<a name="courseid123456">
<div class="course-title">
<h4>Managing Difficult Conversations: Issue Clearing</h4>
</div>
</a>
then you can jump to that location either with hyperlinks () or with javascript code such as window.location = '#courseid123456';
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/
I have a page which consists of 3-column body. Inside the first and the third column there are buttons. I try to position them correctly.
In particular, I have a problem with the first column's button which must be displayed at the bottom of the page (near footer).
But the styles I used doesn't have an effect. I suppose it happens because the column is empty and positioning works relative to its height. I tried to make use of height:100%; property, but it didn't work.
How should I work around it?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 20vh;
background-color:#f2f2f2;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 10vh;
}
footer {
background-color: black;
color:white;
} </style>
<style>
#upButton {position:absolute; left:0px; bottom:0px;}
</style>
<style>
.col1 {height:100%;}
</style>
</head>
<body>
<div id="header" class="header" align="center">
<h1 align="center">Some header
<small>some subheader</smalll>
</div>
<div class="container">
<div class="row">
<div class="col-md-2 col1">
<a id="upButton"
href="#header" class="btn btn-success"
role="button">Up
</a>
</div>
<div class="col-md-8">...</div>
<div class="col-md-2">
<a href="#f" align="right" class="btn
btn-danger" role="button">Down
</a>
</div>
</div>
</div>
<footer>
<div class="container-fluid">
<p><a id="f">All right unreserved</a></p>
</div>
</footer>
</body>
So right now my solution works only if I put lots of text inside the first column - then the Up button is near footer, as it should be. But without text it goes upwards..
EDIT: I managed to solve it by putting both buttons right into body, but if there is a solution which allows for them to remain in their respective columns, I d like to know.
On the pictures the up button is next to the footer, while the down button is near header.
EDIT: The code with proposed solutions:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 20vh;
background-color:#f2f2f2;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 10vh;
}
footer {
background-color: black;
color:white;
} </style>
<style>
#upButton {position:fixed; left:0px; bottom:100px;}
.col1 {height:100%;}
</style>
</head>
<body>
<div id="header" class="header" align="center">
<h1 align="center">Some header
<small>some subheader</smalll>
</div>
<div class="container">
<div class="row">
<div class="col-md-2 col1">
<a id="upButton"
href="#header" class="btn btn-success"
role="button">Up
</a>
</div>
<div class="col-md-8">.This book must have been revolutionary when it came out in the 1930s. The language, the style, the unbashed uncaring for literary norms must have been like a fresh air of rebellion to the stifled people of the 1930s who just few decades ago were under the moral oppression of the Victorian age. The book begins with an ode to Tanya's cunt. And it continues in the same manner. The word cunt is probably the most used word in the entire book. Today it would be called vulgar, but at the time it was revolutionary and brave. Miller describes multiple women he's had sex with while living in Paris, mostly on the money of other people, or as a vagrant and homeless on the streets. Most of the women he sleeps with are prostitutes (and he goes at length discussing the different types of prostitutes), but there is also the Jewish adulteress, the Russian princess with gonorrhea, the strange french woman to whom he gives 100 francs and then takes them out of her purse after having sex with her in her house above the room of her sick mother. Chapters of lucid description of characters (mostly Miller's friends whose money he uses, at whose houses he sleeps and whose women he has sex with) and some semblance of story lines are alternated with chapters of stream-of-consciousness monologues with prophetic statements and deep insights into life and living that usually come only after a very heavy intoxication with various substances. The book finishes in a middle of an action, just like it starts. Nothing really happens throughout and there's no sustained plot or even any novel-long characters (except the author-narrator) but it does give an entertaining and fascinating view into the life of the American emigres to Paris between the two wars in a much different way than Hemingway. POSTED BY MR.B. AT 2:12 PM NO COMMENTS: THURSDAY, JULY 7, 2016 "Mount Analogue" by Rene Daumal It ends in mid-sentence in the fifth chapter. Rene Daumal died days later of tubercolosis. He was in his 36th year of his life. Peradams. Only Father Sogol (Logos, took me a while to figure it out without anyone pointing it out to me) found one and very low, below the mountain where no Peradams are usually found, but he had an epiphany about himself. The book has an extensive intro section where the future planned chapters by Daumal are explained and it is a real shame that they were not written. Or maybe the book is more effective this way? After all Gurdjieff's "Life is real only when I AM" also stops in a middle of a sentence, and some who have seen the original manuscripts say that the published version is a much smaller selection from what was available. "Mount Analogue" is a very readable and well written book, to be expected from a writer of Daumal's caliber, and although Gurdjieff's name is never explicitly mentioned - it is based on the ideas and understanding of Gurdjieff's system (not to be called "The Fourth Way", but simply the "Gurdjieff System") and contains the personal thoughts and development of a person working on themselves according to the system. The explanation on how Mount Analogue This book must have been revolutionary when it came out in the 1930s. The language, the style, the unbashed uncaring for literary norms must have been like a fresh air of rebellion to the stifled people of the 1930s who just few decades ago were under the moral oppression of the Victorian age. The book begins with an ode to Tanya's cunt. And it continues in the same manner. The word cunt is probably the most used word in the entire book. Today it would be called vulgar, but at the time it was revolutionary and brave. Miller describes multiple women he's had sex with while living in Paris, mostly on the money of other people, or as a vagrant and homeless on the streets. Most of the women he sleeps with are prostitutes (and he goes at length discussing the different types of prostitutes), but there is also the Jewish adulteress, the Russian princess with gonorrhea, the strange french woman to whom he gives 100 francs and then takes them out of her purse after having sex with her in her house above the room of her sick mother. Chapters of lucid description of characters (mostly Miller's friends whose money he uses, at whose houses he sleeps and whose women he has sex with) and some semblance of story lines are alternated with chapters of stream-of-consciousness monologues with prophetic statements and deep insights into life and living that usually come only after a very heavy intoxication with various substances. The book finishes in a middle of an action, just like it starts. Nothing really happens throughout and there's no sustained plot or even any novel-long characters (except the author-narrator) but it does give an entertaining and fascinating view into the life of the American emigres to Paris between the two wars in a much different way than Hemingway. POSTED BY MR.B. AT 2:12 PM NO COMMENTS: THURSDAY, JULY 7, 2016 "Mount Analogue" by Rene Daumal It ends in mid-sentence in the fifth chapter. Rene Daumal died days later of tubercolosis. He was in his 36th year of his life. Peradams. Only Father Sogol (Logos, took me a while to figure it out without anyone pointing it out to me) found one and very low, below the mountain where no Peradams are usually found, but he had an epiphany about himself. The book has an extensive intro section where the future planned chapters by Daumal are explained and it is a real shame that they were not written. Or maybe the book is more effective this way? After all Gurdjieff's "Life is real only when I AM" also stops in a middle of a sentence, and some who have seen the original manuscripts say that the published version is a much smaller selection from what was available. "Mount Analogue" is a very readable and well written book, to be expected from a writer of Daumal's caliber, and although Gurdjieff's name is never explicitly mentioned - it is based on the ideas and understanding of Gurdjieff's system (not to be called "The Fourth Way", but simply the "Gurdjieff System") and contains the personal thoughts and development of a person working on themselves according to the system. The explanation on how Mount Analogue would have been physically hidden from anyone for so long is definitely done by the latest science available at that period (1930s), but with today's satellites and space observation does not hold well at all, although it was probably ingenious for the time. Also getting there, getting in and discovering no new technology (based on electricity) works on the mountain is also very interesting, especially connected to Gurdjieff's notion that electricity was discovered before and is not an inexhaustible resource. Of course, Father Sogol is no one but Alexandre de (von) Saltzmann, one of the foremost Gurdjieff's students, of whom not as much is known, compared to the other students like Alexandre's wife Jeanne, and the de (von) Hartmann's. He must have been a formidable personality to have left such an impression on Daumal. This book is a gem, even in its unfinished form, or maybe because of it.This book must have been revolutionary when it came out in the 1930s. The language, the style, the unbashed uncaring for literary norms must have been like a fresh air of rebellion to the stifled people of the 1930s who just few decades ago were under the moral oppression of the Victorian age. The book begins with an ode to Tanya's cunt. And it continues in the same manner. The word cunt is probably the most used word in the entire book. Today it would be called vulgar, but at the time it was revolutionary and brave. Miller describes multiple women he's had sex with while living in Paris, mostly on the money of other people, or as a vagrant and homeless on the streets. Most of the women he sleeps with are prostitutes (and he goes at length discussing the different types of prostitutes), but there is also the Jewish adulteress, the Russian princess with gonorrhea, the strange french woman to whom he gives 100 francs and then takes them out of her purse after having sex with her in her house above the room of her sick mother. Chapters of lucid description of characters (mostly Miller's friends whose money he uses, at whose houses he sleeps and whose women he has sex with) and some semblance of story lines are alternated with chapters of stream-of-consciousness monologues with prophetic statements and deep insights into life and living that usually come only after a very heavy intoxication with various substances. The book finishes in a middle of an action, just like it starts. Nothing really happens throughout and there's no sustained plot or even any novel-long characters (except the author-narrator) but it does give an entertaining and fascinating view into the life of the American emigres to Paris between the two wars in a much different way than Hemingway. POSTED BY MR.B. AT 2:12 PM NO COMMENTS: THURSDAY, JULY 7, 2016 "Mount Analogue" by Rene Daumal It ends in mid-sentence in the fifth chapter. Rene Daumal died days later of tubercolosis. He was in his 36th year of his life. Peradams. Only Father Sogol (Logos, took me a while to figure it out without anyone pointing it out to me) found one and very low, below the mountain where no Peradams are usually found, but he had an epiphany about himself. The book has an extensive intro section where the future planned chapters by Daumal are explained and it is a real shame that they were not written. Or maybe the book is more effective this way? After all Gurdjieff's "Life is real only when I AM" also stops in a middle of a sentence, and some who have seen the original manuscripts say that the published version is a much smaller selection from what was available. "Mount Analogue" is a very readable and well written book, to be expected from a writer of Daumal's caliber, and although Gurdjieff's name is never explicitly mentioned - it is based on the ideas and understanding of Gurdjieff's system (not to be called "The Fourth Way", but simply the "Gurdjieff System") and contains the personal thoughts and development of a person working on themselves according to the system. The explanation on how Mount Analogue would have been physically hidden from anyone for so long is definitely done by the latest science available at that period (1930s), but with today's satellites and space observation does not hold well at all, although it was probably ingenious for the time. Also getting there, getting in and discovering no new technology (based on electricity) works on the mountain is also very interesting, especially connected to Gurdjieff's notion that electricity was discovered before and is not an inexhaustible resource. Of course, Father Sogol is no one but Alexandre de (von) Saltzmann, one of the foremost Gurdjieff's students, of whom not as much is known, compared to the other students like Alexandre's wife Jeanne, and the de (von) Hartmann's. He must have been a formidable personality to have left such an impression on Daumal. This book is a gem, even in its unfinished form, or maybe because of it.This book must have been revolutionary when it came out in the 1930s. The language, the style, the unbashed uncaring for literary norms must have been like a fresh air of rebellion to the stifled people of the 1930s who just few decades ago were under the moral oppression of the Victorian age. The book begins with an ode to Tanya's cunt. And it continues in the same manner. The word cunt is probably the most used word in the entire book. Today it would be called vulgar, but at the time it was revolutionary and brave. Miller describes multiple women he's had sex with while living in Paris, mostly on the money of other people, or as a vagrant and homeless on the streets. Most of the women he sleeps with are prostitutes (and he goes at length discussing the different types of prostitutes), but there is also the Jewish adulteress, the Russian princess with gonorrhea, the strange french woman to whom he gives 100 francs and then takes them out of her purse after having sex with her in her house above the room of her sick mother. Chapters of lucid description of characters (mostly Miller's friends whose money he uses, at whose houses he sleeps and whose women he has sex with) and some semblance of story lines are alternated with chapters of stream-of-consciousness monologues with prophetic statements and deep insights into life and living that usually come only after a very heavy intoxication with various substances. The book finishes in a middle of an action, just like it starts. Nothing really happens throughout and there's no sustained plot or even any novel-long characters (except the author-narrator) but it does give an entertaining and fascinating view into the life of the American emigres to Paris between the two wars in a much different way than Hemingway. POSTED BY MR.B. AT 2:12 PM NO COMMENTS: THURSDAY, JULY 7, 2016 "Mount Analogue" by Rene Daumal It ends in mid-sentence in the fifth chapter. Rene Daumal died days later of tubercolosis. He was in his 36th year of his life. Peradams. Only Father Sogol (Logos, took me a while to figure it out without anyone pointing it out to me) found one and very low, below the mountain where no Peradams are usually found, but he had an epiphany about himself. The book has an extensive intro section where the future planned chapters by Daumal are explained and it is a real shame that they were not written. Or maybe the book is more effective this way? After all Gurdjieff's "Life is real only when I AM" also stops in a middle of a sentence, and some who have seen the original manuscripts say that the published version is a much smaller selection from what was available. "Mount Analogue" is a very readable and well written book, to be expected from a writer of Daumal's caliber, and although Gurdjieff's name is never explicitly mentioned - it is based on the ideas and understanding of Gurdjieff's system (not to be called "The Fourth Way", but simply the "Gurdjieff System") and contains the personal thoughts and development of a person working on themselves according to the system. The explanation on how Mount Analogue would have been physically hidden from anyone for so long is definitely done by the latest science available at that period (1930s), but ..</div>
<div class="col-md-2">
<a href="#f" align="right" class="btn
btn-danger" role="button">Down
</a>
</div>
</div>
</div>
<footer>
<div class="container-fluid">
<p><a id="f">All right unreserved</a></p>
</div>
</footer>
</body>
</html>
One method I would recommend is that you use flex
First make sure body, container, row and col1 all take up full height even when empty (inspect to confirm).
If they do, then set col1 to display:flex. You could easily then use the flex-end property of flex children to make it stay down.
#upButton {
align-self: flex-end
}
Try to change your style to this. The output maybe the result your looking for.
<style>
#upButton {position:fixed; left:0px; bottom:0px;}
.col1 {height:100%;}
</style>
I changed the position from absolute to fixed, try to read different values for position... CSS Layout - The position Property
Making the upButton fixed we can control it irrespective of it's parent So this way we can achieve your requirement
<head>
<style>
#upButton {position:fixed; left:5px; bottom:5px;}
.col1 { height:100%; }
</style>
</head>
<body>
<div class="container-fluid">
<div class="row" style="height: 100%">
<div class="col-xs-2 col1">
<a id="upButton" href="#header" class="btn btn-success" role="button">Up
</a>
</div>
<div class="col-xs-8">.......</div>
<div class="col-xs-2">
<a href="#f" align="right" class="btn btn-danger" role="button">Down
</a>
</div>
</div>
</div>
</body>
Live demo : https://jsbin.com/kuberop/2/edit?html,output
So I have two images that I am floating left and stacking on top of each other while using a jquery click over effect. I can get the images to float left with the effect but my text is not wrapping around the images but is instead starting below the second image. I'm not sure where the issue is with the html. I appreciate the assistance.
<img class="floatleft"><div class="fadehover"><img src=" http://hhsidealab.wpengine.com/wp-content/uploads/2014/01/the-people-v1-257x257-CONTRAST-1.png" alt="The People" class="b"/></div></img><img class="floatleft"><div class="fadehover"></a>
<img src=" http://hhsidealab.wpengine.com/wp-content/uploads/2014/01/the-projects-v2-257x257-CONTRAST-V1.png" alt="The Projects" class="b"/></div></img>
<div id="home-text-4">The foundational effort of the IDEA Lab is to disrupt the barriers between organizational siloes and practices that prevent people from working together.
<p>We do this by equipping HHS Employees and members of the public with new methodologies, aircover and pathways for innovation.</p>
<p> We believe that people taking action on an idea is essential to the modernization of government.</p>
<p> The IDEA Lab has engaged hundreds of people by helping them act, formulate a project and produce results. </p>
</div>
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.