I'm in highschool and just starting to learn HTML, CSS, and JQuery. I know how to make the individual items on my list slide into view, but I'm not sure how to make them slide back up and disappear once the items are clicked a second time. Here's my code so far:
.drop {
width:200px;
background-color:#000;
padding:5px;
}
.drop > p {
color:white;
text-align:center;
}
.slide {
display:none;
width:180px;
background-color:#fff;
padding:5px;
margin:auto;
}
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div class="drop inactive">
<p>00/00/00</p>
<div class="slide article-preview">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at nulla sed nisi tempus fringilla. Duis lorem eros, pharetra vel luctus at, gravida vel nisi. Aliquam tincidunt diam nec quam blandit elementum. Nunc imperdiet risus non interdum vestibulum. Aenean tempus, turpis sit amet laoreet suscipit, nunc erat elementum metus, sed tincidunt ipsum nisl eu dui. Integer erat turpis, posuere vel sapien quis, cursus molestie ante. Morbi maximus odio nec odio pulvinar, vel porta quam maximus.
<a href=#>Read more...</a>
</div>
</div>
<div class="drop inactive">
<p>00/00/00</p>
<div class="slide article-preview">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at nulla sed nisi tempus fringilla. Duis lorem eros, pharetra vel luctus at, gravida vel nisi. Aliquam tincidunt diam nec quam blandit elementum. Nunc imperdiet risus non interdum vestibulum. Aenean tempus, turpis sit amet laoreet suscipit, nunc erat elementum metus, sed tincidunt ipsum nisl eu dui. Integer erat turpis, posuere vel sapien quis, cursus molestie ante. Morbi maximus odio nec odio pulvinar, vel porta quam maximus.
<a href=#>Read more...</a>
</div>
</div>
<div class="drop inactive">
<p>00/00/00</p>
<div class="slide article-preview">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at nulla sed nisi tempus fringilla. Duis lorem eros, pharetra vel luctus at, gravida vel nisi. Aliquam tincidunt diam nec quam blandit elementum. Nunc imperdiet risus non interdum vestibulum. Aenean tempus, turpis sit amet laoreet suscipit, nunc erat elementum metus, sed tincidunt ipsum nisl eu dui. Integer erat turpis, posuere vel sapien quis, cursus molestie ante. Morbi maximus odio nec odio pulvinar, vel porta quam maximus.
<a href=#>Read more...</a>
</div>
</div>
<script type="text/javascript">
$(".inactive").click(function(){
$(".slide").slideUp('slow');
$(this).children().slideDown("slow");
});
</script>
</body>
</html>
Heres a fiddle with different toggle options. It uses the slideToggle function in jquery to show/hide the specified element. setting a number instead of the string "slow" like (700) runs the slide function over 700 milliseconds:
$(this).find(".slide").slideToggle("slow");
http://jsfiddle.net/agbb7n61/1/
Related
Obv
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/scripts.js"></script>
I have a link that point to a section down the page
<a id="seemore" class="seemore" href="#down">SEE MORE</a>
the css for the div that i want to fade in while moving to it
#down {
margin-top: 100%;
justify-content: center;
visibility: hidden;
}
but my script doesnt work :(
$("#seemore").click(function(){
$("#seemore").fadeOut("fast");
$("#down").fadeIn("slow");
});
Building this site in local
I this one is your looking for?
$(document).ready(function(){
$("#seemore").click(function(){
$("#seemore").fadeOut("fast");
$("#down").fadeIn("slow");
});
});
#down {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="seemore" class="seemore" href="#down">SEE MORE</a>
<p id="down" >Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
If you need the object to fadeIn, you have to start your object hidden using display: none.
You can check this example:
$("#show-more").click(function(e) {
e.preventDefault();
$("#show-more").hide();
$("#more").fadeIn();
});
#more {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Article title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta nec urna ut molestie. Nullam consequat augue vel orci finibus sodales. Curabitur in augue vel metus sagittis efficitur in non diam. Ut volutpat porttitor velit, vitae dignissim odio tempus et. Aliquam sodales dolor sit amet pharetra hendrerit. Vivamus ullamcorper placerat mauris eget fringilla. Mauris id lectus lobortis, pharetra nibh at, condimentum sapien. Morbi suscipit tincidunt mauris, eu iaculis lacus scelerisque eget. In in sodales dui, eget mollis est. Sed in mauris ut neque blandit hendrerit.</p>
<p id="more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta nec urna ut molestie. Nullam consequat augue vel orci finibus sodales. Curabitur in augue vel metus sagittis efficitur in non diam. Ut volutpat porttitor velit, vitae dignissim odio tempus et. Aliquam sodales dolor sit amet pharetra hendrerit. Vivamus ullamcorper placerat mauris eget fringilla. Mauris id lectus lobortis, pharetra nibh at, condimentum sapien. Morbi suscipit tincidunt mauris, eu iaculis lacus scelerisque eget. In in sodales dui, eget mollis est. Sed in mauris ut neque blandit hendrerit.</p>
<a id="show-more" href="#">Show more</a>
After click the "Click" button
From the above images, you can see that the box is cropped after click. I want the Liquid Slider auto expand when I click the button to add the height of the box.
Understand that this slider come with the auto height function that detect the height of the content. But it doesn't work if I added $(".bxspace1").animate({height: "+=15"});
I refer the code from Liquid Slider, you can check here. Hoping that some of you could provide me with some advice. Thanks!
$('#slider-id').liquidSlider({
hoverArrows: false,
dynamicArrows: true,
});
function increaseFontSize1() {
$(".bxspace1").animate({height: "+=15"});
}
.ctnbox2 a{width: 196px; float:left; border:3px solid #75b653; margin: 0 6px; background-color:#fff; color: #75b653; }
.bxspace1{height: 200px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Responsive-jQuery-Content-slider-with-HTML5-Liquid%20Slider/js/jquery.liquid-slider.min.js"></script>
<link href="https://www.jqueryscript.net/demo/Responsive-jQuery-Content-slider-with-HTML5-Liquid%20Slider/css/liquid-slider.css" rel="stylesheet"/>
Click
<div class="liquid-slider" id="slider-id">
<div>
<h2 class="title">Panel 1</h2>
<div class="ctnbox2">
<a href="#">
<div class="bxspace1">
<div class="tiwbckg">
<div class="floatleft condo"></div>
<div class="floatleft">
<h2 class="maintitle1"><main_content>Condominium</main_content><br/><br/></h2>
</div>
<div class="clear"></div>
</div>
<div class="boxtxt1">
<div class="boxtitle"><main_content>Sed Congue Egestas</main_content></div>
<p><main_content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec augue a lorem iaculis vehicula.</main_content></p>
</div>
</div>
</a>
</div>
</div>
<div>
<h2 class="title">Panel 2</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
</div>
<div>
<h2 class="title">Panel 3</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div>
<h2 class="title">Panel 4</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
</div>
<br/><br/>
So easy but I never realized, just use the same method and apply it to class="liquid-slider".
$('.liquid-slider').animate({height: "+=10"});
We are using a dropdown plugin, which is hiding original dropdown and painting an input text element below the original element. And the options are being painted from an unordered list(which are appended to body) with position as absolute.
This is working fine. But when the select/input element is painted inside an internal scrollable div and when we scroll the internal div, the position of list is not getting changed(It is not sticking to text box). But, when we scroll with external scrollbar, position of list is moving as expected(sticking to text box).
Please provide your inputs to solve this.
PFA sample HTML at
https://plnkr.co/edit/PsVIOrVeMILsfSBUAlfW?p=preview
#scrollable {
max-height:200px;
overflow:scroll;
}
input{
width:200px;
}
ul {
background:lightgrey;
border:1px solid black;
width:160px;
position:absolute;
top:13px;
left:185px;
}
<div id="scrollable">
This is scrollable conatiner
<input type="text" name="textbox"/>
<br>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed est mauris,<br>ut massa eget ligula vestibulum sodales. In lacinia scelerisque mollis. Nulla semper quam quis justo hendrerit, at faucibus turpis lobortis. Ut enim est, por.</p>
</div>
<ul><li>First</li><li>Second</li><li>Third</li></ul>
Add position:relative on the container
#scrollable{
position:relative;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
body{
max-height:300px;
overflow:scroll;
}
#scrollable{
max-height:200px;
overflow:scroll;
position:relative;
}
input{
width:200px;
}
ul{
background:lightgrey;
border:1px solid black;
width:160px;
position:absolute;
top:5px;
left:245px;
}
li{
list-style-type:none;
text-align:left;
}
</style>
</head>
<body>
<div id="scrollable">
<center>
This is scrollable conatiner
<input type="text" name="textbox"/>
<br>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed est mauris,<br> vestibulum ut diam aliquet, volutpat pellentesque o
rci. Quisque consequat posuere est, vel commodo mi consequat consequat. Cras bibendum eros in dolor finibus egestas. Morbi tempor odio dignissim, pellentesque odio ut, vestibulum nulla. Sed ut massa eget ligula vestibulum sodales. In lacinia scelerisque mollis. Nulla semper quam quis justo hendrerit, at faucibus turpis lobortis. Ut enim est, porttitor at nunc ac, consectetur fringilla lacus. Nunc euismod sapien et ligula condimentum, eu pharetra velit molestie.</p>
<ul><li>First</li><li>Second</li><li>Third</li></ul>
</center>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed est mauris, vestibulum ut diam aliquet, volutpat pellentesque o
rci. Quisque Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed est mauris, vestibulum ut diam aliquet, volutpat pellentesque o
rci. Quisque consequat posuere est, vel cLorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed est mauris, vestibulum ut diam aliquet, volutpat pellentesque o
rci. Quisque consequat posuere est, vel commodo mi consequat consequat. Cras bibendum eros in dolor finibus egestas. Morbi tempor odio dignissim, pellentesque odio ut, vestibulum nulla. Sed ut massa eget ligula vestibulum sodales. In lacinia scelerisque mollis. Nulla semper quam quis justo hendrerit, at faucibus turpis lobortis. Ut enim est, porttitor at nunc ac, consectetur fringilla lacus. Nunc euismod sapien et ligula condimentum, eu pharetra velit molestie.</p>
ommodo mi consequat consequat. Cras bibendum eros in dolor finibus egestas. Morbi tempor odio dignissim, pellentesque odio ut, vestibulum nulla. Sed ut massa eget ligula vestibulum sodales. In lacinia scelerisque mollis. Nulla semper quam quis justo hendrerit, at faucibus turpis lobortis. Ut enim est, porttitor at nunc ac, consectetur fringilla lacus. Nunc euismod sapien et ligula condimentum, eu pharetra velit molestie.</p>
consequat posuere est, vel commodo mi consequat consequat. Cras bibendum eros in dolor finibus egestas. Morbi tempor odio dignissim, pellentesque odio ut, vestibulum nulla. Sed ut massa eget ligula vestibulum sodales. In lacinia scelerisque mollis. Nulla semper quam quis justo hendrerit, at faucibus turpis lobortis. Ut enim est, porttitor at nunc ac, consectetur fringilla lacus. Nunc euismod sapien et ligula condimentum, eu pharetra velit molestie.</p>
</p>
</body>
</html>
I'm just playing around with creating a website, excuse the messy code, quite new to this game.
Basically I'm trying to section a website with each sections content either going to the left or right, alternating.
As you can see I've managed to do the one to the left (Section2), however I can't seem to do the one on the right (Section3). The nav bar is also fixed but isn't showing on the JSFiddle. I'm also wondering why my text displays fine on my 1920x1080 monitor, but on my 1366x768 laptop, it overflows out of the div, bear in mind that the backgrounds of each section will be will eventually be an image, so I can't repeat it.
I've uploaded a JSFiddle as I was getting confused with what I had to do to upload code here, hope it is not a problem.
I appreciate your help, and again sorry for the incredible messy code!
<section id="screen1">
<div class="hLogo">Title</div>
<nav>
<ul>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
<li>
6
</li>
</ul>
<img class="ad" src="css/asc.jpg" />
</nav>
</section>
<section id="screen2">
<div class="content left nobg">
<div class="scrTitle">About</div>
<p class="scrContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros nisi, consequat sit amet sodales vitae, molestie eu elit. Nullam gravida laoreet nulla sit amet pretium. Vivamus nisi est, imperdiet a venenatis vel, porttitor vitae dui. Vivamus laoreet tortor in diam interdum, ac dapibus ante pretium. Vivamus gravida leo sit amet placerat lobortis. Sed odio arcu, tempus non gravida ut, egestas ut velit. Ut vitae enim fringilla, consequat massa quis, interdum sem. Donec vel sollicitudin urna. Suspendisse eget mi neque. Phasellus adipiscing nunc vitae nulla molestie tempor. Curabitur porttitor pretium augue, sit amet ornare metus.</p>
</div>
</section>
<section id="screen3">
<div class="content right nobg">
<div class="scrTitle">About</div>
<p class="scrContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros nisi, consequat sit amet sodales vitae, molestie eu elit. Nullam gravida laoreet nulla sit amet pretium. Vivamus nisi est, imperdiet a venenatis vel, porttitor vitae dui. Vivamus laoreet tortor in diam interdum, ac dapibus ante pretium. Vivamus gravida leo sit amet placerat lobortis. Sed odio arcu, tempus non gravida ut, egestas ut velit. Ut vitae enim fringilla, consequat massa quis, interdum sem. Donec vel sollicitudin urna. Suspendisse eget mi neque. Phasellus adipiscing nunc vitae nulla molestie tempor. Curabitur porttitor pretium augue, sit amet ornare metus.</p>
</div>
</section>
To fix your problem with section 3 not going to the right, You can just add this bit of code to your CSS:
.scrContent2 {
font-size: 75%;
overflow: hidden;
width: 20%;
float: right;
}
This means that your HTML will need changing for section 3 as follows:
<p class="scrContent2">
Here is a jsfiddle of this.. http://jsfiddle.net/jw5du15v/5/
Try like this: DEMO
CSS:
.right {
margin-right: 10%;
text-align:right;
float:right;
}
.left {
margin-left: 10%;
float: left;
text-align:left:
}
HTML:
<div class="content nobg">
<div class="scrTitle left">About</div>
<p class="scrContent right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros nisi, consequat sit amet sodales vitae, molestie eu elit. Nullam gravida laoreet nulla sit amet pretium. Vivamus nisi est, imperdiet a venenatis vel, porttitor vitae dui. Vivamus laoreet tortor in diam interdum, ac dapibus ante pretium. Vivamus gravida leo sit amet placerat lobortis. Sed odio arcu, tempus non gravida ut, egestas ut velit. Ut vitae enim fringilla, consequat massa quis, interdum sem. Donec vel sollicitudin urna. Suspendisse eget mi neque. Phasellus adipiscing nunc vitae nulla molestie tempor. Curabitur porttitor pretium augue, sit amet ornare metus.</p>
</div>
Use CSS to float your webpages to left and Right.
Try this
.content left nobg {
float:left;
}
.content right nobg {
float:right;
}
How to scroll myDiv in the below code. This code is scrolling down the full browser window's content. I need only a division layer to be scrolled down.
<html>
<head>
<script type="text/javascript">
function myScroll(val)
{
x = document.getElementById(val);
h= x.clientHeight;
self.scrollTo(0,h);
}
</script>
<style type="text/css">
<!--
#myDiv {
background-color: #999999;
overflow: auto;
height: 300px;
width: 400px;
}
-->
</style>
</head>
<body onLoad="myScroll("myDiv");">
<div id="myDiv">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
Donec tristique lectus sit amet est. Vivamus sit amet lacus. </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
Morbi convallis sem nec lectus. </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
Nullam in odio ac augue porttitor semper. </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
Nam leo. Morbi varius molestie felis. Etiam egestas. </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
Donec vitae mauris vitae nisi gravida pharetra. In molestie eros eu tellus. </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
Suspendisse a mi vitae nulla vehicula lacinia. </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
Ut pellentesque lobortis ipsum. Quisque a leo. Curabitur tincidunt. </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
Fusce est velit, condimentum sed, convallis in, blandit hendrerit, eros.</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
</p>
</div>
</body>
</html>
Try this code.
<html>
<head>
<script type="text/javascript">
function myScroll()
{
x = document.getElementById("myDiv");
h= x.clientHeight;
self.scrollTo(0,h);
}
</script>
</head>
<body onload="myScroll();">
<div id="myDiv">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
Donec tristique lectus sit amet est. Vivamus sit amet lacus. </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
Morbi convallis sem nec lectus. </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
Nullam in odio ac augue porttitor semper. </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
Nam leo. Morbi varius molestie felis. Etiam egestas. </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
Donec vitae mauris vitae nisi gravida pharetra. In molestie eros eu tellus. </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
Suspendisse a mi vitae nulla vehicula lacinia. </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
Ut pellentesque lobortis ipsum. Quisque a leo. Curabitur tincidunt. </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
Fusce est velit, condimentum sed, convallis in, blandit hendrerit, eros.</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
</p>
</div>
</body>
</html>
Check this code.
<html>
<head>
<script type="text/javascript">
function myScroll()
{
x = document.getElementById("myDiv");
h= x.clientHeight;
self.scrollTo(0,h);
}
</script>
</head>
<body onload="myScroll();">
<div id="myDiv">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
Donec tristique lectus sit amet est. Vivamus sit amet lacus. </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
Morbi convallis sem nec lectus. </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
Nullam in odio ac augue porttitor semper. </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
Nam leo. Morbi varius molestie felis. Etiam egestas. </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
Donec vitae mauris vitae nisi gravida pharetra. In molestie eros eu tellus. </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
Suspendisse a mi vitae nulla vehicula lacinia. </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
Ut pellentesque lobortis ipsum. Quisque a leo. Curabitur tincidunt. </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
Fusce est velit, condimentum sed, convallis in, blandit hendrerit, eros.</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
</p>
</div>
</body>
You can do it on css..
div
{
overflow: auto;
}