How to make SplashScreen show up via Jquery - javascript

I have a game I am making, and I want to create a splash screen that shows up for 3 seconds before the game starts. However, I am unable to accomplish this because I don't know how to make the splash screen show up successfully, also WITHOUT the game starting to run in the background. (The parades start to move as soon as the game loads)
It's a Mardi Gras game, and there's a parade in the back. I want the splash screen to show up (just a white splash screen with the words "Mardi Gras Parade!" appearing) for 3 seconds, then disappear, and the game starts.
Here is the JSFiddle (which unfortunately does not show the parades moving because I can't attach files to the JSFiddle, sorry).
But here is my repo, if you want to clone it and open it up in your browser to see the full animations.
Basically, the Splash Screen should cover the entire left portion of the game (with the grey road) with a white background. It shouldn't cover the right yellow side that has the scoreboard information. I am trying to achieve this using Jquery, but I am unable to do this. I don't think my Jquery actually works, as there are no animations, and I can still see the game background. I got the very simple code from this StackOverflow post.
This is my Jquery code that controls the Splash Screen:
function splash(param) {
var time = param;
setTimeout(function() {
$('#splash').hide();
}, time);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body onload="splash(3000)">
<div class='outer-container'>
<div class='game-window'>
<div id="splash">
<div id="splash-content">Mardi Gras Parade!!!!!!</div>
</div>
<div id="actualGame">
<div id='player' class='playerObject'>
<img class='player-avatar' src='img/person.png' height='50px' />
<!--person img: src='https://www.google.com/imgres?imgurl=http%3A%2F%2Fclipart-library.com%2Fnew_gallery%2F54-540691_others-clipart-helpful-person-generic-person.png&imgrefurl=http%3A%2F%2Fclipart-library.com%2Fclip-art%2F54-540691_others-clipart-helpful-person-generic-person.htm&tbnid=V19QgOYn0jYyzM&vet=12ahUKEwidx5GevcrnAhUJ0KwKHQynD9AQMygBegUIARCJAg..i&docid=hVn27RN51ga3yM&w=920&h=830&q=person&hl=en&ved=2ahUKEwidx5GevcrnAhUJ0KwKHQynD9AQMygBegUIARCJAg'-->
</div>
<div id="paradeRoute">
<div id="dottedLine"></div>
<div id="paradeFloats" class="bothFloats">
<div id="paradeFloat1" class='paradeFloat'>
<img src='img/parade_float_1.gif' height='80px' />
<!-- src: https://www.google.com/imgres?imgurl=https%3A%2F%2Fcdn.clipart.email%2Fb0a85a880dc856c8129f51d506469510_mardi-gras-background-transparent-png-clipart-free-download-ywd_474-256.gif&imgrefurl=https%3A%2F%2Fwww.clipart.email%2Fclipart%2Ftransparent-background-mardi-gras-float-clipart-231098.html&tbnid=QDcU0K_06jcQJM&vet=12ahUKEwj40aPwwsrnAhUFgK0KHU4qCkQQMygEegUIARDsAQ..i&docid=7_c8q7QtWx89bM&w=474&h=256&q=mardi%20gras%20parade%20clip%20art&hl=en&client=firefox-b-1-e&ved=2ahUKEwj40aPwwsrnAhUFgK0KHU4qCkQQMygEegUIARDsAQ -->
</div>
<div id="paradeFloat2" class='paradeFloat'>
<img src='img/parade_float_2.png' height='80px' />
<!-- Adapted from src: https://www.google.com/imgres?imgurl=https%3A%2F%2Fcdn.clipart.email%2F2075f16e1c812d5ba8ecece2b6924d75_mardi-gras-clipart-at-getdrawingscom-free-for-personal-use-_340-270.jpeg&imgrefurl=https%3A%2F%2Fwww.clipart.email%2Fclipart%2Fmardi-gras-float-clip-art-228088.html&tbnid=_LNqQJQgyaHKcM&vet=12ahUKEwj40aPwwsrnAhUFgK0KHU4qCkQQMygLegUIARD7AQ..i&docid=Fv4gfo44aw_StM&w=340&h=270&q=mardi%20gras%20parade%20clip%20art&hl=en&client=firefox-b-1-e&ved=2ahUKEwj40aPwwsrnAhUFgK0KHU4qCkQQMygLegUIARD7AQ -->
</div>
</div>
</div>
</div>
</div>
<!-- Scoreboard -->
<div class='status-window' style='text-align: center'>
<h3>Welcome!</h3>
<hr>
<br>
<p>Score:</p>
<h1 id='score-box'>0</h1>
<br/>
<div>
<b># of beads collected:</b>
<span id="beadsCounter">0</span>
</div>
<div>
<b># of candy pieces collected:</b>
<span id="candyCounter">0</span>
</div>
</div>
</div>
</body>

First remove onload="splash(3000)" from <body>
Create a separate js file and move javascript to end of </body>
...
<script async src="scripts/index.js"></script>
</body>
Script
scripts/index.js
function splash(time) {
return new Promise(resolve => {
setTimeout(() => {
$("#splash").hide();
resolve();
}, time);
});
}
function loop() {
$("#paradeFloats").css({ left: -300 });
$("#paradeFloats").animate(
{
left: "+=850"
},
10000,
"linear",
function() {
loop();
}
);
}
$(document).ready(function() {
// Wait for splash to resolve after 3 seconds, Then call loop()
splash(3000).then(() => {
loop();
});
});
Read more on Promises - Also check out the example section.
CSS
Make the following changes to your CSS, Modify if necessary.
#outer-container {
...
overflow: hidden; // Hide everything outside of #outer-container
}
#splash {
align-items: center;
background-color: #fff;
border: 3px solid #000;
bottom: 0;
display: flex;
justify-content: center;
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 0;
vertical-align: middle;
z-index: 9999;
}
#splash-content {
font-style: italic;
font-size: 30px;
}
Codesandbox Example
https://codesandbox.io/s/laughing-dream-8c4r9

Related

I need to darken an image using javascript within html

css
.image-darken {
transition: 1s;
filter: brightness (10%);
}
javascript
const portfolioItems = document.querySelectorAll('.portfolio-item-wrapper');
portfolioItems.forEach(portfolioItem => {
portfolioItem.addEventListener('mouseover', () => {
console.log(portfolioItem.childNodes[1].classList);
portfolioItem.childNodes[1].classList.add('image-darken');
});
});
HTML
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background"
style="background-image:url(images/portfolio1.jpg"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/quip.png">
</div>
<div class="subtitle">
I built the Quip Ecommerce platform, named a Top 25 Invention by Time
Magazine in 2016.
</div>
</div>
</div>
I want to use javascript to make it so that when I put my cursor over the image, it darkens in one second. And when my cursor leaves, it lightens in one second. I have many portfolio-item-wrapper elements. I want to use javascript because I want this to be my introduction to javascript. I am following a tutorial on youtube.
This is the tutorial video. The part with javascript comes in at about 1:14:00.
This is what the website looks like so far:
Please help me and dumb it down for me, i just started learning to code.
Thanks!
What you're aiming for is typically achieved without any JavaScript, by using the :hover CSS pseudo-class. Taking a non-JavaScript "pure CSS" approach generally allows for simpler solution that is more maintainable in the long run.
In your case, a pure CSS approach is possible by removing your JavaScript and by applying the following changes to your CSS:
/*
Not needed
.image-darken {
transition: 1s;
filter: brightness (10%);
}
*/
.portfolio-item-wrapper {
/* Add transition rule to filter property of the item wrapper */
transition: filter 1s;
}
/* Add styling that applies when the user "hovers" the element. The
"hover" will cause the filtering to be applied to this element */
.portfolio-item-wrapper:hover {
filter: brightness(10%);
}
/* Added for snippet - not needed in your code */
.portfolio-img-background {
min-height:5rem;
}
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background"
style="background-image:url(https://via.placeholder.com/150)"></div>
<div class="img-text-wrapper">
<div class="subtitle">
I built the Quip Ecommerce platform, named a Top 25 Invention by Time
Magazine in 2016.
</div>
</div>
</div>
If you really want to take a scripted approach to this, then you could do the following:
document.querySelectorAll('.portfolio-item-wrapper')
.forEach(item => {
/* Get background element of this item */
const background = item.querySelector('.portfolio-img-background')
/* Add image-darken class to background element on hover event */
item.addEventListener('mouseover', () => {
background.classList.add('image-darken');
});
/* Add image-darken class to background element on hover end */
item.addEventListener('mouseout', () => {
background.classList.remove('image-darken');
});
});
/* Apply transition to the background element of portfolio item */
.portfolio-item-wrapper .portfolio-img-background {
transition: filter 1s;
}
/* Define image darkening */
.image-darken {
filter: brightness(10%);
}
/* Added for snippet - not needed in your code */
.portfolio-img-background {
min-height:5rem;
}
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background"
style="background-image:url(https://via.placeholder.com/150)"></div>
<div class="img-text-wrapper">
<div class="subtitle">
I built the Quip Ecommerce platform, named a Top 25 Invention by Time
Magazine in 2016.
</div>
</div>
</div>
Hope that helps!
Another way would be to overlay the image with a grey overlay that shall enable you to have dark effect on the image in the background.
.layer {
background-color: rgba(248, 247, 216, 0.7);
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.card-title {
position: absolute;
top: 36%;
font-size: 2.0em;
width: 100%;
font-weight: bold;
color: #fff;
}
.card {
position: relative;
text-align: center;
}
HTMl Patch
<div class="card" id="card">
<img src="{{Path_to_featured_image}}"/>
<div class="card-title" id="card-title">{{Heading_or_slug}}</div>
</div>
JS
$( "#card-title" ).hover(
function() {
$( this ).addClass( "layer" );
}, function() {
$( this ).removeClass( "layer" );
}
);
you can also set unset the classes on realtime using Javascript if you want to control it dynamically using various parameters like id, class or even tag to select the effected element.
I advise you use JavaScript addEventListener 'hover', function(){getEl......ById....style.opacity=0.5}

jQuery .hover() code not executing

I want my divs to change colour upon hovering over them, but the code is not executing even when I'm hovering. I'm not completely sure why, but I think there could possibly be an issue with the fact that I'm using a z-index on the class I want to hover over.
Html with script:
$(".eventContents").hover(
function() {
$(".eventContents").css("background-color", "yellow");
})
//making events square
var cw = $('.eventContain').width();
$('.eventContain').css({
'height': cw + 'px'
});
.eventContain {
position: relative;
margin-bottom: 10px;
z-index: -1;
background-size: cover;
}
.eventContents {
color: white;
padding: 5px;
position: absolute;
bottom: 0;
left: 0;
}
.eventContents h2 {
font-size: 2em;
font-family: 'Montserrat', sans-serif;
}
.eventContents p {
font-size: 1em;
font-family: 'Roboto', sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="events">
<row>
<div class="col-sm-4">
<div class="eventContain" style="background-image:url(img/events/leaf.jpg)">
<div class="eventContents">
<h2 class="eventName">Title of Event</h2>
<p>short description goes about here.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="eventContain" style="background-image:url(img/events/12.jpg)">
<div class="eventContents">
<h2 class="eventName">Title of Event</h2>
<p>short description goes about here.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="eventContain" style="background-image:url(img/events/1.jpg)">
<div class="eventContents">
<h2 class="eventName">Title of Event</h2>
<p>short description goes about here.</p>
</div>
</div>
</div>
</row>
</section>
Here is the fiddle, the issue is more prominent here:
https://jsfiddle.net/jakexia72/x7jLp17z/#&togetherjs=os0pjD0RNr
It seems to work for me, if I understood correctly, but here's a way to hover both on and off and use this instead of .eventContents twice more..
$('.eventContents').hover(
function() {
$(this).css('background-color', 'yellow');
},
function() {
$(this).css('background-color', 'red');
}
);
fiddle
https://jsfiddle.net/Hastig/4fjn0ndb/1/
The elements are being correctly hovered and the code is getting executed I've tested it, the problem is maybe that your elements are position:absolute; and they're all in top of each other, also they don't have a defined height and it's necessary because we are talking about div elements not img, maybe you'd want to check out your code a little bit better.
You'll want to put a top:0px; to your .eventContents because it's hidden on top (at least for this example)
One last thing, if you want to refer to the actual hovered element, you should use $(this) instead of the class name because it'll execute the code for all the elements with the class and not only the hovered one.
The negative z-index is the reason why the hover is not working, to fix it, make sure that the z-index of the element you want to hover over is positive. To avoid affecting the top nav bar, move the nav bar to the bottom of the html code file allowing it to naturally appear on top of everything else, avoiding the need to use a negative z-index on eventContain.

Simple Javascript Image Gallery - with pagination dots and Mutliple Instances

I'm new to Javascript, but I've been teaching myself CSS and some php so I'm hoping to learn a bit. I've been looking all over the last couple days to figure out what I want, hopefully this isn't a dumb question.
I'm trying to build mini-image galleries for a page of porfolio projects of mine. I've got a page of about 8 large images - each one for a different project. I'm trying to get it where if you click on an image it will load the next image of that project (Mission accomplished! I've gotten that with a code I found online)
But I also want pagination dots (basically, images of circles), like I've seen on other websites, to represent the images in the set. So if there's three images of a project, you'll see three dots and clicking on the third dot takes you to the third image -- and that dot image replaces with the 'selected dot' image. Make sense?
I've been looking all day for scripts and examples of how to do this, and this is as far as my Javascript has gotten. This is the script for the first project. With the others I input the same script, but change the variables. img1 becomes img2 then img3 and so on. Can anyone tell what's wrong?
<div class="project" id="proj1">
<script type="text/javascript">
var img1 = [
"img/portf/tiger1.jpg",
"img/portf/tiger2.jpg",
"img/portf/tiger3.jpg"
];
img1.current = 0;
function showImage1(i) {
$('#imag1').fadeOut( function() {
this.src = img1[img1.current];
$(this).fadeIn();
});
}
function NextImage1() {
img1.current = (img1.current+1) % img1.length;
showImage1(img1.current);
}
function PreviousImage1() {
if (--img1.current < 0) { img1.current = img1.length - 1; }
showImage1(img1.current);
}
onload = function(){
showImage1(0);
};
</script>
<div class="projname">
<div class="ProjectTitle">
Tigercat Website
</div>
<div class="PaginationButtons">
<img src="img/active.gif" />
<img src="img/inactive.gif" />
<img src="img/inactive.gif" />
</div>
<div class="clear"></div>
</div>
<div class="projwindow">
<a href="javascript:NextImage1()">
<img src="img/portf/tiger1.jpg" name="Tigerc" width="800" height="600" id="imag1" />
</a>
</div>
</div>
You can see what I have so far here: http://www.gmisen.com
Thanks so much for the help!!
Might not be the greatest learning experience, but you can easily achieve this with the jQuery cycle plugin: http://jquery.malsup.com/cycle/int2.html (take a look at the pager example)
here's a demo: http://jsfiddle.net/69LNJ/
HTML
<div class="slideshow">
<img src="http://flickholdr.com/400/400/cat/bw">
<img src="http://flickholdr.com/400/400/cat/bw/1">
<img src="http://flickholdr.com/400/400/cat/bw/2">
</div>​
JS
$(function() {
$('.slideshow').before('<div id="nav">').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
pager: '#nav'
});
})​;
CSS
#nav{
position: absolute;
top: 20px;
left: 20px;
z-index: 1000;
}
#nav a{
background-color: cyan;
border-radius: 10px;
height: 20px;
width: 20px;
display: block;
text-indent: -1000px;
float: left;
margin-right: 10px;
}
#nav a.activeSlide{
background-color: blue;
}
​

Center fadeIn image

I'm building a simple image gallery with jquery but running into an annoying problem. Since the images are of various sizes I have centered them all to make it look even. However the built in fadeIn/fadeOut methods throw this centering awry and I'm not completely sure what is going on. I tried manually adding the centering class again then manually adding css but cannot get the image to center once it has been turned visible. Thoughts?
css -
.center { margin: 0 auto; }
img.invisible { display: none; }
img.visible { margin: 0 auto; display: block;}
markup -
<div id="content" class="center gallery">
<img src="images/event/event_1.jpg" alt="alt-text" class="visible" />
<img src="images/event/event_2.jpg" alt="alt-text" class="invisible" />
<img src="images/event/event_3.jpg" alt="alt-text" class="invisible" />
<div id="selection" class="overlay">
<div class="select first">
<img src="images/event/event_1_small.jpg" />
</div>
<div class="select">
<img src="images/event/event_2_small.jpg" />
</div>
<div class="select">
<img src="images/event/event_3_small.jpg" />
</div>
</div>
jQuery -
function updateImage(img_num) {
var cur_img = $("#content img.visible");
var next_img = $('#content img[src^="' + img_path + img_num + '.jpg"]');
cur_img.fadeOut('600',function() {
next_img.fadeIn('600');
next_img.removeClass("invisible").addClass("visible");
cur_img.removeClass("visible").addClass("invisible");
});
}
You are adding margin: 0 auto; only to the .visible class, you need to apply that to all of your images:
.gallery img{margin:0 auto;display:none}
.gallery img.visible{display:block}
Okay well that was surprising. To fix this problem I tried using fadeTo which revealed that the problem was the images once being made visible were given display: inline; so all it took to fix this problem was.
.gallery { text-align: center; }
I thought jQuery was just changing the opacity but it appears to also change the display. Tricky.

Take snapshots of flash videos

How do I link to snapshots of embedded flash videos instead of the actual flash videos to reduce loading times of a site?
Yes, and in fact this is a method that is often employed. You start with an image with a play button overlay. When it's clicked, the image element is replaced with a flash element that plays the video.
Perhaps something like the following:
<script>
$(function () {
$("img.thumbnail").click(function (e) {
$(e.parentNode).addClass("play");
});
});
</script>
<style>
.toggler .player { display: none; }
.toggler.play .player { display: block }
.toggler.play .thumbnail { display: none }
</style>
<div class="toggler">
<img class="thumbnail" src="thumbnail.jpg">
<div class="player">
<!-- embed your player here -->
</div>
</div>

Categories

Resources