I'm working on my own libarary, and I thought that a slide effect function would be useful, plus, I'm making a Calender/Clock web-app and its goal is to be as effect-filled as possible. I have no doe so far. Sorry. I searched all over the web.
If you're trying to make text slide in or out, CSS would be the most efficient. You could use the Javascript setTimeout method in a for-loop, but a CSS animation would look the smoothest.
I made a JSFiddle here.
Here's the CSS behind it.
div.slide {
transition: left, 2s;
-moz-transition: left, 2s;
-webkit-transition: left, 2s;
-ms-transition: left, 2s;
position:relative;
left:-150px;
border: solid black 2px;
width:50px;
}
div.hov {
border:solid black 2px;
position:absolute;
width:100px;
}
div.hov:hover div.slide {
left:48px;
}
Highlight over the 'calendar' to see the effects.
Related
I'm using an ionic refresher to refresh content on a page in my application. However, when I pull up the ion-refresher, background does not get fully set to the color I want.
This is a CSS class I'm applying to the ion-refresher:
ion-refresher {
background-color: #dedede;
}
ion-refresher-content {
background-color: #dedede;
}
And this it what the result looks like:
How do I remove the white gap between the ion refresher and the main content?
On Ionic 4, this CSS worked for me:
ion-refresher-content {
padding-bottom: 200px;
background-color: yellow;
.refresher-pulling {
position: fixed;
top: 50px;
}
}
The padding-bottom: 200px; fills up the space to show the yellow color, but it also introduces a new issue. The refresher arrow disappears! In order to keep the arrow in place and make it function normally, the .refresher-pulling and its corresponding styles are added. This way, now the app background color shows without any white gaps and also the spinner stays in place.
Hope this helps someone.
When you pull up, one div was been created called fixed-content
For remove the gap just add .fixed-content in your .scss
Example:
.fixed-content{
background:#dedede;
}
This is what got it working for me.
ion-refresher-content {
padding-bottom: 100px;
background-color: #dedede;
}
#devner's solution is not working correctly with iPhone X and kind (i.e. devices with safe-area-inset).
Proper solution (Ionic 4):
ion-refresher-content {
position: relative;
padding-bottom: 200px;
background-color: var(--base-background-color-body);
.refresher-pulling, .refresher-refreshing {
position: relative;
top: 30px;
}
}
Appendix: best UX on my opinion can be achieved with next HTML:
<ion-refresher slot="fixed" pullFactor="0.5" (ionRefresh)="onPullToRefresh($event)">
<ion-refresher-content
pullingIcon="refresh"
refreshingSpinner="crescent"
></ion-refresher-content>
</ion-refresher>
image http://pasteio.com/m26f642c81452a5bf67cfc5f0b0f2390c
I'm using leaflet to render the mapbox map. There is small triangle on the top of marker; how can I hide it?
For others coming across this post who may be struggling with the tooltip triangle, or even the background css of the tooltip, I have put together my research in one place and found the various ways to affect the triangle and the background of the tooltips and the popups!
If you have a POPUP bound to a marker, .leaflet-popup-tip controls the triangle. Here I am hiding it:
.leaflet-popup-tip {
background: rgba(0, 0, 0, 0) !important;
box-shadow: none !important;
}
If you have a TOOLTIP you have added to the map, you can control the tooltip's triangle with this magical css:
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
border: none !important;
}
More styling:
POPUP: You can also control the popup's css as well by targeting .leaflet-popup-content-wrapper. Here I am completely removing all traces of the background/border/box of the popup & enlarging the font:
.leaflet-popup-content-wrapper {
background: rgba(0, 0, 0, 0) !important;
border: none !important;
font-size: 20px;
box-shadow: none !important;
}
TOOLTIP: You can add a class name to a tooltip when you create it such as {className: 'popup'}, and then use that to style the tooltip:
.popup {
background: rgba(0, 0, 0, 0) !important;
border: none !important;
font-size: 20px;
box-shadow: none !important;
}
To see how to add tooltips and popups to the map, and how all of this works together, here is a working example with commenting throughout:
https://repl.it/#MeowMeow/NeighboringConventionalPhp
Hope this is helpful to someone! :)
This triangle is controlled by the .leaflet-popup-tip class in css. If you are using standard Leaflet, you should be able to hide the tip by adding the following to your css (after leaflet.css is loaded):
.leaflet-popup-tip {
width: 0px;
height: 0px;
}
Mapbox actually creates the tip in a slightly different way from standard Leaflet, by styling the element border rather than the element content, so if you are using mapbox.js, you should be able to do it by adding the following (after mapbox.css is loaded):
.leaflet-popup-tip {
border: 0px;
}
I am trying to fit my website for iphone
for that i am using twitter bootstrap responsive css
i gave the container with different border colors for different width
but when i minimize the browser window the border colors are not reflecting for the browser window
http://jsfiddle.net/CXkQp/1/
http://jsfiddle.net/CXkQp/1/embedded/result/
#media (min-width: 1200px) {
.row {
margin-left: -30px;
*zoom: 1;
}
.row:before,
.row:after {
display: table;
line-height: 0;
content: "";
}
.row:after {
clear: both;
}
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 30px;
}
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 1170px;
border: 1px solid red;
}
If I understand your question correctly, the page example you posted should be responsive, though I'm not sure that your bootstrap grid is setup the way you need it.
You have nested container divs for one thing # lines 120 and 145
Check what happens if I rename your 2 container divs:
http://jsfiddle.net/panchroma/CXkQp/3/embedded/result/
http://jsfiddle.net/panchroma/CXkQp/3/
line 120
<div class="containerA" style="background-color: white;">
line 145
<div class="containerB">
There are also some validation errors which could possibly be another piece of the puzzle. The cause may be that you can't simply paste HTML head content into the jsFiddle HTML panel as you have done. Check http://doc.jsfiddle.net/use/hacks.html#css-panel-hack for details on what you need to do.
My appologies if I've misunderstood something
Good luck!
I have a vertical drop-down menu that is working fairly well. I have one bug that I cannot get a handle on, though.
You can find my menu here: test Page
The menu works fine in internet explorer (except for a little drop on the first submenu, that I can live with (bonus points if you know what that's about), but in other browsers, my background flows from the submenu back to the main menu. Where the "margin" is coming from?
so far I've found that it has something to do with how I've styled my li:hover children
Potentially useful snippets from my CSS
ul#menu3{
display:block;
left:20px;
margin:0;
width:10em;
padding:0;
position:absolute;
list-style:none;
}
ul#menu3 li{
color:#000000;/*
float:left;*/
position:relative;
margin:0;/*
margin-bottom:-1px;*/
line-height:31px;
text-align:center;
width:10em;
padding:0;
font-weight:bold;
display:block;
vertical-align:middle;
background-image:url(../../../menu4/awmdata/button-tile.gif);
}
ul#menu3 li:hover ul{
text-align:center;
vertical-align:bottom;
background-image:url(../../../menu4/awmdata/button-tile.gif);
background-repeat:repeat;
left:auto;
margin-top:-31px;
}
ul#menu3 li ul{
position:absolute;
left:-999em;
margin-left:10em;
margin-top:-31px;
}
ul#menu3 li ul li{
color:#000000;
margin:0;
left:auto;
padding:0;
font-weight:bold;
}
Stick this at the top of your styles.css
ul, li {
margin: 0;
padding: 0;
}
When using unordered lists for menu's it's always a good idea to remove the margin and padding so you have better control with your layout from the start
I'm using fancybox 2 and I can get rid of the padding around the outside of the frame, but then I lose the border-radius that it comes with.
What I want is a border-radius around the main content inside the frame. So I tried going into the css and adding a border-radius to the fancy-box inner selector and it won't work. How can I give the frame a rounded corner without a border?
If anyone can help me with this that would be great!
Try this code it worked for me
Add custom classes after fancy box on complete method.
Ex.
HTML
Login
JS
$(document).ready(function(e) {
$(".signin-ovr").fancybox({
afterLoad : function(){
$("#fancybox-content").addClass('fancybox-content-cust');
$(".fancybox-bg").addClass('fancybox-bg-cust');
$("#fancybox-outer").addClass('fancybox-outer-cust');
}
});
});
CSS
.fancybox-content-cust {
overflow: visible !important;
border: 10px solid #FFFFFF;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.fancybox-bg-cust{
display: none;
}
.fancybox-outer-cust {
background: transparent !important;
}
Then you will get border radius to the overlay box.
for fancybox v2 round borders
.fancybox-outer, .fancybox-inner, .fancybox-skin {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 10px!important;
}
CSS3 has a border radius property ironically enough entitled border-radius there are a few specific variations ie, Firefoxes moz-border-radius.
It is used like so:
#div-id .specific-class {
border-radius: 10px;
}
If you only want one rounded it has the ability to be modified like so
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
I hope this answers your question.