Can anyone help me with a javascript to make the page scroll down to the searchbox when the searchfield is focused? Like if you click on the searchfield, the position changes, until the red and yellow boxes are out of sight.
#overtop {
width: 500px;
height: 100px;
background: red;
}
#top {
width: 500px;
height: 100px;
background: yellow;
}
#searchbox {
}
#content {
width: 500px;
height: 200px;
background: blue;
}
<div id="overtop">
</div>
<div id="top">
</div>
<div id="searchbox">
<input type="text" id="myInput" placeholder="enter.." title="search">
</div>
<div id="content">
</div>
Just got it, finally.
$("#myInput").click(function () {
$("html, body").animate({ scrollTop: $("#searchbox").offset().top }, 300);
return true;
});
Related
I have a complex flex-based angular page, with a big amount of nested flex items. I need to have customizable stretch elements to the end of page and use scroll by some of inner containers.
Chrome/Edge/Firefox doing well, as expected. But Safari start to freeze whole page.
I have analyzed styles of all elements. And, for demonstrate this issue, I created demo page.
let startTime = new Date().getTime();
window.onload = () => {
window.onload = null;
setTimeout(() => {
const endTime = new Date().getTime();
const timeSpend = endTime - startTime;
const loadTime = `Loading time: ${timeSpend}ms`;
console.log(loadTime);
const input = document.querySelector("label");
input.innerText = loadTime;
startTime = new Date().getTime();
});
}
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.flex-item {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
background: rgba(0, 128, 0, 0.05);
}
.block-item {
display: block;
height: 100%;
width: 100%;
background: red;
}
div {
border: 1px solid black;
border-radius: 5px;
padding: 2px 10px;
position: relative;
}
span {
position: absolute;
top: 0;
left: 0;
}
label {
position: fixed;
left: 200px;
top: 10px;
background: white;
z-index: 10;
box-shadow: 0px 0px 10px 2px black;
border-radius: 20px;
padding: 5px;
}
<label></label>
<div class="flex-item"><span>0</span>
<div class="block-item"><span>1</span> <!-- block here -->
<div class="flex-item"><span>2</span>
<div class="flex-item"><span>3</span>
<div class="flex-item"><span>4</span>
<div class="flex-item"><span>5</span>
<div class="flex-item"><span>6</span>
<div class="flex-item"><span>7</span>
<div class="flex-item"><span>8</span>
<div class="flex-item"><span>9</span>
<div class="flex-item"><span>0</span>
<div class="flex-item"><span>1</span>
<div class="flex-item"><span>2</span>
<div class="flex-item"><span>3</span>
<div class="flex-item"><span>4</span>
<div class="flex-item"><span>5</span>
<div class="flex-item"><span>6</span>
<div class="flex-item"><span>7</span>
<div class="flex-item"><span>8</span>
<div class="flex-item"><span>9</span>
<div class="flex-item"><span>0</span>
<div class="flex-item"><span>1</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Or demo on codepen: https://codepen.io/JBeen/full/LYBwYmJ
Tried on Safari 16.3 and Safari TP 16.4 on Macbook Pro 16 M2 Max
Loading time: ~3.5s
When I increase amount of nested elements and add 1 element -- loading time increase twice, and became ~7s. So after adding several more nested elements -- page start to freeze completely.
Does Safari have an issue on official bug tracker?
Or what I'm doing wrong?
I'm trying to add a transition between pages in a SvelteKit application. When navigating, the current page should fade out, and the new page should then fade in in its place. To accomplish this, in +layout.svelte, I wrapped the <slot> in a div with the in and out transitions set. I wrapped this all in {#key $page.url.pathname} so that the animations are triggered when navigating from page to page. However, my current code produces this effect:
When navigating, the content of the page updates before fading out. In other words, the destination page immediately appears, then fades out, then fades back in. At the same time, though, content in +layout.svelte (.title, at the top of the page) behaves correctly; just the content within the <slot> is bugged.
Here is the code:
+layout.svelte
<script lang="ts">
import '$lib/style.css';
import { page } from '$app/stores';
import { fade } from 'svelte/transition';
</script>
<div class="page">
<div class="bar">
Sidebar
Page 1
Page 2
</div>
<div class="content-wrapper">
{#key $page.url.pathname}
<div class="content" in:fade={{ delay: 1000, duration: 1000 }} out:fade={{ duration: 1000 }}>
<div class="title">
{$page.url.pathname}
</div>
<slot />
</div>
{/key}
</div>
</div>
<style global>
.page {
display: flex;
flex-direction: row;
box-sizing: border-box;
width: 100vw;
min-height: 100vh;
}
.bar {
display: flex;
flex-direction: column;
width: 300px;
color: white;
background: black;
}
a {
color: white;
}
.content-wrapper {
flex-grow: 1;
width: 100%;
min-height: 100vh;
}
.content {
width: 100%;
height: 100%;
}
.title {
font-size: 2em;
}
</style>
+page.svelte
<div class="page">
<div class="title">Page 1</div>
</div>
<style>
.page {
width: 100%;
height: 100%;
background: blue;
}
</style>
page2/+page.svelte
<div class="page">
<div class="title">Page 2</div>
</div>
<style>
.page {
width: 100%;
height: 100%;
background: red;
}
</style>
Is there a way to get the <slot> content to wait for the out animation to finish before updating?
Its an issue with the lifecycle of the transitions for in and out.
I usually use in:fade ONLY on elements and it looks okay. It seems using both means that while one element is going out, another is coming in at the same time in which looks funny.
Perhaps you could find out more about delay in transitions and let us know..
Happy coding☺️
I made an example on CodePen - CodePen
I want the image to disappear on hover with the mouse and a block with text appears.
My problem is that I don't understand how to remove the jumps if I want to keep the text.
Now there are unpleasant jumps in my layout, which is caused by display: none;.
And I think to add smooth transitions. For reuse, I moved the code to Alpine.data. Is this a good idea?
I've used alpine before with tilewind and it's easier. But in this bootstrap project, there are complications.
Please tell me what are your ideas?
Thanks in advance!
<div class="container advantage-pic">
<div class="pic1" x-data="onHover" #mouseover="visible" #mouseleave="novisible">
<img class="pic" x-show="!open" src="https://napli.ru/advantage-pic1.png" alt="">
<div class="txt" x-cloak x-show="open" >Some text</div>
</div>
<div class="pic2" x-data="onHover" #mouseover="visible" #mouseleave="novisible">
<img class="pic" x-show="!open" src="https://napli.ru/advantage-pic2.png" alt="">
<div class="txt" x-cloak x-show="open">Some text</div>
</div>
<div class="pic3" x-data="onHover" #mouseover="visible" #mouseleave="novisible">
<img class="pic" x-show="!open" src="https://napli.ru/advantage-pic3.png" alt="">
<div class="txt" x-cloak x-show="open">Some text</div>
</div>
<div class="pic4" x-data="onHover" #mouseover="visible" #mouseleave="novisible">
<img class="pic" x-show="!open" src="https://napli.ru/advantage-pic4.png" alt="">
<div class="txt" x-cloak x-show="open">Some text</div>
</div>
</div>
[x-cloak] {
display: none !important;
}
.advantage-pic {
max-width: 760px;
margin: auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 12px;
grid-row-gap: 12px;
}
.pic1 {
grid-area: 1 / 1 / 3 / 2;
text-align: center;
position: relative;
}
.pic2 {
grid-area: 1 / 2 / 2 / 3;
text-align: center;
position: relative;
}
.pic3 {
grid-area: 2 / 2 / 3 / 3;
text-align: center;
position: relative;
}
.pic4 {
grid-area: 3 / 1 / 4 / 3;
text-align: center;
position: relative;
}
.txt {
color: blue;
background: #fe980f;
position: absolute;
top: 0;
left: 0;
transition: height 500ms ease 0s;
width: 100%;
display: block;
height: 100%;
}
.pic {
width: 100%;
height: 100%;
object-fit: cover;
}
import Alpine from "https://cdn.skypack.dev/alpinejs#3.10.5";
Alpine.data("onHover", () => ({
open: false,
visible() {
this.open = true;
},
novisible() {
this.open = false;
},
}));
queueMicrotask(() => {
Alpine.start();
});
Solved! There was no need to hide the picture, there was no jump!
x-show="!open"
I'd like to have a header and then three images side-by-side.
When in small screens, the images should occupy all the width and be placed vertically one after another.
For each image, when the mouse is over it, some text should be overlayed.
For mobile and touch screens, I don't know how that text could be shown, but would like to have it shown in some way.
Each of the images should point to another html page (not shown in my example.
What I managed to do until now is:
<!DOCTYPE html>
<html>
<head>
<style>
html {
font-family: helvetica, arial, sans-serif;
}
.cabecalho {
width:70%;
height:200px;
text-align:center;
margin:70px;
margin-top:10px;
}
.cabecalho p{
line-height: 10px; /* within paragraph */
margin-bottom: 4px; /* between paragraphs */
}
.corpo {
width:60%;
height:500px;
}
* {
box-sizing: border-box;
}
.img__description_layer {
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(204, 204, 204, 0.6);
color: #111;
visibility: hidden;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
pad: 8px;
height: 300px;
width: 200px;
/* transition effect. not necessary */
transition: opacity .2s, visibility .2s;
}
.img__description {
transition: .2s;
transform: translateY(1em);
}
.img__wrap:hover .img__description {
transform: translateY(0);
}
.img__wrap:hover .img__description_layer {
visibility: visible;
opacity: 1;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 500px) {
.column {
width: 100%;
}
}
</style>
</style>
</head>
<body>
<div class="cabecalho">
<header>
</header>
</div>
<main>
<div class="row">
<div class="column">
<div class="img__wrap">
<img class="img__img" alt="alttext" align="middle" src="http://placehold.it/257x200.jpg" width="300" height="200" style="width:100%">
<div class="img__description_layer">
<p class="img__description">Some paragraph</p>
</div>
</div>
</div>
<div class="column">
<div class="img__wrap">
<img class="img__img" alt="alttext" align="middle" src="http://placehold.it/257x200.jpg" width="300" height="200" style="width=100%">
<div class="img__description_layer">
<p class="img__description">Some paragraph</p>
</div>
</div>
</div>
<div class="column">
<div class="img__wrap">
<img class="img__img" alt="alttext" align="middle" src="http://placehold.it/257x200.jpg" width="300" height="200" style="width=100%">
<div class="img__description_layer">
<p class="img__description">Some paragraph</p>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
I'd appreciate some help on this.
I'm trying to scroll content vertically in a div. However, I would like it to loop, so that when the last item in the div reaches the top of the container, the first items follow it, and if the first item is already at the top of my container, I don't want the previous button to work, but I'm not sure how to do either of these two things. Any help would be appreciated.
JSFIDDLE
HTML
<div class="container">
<div class="block block-1">1</div>
<div class="block block-2">2</div>
<div class="block block-3">3</div>
<div class="block block-4">4</div>
<div class="block block-5">5</div>
<div class="block block-6">6</div>
</div>
<button id="prev">Previous</button>
<button id="next">Next</button>
jQuery
$( "#prev" ).click(function()
{
$( ".block" ).animate({ "top": "+=50px" }, "slow" );
});
$( "#next" ).click(function()
{
$( ".block" ).animate({ "top": "-=50px" }, "slow" );
});
CSS
.container
{
position: relative;
background-color: #f5f5f5;
width: 590px;
height: 330px;
overflow: hidden;
font-family: arial, sans;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
}
.block
{
position: absolute;
width: 90px;
height: 90px;
color: #fff;
}
.block-1
{
background-color: #900;
}
.block-2
{
top: 100px;
background-color: #090;
}
.block-3
{
top: 200px;
background-color: #009;
}
.block-4
{
top: 300px;
background-color: #990;
}
.block-5
{
top: 400px;
background-color: #909;
}
.block-6
{
top: 500px;
background-color: #099;
}
If you want it to loop, you can do a test where every time a div's vertical position goes out of bounds, it gets moved to the bottom of the pile, and reverse this when scrolling up. Essentially you just cut and paste the elements in the right order using $.remove(), $.append(), $.clone().