Developr - Fully Responsive Admin Skin

Hi,

I am not sure I understand your question, can you give me more details? If you have an online test page where I can see your code, this would be perfect

Hi,

Basically I use the search feature above one of the DataTables. On using selecting one of the filtered results on the table I am brought to a page with more information on that selected item. Is it possible to return to my original datatable with it still filtered? As it stands the dataTable will return all results i.e. unfiltered

Hi,

You may try to set the oSearch option when initializing your DataTable:

$(document).ready( function() {
  $('#example').dataTable( {
    "oSearch": {"sSearch": "Search string"}
  } );
} );

You just need to figure a way to store or send you search across your listing and edit pages. For instance, if you want to use cookies (include the jQuery Cookie plugin):

// Retrieve previous search
var search = $.cookie('table_search');

// Table sort - DataTables
var table = $('#table-id');
table.dataTable({
    /*
     * Your options here
     */
    "oSearch": {"sSearch": search}
});

// Watch search input for changes
table.closest('.dataTables_wrapper').find('.dataTables_filter input').change(function()
{
    // Store current search
    $.cookie('table_search', this.value);
});

Then every time the user comes back to the page, the table will be filtered by its last search. Of course, set the cookie index table_search to whatever you want, you may even change it from one datatable to another to allow distinct storage.

You will find more details on the search options on the plugin’s documentation.

Hope this helps!

I added the code for a particular select, and now the drop down doesn’t work. I can click it, see the options, but not select one.

Also, I am trying to get it so when someone selects an option, the javascript code uses that value to determine what’s shown next. I wonder if it will still work to use document.getElementById(ID).value ?

I suppose it would help if I thoroughly understood jQuery. I just don’t have enough hours in a day lol.

Well, I tested the code on a stock template file when writing my answer, and tested it again right now, it seems to work fine… Can you show me the exact code you are using? (HTML for the select and javascript)

Note that if you want to detect when a select’s value changes, this is much easier:

$(document).ready(function()
{
    $('#my-select').change(function()
    {
        // New value
        var value = $(this).val();

        // Add your code to handle the value
    });
});

The $(document).ready() function is used to wait until the whole page markup is loaded, so the code won’t run before your select is added to the DOM. You can get rid of it and only use the inner $('#my-select').change() function if you put the code below the select, for instance at the end of the file (as I did for most JS in the template example files).

Of course, you can still use the native JS code document.getElementById(ID).value if you prefer, it works as well The jQuery code is just a shorthand.

Tell me if you still have issues with it

Hi,

Sure, what kind of issue do you have?

Hi, and thanks!

About your huge select, there’s not much you can do: the browser will always require a long time to build, display and refresh an options list this big.

For such long lists, I would suggest to use a native select element (without the styling), or simply change to an autocomplete field – you will find many great plugin to do this, such as jQuery Autocomplete or one of these.

Besides, that would drastically reduce the amount of data generated by your server and loaded by the user

Hi, and thanks!

About your issue, I couldn’t replicate it, sorry. I made several tests with various layouts, but the sizeChange event only triggered when required.

Maybe this is an issue with a particular layout, or with some browsers only. Do you have the same issue on all browsers, or if you change the location of one textarea?

If you have an online test page, I’ll run some tests on it to try to find what may cause this

Hi,

This negative margin is a common trick to handle columns gutters. It is the exact same size as the gutter, so the left-margin of the first columns of each row fits in.

This avoid having to use first class, or :first-child selectors, along with the fact that these would become irrelevant on responsive columns (the first element in a row may change depending on the resolution).

If you have issues interacting with the elements underneath (though this is a really tiny area), edit css/992.css and change the z-index of #menu to 2. The menu will then show over the content.

I left the menu under the content for some edge cases where the content has to display over the menu (sliders tooltips mostly), but if you don’t plan on using them just go ahead

Hope this helps!

Hi,

If I remove the z-index (or disable with a developer tool) then it behaves like I expect it to. Is there an example somewhere in the docs where I can see the behaviour of the sliders/tooltips?

Hi,

There is no page where you can see the sliders tooltips come over the menu, as this is something quite rare: you need to have a slider close to the menu with side tooltips on its knobs, bigger enough to spread over the menu.

As long as you don’t use sliders everywhere, this is rather unlikely to happen – and even so, you can change the tooltips location to prevent this

Hi,

Sure, just trigger the chain of events an user interaction would do on your textarea:

$('#textarea').val('Some long text').trigger('focus').trigger('input').trigger('blur');

This is a bit verbose, so if you call this often, you may add your own custom event in js/developr.auto-resizing.js, just above the last line of the file:

doc.on('jsautoexpand', 'textarea', function()
{
    resizeTextarea.call(this);
});

Then just trigger your custom event:

$('#textarea').val('Some long text').trigger('jsautoexpand');

Hope this helps!

thank you so much you are awesome and so is your template.

Thanks Glad I could help!

Hi!

Sure, take a look at the Add To Home Screen plugin: it is one of the most popular for iOS devices.

If you want Android support too, the only plugin I could find is this one, but it requires jQuery Mobile. There are probably other ones, but I couldn’t find them.

Hope this helps!

Mmh… I tried this (never used these plugins before with the template) and it seems both of them don’t perform well with fluid columns – not to mention responsive columns. As a matter of fact, they are written for fixed-size blocks (as in Instagram).

I made a LOT of tests to try to find how to make them work fine with the template, and the only solution I found was to modify the plugins themselves – which I am not very kind of. And even though, they both failed to correctly refresh the fluid columns when resizing the viewport…

So I guess this is not the right solution. What I would suggest you is to reorganize your columns contents to have blocks of similar height on each row, or even use just 2 big columns and stack the content directly into them. This way, the columns will still be responsive and you won’t need any additional plugin.

Sorry I pointed you in a wrong direction… At first I really thought these would work, but you know how webdesign is made of never ending (bad) surprises

Thank you Looking forward to your further works. I wish to see these extensions with your new themes. Are you working on a new theme?

Not right now, doing some client work, but I plan on making a Wordpress theme soon

Exactly Feel free to ask if you have any other question!

Hi,

The template already includes high resolution icons They are defined in the stylesheet css/2x.css. Also, all font icons are vector, so they are resolution independent and will look crisp whatever the resolution is.

Tell me if you want more detail!

Hi,

Actually mobile and desktop devices should display the same, as this class uses CSS only. This is the first time I hear of such issue, can you tell me which kind of elements you want to apply the class current to?

Yes, it seems that doc was not defined in my page. $(document) works as expected. Thank you !

But one thing bothers me a bit : trying to bind again with $(document).on( ... tr > th’); doesn’t work at all (which I can understand, because function is missing). How can I reverse the off in this case ?

If you plan on toggling events listening on and off many times, I would suggest another solution: in developr.calendar.js, add this declaration above the last line of the file:

$.fn.fluidCalendar.events = true;

Then back to the top of the file, add a switch to the touchend click listener:

doc.on('touchend click', '.calendar > tbody > tr > td, .calendar > tbody > tr > th', function(event)
{
    if (!$.fn.fluidCalendar.events) return;

    ...

Now you can enable/disabled the events just by changing the value of $.fn.fluidCalendar.events to true or false.

Hope this helps!

Straightforward to implement, operational, elegant… Thank you very much !

Hi,

Indeed, it seems it inherits from an old value of background-size defined in colors.css. The shorthand declaration of background should have reset it to the default value (as in every other browser), but it seems it is not the case anymore.

To fix this, just edit colors.css and remove these selector lines (there not required anymore since v1.4):

// Around line 293
.black-inputs .radio > .check-knob,
.black-inputs.radio > .check-knob,

// Around line 397
.radio > .check-knob,

It will work fine in Safari then Thanks for reporting!

Right, the check-knobs are back in Safari !

I always wonder how you can manage all this stuff in such an impressive way…

Actually, I make an intensive use of the browser’s developer tools, the CSS stack has saved me countless times

Hi,

I just made some test, and your code works fine for me actually. Maybe is this just an issue with scripts initialization order. Can you show me the exact markup for the whole page? (Use a service as Pastebin or gist).

Also, do you have errors showing in the browser’s console, either on page load or when you click the button? If so, this may give you a hint about what’s not working

Hi,

Actually, Respond should be loaded by the file setup.js, only when required.

It may not load if you changed the files structure or use folders in you app/website paths: to fix this, edit setup.js and replace this line (around line 123):

respondPath: 'js/libs/',

By either an absolute path:

respondPath: '/myApp/js/libs/',

Or dynamic path detection:

respondPath: $('script').last().attr('src').replace(/[^\/]+$/, '')+'libs/',

About the error you mention, hard to tell what causes it… Does it occur in every version of IE? Do you still have it after using one of the method above?

I made the respond path absolute and removed it from being included in each page which now is being loaded properly by the setup.js file but i still get the stack overflow error. Doing just some basic searching it looks like this could be caused by loading too many stylesheets? I’m not so sure about that though, also I have only tested the page in FF, Chrome and IE 8, I havent tried other versions of IE. The page is for a group of people that only uses IE 8 though and myself in which I use chrome and sometimes FF.

Mmh… I don’t have the same error showing here, so it’s hard to tell what’s happening. Especially with stack errors, basically the browser is telling us something broke, but it doesn’t know where.

Which version of the template do you use? Since v1.4, I upgraded Respond.js to its latest version, if you have an old one this may be the origin of the issue.

Try downloading the latest custom version here, and tell me if this solve your issue.

Hello!

Indeed, the code that is used to prevent links in webapp to open in Safari was messing with the AJAX calls, because of some obscure events order management…

I had a hard time fixing it, but I think I have come to something more robust: please download the latest version of setup.js, and overwrite your existing file, the AJAX content should load now

Note that you may need to remove the webapp from your home screen, clear the browser cache, and then add it again to see the change.

Tell me if this solve your issue, this is be in the next update then!

All working now Thanks You are the best!

Thanks for the feedback Glad I could help!