How to change background-image ondragenter or ondragover with javascript - javascript

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)

Related

HTML/CSS/JS - adding an image to input[type=submit]

I have an ecommerce store and have a payment gateway where I need to use input[type=submit]
It cannot be a button or input[type=image] but I want to put an icon in the value.
I need text and an icon something like submit >> except the '>' is a PNG.
I've been looking for a while and don't think this is possible. Is there any workarounds to get what I'm looking for.
I was thinking of creating an image and using css to add a bg image but this won't be as responsive for different devices etc,.
Any ideas or suggestions for this would be greatly appreciated.
You can do it with css by doing the following code. Don't use inline this will make your input tag messy.
.YourInputClass
{
background-image:url('http://portal.3spos.com/content/images/flag-saudi-arabia.png');
background-repeat:no-repeat;
background-position:left top;
padding-left:14px;
}
<input class="YourInputClass" style="text-align: right;" type="textbox" name="text"/>

Unity3D/PowerUI doesn't register simple CSS translation?

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?

How can Modernizr load a (Modernizr)class conditionally with css?

I was just checking how css expressions with modernizr classes work.. and as I see on Google dev. tools with below:
//normal css
.box{
width:100px;
height:100px;
border-radius:20px;
background:blue;
//as modernizr detects no support..
.no-borderradius .box{
background:url(radiusyImage.png);
}
'radiusyImage' does not add extra http request.. I know that is possible(load the source only it is necessary) with js:
if (!Modernizr.borderradius) {
//load img or a pollyfill..
}
but how is that possible with css? How does it work actually?
Current browsers don't request images they won't use in the html See this question.
Since Modernizr will only add the no-borderradius class only if the browser doesn't support that attribute, any modern browser won't have a DOM element matching .no-borderradius .box therefore, the image will not load.
The only drawback here is to have a few more lines of styles in your CSS, but its impact is unnoticeable.

Change image in CSS?

I'm trying to adapt a template for my website. I'm no CSS guru, but I'm trying to find a way to change images on a timer. Problem is, the template is CSS and I don't know how to make a very simple slideshow. I'd just like to change the image every 5 seconds or so.
Here's what I have in the html file:
<div id="mainPicture">
<div class="picture">
<div id="headerTitle">Header Text</div>
<div id="headerSubtext">Header Subtext</div>
</div>
</div>
Here's the CSS stuff:
#mainPicture
{
clear:both;
width:670px;
height:345px;
background-color:#160306;
}
#mainPicture .picture
{
position:relative;
width:650px;
height:325px;
top:10px;
margin-left:10px;
background-image:url(LOGO2.jpg);
background-repeat:no-repeat;
}
Any way to change the image url every few seconds to a different file?
That is not possible with just CSS. you need to leverage some sort of JavaScript to get this done as you said after an Interval of 5 seconds. You might want to use setTimeout() function. I had writted a script to change the background color of the page using JavaSCript. You might want to leverage this to change the image instead of the background color:
Here is the link:
http://codeforbrowser.com/blog/changing-background-color-using-javascript-and-jquery/
And below is the DEMO:
http://jsfiddle.net/refhat/gJWFR/1/
I would suggest looking into some of the CSS3 properties, if it has to be strictly CSS. Otherwise I would look into Jquery.
Here is a link to CSS3
http://www.w3schools.com/css3/css3_transitions.asp

How do I make an area unclickable with CSS?

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.

Categories

Resources