1772 comments found

  • Bought between 10 and 49 items
  • Has been a member for 5-6 years

I sorted out the above issues…

But ran into another..

I’m using a checkable button as in the example form.html file. When the page loads for the first time I build the markup from an ajax call, I can capture the change event when clicking the checkable button but if I load different content using ajax and build markup for the page a second time, the change event no longer triggers when clicking the button..

I tried the usual .change(), .trigger(‘silent-change’) but no go..

displayinline

Hi!

Glad to hear you already found the solutions ;)

About your last issue, does the checkable button changes state when clicked? If so, the issue is probably not related to the template’s plugin, because it uses the change event internally to trigger UI updates – therefore the change event is correctly triggered. Did you run some tests to make sure the correct element is targeted after the second ajax call?

If the button does not change when clicked, then there may be an error somewhere preventing it from working as expected. Do you see any error in the browser’s console?

Also, if you have an online test page I could check, I will see if I can find what’s not working ;)

Default-user

I sorted out a solution.. I had named them all the same ID thinking I’d get what was click thru “this”.. then set $(”#chk-box”).on(‘change’, function…

But instead used $(’:checkbox’).on(‘change’, function… which worked.

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

Hi,

I have a question regarding the navigable menus. I should be able to let a menu item (on any level inside the tree) appear or be selected from javascript. The reason for this is that the menu is build up dynamically and based on the url the user enters the application, the correct menu item should be shown and be activated. I already set the ‘current’ class on the item so that is working, but I cannot get it to appear when the menu item is on a different level.

displayinline

Hi!

You just need to add the class navigable-current on the active link:

<a href="#" class="current navigable-current">Current element</a>

Tell me if you need more details! :)

Default-user

Hi, I already tried that, but it doesn’t do anything. I set both classes in code on the ‘a’ link but nothing happens, he doesn’t show the level with the current link. Is there any way I can force a refresh of the display state of some kind?

displayinline

Ok, if you are selecting the item dynamically, here’s how you can force the menu to show this item:

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

Hope this helps! ;)

Default-user

No that won’t work, because then it will cause a click event and this will trigger the link again. I need a way to show the ‘page’ inside the menu structure of the link activated.

displayinline

Actually, this won’t trigger a click on the current link, but on it’s closest parent’s name – thus causing it to open and reveal the link. In fact, it is the exact code used by the navigable plugin to open on the element with the class navigable-current.

Did you try it already? Tell me if you have any issue with it or if you need additional details! ;)

Default-user

Hi, I had to change the code a bit and I executed the link in the a tag instead of the span of the parent. It is working now, many thanks for the solution.

displayinline

Glad I could help! :)

  • Bought between 50 and 99 items
  • Has been a member for 4-5 years

Rounding of the slider label value is not perfect. My slider starts at 0.300000001 instead of 0.3… How to send a screen shot?

displayinline

Hi,

This is a known issue with javascript and float values. I implemented a workaround for this in the latest version (1.5), updating should fix the issue ;)

Tell me if you need more details or if you still have the issue after updating.

Default-user

Ok, sounds great. Another thing is this: when rounding to 1 decimal, then the value ‘one’ should be displayed as ‘1.0’. That looks better, and also prevents the label from changing width when using larger numbers, e.g. 97.5.

And what about honouring the user’s locale to display ‘1,3’ instead of ‘1.3’ for those that use a decimal comma (like me)?

displayinline

You are right, these would be great features to have :) So I added them just now, you can download the latest version of the slider plugin here.

You have three new options:

  • decimalPoint: Character used for decimal point
  • thousandsSep: Character used for thousands separator
  • zerofill: Fill decimal part with zeros to match desired precision

I made several tests and it seems to work fine, but tell me if you notice any issue ;)

  • Bought between 50 and 99 items
  • Has been a member for 4-5 years

The onchange property gives me the rounded value of my slider. How can I retrieve the non-rounded value?

I need the non-rounded value to change the radius of a circle on a map. Now, with the rounded value, the circle does not grow or shrink smoothly. It would be great to be able to make a difference between those two values, maybe by parsing an object to the function instead of 1 value?

displayinline

Hi,

This is not possible by default, but easy to do: change these 2 lines in developr.progress-slider.js:

  • Line 1465:
    settings.onChange.call(target[0], { value: value, finalValue: finalValue });
    
  • Line 1516:
    settings.onChange.call(target[0], { value: value, finalValue: finalValue });
    

Now the onChange callback receive an object with 2 keys:

  • value: the internal value, not rounded
  • finalValue: the public value, rounded

Hope this helps! ;)

  • Bought between 1 and 9 items
  • Has been a member for 5-6 years
  • Turkey
feith Purchased

Hi,

Thank you for the amazing template. We are having a problem with the date picker. When the page resized or a div is hid, datepicker’s position screws up. It appears on top of the page, on top of the input field etc.. We tried to fix it but it wont work properly. on initial page load, it works but if page resized etc.. it doesnt.

Please kindly let me know what could be done.

Thanks

displayinline

Hi!

Can you tell me which version of the template you use? Since version 1.5 the template includes the new version of the glDatePicker, which has been completely rewritten. If you use a lower version, upgrading will probably help.

If you already use version 1.5, can you give me more details? If you have an online test page, I’ll see if I can find what’s broken.

Quick tip: you can simulate a resize event on the document to force the datepicker to refresh its position:

$(document).resize();

Tell me if you still can’t find a solution! ;)

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

hi displayline.

I’m referring to previous issues on the icons that appear multiple times on buttons in IE7. I have included the new modernizr and update that line in setup.js to if ($.template.ie7) but I still get this issue in IE7 however this is only an issue when I have multiple tabs on the page. On pages with no tabs the button icons are correct, but as soon as I have tabs on the page then the icons multiply, in some case there are 5 icons in a row on the button.

I know you’ve mentioned this an issue, I just wondered of you might have narrowed down the problem.

Regards

displayinline

Hi,

This probably happens because the automatic template setup is run several times on the same content – which shouldn’t happen. Maybe is there a particular case the template doesn’t handle as expected… Do you call the template setup manually, using applySetup()?

Anyway, here’s a simple fix for this: edit setup.js, and replace the lines 1717 to 1721 (position may be different in older versions of the template) by these:

this.findIn(self, children, '[class^="icon-"],[class*=" icon-"]').not('.old-icon').each(function(i)
{
    // Icon class
    var name = /icon-([^ ]+)/.exec(this.className)[1],
        element = $(this).addClass('old-icon');

This will add a marker class to prevent multiple icons.

Let me know if you still have any issue with this! ;)

  • Has been a member for 1-2 years

Hi,

I have a group of check-boxes for example: HTML Code
<label for="first_name" class="label"><b>Level</b></label>
<input type="checkbox" name="notifications[]"  value="C-level" class="level"> <label for="notifications_mention">C-level</label><br />
<input type="checkbox" name="notifications[]"  value="VP-level" class="level"> <label for="notifications_message">VP-level</label><br />
<input type="checkbox" name="notifications[]" value="Director" class="level"> <label for="notifications_reply">Director</label><br />
<input type="checkbox" name="notifications[]"  value="Manager" class="level"> <label for="notifications_reviewed"> Manager</label><br />
 <input type="checkbox" id="selectall"/>Check/Uncheck All <br />

jquery

<script type="text/javascript">
         $(function(){

// add multiple select / deselect level
$("#selectall").click(function () {
$('.level').attr('checked', this.checked);
});

// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".level").click(function(){

if($(".level").length == $(".level:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}

});

So here am not able to use the Class=”checkbox” to give the style, as i have to keep the class “level”. When using class=”level checkbox” it is not working as desired.

Please let me know how to fix it.

displayinline

Hi,

Everytime you change the state of a styled element (checkbox, switch, select…), you need to trigger a change event to tell the styling plugin to update the UI:

$('.level').attr('checked', this.checked).change();

Note that since v1.5, you can use the custom event silent-change instead of change if you already use the later:

$('.level').attr('checked', this.checked).trigger('silent-change');

Hope this helps!

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

Here’s an in-depth issue I’ve just discovered: I’m trying to use a responsive table along with a feature of DataTables that allows for scrolling of the data within the table instead of using pagination.

Apparently, DataTables makes the scrolling results possible by actually creating a second table with just the THEAD elements at the top, then displays the actual table below with scrolling enabled when you use the sScrollY attribute when setting up the DataTable. Follow me so far?

The problem comes when you try to allow for sorting of the columns, it shows the column headers styled with your package’s styling, but then right below (in the second table), shows an un-styled second header row.

When you look at it in Firebug, it has an attribute of ‘height: 0px;’ that was assigned by the scrolling process, but it seems that the arrows that show for column sorting are forcing it to have a height.

The other problem is that it can’t seem to deal with responsive table capability of hiding certain columns based on classes like ‘hide-on-tablet’.

I’m still investigating, but was wondering if you might have any clues? Thanks.

displayinline

Hi!

About the duplicated headers issue, someone pointed it some time ago, and the solution is simple: add this in the stylesheet js/libs/DataTables/jquery.dataTables.css:

.dataTables_scrollBody .sorting:before {
    display: none;
}

If you use the stylesheet jquery.dataTables-simple.css instead, add these styles in it:

.dataTables_scrollBody .sorting_asc:before,
.dataTables_scrollBody .sorting_desc:before {
    display: none;
}

Now these headers should not be visible.

About the issue with responsive columns hiding, this is probably because DataTables use many inline styles when formatting the table, and some of them override the responsive classes. Usually setting "bAutoWidth": false helps, but this may not work in this case…

Let me know if you have any other issue! ;)

ListingWareBob

I ended up going a much different route: I used the JQueryUI option in DataTables, which let me solve a couple of things, including the duplicating headers.

The responsive column hiding was much more unusual. As I said, I am using the Scroller option for DataTables also, so it’s actually creating a table with only the THEAD element at the top, then rendering the actual TBODY below to scroll.

Line 60 of your developr.table.js has a test for cells.length === 0, so that top table fails and doesn’t insert the ‘responsive-table-on’ class. I took away the cells.length test and left the others and it seems to be working now.

So to recap, I have Scroller + JQueryUI + Responsive Tables working with one small modification! I wonder if you actually need the cells.length test in your JS file?

Thanks!

displayinline

Great to hear that :) About the cells.length check, it is optional (only used to prevent processing an empty table), you can safely remove it.

Thanks for your feedback!

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

Hey displayinline,

I loved your template and am looking to buy it. The only issue that is holding me back is the loading time of the template.

Most of my users will access the template from their mobile, without wi-fi nor 4G internet. They will probably use it via 3G.

What do you say about that? How long does it take to load the first page from a mobile in 3G mode? Do you think it will be in an acceptable speed? Also, is it possible to remove all the unnecessary css/scripts that are not being used for that specific page or does your template does that already automatically?

Tks and I appreciate your honest answer here. Gustavo

displayinline

Hey! Thanks for your interest in my work :)

The template is modular: each main feature is provided in a separate script, and if relevant, a separate stylesheet. Thus you can only load the required assets, depending on what you use.

On a minimum page, the template loads:

  • 3 scripts, which can be concatenated and gzipped to one file of 55ko
  • 8 stylesheets, which can be concatened and gzipped to one file of 40ko
  • 4 images, for approximately 80ko
  • One icons webfont of 42ko

So, with page markup included, the whole template can be under 230ko when correctly optimized, which give a first load time of 4-8 seconds depending on the quality of the 3G network. You can even go smaller if you remove the shortcuts icons or drop the responsive stylesheets for larger devices.

Of course, the more features you use, the heavier it gets, but as the template is modular you can use an AMD loader such as RequireJS to defer dependencies loading and improve load time.

Let me know if you want more details or if you have any other question! :)

Default-user

Tks for your reply. I will give it a try. It seems that you were very concerned about that when creating and maintaining the template. I will come back here eventually for more questions. Tks for your support now and in the future :)

Default-user

Hey, I am testing the template with minify (as suggested in your docs) and apparently it does not work with ?v=1 in the file names.

You use a lot of these, example: <link rel=”stylesheet” href=”css/reset.css?v=1”> <link rel=”stylesheet” href=”css/style.css?v=1”> <link rel=”stylesheet” href=”css/colors.css?v=1”>

If I use minify without ?v=1 will it work properly? If so, why do you use this ?v=1?

tks Gustavo

displayinline

hi,

The v=1 param is only usefull for avoiding cache issues (change the number each time you edit the files), so you can safely drop it. Besides, minification libs often send the correct headers to limit these cache issues.

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

Default-user

Tks! After using minify the final page had only 150kb, pretty good! By the way it was not working properly until I tool print.css out of the minified files. For some reason, when you minify it, it bugs and the page does not render correctly. I believe it is because it has an @ inside it. Any thoughts here? Tks again

displayinline

Mmh… That’s possible. You can safely remove this style, it is not mandatory for good print results. ;)

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

the popup does not work, when I use this library jquery.tmpl.js

displayinline

Hi,

Can you give me more details on this? How are the popup and the plugin supposed to work together?

Also, do you have errors showing in the browser’s console? If you have an online test page I can check, I will try to find what’s not working here ;)

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

Are you going to create help page something like your constellation?

displayinline

Hi,

Sorry but I am not sure to understand what you are talking about, can you give me more details? Thanks! :)

Default-user

“Help + Accordion “

displayinline

Actually, you can already build something similar using the template’s accordion and the various layout and typographic styles. Did you try that? Let me know if you need advice on how to build it ;)

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

Luvin the new 1.5 :-) Though I did update jquery to 1.10 cause of the JSON parsing issues with 1.9. Having a tiny (but also hilarious) issue now though with confirmations. They have gone all “cirque du soleil” on me and love to fly from the source clicked element to top:0 as soon as they open. Probably something to do with the button being inside a “fixed” container?? although I notice that the “title” attributes in the sidebar are doing the same thing? Any ideas? Prevent propogation etc? Code is currently .. <a href="javascript:deleteBlock();" id="delblock" class="button red-gradient confirm">Delete this block</a>Also – as soon as you scroll the page in any way they jump to where they should be (if that helps).

displayinline

Hi!

Someone also reported this to me a few days ago, but I couldn’t find why this happened. Since you mentioned you upgraded to jQuery 1.10, I made some tests, and it turns out this version breaks relative animations because of an internal bug.

This will be fixed in jQuery 1.10.1, which should be available soon ;)

Default-user

Thanks for the – as always – speedy reply. Very professional service :-)

displayinline

Glad I could help! :)

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

Hi display:inline,

I’m having an issue with the “Check list” select dropdown form element. It isn’t functioning properly on my simulator, iOS, or Android devices. The full bug report and steps to reproduce can be found here: https://bitbucket.org/uitsweb/mazer/issue/8/select-check-list-doesnt-work-in-simulator

Thanks for any help or insight!

displayinline

Hi,

I downloaded your app and made some tests on several devices, but couldn’t replicate the issue – the drop-down works just fine… I tested on Chrome desktop, iPad and Samsung Galaxy S3, everything worked as expected.

Do you only have the issue in the simulator? Also make sure to clear the cache from the browsers, sometimes an old script is stuck and breaks everything.

Tell me if you still have this issue! :)

UITS
UITS Purchased

Hmm.. The screenshot provided in the bug report is from my physical iPhone device. I’ll try clearing cache and re-installing the app to see if it helps.

UITS
UITS Purchased

Note: make sure you touch the dropdown text (to the left of the dropdown arrows) or the dropdown arrows a second time. Just touching the dropdown and selecting an option in the list doesn’t trigger the bug—it’s only when you touch the dropdown to show the list and then touch the topmost dropdown text (or dropdown arrows) again that the bug is triggered.

UITS
UITS Purchased

Another potential lead: when the clone appears in the top-left, the span is duplicated right above the </body> tag (see https://www.box.com/s/n6vx3cyn391nvl1uqcmz ) I’ll keep digging to see if this is a result of the Cordova UIWebView, my custom code, etc.

UITS
UITS Purchased

I noticed in the simulator scenario, it’s not adding the “select-cloned” class when I click on the dropdown

UITS
UITS Purchased

I’m pretty sure the Chromium bug link above is not the issue. I can replicate my issue in the Icenium Graphite simulator so I’ll just keep hacking away at the problem tomorrow.

UITS
UITS Purchased

Actually, that Chromium bug may indeed be the culprit. I put a breakpoint on line 2786 of developr.input.js (onBlur function) and verified it is being called twice every time I click once on the dropdown. When I click on the dropdown, the list appears while paused at the breakpoint but when I resume script execution the onBlur function is called a second time and the list is hidden after resuming the second breakpoint pause.

Update: I set the same breakpoint on the same code in my Chrome browser and it only fired onBlur once. So, it appears the simulator and my Nexus 7 is running an older version of the WebKit browser for its browser engine. I’ll see if I can code a workaround tomorrow.

UITS
UITS Purchased

Interesting. I verified touchend AND click events are both firing on the simulator and Android device. When I replaced your “touchend click” listeners with just “touchend” the simulator starting working and the Android device no longer closes the list automatically. I still get the positioning bug when clicking the dropdown arrows a second time (while list is open) so I’ll keep researching the code…

UITS
UITS Purchased

Yay, I finally solved it!

In developr.input.js change line 901 to:

if (select.hasClass('select-clone'))

(notice the word change from “cloned” to “clone”)

and change lines 1325-1332 to:

if (onHover && !$.template.touchOs)
{
    clone.on('mouseleave', onBlur);
}
else if ($.template.touchOs)
{
    doc.on('touchend', onBlur);
}
else
{
    doc.on('click', onBlur);
}
displayinline

Awesome! Thanks for your detailled report, I’ll push this to production as soon as possible ;)

  • Bought between 1 and 9 items
  • Has been a member for 4-5 years
acpan Purchased

Hi,

This question was asked before -

“is there an easy way to just use single images for the icon navigation on the side?

And your answer was:

“You just need to edit the background images properties (source and position) of the

styles .shortcut-* defined both in

style.css and 768.css:

just set your own images path, and the following background-positions:

style.css background-position: -2px -5px; for all styles style.css background-position: 0 0; for the two first groups background-position: -2px -5px; for the other group a few lines below ”

I tried to implement but not successful. Could you give me a sample style.css and 768.css files for this purpose with individual shortcut icons images? Sorry if the request is too much, but i really need your help on this one to get started.

Thanks ACPan

displayinline

Hi,

Actually there are only a few steps to follow:

In style.css:

  • Remove the property background-image for the selectors #shortcuts > li > a, #shortcuts > li > span
  • Add the property background-position: -2px -5px; instead
  • Redefine each shortcut style individually:
    .shortcut-dashboard {
        background-image: url(path/to/image.png);
    }
    /* And so on */
    
  • You may also redefine the span variant, which is used for disabled shortcuts (if you use them):
    span.shortcut-dashboard {
        background-image: url(path/to/image/disabled.png);
    }
    

In 768.css:

  • Remove lines 303-310 and 260-276
  • Add this property to the selector #shortcuts > li > a: background-position: 0 0;
  • Add this property to the selector #shortcuts > li > a:before: background-position: -2px -5px;

Now you should be able to see your new icons ;) If you need to make more adjustments, keep in mind you can use the DOM inspector in the developer tools of your browser to test a few tweaks before reporting them to the stylesheets – you’ll save a lot of time this way ;)

Hope this helps!

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

Hi!

Is there any way of having the wizard’s “legend” steps in vertical instead of horizontal without recoding the JS? (I mean, using CSS or classes)

Thanks in advance!

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

Forget about previous post. I’ll do it with tabs and some tweaks. Thanks anyway!

displayinline

I was about to suggest something similar ;) Feel free to ask if you have any other question!

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

no charts ou google charts?

displayinline

Hi,

The template uses the Google Chart API, but you are free to use the charting lib of your choice ;)

  • Bought between 10 and 49 items
  • Canada
  • Exclusive Author
  • Has been a member for 2-3 years
Caidek Purchased

I was using constellation admin template (HIGHLY RECOMMENDED TO ANYONE WANTING AN AMAZING NON RESPONSIVE TEMPLATE!!!!) and decided that instead of redoing my code a few times I’d rather go with a fully responsive template.

I came across this and when realizing it was from Display:inline (AMAZING AUTHOR) I purchased it right away! It’s well worth every penny and then some!

If your on the fence about purchasing this template, my recommendation is to DO IT! You will NOT regret it!

Thanks again for the amazing work, keep it up! :)

displayinline

Thanks a lot! :)

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

Hi,

First of all, this is great work. Thank you for all your hard work.

Regarding modal windows – I have a page with some js up after the to post a modal window saying that the page is loading (its a very big page with loads of analytics data.) That part works fine, but I want to cancel that window once the page has finished loading, but I haven’t figured out to exactly make that happen.

Up at the top, I’m using:

$.modal({ content: ‘html with one of your spinners’, title: ‘some title’, buttons: {}, width: 200 });

Is there a way to cancel that window after the page has been downloaded?

Thanks!

displayinline

Hi, and thanks! :)

About your question, this is actually simple: the call to modal() will return a reference of the modal window, which you can store and use to close it:

// Open modal
var loadingModal = $.modal({ content: ‘html with one of your spinners’, title: ‘some title’, buttons: {}, width: 200 });

// ... some code ...

// Close modal
loadingModal.closeModal();

Alternatively, if you are sure there are no other modal windows open, you can use $.modal.current instead:

$.modal.current.closeModal();

Hope this helps! :)

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

The move to CKEditor is unfortunate. It’s laden with bugs (always has been), is known to have problems when embedded in a modal dialog, and is prone to problems when you have more than one editor on a page.

displayinline

Hi,

Well, I am surprised to hear that… I knew FCK Editor had such issues (the original project of which CKEditor is a fork), but I always had good feedback on this one. Is it really that bad?

I had to drop the previous editor because it is not compatible with jQuery 1.9+, and is no more maintained.

Anyway, keep in mind you can always drop this editor and use the one of your choice ;) Most of them will work fine with this template.

Tell me if you need help implementing one of these!

Default-user

I rolled in NicEditor successfully but glDateEdit was having problems in modal dialogs, too, so I ended up rolling back to Dev 1.4 for now. The date control wasn’t lining up with its associated text field. Instead, it would float to the upper left corner. We’re getting close to a production release so we need to keep moving. I’ll try 1.5 again in a few weeks. Hopefully by then, the date editor will either have caught up or I’ll just add the month and year drop-down options myself which is why I tried the newer version of the plug-in anyway. As for CKEditor, yeah, it fails in a modal window. The reason is that its editing pane is also a modal. Since you can only have one layer acting as modal at a time, it fails. CKEditor’s licensing is also a little gray when it comes to commercial use. Since CLEditor is working for us, I may mod it to work with jQuery 1.9/2.0. I’ll ping you if I do.

by
by
by
by
by
by