So I'm trying to build a simple online js game (I'm taking a course at the moment and wanted to have a little experiment). I downloaded the game duck hunt (https://github.com/MattSurabian/DuckHunt-JS) and expanded it from there.
I have added levels / adjust the game fine however I have added a character on the screen by using CSS and adding it into the html (switching the game from a first person view to more a third person perspective)
I would like to add an animation from when you click on the screen water will come from the statues mouth and hit the enimies... at the moment there is a flash when the user clicks however i wish to change this I'm not sure how this would be achieved?
Any help would be grateful.
Flash Screen Code at the moment :
//bind to gun events
this.playfield.on('gun:out_of_ammo',_.bind(function(){this.outOfAmmo();},this));
this.playfield.on('gun:fire',_.bind(function(){
this.flashScreen();
},this));
flashScreen : function(){
$(".theFlash").css("display","block");
setTimeout(function(){
$('.theFlash').css("display","none");
},70);
}
CSS:
.theFlash{
background:#ffffff;
width:900px;
height:500px;
position:relative;
margin:0 auto;
z-index:10;
display:none;
}
You should look up :hover for css http://www.w3schools.com/cssref/sel_hover.asp
:hover {
css declarations;
}
Related
Ive added an animation in CSS, the idea is that when i hover over an image of food it shows me its details as shown:
but when i add a part of css animation code , the card's background becomes transparent.
if i remove the following code it shows the result as described in 1st image, writing this results in 2nd image
.stars, .twinkling, .clouds {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:2400px;
display:block;
}
Rest of code is uploaded on Github
https://github.com/mareyam/Maryam-s-Restaurant
There is a problem with the z-index values, since your Restaurant component is not a children of your App component. The img components have a z-index of 999, that's why you can see the menu images. But the detail block below doesn't. You can solve it by adding the following CSS rule:
.container-fluid {
z-index: 4;
}
However I recommend avoid using too much z-index, it's very hard to maintain. Always try to solve that kind of issue with a proper nesting of your components.
I have an on boarding tour in at my.bonify.de. It offers a similar experience to introjs.
We implemented this in a very ugly way using a cutout div with a very large box-shadow. We would like to improve upon this and use an overlay like introjs since it seems to have much better performance than our dirty hack.
Having read this, I do not understand how introjs works since the element to be highlighted should definitely be in a lower stacking context.
I have tried replicating the behaviour with our own onboarding but I can not get the element in the page to rise above the overlay.
I would like to know how introjs achieves this, I thought that this block of code was the secret but when I put a debugger the class is not added.
Easy, you just put a relative element with higher z-index on top of a fixed element. Sample classes:
.fixed-elem {
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:2;
background: rgba(0,0,0,0.75);
}
.relative-elem {
position:relative;
z-index:10;
}
Here is a working fiddle:
https://jsfiddle.net/7ergcfvq/1/
Look at demo step 1 of intro.js, the <h1>Intro.js</h1> element has .introjs-relativePosition and .introjs-showElement, so it got position:relative and z-index:9999999!important.
And the <div class="intros-overlay">'s z-index 999999, smaller than <h1> & <div class="introjs-helperLayer">
I'm trying to create what I think would be a cool content effect, whereby a dark semi-transparent background covers the entire screen while certain content rises above it, thus creating a highlight effect. I'm a massive JS amateur but I've been using fullPage.js (https://github.com/alvarotrigo/fullPage.js/) to create a scrolling content area, and also used a small drop down jQuery within the FullPage. I set up a function to bring my darkness div to the foreground, and it covers the entire screen as I expected, however, the drop down list within the fullPage simply won't rise above it, no matter what I try.
CSS of the darkness div:
#darkness {
background:rgba(0, 0, 0, 0.5);
display:none;
height:100%;
left:0;
position: fixed;
top:0;
width:100%;
z-index:10;
}
This is my JS function:
function thedarkside () {
console.log ('the dark side');
$('#darkness').fadeTo(200, 1);
}
All of that works as intended. However I can't get my drop down #dd to have a z-index higher than darkness div. This is the general structure of the FullPage.js:
Darkness -->
<-- Darkness
Fullpage -->
Section -->
Form -->
Dropdown -->
<-- Dropdown
<-- Form
<-- Section
<--Fullpage
I set the z-index of drop down to something ridiculous like 100, as I don't want any of the other elements to be above the darkness div. I really only want Dropdownto be above. Anyway if anyone could help me achieve this affect I'd really appreciate it. I'm ok if the solution lies in JS as opposed to CSS.
Thanks,
Mike
It took the JSFiddles for me to discover why it wasn't happening. I had to turn off the css3 flag on start of the FullPage.js and now it works.
Hope this helps anyone else who experiences something similar.
EDIT: Thanks for a lot of great examples on how to solve these. I cant decide between who to accept yet, but I will go though all examples and see which I like the most. Great feedback guys! =D
I normally do these kind of things in flash, but this time it has to be compatible with mac, iPads and all those units too.
So, what do I need help with?
I've got a picture, with some "hotspots" on. I want to be able to click any of those hotspots to show some information.
This should be fairly basic and easy to achieve, but since I've never done this in html before I have to ask you guys =)
So, what would be the best way to do this? It have to be compatible with any browser and device, and it doesnt need to be very advanced. If it's possible to add effects to the box (sliding out, fading in, or anything like that) then thats a nice bonus, but not something I need.
Any help would be great!
BREAKDOWN:
I have a background image with some "hotspots" (numbers 1 and 2 in my example). The users should be able to either hover the mouse over any of these or click it to get more information, as seen in picture #2
This is that happens when you hover/click any of these hotspots.
Text and image is displayed inside a nice little info box.
If the user clicks "more information" it will open up even further to display more information if available. Like in this img:
I don't think the Javascript approach is really necessary here. I created a little CSS-only mock-up for you on JSBin.
Basically the point is that you enclose the image in a relatively positioned div, then absolute position the hotspots inside the same div. Inside the hotspots divs you will have the more info elements, showing only on :hover of their parents.
This makes it simple, and far more accessible.
Update: cropping the image equally from both sides
If you want to keep the image centered and still not use any javascript, you could set the required image as a background-image of the container, and setting its background-position parameters to center center.
You would have to make sure that the width of this div is set to the width of your image, and the max-width to 100%, so that when the window gets resized below the image width it stays at the center.
Now, a problem that I encountered here is how to make the hotspots stay center relatively to the image. I solved it this way:
I created a wrapper div for the hotspots with these characteristics:
margin: 0 auto;
position: relative;
width: 0px;
This basically makes sure that the wrapper div finds the center of our image. Then, you would position the hotspots relatively to the top-center position of the image, instead of the top-left as a starting point.
Then you have what you are looking for.
Working demo
Here's another approach, and in my opinion far superior to using a map or excessive JS. Place <div> elements on top of the element with the background-image and have HTML and CSS do the heavy lifting for you.
See it on JSFiddle
HTML
The HTML should seem pretty each enough to understand, we create <div>s with the class hotspot and rely on certain things being present. Namely .text (to show digit), .hover-popup (to show on hover) and .click-popup (which is inside .hover-popup and is shown when clicked).
<div id="hotspot1" class="hotspot">
<div class="text">1</div>
<div class="hover-popup">
I was hovered!
<div class="click-popup">
I was clicked on!
</div>
</div>
</div>
<div id="hotspot2" class="hotspot">
<div class="text">2</div>
<div class="hover-popup">
I was hovered!
<div class="click-popup">
I was clicked on!
</div>
</div>
</div>
CSS
This is where most of the magic happens, see the comments for further explanation.
/* These two position each hotspot */
#hotspot1 {
left:15%; /* we could use px or position right or bottom also */
top:20%;
}
#hotspot2 {
left:35%;
top:25%;
}
/* General styles on the hotspot */
.hotspot {
border-radius:50%;
width:40px;
height:40px;
line-height:40px;
text-align:center;
background-color:#CCC;
position:absolute;
}
.hotspot .text {
width:40px;
height:40px;
}
/* Show the pointer on hover to signify a click event */
.hotspot .text:hover {
cursor:pointer;
}
/* hide them by default and bring them to the front */
.hover-popup,
.click-popup {
display:none;
z-index:1;
}
/* show when clicked */
.hotspot.clicked .click-popup {
display:block;
}
/* show and position when clicked */
.hotspot:hover .hover-popup {
display:block;
position:absolute;
left:100%;
top:0;
width:300px;
background-color:#BBB;
border:1px solid #000;
}
JavaScript (with jQuery)
Unfortunately you're going to have to use some JavaScript for the clicking part as CSS doesn't have a 'clicked' state (outside of hacks with checkboxes). I'm using jQuery because it's dead easy to do what I want.
$(document).ready(function () {
$('.hotspot').click(function () {
$(this).toggleClass('clicked');
});
});
Creating the arrow
Over at css-tricks you can find a tutorial for attaching an arrow to a element using the :before and/or :after pseudo-elements. You can even 'simulate' a border around them by placing the :after element on top of the :before. But yea, lots of resources on how to do this.
You should be able to use the onclick or OnMouseOver event in the map area (define the href as "").
An example using OnMouseOver is here: http://www.omegagrafix.com/mouseover/mousimap.html
Give a class for that image in html (Ex: imgclass). And in javascript(using jquery), build that hover box in html format and bind it to 'mouseover' event of that image.
For example:
function bindhtmltoimage() {
myimg = $('body').find('.imgclass');
divSlot.each(function (index) {
$(this).bind('mouseover', function () {
try {
//position the hover box on image. you can customize the y and x axis to place it left or right.
var x = $(this).offset().left;
var y = $(this).offset().top;
var position = $(window).height() - ($("#divHover").height() + y);
var widthposition = $(window).width() - ($("#divHover").width() + x);
if (position < 0 || widthposition < 0) {
if (position < 0) {
$("#divHover").css({
position: 'absolute',
left: x + 20,
top: y - $("#divHover").height() - 20
});
}
if (widthposition < 0) {
$("#divHover").css({
position: 'absolute',
left: x - $("#divHover").width(),
top: y + 20
});
}
}
//build your html string for that hover box and apply to it.
$('#divHover').html("your Html content for that box goes here");
$('#divHover').show();
//if you want the box dynamically generated. create the html content and append to the dom.
}
catch (e) {
alert(e)
}
});
});
}
it will work fine in desktop and mobile. if you face any problem in touch devices, bind the function to click event instead of 'mouseover'.
Also, for map approach, i strongly recommend SVG instead of images.
Hey I am trying to make a topbar for my site as a navigation bar. This is what I get currently, how can I make it so that it's connected to the sides and to top. I don't want that space between the page and the bar. Sorry I am very beginner in this. See this picture to see what my page looks like now http://i55.tinypic.com/dgnpro.png
My CSS code for bar
#topbar
{
background-image:url(../images/topbar.png);
background-repeat:repeat-x;
width:100%;
height:50px;
}
add on your css html, body {margin:0; padding:0;} This will make your bar to start of your page from the start without any space.