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>
Related
I'm working on a dropdown with javascript. My HTML does not work and I can't find the problem... I think I've done right but maybe it's the link who does not work.
$(document).ready(function() {
$("article.hey > *:not(header)").hide();
$("article.hey header").on("click", function() {
$(this).nextAll("*").slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<article class="hey">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac metus quis ante elementum tristique sit amet quis lorem. Fusce placerat dignissim nunc vitae consequat. In sagittis velit vitae erat faucibus, vitae condimentum risus luctus. Aliquam
consequat est pellentesque viverra hendrerit. Duis tincidunt mi sem, et rhoncus ante consequat id. Sed ex est, pulvinar et mi eu, placerat tincidunt lacus. Praesent congue turpis mi, at vestibulum
</p>
</article>
</header>
Thanks!
The structure of your HTML must be the header tag inside the article tag:
$(document).ready(function() {
$("article.hey > *:not(header)").hide();
$("article.hey header").on("click", function() {
$(this).nextAll("*").slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="hey">
<header>I'm the header 'CLICK ME'</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac metus quis ante elementum tristique sit amet quis lorem. Fusce placerat dignissim nunc vitae consequat. In sagittis velit vitae erat faucibus, vitae condimentum risus luctus. Aliquam
consequat est pellentesque viverra hendrerit. Duis tincidunt mi sem, et rhoncus ante consequat id. Sed ex est, pulvinar et mi eu, placerat tincidunt lacus. Praesent congue turpis mi, at vestibulum
</p>
</article>
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 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/
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;
}