I'm using a custom image for checkboxes and I'm seeing some strange behavior in IE 8. In order to use the custom image I'm using a label with a background-image for checked, checked-focus, unchecked, unchecked-focus, and hiding the checkbox. The issue is that the hidden checkbox is causing IE 8 to incorrectly display the state of the label, i.e., when the label is initially clicked the state of the label is updated correctly, however, upon subsequent click events the label will only update correctly if clicked twice. Any suggestions?
'label[for="remember_me"] mousedown' : function(el, ev){
var rememberMe = $('#remember_me');
rememberMe.attr('checked', !rememberMe.attr('checked'));
$(el).attr('checked', !rememberMe.attr('checked'));
},
'label[for="remember_me"] mouseup' : function(el, ev){
var rememberMe = $('#remember_me');
rememberMe.attr('checked', !rememberMe.attr('checked'));
$(el).attr('checked', !rememberMe.attr('checked'));
input[type="checkbox"] {
display: none;
}
#remember_elements > label {
background: url("../../images/checkmark-unchecked-normal.png") 0 0 no-repeat;
width: 22px;
height: 22px;
float: left;
margin-right: 10px;
}
#remember_elements > label:hover {
background: url("../../images/checkmark-unchecked-focus.png") 0 0 no-repeat;
}
#remember_elements > label[checked="checked"] {
background: url("../../images/test/checkmark-checked-normal-renault.png") 0 0 no-repeat;
}
#remember_elements > label[checked="checked"]:hover {
background: url("../../images/test/checkmark-checked-focus-renault.png") 0 0 no-repeat;
}
checked is a bolean attribute.
eg.
both and are valid.... for interoperability with xhtml the full checked="checked" is required.... (xhtml conformance checking requires all attributes to be quoted strings).... possibly in IE8 though the full checked="checked" is required.
try #elid[checked] i/o #elid[checked="checked"]
A word of warning..... input elements also accept keyboard events. The space bar can also be used to toggle the checked attribute of an input[type=checkbox]
jquery.mobile has the framework for switch style checkbox overlays.
Related
The Pinterest Widget Builder allows for flexibility in creating a widget to place on your site. I added one on this page, but there appears to be a limit to the width you can set for the widget. For example I set the width to 1170, but it is only displaying at 1111px.
Here is the code:
<a data-pin-do="embedUser" href="http://www.pinterest.com/rouvieremedia/" data-pin-scale-width="180" data-pin-board-width="1170">Follow Pinterest's board Pin pets on Pinterest.</a>
This is a Bootstrap site and I would really like to be able to make this widget responsive as well. I tried applying css styling to the widget just to see if I could impact it using this. Alas, no luck.
div.container > span.PIN_1407891215996_embed_grid.PIN_1407891215996_fancy {
border: 5px solid red;
}
Any suggestions for interacting with this element would be appreciated. Then I can apply some additional styling.
Wrap your widget in a container, e.g. #pinterest-container, and add the following styles:
#pinterest-container > span {
width: 100% !important;
overflow: hidden;
}
#pinterest-container > span > span > span > span {
min-width: 0;
}
The first one overrides width which is otherwise fixed, making it responsive. The second one deals with an issue where the last column is not displayed if the widget is very narrow.
The width of the widget depends on a number of factors:
The width of the enclosing element: you can't exceed that width
A multiple of the data-pin-scale-width + padding: the width of the widget won't pad right. It'll be exactly the size of the multiple of the items inside + small padding left and right, and the padding between the items
And given the above, the data-pin-scale-width obviously
So if you want an exact width of 1200, try the data-pin-scale-width="195". That should do it, assuming the enclosing element is larger.
Here's a solution I came up with: http://pastebin.com/kXVDWUu8
I suggest including the following style:
#pin-container > span {
box-shadow: none !important;
width: 100%;
overflow: hidden;
}
To make the Pinterest widget responsive, this is the solution that worked for me. Taken from here.
CSS
#pinterest-container {
display: flex;
}
#pinterest-container a {
flex: 1;
}
How to disable Street View dragging / swiping? This is important especially on mobile devices, where the both the Street View and the whole web page are scrolled by swiping on the screen with a finger. In fact if you try to scroll the page touching with finger a point where you have a Street view, you will scroll the Street view instead of the page.
If the Street view is full-width this may be an usability issue.
Google API does not provide this option, but I managed it to work by placing an invisible div on top of the Street view, preventing the underlying Street View receiving evented. I created a toggle button "Drag Street View / Drag web page). The button can dynamically show/hide Street view controls according to the enabled/disabled state of the Street View.
Example here: http://www.genovaperte.it/item/antico-forno-ursida/
Please see it from a mobile touch device because the toggle button is needed and shown, in my context, only for mobile touch devices. In desktop devices Street View is Always navigable by default because there aren't issues with this.
Outline of the code (here using jQuery and Modernizr):
CSS:
.draggable-street-view-toggle-button { cursor: pointer; background-color: #fff; border: solid 2px #firstThemeColor; z-index: 1000; position: absolute; right: 40px; padding: 10px; } /* the toggle button appearance. right = 40px to not overlap the close button */
.prevent-dragging { position: absolute; width: 100%; height: 400px; z-index: 999; } /* the hidden layer to prevent draggin events reach the underlying Street View */
#directory-main-bar.hide-gmnoprint .gmnoprint { display: none; } /* class dynamically added/removed to toggle controls */
HTML:
<div id="directory-main-bar">
... Here you have to initialize your Street view via Google API or with your preferred jQuery plugin like GMAP3 ...
I recommend these options: defaultDisableUI = false, enableCloseButton : true, and zoomControl : Modernizr.touch ? false : true,
</div>
JS:
function toggleStreetViewControls(state) {
mapDiv = $("#directory-main-bar");
if(!state) {
$('<div class="prevent-dragging"></div>').height(400).insertBefore(mapDiv); /* 400 is the Street View height you've chosen when setupping it */
mapDiv.addClass('hide-gmnoprint');
}
else {
$('.prevent-dragging').remove();
mapDiv.removeClass('hide-gmnoprint');
}
}
if (Modernizr.touch){
var swDraggableButton = $('<div class="draggable-street-view-toggle-button"></div>').insertBefore(mapDiv);
$('<div class="prevent-dragging"></div>').height({!$themeOptions->directoryMap->mapHeight}).insertBefore(mapDiv);
mapDiv.addClass('hide-gmnoprint');
}
swDraggableButton.click(function () {
if($(this).hasClass('active')){
$(this).removeClass('active').addClass('inactive').text({__ 'Drag web page'});
toggleStreetViewControls(false);
} else {
$(this).removeClass('inactive').addClass('active').text({__ 'Drag Street view'});
toggleStreetViewControls(true);
}
});
}
I have implemented KendoUI in my WebApp, is there any way of making the grid responsive?
Like, showing fewer columns on smaller resolutions!
Here's my bootstrap-styled Kendo UI grid BEFORE applying the following styles
And here's what you get afterwards. May not be perfect, or what some will consider 'responsive' enough. But, for my users, this works a treat. Phone isn't our target platform anyways, but, now we can at least see what's in the grid, even if we cannot sort it.. etc.
And here are the styles inspired by #Vel's codepen, from earlier in this thread.
His codepen styles are missing a statemetn to hide the colgroup element.. which is integral for this approach.
Be sure to put this CSS in your page flow somewhere AFTER the main kendo CSS file
#media screen and (max-width: 800px) {
.k-widget table {
border: 0;
}
.k-widget table thead, table colgroup {
display: none;
}
.k-widget table tr {
margin-bottom: 10px;
display: block;
border-bottom: 2px solid #ddd;
border-radius: 20px;
}
.k-widget table tr td:last-child {
background-color: #313444;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.k-widget table tr td:nth-child(2) {
background-color: #313444;
color: #FFF;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
font-weight: bold;
padding-top:1em;
}
.k-widget table td {
display: block;
font-size: 13px;
border-bottom: 1px dotted #ccc;
}
.k-widget table td:before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
}
}
There is now a minScreenWidth setting for each column, which hides the column when the browser width is less than the specified. In our application we have set some constants corresponding to the Bootstrap media query breakpoints, so instead of manually specifying the width every time, we use these constants and thus some columns are hidden when you are below e.g. the Bootstrap sm or xs breakpoints.
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.minScreenWidth
Yes. using the below link you can acheive the kenod grid responsive design.
http://codepen.io/anon/pen/QwPVNW
In media query please use like this
#media screen and (max-width: 600px) {
.k-grid-content > table {
}
}
I am afraid the Grid currently does not provide you with such responsive design.
I have this working in a bootstrap site via jQuery. Here's how I hid the 3rd and 4th (index 2 and 3) columns when the browser is narrow (under 768 px).
dataBound: function () {
$("#contacts tr > td:nth-child(2)").addClass("hidden-xs");
$("#contacts tr > td:nth-child(3)").addClass("hidden-xs");
$("#contacts thead th:nth-child(2)").addClass("hidden-xs");
$("#contacts thead th:nth-child(3)").addClass("hidden-xs");
$("#contacts colgroup col:nth-child(2)").addClass("hidden-xs");
$("#contacts colgroup col:nth-child(3)").addClass("hidden-xs");
}
Unfortunately this creates an index dependency, so you can't shuffle your columns around without updating these rules.
I have written a JQuery based widget with can be used to make a Kendo Ui Grid responsive.
You can get the widget here: https://github.com/loanburger/ResponsiveKendoGrid
Usage: After creating your grid add the following code:
$('#GridId').responsiveGrid(
{ columnsToShow: ['date','name','surname'], columns you want to show in responsive view
mobileWidth: 860, // screen width to trigger the change
idColumn: 'Id', //ID column
tools: ['excel'] // if you have the excel export option or blank if not
});
What it does is is basically only keeps the first column and hides the other columns but changing the client template used. It then created a items using the columns you specified and stacks then top down.
This works for me in most cases where I am just displaying data but not for inline editing or inline custom controls - that's coming later..
Yes., you can do it by setting width for Grid columns.
if you set columns width, kendo will automatically enable horizontal scrolling for smaller resolutions.
Kendo UI treeview triangles are too tiny for my users.
I want to make them bigger.
If those are the only icons that you want to make bigger, you can try creating two images with the desired size and then define the following styles:
#grid .k-hierarchy-cell > .k-icon.k-plus {
background-image: url('/images/plus.png');
background-position: 0 0;
width: 32px;
height: 32px;
}
#grid .k-hierarchy-cell > .k-icon.k-minus {
background-image: url('/images/minus.png');
background-position: 0 0;
width: 32px;
height: 32px;
}
Here I create an image and saved in /images/plus.png for expanding the details and size 32x32 pixels and another saved in /images/minus.png for collapsing it.
With the CSS selector I'm limiting its scope to a grid which id is grid.
You will need to manually edit 'Default/sprite.png' located in you styles folder together with other kendo styles. This post should get you started >> http://www.kendoui.com/forums/ui/general-discussions/using-the-kendo-ui-theme-builder.aspx#Bi_T-0dZtEuYNyT-ypDIlA , use attached *x2.psd sprites or edit files further in photoshop.
I have 3 fancy box slide shows in ►this page◀
1 in the portraits.
2 in the porthole.
3 coming from the anything slider itself.
The anything slider is in a ul - but I don't want previos and next buttons to show on that one.
Since they all use the same CSS, I can't just hide them. So I would imagine I would have to do it in the javaScript... But I can't find anything in the documentation.
Do any of you have any ideas?
Thank you.
Remove the rel attribute from the links that you don't want to have next/prev buttons
remove or hide previous next functionality from fancybox
.ui-widget-overlay
{
opacity: 0.9 !important;
background: none repeat scroll 0 0 #111111 !important;
}
.fancybox-prev span, .fancybox-next span
{
/* .... */
visibility: hidden !important;
}
.fancybox-next
{
z-index:-999 !important;
}
.fancybox-prev
{
z-index:-999 !important;
}