there are several posts about this, but for some reason, I can't seem to get it to work. I have a floating button that I would like to appear while scrolling. I've added the script to my header and css. Not sure what I'm doing wrong here.
Some posts I've tried to work with:
Show div on scrollDown after 800px
Make div appear on scroll in wordpress
Make <div> appear upon scrolling
--PHP--
add_action('wp_header', 'subscribe_float');
function subscribe_float() {
?>
<script type="text/javascript">
jQuery(function($) {
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 50) {
$('#custom_html-12').slideDown();
} else {
$('#custom_html-12').slideUp();
}
});
});
</script>
<?php } ?>
--CSS--
#custom_html-12 {
background: #fbbd14;
position: fixed;
bottom: 55px;
z-index: 999;
right: 20px;
padding: 5px;
color: #fff;
border-radius: 4px;
display: none;
}
The hook is wp_head, not wp_header. Thus, your code should be:
add_action('wp_head', 'subscribe_float');
Related
I've noticed on the mobile version (iOS) of my website that the main navigation requires links to be tapped twice for the page to redirect. After removing various styles/bits of code I found the cause of the problem, it's my Javascript for a 'sliding line' hover effect.
My basic understanding would be that as the script is still running on mobile, when it's not really needed, it means the navigation is running/expecting a hover effect and once that's run you can then click a link as you intend?
The script works perfect on desktop, so I don't want to change any of the functionality but is there something I can add to prevent this bug on mobile devices? Alternatively, would a javascript 'media query' type thing, stopping the script from running below 1000px be a better solution? If so what would be the best way to implement that?
Thank in advance!
CodePen: https://codepen.io/moy/pen/pZdjMX
$(function() {
var $el,
leftPos,
newWidth,
$mainNav = $(".site-nav__list");
$mainNav.append("<div class='site-nav__line'></div>");
var $magicLine = $(".site-nav__line"),
$currentMenu = $(".current-menu-item");
$magicLine
.width($currentMenu.length ? $currentMenu.width() : 0)
.css("left", $currentMenu.length ? $currentMenu.find("a").position().left : 0)
.data("origLeft", $magicLine.position().left)
.data("origWidth", $magicLine.width());
var hoverOut;
$(".site-nav__list li a").hover(function() {
clearTimeout(hoverOut);
$el = $(this);
leftPos = $el.position().left;
newWidth = $el.parent().width();
if (!$magicLine.width()) {
$magicLine.stop().hide().css({
left: leftPos,
width: newWidth
}).fadeIn(100);
} else {
$magicLine.stop().animate({
opacity: 1,
left: leftPos,
width: newWidth
});
}
},
function() {
hoverOut = setTimeout(function() {
if (!$currentMenu.length) {
$magicLine.fadeOut(100, function() {
$magicLine.css({
left: $magicLine.data("origLeft"),
width: $magicLine.data("origWidth")
});
});
} else {
$magicLine.stop().animate({
left: $magicLine.data("origLeft"),
width: $magicLine.data("origWidth")
});
}
}, 100);
}
);
});
/* Header */
.page-head {
background: white;
border-top: 2px solid #ddd;
box-sizing: border-box;
overflow: hidden;
padding: 0 30px;
position: relative;
width: 100%;
}
.page-head__logo {
background-image: none;
float: left;
padding: 0;
text-shadow: none;
width: 200px;
}
/* Nav */
.site-nav {
display: block;
float: right;
text-align: center;
width: auto;
}
.site-nav__list {
list-style: none;
margin: 0;
padding: 0;
position: relative;
top: auto;
left: auto;
width: auto;
}
.site-nav__list li {
background: none;
display: block;
float: left;
margin: 0;
padding-left: 0;
text-transform: uppercase;
}
.site-nav__list a {
box-sizing: border-box;
display: block;
font-weight: 900;
padding: 30px 15px;
transition: color .15s;
text-shadow: none;
}
.site-nav__list a {
color: red;
}
/* Underline */
.site-nav__line {
background: red;
content: "";
display: block;
height: 2px;
position: absolute;
top: -2px;
left: 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<header class="page-head">
Logo Here
<nav class="site-nav ">
<ul class="site-nav__list">
<li class="site-nav__item ">About</li>
<li class="site-nav__item">Looooonger Title</li>
<li class="site-nav__item">Company</li>
<li class="site-nav__item">About</li>
<li class="site-nav__item">Login</li>
<li class="site-nav__item">Apply</li>
</ul>
</nav>
</header>
</body>
if your problem is you to double click it before redirecting to its page, Try thi
$('.site-nav__list a').click(function(){
$(this).click();
});
the function is when you click the navigation the script will click it again,
If you're sure that the cause of the problem is running that script on mobile screens, you can call sliding script only on desktops with this code:
if ( $(window).width() > 739) {
//Desktop scripts
}
else {
//mobile scripts
}
You can change the screen width of devices you want to script work on them by changing 739. After that your script will run only on screens larger that 739px or what you've choose.
Update
If you want to everything works correct after resizing, You should do a little trick.
Personally, I use this method because it's the only way that makes you sure about bugs and problems. The trick is reloading the page after resizing.
It's not costly in many cases because most of the things cashed and don't need to redownloading. There are lots of methods to do that, but I use the below one because it works good and is simple and short:
window.onresize = function () {
location = location;
}
You just need to add this lines at the end of your script file. After resizing, everything will work well again.
How it works?
When you resize the window, a javascript event will emit. What we done in the last code is overriding the event listener of that event. So when the user resize the window, the location = location; code will execute.
What this line means? the location object is a property of window object and keeping information about current window url. When you change the location of a window, browser page will reload to getting the new window of the new location (more info about location).
What we done here is assigning current location to the location. So browser thinks we had a redirect request and reloads the page. But because the new location is the same object as previous one, the page will reload instead of redirecting to somewhere else.
I have read a lot of the questions on here but can't find one that fixes this. I have programmed a div to follow my cursor. I only want it to appear when the cursor is over #backgroundiv. I have got it working but it sometimes randomly flickers on chrome and disappears entirely on firefox. Even more randomly is it sometimes appears to work and then starts flickering. I have tried a variety of things from hover to mouseenter/mouseover but nothing seems to work.
What I want is for #newdot to appear when the cursor is over #backgroundiv and then follow the cursor around the div. Any help would be much appreciated.
//hide dot when leaves the page
$(document).ready(function() {
$("#backgroundiv").hover(function() {
$("#newdot").removeClass("hide");
}, function() {
$("#newdot").addClass("hide");
});
});
//div follows the cursor
$("#backgroundiv").on('mousemove', function(e) {
//below centres the div
var newdotwidth = $("#newdot").width() / 2;
$('#newdot').css({
left: e.pageX - newdotwidth,
top: e.pageY - newdotwidth
});
});
//tried below too but it doesn't work
/*$(document).ready(function(){
$("#backgroundiv").mouseenter(function(){
$("#newdot").removeClass("hide");
});
$("#backgroundiv").mouseout(function(){
$("#newdot").addClass("hide");
});
}); */
#backgroundiv {
width: 400px;
height: 400px;
background-color: blue;
z-index: 1;
}
#newdot {
width: 40px;
height: 40px;
background-color: red;
position: absolute;
z-index: 2;
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="newdot"></div>
<div id="backgroundiv"></div>
There is not issue but a logical behavior, when you hover on the blue div you trigger mouseenter so you remove the class and you see the red one BUT when you hover the red one you trigger mouseleave from the blue div thus you add the class and you hide the red one. Now the red is hidden you trigger again the mouseenter on the blue div and you remove the class again and the red div is shown, and so on ... this is the flicker.
To avoid this you can consider the hover on the red box to make the red box appear on its hover when you lose the hover from the blue one.
$(document).ready(function() {
$("#backgroundiv").hover(function() {
$("#newdot").removeClass("hide");
}, function() {
$("#newdot").addClass("hide");
});
});
//div follows the cursor
$("#backgroundiv").on('mousemove', function(e) {
//below centres the div
var newdotwidth = $("#newdot").width() / 2;
$('#newdot').css({
left: e.pageX - newdotwidth,
top: e.pageY - newdotwidth
});
});
#backgroundiv {
width: 400px;
height: 400px;
background-color: blue;
z-index: 1;
}
#newdot {
width: 40px;
height: 40px;
background-color: red;
position: absolute;
z-index: 2;
}
.hide {
display: none;
}
/* Added this code */
#newdot:hover {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="newdot">
</div>
<div id="backgroundiv">
</div>
I have created an email subscription popup modal. Right now I have the modal set to fade in but instead of that I want the modal to slide up from bottom of the page to the top. I tried slideUp() instead of fadeIn() but it does not work. I feel like I am missing something. Do I need to create another function for the slideUp()? It is a popup modal so it is ready when the window scrolls instead of on a click event. Any help is appreciated. Thank you. My code is below.
$(document).scroll(function() {
if (!$("#mc_embed_signup").data("userClosed")) {
$(".popup-close").click(function(e) {
closeSPopup(e);
});
var a = $(this).scrollTop();
if (a > 400) {
$("#mc_embed_signup").slideUp(600);
}
}
});
function closeSPopup(e) {
e.preventDefault();
$("#mc_embed_signup").data("userClosed", true);
$("#mc_embed_signup").hide();
}
jQuery .slideUp() hides the matched elements with a sliding motion. If you want to slide your popup up, you could use .animate()
$("#popup").show().animate({top: (window.innerHeight / 2 - 50) + "px"}, 1000);
#popup {
display: none;
width: 200px;
height: 100px;
position: fixed;
top: 100%;
left: calc(50% - 100px);
background-color:cyan;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="popup"><div>
.slideDown() should be used, but!.. instead of using top: NN in CSS use the bottom: NN. This way the element "anchors" to it's bottom property, and the .slideDown() will perform from bottom to top!
var $popup = $("#popup");
$popup.slideDown();
#popup {
position: absolute;
transform: translate(-50%, 0);
bottom: 24px; /* don't use top. Use bottom */
left:50%;
width: 300px;
height: 160px;
background:red;
display: none;
}
<div id="popup">Popup ou yeah</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
In the following codes, the header color is transparent. I want to change its color to "#FFF" as I scroll down the page. Please guide me how I can write the relevant js code for it.
Also, could it be done by plain css?
div {
height: 1000px;
width: 100%;
}
#home {
background-color: red;
}
header {
background-color: transparent;
color: ffffff;
height: 100px;
position: fixed;
width: 100%;
top: 0;
z-index: 100;
}
<header>Top Navigation</header>
<div id="home" class="sect"></div>
Pen Try this. It should help you. You should be doing it with either jquery or plain javascript
$(document).ready(function() {
$(window).scroll(function () {
//if you hard code, then use console
//.log to determine when you want the
//nav bar to stick.
console.log($(window).scrollTop())
if ($(window).scrollTop() > 10) {
$('header').css('background-color','#FFF');
}
if ($(window).scrollTop() < 10) {
$('header').css('background-color','transparent');
}
});
});
Did you try with background-color:rgba(0,0,0,0); ?
So I was trying to make a little game but the first step just doesn't work.
This is my code
<div id="box1">
<button id="button">Click Me</button>
<div id="progress-bar"></div>
</div>
$('button').click(function() {
var progressBar = $('#progress-bar'),
width = 0;
progressBar.width(width);
var interval = setInterval(function () {
width += 2.5;
progressBar.css('width', width + '%');
if (width >= 100) {
clearInterval(interval);
}
}, 125)
});
#progress-bar {
width: 0;
background: red;
text-align: center;
overflow: hidden;
height: 4px;
position: absolute;
bottom: 0px;
}
#box1 {
height: 100px;
width: 600px;
position: relative;
border: 1px solid grey;
}
So when clicking the button there will be a progress-bar at the bottom of box1.
When doing a document ready it works but when using the .click it doesn't work.
When doing a document ready it works but when using the .click it doesn't work.
It works when you have a $(document).ready wrapped around your code because that instructs the javascript engine to wait until all js is fully loaded before trying to execute.
If you don't have the $(document).ready and you click before the everything is loaded, then you'll get a console error.
Press F12 to open developer toos and perform the same action, I would suspect you'll see an error in the console.