I am trying to do a text based description reveal with jQuery. I have a line of images and I would like when you click on an image that they push apart and the description gets revealed.
I have managed to do this to a point in the fiddle below, but the image does not push out it snaps out then the text animates across. I was hoping it would look more like it is pushing the image across and the text is coming out smoother.
$( ".img img" ).on( "click", function() {
$('.desc').css('display','none');
var bio_box = $(this).parent(".img").next(".desc");
$(bio_box).toggle('slide', {
direction: 'right'
}, 2000);
});
$(".img img").on("click", function() {
var bio_box = $(this).parent(".img").next(".desc");
console.log(bio_box);
$(bio_box).toggle('slide', {
direction: 'right'
}, 4000);
});
.outer {
display: flex;
justify-content: end;
}
.img {
flex: 0 0 15%;
cursor: pointer;
}
.img img {
width: 100%;
}
.desc {
border: solid 1px #000;
flex: 0 0 35%;
cursor: pointer;
display: none;
padding: 25px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<div class="outer">
<div class="img">
<img src="https://via.placeholder.com/640x400">
</div>
<div class="desc">
Desc 1 ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet felis viverra urna sollicitudin lobortis at varius eros. Quisque sit amet sollicitudin nulla. Ut aliquet interdum neque id vehicula. Orci varius natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Vivamus aliquam, est sit amet vehicula tristique, erat magna placerat felis, vel maximus neque lacus at magna.
</div>
<div class="img">
<img src="https://via.placeholder.com/640x400">
</div>
<div class="desc">
Desc 2 ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet felis viverra urna sollicitudin lobortis at varius eros. Quisque sit amet sollicitudin nulla. Ut aliquet interdum neque id vehicula. Orci varius natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Vivamus aliquam, est sit amet vehicula tristique, erat magna placerat felis, vel maximus neque lacus at magna.
</div>
<div class="img">
<img src="https://via.placeholder.com/640x400">
</div>
<div class="desc">
Desc 3 ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet felis viverra urna sollicitudin lobortis at varius eros. Quisque sit amet sollicitudin nulla. Ut aliquet interdum neque id vehicula. Orci varius natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Vivamus aliquam, est sit amet vehicula tristique, erat magna placerat felis, vel maximus neque lacus at magna.
</div>
</div>
Ideally if you click the second image, that images pushes out to the left and reveals the text smoothly. (Not snaps over and then the text slides out so there is a gap while the transition completes)
Related
I'm trying to solve a problem in which I need a background image to stay in place when the address bar and the content below scroll upwards.
The image takes up 90% of the view height,I've used JS to stop this resizing and jumping when the address bar hides, but the image will still move upwards with the body of my site when the address bar hides.
I'm aiming to have the image fixed in place no matter what, so that as you begin scrolling, the content near the bottom of the screen and the address bar scroll up simulatneously, and the image remains in the same spot. It's simple enough until the viewport starts changing!
Preventing the address bar from hiding isn't an option.
Here's a representation of what I'm trying to achieve, featuring my dog
Dog stays still when content scrolls and address bar hides = good girl
HTML
<body>
<img class="dog" src="..."/>
<div class="content">
<p>Some stuff</p>
</div>
</body>
CSS
.dog {
position: fixed;
left: 50%;
}
.content {
position: relative;
}
I'm thinking maybe I could position the image relative to the bottom of the view port and have it overflowing under the address bar but im not really sure how to achieve this. I'm going to continue attempting this now but it will take me a long time to figure out so if anyone can give me some pointers or if there's another approach to this I'd really appreciate hearing it!
Thank you
Consider making the div that contains all the content that you want and set its background to the image that you want. Then set the content that you want inside that div and align it at the bottom.
Use position: sticky;, works in most browsers
.sticky-header {
position: sticky;
top: 0px;
}
.sticky-header img {
width: 100%;
}
<div class='sticky-header'>
<img src = 'https://via.placeholder.com/500x100'>
</div>
<h1>Lorem ipsum dolor sit amet consectetuer adipiscing elit
</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa
<strong>strong</strong>. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet
nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede <a class="external ext" href="#">link</a> mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate
eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies
nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>
<h1>Lorem ipsum dolor sit amet consectetuer adipiscing elit
</h1>
<h2>Aenean commodo ligula eget dolor aenean massa</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem.</p>
<h2>Aenean commodo ligula eget dolor aenean massa</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem.</p>
<ul>
<li>Lorem ipsum dolor sit amet consectetuer.</li>
<li>Aenean commodo ligula eget dolor.</li>
<li>Aenean massa cum sociis natoque penatibus.</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem.</p>
I want to make a button that increases the font size by a specific number of pixels or any other unit.
I tried this: ---.style.fontSize += "5px" but it didnt work. What is the correct way?
<html id="html">
<h1>Lorem ispum</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a</p>
<button onclick="document.getElementById('html').style.fontSize += '5px'">Bigger Size</button>
</html>
Please no Jquery. Thanks
You need to:
Find the current font size which you can get using getComputedStyle,
Getting the numeric value of font size,
Doing your arithmetic with it and then assigning it back to element's font size
Example:
const button = document.getElementById('resizeButton');
const element = document.getElementById('html');
const sizeExpression = /([\d.]+)(.*)/;
button.addEventListener('click', () => {
const style = getComputedStyle(element);
const [size, value, unit] = sizeExpression.exec(style.fontSize);
element.style.fontSize = `${parseFloat(value) + 5}${unit}`
});
<html id="html">
<h1>Lorem ispum</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a</p>
<button id="resizeButton">Bigger Size</button>
</html>
When calling draggable on a parent div, I am no longer able to scroll the child div on mobile devices. When the child div is touched, I would like the div to be scrolled, but let the parent remain undragged.
$(function() {
$('.table').draggable()
});
.table
{
width:200px;
height:200px;
border: 1px solid black;
border-radius: 15px;
overflow:hidden;
}
.table-lower
{
overflow-y:auto;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="table">
<p>TABLE NAME</p>
<div class="table-lower">
<p>This is the part that I want scrollable on mobile; dont' trigger draggable here on touch</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt iaculis aliquam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec scelerisque imperdiet ullamcorper. Etiam sit amet ornare leo, malesuada elementum nibh. Nulla in malesuada est, nec accumsan lorem. Vivamus eget sodales sapien. Donec non nibh nisl. Aenean vitae ipsum eu tortor ultrices vulputate. Suspendisse commodo pretium metus, non lacinia metus ultricies at. Duis ut euismod tortor, in feugiat metus. Nullam condimentum nisl nisi, sit amet dictum metus mollis quis. Phasellus et lectus a lacus ornare convallis.</p>
</div>
</div>
You can assign a class to the title p element and use it has a handle. This will ensure that the drags can happen from the title element, and not from every child of the .table element.
Working demo:
$(function() {
$('.table').draggable({
handle: 'p.handle'
})
});
.table {
width: 200px;
height: 200px;
border: 1px solid black;
border-radius: 15px;
overflow: hidden;
}
.table-lower {
overflow-y: auto;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="table">
<p class="handle">TABLE NAME</p>
<div class="table-lower">
<p>This is the part that I want scrollable on mobile; dont' trigger draggable here on touch</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt iaculis aliquam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec scelerisque imperdiet ullamcorper. Etiam sit amet ornare leo, malesuada
elementum nibh. Nulla in malesuada est, nec accumsan lorem. Vivamus eget sodales sapien. Donec non nibh nisl. Aenean vitae ipsum eu tortor ultrices vulputate. Suspendisse commodo pretium metus, non lacinia metus ultricies at. Duis ut euismod tortor,
in feugiat metus. Nullam condimentum nisl nisi, sit amet dictum metus mollis quis. Phasellus et lectus a lacus ornare convallis.</p>
</div>
</div>
I want my previous and next buttons to hide the current card and display the next one if next is clicked and hide the current one and show the previous one when previous is clicked. obvious stuff. i have looked at a lot of similar questions but the answers are all in jquery and i'm quite clueless about it as of now. i want to do this using javascript css and html only.
HTML :
<div class="cardContainer">
<div class="questionCard active" id="q1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at varius sem. Morbi congue sit amet elit eu suscipit. Aliquam tristique leo at lacinia dapibus. Aliquam faucibus sapien sit amet odio aliquam, sed vestibulum eros porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed dictum lobortis diam, ac pellentesque arcu sagittis eu. Mauris sit amet diam cursus, aliquam justo sed, ornare tellus. In id nibh lacinia, viverra felis ut, venenatis sem. Donec vel tortor dignissim, convallis arcu nec, bibendum urna.
</div>
<div class="questionCard" id="q2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at varius sem. Morbi congue sit amet elit eu suscipit. Aliquam tristique leo at lacinia dapibus. Aliquam faucibus sapien sit amet odio aliquam, sed vestibulum eros porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed dictum lobortis diam, ac pellentesque arcu sagittis eu. Mauris sit amet diam cursus, aliquam justo sed, ornare tellus. In id nibh lacinia, viverra felis ut, venenatis sem. Donec vel tortor dignissim, convallis arcu nec, bibendum urna.
</div>
<div class="questionCard" id="q3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at varius sem. Morbi congue sit amet elit eu suscipit. Aliquam tristique leo at lacinia dapibus. Aliquam faucibus sapien sit amet odio aliquam, sed vestibulum eros porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed dictum lobortis diam, ac pellentesque arcu sagittis eu. Mauris sit amet diam cursus, aliquam justo sed, ornare tellus. In id nibh lacinia, viverra felis ut, venenatis sem. Donec vel tortor dignissim, convallis arcu nec, bibendum urna.
</div>
<div class="navCard">
<img src="img/back.png" value="prev">
<img src="img/forward.png" value="nxt">
</div>
</div><!--end of card container-->
CSS :
.cardContainer {
position: relative;
top: 400px;
background-color: #333;
height: 100%;
box-shadow: -1px -1px 7px black;
}
.active {
display: block;
}
.questionCard {
min-width: 50%;
max-width: 60%;
margin: 0 auto;
margin-top: 20px;
top: -300px;
padding: 20px;
background-color: #1b6bb9;
color: white;
border-radius: 2px;
position: inherit;
border-color: #1167bc;
box-shadow: 1px 1px 7px black;
border: rgba(128, 128, 128, 0.35);
z-index: 1;
display: none;
}
.navCard {
max-width: 400px;
min-width: 60px;
margin: 0 auto;
border-color: #1b6bb9;
z-index: 1;
padding: 20px;
background-color: white;
border-radius: 2px;
box-shadow: 1px 1px 7px;
border: rgba(128, 128, 128, 0.35);
position: inherit;
top: -270px;
background-color: #1b6bb9;
align-content: center;
}
JS :
var qlist = document.getElementsByClassName("questionCard");
var i=1;
function previous () {
qlist[i].style.display = 'none';
qlist[i-1].style.display = 'block';
i--
}
function next () {
qlist[i].style.display = 'block';
qlist[i-1].style.display = 'none';
i++
}
OK, now that I understand you are having trouble handling errors lets work on that. To handle things not getting an error on the ends you just need to watch for those cases. Here is a very quick example.
Fiddle: https://jsfiddle.net/6karx4v0/1/
HTML: (I changed the ids to start at zero since it makes things easier when they are zero based)
<div class="cardContainer">
<div class="questionCard active" id="q0">
q0
</div>
<div class="questionCard" id="q1">
q1
</div>
<div class="questionCard" id="q2">
q2
</div>
<div class="questionCard" id="q3">
q3
</div>
<div class="navCard">
prev
next
</div>
</div>
JS:
// Find all question cards
var qlist = document.getElementsByClassName("questionCard");
// Track current index
var i = 0;
// Track length of questions
var length = list.length;
function previous () {
// If i is 0 we are back at start so don't do anything
if (i == 0) {
alert('done');
return;
}
// Since we add at end of next we subtract at start of pre
i--
// Hide current
qlist[i].style.display = 'none';
// If i is 0 don't display previous since it doesn't exist
if (i != 0) {
qlist[i - 1].style.display = 'block';
}
}
function next () {
// If i is length we are at end so don't do anything
if (i == length) {
alert('done');
return;
}
// Show current
qlist[i].style.display = 'block';
// if i is 0 don't try to hide previous since it doesn't exist
if (i != 0) {
qlist[i-1].style.display = 'none';
}
// Add one to i
i++
}
Let me know if comments make sense or feel free to ask more.
I have a Wordpress Site with multiple floating div`s. behind every div is a slideToggle that open some more content.
My problem is now, that all div`s should stay in position and only the opened should expand.
Now the divs switch position and all others in a row grow bigger.
html
<div>
<div class="span4">
<div class="event_head">
<div><h2>A Title</h2></div>
</div>
<div class="event_body">
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
</div>
</div><!-- ende .span4 -->
<div class="span4">
<div class="event_head">
<div><h2>A Title</h2></div>
</div>
<div class="event_body">
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
</div>
</div><!-- ende .span4 -->
<div class="span4">
<div class="event_head">
<div><h2>A Title</h2></div>
</div>
<div class="event_body">
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
</div>
</div><!-- ende .span4 -->
<div class="span4">
<div class="event_head">
<div><h2>A Title</h2></div>
</div>
<div class="event_body">
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
</div>
</div><!-- ende .span4 -->
</div>
css
.span4 {
float:left;
margin-right: 2%;
width: 32%;
margin-bottom: 40px;
}
.span4{width: 32%;}
.span4:nth-child(3n) {margin-right: 0;}
js
$(document).ready(function(){
//hide the all of the element with class msg_body
jQuery(".event_body").hide();
//toggle the componenet with class msg_body
jQuery(".event_head").click(function(){
jQuery(this).next(".event_body").slideToggle();
});
});
Here is a Fiddle of what i have so far.
fiddle
And here is an image of what i want.
http://www.rhodesign.ch/slidetoggle.jpg
You need to create 3 cols in order to format your content.
<div class="col">
<!-- your content for this col -->
</div>
<div class="col">
<!-- your content for this col -->
</div>
<div class="col">
<!-- your content for this col -->
</div>
I also cleaned your html ; you were creating way to many useless divs.
Check this fiddle.
One solution is to use opacity:0 instead of jQuery(".event_body").hide();
css
.event_body{opacity: 0;}
and then in js:
jQuery(".event_head").click(function(){
if($(this).next().css("opacity") == "0"){
jQuery(this).next(".event_body").animate({
opacity: 1
}, 2000);
}
else{
jQuery(this).next(".event_body").animate({
opacity: 0
}, 1000);
}
});
fiddle