Few questions regarding jQueryUI's accordion, this is the simple code I've got:
<h3>Section 10</h3>
<div>
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
</div>
Is it possible for the divs inside the accordian to have dynamic content?
I know it's possible with the theme roller to change the little arrow icon, but how do I put a small image icon in the H tag as well? no matter what I try doesn't show up, only the H tags text.
Is it possible to have some of the accordions bars locked, so they can't expand? while others still can?
Is it possible for the divs inside the accordian to have dynamic
content?
Yes. You should be able to replace the contents of the entire div without anything terrible happening. You can accomplish this by giving the div that you want to replace the contents of an id and then when you want to replace the contents just use .html:
$("#id").html("<content>")
I know it's possible with the theme roller to change the little arrow
icon, but how do I put a small image icon in the H tag as well? no
matter what I try doesn't show up, only the H tags text.
I didn't have trouble adding an image to the header, although it did seem to work better if you added the img inside of the a tag that lives inside the h3 tag:
<h3>Section 1<img src="http://www.placekitten.com/20/20" /></h3>
You can use CSS to space the image accordingly.
Is it possible to have some of the accordions bars locked, so they can't expand? while others still can?
Sure thing. This one really should be possible via the API, but you can hook up an event handler that prevents the accordion's event handlers from firing when you click the h3 tag:
// Disable the second tab in accordion #accordion
// Note that this could really be any selector you want, as long as it selects
// accordion header elements.
$("#accordion h3:eq(1)").click(function(event) {
event.stopImmediatePropagation();
});
Here's an example of all of these things working: http://jsfiddle.net/TX8z6/ (fixed an IE bug)
Related
I followed this tutorial: http://www.appcoda.com/uipageviewcontroller-storyboard-tutorial/ to embed a Page View Controller into another view using the Storyboard.
I modified it to show paragraphs of text, instead of images and simple labels. It all works fine, but as I change pages, the text does this annoying thing were it loads something like this:
Lorem ipsum dolor
sit er elit lamet,
consectetaur
cillium adipisicing
pecu.
Then, after a microsecond, it re-arranges itself to:
Lorem ipsum dolor sit
er elit lamet,
consectetaur cillium
adipisicing pecu.
I've tried using a multi-line Label, and a Text View, and they both do this thing.
I suspect that it has to do with auto-layout, and that the text view is loading to the content view constraints, and then the content view adjusts to the parent's view.
Is there a way to make all that adjusting happen ahead of time?
In my html form there is a date field with a multiple line description in the title attribute which pops up in a tooltip. If the Datepicker calendar pops up, the Tootltip disappears as I move the mouse down over the calendar. Unfortunately, it pops back up as soon as I change the month through the NEXT button of the calendar and covers the button. So, I can never go further than one month ahead.
How can I work around this issue?
Here is a sample of one date field:
<input type="text" class="datepicker" id="enddate" title="<b>Lorem ipsum :</b> Enddate<br><br>dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. " />
I am using JQuery 1.9.1.
Here is a JSFiddle that shows the problem. As soon as the next month in the calendar view is selected it is not possible to click NEXT again:
http://jsfiddle.net/gnuken/L0gxjLwq/1/
According to the jquery UI Docs the Tooltips is trigered using focusin or mouseover
http://api.jqueryui.com/tooltip/#event-open
all what you have to do is turn off the focusin event just use the .off('focusin') at the end of the tooltip declaration DEMO
$(document).tooltip({
position: {
my: "left+15 center",
at: "right center",
collision: "flipfit"
},
content: function () {
return $(this).prop('title');
}
}).off('focusin');
Im using jquery Accordion, i want to align the hearders in the left like a list so that when the user clicks on the header the content should populate in the right.
I couldnt achieve this using the jquery ui accordion. it shows the content below the hearder which i dont need..
Take a look at this
http://jsfiddle.net/qkXUJ/
<div class="accordion">
<h3><a>tab 1</a></h3>
<div>Lorem ipsum dolor sit amet... </div>
<h3><a>tab 2 </a></h3>
<div>Lorem ipsum dolor sit amet... </div>
</div>
h3{
float: left;
}
initially i get the hearder in left but upon clicking the second header it moves up. I want to stay it below the first hearder.
Help me in achieving this.
Thanks in advance
This is likley not an answer to your specific question, and may be better as a comment, but I think you want the jQuery Tabs widget, with a vertical implementation rather than the Accordian.
Try this link and see if that helps:
http://jqueryui.com/tabs/#vertical
I have the basic bootstrap tabs set up with no dynamically inserted content and print specific media queries in my base stylesheet. When the user prints from the browser I want all the tab content to print, not just the active tab. I know there has to be an easy solution to this, I just can't figure it out.
try this in your print media query:
.tab-content > .tab-pane {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
#Scott's answer didn't work for me, and I think it is because I'm using bootstrap 4.
This is what worked for me in bootstrap 4. I added the display helper classes d-print-block, d-none, and d-print-none where appropriate.
I didn't want the top nav bar to print at all, so I added d-print-none
<ul class="nav nav-tabs nav-bordered d-print-none" role="tablist" id="mainTabs">
I wanted the individual tab-panes to print if on print media, so I added a header to the tab pane's content and added the d-none class so it wouldn't show in the browser, but also added d-display-block so it WOULD should in print media. I also added d-print-media to the tabpanel div itself so that it would show the entire contents in print media.
<div role="tabpanel" class=" fade in show active tab-pane d-print-block" id="myTab">
<div class="header-title d-none d-print-block">My Tab Name</div>
Lorem ipsum dolor sit amet...
</div>
Here is the link to existing sortable http://jsfiddle.net/bcAH2/5
Just copying the code,
<ul id="sortable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default four">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
...
</ul>
Script
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
$("#sortable .four").css("height","190px");
});
What I am trying to achieve is to fill spaces below cells 1 2 3 with cells like 5 6 7 8... Is it not possible by drag and drop?
There's a jQuery plugin called gridster that might do what you want (see the demo in the front page). A simpler but less flexible alternative, as explained in more detail in this answer, is to create several columns and make each one sortable, connecting them to allow dragging from one to another. Here's an example close to yours, but not with some caveats:
You can have tiles with greater height, but not with greater width, without messing the layout (gridster does not have this limitation);
You can't have "empty spaces" between two tiles in one column (gridster has less limitations on that);
If you remove all tiles from one column, it will disappear (unless you style it to have a fixed width, with or without contents; gridster does not have this limitation).
The problem here is not in drag and drop, but the flow of the floated elements.
All the elements after "four" will align to it, and since it's higher - it takes more space. So the space in the second row in front of "four" is actually not the part of the "grid".
Actually, there is no grid here, since you're working with floated elements.
Hope this helps you to understand why it can't be achieved with the current styling and scripting.
I found this elegant plugin, ShapeShift which does the job nicely
There is another forked version of gridster, thought worth sharing here, gridster.js Forked