How to change position of "Toasts" in materializecss - javascript

I have implemented "Toast" from materializecss. And I want to give some fix position to "Toast" message.
For workaround, I have added class and updated position, but with different screen resolution, it's appearing different location.
Materialize.toast('Success Message', 6000, 'success');
Any one have tried to change position of "Toast" message.
Is there any other way to make it consistence in every screen resolution.

Override default toast css with what you need:
#toast-container {
display: block;
position: fixed;
z-index: 10000
}
#media only screen and (max-width: 600px) {
#toast-container {
min-width: 100%;
bottom: 0%
}
}
#media only screen and (min-width: 601px) and (max-width: 992px) {
#toast-container {
left: 5%;
bottom: 7%;
max-width: 90%
}
}
#media only screen and (min-width: 993px) {
#toast-container {
top: 10%;
right: 7%;
max-width: 86%
}
}

Related

How to use CSS classes with current-device

I try to lock screen orientation on a portrait for mobile and iPad devices. I can use CSS snippet I found on css-tricks.com
#media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
html {
transform: rotate(-90deg);
transform-origin: left top;
width: 100vh;
overflow-x: hidden;
position: absolute;
top: 100%;
left: 0;
}
}
This original CSS won't work because some small-size laptops could be considered as iPad or iPad won't fall under (max-width: 767px).
As well, in my code, I use the CURRENT-DEVICE module to detect the type of device in the code. I want to use this module to detect mobile and tablet and apply the CSS snippet I showed above. I can detect device on JS like:
if (device. Tablet()) {
do something
}
But how to trigger CSS?
On the current-devise github page, they have CONDITIONAL CSS. But I cannot understand how to use them. I googled but couldn't find more information. I hope somebody worked with this module and can help me.
You could use JavaScript to insert a stylesheet like this:
if (device. Tablet()) {
var newStyleSheet = document.createElement('style')
document.head.appendChild(newStyleSheet);
var sheet = newStyleSheet.sheet;
sheet.insertRule(`
html {
transform: rotate(-90deg);
transform-origin: left top;
width: 100vh;
overflow-x: hidden;
position: absolute;
top: 100%;
left: 0;
}
`, 0);
}

how to make slider responsive (codepen)?

I am using this slider but its not responsive.
can anyone tell me how can i make this slider responsive.
i made width:100%; but contents are not responsive any help or slimier slider suggestion would be appreciated
https://codepen.io/ivanrafael/pen/xGNOrP
.anim-slider {
background: #225A86;
list-style-type: none;
position: relative;
overflow: hidden;
text-align: center;
top: 0;
left: 0;
width: 100%;
height: 550px;
padding:0;
margin:0;
}
Here is the sass mixin I am currently using (the dimensions are probably a bit outdaded nowadays) :
#mixin breakpoint($class) {
#if $class == xs {
#media (max-width: 767px) { #content; }
}
#else if $class == sm {
#media (min-width: 768px) { #content; }
}
#else if $class == md {
#media (min-width: 992px) { #content; }
}
#else if $class == lg {
#media (min-width: 1200px) { #content; }
}
#else if $class == xlg {
#media (min-width: 1367px) { #content; }
}
#else {
#warn "Breakpoint mixin supports: xs, sm, md, lg";
}
}
it is just a shortcut for media queries.
I then use
#include breakpoint(xs) {
... properties targeting mobile only go here ...
}
it then depends how you want your slider to appear in the different breakpoints.
By instance :
.anim-slide img#css3 {
left: 35%;
top: 4%;
}
don't seem to work really well on mobile view.
for that specific case, you may prefer :
.anim-slide img#css3 {
left: 35%;
#include breakpoint(xs) {
left: 25%;
}
top: 4%;
}
which is the same as :
.anim-slide img#css3 {
left: 25%;
#include breakpoint(sm) {
left: 35%;
}
top: 4%;
}
which is the same as (no sass) :
.anim-slide img#css3 {
left: 35%;
#media (max-width: 767px) {
left: 25%;
}
top: 4%;
}
It was only one example, you may have to do this on several classes and using several different breakpoints to have your slider perfectly responsive.

Hide logo when not in desktop version

how can i modify my head to hide the logo element when we are in mobile view?
<style type="text/css">
/*<![CDATA[*/
.jtpl-logo {
padding: 0 30px;
width: 250px;
transition: all 0,5s ease 0s !important;
position: fixed;
z-index: 1000000;
min-width: 0000px;
overflow: visible;
}
.jtpl-navigation {
transition: all 0.5s ease 0s !important;
position: fixed;
width: 100%;
z-index: 100000;
text-align: center;
padding-left: 300px;
background-color: #e30613;
}
/*]]>*/
</style>
Right now i have used the head to fix the navigation bar and the logo element to stay on top during scrolling. Now it would be perfect, if i could tell the logo container to remove if we are in a mobile view, or lets say when we are less then the screen width of 768px.
Is this possible? I found out that it is quite a hustle to find hints on this in combination with jimdo.
You can use a CSS3 media query to specify styles which apply only under specific circumstances. To hide your logo on screens smaller than 768px:
#media (max-width: 768px) {
.jtpl-logo {
display: none;
}
}
More info about media queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Use CSS Media Queries to conditionally use various CSS styles based on the size of the viewport.
Media Queries will likely solve your problem.
/* Smartphones (portrait and landscape) ----------- */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.jtpl-logo {
display: none;
}
}
Hint: I like to use this one, as it has a good and useable collection of breakpoints https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints
To hide in desktop use #media like
#media (min-width:961px) {
.jtpl-logo {
display: none;
}
}
for other than desktop use following tags
#media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
#media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets # 600 or # 640 wide. */ }
#media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
#media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
#media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
#media (min-width:1281px) { /* hi-res laptops and desktops */ }
.jtpl-logo {
padding: 0 30px;
width: 250px;
transition: all 0,5s ease 0s !important;
position: fixed;
z-index: 1000000;
min-width: 0000px;
overflow: visible;
}
.jtpl-navigation {
transition: all 0.5s ease 0s !important;
position: fixed;
width: 100%;
z-index: 100000;
text-align: center;
padding-left: 300px;
background-color: #e30613;
}
#media (min-width:961px) {
.jtpl-logo {
display: none;
}
}
<div class="jtpl-logo">
</div>

Fluid Dynamic CSS - Javascript/jQuery

I am wondering if there is way, to mark a MAX and a MIN value depending on the max Width of the browser window and min Width of the browser window, and have it dynamically change that MAX and MIN value between that set range?
Example:
I have a button "button" outside a div "divA" (it is part of another div "divB", that lies outside the div being discussed), and I want this button "button" to lie at the bottom right corner of this initial div "divA".
Now, I can get the button to lie at the bottom right corner when the browser window is at is absolute minimum, and at the absolute maximum, but the in between is a bit sporadic since I'm positioning the button absolutely, and then changing the bottom percentage on the two media widths.
Is there a a known javascript or jquery that would allow me to do this?
example CSS:
#divA{
width: 100%;
height:auto;
}
#divB{
width: 100%;
height: auto;
}
#button{
position: relative;
}
#media screen and (min-width: 768px){
#button{
position: absolute;
bottom: 100%;
}
}
#media screen and (min-width: 400px){
#button{
position: absolute;
bottom: 250%;
}
}
example HTML:
<div id="divA"></div>
<div id="divB"><button>CLICK ME</button></div>
demo -http://jsfiddle.net/ogjhef7c/1/
you are setting bottom to by 250% 100% try changing the value, #media works find try resizing theattached fiddleheight`
#media screen and (max-height: 300px) {
#button {
bottom: 0px;
background: red;
}
}
#media screen and (max-height: 100px) {
#button {
bottom: 0px;
background: green;
}
}

Media queries for every 250px interval

I'm not sure if this is possible, but I'm just wondering if there's a more sophisticated way of achieving the following media queries: jsFiddle: http://jsfiddle.net/neal_fletcher/XMmyA/
CSS:
.block {
position: relative;
width: 1000px;
height: 100px;
background: red;
margin: 0 auto;
}
#media only screen and (max-width: 1000px) {
.block {
width: 750px;
}
}
#media only screen and (max-width: 750px) {
.block {
width: 500px;
}
}
#media only screen and (max-width: 500px) {
.block {
width: 250px;
}
}
Thus instead of declaring a different media query every 250px, is there a better way to achieve this with css or jquery? So every 250px, the .block width is reduced by 250px. Any suggestions would be greatly appreciated!
You can use the css preprocessor sass for this, along with a for loop.
#for $i in 1 through 3 {
#media only screen and (max-width: (5-$i) * 250px) {
.block {
width: (4-$i) * 250px;
}
}
}
If you want to skip using media queries, why not just set the width of your block using a percentage (demo):
.block {
width: 75%;
min-width: 250px;
height: 100px;
background: red;
margin: 0 auto;
}
<script>
$(function() {
var windowsize = parseInt($(window).width());
var block = parseInt($(".block").outerWidth(true));
if(windowsize <= block && windowsize%250==0) {
$(block).css('width',windowsize-250+"px");
}
});
</script>

Categories

Resources