Develop Reference

How do I create a fade in effect on my click to call button using gsap scrolltrigger?

/* CONTACT BUTTON */
.contact-button {
position: fixed;
bottom: 20px;
right: 25px;
text-decoration: none;
padding: 15px 15px;
font-size: 20px;
border-radius: 20px;
border: rgb(39, 152, 116, 0.7);
background-color: rgba(39, 152, 116, 0.75);
color: rgba(255, 249, 249, 0.776);
}
.contact-button:hover {
border: rgb(29, 112, 86);
cursor: pointer;
background-color: rgb(29, 112, 86);
}
// Creating the ScrollTrigger for Click-to-Call Button
gsap.registerPlugin(ScrollTrigger);
const callButton = document.querySelector(".contact-button");
ScrollTrigger.create({
trigger: callButton,
start: "#help, top",
endTrigger: "#signup",
end: "top top",
});
I am creating a website and recently added a click to call button that has a fixed position. I dont want the button to appear on my homepage though but I want it to appear as soon as a user scrolls past the homepage.
I added both the gsap and scrolltrigger scripts to my html document and then registered the plugin in my script file before writing code that was supposed to create the desired effect. On save, nothing happened and I'm looking for help to get it working.

Did you have a gsap tween somewhere for the Scrolltrigger to call?
Also, you need some content to scroll past before the scrolltrigger element shows up.
Here's one solution - https://codepen.io/geedix/pen/ZEjrqXX
gsap.to(".contact-button", {opacity:1, scrollTrigger:"#signup"})

Mobile header issue on iphone when scroll up

On my website, I have added the fixed position to the header, and its working fine in desktop version and android os phones. but in iPhone when the user scrolls down it works fine but as fast the user starts to scroll up an unknown part of the div appears in the back of the header and it overlaps all the content on the website. I have tried to find that part of div but it's not working. please help.
here is my header code:
#header.header-fixed {
position: fixed;
left: 0;
top: 0;
right: 0;
z-index: 9997;
background: rgba(0, 0, 0, 0.98);
height: 70px;
padding: 15px 0 0;
transition: all 0.5s;
border-bottom: 2px solid #13aafe;
}

Magnific popup transparent png as grey

I am facing problem with magnific popup - when transparent PNG opens, the transparent parts are grey. I have searched for solution but without success. While changing img.mfp img background color to white it changes but it shows the white color and that is not good for me. I need to have it just like the whole background - black with opacity 0.01 (if I am not mistaken)...I did not changed any relevant code in CSS or JS related to Magnific popup.
Can anyone help? Thanks in forward

to add a white background under the popup image I use this code
.mfp-figure:after {
content: '';
position: absolute;
left: 0;
top: 40px;
bottom: 40px;
display: block;
right: 0;
width: auto;
height: auto;
z-index: -1;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: rgba(255, 255, 255, 1); /* white background */
}

Hiding parent div on click

I'm enlarging images on click and moving them so they don't go off the page. I have a parent div behind each that is black pic so that when I hover, I can change the opacity of the pic to make it look like it's darkening. All of this works fine, however, when I enlarge and move the photo there is a black box left behind. I need that to disappear but when I try it makes the child pic disappear too.
here's the code, jsfiddle posted beneath
HTML
<div id="Gpic1">
<img class='galleryPics' id='pic1' src='http://i.imgur.com/urxD24P.jpg?1'>
</div>
CSS
#Gpic1 {
float: left;
width: 187px;
height: 280px;
margin-left: 5%;
display: inline-block;
background: black;
padding: 0;
}
#pic1{
width: 187px;
height: 280px;
}
.enlarged {
border: 10px solid #e5dbcc;
position: absolute;
-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);`
}
JQUERY
$('#Gpic1').hover(function () {
if (!$(this).find('img').hasClass('enlarged')) {
$(this).find('img').fadeTo(500, 0.5);
}
}, function () {
$(this).find('img').fadeTo(500, 1);
});
$('#pic1').click(function () {
$(this).fadeTo(0, 1);
if ($(this).hasClass('enlarged')) {
$(this).removeClass('enlarged');
$(this).stop().animate({
width: 187,
height: 280
}, 0,
function () {
$(this).parent().removeClass('ontop');
});
} else {
$(this).addClass('enlarged')
$(this).parent().addClass('ontop');
$(this).stop().animate({
width: 533,
height: 800,
left: +590,
bottom: +50
}, 200);
}
});

Add this at the end of the animate for the pic onClick Event
$('#Gpic1').css('background','none');
Here is a fiddle.
http://jsfiddle.net/Td6tT/3/

When you try to remove #Gpic1, all children are removed even if they are absolutely positioned.
If you just want the black background to go away, you can remove the black background from the containing div.
$("#Gpic1").css("background-color", "transparent");
Or, if you really want to remove the containing div, then you will need to make the image a child of some other object on the page. If you're using absolute positioning, then you could just make the image a child of the body object instead of #Gpic1 so then you can remove #Gpic1 and the image won't disappear.
// move pic1 to be a child of the body so we can remove Gpic1
$("#pic1").appendTo(document.body);
$("#Gpic1").remove();

$('#Gpic1').css('background','none');

Overlapping DIV Elements and onclick

i'm about to write my own interactive Tutorial with HTML, Javascript and css. Now i had the idea to create an DIV-element that represents an glowing rectangle to mark specific areas. The problem is when I change the position of the glow-rectangle, to highlight an element that is clickable, the glow rectangle is overlapping the clickable element. So the clickable element is no longer clickable. Is there a way to "disable" the glow-rectangle so it's visible but no longer blocking the underlaying element?
Here is my code:
<div id="hauptteil">
<div id="block" onclick="step2();" style="cursor: pointer">
</div>
<div id="glowDiv">
<div id="glow" class="glow"><img src="images/transBlock.png"/></div>
</div>
</div>
Here is the css code:
#glowDiv {
width: 200px;
height: 100px;
position: absolute;
top: 200px;
left: 200px;
}
.glow {
margin: auto;
width: 147px;
height: 90px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
-moz-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
}
#block {
width: 50px;
height: 50px;
background: red;
}
To visualize my problem. On my page I have a DIV-Element that is visible as a red block. When I start my tutorial, I change the position of my glow-DIV to cover the red block. So it seems that the red block is glowing.

Back in 2013 you had to use a script to solve this problem, but nowadays, pointer-events is widely supported. Use it!
Normally you would just user the pointer-events css property. Guess what? IE doesn't support it... With a little help from our friend jquery we can emulate this however!
My approach is to capture the click event in the glow (the absolute positioned div) and check if there are any other elements overlapping the x-y coordinate of the mouse click.
Warning: jQuery ahead!
First just capture the click event:
$('.glow').on('click', function(e) { // our trick here });
Then determine the coordinates of the mouse cursor. Quite easy as jQuery helps us out by giving the coordinates in the event object
var cursorX = e.pageX;
var cursorY = e.pageY;
Now we need to traverse all dom elements that are possibly sitting below our glow div that we want to receive the click event as well.
$('.class-possibly-below').each(function(index, element) { // our calculations here });
If we can get the position relative to the window and it's width and height we can calculate if our cursor was over it while clicking. In that case our cursorX and cursorY values would be in between the left-position and left-position + width (and top- and height respectively) of our DOM element we're traversing. Yet again jQuery helps a bit:
var offset = $(element).offset();
xRangeMin = offset.left;
xRangeMax = offset.left + $(element).outerWidth();
We use offset() instead of position() because the latter returns the position relative to it's parent. And we use the outerWidth() and outerHeight() instead of width() and height() respectively because the former also includes padding and border.
Now check if the x and y coordinates are in between the range-min and range-max. If so, trigger the click event on this element.
if(cursorX >= xRangeMin && cursorX <= xRangeMax && ...) {
$(element).trigger('click');
}
You want some action? Check out this fiddle!

As I mentioned in my comment, a different approach would be to add the glow class to the active div:
<div id="hauptteil">
<div id="block" onclick="step2();" class="glow">
</div>
#block {
width: 50px;
height: 50px;
background: red;
}
.glow {
cursor:pointer;
-webkit-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
-moz-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
}

You can use pointer-events: none; to ignore the possible click event of an element. However as stated in the comments the method you are doing does not seem to be the best of options.
#glowDiv {
width: 200px;
height: 100px;
position: absolute;
top: 200px;
left: 200px;
pointer-events: none;
}
The pointer-events property allows for control over how HTML elements respond to mouse/touch events – including CSS hover/active states, click/tap events in Javascript, and whether or not the cursor is visible.
Placing this on your overlaying element will make it transparent to click events.
However this does not work in IE
This is my suggestion am curious if anyone else has another option. I am using the same thing on my website and simply ignoring the overlay on IE using conditional tags.

Here's a simple pin you can check it out http://codepen.io/ElmahdiMahmoud/pen/Ewlto hope this can help!