I am not great with JavaScript, and I am thinking this is a fairly easy answer.
Link to project:
http://dl.dropbox.com/u/4132989/example02/example02/index.html
What I'm trying to do:
Make the draggable cell turn red, and the text turn white, when it's dropped to it's correct location.
When I drag the green or orange cell to their correct locations, I have inserted this as a test to make sure I am able to target only when the drag is correct.
document.body.style.background="red"
If you look at the code, on drop, the border changes on the cell from solid, to dotted. What I am trying to do is be able to change any property on drop. I want to make the background of the cell red on drop and I'd like the text to turn white. I tried this:
REDIPS.drag.style.background="red"
However, this did not work and it made everything non-draggable.
To download the code use this link:
http://dl.dropbox.com/u/4132989/example02.zip
Thanks in advance for any help.
*Oh, the change I made is in the file redips-drag-min.js
You're close, but the object you really want to change is rd.target_cell, the cell that just received the drop action. Add the following inside the if (rd.target_cell.className ... conditional (line 31 of script.js):
rd.target_cell.style.background= 'red';
Related
Here's what I'm looking at. I have a text element:
var label = paper.text(100, 100, "Test String").attr({some attrs});
It appears where I want it to and everything is good. The problem comes when I go to update the text attribute later.
label.attr({text: "My new label text"});
When I do this the text element gets shifted a small amount in the positive y direction, so downward.
When I check the x and y position values before and after the change they are identical. I have no idea what to do. I noticed it not happen once in a friends browser, Chrome, which is the same one I'm using.
Any ideas? I'd rather not have to alter the y value every time I change the text attr.
Thanks in advance for any help!
I don't know if this is feasible for your project, but you can try combining your raphael elements with standard html elements. Your label could be a div that is positioned and styled with jQuery. If you need to dynamically change the text of the label, you can just use the jQuery .html() attribute for the div, which will not change its position. This might not be the most elegant solution, but integrating jquery and raphael works well in most situations and guarantees standardization of text positioning/styling across browsers.
I want to make one line in tinymce with orange background color. Let's say the text in tinymce has three lines, I want to make the middle one with orange background.
I've searched on the internet for hours and nothing. This seems impossible. As I see in the Inspect Element in Chrome, the lines don't even have a css class.
You may use the following code to style the second paragraph of the editor content:
var ed = tinymce.get('your_editor_id');
$(ed.getBody()).find('p:first').next().css('background-color', 'red');
I'm intending to use JCrop for a standard image upload feature.
Everything is all right so far, it works great.
BUT: there is a minimum image size required, so instead of letting the user do his cropping and then stop him with an error message when he tries to ulpoad, I'd like to insert a continuous (or at least after selecting) info-text about the current selection size.
So, here's my question: can you add text to the jcrop selection area? Or would I have to create something myself?
Thanks for your input!
The short answer is no you can't add text to the selection area. You could, of course make additions to the jcrop script and add such functionality (which I think would be a cool addition).
I had a similar need (ie. to inform user that it was too small) and did it in a separate area based on the selection size. Something along the lines of:
$("#myDiv").Jcrop({onChange: checkSelection},function(){jcrop_api = this;));
function checkSelection(c){
if (c.x2 - c.x < minWidth)
...
Im looking for a way to change the background image of a div using jQuery BUT only amending it, not totally changing it.
Let me explain.
Im using http://jqueryui.com/demos/sortable/#portlets to show some div's that open and close. Now when you click the portlet header it opens and closes the content below.
Inside the portlet header i have a child div which shows an arrow (either up or down) depending on the current state of the content. I need a way of changing the background image on this child div by adding on "-visible" onto the end of the url for the background image.
I wouldnt even know where to start with doing this, but i have added some code below for you to look at.
http://jsfiddle.net/45jZU/
From the fiddle there, i need to alter the background image of the portlet-arrow div inside portlet header. I can not simply change the background image all together, but i have simplified it down to post on here.
I hope this isnt too narrow to not be of use to anyone else on stackoverflow.
Thanks
Maybe I'm missing something here, but can't you use the .css attribute modifier for the selected jQuery object? Something like:
var current_background = $("#my-div").css("background-image");
$("#my-div").css("background-image", current_background + "-visible");
If you're looking to modify the class names themselves, you can try mess around with the .toggleClass(), .hasClass(), .addClass() and .removeClass() methods in jQuery.
I hope this helps, but let me know if I've missed the mark here completely!
I would personnaly go for using css classes to change the background image. If you decide to change the image afterwards, you won't have to alter your javascript. It is a better solution to use javascript to code the behavior of the widget, not the visual aspect.
So you have the following css:
.portlet-header {
background-image: url(<an image>);
}
.portlet-header.collapsed {
background-image: url(<an other one>);
}
Add this line to your javascript to toggle the collapsed class:
$(".portlet-header").click(function() {
...
$(this).parent().toggleClass('collapsed');
});
If you widgets starts collapsed, initially add the class.
DEMO
My document looks like this:
Basically the background is one full-screen, transparent div. There are couple problems...if I just create the background div and don't apply any z-index to it, it ends up being on top of everything, and I cannot click on the box. If I set the z-index of the background div to be below the box, I can't seem to click on the background. What I want to do, it to be able to click both on the box, and the background.
var x = document.getElementById("bg");
x.addEventListener("click",reset,false);
function reset() {
alert("reset was clicked");
}
CLARIFICATION: box is on the same node level as the bg. it is not inside the bg div.
Take a look at this jQuery plugin - even if it doesn't solve your particular question the code could provide insight into your dilemma.
jQuery clickoutside
You must post your code so every one can help you. My test work correctly on Firefox and Chrome. If I'm guessing right, the background in your code isn't expanded. Try to remove html, body { width:100%; height:100%; } in my example to see the problem.
On IE browser, you need to use a transparent gif image as background of the background div, otherwise the background div may be unable to receive mouse click event.