I was able to figure out how to animate header resize on scroll. However, I can't seem to figure out how to also animate a header logo image to make it smaller on scroll. Any help to modify the code below would be greatly appreciated.
$(document).on("scroll", function () {
if
($(document).scrollTop() > 100) {
$("header").addClass("shrink");
} else {
$("header").removeClass("shrink");
}
});
#logo {
width: 100%;
margin: 0 auto;
position: fixed;
}
#content {
width: 100%;
margin: 0 auto;
}
header {
width: 100%;
padding: 30px 0;
background: #000;
border-bottom: 1px solid #fff;
/* animation magic */
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
z-index: 9999;
top: 0;
position: fixed;
}
.shrink {
padding: 0;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<div id="logo">
<header><img src="https://www.computerhope.com/cdn/computer-hope.jpg"></header>
</div>
<div id="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</div>
</body>
</html>
I would first of all change a bit your HTML like so:
<header>
<div id="logo">
<img src="https://www.computerhope.com/cdn/computer-hope.jpg">
</div>
</header>
And change you css to this:
#logo
{
width:200px;/*give it a fixed size*/
margin:0 auto;
/* animation magic */
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out ;
-ms-transition: all 1s ease-in-out ;
-o-transition: all 1s ease-in-out ;
transition: all 1s ease-in-out ;
}
#logo img
{
width:100%;
height:auto;
}
header
{
width: 100%;
padding: 30px 0;
background: #000;
border-bottom: 1px solid #fff;
z-index: 9999;
}
.shrink
{
width:100px;/*change the size here*/
}
Change your jQuery to this:
$(document).on("scroll", function(){
if($(document).scrollTop() > 100)
{
$("#logo").addClass("shrink");
}
else
{
$("#logo").removeClass("shrink");
}
});
Related
I code a simple react-native messaging application with kind of message baloons containing 2 text elements: a message text and message time. A message text can be multiline and the time text has fixed width.
However, i ran into the problem that I could not arrange the time text element in the same level as the last bottom line of message text.
My goal is to get a component with behavior similar to easy-to-do HTML example but I don't know how to implement such in flex-box model in RN.
.container {
width: 300px;
background-color: #ff0000;
border-radius: 10px;
padding: 10px;
}
.time {
width: 50px;
text-align: right;
background-color: #00ff00;
display: inline-block;
float: right;
}
.separator {
height: 10px;
}
.clear{
clear: both;
}
<p>when the bottom line of message is not long enough that time can be fit into the same line</p>
<div class="container">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida tristique arcu, malesuada dignissim dui porttitor id. Praesent id posuere tortor. </span>
<span class="time">12:37</span>
<div class="clear"></div>
</div>
<div class='separator'></div>
<p>when the bottom line of message takes more space, the time text takes additional line at bottom</p>
<div class="container">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida tristique arcu, malesuada dignissim dui porttitor id. </span>
<span class="time">12:37</span>
<div class="clear"></div>
</div>
Any help would be appreciated.
This might not be the answer you were looking for but I'd suggest using a UI component library such as Nativebase if you're getting started, it's good practice and you surely don't want to build everything from scratch. They have lots of components you can take advantage of and have lots of example on how to implement them. You should also check out material design - https://material.io/
I'm experiencing a bug while using Boostrap(4)-Vue.
Namely, when transitioning between slides the image scrolls up and the page 'jumps' as can be seen below. I've copied exactly the source code in the reference provided.
The bug persists in both Chromium and Firefox, both for desktop (large) view and for mobile.
Any idea would be appreciated.
Vue component:
<template>
<b-carousel id="carousel1"
style="text-shadow: 1px 1px 2px #333;"
controls
indicators
background="#ababab"
:interval="4000"
img-width="1024"
img-height="480"
v-model="slide"
#sliding-start="onSlideStart"
#sliding-end="onSlideEnd">
<!-- Text slides with image -->
<b-carousel-slide caption="First slide"
text="Nulla vitae elit libero, a pharetra augue mollis interdum."
img-src="https://picsum.photos/1024/480/?image=52"
></b-carousel-slide>
<!-- Slides with custom text -->
<b-carousel-slide img-src="https://picsum.photos/1024/480/?image=54">
<h1>Hello world!</h1>
</b-carousel-slide>
<!-- Slides with image only -->
<b-carousel-slide img-src="https://picsum.photos/1024/480/?image=58">
</b-carousel-slide>
<!-- Slides with img slot -->
<!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
<b-carousel-slide>
<img slot="img" class="d-block img-fluid w-100" width="1024" height="480"
src="https://picsum.photos/1024/480/?image=55" alt="image slot">
</b-carousel-slide>
<!-- Slide with blank fluid image to maintain slide aspect ratio -->
<b-carousel-slide caption="Blank Image" img-blank img-alt="Blank image">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
eros felis, tincidunt a tincidunt eget, convallis vel est. Ut pellentesque
ut lacus vel interdum.
</p>
</b-carousel-slide>
</b-carousel>
</template>
<script>
import data from '#/data'
export default {
name: 'Home',
data () {
return {
slogan: data.slogan,
welcome: data.welcome,
servicesList: data.servicesList,
slide: 0,
sliding: true,
selected: ''
}
},
methods: {
expand (sect) {
sect.expanded = !sect.expanded
},
onSlideStart (slide) {
this.sliding = true
},
onSlideEnd (slide) {
this.sliding = false
}
}
}
</script>
<style scoped>
h1,
h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
.selected {
background-color: aquamarine;
}
</style>
I have been trying to add pseudo elements with content into the CSS for a page that is being converted with the Flying Saucer library. When viewing the page in a regular browser as HTML, the code works fine and I can see the pseudo element (:before). When rendering the PDF using Flying Saucer however, the pseudo element disappears.
According to the official Flying Saucer spec, CSS 2.1 is supported so that should include pseudo elements and content attributes. So why isn't it working for me? All other CSS is working fine.
Besides of CSS2.1 pseudo-elements listed in the CSSParser, which are:
first-line
first-letter
before
after
Flying Saucer supports following pseudo-elements for output rendering:
first-child
even
odd
last-child
Some browser related/interactive pseudo-elements are supported as well:
link
visited
hover
focus
active
See the source code of addPseudoClassOrElement.
Flying-saucer supports the following CSS pseudo elements:
before
after
first-line
first-letter
It only supports the standard, double-colon CSS3 syntax (::after), and not the old, single-colon CSS2 syntax (:after).
Here is a working example:
<html>
<head>
<style>
div::before {content: "before - "}
div::after {content: " - after"}
p::first-line {font-weight:bold}
p::first-letter {color:blue}
</style>
</head>
<body>
<div>A div</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed scelerisque augue. Nulla eleifend aliquet tortor, vel placerat velit fringilla vitae. Sed quis sem eu arcu dapibus convallis.</p>
</body>
</html>
And the result (using flying-saucer 9.1.6):
I want this simple Bootstrap 3 accordion:
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon
</div>
</div>
</div>
</div>
to have an plus icon when in closed and a minus icon when in hover and active.
My css:
.panel-title a {
background: url('plus.png') no-repeat 100% 50% ;
padding-right:20px;}
.panel-title a:hover{
background: url('minus.png') no-repeat 100% 50% ; }
.panel-title a:active {
background: url('minus.png') no-repeat 100% 50% ; }
So far is working except the active state. Can you help me to make it work?
Thank you
If I recall correctly, the :active state only occurs while the link is actually be clicked. :active has nothing to do with the state of the collapse.
To get this to work, I would change your CSS to something like this:
.panel-title a {
background: url('plus.png') no-repeat 100% 50% ;
padding-right:20px;}
.panel-title a:hover{
background: url('minus.png') no-repeat 100% 50% ; }
.panel-title a.active {
background: url('minus.png') no-repeat 100% 50% ; }
Note that instead of using the :active pseudo, we are actually going to use a class called .active.
Now, just toggle the class on and off via javascript. There are a couple of ways to do this, but the most straight forward would be to attach a listener to the existing a tag, like so:
$('[data-toggle]').on('click', function() {
$(this).toggleClass('active');
});
So in summary, change :active to .active in your css, and add three lines of javascript.
See http://www.bootply.com/130209 for a working example.
Visit this URL using Safari or Chrome browser:
http://aspspider.net/sunlight1000/two_col_div_layout_w3valid.htm
Set the width of the browser’s window to make sure the height of the Green box is greater than the height of the Red box. Then grab the lower edge of the browser’s window and drag it to the lower edge of the Green box and play around it. You will notice the Red box disappears when the lower edge of the browser’s window goes higher than the lower edge of the Green box. Then continue to shrink up the height of the browser’s window and the Red box will appear again. You will notice the Red box appears again exactly at the moment the lower edge of the browser’s window reaches the low edge of Red box. The Red box never disappears in other browsers (IE, FF and Opera). Is this a bug in Safari or some kind of “feature”? In any case I will be highly appreciated if someone suggests me a workaround to avoid disappearing of the Red box in Safari.
Here is the code of above mentioned page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>2 Column Fixed Liquid CSS Layout</title>
<style type='text/css'>
.wrapper
{
width: 100%;
min-width: 300px;
}
.wrapright
{
float: left;
width: 100%;
background-color: Blue;
}
.right
{
margin-left: 160px;
background-color: Lime;
}
.left
{
float: left;
width: 150px;
margin-left: -100%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="wrapright">
<div class="right">
LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT, SED DIAM NONUMMY NIBH
EUISMOD TINCIDUNT UT LAOREET DOLORE MAGNA ALIQUAM ERAT VOLUTPAT.
</div>
</div>
<div class="left">
<div style="background-color: red;">
LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT, ...
</div>
</div>
</div>
</body>
</html>
I'm not sure if this would work for your final layout, but based on the demo layout: seems like the negative 100% margin could be causing the issue. The behavior appears to be the same if you take away the float and margin declarations and do a position: absolute on the .left div. As long as the container is relatively positioned, I think you'll get the same end result.