Develop Reference

JS popup is not working on Safari (hide/show)

Simple popup with js is not working on IPhone and IPad
Tried to replace href="javascript:PopUpShow()" to onclick="PopUpShow()", but still the same, it works everywhere but Safari
click me
<div onclick="PopUpShow()"><i class="fas fa-phone"></i> </div>
<div class="b-popup" id="popup1">
<div class="b-popup-content">
<a class="b-popup-close" href="javascript:PopUpHide()">
<div class="col-md-4 col-12 padding-pop"> <div class="right-cont-pop" id="pop-hide"> close </a></div></div>
<div class="row">
<div class="col-md-4 col-12 padding-pop"><i class="fas fa-phone"></i></div>
<div class="col-md-4 col-12 padding-pop"><i class="fas fa-phone"></i></div>
<div class="padding-pop-text">blabla i'm pop up</div>
</div>
</div>
</div>
This is my JS code
function PopUpShow(){
$("#popup1").show();
}
function PopUpHide(){
$("#popup1").hide();
}
And css
.b-popup .b-popup-content a{
color: #000;
font-weight: 500;}
.mobil-icons {
display: block;
right: 0px;
position: absolute;
z-index: 999;
padding-top: 10px;}
.b-popup{
display: none;
min-height: 100%;
overflow: hidden;
position: fixed;
top: 0px;}
.b-popup .b-popup-content{
margin: 38px auto 0px auto;
width: 250px;
height: 250px;
padding: 10px;
background-color: #fff;
position: fixed;
top: 0;
right: 0;}
.b-popup-close {
color: #000;
font-weight: 500;
text-decoration: none;}
Please, help me to resolve this problem!

As it appears, the problem was not in JS at all. "display: flex;" made the whole popup absolutely invisible. I mean the popup was there the whole time, I tapped at the link on it! Just changed it to "block" and it appeared. But I have a question to Safari developers... WTF?

Is it possible to reserve the direction of the card-reveal on Materializecss?

I'm looking at the card-reveal component of the materializecss framework shown here: https://codepen.io/JP_juniordeveloperaki/pen/YXRyvZ the official doc is here: http://next.materializecss.com/cards.html
For my application, I have moved the <div class="card-content"> to the top to look like this: https://codepen.io/anon/pen/YaqYOj
So I was wondering whether or not it was possible to make the card-reveal animation go from top to bottom, like the top card-content is a curtain that pulls down to reveal more information.
Thanks

You can achieve this by changing transform property of this element .card .card-reveal {}.
And i add extra class to change the transform property make the top card-content is a curtain that pulls down to reveal more information*
Here is the working code
Note: Also add display: block to .card .card-image img fix the bottom gap in your demo.
$('.card-content').click(()=>{
$('.card-reveal').addClass('card-closing');
});
$('.card-reveal .card-title-custom').click(()=>{
$('.card-reveal').removeClass('card-closing');
});
.main {
width: 450px;
margin: 30px;
}
.card .card-image img {
border-radius: 2px 2px 0 0;
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
display: block;
}
.card .card-reveal {
padding: 20px;
position: absolute;
background-color: #fff;
width: 100%;
overflow-y: auto;
top: 100%;
height: 100%;
z-index: 1;
display: block !important;
transform: translateY(-200%) !important;
transition: transform .6s;
will-change: opacity, transform;
}
.card .card-reveal.card-closing {
transform: translateY(-100%) !important;
display: block !important;
}
.grey-text.text-darken-4 {
display: block;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="main">
<div class="card">
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
<p>This is a link</p>
</div>
<div class="card-image waves-effect waves-block waves-light">
<img class="activator-custom" src="http://materializecss.com/images/office.jpg">
</div>
<div class="card-reveal">
<span class="card-title-custom grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
</div>
Here is the working codepen

Replace Text on Hover with Jquery or JavaScript

I'm looking for a way with Jquery or JS to make it so that when I mouseover one of these divs, the text and icon disappears and "Read More" appears. I've seen some guides but they don't really seem to be accomplishing the whole job, it removes one line of text rather than clearing the entire div, and replacing it with a centered "Read More" text on mouseover, then going back to the normal text when the mouse exits hover. Does anyone have any suggestions?
The divs are horizontal on the actual page, not sure why it's showing up as vertical here.
.feature-container {
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 9;
width: 100%;
display: inline-block;
}
.feature-box {
background: #fff;
text-align: center;
padding: 40px 30px;
position: relative;
width: 25%;
}
.feature-box i {
font-size: 50px;
margin-bottom: 15px;
cursor: pointer;
}
.feature-box:hover {
background: #208541 !important;
color: #f6f6f6;
}
.feature-box.dark {
background: #f6f6f6;
}
<div class="feature-container">
<div class="feature-box-container feature-slider">
<div class="feature-box">
<i class="ion-ios-list-outline"></i>
<h4>Content</h4>
<p>Effective learning methodology that focuses on concepts and understanding of AICPA blueprints.</p>
</div>
<div class="feature-box dark">
<i class="ion-ios-cog-outline"></i>
<h4>Customization</h4>
<p>Adaptive content for a custom learning experience and individualized delivery through AdaptaPASS.</p>
</div>
<div class="feature-box">
<i class="ion-help"></i>
<h4>Support</h4>
<p>Direct access to our instructors and CPAs, by phone, email, or via our student-only message board.</p>
</div>
<div class="feature-box dark">
<i class="ion-social-usd-outline"></i>
<h4>Value</h4>
<p>Everything you need -- for less. Our course bundle costs hundreds less than competitors.</p>
</div>
</div>
</div>

This should help you to get started.. I'm using .css('visibility', 'hidden'); to hide text only because I didn't wanted to change or alter box height..
Ofcourse if that is not the case that you need (you can only use some css to fix the height) then you can use .hide() and .show() to show and hide text on mouse events
$('.feature-box').on('mouseenter', function(){
$(this).find('i, h4:not(.rm), p').css('visibility', 'hidden');
$(this).find('h4.rm').css('visibility', 'visible');
});
$('.feature-box').on('mouseleave', function(){
$(this).find('i, h4:not(.rm), p').css('visibility', 'visible');
$(this).find('h4.rm').css('visibility', 'hidden');
});
.feature-container {
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 9;
width: 100%;
display: inline-block;
}
h4.rm{ visibility: hidden; }
.feature-box {
background: #fff;
text-align: center;
padding: 40px 30px;
position: relative;
width: 25%;
}
.feature-box i {
font-size: 50px;
margin-bottom: 15px;
cursor: pointer;
}
.feature-box:hover {
background: #208541 !important;
color: #f6f6f6;
}
.feature-box.dark {
background: #f6f6f6;
}
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="feature-container">
<div class="feature-box-container feature-slider">
<div class="feature-box">
<i class="ion-ios-list-outline"></i>
<h4>Content</h4>
<h4 class="rm">Read more</h4>
<p>Effective learning methodology that focuses on concepts and understanding of AICPA blueprints.</p>
</div>
<div class="feature-box dark">
<i class="ion-ios-cog-outline"></i>
<h4>Customization</h4>
<h4 class="rm">Read more</h4>
<p>Adaptive content for a custom learning experience and individualized delivery through AdaptaPASS.</p>
</div>
<div class="feature-box">
<i class="ion-help"></i>
<h4>Support</h4>
<h4 class="rm">Read more</h4>
<p>Direct access to our instructors and CPAs, by phone, email, or via our student-only message board.</p>
</div>
<div class="feature-box dark">
<i class="ion-social-usd-outline"></i>
<h4>Value</h4>
<h4 class="rm">Read more</h4>
<p>Everything you need -- for less. Our course bundle costs hundreds less than competitors.</p>
</div>
</div>
</div>

To accomplish this I suggest you to use CSS only solution.
Add new div, position it absolutely and on feature-box hover just display it.
In order the position to work, feature-box has to have position: relative and new div should have larger z-index, and top: 0; set

You can achieve it with css see below if that is what you require.
.feature-container {
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 9;
width: 100%;
display: inline-block;
}
.feature-box {
background: #fff;
text-align: center;
padding: 40px 30px;
position: relative;
width: 25%;
display: inline-block;
}
span.read-more {
display: none;
font-weight: bold;
position: absolute;
z-index: 10;
top: 0;
}
.feature-box:hover p {
display: none;
}
.feature-box:hover span.read-more {
display: block;
position: relative;
}
.feature-box i {
font-size: 50px;
margin-bottom: 15px;
cursor: pointer;
}
.feature-box:hover {
background: #208541 !important;
color: #f6f6f6;
}
.feature-box.dark {
background: #f6f6f6;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="feature-container">
<div class="feature-box-container feature-slider">
<div class="feature-box">
<i class="ion-ios-list-outline"></i>
<h4>Content</h4>
<p>Effective learning methodology that focuses on concepts and understanding of AICPA blueprints.</p><span class="read-more">read more</span>
</div>
<div class="feature-box dark">
<i class="ion-ios-cog-outline"></i>
<h4>Customization</h4>
<p>Adaptive content for a custom learning experience and individualized delivery through AdaptaPASS.</p><span class="read-more">read more</span>
</div>
<div class="feature-box">
<i class="ion-help"></i>
<h4>Support</h4>
<p>Direct access to our instructors and CPAs, by phone, email, or via our student-only message board.</p><span class="read-more">read more</span>
</div>
<div class="feature-box dark">
<i class="ion-social-usd-outline"></i>
<h4>Value</h4>
<p>Everything you need -- for less. Our course bundle costs hundreds less than competitors.</p>
<span class="read-more">read more</span>
</div>
</div>
</div>

If you dont have to dynamically manipulate de 'boxes', you could do it using a couple of extra tag and css like this:
.feature-container{ box-shadow:0 1px 6px rgba(0,0,0,0.1); position:relative; z-index:9; width:100%; display:inline-block;}
.feature-box{background:#fff; text-align:center; padding:40px 30px; position:relative; width:25%;display:inline-block;}
.feature-box i{font-size:50px; margin-bottom:15px; cursor:pointer;}
.feature-box:hover{background:#208541 !important; color:#f6f6f6;}
.feature-box.dark{background:#f6f6f6;}
.feature-box .mask{display:none;}
.feature-box:hover .mask{background-color:#333;color:white;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;text-align:center;display:block;}
.feature-box:hover .mask span{position: relative;float: left;top: 50%;left: 50%;transform: translate(-50%, -50%);}
<div class="feature-container" >
<div class="feature-box-container feature-slider">
<div class="feature-box">
<i class="ion-ios-list-outline"></i>
<h4>Content</h4>
<p>Effective learning methodology that focuses on concepts and understanding of AICPA blueprints.</p>
<a class="mask" href="#"><span>read more</span></a>
</div>
<div class="feature-box dark">
<i class="ion-ios-cog-outline"></i>
<h4>Customization</h4>
<p>Adaptive content for a custom learning experience and individualized delivery through AdaptaPASS.</p>
<a class="mask" href="#"><span>read more</span></a>
</div>
<div class="feature-box">
<i class="ion-help"></i>
<h4>Support</h4>
<p>Direct access to our instructors and CPAs, by phone, email, or via our student-only message board.</p>
<a class="mask" href="#"><span>read more</span></a>
</div>
<div class="feature-box dark">
<i class="ion-social-usd-outline"></i>
<h4>Value</h4>
<p>Everything you need -- for less. Our course bundle costs hundreds less than competitors.</p>
<a class="mask" href="#"><span>read more</span></a>
</div>
</div>
</div>
if you dont need any fancy styles for the "read more" text, you could use .feature-box:hover::before{} to add the text and center it as i did with .mask span.

slidetoggle in pure Javascript

As you might see I have fixed a kind of text box that will pop up when someone is hovering over that image, but honestly I want a slide-up effect that gone up slowly. Must be completely in pure JavaScript (no jQuery please!). Anyone knows how I can do that.
function show(myText) {
var elements = document.getElementsByClassName(myText)
for(var i = 0; i < elements.length; i++){
elements[i].style.visibility = "visible";
}
}
function hide(myText) {
var elements = document.getElementsByClassName(myText)
for(var i = 0; i < elements.length; i++){
elements[i].style.visibility = "hidden";
}
}
.text1 {
position: relative;
bottom: 28px;
text-align: center;
background-color: grey;
width: 100%;
height: 10%;
font-size: 20px;
color: white;
opacity: 0.7;
display: block;
visibility: hidden;
}
.text2 {
position: relative;
bottom: 28px;
text-align: center;
background-color: grey;
width: 100%;
height: 10%;
font-size: 20px;
color: white;
opacity: 0.7;
display: block;
visibility: hidden;
}
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.bbc.com" target="_blank" class="image" onmouseover="show('text1')" onmouseout="hide('text1')">
<img src="https://i.vimeocdn.com/portrait/8070603_300x300" class="project" alt="print-screen"/>
<div class="text1">AAA</div>
</a>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.cnn.com" target="_blank" class="image" onmouseover="show('text2')" onmouseout="hide('text2')">
<img src="https://lh6.ggpht.com/mSKQgjFfPzrjqrG_d33TQZsDecOoVRF-jPKaMDoGIpMLLT1Q09ABicrXdQH6AZpLERY=w300" class="project" alt="print-screen"/>
<div class="text2">BBB</div>
</a>
</div>
</div>
</div>

Here is a version of it that's totally javascript free, just using CSS. I'm going to edit this soon with a slight javascript addition (this current version requires you to have a fixed size).
.caption {
height: 250px;
width: 355px;
overflow: hidden;
}
.caption-image {
height: 100%;
}
.caption-text {
color: white;
padding: 10px;
background: rgba(0, 0, 0, 0.4);
transition: transform 400ms ease;
}
.caption-image:hover + .caption-text,
.caption-text:hover {
transform: translateY(-100%);
}
<div class="caption">
<img class="caption-image" src="http://faron.eu/wp-content/uploads/2013/05/Cheese.jpg" />
<div class="caption-text">Some words about how cheesy it is to use a picture of cheese for this example!</div>
</div>
<div class="caption">
<img class="caption-image" src="https://top5ofanything.com/uploads/2015/05/Tomatoes.jpg" />
<div class="caption-text">There's nothing witty to say about a tomato, maybe some you say I say stuff. But honstly I can't think of anything...</div>
</div>
Version with JS sizing:
Basically the same idea, but when the page is loading it sets certain styles so the images can be what ever size you like.
var captionSel = document.querySelectorAll('.caption');
for (let i = 0; i < captionSel.length; i++) {
let image = captionSel[i].querySelector(":scope > .caption-image");
let text = captionSel[i].querySelector(":scope > .caption-text");
text.style.width = image.clientWidth - 20 + "px";
captionSel[i].style.height = image.clientHeight + "px";
}
.caption {
overflow: hidden;
}
.caption-text {
color: white;
padding: 10px;
background: rgba(0, 0, 0, 0.4);
transition: transform 400ms ease;
}
.caption-image:hover + .caption-text,
.caption-text:hover {
transform: translateY(-100%);
}
<div class="caption">
<img class="caption-image" src="http://faron.eu/wp-content/uploads/2013/05/Cheese.jpg" />
<div class="caption-text">Some words about how cheesy it is to use a picture of cheese for this example!</div>
</div>
<div class="caption">
<img class="caption-image" src="https://top5ofanything.com/uploads/2015/05/Tomatoes.jpg" />
<div class="caption-text">There's nothing witty to say about a tomato, maybe some you say I say stuff. But honstly I can't think of anything...</div>
</div>

I'll give it to you even better: No javascript at all!
This is possible with pure CSS:
.tumb-wrapper {
position: relative;
overflow: hidden;
}
.text {
text-align: center;
background-color: grey;
width: 100%;
height: 10%;
font-size: 20px;
color: white;
opacity: 0.7;
display: block;
position: absolute;
bottom: -30px;
transition: 300ms;
left: 0;
}
.tumb-wrapper:hover .text {
bottom: 28px;
}
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.bbc.com" target="_blank" class="image">
<img src="https://i.vimeocdn.com/portrait/8070603_300x300" class="project" alt="print-screen"/>
<div class="text">AAA</div>
</a>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.cnn.com" target="_blank" class="image">
<img src="https://lh6.ggpht.com/mSKQgjFfPzrjqrG_d33TQZsDecOoVRF-jPKaMDoGIpMLLT1Q09ABicrXdQH6AZpLERY=w300" class="project" alt="print-screen"/>
<div class="text">BBB</div>
</a>
</div>
</div>
</div>
The transition css property animates whatever change you make. This way, when you hover over the .tumb-wrapper div, the .text div will slide up.
You should note however, that ancient IE versions won't be able to use this

I usually do this with only CSS.
Just save the first and second image right next to each other on one file... then you use css to change the position of the background image. To make things nicer i add a css-animation to the movement of the background image.
Example of my code:
<div id="thumb_Wrapper">
<div class="_Thumb">
<img src="images/Thumb.jpg" class="Animate_left">
</div>
</div>
The CSS
#_Container{position:absolute; bottom -60px; right:2px; width:626px; height:100px;}
._Thumb{position:relative; margin-right:4px; width:100px; height:80px; display:block; float:left; background:#EFEFEF; overflow:hidden;}
._Thumb > img{position:absolute; left:0; height:100%; background-size:cover; background-position:center;}
._Thumb > img:hover{left:-18px; cursor:pointer;}
CSS Animation
.Animate_left{transition:left .3s;}
Now all you have to do is swap out the image.
onHover - the image in the thumbnail will smoothly slide to the left; revealing the rest of the image/ showing the other image.
You can set how far to the left(or right) you want the thumb-image to first appear by adjusting the value of 'left' in the ._Thumb class.
You can set how far the image slides on hover by adjusting the img:hover{left:-18px} to what ever you like; instead of 18px.

collapse row on click

I'm working on this code but I have difficulties implementing properly. I wan to place the arrow in front of the question and synchronize the click event with the text.
jsfiddle.net/tx8paL7L/5/
Can you help me to fix the issue?
HTML:
<div class="container faq_wrapper">
<div class="row">
<div class="span10 offset1">
<p>
</p>
<div class="faq-all-actions">
<a class="faq-expand">Expand All</a> | <a class="faq-collapse">Collapse All</a></div>
</div>
</div>
<div class="row">
<div class="span10 offset1">
<div class="question-wrapper">
<div class="arrows">
</div>
<div class="big-q">
Q</div>
<div class="question">
<div class="arrow"></div><h6>Can I try the software before I buy it?</h6></div>
<div class="answer-wrapper">
<div class="big-a">
A</div>
<div class="answer">
Yes! Simply download a free trial and you'll have instant access to all features for 30 days, absolutely free. We don't require your credit card details or any commitment.</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.answer-wrapper {
display: none;
}
.arrow {
margin: 1em;
}
.arrow::before {
position: absolute;
content: '';
width: 0;
height: 0;
border: .5em solid transparent;
border-left-color: gray;
transform-origin: 0 50%;
transition: transform .25s;
}
.arrow.down::before {
transform: rotate(90deg);
transition: transform .25s;
}
JavaScript:
$(document)
.on('click','.row',function(){
$(this).find('.answer-wrapper').slideToggle();
})
.on('click','.faq-expand',function(){
$('.answer-wrapper').slideDown();
})
.on('click','.faq-collapse',function(){
$('.answer-wrapper').slideUp();
})
var arr = document.querySelector('.arrow');
arr.addEventListener('click', function(event) {
event.target.classList.toggle('down');
});
;

Here is a working fiddle with your javascript, the css still needs a bit of work:
JSFiddle
Basically you were using the wrong selectors for your jQuery.
HTML:
<div class="container faq_wrapper">
<div class="row">
<div class="span10 offset1">
<p>
</p>
<div class="faq-all-actions">
<a class="faq-expand">Expand All</a> | <a class="faq-collapse">Collapse All</a></div>
</div>
</div>
<div class="row">
<div class="span10 offset1">
<div class="question-wrapper">
<div class="arrows">
</div>
<div class="big-q">
Q</div>
<div class="question">
<div class="arrow"></div><h6>Can I try the software before I buy it?</h6></div>
<div class="answer-wrapper">
<div class="big-a">
A</div>
<div class="answer">
Yes! Simply download a free trial and you'll have instant access to all features for 30 days, absolutely free. We don't require your credit card details or any commitment.</div>
</div>
</div>
</div>
</div>
</div>
jQuery:
$(document).ready(function() {
.on('click','.row .question-wrapper',function(){
$(this).find('.answer-wrapper').slideToggle();
$('.arrow').toggleClass('down');
})
.on('click','.faq-expand',function(){
$('.answer-wrapper').slideDown();
$('.arrow').addClass('down');
})
.on('click','.faq-collapse',function(){
$('.answer-wrapper').slideUp();
$('.arrow').removeClass('down');
})
});

you've added position:absolute but done nothing to position the arrow .
add the following styles :
.arrow {
position:relative; // you need to add position relative
margin: 1em;
padding-left:10px;
}
.arrow::before {
position: absolute;
left:100%; // define where you would like the arrow to be placed .
content: '';
width: 0;
height: 0;
border: .5em solid transparent;
border-left-color: gray;
transform-origin: 0 50%;
transition: transform .25s;
}
use position relative and left for perfectly positioning your arrow .
FIDDLE HERE

To put arrow in front of the question you can use right 0 like this:
.arrow::before {
position: absolute;
right: 0;
content: '';
width: 0;
height: 0;
border: .5em solid transparent;
border-left-color: gray;
transform-origin: 0 50%;
transition: transform .25s;
}
When you are layout an element on position absolute, you can "fix" the element relative to the parent if you want (top, bottom, right, left).

Add "left: 190px" to ".arrow::before"
.arrow::before {
position: absolute;
content: '';
width: 0;
height: 0;
border: .5em solid transparent;
border-left-color: gray;
transform-origin: 0 50%;
transition: transform .25s;
left: 190px;
}