I have an image in my war folder. I am trying to see what the image is, but I cannot get it to work. I am trying by using GWT.getModuleBaseURL()but it does not alert.
if(soundImage.getUrl().equals(GWT.getModuleBaseURL()+"/soundOn.png")){
Window.alert("YEP IT DOES");
soundImage.setUrl("soundOff.png");
setSound("off");
}else{
soundImage.setUrl("soundOn.png");
setSound("on");
}
How can I get the image? Am i overlooking something in my code, or am I doing it wrong?
Changing the URL of an image in order to change the view is understandable if you have an HTML background, but is sort of crazy in GWT-land. This is roughly analogous to changing the URL of a <script> on the fly -- it's technically possible, but strange. This image is a child of some component, necessarily. I would replace this image by operating on the component that contains this image, and not on the image itself by changing its URL. The URL of an image is essentially its descriptor, so it's awkward to change a property like this. If you are using MVP and have created a View, then you might expose a method like void toggleSoundImage(boolean on).
You really should be doing this instead: https://developers.google.com/web-toolkit/doc/latest/DevGuideUiImageBundles. The way you are trying to use images is unidiomatic -- some people might call this "wrong".
I purposefully did not answer your question because if you were doing this correctly, the preconditions that caused this problem wouldn't exist.
Hope that helps.
Notice you you are setting the url (soundOn.jpg) using a relative path, but you are checking using the module absolute path.
The URL should merely be the same as the src attribute on your image.
If you use:
if(soundImage.getUrl().equals("soundOn.png")){
It should work. I recommend using Travis' recommendation of Image resources, also.
Related
I'm working in an EJS template and I need to determine the screen size. I'm using Grunt & Browserfy to compile (apologies if this is the wrong terminology). Using window.screen.width or window.matchMedia returns an error that window is not defined. What would be the best way to access this information?
Answering my own question: I understand now that EJS is rendered on the server so there is no screen to reference. I ended up using Javascript to accomplish what I needed since it's rendered in the browser. It's messier than I wanted but works nonetheless.
Try just using screen.width without the "window" in front.
When an HTML editor is used and images are added from the local computer, they are uploaded to a server and a link is obtained to put it in the image src attribute. What happens when the img element is removed from the editor? How would the image be deleted from the server? In this case I understand that the image deletion event could be detected and then call a service to delete it. But what happens if the user adds a new image and leaves the page? How would it be deleted in these cases?
In both cases, if the deletion of the images is not managed, it could happen that the server is filled with unused images. How do you usually solve this problem? How is the proper way to solve this?
That's a nice question there. And yeah, for sure the server would fill up with unused images in some point. I'm not an expert on this but I'll try to suggest something so I can implement it too in my WYSIWYG editor haha. I suppose you have a custom modal for the insertion of the image. Upon clicking the button you could save the image link to an array and at SAVE || on leaving the document edit || on popstate event you could make a regex that checks the innerHTML of the editor for the specific SRC. If is not found then you could push an ajax request with the image name so you can deleteit. For sure there are more efficient and complex ways to achieve that. Such as creating text ranges and track elements on keydown - Backspace(8) / Deletekey(46).
An other way is that you could track the images that are in use. When the document is saved regex out the images in the document, push them to a db table and periodically make a check from the back end so you can delete those that are not in use.
I don't know if my suggestions are helpful or not. I just saw an interesting subject so I jumped in. Cheers mate.
There's a module to do this in Drupal land, but I've been frustrated with the hacks that've been necessary in Wygwam. What is the best way to go about implementing this in such a way that you don't need to totally override the default image handling in ChannelImages/Wygwam?
Assets is a good suggestion, but I believe Devdemon's channel images might be a better fit for the workflow you're suggesting.
http://www.devdemon.com/channel_images/
Clients can add (and see) a caption and more and it's fully integrated with Wygwam and other editors. Devdemon's support is also excellent.
The Assets module from Pixel & Tonic allows you to double-click on the image (or any other file) and add metadata. You then have access to the metadata in your templates.
Check the screenshot: http://pixelandtonic.com/assets
You can also add metadata using the native File Manager. Click the edit icon from the File Manager and you'll see a few fields. You can use the File Entries tag to access it.
http://expressionengine.com/user_guide/modules/file/file_tag.html
I typically use Matrix with one column for the image, one column for the caption, and if a link is needed another column for the link. This of course works best if the image is in a fixed location within your template.
On possible way to accomplish this that I have used is to run some jQuery that looks for images within a certain area, and if they have alt attributes, rewrite the image tag within a tag with a tag inside.
so:
jQuery(document).ready(function() {
$('#page-content > .wrapper img').each(function(){
if($(this).attr('alt') !== undefined && $(this).attr('alt').length > 0){
if(!$(this).parent().hasClass('content-image')){
$(this).replaceWith("<figure class='content-image "+$(this).attr('class')+"'>"+$($('<div></div>').html($(this).clone().attr('class',''))).html()+"<figcaption>"+$(this).attr('alt')+"</figcaption></figure>");
}
}
});
});
will do just that. It's looking within a #page-content div for img tags with alt attributes. And then rewriting it as
<figure><img src='....' .... /><figcaption>This is the text that was in the alt attribute</figcaption></figure>
Soooo, that kinda works. The only caveat is that you had better not use any double-quotes within your alt text, or it will break thangs. Not the cleanest of solutions, but a solution, nonetheless.
I have a page with og tags (including a source and an image - a youtube-like video view page).
I've replaced the image the og:image tag points to, to another image by the same name. However, when using the facebook linter/debugger, the image shown is the old image, while clicking the image itself, opens and shows the new image.
Facebook uses some kind of a proxy cache for the content of the image - how can I clear it without changing the name of the image file ?
This thread gives an answer.
To reiterate (in case thread goes down),
Go to http://developers.facebook.com/tools/debug
Enter the URL (of the page that holds your og meta tags) and include the query data: fbrefresh=CAN_BE_ANYTHING
e.g. http://www.example.com/mypage.html?fbrefresh=CAN_BE_ANYTHING
Using the debugger/linter should force a full recache. I suspect the caching you're seeing is in your browser. Have you tried emptying your cache or using incognito mode?
If that doesn't work (and depending on how much traffic you're getting) it might have something to do with the names being the same - but I don't think this should be the case. Try replacing the image with another with a different name, hit the URL in the debugger so FB receives the new one, then swap back to the one you want. Kinda janky, but will probably do what you want.
I'd like to set the background color of an HTML element to the background color of another HTML element. This needs to happen at runtime using Javascript. I tried the following but it fails silently (the background color remains unaltered):
DOM.setElementProperty(element, "backgroundColor", "document.getElementById('country').style.backgroundColor");
Any ideas?
This is untested, but I would try
element.getStyle().setBackgroundColor(DOM.getElementById("country").getStyle().getBackgroundColor());
If you happen to be using a JS framework (jQuery, MooTools, etc), it should be as simple as something like (all code untested):
$("div2").attr("background") = $("div1").attr("background")
I normally just run with a framework (because I'm already using it elsewhere), but basic JavaScript should also be pretty simple as well, something along the lines of:
getElementByID("div2").setAttribute('background') = getElementByID("div1").getAttribute('background')
or
getElementByID("div2").Attribute('background') = getElementByID("div1").Attribute('background')
One thing I noticed in a quick reference search, though, is that the basic JavaScript method isn't consistent across browsers (IE seems to be quirky). Just something to keep in mind on that front.