I am trying to update the css attribute for a toolbarbutton but the following does not work:
document.getElementById('toolbar-button').style.listStyleImage = url("chrome://ext/skin/toolbar-button-add.png");
Is that line of code you posted directly copy and pasted from your code?
Because if it is, you are missing the ' around the value. It should be
document.getElementById('toolbar-button').style.listStyleImage = 'url("chrome://ext/skin/toolbar-button-add.png")';
Always watch the debug console as this would have been revealed in the console as something like 'url': is not a function or something like that.
Related
Im trying to make a little markdown editor with a panel that shows the rendered markdown. My problem is dont seem to be able to get the current content, it always one step behind. Ive used
return ace.edit("editor").getValue();
Is there a way to bind to the object that the editor is using?
Looking at your code, it seems pretty clear that the getValue() is running before the DOM has a chance to update reactively, so it's always grabbing the value that was previously selected. You need to wrap that line in a Tracker.afterFlush:
document: function () {
Tracker.afterFlush(function(){
return ace.edit("editor").getValue();
});
}
Hopefully that will get things working! As an aside, I'm not sure why you are wrapping the {{document}} in {{#with docId}}, seems like it might be expecting a document property in the Documents object. Not sure if this is actually affecting anything, but seeing as you are directly pulling the document from the editor, it's a little confusing.
The problem is, the links in the main menu don't work, you can hover on them and see the address that it links to, but when you click them nothing happens.
I'm assuming it's something to do with the css.
I tried deleting all the z-index to see if it's something to do with them(in case it was behind something and you couldn't actually click them), I switched positionings around, nothing works.
Here is a link to the demo site.
http://tinyurl.com/nlmw2sg
Nevermind I found the answer. I was using this script for the sticky menu http://www.outyear.co.uk/smint and I just had to delete this line
e.preventDefault();
from it so that the page will jump to where the link points to.
It's not the CSS.
SMINT is returning this error every time you click a link:
Uncaught TypeError: Cannot read property 'top' of null
Looking at smint.js this is the line of code it is complaining about:
var goTo = $('div.'+ id).offset().top -selectorHeight;
Which means that $('div.'+ id) is not selecting anything.
This tells me that you're not formatting your HTML the way SMINT needs you to. You need to follow their <div> and **class** structure.
Is it possible to pass the url attribute a dynamical query string? E.g url( ./SOME_IMAGE_GENERATOR?image=1 ); where image varies?
I need this attribute to be set via JS:
$( "#elem" )[ 0 ].style.background = "url( ./renders/circuit.php?circuit=" + dirY + dirX + "&dims=1|1 )";
The link in the url points to a file, that generates and returns an image.
The image is generated correctly, but not applied as backround.
Clarification
The image I want to put inside does not exist yet. It is generated and returned by the page circuits.php and depends on the arguments.
The background is well changed, if the image exists. I have noticed that unlike changin the src attribute of the img tag, while the argument creates a request by the browser, sends and recieves headers and info, the background does not.
I'd thought about sending a request to the circuit.php generator, make him save the image on the server and then, with setTimeout, change the background, but I cannot rely on a certain time for the generation.
That is the problem. Now, do you guys have any ideas how to overtake this?
Working Example
I've replicated your scenario with a Jsfiddle and a image generating script held on my own website.
As you can see it is indeed possible to change the background dynamically with a generated image:
http://jsfiddle.net/DigitalBiscuits/Eh8yY/6/
Debugging your code
So....what's wrong with yours?
Well firstly if you're using Firefox or Chrome, use the developer tools to check what's going on. Make sure no Javascript errors are showing up in the console.
Then I would suggest you check that your javascript is actually selecting the element, and that it is able to change the background (lets say to a static image). Isolate the code you that's giving you problems and test it out in a new empty page, kinda like the JSfiddle I've linked you to above.
On a side note, your javascript code looks a bit foreign to me.
Instead of:
$( "#elem" )[ 0 ].style.background = ...
try using:
document.getElementById('myImg').style.background = ...
Lastly, ensure that you're setting the correct headers in your php script that generates the images, and that no output is happening before the headers are set.
Are you using jQuery?
This should be very easy to do.
Store the generated image url in a variable, and then use jQuery to change the CSS background image value, like so:
var imageUrl = "./renders/circuit.php?circuit=" + dirY + dirX + "&dims=1|1";
$('#myDiv').css('background-image', 'url(' + imageUrl + ')');
Here's a a jsfiddle demonstrating the concept. Click the div to see the background-image dynamically changed via JS.
http://jsfiddle.net/DigitalBiscuits/F3PUy/2/
Yes its possible to set on-the-fly images as background images, using CSS.
This is no different to how you can use on-the-fly images for img elements.
how do i use firebug or chrome console instead of alert() to see variable values?
currently, I want to see the value of var i as it increases. Not sure that it's increasing.
You probably want to use console.log(). It just prints the parameters in the firebug console.
More info can be found on http://getfirebug.com/logging.
You can use a breakpoint on this variable. You can find explanations for the Chrome Inspector here: http://code.google.com/chrome/devtools/docs/scripts-breakpoints.html
You could use something like the YUI Logger control - http://developer.yahoo.com/yui/logger/ - which puts a log window on your webpage that you can write debugging messages to and clear/hide/etc.
Or you could try a javascript shell bookmarklet that opens a separate shell in the context of the main window. One example is available at https://www.squarefree.com/bookmarklets/webdevel.html, and there may be others.
The regular way (typing the shortcut followed by the Tab key) doesn't seem to work. If not, maybe there's some other way of inserting snippets not using the mouse, with as few keystrokes as possible? What language should be specified in the "language" attribute of the "Code" element in the .snippet file? I use VS2010.
To get the snippet menu you can use CTRL+K, CTRL+X then select the snippet you want. I don't have any problem using shortcut followed by TAB so it could be a change to your settings that is stopping it. As far as language goes the snippet menu shows snippets based on the language of your code file. You may find it useful to use a snippet editor like Snippet Editor if you are creating your own snippets.
I found out today that pressing TAB twice works OK if I type the snippet shortcut after the new keyword, so I changed the snippet code from "new AjaxOptions {UpdateTargetId = "page", OnFailure = "handleFailure", ... }" to "AjaxOptions {UpdateTargetId = "page", OnFailure = "handleFailure", ... }", and everything seems to work fine now.