Im using stickyfill (https://github.com/wilddeer/stickyfill) for stickying sidebar menu on scroll.
On safari and Opera it works perfect, but it doesn't work in Safari and Firefox at all. Could please someone help me to solve the problem?
Im using latest version of Wordpress (4.6.1) and Bootstrap (3.3.7).
Website url (Look left sidebar menu): HERE
JQ:
jQuery(document).ready(function($) {
$('#sidestick').Stickyfill();
});
CSS:
.sidestick {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top: 0;
}
.sidestick:before,
.sidestick:after {
content: '';
display: table;
}
.sidestick:after {
clear: both;
}
#media screen and (min-width: 768px){
.sticky-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}
HTML:
<div id="content" class="site-content">
<div class="container">
<div class="row sticky-eq-height">
<div class="col-sm-3" >
<div id="sidestick" class="sidestick" style="top: 140px;">
Menu content
</div>
</div>
<div class="col-sm-9">
MAIN CONTENT
</div>
Resolve problem with changing plugin StickyKit (http://leafo.net/sticky-kit/)
Related
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 am trying to display a font awesome spinner horizontally center. With the below CSS it is displaying only on the left hand side. Can anyone help me how to fix this?
loading.component.html
<div class="container">
<div class="loading-overlay">
<i class="fa fa-spinner fa-spin fa-4x"></i>
</div>
</div>
loading.component.scss
.loading-overlay {
align-items: center;
display: flex;
justify-content: center;
position: absolute;
z-index: 2;
}
.container {
width: 100%;
}
Thanks
Remove the position: absolute; and you are fine.
.loading-overlay {
align-items: center;
display: flex;
justify-content: center;
z-index: 2;
}
.container {
width: 100%;
}
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<div class="container">
<div class="loading-overlay">
<i class="fa fa-spinner fa-spin fa-4x"></i>
</div>
</div>
I have a website that displays fine in chrome but not in Firefox.
This is chrome:
This is Firefox:
Three of the four main images are missing - oddly the 4th one displays fine, despite having identical code. the inspector shows the images are downloading successfully:
I have also cleared the caches, updated Firefox, etc., to no avail.
In response to the queries:
All images are served from digital ocean, not locally.
This is the css and html for the learn image and the smile image, of which the smile image appears in FF while the learn button doesn't:
CSS
.four_box {
position: absolute;
}
.four_btn {
cursor: pointer;
transition: all .7s;
}
.four_label_anchor {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
.smile_size {
height: 262px;
width: 326px;
}
.learn_size {
height: 263px;
width: 183px;
}
HTML
<div id="learn" class="learn_size four_box" style="top: 437px; left: 771px;">
<img id="learn_btn" class="learn_size four_btn" style="
background: url(/static/img/swirl_home/chalk-btn.png);"
onclick="animHome(this.id);">
<div class="learn_size four_label_anchor">
<div id="learn_label" class="four_label">Learn</div>
<button id="learn_return" class="btn_href return_btn">
return
</button>
</div>
</div>
</div>
<div id="smile" class="smile_size four_box" style="top: 438px; left: 954px;">
<img id="smile_btn" class="smile_size center four_btn" style="
background: url(/static/img/swirl_home/bird-btn.png);"
onclick="animHome(this.id); homeSnapshots();">
<div class="smile_size four_label_anchor">
<div id="smile_label" class="four_label">Smile</div>
<button id="smile_return" class="btn_href return_btn">
return
</button>
</div>
</div>
I will reread the Firefox link
If you are displaying local images, can be the problem.
Use / instead of \ in the images URL will solve the problem
Otherwise, Mozilla has a general help page for such problem : https://support.mozilla.org/en-US/kb/fix-problems-images-not-show
below codes are to display loading gif while ajax is loading data. The codes below displaying the gif for the whole page of my browser. But I want it to display only at div-Summary-Report. Is it able to do this?
<div class="row">
<div class="col-lg-12 div-Detailed-Report">
//some content
</div>
</div>
<div class="row">
<div class="col-lg-12 div-Summary-Report">
//some content
</div>
</div>
<style type="text/css">
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('../../Content/kendoui/Bootstrap/loading_2x.gif') center no-repeat #fff;
}
</style>
<script>
$(document).ready(function () {
$(document).ajaxStart(function () {
$(".se-pre-con").show();
}).ajaxStop(function () {
$(".se-pre-con").hide();
});
});
//some ajax function
</script>
This is would solve your problem. Place loading gif inside div hidden and when ajax starts show gif and when ajax complete hide gif again.
<div class="row">
<div class="col-lg-12 div-Summary-Report">
<img src="loading.gif" class="loading">
//some content
</div>
</div>
<style type="text/css">
.loading{display:none;}
</style>
Ran across an odd issue today. I've been working with a floated menu that works on everything I've tested thus far (not gotten to old IE versions yet...), except firefox. The page renders correctly when first loaded, but if the window is resized, elements with deterministic layouts (i.e. inline elements, divs with overflow:hidden, etc) affected by the floated element fail to update.
Anyone have a (preferably javascript free) workaround?
HTML:
<div id="leftBar">
<a>test1</a>
<a>test2</a>
</div>
<div id="bodyContent">
<div>
<div id="contenta">
Hello world!
</div>
</div>
<div>
<p>Paragraph test</p>
</div>
<div style="clear:both">
Enclosing div.
</div>
</div>
CSS:
#leftBar {
float:left;
width:50px;
background:red;
height:75px;
}
#bodyContent {
margin:0 auto;
width:500px;
background:green;
}
#bodyContent > div {
overflow: hidden;
}
#contenta {
width:100%;
height:50px;
background:blue;
}
jsfiddle here.
I'm not sure if this is what you're trying to achieve or not, but I would personally use a container for the elements.
#container {
width: 550px;
}
#leftBar {
float:left;
width:50px;
background:red;
height:75px;
}
#bodyContent {
margin:0 auto;
width:500px;
background:green;
overflow: hidden;
}
#contenta {
width:100%;
height:50px;
background:blue;
}
Then wrap your content in the container.