I am trying to have two divs that are able to be toggled with their own respective buttons. They are dramatically different in size so I need the flow of the webpage to change when the div with the most/least content is shown so I can't have them 'position: absolute' on top of each other. One needs to be 'display: none' to take it out of the flow of the webpage, and on the toggle of a button, it should be 'display: block' and the other div should be 'display: none'.
So by doing it this way, the page isn't dramatically longer than it should be and it adjusts to the smaller size of content.
Problem is though, with 'opacity', I cannot get it to fade in. Could anybody help me with this?
//Sections
section1 = document.getElementById("section1");
section2 = document.getElementById("section2");
//Buttons
btn_section1 = document.getElementById("btn_section1");
btn_section2 = document.getElementById("btn_section2");
btn_section2.addEventListener("click", function () {
section1.classList.remove("active_content");
section1.style.opacity = "0";
section1.style.display = "none";
section2.classList.add("active_content");
});
btn_section1.addEventListener("click", function () {
section2.classList.remove("active_content");
section2.style.opacity = "0";
section2.style.display = "none";
section1.classList.add("active_content");
});
.active_content {
opacity: 1 !important;
display: block !important;
transition: all 0.3s ease-in-out !important;
}
#section1 {
opacity: 1;
transition: all 0.3s ease-in-out !important;
}
#section2 {
opacity: 0;
transition: all 0.3s ease-in-out !important;
}
<button id="btn_section1">Section 1</button>
<button id="btn_section2">Section 2</button>
<div id="section1">
<h1>Section 1</h1>
</div>
<div id="section2">
<h1>Section 2</h1>
</div>
That's because of the display css property (transition will not work, display is on or of). It may be better to use a few css-classes for fading in/out, something like this snippet (simplified code by using event delegation). For moving elements out of the way (effectively take them out of the page flow) you can use an absolute position with a negative top position.
document.addEventListener("click", evt => {
const origin = evt.target;
if (origin.id.startsWith("btn")) {
document.querySelector(`#${origin.dataset.fadeout}`).classList.remove("fadeIn");
document.querySelector(`#${origin.dataset.fadein}`).classList.add("fadeIn");
}
});
.fade {
opacity: 0;
transition: opacity 0.3s ease-out;
position: absolute;
/* move out of the way if not used */
top: -5000px;
}
.fade.fadeIn {
opacity: 1;
top: initial;
transition: opacity 0.3s ease-in;
}
<button id="btn_section1" data-fadein="section1" data-fadeout="section2">Section 1</button>
<button id="btn_section2" data-fadein="section2" data-fadeout="section1">Section 2</button>
<div id="section1" class="fade fadeIn">
<h1>Section 1</h1>
</div>
<div id="section2" class="fade">
<h1>Section 2</h1>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</div>
</div>
You can use setTimeout function with this code.
setTimeout(function() {
section2.style.display = "none"
}, 300);
setTimeout(function() {
section1.style.display = "none"
}, 300);
Related
I have a dialog with some items ("tags") and a footer with a "done" button. When the items get populated enough, scroll is added and the footer is shown BENEATH all the items.
But I want to show the footer at all times, to be fixed, and make the scroll only work for the populated items.
<Dialog
hidden={this.state.hideDialog}
onDismiss={this._closeWithoutSavingDialog}
containerClassName={'ms-dialogMainOverride ' + styles.textDialog}
modalProps={{
isBlocking: false,
}}>
<div className={styles.tags}>
<div className={styles.tagsDialogCloud}>
{this.state.dialogTags.map((tag, index) => this.renderDialogTags(tag, index))}
</div>
</div>
<DialogFooter>
{this.state.showDialogButton == true ?
<DefaultButton
style={{ backgroundColor: '#ff0033', color: '#ffffff' }}
onClick={this._closeDialog}
text="Done"
/>:null
};
</DialogFooter>
</Dialog>
</div>;
enter image description here
Picture shows an example of what I want to achieve. The "tags" part is scrollable, but the "Done" button is always shown.
This sounds more like a CSS problem than a React one.
The problem with your code is that the DialogFooter component should be absolute so it won't extend the parent's height and you should render the button without a condition.
Here's an example of how you can achieve it:
JSX:
<div className="popup-wrapper">
<div className="popup">
<div className="popup-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</div>
<div className="popup-footer" />
</div>
</div>
CSS:
.App {
font-family: sans-serif;
text-align: center;
}
.popup-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.popup {
height: 300px;
width: 200px;
background: grey;
position: relative;
}
.popup-footer {
height: 40px;
width: 100%;
position: absolute;
bottom: 0;
background: silver;
}
.popup-content {
max-height: 260px;
overflow: auto;
}
And a sandbox can be found here
Try this HTML as your dialog code/you can modify the code as per your dialog this is a code to give you a hint.
<div id="header" style="position:absolute; top:0px; left:0px; height:200px; right:0px;overflow:hidden;">
</div>
<div id="content" style="position:absolute; top:200px; bottom:200px; left:0px; right:0px; overflow:auto;">
</div>
<div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px; right:0px; overflow:hidden;">
</div>
Hope this helps...
Happy coding...
I have given multiple backgrounds to a single div in a webpage. I wanted that as I scroll down that the background-image(Stickman), which is at the front, should remain of the same size, and the background-image(Landscape), which is behind it, should zoom.
I want to keep the size of stickman less than the container size.
But in my code both the background images are getting zoomed, kindly help me with it.
Below is the code :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<meta charset="utf-8">
<script>
$(document).ready(function(){
$(window).scroll(function(){
var up=$(document).scrollTop();
var upperl=10;
var lowerl=500;
var a=0;
var b=$("#body1").width();
if(up<=upperl)
{
a=b;
}
else if(up>=upperl)
{
a=b+up;
}
$("#backgroundslide").css("background-size", a+"px");
});
});
</script>
<style>
body{
color:white;
top:0;
margin:0;
}
#body1{
width:100%;
height:880px;
position:relative;
}
#backgroundslide{
background-image:url("http://www.downloadclipart.net/svg/18970-stickman-tired-svg.svg"),url("http://miriadna.com/desctopwalls/images/max/Silver-cliff.jpg");
width:100%;
height:100%;
background-size: 200px,cover;
background-repeat:no-repeat;
background-position: bottom, top;
}
#a{
margin-top:100px;
}
</style>
</head>
<body>
<div id="body1">
<div id="backgroundslide">
<h1>This is Heading</h1>
<p id="a">Irure pariatur et est ullamco fugiat ut. Duis incididunt sint non nostrud ut enim irure veniam. Veniam veniam cillum Lorem adipisicing laboris id esse ullamco deserunt. Incididunt duis adipisicing anim sit nisi qui magna nisi nulla.</p>
</div>
</div>
</body>
</html>
You've just forgot to set a value for the stickman.
$("#backgroundslide").css("background-size", '200px auto,' + a + "px");
See the snippet below:
$(document).ready(function() {
$(window).scroll(function() {
var up = $(document).scrollTop();
var upperl = 10;
var lowerl = 500;
var a = 0;
var b = $("#body1").width();
if (up <= upperl) {
a = b;
} else if (up >= upperl) {
a = b + up;
}
$("#backgroundslide").css("background-size", '200px auto,' + a + "px");
});
});
body {
color: white;
top: 0;
margin: 0;
}
#body1 {
width: 100%;
height: 880px;
position: relative;
}
#backgroundslide {
background-image: url("https://svgsilh.com/svg_v2/151822.svg"), url("http://miriadna.com/desctopwalls/images/max/Silver-cliff.jpg");
width: 100%;
height: 100%;
background-size: 200px auto, cover;
background-repeat: no-repeat;
background-position: bottom, top;
}
#a {
margin-top: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="body1">
<div id="backgroundslide">
<h1>This is Heading</h1>
<p id="a">Irure pariatur et est ullamco fugiat ut. Duis incididunt sint non nostrud ut enim irure veniam. Veniam veniam cillum Lorem adipisicing laboris id esse ullamco deserunt. Incididunt duis adipisicing anim sit nisi qui magna nisi nulla.</p>
</div>
</div>
After following this post on how to set up a "read more" for text sections, as well as this post to set up two side by side divs, I've been having an issue where the left floating div works fine - clicking "Read More" shows the rest of the text in the div, and vice versa for "Read Less". However, the second div does not work as intended - clicking "Read More" hides the text of the second div while also changing the ellipsis of the first div.
To make it more clear:
//Script for Read More/Read Less
<script>
$(document).ready(function() {
var showChar = 200;
var ellipsestext = "...";
var moretext = "Read More";
var lesstext = "Read Less";
$('.more').each(function() {
var content = $(this).html();
if(content.length > showChar) {
var c = content.substr(0, showChar);
var h = content.substr(showChar-1, content.length - showChar);
var html = c + '<span class="moreelipses">'+ellipsestext+'</span><span class="morecontent"><span>' + h + '</span><div class="text-center margin_top_10">'+moretext+'</div></span>';
$(this).html(html);
}
});
$(".morelink").click(function(){
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(".moreelipses").toggle();
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
</script>
<style>
.comment {
width: 100%;
margin: 0 auto;
}
a.morelink {
outline: none;
color: #5bc0de !important;
}
.morecontent span {
display: none;
}
</style>
//First Div
<div class="container" style="width:620px; float:left;">
<div class="row">
<div class="comment more col-lg-8 col-lg-offset-2 text-center">
<p class="comment more">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
//Second Div
<div class="container" style="width:620px; float:right;">
<div class="row">
<div class="comment more col-lg-8 col-lg-offset-2 text-center">
<p class="comment more">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
<div style="clear:both">
</div>
Results:
If both divs are not expanded, both show up fine.
If div 1 is expanded and div 2 is not, div 1's text expands as expected. Div 2 stays the same.
If div 2 is expanded and div 1 is not, div 2's text stays contracted. Both div's ellipsis (...) disappear.
If both divs are expanded, div 1's text expands as expected, div 2's text stays contracted. Div 1 still shows its ellipsis when it's not meant to.
You just needed a tidying up with the code...
Here is the Fiddle: https://jsfiddle.net/bgssveqq/5/
partial JS:
$(".morelink").on("click", function() {
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
}
else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().parent().children("p").children(".moreelipses").toggle();
$(this).parent().parent().children("p").children(".morecontent").toggle();
});
I'm trying to make the border below that text, kind of pulse with lighter and darker greys automatically while the user is on the page. I tried using webkit animations in my CSS, but I don't have much experience with that, and it doesn't seem to be working. Here's my code:
Code:
$(document).ready(function() {
var exceptions = ["Bulls", "rhymes,", "spin", "blinding", "pinched", "oxygen", "tendrils", "exact", "agreement", "combination", "swallow", "smiles",
"mirror", "treehouse", "project", "dwindling", "laughing", "fall", "stupor", "breaking", "skin", "untimely"
];
$("p").each(function() { //for all paragraphs
var txt = $(this).text() //get text, split it up, add spans where necessary, put it back together
.split(" ")
.map(function(x) {
return exceptions.includes(x.toLowerCase()) ? x : "<span class='hover'>" + x + "</span>"
}).join(" ");
$(this).html(txt); //set the text to our newly manipulated text
}).on("mouseover", ".hover", function() {
$(this).addClass("hovering"); //set opacity to 100%
}).on("mouseout", ".hovering", function() {
$(this).attr("class", ""); //set opacity to 0%, remove "hover" events
});
});
img {
width: 3%;
height: 3% opacity: 0.5;
}
.hover {
opacity: 0;
}
.hovering {
opacity: 1;
}
span {
transition: opacity 0.5s;
opacity: 0;
}
p {
cursor: default;
line-height: 200%;
border-bottom: solid;
border-color: rgb(50, 50, 50);
color: white;
}
#-webkit-keyframes p {
0% {
border-color: red;
}
50% {
border-color: blue;
}
100% {
border-color: green;
}
}
.story {
-webkit-animation: p 10s infinite alternate;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="arrow.png">
<br>
<div class=s tory>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
https://jsfiddle.net/3oshp7v0/#&togetherjs=5SSB2yJSF6
There is no border set on the CSS rule .style. Animations only apply on the properties of the element they are on. You have to set the animation on the p elements (that actually have the border), or add a border to the .story element.
p { /* p is the element that have the border, .story doesn't have it */
cursor: default;
line-height: 200%;
border-bottom: solid;
border-color: rgb(50, 50, 50);
color: white;
}
#-webkit-keyframes p {
0% { border-color: red; }
50% { border-color: blue; }
100% { border-color: green; }
}
p { /* set the animation on p which is the element that have the border */
-webkit-animation: p 10s infinite alternate;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="story">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
I have updated your fiddle to make it blink infinitely.
https://jsfiddle.net/3oshp7v0/3/
I have changed your code as:
img {
width: 3%;
height: 3% opacity: 0.5;
}
.hover {
opacity: 0;
}
.hovering {
opacity: 1;
}
span {
transition: opacity 0.5s;
opacity: 0;
}
p {
cursor: default;
line-height: 200%;
border-bottom: solid;
border-color: rgb(50, 50, 50);
color: white;
}
.blink_me p{
-webkit-animation-name: blinker;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: blinker;
-moz-animation-duration: 1s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
animation-name: blinker;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#-moz-keyframes blinker {
0% { opacity: 1.0; border-color:red;}
50% { opacity: 0.0; border-color:blue;}
100% { opacity: 1.0; border-color:green;}
}
#-webkit-keyframes blinker {
0% { opacity: 1.0; border-color:red;}
50% { opacity: 0.0; border-color:blue;}
100% { opacity: 1.0; border-color:green;}
}
#keyframes blinker {
0% { opacity: 1.0; border:red}
50% { opacity: 0.0; border-color:blue}
100% { opacity: 1.0; border-color:green}
}
The class blink_me p can be applied instead to hovering and you will have blink only on mouseover.
Please see.Also note that for animations to work properly across cross-browsers you have to define browser specific css. The provided one doesnot work with internet explorer. For that you will have to write that in javascript.
https://www.kapadiya.net/snippets/how-to-make-blinking-flashing-text-with-css3-and-jquery/
It's a typical css-hack. Try Pseudo-elements:
p{
position: relative;
}
p:before{
content: '';
position: absolute;
bottom: -1px;
width: 100%;
height: 1px;
animation: bdColor 1s ease-out infinite alternate;
}
#keyframes bdColor{
0% { background-color: red; }
50% { background-color: blue; }
100% { background-color: green; }
}
Working on a parallax effect for a site. I've gotten the parallax effect to function properly using a background image but I've decided to change things up just a bit. Rather than using a bg image for the effect I was looking to apply the effect to an entire div but I can't seem to get this working using the entire div. Looking to apply the effect to everything inside the .section div while keeping the #subpanel / scroll-pane independently scrollable.
html -
<div class="col col-100">
<div class="col col-30">
<div class="section">
<div id="subpanel" class="nav_dialog displayed" style="height: 660px; left: ; display: block;">
<div class="close_link">
Close (x)
</div>
<div class="scroll-pane" style="overflow: hidden; padding: 0px; width: 475px;">
<div class="jspContainer" style="width: 475px; height: 620px;">
<div class="jspPane" style="padding: 0px 65px 0px 20px; top: 0px; width: 396px; font-size: 15px;">
<img src="http://s2.postimg.org/5uxqi0mgl/cats1.jpg" alt="">
<p> </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="jspVerticalBar">
<div class="jspCap jspCapTop"></div>
<div class="jspTrack">
<div class="jspDrag">
<div class="jspDragTop"></div>
<div class="jspDragBottom"></div>
</div>
</div>
<div class="jspCap jspCapBottom"></div>
</div>
</div>
</div>
</div>
</div>
</div>
JS -
<script>
$(function() {
$.fn.parallax = function(options){
var $$ = $(this);
offset = $$.offset();
var defaults = {
"start": 0,
"stop": offset.top + $$.height(),
"coeff": 0.95
};
var opts = $.extend(defaults, options);
return this.each(function(){
$(window).bind('scroll', function() {
windowTop = $(window).scrollTop();
if((windowTop >= opts.start) && (windowTop <= opts.stop)) {
newCoord = windowTop * opts.coeff;
//console.log($$)
$$.css({
"position": "0 "+ newCoord + "px"
});
}
});
});
};
$('.section').parallax({ "coeff":-0.65 });
$('.section .scroll-pane').parallax({ "coeff":2.55 });
})
</script>
<script>
$(function()
{
$('.scroll-pane').jScrollPane();
});
</script>
Hopefully that makes some sense.
Any help would be appreciated.
it seems you changed background-position to position.
Allowed values for position are absolute,fixed,relative,static & inherit
You are probably looking for something like this to move a complete div
$$.css({
"top": newCoord + "px"
});
or
$$.css({
"margin-top": newCoord + "px"
});