Develop Reference

How do I define the location of an image for this script?

I am eager to put this answer given to another question into practice:
https://stackoverflow.com/a/20505898/2174961
However, I am not very familiar with JavaScript and I don't know how to complete the code that goes in the body. How do I include the location of the image to be shown when the condition is true?
<script>
if( window.canRunAds === undefined ){
// adblocker detected, show fallback
showFallbackImage();
}
</script>

I'm not precisely sure what you are trying to do, but from the question you linked, you want to post an image asking people not to use adblock, right?
If so, perhaps the SIMPLEST way to approach this problem might be to place an image tag in your html, with a specific id, and change the display style of the image to hide or unhide it.
<img src="http://path/to/your/image" id="fallbackImage" class="hide" />
Using the following css classes, you can alter the display mode of that image
#fallbackImage.hide {
display: none;
}
#fallbackImage.show {
display: initial;
}
In your javascript, you can display this image by changing its css class:
function showFallbackImage() {
document.getElementById("fallbackImage").className = "show";
}

How do I make instructions appear at the user's request?

I need to provide information for various clients when they log in to build a profile. I will be using HTML and Javascript for this purpose. What I would like is a concise set of instructions followed by an option to show more detailed instructions. If the client chooses to see the more detailed instructions, the field (ideally) expands to show more content.
Other ideas that achieve a similar result are also welcome, as are comments that simply point me in the right direction. Preliminary research hasn't turned up much for me; I imagine this is largely due to being a novice and not knowing what to look for. Is this a conditional visibility issue, or is that something else entirely?
Many thanks for any help.

Place the hidden content in a separate container element with its display initially set to none. Then, add an onclick handler to a link that shows the content. That handler should set the display value to block or inline. Here is one way to do it (there are many). Set up your HTML something like this:
<p>
[Instruction text here]
more ...<span class="more">
[Additional content here]</span>
</p>
Some CSS to initially hide the additional content:
.more
{
display: none;
}
Create your expandContent() function:
function expandContent(link)
{
link.nextSibling.style.display = "inline";
}

Addthis javascript button/widget adding space to top of webpage

If you view this page http://www.herkimer.edu/news/view/community_members_complete_jointly_offered_machine_operator_training_progra/
You'll notice a green bar (screen-shot: http://grab.by/1msh) at the very top. It has something to do w/ the addthis widget you'll see underneath the h1 title.
If you reload the page a couple times, the bar goes away, probably because the script is cached and does not delay, resulting in that extra space at top.
Do you know what I could do to resolve this? Any help is appreciated.

I'm assuming that you don't want the DIV to display. You could add some CSS to the page to hide it. It has id atffc (and contains a Flash object, but I don't know that it needs to be visible).
#atffc { display: none; }

I think in addition to just hiding your extra div you may want to move the elements to the bottom of your page so they are evaluated after the add_this anchor tag () is created and ready. That would help with potential timing issues to make sure the element is loaded and ready before their code starts to try to manipulate it.

I had the same problem and I downloaded their new code
http://www.addthis.com/web-button-select
I selected "no analytics" and I think they now strip out the flash part when using no analytics. I haven't had the problem again the last time I checked but I'll need more time to confirm this.
You might want to try to do the same

A bit late, but try adding this code AFTER the AddThis button code:
<script type="text/javascript">
var addthis_config = {
data_use_flash: false
}
</script>
Source:
http://www.addthis.com/forum/viewtopic.php?f=4&t=22569&sid=fec603f0cac141b4856eddab92c8e63e&start=10

Javascript getElementById - reading works, altering doesn't

So, I have this pretty complex ajax thing going.
It loads new html (including div tags and all) to show up on the page.
I included a 'more' link to load additional data.
This more link links to my javascript function. The 'more' link is located in a div, which I gave a unique id. The next time the load function is called, I use document.getElementById(the id).style.display="none"; to "remove" this div from the look of the page.
I set error traps for this, the div with that id is found without problems, but javascript fails to change my style property.
I tested alert(document.getElementById(the id).innerHTML); and that worked without problems - hence the title of the question.
So, does anyone have any ideas/do I need to offer more information? The main problem is that it doesn't throw any errors anywhere, yet it fails to complete the task I asked...
Here's a bit of code to go with it -
try
{
var myidthing = "morelink" + ContentStart.toString(); //the id is correct
var div = document.getElementById(myidthing);
if (!div)
{
}
else
{
div.style.display="none"; //this doesn't work, but doesn't raise an error
alert(div.innerHTML); //this works without problem
}
}
catch(theerr)
{
alert(theerr);
}
------------------------->EDIT<-------------------------
I'm incredibly sorry if I upset any people.
I'm also angry at myself, for it was a stupid thing in my code. Basically, I had a variable that stored the contents of a parent div. Then I (succesfully) removed the div using the removeChild() method. Then my code pasted the contents of that vaiable (including the div I wanted gone) back into the parent div.
I switched around the order and it works fine now.
Again, excuse me for this.

Throwing out a few ideas of things to look for:
You said the div is generated by javascript. Is it possible the div you are targeting is not the one you think you are? It could be you are targeting another div, which is already hidden, or obstructed... or maybe the innerHTML you are displaying goes with a different element than the one you intend to target. Put an alert or script breakpoint in the if(!div) case, also, and see if it's going down that path.
If the above code is only a stripped-down version of your actual code, check your actual code for typos (for example: style.display = "none;";)
Using the FireBug plugin for FireFox, inspect the target element after the operation completes, and make sure that the display: none appears in the style information. If not, use FireBug's debugger to walk through your javascript, and see if you can figure out why.
Use FireBug to break on all script errors, in case there is another error causing this behavior.

Try empty quotes instead of 'none' and see if that works?:
document.getElementById('element_id').style.display="";
Failing that, don't change the style, just add a class which hides the element.

How do I dynamically show and hide an entire TabContainer using DOJO?

DOJO seems to have some quirks here. I specifically need to have the TabContainer hidden when the page loads, but then become visible after the user clicks a button. The first thing I tried is setting style.display = "none" to start, and then setting style.display = "block" on the click event. Unfortunately, this only partially works- the page will render an invisible box in the right location/dimensions, but not render the actual contents. The box's contents only get rendered when triggered by something else (for example, going to a different FF tab or suspending/resuming firebug will make the box render).
If the style.display property is set to be visible on page load, everything works fine. You can toggle the display property and it shows or hides the tabcontainer properly. But if it's set to "none" on page load, it screws up.
I tried a workaround of setting the style.display property to "" in the HTML but then immediately setting it to "none" in the Javascript, but it still fails- the change occurs too soon and it needs to happen after the tabcontainer renders (which can take a second or two).
Some stripped sample code:
HTML:
<div id="tabContainer" dojoType="dijit.layout.TabContainer" style="width:500px;
height:100px;display:none;">
</div>
and then the Javascript to show the tab on a user click:
function initTabs()
{
var tabContainer = dojo.byId('tabContainer');
tabContainer.style.display = 'block';
}
How can I dynamically show/hide a TabContainer without having it start in the shown state?

There is solution for this. If you want to show TabContainer calll:
dijit.byId("tabContainer").domNode.style.display = 'block';
dijit.byId("tabContainer").resize();
and use 'none' if you want to hide TabContainer.
This works for me, but that is truth, it is not obvious :)

Old thread but I experienced this same issue and this is how I solved it. First, you cannot use display:none. Per the folks at DOJO, you have to use visibility:hidden with dijits or this will not work. So, you want this:
<div id="tabContainer" dojoType="dijit.layout.TabContainer" style="width:500px; height:100px;visibility:hidden;">
Then, to show this you do the following:
dojo.style("tabContainer", "visibility", "visible");
Now, the problem this poses is what you already found out. This reserves a invisible div in your viewport that is 500px wide. So if you are using a bordercontainer, there will be this empty 500px gap in your page. To resolve this, I had to create my dijits programatically and inject them into a empty div, rather than do what you did and do it declaratively. Hope this helps someone out there.

you should do
dijit.byId("tabContainer").domNode.style.display = 'block'
or perhaps
dijit.byId("tabContainer").domNode.style.visibility = 'hidden';
is even better

Well, I did not solve this problem, but I came up with a workaround...Creating the TabContainer on the click event, instead of creating it hidden on page load and then showing it on the click event.
HTML:
<div id="tabContainer">
</div>
JS:
var tabContainer = new dijit.layout.TabContainer({id:"tabContainer", style:"width:500px;height:200px;"}, dojo.byId('tabContainer'));
//add tabs
tabContainer.startup();

After you set display:block do this:
dijit.byId('tabContainer').resize();
dijit.layout widgets often don't lay themselves out properly if they are display:none (and sometimes even when visibility:hidden). You have to fiddle around in Firebug till you figure out what works!

Tested sucessfully with Dojo 1.10 . Use registry instead of "dijit.byId()". The method resize() only works on the dijit.layout.BorderContainer.
define([
"dijit/registry" // registry
], function(registry) {
var show = true;
if (show) {
domStyle.set(registry.byId("dijitLayoutContentPane").domNode, {'display': 'block'});
registry.byId("dijitLayoutBorderContainer").resize();
} else {
domStyle.set(registry.byId("dijitLayoutContentPane").domNode, {'display': 'none'});
registry.byId("dijitLayoutBorderContainer").resize();
}
}

The first thing (setting style.display = "none") is right. In place of
...then setting style.display = "block"
you should just call .set_visible JS method of the ajax TabContainer when "...user clicks a button", like:
$find('<%= Tabs.ClientID %>').set_visible(true);

I used this after setting the style display:block and it works great! This way you don't need to know the ID of the container to resize.
this.getParent().resize();

If you use
dijit.byId("tabContainer").resize();
after you set the display to block it will bring back the tab headers.
You'll save a little bit of javascript if you just use
visibility: hidden;
(although the tabContainer will still take up space on the page)
Another alternative I use pretty frequently is instead of
display: none/block;
I use
height: 0px/auto;
You could also switch the position to absolute and set the coordinates for off screen somewhere too. That's require a lot more css changes than simply doing the height though. That's my preferred method if it works in my situation.
Between these solutions hopefully one will work for you.