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

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.

Related

(JavaScript ?) Display div with different content on choice?

I'm looking for a solution that will allow me to display a div when I click on a single link (which will change the way css style) with variable content (eg a sub-div with service1, service2, service3 ). This div will be displayed also propose several offers that will only display the div payment when one of these offers will be selected.
It's maybe hard to explain (i'm not english so sorry for really noob level), so maybe with this image you will "understand" a little bit more:
http://image.noelshack.com/fichiers/2015/38/1442422045-fonctionnement.jpg
I confess to being a bit lost with JavaScript for this kind of thing. I know it's probably achievable, but how? :-(
Thank you for your help folks!
If you want to go the way with altering CSS with javascript, assuming you are not creating the variable content on the fly, have the divs css for display set to none.
#divID {
display = none;
}
Then set an event listener on your link to change the display style to block.
document.getElementById("linkID").addEventListener("click", function() {
document.getElementById("divID").style.display = "block";
}
Ok so I created a crude representation of what you asked without much effects. But the fiddle I created completely functions as you intended. If you click buttons on div 1 the content of div 2 gets updated. If you click anything on div2 the information is displayed in div3. Here is the example: Working Example
window.function1 = function(){
var edits = document.getElementById('2');
edits.style.background="aliceblue";
}
//SAMPLE CODE TO EDIT ANY ELEMENT BY REFERRING BY ID. CALL SUCH FUNCTION ONCLICK
Please check the example to understand it fully.

Jquery menu: default active DIV container

The above-show code works fine excepting the following case. When I open web-page, the content of DIV container is empty and I can see just the navigation menu. Once I press on menu or submenu items, the content is filled with correct data. So, my question is how to use the DIV container 'submenu11' by default? The code line $active = $('#submenu11').addClass('active'); does not solve this issue.
Look at jFiddle.
Can you add css to the fiddle? I am not understanding the question completely.
From what I understand you want to show the submenu11 by default right? so I am assuming the rest of the stuff should be hidden which I assume it is done in the css already. your code
$active = $('#submenu11').addClass('active');
does not do anything because you are assigning it to $active
I think you are looking for something like this maybe?
$(document).ready(function() {
$('#submenu11').addClass('active');
});
this is assuming all your css classes are defined correctly
$(document).ready(function() {
//code for ajax calling
$('#submenu11').addClass('active').trigger('click);
});

facebook homepage like pull down div

after logging on to facebook, there is a downward arrow symbol after home tab. On clicking it shows a div (?) which just appears on the existing content and on another click it disappears.
How can I make exactly such a thing?
Edit:
I followed this link from TheBlackBenzKid. One thing is clear, on clicking on the button, just 2 divs are toggled.
But AFAIK toggle takes place on mouse click. so the 'click' event should be there in the jquery code.
1) But I didn't find it. where is that?
2)there is some css that makes it possible for the menu to appear on a place without dislocating the existing content there( from the demo this is not visible, but it does happen actually). What is that css code?
There are so many ways to do these things: thefinishedbox.com/files/freebies/dropdown-gui/index.html this is a nice one that already comes with simple clean CSS look and feel
This is how i wouldve done it, but its a pretty basic solution.
div id="arrowid">▼</div>
<div id="dropdownbox" style="display:none;">Dropdownbox</div>
<script type="text/javascript">
$(document).ready(function() {
$('#arrowid').click(){
$('#dropdownbox').toggle();
});
});
</script>
this one does'nt support outside clicks, it just shows and hides when clicking the arrow. Hope it helps!
You can use .slideToggle() to achieve this effect, if you are using jQuery.
Use it to display or hide the matched elements with a sliding motion.
.slideToggle( [duration] [, easing] [, callback] )
duration: A string or number determining how long the animation will run.
easing: A string indicating which easing function to use for the transition.
callback: A function to call once the animation is complete.

How to display a little window with onmouseover

I am trying to use this code to display some data when the mouse is over that link:
<span id="ssd" onmouseover="this.T_WIDTH=210;this.T_TITLE='(0/0) mqe= ';"><a href='http://en.wikipedia.org/wiki/Decision_tree_learning'>http://en.wikipedia.org/wiki/Decision_tree_learning</a></span><br/>
Do you see something wrong because I can't make it work.
Let's get away from this DOM level 0 stuff:
var spSsd = document.getElementById("ssd");
spSsd.addEventListener("mouseover", function () {
this.style.width = "240px";
this.setAttribute("title", "(0/0) mqe");
});
I assume your this.T_WIDTH=210 was supposed to set the width of the span, and this.T_TITLE=(0/0) mqe was supposed to set the title? The code above should do that, just note that you need to set your span to display:block for this to work, since inline elements don't really have a width.
Just make sure you put this script at the bottom of your body; executing it in the head will give you a null error, since the span ssd will not have been created yet. Or if you're using jQuery, you could put it in the document.ready function.
Some suggestions try the following
jQuery Bubble Popup
JQuery Popup Bubble Question on Stackoverflow

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

Categories

Resources