1842 comments found

I’m trying to submit a form from with inside a modal using ajax. How could this be accomplished using your scripts?

displayinline

Hi!

This can be done with some simple jQuery code:

var modal, form;

// Create modal
modal = $.modal({
    content : '<form>...</form>',
    buttons: {
        'Send': function(modal)
        {
            form.submit()
        }
    }
});

// Catch form submit event and send using AJAX
form = modal.getModalContentBlock().find('form');
form.submit(function(event)
{
    // Stop default action
    event.preventDefault();

    // Send via AJAX
    $.ajax({
        url: form[0].action,
        type: form[0].method,
        data: form.serialize(),
        success: function(data)
        {
            // Process returned data

            // Close modal
            modal.closeModal();
        },
        error: function()
        {
            $.modal.alert('Whoops, something went wrong...');
        }
    });

    // Display loading message
    modal.setModalContent('<div style="height: 200px; line-height: 200px; text-align: center;"><span class="loader big" /></div>');
});

Hope this helps! ;)

Display,

I have a list of items I added buttons to the right of… basically a list that I can then edit, delete, etc each item. When the screen is small, like on my iPhone 5 the buttons on the right completely cover the “Name” of the list item.

Is there a way to adjust the style so that the buttons on the right end up underneath the name of the list item when the screen is smaller than a phone in landscape?

displayinline

Hi!

If you use a button group with the class absolute-right, you may try a slightly different markup using the class float-right instead:

 li
    <div class="button-group float-right compact show-on-parent-hover">...</div>
    Text
 /li

With this setup, the menu will force the text to wrap. Note that the buttons should be inserted before the text/anchor.

Hope this helps! ;)

Hi displayinline,

I really like the Media file explorer template, http://www.display-inline.fr/demo/developr/template/explorer.html . Does it support pressing the browser back button and the previous ajax content reloads? For example, if I click ‘Albums Gallery’ and then click an album to view pics in the album. Can I press the browser back button and the template reload the ajax content for the ‘Albums Gallery’? It would be great if it can.

Thanks

displayinline

Hi,

It is not possible by default, but it can be added in just a few lines. Tell me if you start using the template and need directions, I’ll give you a complete working example code ;)

Default-user
tbrazeal Purchased

Thanks for the quick response! I just purchased it under this account. Hopefully this reply will reflect that. If not, I’ll repost. Can you give me that working example code now?

Thanks

displayinline

Thanks for your purchase! :)

Here is the code to add at the bottom of the page explorer.html, above the line $.template.init();:

// Enable browser history
var panel = $('.content-panel'),
    internalHashchange = false;
panel.data('panel-options', {
    onStartLoad: function(settings, ajaxOptions)
    {
        var target = $(this).closest('.panel-navigation').length ? 'nav' : 'content';

        // Push to history
        internalHashchange = true;
        document.location.hash = '#'+target+':'+escape(ajaxOptions.url);
    }
});

// Listen for changes
$(window).on('hashchange', function()
{
    // Do not process if internal event
    if (internalHashchange)
    {
        internalHashchange = false;
        return;
    }

    // Get hash parts
    var parts = document.location.hash.substring(1).split(':');
    panel[(parts[0] === 'nav') ? 'loadPanelNavigation' : 'loadPanelContent'](parts[1]);
});

Note that IE7 has no support for the hashchange event, so if you may want to add this polyfill if you want full support. Note that if you don’t include the polyfill, nothing will break, IE7 users just won’t be able to use the back button, that’s all ;)

Tell me if you need more details!

UITS Purchased

I have body class=”clearfix fixed-title-bar with-menu” I have ul class=”big-menu”

I have 15 items in the big menu. When I scroll on a normal page, title bar remains fixed as expected. When I click on the menu button (open-menu) and scroll through the menu options, the title bar scrolls off the page. Is this by design? I assumed the title bar would remain fixed to the top of the screen no matter what context or situation.

Also, how can I change the menu button to be just an icon? My draft right now is <a href="#" id="open-menu"><span class="icon-list" style="background:rgba(255, 255, 255, 0.3); padding:0 12px;" /></a> but it un-centers the title bar text
displayinline

Hi,

There were several bugs in iOS related to orientation change, I though they had all been fixed by now… Surprising this one is still here.

So thanks for sharing the tip, and let’s hope they’ll fix this soon! ;)

UITS
UITS Purchased

False alarm. Upgrading from iOS 5.1.1 to 6.1.3 fixed the problem.

displayinline

Oh, that’s why I wasn’t able to replicate the bug. Thanks for the feedback!

UITS Purchased
Update for the second issue to center the title bar text: #open-menu > span[class*='icon-'] { background:rgba(255, 255, 255, 0.3); padding:0 12px; } .with-menu #title-bar { padding-right: 0; } .with-menu #title-bar > h2 { width: 85%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

Thoughts?

neilfl123 Purchased

Hello, I’m using this theme for an ASP.NET application that I’m writing. I have an issue with the login page. I would like to use the full login with the password recovery but you’re using two form tags for the jquery switch animation. ASP.NET will only allow one from tag per page request. Do you know of an easy workaround for this?

Thanks in advance.

displayinline

Hello!

You may try this solution I gave a while back, it should help ;)

Tell me if you need more details!

Default-user
neilfl123 Purchased

Many thanks, got it working just fine. You guys are rock starts on the support. You need to be charging more this this product. I would have paid 5x that price! Keep up the good work.

displayinline

Thanks! :) Glad I could help!

Hi Display:inline. I know i ask a ton of questions, but I am totally stumped on this one.

The ajax form I asked about yesterday worked! Thanks! Where it closes the modal, I’ve added it to open a simple modal saying “Event Added!”. My question is, how do i get that modal to close after say about 2 seconds. I’ve tried all variations of setTimeout I can think of and placed it pretty much everywhere within that modals function. Hmm. Any ideas?

Thanks again!

displayinline

Hi!

Sure, the key is to use the correct scope:

success: function(data)
{
    // Open confirmation
    var confirm = $.modal('Event added!');
    setTimeout(function() {
         confirm.closeModal();
    }, 2000);

    // Close modal
    modal.closeModal();
},

Here setTimeout uses a function declared in the same scope as the var confirm, thus this function will be able to access the var when it gets called.

Hope this helps! ;)

mestmobil Purchased

How do we catch the value of inputs and selects with an “onchange” function on the input or select?

A select dropdown: <select name=”landingpage” class=”withClearFunctions” onchange=”javascript:showpreview()” style=”max-width: 200px; display: none;” tabindex=”-1”> <option value=”1”></option>

<option value="2">Option</option>
    <option value="3">Option</option>
    <option value="4">Option</option>
    <option value="5">Option</option>
    <option value="6">Option</option>
</select>
mestmobil Purchased

Sorry my mistake. Didn’t format the HTML properly. SOLVED!!

displayinline

No problem! ;) Feel free to ask if you have any other question!

iapptec Purchased

having some highlighting problems on login window , with chrome and its auto complete function , do i need a newer CSS ? do you know about it ?

regards

Matt

displayinline

Hi!

Actually, there is currently no way to fix this… I’ve been struggling with it from the start. The yellow background when the input is automatically filled comes from from the user-agent stylesheet and can not be overridden. Even using autocomplete="off" has no effect (while it worked before), because the password manager ignores it.

I found several hack for this using jQuery, but none of them seem to have any effect anymore…

If I ever find a solution I’ll let you know ;)

Default-user
iapptec Purchased

ok , i see allot of people complaining on google about it .. hope they change it soon ..

Hi, Issue 1 : I applied Datatable script to Grid view. It works fine when it loads. I am getting error messages when I choose page [Web page reloads when I choose page link ] in gridview. If it succeed then search box disappear. :( Issue 2 In FF and IE icon changes, like Calendar icon to P, User to +, Password icon to U and so on. https://www.dropbox.com/sh/nh7tzbiuxl2cs77/QalvoutdOQ

Many Thanks

displayinline

Hi,

About the first issue, hard to tell what’s wrong without seeing the actual code. Do you have the error in all browsers? Also, do you use the DataTable init code from the example page tables.html? You should at least use the option sDom. Did you check the plugin’s forum? You may find some help there. Tell me if you still can’t have it to work!

About the second issue, this probably happens because your server doesn’t send the correct mime-type when serving the icon webfont. To fix it, simply add the corresponding directives in your server configuration.

Tell me if you have any other question! :)

promosync Purchased

I am having an issue with alignment of a group of buttons when viewed on a smaller screen. I would like the buttons to left align. Any help would be appreciated!

https://dl.dropboxusercontent.com/u/14985576/Unknown-1.png
 <div class="columns">

    <div class="one-column two-columns-tablet four-columns-mobile-landscape four-columns-mobile-portrait">
        <a href="javascript:void(0)" class="button">
            <span class="button-icon blue-gradient glossy"><span class="icon-plus" /></span>New Prescription
        </a>    
    </div>
    <div class="one-column two-columns-tablet four-columns-mobile-landscape four-columns-mobile-portrait">
        <a href="javascript:void(0)" class="button">
            <span class="button-icon blue-gradient glossy"><span class="icon-plus" /></span>New Refill
        </a>    
    </div>
    <div class="one-column two-columns-tablet four-columns-mobile-landscape four-columns-mobile-portrait">
        <a href="javascript:void(0)" class="button">
            <span class="button-icon blue-gradient glossy"><span class="icon-plus" /></span>New Pharmacy
        </a>    
    </div>
    <div class="one-column two-columns-tablet four-columns-mobile-landscape four-columns-mobile-portrait">
        <a href="javascript:void(0)" class="button">
            <span class="button-icon blue-gradient glossy"><span class="icon-plus" /></span>New Doctor
        </a>    
    </div>  

</div>  
Default-user
promosync Purchased

I am sorry. I posted the wrong image. :(

https://dl.dropboxusercontent.com/u/14985576/Unknown%20copy.png

I want to make it so the buttons that are in the red outline (red box just to point out the area) stack up on top each other as screen gets smaller. So it’s clean and organized.

displayinline

Ok, now I understand ;)

Here’s how you may do this:

<div class="columns">

    <div class="three-columns six-columns-mobile-landscape twelve-columns-mobile-portrait">
        <a href="javascript:void(0)" class="button full-width">
            <span class="button-icon blue-gradient glossy"><span class="icon-plus" /></span>New Prescription
        </a>
    </div>
    <div class="three-columns six-columns-mobile-landscape twelve-columns-mobile-portrait">
        <a href="javascript:void(0)" class="button full-width">
            <span class="button-icon blue-gradient glossy"><span class="icon-plus" /></span>New Refill
        </a>
    </div>
    <div class="three-columns six-columns-mobile-landscape twelve-columns-mobile-portrait">
        <a href="javascript:void(0)" class="button full-width">
            <span class="button-icon blue-gradient glossy"><span class="icon-plus" /></span>New Pharmacy
        </a>
    </div>
    <div class="three-columns six-columns-mobile-landscape twelve-columns-mobile-portrait">
        <a href="javascript:void(0)" class="button full-width">
            <span class="button-icon blue-gradient glossy"><span class="icon-plus" /></span>New Doctor
        </a>
    </div>

</div>

Just make sure you have the latest version of style.css, or if you have modified it already, simply add this style:

.button.full-width > .button-icon {
    float: left;
}

Hope this helps!

Default-user
promosync Purchased

Thank you! This is perfect!

ivanoj Purchased

hello: how do I start with all accordion entries closed?

displayinline

Hello,

This is not possible by default, but you may change this by replacing these lines from the file js/developr.accordion.js:

// Active section
active = dts.filter('.open');
if (active.length === 0)
{
    active = dts.not('.closed').first();
}
if (active.length === 0)
{
    active = dts.first();
}

// Tag and show/hide
active.removeClass('closed').next('dd').show();
active.siblings('dt').addClass('closed').next('dd').hide();

With these:

// Active section
active = dts.filter('.open');
if (active.length)
{
    // Tag and show/hide
    active.removeClass('closed').next('dd').show();
    active.siblings('dt').addClass('closed').next('dd').hide();
}
else
{
    dts.addClass('closed').next('dd').hide()
}

Tell me if you need more details! :)

Default-user
ivanoj Purchased

thanks for your quick reply!.. it works…

mwsasser Purchased

Whats the best way to force the high-res left icons to be used instead of the standard ones?

displayinline

Hi,

You just need to extract the corresponding styles from 2x.css (under Hi-res backgrounds) and paste them into style.css, and your app will always use the high-res icons.

Note that this will break compatibility with older icons with no background-size support (such as IE7-9): the icons will appear twice as big as they should.

Tell me if you need more details!

Default-user
mwsasser Purchased

Well bummer, that won’t work.

displayinline

Mmh… On a normal screen (non-retina), you won’t see any difference with the standard icons. How exactly do you test if the high resolution icons are used?

HI,

I have Purchased this template, it’s simply subperb….. :)

And i have a doubt that is , I need to clear the file upload control using javascript, How can i do it..?

Thanks

zybosoft

I have tested the above code but it is not affecting… after the above code is triggered, then physically the value is cleared, but we can see the item is there…. plz check the screenshot…

https://www.dropbox.com/s/q325wcmuq7bl0vw/notworking.jpg I have used this code
alert("ABC");

$('#image_file').val('').change();

alert("GHI");
In the above code when i executed the “ABC” alert will be appeared. but “GHI” alert is not appeared..

So i think something went wrong happend..?? Am i right…

Please help me to solve this issue…

Thanks in Advance.

displayinline

My bad, I did not test under IE, and as always, it does not work as all other browsers do… Here’s what you can do:

var input = $('#image_file');
input.applyClear(true);
input.replaceWith(input.val('').clone(true));

Somewhat ugly, but it seems to work ;)

zybosoft

Ho Thanks for your reply…. now its working… :)

jessekras Purchased

Hi Display:inline I have table that I am displaying using data tables plugin. The data is generated using a simple php while loop. I would like each row to have an additional drop row -> class=”row-drop”... When the table is first displayed the drop row should not be visible & then if the user clicks the edit/show button, the row should slide/appear with the information relevant to that row… and then if the user hits save or hide the row(a button within the drop-row, it would disappear again. I’m not really sure of where to start for this… Any help would be appreciated!

Also, a second question – it would be if I could refresh the contents of the table every minute or so… Any ideas there would also be helpful..

Thanks so much in advance.

displayinline

Hi,

Here a quick draft to show/hide the special rows, to add at the end of your file:

var table = $('#table');
table.find('tr.row-drop').hide();
table.on('click', 'tr', function()
{
    var row = $(this),
        altRow = row.next('.row-drop');
    if (row.hasClass('row-drop') || !altRow.length)
    {
        return;
    }
    altRow.slideToggle();
});

But I am not sure how DataTable will handle this because it performs multiple operations on the table DOM. You make refer to the plugin’s forum, you’ll probably find helpful information there ;)

ivanoj Purchased

hello, I’m having problems in a form with two selects… it seems like both selects have focus… if using the keyboard to scroll up or down the choices… but selects move down/up their choices…

the problem can be replicated in the reference itself for the template under the Option Classes heading where you have the blue and red selects: /reference/form-selects.html

displayinline

Hi,

This is a know issue with some versions of the select styling plugin, which occurs in some specific cases. You may try to update to the latest version, it should fix it ;)

Tell me if you still have the issue!

I tried the solution you provided in the post http://themeforest.net/item/developr-fully-responsive-admin-skin/discussion/2085628?page=59, but that dint help me much. I have sent you the details of the portal, where you can check yourself the problem in phone. When i use “hide-on-mobile” on a column only the heading of that column is hidden, rest data coming from server side is getting displayed in rows in that column.But i want that entire column to be hidden that how its should actually work.

Now, it looks like the column with out the heading, with rest of the rows present. I hope you got what the problem is.

Regards Rijz.

Default-user

Can please tell brefiley where to call .responsiveTable();

I tried putting it in

$(document).ready(function () {

            var table = $('#sorting-advanced'),
             oTable = $('#sorting-advanced').dataTable({
......
......
$('#sorting-advanced').responsiveTable();

And it still the same as it shows in the previous post 2nd image.

:(

displayinline

Hi,

You need to call this method once the data has been inserted. For instance, if you use DataTables server side processing, add this callback to the options:

var table = $('#table');
table.dataTable({
    /*
     * Your options here
     */
    "fnDrawCallback": function(oSettings)
    {
        table.responsiveTable();
    }
});

Hope this helps!

Default-user

That worked fine thanks. :)

UITS Purchased

Hi display:inline,

There are a lot of really good questions and answers in this comment area but it’s hard to search/filter as well as track updates/enhancements. Any plans to move to a ticketing system or bug tracking service?

Keep up the great work! Looking forward to 1.5!

UITS
UITS Purchased

Your first link says ‘Page not found’. I’ll check out the Chrome plugin. Also, we’ve had good luck with http://ideascale.com/ They have a free option they don’t advertise with 1 admin per account which would be perfect for you. ...just a thought

UITS
UITS Purchased

I think the plugin overview is http://themeforest.net/forums/thread/introducing-dashboard-plus/71870?page=1 and the actual script is https://userscripts.org/scripts/show/141953 but Chrome won’t let me install it due to security measures. Either way, I’ve created the custom search engine (per your link’s instructions) so hopefully that will work.

displayinline

Thanks for the tip about Ideascale! I’ll give it a try as soon as I can. About the support forum link, the comment system messed with my link… Here it is: http://support.display-inline.fr/

UITS Purchased

I noticed the menu list doesn’t scroll on the Android tablet landscape (Nexus 7) so we can only fit 7 or 8 menu items and then it cuts off: https://www.box.com/s/61n6gjkor0rxz4oos0ak

It has a similar overflow issue and no-scroll capability on the iPad: https://www.box.com/s/v314lr770ob69w7lan8y

displayinline

Hi,

Well, everything works fine here on my tablet. Do you have the same issue with the online demo?

If not, this probably means the custom scroll plugin is missing or that a JS error prevents it from working. Did you check if there is any error?

Tell me if this is not the issue, I’ll look for another solution! :)

UITS
UITS Purchased

As usual, it was my dumb mistake for not including the scroll.js plugin. That immediately fixed the Android behavior but for the iPad I had to uninstall and then re-install the app for it to work right. Thanks again for your patience with my novice mistakes.

displayinline

No problem! Making mistakes is the best way to learn, feel free to ask ;)

by
by
by
by
by
by