1843 comments found

Hi displayinline,

Safari doesn’t display the selection lists properly. Try what follows for instance:

<select class="select white-gradient">
<option value="00" selected>00</option>
<option value="15">15</option>
<option value="30">30</option>
<option value="45">45</option>
</select>

In Safari you’ll get an ellipsis in place of 00. But I found the reason, in form.css, about line 773 :

.select-value {
    ...
    border-width: 1px;
    border-style: solid;
/*text-overflow: ellipsis;*/
    position: relative;
    z-index: 99;
    white-space: nowrap;
    overflow: hidden;
}

Just remove, or comment, text-overflow: ellipsis, and voilà !

displayinline

Hi,

The ellipsis shows because the select is a bit to narrow (probably just from one or two pixels). this is intended for selects with longs values, but it seems to trigger to soon here. The new styling plugin uses the native select size to size the styled select, but there are differences in the UI across browsers, which may result in small size variations.

I updated the download link with a new stylesheet which should give better results under Safari, can you give it a try and tell me if it works better? Thanks! ;)

Default-user

No more ellipsis in Safari ! Thank you ! :)

displayinline

Glad I could help ;) And thanks for the feedback!

Hi,

I have a query about the dataTable. Currently it defaults to order by the first column. How can i get it to default by the second column instead?

Many thanks

Default-user

thanks for the reply but where about should i apply this code?

displayinline

Just add this option to the DataTables initialization script you use to setup your table – for instance with the template example code in tables.html:

// Table sort - DataTables
var table = $('#sorting-advanced');
table.dataTable({
    'aoColumnDefs': [
        { 'bSortable': false, 'aTargets': [ 0, 5 ] }
    ],
    'aaSorting': [[1,'asc']],
    'sPaginationType': 'full_numbers',
    'sDom': '<"dataTables_header"lfr>t<"dataTables_footer"ip>',
    'fnInitComplete': function( oSettings )
    {
        // Style length select
        table.closest('.dataTables_wrapper').find('.dataTables_length select').addClass('select blue-gradient glossy').styleSelect();
        tableStyled = true;
    }
});
Default-user

wow, that simple. I love this site. great work guys.

Hi displayinline,

I wonder if there is not an error in developr.accordions.js:

// Equalize height when needed
if (dl.hasClass('.same-height'))
{
    dl.refreshAccordion();
}

does same-height need to be preceded by a dot ? I ask you the question because the script doesn’t behave the same way with and without the dot.

displayinline

Hi,

Indeed, there is a small typo, there should be not dot. Thanks for pointing this! ;)

don4of4 Purchased

While I generally consider myself to be a fairly skilled programmer, I am have enormous difficulty with the wizard and ajax field validation.

Essentially, the validation plugin appears to be invoked by the wizard (again) when the user clicks “Next.” While this is completely unnecessary (because the field is already validated at that point) I cannot seem to get the ajax callback to work.

Ideally the callback would be invoked and the wizard would proceed, but I cannot seem to get the validator to callback.

Could you take a look at my page: http://hub.obsidiancraft.com/register.html

You can enter bogus info for page 1, the field in question is “Username” on Step 2. A valid entry is “Niverive”.

Any assistance would be greatly appreciated.

displayinline

Hi,

There is no problem with your skills, AJAX validation is simply buggy in the validation plugin… It triggers more often than required, and the asynchronous submission does not work as expected. This is a new feature, it looks like it is not ready yet.

I worked on the wizard plugin to support AJAX validation between steps (using the plugin documentation as a reference), but this won’t work until the AJAX validation is fixed (it should return NULL in case of AJAX validation, instead it returns false as if there was an error). You can get the latest version here if you want to test it.

The authors are working actively on the plugin (the Github repo shows a lot of activity), so I guess this should be fixed soon.

In the meantime, you may remove the plugin’s ajax validation class, and listen to the change event on the input to perform an AJAX check – for instance:

$('#login').change(function()
{
    var input = $(this),
        value = $.trim(input.val());

    // Clear previous messages
    input.validationEngine('hide');

    if (value.length)
    {
        $.ajax({
            url: 'validation.php',
            success: function(data)
            {
                if (!data.valid)
                {
                    input.validationEngine('showPrompt', data.error);
                }
            }
        });
    }
});

Hope this helps! ;)

Default-user
don4of4 Purchased

Lifesaver!

I had success with the following code:
$('#login').blur(function()
        {
            var input = $(this),
            value = $.trim(input.val());

            // Clear previous messages
            input.validationEngine('hide');

            if (value.length)
            {
                input.validationEngine('showPrompt', 'Validating... Please wait.', 'load','topRight',true);
                $.ajax({
                    url: 'formapi.php',
                    dataType: 'json',
                    data: {
                        action: 'validateAdminUser',
                        fieldId: 'login',
                        fieldValue: value
                    },
                    success: function(data)
                    {
                        var valid = data[1];
                        var err = data[2];

                        input.validationEngine('showPrompt', err, valid ? 'pass' : 'fail','topRight',true);
                    }
                });
            }
        });

The only issue is that the user can still click the next button and proceed to the next page. What is the most “acceptable” way of blocking the wizard from continuing if the validation fails?

displayinline

Cool!

About your last question, I guess the easiest is to empty the login input if not valid, and leave the required option from the validation plugin. With this, it won’t submit if the login is not valid.

Just note that if the validation process takes too long, it won’t prevent the user from going to the next step.

Here is another solution: I modified the wizard plugin to allow stopping progression on the wizardleave event which is triggered on the current fieldset when the step changes. So now you can do this:

var loginValid = false;

// Your AJAX validation code, with just a new line
$('#login').blur(function()
{
...
    success: function(data)
    {
...
        loginValid = valid;
...
    }
...
});

// Prevent step change if #login is not valid
$('#login').closest('fieldset').on('wizardleave', function(event)
{
    if (!loginValid )
    {
        event.preventDefault();
    }
});

This will also work if the user has not filled the input. You can download the modified plugin here.

Tell me if you have any issue or if you need more details! ;)

I’ve gone through the template pretty thoroughly and can’t seem to find a way to do a certain thing. If you go to http://harvesthq.github.com/chosen/ and take a look under the Multiple Select area, the functionality gives you an autosuggest with each name highlighted, combined with an ‘x’ to remove the selection. Is there a way I can do that with yours? Thanks.

displayinline

Hi,

There is no similar feature in the template, though it could be built using the existing plugins and styles. I would rather advise you to use the plugin Chosen, it is really powerful, flexible and it has an incredibly amount of features.

It should integrate well in the template, and you can even use it along with the template’s inputs plugin if you want. ;)

Tell me if you want more information!

ListingWareBob

I like Chosen, and am also considering TokenInput at http://loopj.com/jquery-tokeninput/ – I’m just not a styling guru and want to make sure things look decent when I’m done! Thanks for your feedback.

pontex Purchased

Hi What is the difference between RTL version and normal version except that the alignment reversed?

displayinline

Hi,

The RTL version is intended for languages written from right to left, such as arabic. There are many optimizations in the CSS and the plugins are customized, because of the reversed layout: alignments, icons, progress bar direction, forms…

If you just want to use the reversed menus, remember you can do this in the standard version simply by adding the class reversed to the body element.

Tell me if you want more details! ;)

pontex
pontex Purchased

OK, thinks about this, how is it for the reduced menu at startup ?

displayinline

Just add the class menu-hidden to the body element, your page will load with the bug menu hidden.

Feel free to ask if you have any other question! :)

biijuu Purchased

Hi,

I’m having trouble with the DataTables. Do you have more examples on tables?

1. I need a button to check/uncheck all checkboxes 2. Sorting 3. Search

Working on large data.

Also, is there a way to search on these comments. That would make it easier to find solutions. Otherwise, I’ve to go through 50 pages to find information.

Thanks, Biju

displayinline

Hi!

You will find a very comprehensive documentation and many examples on the DataTables’ website.

About the check/uncheck all button, you can do something like this if you use the same layout as the example page table.html: add this script at the end of your file:

$('#check-all').click(function(event)
{
    $(this).closest('table').find(':checkbox[name="checked[]"]').prop('checked', this.checked);
});

Now checking/unchecking the checkbox in the table header (with the ID check-all) will affect all checkboxes with the name attribute set to checked[].

All other features are related to the Datatables plugin, you will find many examples on their website.

And about the comments, there is no search feature yet, but it has been requested many times so let’s hope they add it soon! ;)

Do you have any tips that will help me pick pieces from your template and put into a stand-alone page? There are so many includes that I would like to start from scratch so I know EXACTLY what includes I am using. I have an include situation on my primary work website so I am rebuilding it 100% over to make sure everything is clean(design as well as code) and up to modern standards. THANK YOU VERY MUCH – BEST $18 I EVER SPENT!

displayinline

Hi,

Well, all styles require the base stylesheets reset.css, style.css and colors.css. Some of them use another stylesheet: you can find this by looking in the corresponding section of the documentation, all dependencies are listed feature by feature. For some elements, you will also need setup.js and sometimes a plugin (also listed in the documentation).

But including all of these will add a lot of unnecessary styles and JS to your website, you should then take some time to remove all the styles and features you don’t need – the files are well commented, it shouldn’t be too complex.

Feel free to ask if you need more details! :)

Hi displayinline,

I’m sorry for coming every time for a bug report, but look at this screenshot :

http://aedifex.fr/developr_doc/assets/focus_style.png

You can see that the select box didn’t lose the focus style after I selected “autre”, the “Précisez” input field getting the focus when displayed.

The select box’s focus style disappear only when clicking somewhere on the screen.

Default-user

As always, you found a quick and functional solution, thank you ! :)

Just one seconde before you provided this solution, I realized that I had forgotten to add the class confirm to the button in question. So there are two solutions: 1) don’t add the confirm class but add event.preventDefault(). 2) add the confirm class.

I think that 1) is safer than 2).

displayinline

Yep, both solutions are valid. Note that solution 2) also calls event.preventDefault() internally, so both are equivalent. It’s up to you to choose which one to use, depending on if you want to create a custom behavior or use the default one ;)

Default-user

I prefer 1) for a simple reason : everything is in one place ! :)

Hi, I bought this, now I need to make the code but Im so bad at coding , can you recomend me someone that can code for me? thanks!

displayinline

Hi, and thanks for your purchase! :)

I have nobody in particular to recommend to you, but you can post a message on the forum, you will find many available freelancers there ;)

Hi displayinline,

I recently upgraded 1.3 to 1.4. I’ve got this bug, which I am 95% sure started after the upgrade to 1.4, but I’m not sure. It was definitely working for a long time, but seems to have stopped.

The problem is the image does not initially display when the screen is loaded (see screenshot). But if I resize the screen, it instantly appears, and begins to work correctly, resizing itself responsively.

http://tinypic.com/view.php?pic=nwx8b8&s=6
   <span class="stack twisted">
       <img class="scale-with-grid" src="/img.jpg" />
   </span>

Any ideas why this is occurring?

displayinline

Hi!

This is the first time I see something like this… Does it occurs in every browser?

About the class scale-with-grid you added, what is its role and how is it defined? It may be related to issue somehow, did you try to remove it?

If you can give me the code for this class, or a link to an online demo, I will see if I can find what’s causing this issue ;)

Default-user

Thanks displayinline – I just realised the bug is only occurring in Chrome. It works fine in IE and Firefox. Maybe it was always there after all.

The ‘scale-with-grid’ allows for my image to be resized within a div. Basically I need the ‘image’ to be ‘responsive’ to the div it is contained within, even when the div is resized. It works perfect on all browsers, except Chrome apparently…

img.scale-with-grid {
    width: 100%;
    height: auto;
}

Do you perhaps have a better way to handle this?

displayinline

Hi,

Indeed, this looks like a bug in the way Chrome handles fluid images on page load… Hard to tell why it happens. It seems related to the property width: 100% in your class: if you remove it, everything works fine. Chrome seems to be unable to handle fluid elements inside of blocks with display set to inline-block, whereas all other browsers do. And why only on page load? Weird.

I made some tests, and it seems that adding your class afterwards fixes the issue – add this at the bottom of your page:

$('.stack img').addClass('scale-with-grid');

Maybe this is a bug which showed only recently in Chrome, which is why you did not notice it before: if so, they will probably fix it soon ;)

Hope this helps! ;)

posted in wrong forum… :)

Hi displayinline,

There is a big problem with the checkbox class.

Look at this code :

<p class="liste">
    <input type="checkbox" id="chk1"><label for="chk1">Label 1</label><br />
    <input type="checkbox" id="chk2"><label for="chk2">Label 2</label><br />
    <input type="checkbox" id="chk3"><label for="chk3">Label 3</label>
</p>

$("p.liste input[type='checkbox']").change(function()
{
    var temp =    $(this).closest("p.liste").find("input[type='checkbox']:checked").not(this);
    temp.prop("checked",false);
}

What I intend to do is to uncheck every checkbox except the one I clicked on. As it is this code works quite well.

But … if I add the class checkbox to every input of type checkbox, nothing work anymore. I spent several hours on this problem with no success at all. It’s simply impossible to get the job done.

After adding this class you end up with two span tags surrounding the input tag, and that’s why nothing work. I tried temp.closest(“span.checkbox”).removeClass(“checked”);, and that works under certain conditions, but not always.

The solution is to get rid of this class, but the checkboxes are uggly.

So please what can I do ? Thanks in advance !

Default-user

Still more accurate. I added a console.log :

console.log(temp);
console.log($(this).is(":checked"));

--- I click checkbox #1. Console.log :
[]
true    <= #1 is checked when entering the function
--- Then I click checkbox #2. Console.log :
[input#chk1]
true    <= #2 is checked
[input#chk2]
false    <= no, #2 is NOT checked (2nd pass)
[]
false    <= ??????? (3rd pass)
--- But #2 is not checked, so I click it once more. Console.log :
[]
true    <= #2 is now checked
Default-user

Well, I found the solution.

var refreshingCheckboxes = false;

$("p.liste input[type='checkbox']").change(function()
{
    if (!refreshingCheckboxes)
    {
        refreshingCheckboxes= true;
$(this).closest('p.liste').find('input[type="checkbox"]:checked').not(this).prop("checked", false).change();
        refreshingCheckboxes= false;
    }
});

Actually, the declaration of refreshingCheckboxes had to be outside of the function.

Thanks a lot for your help ! :)

Default-user

I just realize that this is what you wrote in your first reply !! I did not notice this fact and declared the global variable as a local one inside the function ! I apologize for this careless error…

RodRod Purchased

Sorry if this has been ask and answered, but i don’t have a full day to read 51 pages of comments and there is no search functionality… come on Envato!

How can you link to a page with tabs and open to a certain tab on load (via a query string)? I could do it with a big if/then or case select in the code behind and make the tab class = “active” but was hoping there is a easier way… Again sorry if this has been ask and answered before.

p.s. great work btw!

RodRod
RodRod Purchased

excellent!!! I did not know how to grab a query string with js.

I’m trying to use the same logic paired with the accordion (for the apps help files)... here is what i got so far, it closes them all just fine but doesn’t open the one passed…
var search = document.location.search,
            tabRegex = new RegExp('t=([^&]+)'),
            tabParam = search ? tabRegex.exec(search) : false;
            accRegex = new RegExp('a=([^&]+)'),
            accParam = search ? accRegex.exec(search) : false;
        if (tabParam){
            $('a[href="#'+tabParam[1]+'"]').parent().addClass('active');
        }
        if (accParam){
            $('dt').addClass('closed').next('dd').stop(true).slideUp();

            $(accParam[1]).removeClass('closed').next('dd').slideDown();
        //    $(accParam[1]).next('dd').stop(true).slideDown();
        }

any thoughts?

RodRod
RodRod Purchased

so i corrected my syntax error and it works great…

$('#'+accParam[1]+'').removeClass('closed').next('dd').stop(true).slideDown();

again really great design and super functionality! cheers

displayinline

Thanks :) Glad i could help!

Hi DisplayInline,

So I’m having an issue, i’m not sure if you can help:) If not, no problem:)

I’m created a mimic “splash” screen that will allow all of my home content to load and then disappears. I’ve placed the following code right below the opening body tag:

this div is an overlay that is removed with Jquery once the index.php page completely loads.

When viewing on mobile, for some reason I am not able to open the #shortcuts menu or the #main-menu….Do you happen to know off the top of you head why this is??? Or perhaps a better way to mimic a splash screen and hide the entire page until everything is loaded?? Any info would be greatly appreciated:)

No problem if not:) Thanks for everything!!!

Nevermind:) I have a conflict with Jquery:) Do You think it would be easier to just create a “splash” like screen with a modal??

displayinline

Glad to hear you found out ;) You solution looks nice, using a modal would be more complex.

Feel free to ask if you have any other question!

Hello, I have bought the template. I have done most of the editing and coding work . But there is still more changes to be done , which needs a professional touch. Can you help me with , redesigning some more pages and how much do you charge.

Regards, Rijz

displayinline

Hello,

Sorry, but I am not available for freelance work. You may post a message on the forum, you will find many talented developers there ;)

Hello,

How can we auto hide administrator side bar on page load with a slide effect.? Is that possible?

Regards Rijz

displayinline

Hello,

Sure: if you want the side menu to be hidden on page load, just add the class menu-hidden to the body element.

And if you want to add a sliding effect, do it with javascript:

$(document).ready(function()
{
    $('document.body').addClass('menu-hidden');
});

hope this helps! :)

Default-user

Thanks for the reply i added the menu-hidden class to the body . and it is working fine how ever i could not generate the sliding effect with the script. Never mind.!!!

koza95 Purchased

Hello
I have few new feature suggestion to You in next update :) - color picker plugin - meta tags for all iOS devices - user profile example page - locking window with modal when user is inactive for some period of time (dont know how to to that :( ) - tooltips working on touch screens

I hope some of them can be added ;)

displayinline

Hello, and thanks for the suggestions! :)

Here’s how you can use some of them already:

- You can use one of these colorpickers, surely one will match your needs

- For the iOS meta-tags, I’ll just point other buyers to the update I gave you earlier

- To lock the window, here is a quick example solution:

var userTimeout,
    startUserTimeout = function()
    {
        // Check any user interaction
        $(document).on('click mousemove touchstart', resetUserTimeout);

        // Start waiting
        resetUserTimeout();
    },
    resetUserTimeout = function()
    {
        // Clear if already set
        if (userTimeout)
        {
            clearTimeout(userTimeout);
        }

        // Start again
        userTimeout = setTimeout(onUserTimeout, 2000);
    },
    onUserTimeout = function()
    {
        // Stop checking user interaction
        $(document).off('click mousemove touchstart', resetUserTimeout);

        // Clear timer
        userTimeout = null;

        // Open modal
        $.modal({
            /*
             * Customize the modal to provide login options to the user
             */
            content: '<p>Session locked. Who are you?</p>',
            actions: {},
            buttons: {
                'It\'s me, I swear!': function(win)
                {
                    win.closeModal();
                }
            },

            /*
             * Once the user is logged, start waiting again
             */
            onClose: startUserTimeout
        });
    };

// Start
startUserTimeout();

Here the timeout is set to a very short time (2000 ms) to demonstrate the effect, set the value to whatever you like

- The default tooltips could work on touchscreens, they are just disabled in the plugin because they break the click logic: when there’s a tooltip (or anything that listen to the touch event) on an element, the first touch only opens the tooltip, and the user has to touch again to trigger the default action of the element. Most of the time, this is annoying. If you want tooltips to show anyway, edit the file js/developr.tooltip.js, and remove this check:

if (!Modernizr || !Modernizr.touch)

Remove the condition and its braces, not the code inside. Note that if you call a tooltip programmatically, it will work on all devices, of course.

Hope this helps! ;)

Default-user
koza95 Purchased

Thanks man You are the best :)

mwsasser Purchased

How close are we to seeing version 1.5? You seem to have amassed a large number of but fixes and new features since 1.4 was released, it’s hard for me to keep track of them all. I cannot imagine what its like for you.

displayinline

Hi!

I am working on it, there are a few things that need to be polished ;) In the meantime, here’s a list of some of the available partial updates:

Hope to release the new version not too long from now! :)

Default-user
mwsasser Purchased

Oh, very nice!

by
by
by
by
by
by