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.
Related
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');
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.
Heres basically what the code looks like, it should run if pasted in sublime, what i'm trying to do is get the div to show when the page is loaded and then hide on scroll but when the button is clicked it should show wherever you are on the page. The codes a bit rough but its just a test page
$(window).scroll(function() {
if ($(this).scrollTop()>0)
{
$('.fade').fadeOut();
}
else
{
$('.fade').fadeIn();
}
});
$(function(){
$(".box").click(function(){
$(this).find(".fade").fadeIn();
}
,function(){
$(this).find(".fade").fadeOut();
}
);
});
window.onscroll = function()
{
var left = document.getElementById("left");
if (left.scrollTop < 60 || self.pageYOffset < 60) {
left.style.position = 'fixed';
left.style.top = '60px';
} else if (left.scrollTop > 60 || self.pageYOffset > 60) {
left.style.position = 'absolute';
left.style.margin-top = '200px';
}
}
body {
height: 2000px;
}
.fade {
height: 300px;
width: 300px;
background-color: #d15757;
color: #fff;
padding: 10px;
}
.box{color: red;}
#left{
float: left;
width: 20%;
height: 200px;
background: yellow;
position: fixed;
top: 0;
left: 150px;
}
<div class="box">
<div class="fade" id="left">
show div / hide on click (NOT HOVER)
</div>
<br><br><br><br><br><br><br><br><br><br><br><br>
<div style="margin-left: 90% !important;">
<button style=" position: fixed;
/* margin-right: -40% !important; */
margin-top: 0%;
background-color: red;
color: #fff;
padding: 10px 10px;
display: block;
width: 54%;
float: right;
top: 0;">show div again</button></div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'>
This could work. If box is clicked, check if .fade element is already visible. If it is, then hide it, if not, show it.
$(".box").click(function(){
if($(".fade", this).is(":visible"))
{
$(".fade", this).fadeOut();
}
else
{
$(".fade", this).fadeIn();
}
});
You can use toggle since you need to alternate fadeIn and fadeOut on click
Replace hover
$(function(){
$(".box").hover(function(){
$(this).find(".fade").fadeIn();
},function(){
$(this).find(".fade").fadeOut();
}
);
});
With toggle
$(function(){
$(".box").toggle(function(){
$(this).find(".fade").fadeIn();
},function(){
$(this).find(".fade").fadeOut();
}
);
});
a quick look at the doc would have saved you headaches: http://api.jquery.com/click
It`s not working for reason - you create buttons dynamically because of that you need to call them with .live() method if you use jquery 1.7
but this method is deprecated (you can see the list of all deprecated method here) in newer version. if you want to use jquery 1.10 or above you need to call your buttons in this way:
$(document).on('click', 'selector', function(){
// Your Code
});
Your code will be something like this.
$(document).on('click', '.box', function(){
$(this).find(".fade").fadeIn();
},function(){
$(this).find(".fade").fadeOut();
});
I have two divs.
1 : where background image is loaded
2 : where loader gif is loaded.
what I want is , when there is a window.load() event is called then loader gif should displayed , and when background image is fully loaded , then loader gif should be removed. that's what I want to achieve.
$(window).load(function (){
$('.background_image_div').load(function(){
$('.gif_loader_image').hide();
});
});
// this code is not working.
.background_image_div{
background: url(http://www.banneredge.com/images/portfolio.jpg);
width: 600px;
height: 300px;
margin: 0 auto;
border: thin black solid;
z-index: 900;
}
.gif_loader_image{
position: absolute;
width: 50px;
height: 50px;
background: url(https://media0.giphy.com/media/3oEjI6SIIHBdRxXI40/200_s.gif);
// border: thin red solid;
left: 55%;
bottom: 15%;
z-index: 1001;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gif_loader_image"></div>
<div class="background_image_div">
</div>
Thank you.
instead of $(window).load(function (){ do a $( document ).ready(function() { as,
$( document ).ready(function() {
// Handler for .ready() called.
$('.background_image_div').load(function(){
$('.gif_loader_image').hide();
});
});
EDIT Caveats of the load event when used with images as taken from here, .load API
EDIT 2 try a poller, keep polling and check for the image inside the div using .length > 0. Do some changes to your html,
Keep a div and then an image tag inside it with this structure, <div id="backgroundImageDiv"><img src="whatEverTheURLIs" id="backgroundImageID"></div>
Inside your poller check if $("#backgroundImageDiv > #backgroundImageID").length() > 0
If the condition satisfies, hide the gif loader using .hide(). Check for the syntaxes please.
By poller I mean an interval timer.
You can do as like this way.
Just see this link
<div class="feature"><div class="loader"><img src="http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/1-0.gif"></div></div>
$(function(){
var bgimage = new Image();
bgimage.src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg";
$(bgimage).load(function(){
$(".feature").css("background-image","url("+$(this).attr("src")+")").fadeIn(2000);
$(".loader").hide();
});
});
http://jsfiddle.net/n4d9xxon
You can try like this :
$(document).ready(function (){
$('.gif_loader_image').fadeOut(1000);
});
body{
background: url(http://www.banneredge.com/images/portfolio.jpg);
width: 100%;
height: auto;
}
.gif_loader_image{
position: fixed;
width: 100%;
height: 100%;
left: 0px;
bottom: 0px;
z-index: 1001;
background:rgba(0,0,0,.8);
text-align:center;
}
.gif_loader_image img{
width:30px;
margin-top:40%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gif_loader_image">
<img src="https://media0.giphy.com/media/3oEjI6SIIHBdRxXI40/200_s.gif" alt="Loader..."/>
</div>
<div class="background_image_div"></div>
The main problem is that your $(window).load doesn't even fire
Why
This won't work since the .load() method was fully removed by jQuery 3 and since you are working with the version 3.1.1 it's not a surprise that your code doesn't work. You have to use now the .on() method to achieve the same effect
So
$(window).load(function (){
$('.background_image_div').load(function(){
$('.gif_loader_image').hide();
});
});
would turn into
$(window).on('load', function (){
$('.background_image_div').on('load', function(){
$('.gif_loader_image').hide();
});
});
Notice
Since you have already the $(window).load function at the beginning you don't have to define it again for your background image because this method will only be fired when all images are fully loaded so I think in your case this should also do the job.
jQuery
$(window).on('load', function () {
$('.gif_loader_image').hide();
});
I'm looking for the best way to do a progress bar (in my case it's a life bar for a game) in an html5 canvas.
I don't know if it's better to use javascript and dom element, or draw this bar directly in the canvas.
I need an update function, for example myBar.updateValue(40), and I need to show the new bar without refresh all the page or all the canvas, of course.
Do you know something like that? An existing script? Thanks!
It’s very easy in HTML/CSS:
<style>
#progress-holder{width:400px;height:20px;background:grey}
#progress{width:0;height:100%;background:black}
</style>
<div id="progress-holder">
<div id="progress"></div>
</div>
<script>
var progress = document.getElementById('progress');
function updateValue(perc) {
progress.style.width = perc+'%';
}
updateValue(40);
</script>
DEMO: http://jsbin.com/EGAzAZEK/1/edit
And animating with CSS: http://jsbin.com/EGAzAZEK/3/edit
HTML:
<div class='progress'>
<div class='progress-bar' data-width='//Enter a percent value here'>
<div class='progress-bar-text'>
Progress: <span class='data-percent'>//This is auto-generated by the script</span>
</div>
</div>
</div>
CSS:
html, body {
margin: 0;
padding: 15px;
width: 100%;
height: 100%;
position: relative;
color: #fff;
}
.progress {
position: relative;
width: 100%;
height: 30px;
}
.progress-bar {
margin-bottom: 5px;
width: 0%;
height: 30px;
position: relative;
background-color: rgb(66, 139, 202);
}
.progress-bar-text {
position: absolute;
top: 0px;
width: 100%;
text-align: center;
/*
Do not change the values below,
unless you want your text to display away from the bar itself. */
line-height: 30px;
vertical-align: middle;
}
jQuery:
$('.progress-bar').each(function (){
var datawidth = $(this).attr('data-width');
$(this).find("span.data-percent").html(datawidth + "%");
$(this).animate({
width: datawidth + "%"
}, 800);
});
Link to JSFiddle
The HTML data-width attribute is used to track the percent the bar should be set to. Change it to your liking.
The jQuery script works with ALL progress bars on your page (See the JSFiddle, so you don't have to copy and paste the same jQuery for every new progress bar.
(Just be sure to keep the structure of the HTML, or change it to your liking).
The div "progress" is just an expander, it can be named whatever your want - without you having to change the jQuery.
EDIT:
If you can use Javascript & HTML, don't use a canvas. Canvas (imho) are good for only 1 thing: Seat bookings for concerts, theaters and alike.