Show hide available content - javascript

I have some content in my post. But I want to hide it until I click to a link in this post. I have yet to build this site, but I will say my idea.
The first Heading
The second Heading
The third Heading
The fourth Heading
/* The content following are hidden Until I clicked to a link above. /
/ Content is available wrapped in a div tag, do not loaded from another site. */
Content 1 will be show only click to "1. The first Heading"
Content 2 will be show only click to "2. The second Heading"
Content 3 will be show only click to "3. The third Heading"
Content 4 will be show only click to "4. The fourth Heading"
Can use CSS or Ajax / jQuery to create the effect?


You could do it using the following jquery code:
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
Here is the complete demo how you can hide and show the element by click event.


I have made a pure css accordion that achieves the same functionality.Checkout the following link at codepen
HTML:
<div class="container">
<ul>
<li>What is java Programming Language?
<div class="acc-content" id="first">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo harum vel aliquid. Quaerat soluta sed aperiam temporibus ipsum obcaecati porro commodi error unde reprehenderit ipsa, dolore id, totam dolores, quae.
</p>
</div></li>
<li>How is javascript different from java?
<div class="acc-content" id="second">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo harum vel aliquid. Quaerat soluta sed aperiam temporibus ipsum obcaecati porro commodi error unde reprehenderit ipsa, dolore id, totam dolores, quae
</p>
</div></li>
<li>Other front end technologies
<div class="acc-content" id="third">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo harum vel aliquid. Quaerat soluta sed aperiam temporibus ipsum obcaecati porro commodi error unde reprehenderit ipsa, dolore id, totam dolores, quae
</p>
</div></li>
</ul>
</div>
CSS:
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
padding-top: 50px;
font : 1em cursive;
background-image: url(http://www.mrwallpaper.com/wallpapers/fantasy-winter-scenery-1920x1200.jpg);
background-size: cover;
color: #fff;
overflow-x: hidden;
}
.container{
position: relative;
width: 100%;
max-width: 500px;
margin: auto;
padding: 5px;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
.acc-header{
display: block;
cursor: pointer;
padding: 10px 20px;
background-color: #000;
opacity: 0.7;
text-transform: uppercase;
text-decoration: none;
text-align: center;
color: #fff;
border-radius: 2px;
margin-bottom: 10px 0 0 10px;
}
.acc-content p{
margin: 10px;
}
.acc-content{
background-color: #222;
opacity: 0.7;
height: 0px;
overflow: hidden;
-webkit-transition: height 0.4s ease;
-moz-transition: height 0.4s ease;
-ms-transition: height 0.4s ease;
-o-transition: height 0.4s ease;
transition: height 0.4s ease;
}
.acc-content:target{
height: 170px;
}


With jQuery it can be pretty easy. By default you hide .content divs with CSS and display the corresponding one on heading click. Consider bellow example.
var $content = $('.content');
$('h2').click(function() {
$content.removeClass('show')
.filter('.content-' + $(this).data('content'))
.addClass('show');
});
.content {
display: none;
padding: 5px;
background: #EEE;
}
.content.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 data-content="1">Heading #1</h2>
<h2 data-content="2">Heading #2</h2>
<h2 data-content="3">Heading #3</h2>
<div class="content content-1">Content #1</div>
<div class="content content-2">Content #2</div>
<div class="content content-3">Content #3</div>


If I understand well, I would recommend to load from ajax the content on first click and then hide it instead of deleting the toggled panel and retrieve it again from AJAX each time (so that there is no wait on each click and less requests).
So here's a way of doing it:
$('.header').click(function()
{
var clickedHeader= $(this);
if (clickedHeader.next().is('.toggle:visible'))
{
clickedHeader.next().slideDown(800);
}
else if (clickedHeader.next().is('.toggle:hidden'))
{
clickedHeader.next().slideUp(800);
}
else
{
$.get(url, data, function(data)
{
// First do some treatment if needed...
clickedHeader.after('<div class="toggle" style="display:none;">'+data+'</div>');
clickedHeader.next().slideDown(800);
});
}
});
This will work if you have HTML like this for ex.
<div class="header">First header</div>
<div class="header">Second header</div>
<div class="header">Third header</div>
<div class="header">Fourth header</div>
and after each header you would toggle a div that has class '.toggle'.
Hope it helps.

Related

How do I code smooth transitions between components?

I'm making my own single page application and I don't want the content to be static as I scroll down. I want it to ease in with a smooth animation. I couldn't find any guides on the subject. Here is a perfect example of what I'm talking about: qanplatform.com , as you scroll down the content has these nice transitions between components. Is it code-splitting?
so basically i have my:
<div className='App'>
<Navbar/>
<Hero/>
<Stats/>
<Business/>
<Team/>
<Footer/>
</div>
and I want every component to render with a simple animation only when I scroll down to it and not before. I don't need anyone to write code for me, all I need is a tip on how to proceed. I think qanplatform.com best represents what my idea is.

You can try this alternative one quite simple without an intersection observer, combining the CSS animation keyframes and JS to detect and reveal the content height
article: https://alvarotrigo.com/blog/css-animations-scroll/
function reveal() {
var reveals = document.querySelectorAll(".reveal");
for (var i = 0; i < reveals.length; i++) {
var windowHeight = window.innerHeight;
var elementTop = reveals[i].getBoundingClientRect().top;
var elementVisible = 150;
if (elementTop < windowHeight - elementVisible) {
reveals[i].classList.add("active");
} else {
reveals[i].classList.remove("active");
}
}
}
window.addEventListener("scroll", reveal);
#import url("https://fonts.googleapis.com/css2?family=Asap&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Asap", sans-serif;
}
body {
background: #42455a;
}
section {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
section:nth-child(1) {
color: #e0ffff;
}
section:nth-child(2) {
color: #42455a;
background: #e0ffff;
}
section:nth-child(3) {
color: #e0ffff;
}
section:nth-child(4) {
color: #42455a;
background: #e0ffff;
}
section .container {
margin: 100px;
}
section h1 {
font-size: 3rem;
margin: 20px;
}
section h2 {
font-size: 40px;
text-align: center;
text-transform: uppercase;
}
section .text-container {
display: flex;
}
section .text-container .text-box {
margin: 20px;
padding: 20px;
background: #00c2cb;
}
section .text-container .text-box h3 {
font-size: 30px;
text-align: center;
text-transform: uppercase;
margin-bottom: 10px;
}
#media (max-width: 900px) {
section h1 {
font-size: 2rem;
text-align: center;
}
section .text-container {
flex-direction: column;
}
}
.reveal {
position: relative;
opacity: 0;
}
.reveal.active {
opacity: 1;
}
.active.fade-bottom {
animation: fade-bottom 1s ease-in;
}
.active.fade-left {
animation: fade-left 1s ease-in;
}
.active.fade-right {
animation: fade-right 1s ease-in;
}
#keyframes fade-bottom {
0% {
transform: translateY(50px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
#keyframes fade-left {
0% {
transform: translateX(-100px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
#keyframes fade-right {
0% {
transform: translateX(100px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
<section>
<h1>Scroll Down to Reveal Elements ↓</h1>
</section>
<section>
<div class="container reveal fade-bottom">
<h2>Caption</h2>
<div class="text-container">
<div class="text-box">
<h3>Section Text</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
eius molestiae perferendis eos provident vitae iste.
</p>
</div>
<div class="text-box">
<h3>Section Text</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
eius molestiae perferendis eos provident vitae iste.
</p>
</div>
<div class="text-box">
<h3>Section Text</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
eius molestiae perferendis eos provident vitae iste.
</p>
</div>
</div>
</div>
</section>
<section>
<div class="container reveal fade-left">
<h2>Caption</h2>
<div class="text-container">
<div class="text-box">
<h3>Section Text</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
eius molestiae perferendis eos provident vitae iste.
</p>
</div>
<div class="text-box">
<h3>Section Text</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
eius molestiae perferendis eos provident vitae iste.
</p>
</div>
<div class="text-box">
<h3>Section Text</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
eius molestiae perferendis eos provident vitae iste.
</p>
</div>
</div>
</div>
</section>
<section>
<div class="container reveal fade-right">
<h2>Caption</h2>
<div class="text-container">
<div class="text-box">
<h3>Section Text</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
eius molestiae perferendis eos provident vitae iste.
</p>
</div>
<div class="text-box">
<h3>Section Text</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
eius molestiae perferendis eos provident vitae iste.
</p>
</div>
<div class="text-box">
<h3>Section Text</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
eius molestiae perferendis eos provident vitae iste.
</p>
</div>
</div>
</div>
</section>

You can use IntersectionObserver for new elements entering into view. After that, applying styles has animation on newly entered elements. You can utilise the same technique in React with refs if you don't want to use class names or inline styles.
const intersectionCallback = (entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
//add a new class
entry.target.classList.add('fade-in-up');
}
});
}
const options = {
rootMargin: '0px',
threshold: 0 //when it just appear in your viewport, you can modify it based on your needs
}
const observer = new IntersectionObserver(intersectionCallback, options);
//find all elements which have a class name `content` to observe, you can use React's refs as well
const contentElements = document.querySelectorAll('.content')
for (const contentElement of contentElements) {
observer.observe(contentElement)
}
#keyframes fadeInUp {
from {
transform: translate3d(0, 40px, 0);
}
to {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
/*Animation styles*/
.fade-in-up {
opacity: 0;
animation-duration: 2s;
animation-fill-mode: both;
animation-name: fadeInUp;
}
.content {
height: 100vh;
width: 100vw;
}
<div class="content">
<h1>
Scroll down to see the animation
</h1>
</div>
<div class="content">
<h1>
Scroll down to see the animation
</h1>
</div>
<div class="content">
<h1>
End
</h1>
</div>

You can use Animate On Scroll (AOS) or GSAP for this!
They're both pretty easy to use but for this example I'll use AOS since it's quite simpler:
// Initialize the lbrary after the page loads
AOS.init();
/* Basic styling (not needed) */
div {
margin-top: 50vh;
}
<!-- Add the required libraries for AOS -->
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet"/>
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js"></script>
<body>
<div data-aos="fade-up">This element fades up on scroll</div>
<div data-aos="fade-up">This element fades up on scroll</div>
<div data-aos="fade-up">This element fades up on scroll</div>
<div data-aos="fade-right">This element fades right on scroll</div>
<div data-aos="fade-right">This element fades right on scroll</div>
<div data-aos="fade-right">This element fades right on scroll</div>
<div data-aos="fade-right">This element fades right on scroll</div>
<div data-aos="fade-right">This element fades right on scroll</div>
<div data-aos="fade-right">This element fades right on scroll</div>
More examples in the AOS homepage
</body>
To use this in react just import the libraries

How to blur background of webpage and make it not interactable in certain areas?

I'm basically trying to implement a popup that blurs the background and makes it so that the user can't touch the buttons and other components in the background.

You can disable the whole div by using css.
#div-id{
pointer-events: none;
}
This will disable all the elements inside the div.
If you want the blur effect you can add opacity: 0.2; to the div css.

You can add this class on your main element container to blur the whole background
.blured {
filter: blur(2px);
-webkit-filter: blur(2px);
}
And add pointer-events: none; on your modal or popup

By using css backdrop-filter property and pointer-events you can achieve what u need .. see example below
* {
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 1rem;
}
body {
margin: 0;
padding: 0;
}
.disabled{
pointer-events: none;
color : grey;
}
.modal {
position: fixed;
inset: 0;
isolation: isolate;
background-color: rgba(19, 128, 119, 0.5);
display: flex;
align-items: center;
justify-content: center;
}
.popup {
position: absolute;
z-index: 1;
width: 400px;
background-color: black;
color: white;
padding: 1rem;
}
.blur{
position: absolute;
inset: 0;
z-index: -1;
backdrop-filter: blur(0.2rem);
}
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid dolorum illo, non incidunt earum natus neque architecto a autem maxime voluptatibus tempora minima, provident expedita quidem cumque ab. Error, tenetur?
</div>
<div class="modal">
<div class="blur"></div>
<div class="popup">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi quam architecto minima nihil aliquid quis unde
illo mollitia iure. Quia.
<br /> <br /> <br />
<a href="#" class="disabled">
I am a disabled link !
</a>
</div>
</div>
References : pointer-events and backdrop-filter.
Note: Also remember using pointer events doesn't means you can't use keyboard to focus.. To prevent keyboard tab focus you might need to use tabindex attribute on the link

body{
position:relative;
///rest of your style
}
.backdrop {//create a div inside body // <div class".backdrop"></div>
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 1;
backdrop-filter: blur(5px);
}
.backdrop:enabled { //here we have disable all pevnts
pointer-events: none;
}

Smooth scroll isn't smooth at all; smooth scroll only scrolls a number of pixels and not to the specified div

I am trying to add an on-click-smooth-scroll effect like this one: https://michalsnik.github.io/aos/
I have read this: Smooth scroll to specific div on click and I am unable to adapt it. I don't understand what scrollTop: $("#page2").offset().top does.
My issue is that the scroll is "snapping". And that's probably because I have applied scroll-snap on the containers.
Also, when you're in-between the pages and click on the scroll down arrow it will either move up or down.
I would like to get the second page on full view whenever I press on that arrow. It should Scroll Down until #page2 has height: 100vh or it occupies the whole view port.
// eliminate scroll-bar
var child = document.getElementById('child-container');
child.style.right = child.clientWidth - child.offsetWidth + "px";
//scroll down effect on scroll-down-arrow
$(".scroll-down-arrow").click(function() {
$('html,body,#child-container').animate({scrollTop: $("#page2").offset().top}, 'slow', 'linear');
});
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* *** index.html - START *** */
body, html {
height: 100%;
width: 100%;
overflow: hidden;
}
#parent-container {
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
#child-container {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px; /* exact value is given through JavaScript */
overflow: auto;
scroll-snap-type: both proximity;
}
header {
height: 100%;
background-color: grey;
background-attachment: fixed;
background-position: bottom center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
scroll-snap-align: center;
}
header h1 {
font-size: 32px;
font-weight: bold;
position: sticky;
top: 5%;
margin-bottom:10px;
}
header p {
position: sticky;
width: 450px;
text-align: center;
margin: auto;
margin-top: 100px;
font-size: 1.5em;
}
header .scroll-down-arrow {
position: absolute;
left: 50%;
bottom: 20px;
display: block;
text-align: center;
font-size: 20px;
z-index: 100;
text-decoration: none;
text-shadow: 0;
width: 30px;
height: 30px;
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
left: 50%;
transform: translate(-50%, 0%) rotate(45deg);
animation: fade_move_down 3s ease-in-out infinite;
cursor: pointer;
}
/*animated scroll arrow animation*/
#keyframes fade_move_down {
0% { transform:translate(0,-15px) rotate(45deg); opacity: 0; }
25% {opacity: 1;}
/* 50% { opacity: 1; } */
100% { transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
.container_page_2 {
width: 100%;
height: 100vh;
scroll-snap-align: center;
overflow: hidden;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="parent-container">
<div id="child-container">
<!-- #header -->
<header>
<div class="nav-container">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<h1 id="sticky-title">Lorem ipsum</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi debitis in libero tenetur suscipit iusto eum nulla dolorum aperiam adipisci unde veritatis vel iure, a nam, saepe exercitationem illum vitae.</p>
<div class="scroll-down-arrow"></div>
</header>
<!-- #page2 -->
<div id="page2" class="container_page_2">
<div class="column active">
<div class="content">
<h1>1</h1>
<div class="box">
<h2>background-attachment: fixed;</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore necessitatibus possimus fuga voluptate incidunt enim eius sed, ad suscipit error quasi ex blanditiis ipsa, at vero officiis voluptatem a modi!
</p>
</div>
</div>
<div class="bg bg1"></div>
</div>
<div class="column">
<div class="content">
<h1>2</h1>
<div class="box">
<h2>background-attachment: scroll;</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore necessitatibus possimus fuga voluptate incidunt enim eius sed, ad suscipit error quasi ex blanditiis ipsa, at vero officiis voluptatem a modi!
</p>
</div>
</div>
<div class="bg bg2"></div>
</div>
<div class="column">
<div class="content">
<h1>3</h1>
<div class="box">
<h2>background-attachment: scroll;</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore necessitatibus possimus fuga voluptate incidunt enim eius sed, ad suscipit error quasi ex blanditiis ipsa, at vero officiis voluptatem a modi!
</p>
</div>
</div>
<div class="bg bg3"></div>
</div>
<div class="column">
<div class="content">
<h1>4</h1>
<div class="box">
<h2>background-attachment: fixed;</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore necessitatibus possimus fuga voluptate incidunt enim eius sed, ad suscipit error quasi ex blanditiis ipsa, at vero officiis voluptatem a modi!
</p>
</div>
</div>
<div class="bg bg4"></div>
</div>
</div>
https://codepen.io/bleah1/pen/gjYBgQ
I haven't added all the elements from the second page, but it doesn't matter, because the scrolling isn't affected. As you can see it's not smooth at all, it's actually pretty snappy.
What do you think ? I would like to keep the scroll-snap, because I like that idea.

Hi can you try this solution.
Basically I removed the css when click event starts then added it when the scrollTop event ends.
Remember to remove it from your css #child-container
$(".scroll-down-arrow").click(function() {
$('#child-container').css('scroll-snap-type','')
$('html,body,#child-container').animate({
scrollTop: $("#page2").offset().top}, 'slow', 'linear')
.promise()
.done(() => {$('#child-container')
.css('scroll-snap-type','both proximity')
});
});

Based on #Ekin Alcar answer I was able to fix my issue. I followed his idea of removing the scroll-snap-type css attribute from #child-container by using $('#child-container').css('scroll-snap-type',''); inside of the original script, like this:
$(".scroll-down-arrow-container").click(function() {
$('#child-container').css('scroll-snap-type','');
$('html, body, #child-container').animate({
scrollTop: $(window).height()
}, 1000)
.promise()
.done(() => {$('#child-container')
.css('scroll-snap-type','both proximity')
});
});
The trick with .css is that it can only remove attributes that are used in the style tag inside a .html file. It won't work with a .css stylesheet.
From the API's documentation:
It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or < style > element.
As such scroll-snap-type: both proximity; was removed from the .css file and added in the .html file:
<div id="child-container" style="scroll-snap-type: both proximity;">
Also, to fix the effect of scrolling up or down whenever you're in between pages I've replaced scrollTop: $("#page2").offset().top with scrollTop: $(window).height(). Don't ask me why it works, but it does.

Margin Shifting: <ul> jitters when hover function initiated.

This is just a theory based question. I am fairly new to programming and was wondering why this happens within HTML.
I'm making an HTML based resume where when I have a mouse pointer hover over my ul it will activate a function such as this.
$("li#about").hover(function(){
$("#content1").toggle();
});
The Issue While hovering over my selector when my #content was no longer hidden, my margins between my header and ul box would cause jittering within the page.
I went from:
<header>
<h1>Ryan Anderson</h1>
<h3>Developer</h3>
</header>
<body>
<div class="clearfix">
<div class="column">
<ul>
<li id="about"> <span>About Me</span> </li>
<li id='education'> <span>Education</span></li>
<li id='info'> <span>Experience</span></li>
<li id='ref'> <span>References</span></li>
</ul>
<div class="clr"></div>
</div>
to:
<header>
<h1>Ryan Anderson</h1>
<h3>Developer</h3>
<body>
<div class="clearfix">
<div class="column">
<ul>
<li id="about"> <span>About Me</span> </li>
<li id='education'> <span>Education</span></li>
<li id='info'> <span>Experience</span></li>
<li id='ref'> <span>References</span></li>
</ul>
<div class="clr"></div>
</div>
</header>
My questions:
What was the reason for the sporadic jittering and how did wrapping my ul within the header tag prevent this from occurring?
Is my solution proper etiquette? If not, what would you recommend?
If you have any good recommendations for coding etiquette please post links in comments.
sing-song Being new, I know my code must look like poo. Regardless I added a fiddle for you.
Thanks for the read! I apologize in advance for the ugly code. I posted a JSFiddle as well, figured it would help any other newbies to conceptualize what i'm asking. This fiddle is without correction Just change the closing header tag to where I specified above to see the results.
My Fiddle: https://jsfiddle.net/dgibbins1/cwn6ws02/4/
header{
background: #5a4c1c;
border-radius:10px;
opacity:0.85;
padding:1px 0;
}
h1{
margin: 0 0;
color: white;
padding-left:10px;
}
h3{
color:#dad6c7;
padding-left: 31px;
}
body{
background:#dad6c7;
}
ul{
list-style-type:none;
padding: 0px 15px;
margin: 50px 0;
}
span{
color:white;
}
li{
font-family:Helvetica;
}
div.column{
border-style:solid;
border-color:rgba(56,43,3,1);
}
#content1, #content2,#content3,#content4{
opacity:1;
display: none;
padding: 3px auto;
}
.clear-fix{
}
.column li{
padding:4px 0 4px 0;
margin-top:30px;
margin-bottom:30px;
font-family:'Oswald', sans-serif;
text-align: center;
font-size: 20px;
overflow: hidden;
}
.clr{
clear:both;
font-size:0;
}
.column{
float:left;
background-size: 220px 220px;
background:#5a4c1c;
padding: 5px 2px;
margin: 10px 10px 0 0;
opacity:0.5;
width: 15%;
border-radius:20px;
}
.column li:hover{
background: black;
border-radius:20px;
}
.content{
color:#5a4c1c;
font-weight: bold;
font-family: helvetica;
width:85%;
}
.footer{
text-align: center;
background:#5a4c1c;
color: white;
padding: 10px 0;
opacity: 0.5;
margin-top: 30%;
border-radius:10px;
}
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="/normalize.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<title> Resume: Ryan Anderson</title>
</head>
<header>
<h1>Ryan Anderson</h1>
<h3>Developer</h3>
</header>
<body>
<div class="clearfix">
<div class="column">
<ul>
<li id="about"> <span>About Me</span> </li>
<li id='education'> <span>Education</span></li>
<li id='info'> <span>Experience</span></li>
<li id='ref'> <span>References</span></li>
</ul>
<div class="clr"></div>
</div>
<div id="content1" class="content show-description">
<p>About me <br />
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
</p>
</div>
<div id="content2" class="content" >
<p>Education <br />
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
</p>
</div>
<div id="content3" class="content">
<p>Experience <br />
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
</p>
</div>
<div id="content4" class="content">
<p>References <br />
Paul Garven (co-worker): (780)-828-1111<br />
Paul CWC (owner of CWWC): (416)- 721-1111<br />
Someone at Bitmaker: (416-967-11-11
</p>
</div>
</div>
<div class="footer">
<p>Contact <br/>
<small>mobile: (647)-333-8723 <br/>
e-mail: hotmail#gmail.com</small>
</p>
</div>
<script>
$("li#about").hover(function(){
$("#content1").toggle();
});
$("li#education").hover(function() {
$("#content2").toggle();
});
$("li#info").hover(function() {
$("#content3").toggle();
});
$("li#ref").hover(function() {
$("#content4").toggle();
});
</script>
</body>

You have an error in your CSS.
#content1, #content2,#content3,#content4{
opacity:1;
display: none;
padding: 3px auto; <--
}
padding doesn't take the value auto.
Switch it to padding-top:3px; padding-bottom:3px; and the jittering will stop.
Link: Working proof

you have some issues with your markup
some of your nesting is applied incorrectly.
in fact i am not even sure i found all the errors
some of your css is incorrect as well
$("li#about").hover(function() {
$("#content1").toggle();
});
$("li#education").hover(function() {
$("#content2").toggle();
});
$("li#info").hover(function() {
$("#content3").toggle();
});
$("li#ref").hover(function() {
$("#content4").toggle();})
header {
background: #5a4c1c;
border-radius: 10px;
opacity: 0.85;
padding: 1px 0;
}
.minheight {
min-height: 200px;
}
h1 {
margin: 0 0;
color: white;
padding-left: 10px;
}
h3 {
color: #dad6c7;
padding-left: 31px;
}
body {
background: #dad6c7;
}
ul {
list-style-type: none;
padding: 0px 15px;
margin: 50px 0;
}
span {
color: white;
}
li {
font-family: Helvetica;
}
div.column {
border-style: solid;
border-color: rgba(56, 43, 3, 1);
}
#content1,
#content2,
#content3,
#content4 {
opacity: 1;
display: none;
padding: 3px auto;
}
.clear-fix {
}
.column li {
padding: 4px 0 4px 0;
margin-top: 30px;
margin-bottom: 30px;
font-family: 'Oswald', sans-serif;
text-align: center;
font-size: 20px;
overflow: hidden;
}
.clr {
clear: both;
font-size: 0;
}
.column {
float: left;
background-size: 220px 220px;
background: #5a4c1c;
padding: 5px 2px;
margin: 10px 10px 10px 0;
opacity: 0.5;
width: 20%;
min-width:134px;
border-radius: 20px;
}
.column li:hover{
background: black;
border-radius: 20px;
}
.content {
color: #5a4c1c;
font-weight: bold;
font-family: helvetica;
width: 85%;
}
.footer {
text-align: center;
background: #5a4c1c;
color: white;
padding: 10px 0;
opacity: 0.5;
margin-top: 30%;
border-radius: 10px;
clear:both;
}
<link href="//normalize-css.googlecode.com/svn/trunk/normalize.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h1>Ryan Anderson</h1>
<h3>Developer</h3>
<div class="clearfix">
<div class="column">
<ul>
<li id="about"> <span>About Me</span>
</li>
<li id='education'> <span>Education</span>
</li>
<li id='info'> <span>Experience</span>
</li>
<li id='ref'> <span>References</span>
</li>
</ul>
<div class="clr"></div>
</div>
<div id="content1" class="content show-description">
<p>About me
<br />
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
</p>
</div>
<div id="content2" class="content">
<p>Education
<br />
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
</p>
</div>
<div id="content3" class="content">
<p>Experience
<br />
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</small>
</p>
</div>
<div id="content4" class="content">
<p>References
<br />Paul Garven (co-worker): (780)-828-1111
<br />Paul CWC (owner of CWWC): (416)- 721-1111
<br />Someone at Bitmaker: (416-967-11-11
</p>
</div>
</div>
<div class="footer">
<p>Contact
<br/>
<small>mobile: (647)-333-8723 <br/>
e-mail: hotmail#gmail.com</small>
</p>
</div>
</body>

Align an inline div right within a text paragraph

I have a div containing text of variable lengths
<div id="paragraph">
blah blah blah <em>Something Important</em> more blah
</div>
I want to dynamically append another <div id="buttons"> that contains two buttons to the above, and this <div id="buttons"> should always align right and appear inline within the containing <div id="paragraph">. For example, it could look like
This is a paragraph, and part of it are two buttons that should always align right at the end. [button1][button2]
How do I do the appending <div id="buttons"> part in JavaScript or JQuery?

you can do it that way, HTML:
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit atque quae officiis deserunt ea quis dolorum laudantium repudiandae suscipit eligendi consequatur amet optio fugit doloribus qui beatae officia laborum cumque!
Button 1
Button 2
</p>
and CSS:
p {
text-align: left;
}
.btn {
display: inline-block;
text-align: right;
padding: 0 5px;
background: #b30;
color: #fff;
float: right;
}

In html add a container for both your first div and your appended div (I also added a link to append the button):
append
<div id='container'>
<div id='paragraph'>
Lorem ipsum dolor sit amet,tofficia laborum cumqu
</div>
</div>
CSS should be very similar to what the previous answer said:
#paragraph {
text-align: left;
float:left;
}
.newDiv{
display: inline-block;
text-align: right;
padding: 0 5px;
float: right;
}
.btn {
background: #b30;
color: #fff;}
and the jQuery needed to append:
function appendBtn(){
var myDivs = '<div class="newDiv">Button1</div>';
$('#container').append(myDivs);
}
EDIT: I forgot, here's a fiddle: http://jsfiddle.net/Bpdkx/27/

Categories