1820 comments found

  • Bought between 10 and 49 items
  • Has been a member for 1-2 years
vsrm Purchased

Hi,

How can I apply the green-gradient color to the datatable ? By default it displays only in blue.

displayinline

Hi,

The datatables plugin uses a specific structure, so the blue gradient is defined in the plugin’s stylesheet – it does not use the generic color classes. So if you want to change the gradients, simply copy a gradient’s definition from colors.css to js/libs/DataTables/jquery.dataTables.css:

  • .xxx-gradient -> .dataTables_wrapper, ...
  • .xxx-gradient.glossy -> .paginate_disabled_previous, ...
  • a.xxx-gradient.glossy:hover -> .paginate_enabled_previous:hover, ...
  • a.xxx-gradient:active -> .paging_full_numbers a.paginate_active, ...

Replace only the background and border-color properties.

Let me know if you need more details! ;)

  • Bought between 50 and 99 items
  • Has been a member for 1-2 years

Hi,

I am experiencing an issue with the navigation on a retina display iPad. The demo works fine, but when I use a custom image, and change the css respectfully, I don’t see anything on the iPad. I have tested on a non-retina iPad and there are no issues. Do you have any idea what I could be missing?

Thanks for your time,

Eric

Default-user

Figured out my issue, I didn’t realize a different style sheet was used for retina.

  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • United States

Is the demo using the latest version of the code? I ask because seems even on Chrome 29.* stuff like the forms and select boxes in the demo are too big and overlapping into other areas especially under the settings demonstration.

displayinline

Hi,

Everything seems to work fine here in Chrome, could you give me more details about the issue you noticed? Thanks!

kbeezie

For example on both Safari (6.0.x) and Chrome (29.x) both on windows and mac) Some areas where there are form elements are overlapping into nearby fields in the demo, such as this screenshot here. http://i.xlu.be/xFRJF.png (Safari 6.0.5 Mac) and http://i.xlu.be/xFRJF.jpg (Chrome 29.0.1547.76 m Windows)

displayinline

Oh, I see… This happens at some specific resolutions, because the inputs can’t shrink below a given size unless their are told to be fluid. I fixed the demo, it only requires adding the class full-width to the inputs/selects and setting a small enough size attribute on the inputs ;)

Let me know if you notice any other issue!

  • Bought between 1 and 9 items
  • Has been a member for 1-2 years

I’ve added a class for the Switches a “widing” class for the normal height. The result is a major width of switch.

/* * * ’||’’|. ’|| * || || .... .... ... .... || ... ... ... ... .. * || || .|...|| ’|. | .|...|| || .| ’|. ||’ || ||’ ’’ * || || || ’|.| || || || || || | || * .||...|’ ’|...’ ’| ’|...’ .||. ’|..|’ ||...’ .||. * || * --- By Display:inline --—’’’’ ---- * * Switches styles */

.switch { display: inline-block; *display: inline; zoom: 1; text-align: center; position: relative; height: 30px; width: 95px; padding: 0; vertical-align: middle; -webkit-background-clip: padding-box; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; overflow: hidden; cursor: pointer; -webkit-transition: all 400ms; -moz-transition: all 400ms; -ms-transition: all 400ms; -o-transition: all 400ms; transition: all 400ms; -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.5), 0 0 0 rgba(51, 153, 255, 0); -moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.5), 0 0 0 rgba(51, 153, 255, 0); box-shadow: 0 1px 1px rgba(255, 255, 255, 0.5), 0 0 0 rgba(51, 153, 255, 0); } .switch > input { display: block; position: absolute; top: 0; left: 0; visibility: hidden; } .switch.wide { width: 125px; } .switch.wider { width: 155px; } .switch.widing { width: 200px; } .switch.focus { -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.5), 0 0 5px rgba(51, 153, 255, 0.75); -moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.5), 0 0 5px rgba(51, 153, 255, 0.75); box-shadow: 0 1px 1px rgba(255, 255, 255, 0.5), 0 0 5px rgba(51, 153, 255, 0.75); } .button-height .switch { margin-top: -2px; margin-bottom: 2px; } .button-height .switch.float-left, .button-height .switch.float-right { margin-top: 2px; } .switch-on, .switch-off { display: block; position: absolute; line-height: 30px; font-size: 18px; overflow: hidden; padding: 0; top: 0; left: 0; right: 0; bottom: 0; } .no-boxshadow .switch-on, .no-boxshadow .switch-off { line-height: 26px; border-width: 1px; border-style: solid; } .switch-on { color: white; right: 91px; -webkit-background-clip: padding-box; -webkit-border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; -webkit-transition: right 200ms; -moz-transition: right 200ms; -ms-transition: right 200ms; -o-transition: right 200ms; transition: right 200ms; -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.75), inset -5px 1px 3px rgba(0, 0, 0, 0.5); -moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.75), inset -5px 1px 3px rgba(0, 0, 0, 0.5); box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.75), inset -5px 1px 3px rgba(0, 0, 0, 0.5); -webkit-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35); -moz-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35); } .wide > .switch-on { right: 121px; } .wider > .switch-on { right: 151px; } .widing > .switch-on { right: 200px; } .reversed-switches .switch-on { right: 0; left: 91px; padding-left: 4px; padding-right: 0; -webkit-border-radius: 0; -webkit-border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; -webkit-transition: left 200ms; -moz-transition: left 200ms; -ms-transition: left 200ms; -o-transition: left 200ms; transition: left 200ms; -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.75), inset 5px 1px 3px rgba(0, 0, 0, 0.5); -moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.75), inset 5px 1px 3px rgba(0, 0, 0, 0.5); box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.75), inset 5px 1px 3px rgba(0, 0, 0, 0.5); } .reversed-switches .wide > .switch-on { left: 121px; } .reversed-switches .wider > .switch-on { left: 151px; } .reversed-switches .widing > .switch-on { left: 200px; } .switch-off { color: #999999; left: 36px; padding-left: 4px; -webkit-background-clip: padding-box; -webkit-border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; -webkit-transition: left 200ms; -moz-transition: left 200ms; -ms-transition: left 200ms; -o-transition: left 200ms; transition: left 200ms; -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.5), inset 5px 1px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.5), inset 5px 1px 3px rgba(0, 0, 0, 0.3); box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.5), inset 5px 1px 3px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); -moz-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); } .black-inputs .switch-off, .black-input > .switch-off { color: #505050; -webkit-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); -moz-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); } .reversed-switches .switch-off { left: 0; right: 36px; padding-left: 0; padding-right: 4px; -webkit-border-radius: 0; -webkit-border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; -webkit-transition: right 200ms; -moz-transition: right 200ms; -ms-transition: right 200ms; -o-transition: right 200ms; transition: right 200ms; -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.5), inset -5px 1px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.5), inset -5px 1px 3px rgba(0, 0, 0, 0.3); box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.5), inset -5px 1px 3px rgba(0, 0, 0, 0.3); } .switch-on > span, .switch-off > span { display: block; width: 55px; padding-top: 1px; } .wide > .switch-on > span, .wide > .switch-off > span { width: 85px; } .wider > .switch-on > span, .wider > .switch-off > span { width: 115px; } .widing > .switch-on > span, .widing > .switch-off > span { width: 155px; } .switch-on > span { margin-left: -55px; -webkit-transition: margin-left 200ms; -moz-transition: margin-left 200ms; -ms-transition: margin-left 200ms; -o-transition: margin-left 200ms; transition: margin-left 200ms; } .wide > .switch-on > span { margin-left: -85px; } .wider > .switch-on > span { margin-left: -115px; } .widing > .switch-on > span { margin-left: -155px; } .reversed-switches .switch-on > span { margin-left: 0; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } .reversed-switches .switch-off > span { -webkit-transition: margin-left 200ms; -moz-transition: margin-left 200ms; -ms-transition: margin-left 200ms; -o-transition: margin-left 200ms; transition: margin-left 200ms; } .switch-button { position: absolute; z-index: 88; display: block; border-width: 1px; border-style: solid; width: 38px; left: 0; top: 0; bottom: 0; padding: 0; margin: 0; -webkit-background-clip: padding-box; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-transition: left 200ms, border-color 400ms; -moz-transition: left 200ms, border-color 400ms; -ms-transition: left 200ms, border-color 400ms; -o-transition: left 200ms, border-color 400ms; transition: left 200ms, border-color 400ms; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75); } .black-inputs .switch-button, .black-input > .switch-button { -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); } .reversed-switches .switch-button { left: auto; right: 0; -webkit-transition: right 200ms, border-color 400ms; -moz-transition: right 200ms, border-color 400ms; -ms-transition: right 200ms, border-color 400ms; -o-transition: right 200ms, border-color 400ms; transition: right 200ms, border-color 400ms; } .focus > .switch-button { border-color: #3399ff !important; } .switch-button.silver-gradient, .switch-button.white-gradient { -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75); } .switch-button.black-gradient, .switch-button.anthracite-gradient, .switch-button.grey-gradient, .switch-button.red-gradient, .switch-button.orange-gradient, .switch-button.green-gradient, .switch-button.blue-gradient { -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); } .medium > .switch-button:after, .tiny > .switch-button:after, .mini > .switch-button:after { display: block; content: ’ ’; position: absolute; background-image: url(../../img/standard/sprites.png); } / Prevent animation when dragging / .dragging > .switch-on, .dragging > .switch-on > span, .dragging > .switch-off, .dragging > .switch-off > span, .dragging > .switch-button { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } / Active style */ .switch.checked > .switch-button { left: 55px; } .wide.checked > .switch-button { left: 85px; } .wider.checked > .switch-button { left: 115px; } .widing.checked > .switch-button { left: 155px; } .reversed-switches .switch.checked > .switch-button { left: auto; right: 55px; } .reversed-switches .wide.checked > .switch-button { right: 85px; } .reversed-switches .wider.checked > .switch-button { right: 115px; } .reversed-switches .widing.checked > .switch-button { right: 155px; } .checked > .switch-on { right: 36px; } .checked > .switch-on > span { margin-left: 0; } .ie7 .checked > .switch-on > span { margin-left: -4px; } .reversed-switches .checked > .switch-on { left: 36px; right: 0; margin-left: 0; } .checked > .switch-off { left: 91px; } .wide.checked > .switch-off { left: 121px; } .wider.checked > .switch-off { left: 151px; } .widing.checked > .switch-off { left: 200px; } .reversed-switches .checked > .switch-off { left: 0; right: 91px; } .reversed-switches .wide.checked > .switch-off { right: 121px; } .reversed-switches .wider.checked > .switch-off { right: 151px; } .reversed-switches .widing.checked > .switch-off { right: 200px; } .reversed-switches .checked > .switch-off > span { margin-left: -55px; } .reversed-switches .wide.checked > .switch-off > span { margin-left: -85px; } .reversed-switches .wider.checked > .switch-off > span { margin-left: -115px; } .reversed-switches .widing.checked > .switch-off > span { margin-left: -155px; }

.switch.medium {
    width: 70px;
    height: 24px;
    *vertical-align: -7px;
    }
    .switch.medium.wide {
        width: 100px;
    }
    .switch.medium.wider {
        width: 130px;
    }        
    p > .switch.medium {
        margin-top: -5px;
        margin-bottom: -3px;
    }
    .button-height .switch.medium {
        margin-top: -2px;
        margin-bottom: 2px;
    }
    .medium > .switch-on,
    .medium > .switch-off {
        line-height: 23px;
        font-size: 14px;
        font-weight: bold;
        }
        .no-boxshadow .medium > .switch-on,
        .no-boxshadow .medium > .switch-off {
            line-height: 20px;
        }
        .medium > .switch-on {
            right: 66px;
            }
            .medium.wide > .switch-on {
                right: 96px;
            }
            .medium.wider > .switch-on {
                right: 126px;
            }
            .reversed-switches .medium > .switch-on {
                left: 66px;
                right: 0;
                }
                .reversed-switches .medium.wide > .switch-on {
                    left: 96px;
                }
                .reversed-switches .medium.wider > .switch-on {
                    left: 126px;
                }
        .medium > .switch-off {
            left: 26px;
            }
            .reversed-switches .medium > .switch-off {
                left: 0;
                right: 26px;
            }
        .medium > .switch-on > span,
        .medium > .switch-off > span {
            width: 40px;
            }
            .medium.wide > .switch-on > span,
            .medium.wide > .switch-off > span {
                width: 70px;
            }
            .medium.wider > .switch-on > span,
            .medium.wider > .switch-off > span {
                width: 100px;
            }
            .medium > .switch-on > span {
                margin-left: -40px;
                }
                .medium.wide > .switch-on > span {
                    margin-left: -70px;
                }
                .medium.wider > .switch-on > span {
                    margin-left: -100px;
                }
                .reversed-switches .medium > .switch-on > span {
                    margin-left: 0;
                }
    .medium > .switch-button {
        width: 28px;
        }
        .medium > .switch-button:after {
            top: 50%;
            left: 50%;
            width: 7px;
            height: 8px;
            margin: -3px 0 0 -3px;
            background-position: -120px 0;
            }
            .black-inputs .medium > .switch-button:after,
            .black-input.medium > .switch-button:after {
                background-position: -127px 0;
                margin-top: -4px;
            }
    .checked.medium > .switch-button {
        left: 40px;
        }
        .medium.checked.wide > .switch-button {
            left: 70px;
        }
        .medium.checked.wider > .switch-button {
            left: 100px;
        }
        .reversed-switches .switch.checked.medium > .switch-button {
            left: auto;
            right: 40px;
            }
            .reversed-switches .medium.checked.wide > .switch-button {
                right: 70px;
            }
            .reversed-switches .medium.checked.wider > .switch-button {
                right: 100px;
            }
        .checked.medium > .switch-on {
            right: 26px;
            }
            .checked.medium > .switch-on > span {
                margin-left: 0;
                }
                .ie7 .checked > .switch-on > span {
                    margin-left: -4px;
                }
            .reversed-switches .checked.medium > .switch-on {
                left: 26px;
                right: 0;
                margin-left: 0;
            }
        .checked.medium > .switch-off {
            left: 66px;
            }
            .medium.checked.wide > .switch-off {
                left: 96px;
            }
            .medium.checked.wider > .switch-off {
                left: 126px;
            }
            .reversed-switches .checked.medium > .switch-off {
                left: 0;
                right: 66px;
                }
                .reversed-switches .medium.checked.wide > .switch-off {
                    right: 96px;
                }
                .reversed-switches .medium.checked.wider > .switch-off {
                    right: 126px;
                }
            .reversed-switches .medium.checked > .switch-off > span {
                margin-left: -40px;
                }
                .reversed-switches .medium.checked > .switch-off > span {
                    margin-left: -70px;
                }
                .reversed-switches .medium.checked > .switch-off > span {
                    margin-left: -100px;
                }
.switch.tiny,
.switch.mini {
    width: 35px;
    height: 15px;
    }
    .switch.tiny {
        overflow: visible;
        margin-left: 2px;
        margin-right: 2px;
    }
    p > .switch.tiny,
    p > .switch.mini,
    .button-height .switch.tiny,
    .button-height .switch.mini {
        margin-top: -1px;
        margin-bottom: 1px;
    }
    .tiny > .switch-on,
    .tiny > .switch-off,
    .mini > .switch-on,
    .mini > .switch-off {
        line-height: 15px;
        }
        .tiny > .switch-on,
        .mini > .switch-on {
            right: 27px;
            -webkit-border-top-left-radius: 8px;
            -webkit-border-bottom-left-radius: 8px;
            -moz-border-radius: 8px 0 0 8px;
            border-radius: 8px 0 0 8px;
            }
            .reversed-switches .tiny > .switch-on,
            .reversed-switches .mini > .switch-on {
                left: 27px;
                right: 0;
                -webkit-border-radius: 0;
                -webkit-border-top-right-radius: 8px;
                -webkit-border-bottom-right-radius: 8px;
                -moz-border-radius: 0 8px 8px 0;
                border-radius: 0 8px 8px 0;
            }
        .tiny > .switch-off,
        .mini > .switch-off {
            left: 8px;
            -webkit-border-top-right-radius: 8px;
            -webkit-border-bottom-right-radius: 8px;
            -moz-border-radius: 0 8px 8px 0;
            border-radius: 0 8px 8px 0;
            }
            .reversed-switches .tiny > .switch-off,
            .reversed-switches .mini > .switch-off {
                left: 0;
                right: 8px;
                -webkit-border-radius: 0;
                -webkit-border-top-left-radius: 8px;
                -webkit-border-bottom-left-radius: 8px;
                -moz-border-radius: 8px 0 0 8px;
                border-radius: 8px 0 0 8px;
            }
        .tiny > .switch-on > span,
        .tiny > .switch-off > span,
        .mini > .switch-on > span,
        .mini > .switch-off > span {
            display: none;
        }
    .tiny > .switch-button {
        top: -2px;
        left: -2px;
        bottom: -2px;
        width: 17px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: inset 0 1px 0 white, 0 1px 3px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: inset 0 1px 0 white, 0 1px 3px rgba(0, 0, 0, 0.5);
        box-shadow: inset 0 1px 0 white, 0 1px 3px rgba(0, 0, 0, 0.5);
        }
        .black-inputs .tiny > .switch-button,
        .black-input.tiny > .switch-button {
            -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 3px rgba(0, 0, 0, 0.5);
            -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 3px rgba(0, 0, 0, 0.5);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 3px rgba(0, 0, 0, 0.5);
        }
        .reversed-switches .tiny > .switch-button {
            left: auto;
            right: -2px;
        }
        .tiny > .switch-button:after {
            top: 6px;
            left: 6px;
            width: 5px;
            height: 7px;
            background-position: -134px 0;
            }
            .black-inputs .tiny > .switch-button:after,
            .black-input.tiny > .switch-button:after {
                background-position: -139px 0;
            }
    .mini > .switch-button {
        width: 13px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        }
        .mini > .switch-button:after {
            top: 4px;
            left: 4px;
            width: 5px;
            height: 6px;
            background-position: -144px 0;
            }
            .black-inputs .mini > .switch-button:after,
            .black-input.mini > .switch-button:after {
                background-position: -149px 0;
            }
    .switch.checked.tiny > .switch-button {
        left: 17px;
        }
        .reversed-switches .switch.checked.tiny > .switch-button {
            left: auto;
            right: 17px;
        }
    .switch.checked.mini > .switch-button {
        left: 20px;
        }
        .reversed-switches .switch.checked.mini > .switch-button {
            left: auto;
            right: 20px;
        }
        .checked.tiny > .switch-on,
        .checked.mini > .switch-on {
            right: 8px;
            }
            .reversed-switches .checked.tiny > .switch-on,
            .reversed-switches .checked.mini > .switch-on {
                left: 8px;
                right: 0;
            }
        .checked.tiny > .switch-off,
        .checked.mini > .switch-off {
            left: 27px;
            }
            .reversed-switches .checked.tiny > .switch-off,
            .reversed-switches .checked.mini > .switch-off {
                left: 0;
                right: 27px;
            }
.switch.disabled, .disabled .switch,
.switch.disabled, .disabled .switch {
    cursor: default;
    }
    .disabled .switch-on,
    .disabled .switch-off {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        -webkit-text-shadow: none;
        -moz-text-shadow: none;
        text-shadow: none;
        border-width: 1px;
        border-style: solid;
        height: 28px;
        line-height: 28px;
        }
        .no-boxshadow .disabled .switch-on,
        .no-boxshadow .disabled .switch-off {
            line-height: 26px;
        }
        .medium.disabled > .switch-on, .disabled .medium > .switch-on,
        .medium.disabled > .switch-off, .disabled .medium > .switch-off {
            height: 22px;
            line-height: 20px;
            }
            .medium.disabled > .switch-on > span, .disabled .medium > .switch-on > span,
            .medium.disabled > .switch-off > span, .disabled .medium > .switch-off > span {
                width: 38px;
            }
        .tiny.disabled > .switch-on, .disabled .tiny > .switch-on,
        .tiny.disabled > .switch-off, .disabled .tiny > .switch-off,
        .mini.disabled > .switch-on, .disabled .mini > .switch-on,
        .mini.disabled > .switch-off, .disabled .mini > .switch-off {
            height: 13px;
            line-height: 13px;
        }
        .disabled .switch-button {
            -webkit-box-shadow: none !important;
            -moz-box-shadow: none !important;
            box-shadow: none !important;
            }
            .disabled .switch-button:after {
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
                filter: alpha(opacity=50);
                -khtml-opacity: 0.5;
                -moz-opacity: 0.5;
                opacity: 0.5;
            }
  • Has been a member for 1-2 years

Hello , In <select>, when i use class=”select” and width=100% . Why is the size of select list not changing according to the screen size.

But it works fine with out the “select” class.

Please Suggest, Rijz

displayinline

Hi,

Setting the size inline like this won’t work, because once the select is styled, it is wrapped in the styling element. Add the class full-width instead, this will make the styled select fluid.

Hope this helps! ;)

Default-user

Thanks a lot for the quick reply… :)

  • Bought between 10 and 49 items
  • Has been a member for 2-3 years

I just bought the developr template and I would like to congratulate you guys about the great job.

But I have a question, when I open the PSD files, it ask me about fonts. where is it?

regards,

Reinaldo

displayinline

Hi, and thanks! :)

About the fonts, the template uses Helvetica, which is available on all Macs. If you use a PC, simply use Arial instead, both fonts look almost the same.

Let me know if you have any other question!

  • Bought between 1 and 9 items
  • Has been a member for 0-1 years

I’ve added a wizard control to my page. Everything seems correct, but when I go to advance to the next step by clicking the ‘Next’ button, nothing happens. Is there other JavaScript that I need? I thought it was all wrapped up in your wizard.js file.

Default-user

Also, I don’t have references to the form validation JS since I’m not using it.

Default-user

Ok I figured it out. I need to have a step in there with this div that holds the submit button.

displayinline

Hi,

Glad to hear you found out! Let me know if you have any other question or issue ;)

  • Bought between 1 and 9 items
  • Has been a member for 1-2 years

Oh it figures… I go away for a while and you update to 1.6. LOL… I just did the 1.5 update finally. Haha.. what files do I need to change?

displayinline

;)

Well, I modified several files, the easiest solution is to use a diff tool such as Winmerge to spot the differences and merge them into your custom version. It should take no more than 10-15 minutes to update this way.

Let me know if you need more details!

  • Bought between 1 and 9 items
  • Has been a member for 1-2 years
akrall Purchased

A few weeks back I strated getting these errors in the console regarding some superfish, what is this?

Resource interpreted as Script but transferred with MIME type text/html: “http://www.superfish.com/ws/sf_main.jsp?dlsource=ziwsvig&userId=thNDuBIA2Mnk4qAKlyTwjM&CTID=ChromeReload”. inject.js:7 Resource interpreted as Image but transferred with MIME type text/javascript: “http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”. sf_preloader.jsp?dlsource=ziwsvig&userId=thNDuBIA2Mnk4qAKlyTwjM&CTID=ChromeReload&ver=12.2.14.51:256 Resource interpreted as Script but transferred with MIME type text/html: “http://www.superfish.com/ws/coupons/get.jsp?pi=ziwsvig&psi=ChromeReload&ui=NTBCthNDuBIA2Mnk4qAKlyTwjMNTBC&st=cpip&cc=ChromeReload&v=12.2.14.51”. sf_main.jsp?dlsource=ziwsvig&userId=thNDuBIA2Mnk4qAKlyTwjM&CTID=ChromeReload:61

displayinline

Hi,

This is probably the Chrome extension Auto-reload which causes this errors to show, because it tries to load a third-party script into you page. To prevent this, right click on the extension’s icon, select Options, and un-check the option I don’t want to support you [turn off the few ads].

You should not see these errors anymore ;)

Default-user
akrall Purchased

You were exactly right! I searched and searched for code that did this and nothing! it was a chrome extension!

Thank you for the tip!

  • Bought between 1 and 9 items
  • Has been a member for 0-1 years
shemz Purchased

Hello, first off congratulations on developing this nice theme. I need to embed maps to my site which will (hopefully) use this template. I tried Google and Nokia maps, but with both there is a small problem. They work only if I specify a height in fixed units, like pixels or em, but not with percentage of main section height.

To put it in perspective, here is the current code:
<section role="main" id="main">
        <hgroup id="main-title" class="thin">
        <h1>Local Maps</h1>
        <h2>nov <strong>10</strong></h2>
    </hgroup>

    <div class="with-padding">
        <input type="text" class="input full-width" id="target" placeholder="Search for a place">
        <br /><div id="mapDiv" />
    </div>
The CSS for mapDiv element looks so:
#mapDiv {
    width: 100%;
    height: 600px;
    position: relative;
    overflow:hidden;
}

It works okay, but not when height = 100%.

Any idea why it happens, or how to solve it?
displayinline

Hi,

Relative height is something quite tricky to achieve, because it requires that all parent elements also have height: 100% or a fixed height, and behave as blocks.

There are many ways to solve this, you should check some of these solutions and you will probably find one that will work for you ;)

Let me know if you still can’t have this to work! :)

Default-user
shemz Purchased

Thanks for your reply. Yes I thought of that but the solution will be quite messy and since the original CSS is working great, I do want to spend a lot of time modifying it.

While I am okay with a fixed height of the map (example 600px above), the problem is with its layout on mobile devices. How can you detect the device width and adjust height of the map accordingly?

I am actually considering this solution, I will let you how it goes.

displayinline

Keep in mind you can also use the template media query detection feature, which let you know when you are on mobile mode or on desktop mode: see the documentation in Template basics / How the template works / Responsive layout for details ;)

Default-user
shemz Purchased

It works well, thanks! :)

  • Bought between 1 and 9 items
  • Has been a member for 2-3 years

Hello. i have some problems. Our company made some restrictions in base of device that is used. on machines with resolution 1024×768 it’s like tablet-landscape, but in reality, it’s desktop. how to fix this little bug?

displayinline

Hello,

If you want to use the desktop mode on slightly smaller screens, simply change the breakpoint of the media query for the stylesheet 992.css to a lower value – in other words, change the min-width value in the line below:

<link rel="stylesheet" media="only all and (min-width: 992px)" href="css/992.css?v=1">

Make some tests to find the best value for your project requirements, it shouldn’t take your more than a couple minutes ;)

Let me know if you need more details!

Default-user

i made it in another way… because iPad has more than 992px in landscape mode. so… my way is to add at end of file: setup.js next code:

$(document).ready(function(){
    if(!$.template.touchOs && $.template.mediaQuery.name == "tablet-landscape"){
        $("head").append($("<style/>").attr({"type":"text/css"}).html("#mediaquery-checker {width: 50px;}"));
    }
});
  • Bought between 10 and 49 items
  • Has been a member for 3-4 years
brobar Purchased

Greetings. I’m having a little bit of a problem with the dynamically selecting menu items. I’ve gone through all (or most) of the comments and I found some advice that you have given others… but it only seems to be partially working for me.

Here is the code you had mentioned to others:


$('.nav-el').removeClass('current navigable-current');

var link = $('#nav-'+mod).addClass('current navigable-current'),
parent = link.closest('ul').closest('li, .navigable');
if (parent.length && !parent.hasClass('navigable'))
{
    parent.children('a, span').first().click();
}

Well I made a couple of little tweaks to it… I added the removeClass piece to make sure it no longer highlights the previous chosen menu item. All of my menu items have id’s… for example nav-dashboard, nav-createNewQuote, etc…

If I am all the way out to the root view of the menu… and I pass it a new menu option, say “nav-dashboard”, it will choose and highlight that menu option dynamically, even if it is in a sub-menu. That is good, it acts as it is supposed to. HOWEVER, if I am in a sub-menu and I try to do this to a menu element that is back out in the root view of the menu… it will select it, but it doesn’t back the menu back out to the root view (the menu stays in the sub-menu view). So the example code you gave seems to trickle down through the sub-menu if you are in a parent menu, but it doesn’t go backwards if you are in a sub-menu. Hopefully I explained that well enough.

Here is a quick little jsfiddle to kind of show what I’m talking about: http://jsfiddle.net/YgSPy/

If you load that up and then click on the BUTTON called “Symbols”, it selects the nav like you would expect. Click on the BUTTON called “Letter C” and it moves the navigation over and highlights the appropriate option. However, now that you are in a sub-menu with Letter C selected… click on the “Numbers” BUTTON and you’ll see that it doesn’t update the menu correctly. It does highlight that option, but you’ll only see it is highlighted if you hit the << to go back to the root view of the menu.

Any idea how to update that code to where it will show the chosen menu item even if you are in a sub menu and the chosen item is in a parent or another sub menu?

Thanks in advance for the assistance.

displayinline

Hello!

Indeed, this won’t work if you try to target a root element when a submenu is active, because the if() condition won’t be fulfilled. Here is the fixed code:

$('.nav-el').removeClass('current navigable-current');

var link = $('#nav-'+mod).addClass('current navigable-current'),
parent = link.closest('ul').closest('li, .navigable');
if (parent.hasClass('navigable'))
{
    parent.children('.back').click();
}
else if (parent.length)
{
    parent.children('a, span').first().click();
}

Seems to work fine here, let me know if you have any issue! ;)

Default-user
brobar Purchased

Brilliant! That did the trick. As always, you are the best. Thanks!

  • Bought between 1 and 9 items
  • Has been a member for 0-1 years

I’m integrating your site with my existing .net website. I’m using an UpdatePanel which causes partial page postbacks. In my ContentTemplate section I have some dropdown lists. When I perform a postback, all of the dropdown lists lose their styling. Is there anything you can suggest? Thanks

Default-user

Here is the HTML before:

Event Dates:  <select class=”withClearFunctions” id=”MainContent_EventTypes_ddlEventTypes” onchange=”javascript:setTimeout(‘doPostBack(\’ctl00$MainContent$EventTypes$ddlEventTypes\’,\’\’)’, 0)” name=”ctl00$MainContent$EventTypes$ddlEventTypes” tabindex=”-1”> <option value=”1” selected=”selected”>—</option> <option value=”0”>Past</option> <option value=”1”>All (Current and Future)</option> <option value=”2”>Last 30 Days</option> <option value=”3”>Next 30 Days</option> <option value=”4”>Current Year</option> <option value=”5”>Last Year</option> </select> -

And here is the HTML after: Event Dates:  <select class=”select” id=”MainContent_EventTypes_ddlEventTypes” onchange=”javascript:setTimeout(‘doPostBack(\’ctl00$MainContent$EventTypes$ddlEventTypes\’,\’\’)’, 0)” name=”ctl00$MainContent$EventTypes$ddlEventTypes”> <option value=”1”>—</option> <option value=”0”>Past</option> <option value=”1” selected=”selected”>All (Current and Future)</option> <option value=”2”>Last 30 Days</option> <option value=”3”>Next 30 Days</option> <option value=”4”>Current Year</option> <option value=”5”>Last Year</option> </select>

displayinline

Hi,

Whenever you change the content of any given element, you need to fire the template setup method on it, so all effects will be applied again on the new content:

$('#MainContent_EventTypes_ddlEventTypes').applySetup(false, true);

This is not required when using jQuery’s AJAX and DOM methods because the template places a few hooks to detect them and fire the setup method automatically.

I am just not sure how to add a callback triggered by the .net controller on each content load – I know very little about .net, sorry!

You will find more details about the template setup in the documentation, in Template basics / How the template works / Automatic template setup.

Hope this helps!

Default-user

It works perfect, thanks. I had to use an empty applySetup() though.

  • Bought between 1 and 9 items
  • Has been a member for 0-1 years

I’m using a select element with class of ‘select’. After he input.js file loads, i have a document.ready function to add an onclick event to the items in my select element. However, the onclick event does not get fired. If I remove the class ‘select’ my onclick event fires. Please help. Thanks

Default-user

Got this one working.

Changed: $(‘select[id$=ddlAccountStatus] option’).click(function () { AjaxFilters(); });

To: $(‘select[id$=ddlAccountStatus]’).change(function (event) { AjaxFilters(); });

displayinline

Hi,

It was the exact solution I was about to give ;) Glad to hear you already found it!

Default-user

I appreciate you being so helpful. Thanks again.

  • Bought between 10 and 49 items
  • Has been a member for 1-2 years

Hello there,

First of all, this is an amazing work, congratulations! I would buy it, but I think there’s some missing features that would be really great to see in this theme: a drad and drop feature and some real-time graphics (donuts charts, pie charts, bar charts…).

But, once again, really great work! :)

JuJ

I think I didn’t see a tag field, too, this would be really great! :)

JuJ

Hello DisplayInline,

Will it be possible to see these features in a next future? Thanks for your reply.

Best.

displayinline

Hi!

Sorry for the late reply… Actually, I don’t plan on adding these features anytime soon, but you can easily add them with external plugins – for instance you can use one of these Drag and drop plugins, and to add a tag field check some of these plugins ;)

About the real time graphics charts, well this mostly depends on what you expect, but there are many available libs to do this.

Let me know if you have any other question! :)

JuJ

Hey,

Thanks a lot for your answer.

Best! :)

  • Has been a member for 1-2 years
Hello, How do i put Submit & close button in the modal popup.
            function openModal2(name) {
            var modal = $.modal({
             content:  // content is a form with 3 radio button
                           '<div id="main2" class="with-padding">' +
           '<form method="post" action="php/favlist.php" id="message1">' +
            '<p class="message icon-speech green-gradient">How important is this contact? </p>  ' +
            '<p><span>'+
           '<input type="radio" name="rate" id="rate" value="1" class="radio"> <label for="checkbox-1" class="label">Warm &nbsp&nbsp&nbsp&nbsp</label>' +
             '<input type="radio" name="rate" id="rate" value="2" class="radio"> <label for="checkbox-1" class="label">Hot &nbsp&nbsp&nbsp&nbsp</label>' +
              '<input type="radio" name="rate" id="rate" value="3" class="radio"> <label for="checkbox-1" class="label">Red Hot &nbsp&nbsp</label><br /><br />' +
           '</span></p>' +
            '<input type="submit" name="submit" id="submit" value="submit" class="button icon-mail blue-gradient"/> <input type="button" name="cancel" id="cancel" value="cancel"   class="button icon-mail red-gradient"/>' +
             '<ul id="response" />' +
            '</form>' +
               '</div>',
             title: 'Add To MyFav List',
                width: 250,
                scrolling: false,

                buttons: {

    }
                },
                buttonsLowPadding: true
            });

This was my try

      // Submit buttons
                    'Submit':{
                                  click:function(modal) {form.submit();}
                    },
                     'Close': {
        classes: 'red-gradient glossy big',
        click:    function(modal) { modal.closeModal(); }

Please suggest.

Default-user

Or can you please tell from the above code why the “cancel” button is not working in Mozilla where as in chrome it works fine.

Default-user

Is there any solution???

Please Comment….

displayinline

Hi,

Could you give me more details please? The first code example can’t work by itself, because there is no action attached to the cancel button – at least in this snippet.

The second code snippet should work fine, you just need to define the variable form.

By the way, could you post your questions with the account with which you bought the template? Otherwise I can’t provide extended support. Thanks! ;)

Default-user

Hi and thanks for the reply, I have sent the details regarding the portal login so that you can check out the compatibility issue.

By the way my friend purchased the template and gave me to work on the project. that's why i am posting from my account rather than from the purchased account. Will this still don't get me your extended support?

Thanks

  • Bought between 1 and 9 items
  • Has been a member for 0-1 years

I couldn’t find any documentation on how to select a tab using a button or anchor. How could I do this? Thanks

displayinline

Hi,

If you want to show the tab relative to a specific content-block, call this on the content-block or any element inside it:

$(selector).showTab();

For instance on an anchor:

<a onclick="$('#tab1').showTab();">Show tab</a>

Hope this helps! ;)

Default-user

Works perfect thanks.

  • Bought between 1 and 9 items
  • Has been a member for 2-3 years
  • Mexico

Hi Display!

I think this works better for the menu in mobile version:

http://tympanus.net/codrops/2013/07/30/google-nexus-website-menu/

What do you think? any chance to integrate to the official upgrade?

Thanks!

displayinline

Hi!

Indeed, this looks awesome – as almost every tutorial from Codrops ;) But I don’t plan yet on integrating this to the template, to much disruption with the current design, it may not work for everyone…

However, if you start implementing it on the template, let me know if you need any help! :)

  • Bought between 1 and 9 items
  • Has been a member for 2-3 years

Hello. i have a question. i have some HTML that is loaded via ajax. how to make that part of peace of html to work checkboxes, selects (styled)? they are not injected via jquery, they are just html parts of site?

displayinline

Hello,

THis is easy, just call the template automatic setup method on your new elements:

$('#some-id').applySetup(true, true);

You will find more details on this in the documentation, in Template basics / How the template works / Automatic template setup ;)

Let me know if you need more details!

  • Bought between 1 and 9 items
  • Has been a member for 1-2 years

Hi,The image of file extension in “fineFiles” are not the same number in the various format for example the “pdf” image is only in the 16(px) folder. Thank you

Default-user

for the precision, in the case of pdf, there isn’t in the 24 px

displayinline

Hi,

You are right, the 24px PDF icon is missing – here it is! ;)

by
by
by
by
by
by