My goal is to animate the addition/removal of a class in real time depending on the scroll position. In this Fiddle the red box with the blue border changes to the yellow box with the purple border when the scroll bar reaches the bottom of the page. I like that but what I want to happen is for that transition to be linked to the scroll position and to happen in real time as the scroll bar is moved down. So it will be a fade effect whose speed and position is determined by the scroll bar position. How does one do this? I would appreciate any help. Thanks!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TEST SITE ONE</title>
<meta name="description" content="Test Site">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
* {
margin: 0;
padding: 0;
}
body{
display: block;
}
.box1{
position: fixed;
height: 100vh;
width: 100vw;
max-width: 100%;
background-color: red;
border: 2vw solid blue;
}
.box1add{
background-color: gold;
border: 2vw solid purple;
}
.box2{
position: absolute;
height: 200vh;
width: 25vw;
background-color: orange;
border: 2vw solid green;
margin-left: 37.5vw;
margin-right: 37.5vw;
}
</style>
<script>
$(window).scroll(function() {
var scroll = $(window).scrollTop();
//console.log(scroll);
if (scroll >= $(window).height()) {
//console.log('a');
$(".box1").addClass("box1add");
} else {
//console.log('a');
$(".box1").removeClass("box1add");
}
});
</script>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
Related
I am trying to create a paper-folding effect through CSS and Javascript like it has to interact with the mouse but I tried to do this but didn't figure it out. And I also surfed on the internet but there is no trace of how to do this. The effect must be like this Netrix Digital.
So can anyone tell me how to do this and if you paste the answer please make sure to explain it.
Here is my code
body {
background-color: #ccc;
text-align: center;
margin-top: 100px;
}
.bgcolor {
background-color: black;
color: rgba(255, 255, 255, 0.8);
}
.fold{
width:500px;
height: 350px;
background: #eee;
margin: 0 auto;
}
.fold h1{
line-height:350px;
font-family: sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="fold">
<h1>Folding effect</h1>
</div>
</body>
</html>
Thanks for helping in advance :)
Hope this helps ->
CodePen Link to Paper Folding Effect
HTML ->
<div class="fold"></div>
CSS ->
body {
background: #344;
padding: 25px
}
/* paper */
.fold {
postion: relative;
height: 200px;
padding: 25px;
background: #fff
}
/* folding */
.fold::before {
content:"";
position: absolute;
top: 32px;
right: 32px;
border-style: solid;
border-width: 0 100px 100px 0;
border-color: #ddd #344;
transition: all ease 0.5s;
}
.fold:hover::before {
border-width: 0 150px 150px 0;
border-color: #eee #344
}
I have an issue that should be fixed through the CSS/Query only - HTML change is not possible because HTML is implemented on thousands of the pages on the website.
screenshot (1)
It works fine if the width is less, but when scrollbar is visible, and I move it to the right to see the code, then "COPY" button also shifted to the left,
creenshot (2)
I added the copy button using the script and it is working fine with thousands of the pages. Unable to fix the issue.
HTML:
<pre class="i3-code">
--example code--
</pre>
SCRIPT:
<script type="text/javascript">
function cpy(t){var e=t.innerText,n=document.createElement("textarea");n.setAttribute("class","invisible"),n.setAttribute("id","cpytxtbox"),n.textContent=e,document.body.append(n),n.select(),document.execCommand("copy"),document.getElementById("cpytxtbox").outerHTML=""}var $input=$('<div class="copy-btn"><input type="button" value="Copy"/></div>');$input.prependTo($(".i3-code")),$(".copy-btn").click(function(){cpy(this.parentElement)});
</script>
CSS:
.i3-code {
background-color: #fefbed;
font-size: 1em;
line-height: 1.2;
}
.copy-btn {
text-align: right;
margin-left: -8px;
margin-right: -8px;
margin-top: -8px;
margin-bottom: 5px;
background-color: #f4f4f4;
}
.copy-btn input {
background: #e1e1e1;
color: #000;
border: none;
font-weight: 500;
padding: 7px;
transition: background 1s;
}
A live test can be done with this URL (on any example code), by resizing the window screen
https://www.includehelp.com/python/date-toordinal-method-with-example.aspx
This should do the trick:
.copy-btn {
text-align: right;
margin-left: -8px;
margin-right: -8px;
margin-top: -8px;
margin-bottom: 5px;
background-color: #f4f4f4;
position: sticky;
top: -8px;
left: -8px;
right: -8px;
overflow: hidden;
}
It implements position: sticky.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous">
</head>
<body>
<pre class="float-right position-sticky">
</pre>
</body>
</html>
For some reason the video and sidebar div keep pushing each other outside of the wrapper div. In addition, it seem like the main wrapper div is not being defined for some reason. I been messing around for hours now and it seem like nothing work . Can some give me some pointer.
https://jsfiddle.net/4z5wwq2j/
Thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
#wrapper{
width: 100%;
height: 500px;
white-space: nowrap;
display: inline-block;
}
#sidebar{
height: 420px;
width: 10%;
background-color: red;
}
#video{
border-radius: 25px;
background: #C5EFF7;
border: 5px solid #19B5FE;
padding: 20px;
width: 65%;
height: 420px;
display: inline-block;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="sidebar"></div>
<div id="video"></div>
</div>
</body>
</html>
You have to set display: inline-block; for the #sidebar div as well:
https://jsfiddle.net/4z5wwq2j/1/
#sidebar{
height: 420px;
width: 10%;
background-color: red;
display:inline-block;
}
Set the vertical-align as well for both of them as you need.
So I just got done making my first JQuery project which is a simple full width slider. (Getting back to HTML & CSS & im currently working in C#)
Here is the issue; I dont want to be able to scroll on the page I want it to be autofit to the webpage.
Lets say I open the webpage right now, I want resize it how ever I want its responsive & its working like a charm. but you can still scroll down.
(Feel free to try it yourself with my code)
I remember this being really simple to fix but for some reason I cant remember how I did it back in the day. I'm pretty sure I will have to change something with the height; it in the CSS file or inside the body of the HTML source.
Here is the fiddle
My CSS file is completly empty.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full Width Responsive Image Slider</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<style type="text/css">
*{padding: 0; margin: 0;}
body {font-family: Sans-Serif;}
img {max-width: 100%;}
.cycle-slideshow {
width: 100%;
display: block;
position: relative;
margin: 0 auto;
}
.cycle-prev, .cycle-next {
font-size: 200;
color: #FFF;
display: block;
position: absolute;
top: 50%;
margin-top: -16px;
z-index: 9999;
cursor: pointer;
}
.cycle-prev {left: 10%;}
.cycle-next{right: 10%;}
.cycle-pager{
width: 100%;
text-align: center;
display: block;
position: absolute;
position: top;
bottom: 20px;
z-index: 9999;
}
.cycle-pager span {
text-indent: 100%;
white-space: nowrap;;
width: 12px;
height: 12px;
display: inline-block;
border: 1px solid #FFF;
border-radius: 50%;
margin: 0 10px;
cursor: pointer;
}
.cycle-pager .cycle-pager-active {background: #FFF;}
</style>
</head>
<body>
<div class="container">
<!-- Full Width Responsive Slider -->
<div class="cycle-slideshow">
<span class="cycle-prev">〈</span>
<span class="cycle-next">〉</span>
<span class="cycle-pager"></span>
<img src="images/Untitled.png">
<img src="images/wp.png">
<img src="images/wp2.png">
</div>
<!-- Full Width Responsive Slider -->
</body>
</html>
try this code.
html,body,img {padding: 0; margin: 0;height:100%;width:100%}
body {font-family: Sans-Serif;}
.container{height:100%;width:100%;overflow: hidden;}
.cycle-slideshow {
height: 100%;
where
*{padding: 0; margin: 0;}
body {font-family: Sans-Serif;}
img {max-width: 100%;}
.cycle-slideshow {
and if you want to change the size, just change .container
I looked over this page trying to make a simple mouse over menu work (based on the user:sarfraz' answer). I'm not sure if I'm missing the JavaScript but it seems there shouldn't be any. If I load the page I get a div with "menu" written into a box and moving the mouse over it keeps it there only once. After the mouse is taken off the div box vanishes never to be seen again. I've tried messing with the visibility style in the menu id, setting it to visible or hidden and I've also tried setting the style display:none; with no luck. I also found this page but that one has a permanent list which doesn't vanish with onmouseout. Should I just color the li tag the same as the background and use that?
<html>
<head>
</head>
<style>
body
{
background-repeat:repeat;
background-color: white;
}
#container
{
position: relative;
margin: 0 auto;
height: 100%;
width: 100%;
}
#menu
{
position: absolute;
margin: 0 auto;
height: 100px;
width: 300px;
top: 70%;
left: 40%;
background-color: white;
border:2px solid;
border-color: purple;
}
</style>
<body>
<div id='menu' onMouseOver="this.style.visibility = 'visible';" onMouseOut="this.style.visibility = 'hidden';">menu</div>
</body>
</html>
When he gets visibility = hidden, do not be mouseOver, so the code does not run
Alternative: http://jsfiddle.net/V5QrZ/
Use Jquery
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<style>
body
{
background-repeat:repeat;
background-color: white;
}
#container
{
position: relative;
margin: 0 auto;
height: 100%;
width: 100%;
}
#menu
{
position: absolute;
margin: 0 auto;
height: 100px;
width: 300px;
top: 70%;
left: 40%;
background-color: white;
border:2px solid;
border-color: purple;
}
</style>
<script>
$(document).ready(function(){
$("p").mouseover(function(){
$("#menu").hide()
});
$("p").mouseout(function(){
$("#menu").show()
});
});
</script>
</head>
<body>
<p>Move the mouse pointer over this paragraph.</p>
<div id='menu' >menu</div>
</body>
</html>