I'm using Unity3D wth the PowerUI asset and when I try to make a simple div with a transform:translate(100px, 100px) attribute in CSS, the :hover :active and click events only register from the original positon, check it (and try testing it in unity with powerui):
function test(el) {
el.innerHTML = "t";
}
div#thisDiv{
position:absolute;
color:black;
transform:translate(200px, 100px);
}
div#thisDiv:hover{
color:blue;
}
<div id="thisDiv" onclick="test(this)">Bla bla bla</div>
It works fine in the browser obviously, but try putting it in a simple Unity3D scene with PowerUI and you'll see it only registers the original position, not the translated one.
Does anyone know how to fix this? Maybe something editable in the Source?
Related
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;
}
I'm trying to make the .wrapper div a clickable link that goes to the a.icon location. Also, when they hover over the .wrapper div the a.icon:hover state actives, not just when you hover over the icon itself.
Any help would be great.
This is what I have so far:
jQuery(document).ready(function($) {
$(".aca-question-container").hover(function() {
$(".icon").trigger("hover");
});
$(".aca-question-container").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
});
Example: http://jsbin.com/diyewivima/1/edit?html,css,js,output
In HTML5, you can wrap block elements such as your .wrapper div, within anchors. This is a rudimentary version of what I think you're looking for: http://jsbin.com/qegesapore/edit?html,css,js,output
I removed the JS you had there as I'm not sure it's necessary, and obviously some styling will be needing to be tweaked.
There shouldn't be any requirement for JS to achieve this really.
The hover state can still be applied to the icon as per:
.your-anchor:hover .icon {
background: #666;
}
As I commented, you can use jQuery and a class to achieve what you want. Below is the JS: (it must be inside the onload function)
$('div#wrapper').mouseenter(function(){
$('a.icon').addClass('hover');
});
$('div#wrapper').mouseleave(function(){
$('a.icon').removeClass('hover');
});
And, you must not forget, in your CSS you have to replace a.icon:hover with a.icon:hover, a.icon.hover, so that it emulates the hover state when the class is added. Like this:
a.icon:hover, a.icon.hover{
//CSS GOES HERE
}
For the CSS portion- propagating the hover is pretty easy. Just use .wrapper:hover .icon
as the hover effect selector. You can drop .icon:hover, too, since the parent is hovered when the child is hovered.
As for propagating the click down to it... also easy without jQ.
.wrapper:hover .icon{
color:#f00;
}
<div class="wrapper" onclick="this.getElementsByClassName('icon')[0].click()">
icon
testit
</div>
The error generated is the "there's not stackoverflow.com/google.com" error, showing that the link was followed. Slap https:// in front of the href and pull it out of an iframe and you'll be able to fully see it works.
EDIT:
bsod99's fix is cleaner. So long as you can rearrange the DOM and don't need to support ancient relics (pre-HTML5 spec browsers, like Firefox <3.5) (which you probably don't have to do), use his instead.
I have a div with an ondragenter event. When the mouse is entering the div, I want the background to change to a specific image, but the image doesn't change until I let the mouse button up.
If I try to change to a background color, it works fine!
I have also tried to change css class with a background-image and it works, but in my case I can't do that because I don't know which image to show from the css.
HTML
<div id="test" ondrop="drop(event)" ondragenter="enter(event)"></div>
JavaScript
function enter(event) {
$('#test').css('background', '#333 url("test.png")');
event.preventDefault();
}
In my code example the div will get the color #333 when the mouse enters and then get the background image when I let the mouse button up.
I'm developing this in spotify which is webkit-based.
Does anyone have a clue how I can solve this problem?
Thank you!
On http://musicmachinery.com/2011/12/02/building-a-spotify-app/, it says:
Developing a Spotify App is just like developing a modern HTML5 app. You have a rich toolkit: CSS, HTML and Javascript. You can use jQuery, you can use the many Javascript libraries. Your app can connect to 3rd party web services like The Echo Nest. The Spotify Apps supports just about everything your Chrome browser supports with some exceptions: no web audio, no video, no geolocation and no Flash (thank god).
That being said, I recommend that you use Jquery. Not only is it easy to learn, but you have have access to JQuery UI (visit http://jqueryui.com/demos/ for demos).
As for your drag-enter/drop problem, I've made you an example using jquery. The demo can be found on HERE or http://jsfiddle.net/H8fPL/12/. I've also provided the code I used below. Let me know if you need anything else! Happy coding!
CSS:
div{
width:200px;
height:220px;
border:1px solid black;
}
#div1{
background-color:orange;
margin-left:20px;
}
.NC{
background:url("http://www.dreadcentral.com/img/news/jun11/niccage.jpg") no-repeat;
}
.surprised{
background:url('http://rlv.zcache.ca/smiley_oh_sticker-p217194901605792400envb3_400.jpg');
background-size:80px 60px;
background-repeat:no-repeat;
background-position:center;
}
JAVASCRIPT:
//needed for jquery,
//CALL THIS SCRIPT BEFORE USING $ syntax
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
//query UI script
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
HTML:
<div id='div1'>
Come Hither...
</div>
<div id="dropme">
DRAG ME OVER AND WATCH ME CHANGE
</div>
IMPORTANT REFERENCES:
http://docs.jquery.com/Main_Page (Obviously)
http://jqueryui.com/demos/ (UI DEMOS)
http://jqueryui.com/demos/droppable/ (METHODS/EVENTS/OPTIONS ESSENTIAL!)
http://jqueryui.com/demos/draggable/#event-drag (METHODS/EVENTS/OPTIONS ESSENTIAL!)
http://oscarotero.com/jquery/ (jquery cheatsheet)
This is a silly question since I can't find the right keywords to use to get the answer by searching Google, unfortunately.
You know when you click a link and the background dims and becomes unusable but the foreground either has an image or a sign-in box usually? Like the Yahoo mail image displaying method where everything in the background becomes grey transparent and the image itself is just fine?
How is that done? And what is it called?
it's done by creating an overlaying div on the fly in JS, like:
var gab = document.createElement('div');
gab.setAttribute('id', 'OVER');
gab.innerHTML='<div class="overlay"><h1>hello</h1></div>';
document.body.appendChild(gab);
use a CSS class like
#OVER{width:100%; height:100%; left:0;/*IE*/ top:0; text-align:center; z-index:5; position:fixed; background-color:#fff;}
.overlay {width:100%; z-index:6; left:0;/*IE*/ top:30%; font-color:#cdcdcd; font-size:0.8em; text-align:center; position:fixed; background-color:#000;}
dunno how it's called ..
You want to create a "modal box" or "lightbox". Examples:
http://fancybox.net/
http://www.huddletogether.com/projects/lightbox2/
thickbox
eg: http://jquery.com/demo/thickbox/
For images and stuff i use prettyphoto
For text popup Dialog
this is all done with the use of jquery a javascript
You can use smoothbox, along with mootools.
Let's say if I have wrapper div which includes some links and images,
is there any way I can deactivate it at once with CSS only?
After review of answers:
I dropped the idea that can make it with CSS only.
jQuery blockUI plug in works like charm.
There is a CSS rule for that, but it's not widely used because of old browsers support
pointer-events: none;
These days you can just position a pseudo-element over the content.
.blocked
{
position:relative;
}
.blocked:after
{
content: '';
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
z-index:1;
background: transparent;
}
http://jsfiddle.net/HE5wR/27/
I think this one works too:
CSS
pointer-events: none;
if you are going to use jQuery, you can easily accomplish this with the blockUI plugin. ...or to answer your question with CSS, you'll have to absolutely position the div over the content you wish to block. just make sure the absolutely positioned div comes after the content to be blocked for z-indexing purposes.
<div style="position:relative;width: 200px;height: 200px;background-color:green">
<div>
Content to be blocked.
</div>
<div style="position: absolute;top:0;left:0;width: 200px;height:200px;background-color: blue;z-index:2;opacity:0.4;filter: alpha(opacity = 50)"></div>
</div>
sorry for all the inline css. you'll have to make some nice classes. Also, this has only been tested in firefox and IE7.
Cover it up with another un-clickable element. You may need to use JavaScript to toggle this "cover" on and off. You can do something clever like make it semi-transparent or something as well.
<style>
#cover {position:absolute;background-color:#000;opacity:0.4;}
</style>
<div id="clickable-stuff">
...
</div>
<div id="cover">
</div>
<script type="text/javascript">
function coverUp() {
var cover = document.getElementById('cover');
var areaToCover = document.getElementById('clickable-stuff');
cover.style.display = 'block';
cover.style.width = //get areaToCover's width
cover.style.height = //get areaToCover's height
cover.style.left = //get areaToCover's absolute left position
cover.style.top = //get areaToCover's absolute top position
}
/*
Check out jQuery or another library which makes
it quick and easy to get things like absolute position
of an element
*/
</script>
You should consider to apply the event.preventDefault function of jQuery.
Here you can find an example:
http://api.jquery.com/event.preventDefault/
TL;DR-version:
$("#element-to-block").click( function(event) {
event.preventDefault();
}
BAM!
If you mean unclickable so that the users can't copy and paste it or save the data somehow. No this has never really been possible.
You can use the jQuery BlockUI plugin or the CSS rule pointer-events: none; but that doesn't really prevent people from copying your text or images.
At worst I can always wget your content, and at best both css and js methods are easily circumvented using plugins like:
"Allow right click" on firefox or chrome
"Absolute enable right click and copy" on firefox or chrome
"Don't fuck with paste" on firefox or chrome
Further to the point, unless you have a really good and legitimate excuse for breaking basic browser behavior, usability, accessibility, translation functionality, password managers, screenshot tools, container tools, or any number of various browser plugins functionality in the users right click context menu, please, just, stop, doing, this.