I want to use jquery.selectable on a table inside a div which has the setting overflow:auto.
<div style="overflow:auto; height: 250px">
<table id="#selectable">
<!-- big table with lots of cells -->
</table>
</div>
In the case where the table does overflow I want to be able to select a range of cells larger than the visible area. When I drag to the edge of the visible area it should scroll to allow me to select a larger area.
This works without jquery.selectable, for example when you highlight plain text inside a div with scroll bars. But with jquery.selectable enabled, it won't scroll. Is there a way to enable scrolling while selecting?
Can you copy more code ?
I think you can change :
<table id="#selectable">
By
<table id="selectable">
Related
how can I remove z-index of the kendo window? I don`t want window to be modal, so I did like this .Modal(false). But of no use , window is rendering with z-index of 10003 like a popup. My intention is to render 9 windows on a same page ,put 3 windows per row in a table. Because of z-index , layout is distracting. If I can able to remove z-index, I can succeed.
#(Html.Kendo().Window()
.Name("window")
.Title("About Alvar Aalto")
.Modal(false)
.Content(#<text>
<div class="armchair">
<img src="#Url.Content("~/content/web/window/armchair-402.png")"
alt="Artek Alvar Aalto - Armchair 402" />
Artek Alvar Aalto - Armchair 402
</div>
<p>
Alvar Aalto is one of the greatest names in modern architecture and design.
Glassblowers at the iittala factory still meticulously handcraft the legendary
vases that are variations on one theme, fluid organic shapes that let the end user
ecide the use. Interpretations of the shape in new colors and materials add to the
growing Alvar Aalto Collection that remains true to his original design.
</p>
</text>)
.Draggable()
.Resizable()
.Width(600)
.Actions(actions => actions.Pin().Minimize().Maximize().Close())
)
I don't believe this can be done with the available configuration options. You could try using .Visible(false) and then manually adjust the z-index for each window to make it visible, but I imagine this would be brittle.
So I would recommend extending the window widget to create your own window type which doesn't manipulate the z-index in this way; this would keep your code encapsulated in its own class. See my answer here for some more information regarding extending kendoWindow (and a simple example). As far as I can see, the main method responsible for the z-index behavior is window.toFront(), so you'd probably have to rewrite that.
Since you plan to render the windows in a 3 by 3 grid I guess that you don't want to move or resize them and what you need from a KendoUI window is just the styling, correct? If so, you should take a look into panels styling (see KendoUI demo here) where you can style your code as a KendoUI window but, of course, you can neither move, nor hide nor resize.
You just need to use the following HTML:
<div class="k-block"><div class="k-header">Header</div>Block with header</div>
the z-index is set on the "style" property dynamically of the div.
with css all you need is an !important rule that will override styles defined on the element.
#mycontainer .k-window{
z-index: 3 !important;
}
I would like to add a toolbar button to CKEditor that shows the current color of the selection. Is this possible?
So far I managed to add a new toolbar button by following this tutorial and the colorbutton plugin, but I can't find any example of a toolbar button with dynamic presentation.
You could use a transparent image for the button and set the background color of the button span within your plugins functionality.
It looks like it might be easiest to get that span by finding the anchor tag with the title that you assigned (the tooltip) and then set the background color of the child span with id=cke_icon.
This is what the HTML for one of my plugin buttons looks like, the name of the particular plugin that the button calls isn't used, it's functions are assigned variable function numbers, so the plugin name isn't available:
<a id="cke_33" class="cke_off"
onclick="CKEDITOR.tools.callFunction(71, this); return false;"
onfocus="return CKEDITOR.tools.callFunction(70, event);"
onkeydown="return CKEDITOR.tools.callFunction(69, event);"
onblur="this.style.cssText = this.style.cssText;" aria-haspopup="true"
aria-labelledby="cke_33_label" role="button" hidefocus="true" tabindex="-1"
title="Block Background Color">
<span class="cke_icon" style="background-image:url
(/ckeditor_3.6.1/plugins/cwmarcontentbackcolor/images/contentbackcolor16x16.png?t=B5GJ5GG);
background-position:0 0px;">
</span>
<span id="cke_33_label" class="cke_label">Block Background Color</span>
<span class="cke_buttonarrow"> </span>
</a>
It will be a fair amount of work if you want to determine the color each time the user selects a portion of the content area because they could select multiple elements with multiple colors. Even if they simply click in the content area, you may have to walk up the DOM tree to find the element that the cursor position is inheriting it's color from.
I helped with a plugin for another question that had a different goal, but it involved firing each time a selection was made, creating an object based on the selection, and walking up the DOM tree to look at the class assigned to the elements. You may be able to modify it to fit your goals:
How to block editing on certain part of content in CKEDITOR textarea?
Im trying to create a horizontally scrolling gallery but I would like to avoid defining the width on the div. Someone else is touching the html - I want her to be able to drop in as many li as possible without having to touch the css and redefining the width.
The mock site is here: rachelbeen.com/Carmen.
Safari recognizes where the content ends and stops the horizontal scroll - but firefox maintains that extra space as defined by the width:6600px; on the #gallery ul. How do I stop that from happening?
Would like to avoid plugins if possible and use only CSS.
Thanks,
-Rachel
I had the same problem and I tried this:
#full{margin:0 auto; overflow:auto; height:100%; width:1050px;}
// width is just for controlling the viewport.
#holder{float:left; margin-right:-30000px;}
.box{float:left; margin:2px;}
and HTML should be like:
<div id="full">
<div id="holder">
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
</div>
</div>
add many DIVs as you want and it'll make more space for you boxes without giving it a specific width. I hope it helps you.
I am trying to set the position of a div within a table cell (with a relative position) to absolute and it works great in Chrome and IE, but in FF it seems as if it's just positioned absolute in relation to the entire body.
I'm trying to get my div to display in the top left of the cell (the link is just used to position another element in my code, but that should be positioned in the upper right of the cell). However in FF the div is displayed in the top left of the entire screen and the (element positioned by the) link in the top right of the entire screen.
Here's the relevant code:
<TD ID="EVENT" style="position:relative;">
<div id="detail" style="position:absolute;top:0;left:0;width:100%;z-index:10;">
content
</div>
</TD>
I'm not sure if this is relevant to the problem, but you're missing a quote mark in your table cell:
<TD ID="EVENT style="position:relative;">
Should read:
<TD ID="EVENT" style="position:relative;">
That sort of thing has caused problems for me in the past, although if it's ok in other browsers maybe that isn't causing the problem.
EDIT: Try using a container div inside the table cell.
<TD ID="EVENT">
<div id="container" style="position:relative;">
<div id="detail" style="position:absolute;top:0;left:0;width:100%;z-index:10;">
content
</div>
</div>
</TD>
I have following snippet to load the table generated by jqGrid.
<div id="result">
<table id="resultTable">
<tr>
<td />
</tr>
</table>
</div>
My other css interfering with jqGrid css, it causes the "caption layer" (The orange color bar at the very top of the table) height becomes very large and overlapped with other part of the page. Sorry, post image is not allowed.
The height is about 10 times larger and seems contains 3 rows with slightly different color in each. If I remove all my css, the "caption layer" display properly, but I lost all the headers, footers etc. I tried the suggestion by Tony in the link at jgGrid forum,
<style>
#result table.scroll thead th {height:30px;}
</style>
and suggestions by others, but none of them works for me. Please help me to set the "caption layer" height overwrite.
I suppose that you have some problem with CSS style "float:left" used somewhere on the page. I recommend you to look at the answer which solved close problem. If you have the same problem you should add to the <div id="result"> an additional style definition which set the floating like style="float:left" or which remove it like style="clear:left", style="clear:right" or style="clear:both".
If you have no "floating" problem and the title div will be just increased to some unwanted height you can fix the problem by setting additional CSS statically or set the height dynamically. The answer
shows how to find the caption of the grid and get its height. In the same way you can set the height.