how to get gap between tab titles on dojo tab container - javascript

Dojo tab container puts the page titles next to eachother without space in between. How to align the tab page titles to the entire width of the tab container so it appears there is equal spaces between each tab.
This is something like 'justify' alignment on paragraph where texts wraps to the full width of a line.
Thanks for help.

I do not believe there is a built-in way to control the spacing of tabs in a TabContainer. If you need to space out the tabs, you could try a solution where you apply relative css positioning to the tabs in order space them out.

You can apply CSS styling to the dijitTab class to alter the tabs of a TabContainer. Just give the TabContainer an ID and use that to access and style the tabs within it. For example:
Declare the TabContainer in HTML:
<div id="myTabs" data-dojo-type="dijit.layout.TabContainer" ... ></div>
Then use the following CSS to set a margin between tabs:
#myTabs .dijitTab {
margin-right: 16px;
}
Of course you could get more creative with the styling, but this should get you started.

Related

Collapsible Sidebar Without Visible Reflow on Content Inside

I have a 3 column layout where I want the left and right columns to be collapsible. I want the following:
A smooth slide
Sidebars that have a percentage width
No visible reflow on the sidebar content
No white-space: nowrap;, as this will mess with the display of the sidebar content.
Allow for complex content inside the sidebar, not just simple text in a <p> tag as in the codepen example below.
No hardcoded pixel widths - I know you can add a width on an inner div together with overflow:hidden on the parent, but I don't want to hardcode a large width.
I need the sidebar widths to be relative to the immediate parent (and not the viewport), in case the 3-column layout needs to be within a section of a page (in fact in my scenario that's the case).
Note that the I've tried transitioning on the width property in this codepen, but you can see the visible reflow of content inside the sidebar. Here's a .gif of it:
Ideally I'd like to do this without using JavaScript for the animation, but I'm open to it if there are no other good solutions.
One way to do this I would say is to give a % based width to your pabel-content.
Add these two properties to the class like this
.panel-content {
min-width: 300px;
}
This should remove the wrapping while animation.

Hide part view text in overflow hidden

I making bookReader and one page will fit to user viewport. For this approach i make div
<div id="book">Long text...</div>
with
#book {
overflow: hidden
}
Then i provide to scroll this element only with buttons next and prev. When user click next button it will scroll like this
$('#next').on('click',function(){
$('#book').scrollTop($('#book').scrollTop() + $('#book').height());
});
But i have problem. That some times user will see part of text-line. How can i check every page is that last text-line is shown broken, and hide them if him is broken. I don't want to change content. I need a function that will check every page if that contains that part text and if this have that part text, hide him by making on the top element that should hide that.
DEMO: I show in red color what i need find and hide.
http://jsfiddle.net/lvivgeorge/jd7mum6c/3/
DEMO 2: It can contains anything (header tags, img, <code> , etc.)
http://jsfiddle.net/lvivgeorge/jd7mum6c/12/
P.S. Make all the same line-height is not solution. Change content styles is not solution too.
IMHO You should set fixed line-height of each text line, and set container height fixed as a multiple height of each textline. This should helps
Check this out: http://jsfiddle.net/jd7mum6c/5/

Sortable Accordian - how to minimize its width?

I made a sortable accordion with jQuery UI, and it seems to be filling up the full width of the page.
http://jqueryui.com/demos/accordion/#sortable
How can I set it so that it's width will be minimized, so it will be as long as the biggest group it has.
thanks
Simply add a CSS style for the accordion id or ui-accordion class in that page as follows.
Adding width to the id
#accordion{
width:300px;
}
or add to the css class
.ui-accordion{
width:300px;
}
In this I have considered the width as 300px
The page you ref'd has a link to a stand-alone example of the accordian, http://jqueryui.com/demos/accordion/sortable.html, which also expands to the full width. So the first page constrains the accordian externally (outside of the accordian itself). To control the width and other dimensions directly, use CSS to style the elements

How to implement a vertical slide controller in a height limited div with many objects

I'm nearly 2 months old in studying HTML, JavaScript and jQuery. I've done a few things but never figured out how to implement a DIV (or anything you may suggest) to emulate a viewport which would display text, textarea, buttons, anchors etc all of which simply cannot fit or be seen within the size of the viewport. Therefore the use of the vertical scroll. No need for horizontal scrolling, though. I can format the objects not to exceed the horizontal view. I thought of using a div inside another div, but the objects inside the INNER DIV just bleed through and show up on the bottom of the site!
Is there some magical panel in jQuery created for that purpose?
TIA
Dennis
If you have a containing div such as <div id="container">, you can add the following properties to it to get it's content to scroll vertically:
div#container {
overflow-y: auto;
height: 100px;
}
This CSS will show a vertical scroll bar if the div's content exceeds it's height. The only caveat with this solution is you must set a height on the div.
Here's an example.

jQuery sliding animation inside a word

I'm toying around with jQuery/jQuery-ui, and I'd like to do something : say we have a word, when I hover the first letter, I'd like to see a few letters slide in (and out when the mouse goes somewhere else) between the first letter and the rest of the word. So FSecond would become FirstSecond, with "irst" sliding.
I'm almost there, but there's a slight problem : the sliding letters are sliding below the word, and once the sliding is done, they are at the right place. Same thing for the sliding out : the animation itself is not taking place between the first letter and the rest of the word.
Here is the code, quite short : http://pastebin.com/FdTtmV7k. I checked the jquery-ui doc and there's a mention of an options hash to give to the toggle function, but I can't seem to find any doc on this one and what to put in it.
I also noticed a few similar questions left unanswered (see jQuery slideToggle() applies display:block while sliding and https://stackoverflow.com/questions/4090796/jquery-ui-show-moves-elements-during-animation).
Thanks for your time !
This demo should do what you require. The problem exists as jQuery assigns display:block to an element when animating it, which causes your <span> to be rendered as a block-level element.
This happens because the <span> containing the "irst" text will have the CSS display property changed to block when the sliding begins, while the other 2 <span> elements used for "F" and "Second" will keep their default, which is inline.
You can solve this by changing the <span> elements to <div> elements (these are block elements) and additionally apply float: left; CSS style to them.
The new HTML code:
<h3>
<div id="initial">F</div><div id="middle" style="display: none">irst</div><div id="name">Second</div>
</h3>
And the new CSS code:
#initial, #middle, #name { float: left; }
Adding this CSS fixed it for me. The reasoning is that jQuery wraps your span in a div while animating it, and that div has display:block by default. We take advantage of the fact that they did not set an inline display style on the element and set the class to have display:inline-block.
.ui-effects-wrapper {
display:inline-block;
}
EDIT: Something was messing up my span tags, no margin modifications are needed.

Categories