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');
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?
I am noticing that jQuery datepicker is neither activating the current element nor the next element in the tab index after tabbing into a field spawns a datepicker instance and the mouse is used to click on a day.
<input type="text" id="no1" />
<input type="text" id="no2" />
<input type="text" id="no3" />
$('#no2').datepicker();
$('#no1').focus();
If you check out http://jsfiddle.net/DgkJZ/1/
and tab to the second field, click a date, you'll see what I mean about the tab focus going nowhere. Is there some way around this that doesn't involve editing jQuery UI source?
Try to catch the onSelect and set focus accordingly
$('#no2').datepicker( {
onSelect: function() {
$('#no3').focus();
}
);
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>
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)