I have a jQuery tabs ctrl, each tab has a textarea in it. I want to maximize the tabs within its parent div, so I set the tabs div to 100% width/height by css, it works. but how can I maximize the textarea in it?
Objective: tabs fill up the parent div, textarea fill up the parent tabs, when parent div is resized, tabs and textarea would be resized, too.
var $tabs = $('tabsSelector');
var $parentPane = $('parentSelector')
var newHeight = $parentPane.height() - 10;
$tabs.height(newHeight);
var navHeight = $tabs.find(".ui-tabs-nav:first").height();
$tabs.children(".ui-tabs-panel").height(newHeight - navHeight);
Related
I'm trying to jump to an anchor within a nested Jquery Mobile Collapsible.
How do I do that? Any help will be greatly appreciated.
I'm using the latest JQuery and JQuery Mobile.
Demo of what I'm trying to accomplish
jsfiddle.net/jangeltun/udbu8mfr/9/
You need to use script to expand all parent collapsibles of the target anchor, and then scroll the page to that anchor:
Go to anchor in Nested Child in Section 1<br>
Go to anchor in Nested Child in Section 2
$('.btnGO1').on('click', function() {
var elem = $(this).prop("href");
elem = elem.substr(elem.lastIndexOf("#"));
var $anch = $(elem);
//expand all parent collapsibles
$anch.parents('[data-role="collapsible"]').collapsible('expand');
//scroll to anchor
var top = $anch.offset().top;
$.mobile.silentScroll( top );
return false;
});
Updated FIDDLE
Scrolling a div that is within a .sortable() container will start dragging the div when you release the scrollbar
In the fiddle, there are 3 different sortables, 1 of them is a scrolling one
http://jsfiddle.net/wnHWH/1/
Bug: click on the scrollbar and drag it up or down to scroll through the content, when you release the mouse, the div starts to drag, which makes it follow your mouse around and there is no way to unstick it without refreshing the page.
You can use .mousemove event of jquery like this:
$('#sortable div').mousemove(function(e) {
width = $(this).width();
limit = width - 20;
if(e.offsetX < width && e.offsetX > limit)
$('#sortable').sortable("disable");
else
$('#sortable').sortable("enable");
});
I have create fiddle that works here http://jsfiddle.net/aanred/FNzEF/. Hope it meets your need.
sortable() can specify a selector for a handle much like draggable() does. Then only the matched elements get the click events. You specify the handle selector like this:
$('#sortable').sortable( {handle : '.handle'});
You already have most of what you need for the rest. The inner div on your overflowing element makes a suitable handle, like this:
<div style="height: 200px;overflow:auto">
<div class="handle" style="height: 300;">
blah
blah
blah
Then you need to restore the sortability of everything else. You'd think you could just give those divs the handle class, but it's looking for children, so you need to wrap all of them like so:
<div><div class="handle">asadf</div></div>
Modified fiddle
Supplement to SubRed's answer:
This worked perfectly for my needs. However, rather than rely on the width of the scrollbar being 20 pixels (as above), I used the code from:
How can I get the browser's scrollbar sizes?
This allows the code to handle different scrollbar widths on different setups. The code is pasted here for convenience:
function getScrollBarWidth ()
{
var inner = document.createElement('p');
inner.style.width = "100%";
inner.style.height = "200px";
var outer = document.createElement('div');
outer.style.position = "absolute";
outer.style.top = "0px";
outer.style.left = "0px";
outer.style.visibility = "hidden";
outer.style.width = "200px";
outer.style.height = "150px";
outer.style.overflow = "hidden";
outer.appendChild (inner);
document.body.appendChild (outer);
var w1 = inner.offsetWidth;
outer.style.overflow = 'scroll';
var w2 = inner.offsetWidth;
if (w1 == w2) w2 = outer.clientWidth;
document.body.removeChild (outer);
return (w1 - w2);
}
I've also used the width value for the height of the scrollbar and modified SubRed's code to suit. This now works with one or both scrollbars.
I also used code from:
Detecting presence of a scroll bar in a DIV using jQuery?
To determine the presence of either scroll bar and adapted the turning on/off of the sortable code accordingly.
Many thanks.
My plan is to have a content DIV, and inside that div I will load content via AJAX. I want the already loaded page to slide to the left, fade in the loading page with the circle.gif, and then fade in the new content and so on for the rest of the pages.
I have this code, but it goes to the top not the left, there is no scrollLeft I think.
$("#someDiv").slideUp("slow").load('blah.html', function() {
$(this).slideDown("slow");
});
And there is this one:
$('.cont a').click(function() {
var page = $(this).attr('href');
$('.p-list').prepend('<div class="loader"> </div>');
$('.p-list').slideUp("slow").load(page +" .proj", function() {
$(this).fadeIn("slow"); //or show or slideDown
});
return false;
});
Use animate with left property like this:
$("#someDiv").slideUp("slow").load('blah.html', function() {
$(this).animate({'left' : 'show'});
});
You can also use right, margin-left, margin-right with show as value depending on your needs.
To hide them back with horizontal sliding, use hide value instead.
Make sure that elements are hidden first and have set appropriate CSS values for those properties.
I using tab's JQuery plugin UI each tab contains TextArea then are manage by TinyMCE librarie.
I want to do : When you click on tab "+" , that add new tab which contains textarea too.
To create new tab with textearea , it's good. The problem is : I can't edit textarea value and if i click on TinyMCE 's option ( like Bold ) : J is null error on Javascript console
My JS Code :
$('li > a.moretxt').click(function(){
// Number of element in tabs
var size = $( "#tabs" ).tabs("length");
// Content to add on new tab
var content = "<div id='divcontent"+size+"'><textarea id=\'txtcontent"+size+"'\' cols=\'60\' rows=\'5\'></textarea></div>";
// Some variable
var path = '#divcontent'+size;
var title = 'content'+size;
var idtxt = 'txtcontent'+size;
// Add new div Textarea before the end
$('div#morecontent').before(content);
//Add control ?
tinyMCE.execCommand('mceAddControl', true, idtxt);
// Add new TAB
$( "#tabs" ).tabs("add",path,title,(size));
var index = $( "#tabs" ).tabs("option", "selected");
});
The follow code , well add tab with tiny TextArea but it doesn't works ...
TinyMCE needs to have the object in the DOM to apply itself. I'm not sure why TinyMCE isn't working as you appear to be are adding the container prior to adding TinyMCE, however if you move the "addControl" to after you've added the new Tab it should work.
I would like to display a modal dialog over the entire page, but over a certain div in the DOM. Is this possible? Examples in the docs only show how to display a dialog over the entire page.
Check out the "position" option. Use it like this:
$(".selector").dialog({ position: [350,100] }); // places dialog at x:350, y:100
Then you can line up the x,y to sit above your target div.
You can use jQuery's .offset() to find the div's position and then do what John said
Fit inside Div:
var bg_div = $("#background_div");
var pos = bg_div.offset();
var margin = 10;
$(".selector").dialog({
position: [pos.left+margin,pos.top+margin],
width: bg_div.outerWidth() - margin*2,
height: bg_div.outerHeight() - margin*2
});
Center over Div:
var bg_div = $("#background_div");
var pos = bg_div.offset();
var x = pos.left + (bg_div.outerWidth()/2);
var y = pos.top + (bg_div.outerHeight()/2);
$(".selector").dialog({position: [x,y]});