1843 comments found

Hi,

We have a functionality to populate select box based on changed value of another. Like for example, if user change country then state dropdown will be populated based on selected country and based on state selection a MULTISELECT city dropdown (classes used in select – expandable-list multiple-as-single easy-multiple-selection check-list) will be populated. And based on multiple selection of city we have to populate list of schools (by taking list of selected city).

We are sending values to server in a ajax call by passing all values using $(formObj).serialize(). The multiseelct dropdown values are not passing corerctly (newly selected) unless we force close it after each selection.

Is there any way other than force close the multiselect dropdown for passing newly selected list?

displayinline

Hi,

Actually what’s happening when a select is open is that it is removed from its original location and appended to the document, in order to display on top of everything else. While this happens, the select is no longer in its original form. That is something I will change in an incoming update, but it is not ready yet.

In the meantime, you can still access the select using its ID, and append the value manually:

var request = $(formObj).serialize();
$('#cities').find('option:selected').each(function()
{
    request += '&cities[]='+escape(this.value);
});

Hope this helps! ;)

displayinline

Hi again!

I just finished my rewrite of the input styling plugin, you can download it here.

I tested it on many browsers and platforms, but if you notice any issue please report it to me ;)

@ListingWareBob

I had the same issue. Go to calendars.css, find

.calendar.fluid .cal-events > li,
.calendar.large .cal-events > li,
.calendar.largest .cal-events > li {

and replace “overflow: visible;” with

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

@displayinline

I went through developr.tooltip.js and found a very usefull option : “removeOnMouseleave”. Unfortunately there is nothing like “showOnMouseOver”. Would you mind to add it ? Thanks in advance ! :)

Default-user

Hi,

Finally, here is a functional alternative:

$(selector).hover(function () {
   $(this).tooltip('something');
}, function () {
   $(this).removeTooltip();
});

No fuss ! :)

Default-user

What I meant is, no need to start modifying your code when there is such a dead simple solution. When modifying your code I’m always afraid that something wrong happen in one browser or another.

displayinline

I understand! Thanks for sharing your solution ;)

mwsasser Purchased

I’ve had a bit of a problem with the Profile DIV on the right side. It’s where the icon typically appears. I’ve placed a login icon there when the user isn’t logged in. Unfortunately the link doesn’t seem to work in chrome. It works just fine in IE8 and Firefox.

This is what the code looks like. <div id="profile"> <a href="<?php echo ">" title="Log-In"><span class="icon-login icon-size4" /></a> </div>
Default-user
mwsasser Purchased

Ha-ha. Go figure. Thanks for the tip. I was wondering why it worked in ie, firefox and opera.

Btw, are they ever going to make this forum search-able? It would really take a load off of you.

Default-user
mwsasser Purchased

Oh, btw. Why do some of the buttons look wrong in Chrome? In the other browsers the button shows white as it should but black in Chrome.

displayinline

Mmmh, I can’t remember seeing such issue… Do you have a screenshot? Or if you can share the code you use, I will see if I can find what causes this ;)

Hi displayinline,

I don’t quite understand how the modal function works. Is it possible to load the content of an invisible div into a modal window ? Example:

<button id="myButton" onclick="openmodal()">text</button>

<div id="myDiv" style="display:none">
    <select>
        ...
    </select>
</div>

Is it possible to pass arguments to the modal window, such as the member’s id ?

And how does the modal window return the selected option ?

Thanks ! :)

Default-user

Works fine, thanks a lot ! :)

Something strange : the div > select has the class select white-gradient but whew displayed in the modal window it is no more stylized.

And the buttons are not centered.

Default-user

Well, the div containing the buttons has the class modal-buttons align-right. I’ll probably be able to solve this issue, as for the select style. Thank you !

Default-user

buttonsAlign: ‘center’. Lot of work to read the doc, it’s easier to ask the question ! :)

jvikman Purchased

Loading nested tabs with AJAX ends up to an infinite loop

Hi,

We’re trying to load a standard-tabs contents with AJAX (as written in the theme documentation doc/index.html#content/reference/tabs.html -> Tabs Events). Inside the loaded tab, there is another tabs widget. It seems that as far as the nested tabs widget is loaded, the “showtabinit” event of the child tab is bubbled up to the parent tab and the contents of the parent tab is reloaded, causing an infinite loop. The code snippets are below.

How could we stop propagation of the child form events up to the parent tab widget? I think that it would be useful if the propagation would be stopped at the tab widget level (in your theme), so nested tabs could be easily loaded with or without ajax (and they could also further load more tabs).

PARENT TABS CODE:

<script type=”text/javascript”> $(’#parent-tabs > .tabs-content > div’).on(‘showtabinit’, function(e) { var url = $(this).attr(‘data-content-url’); if (url) { $(this).html(‘ ‘); $(this).load(url); } }); </script>
  • Parent 1
  • Parent 2
<!- Static content -> <!- Dynamic content, loaded with AJAX ->

CHILD TABS CODE (child-tabs.html):

  • Child Tab 1
  • Child Tab 2
<!- Child tab 1 -> <!- Child tab 2 ->

On behalf of our CTO,

Best wishes, Jaakko

displayinline

Hi!

This is a common issue with events, but it is easy to fix:

<script type=”text/javascript”>
$('#parent-tabs > .tabs-content > div').on('showtabinit', function(e) {
    // Do not process if not target event
    if (e.target !== this) {
        return;
    }

    var url = $(this).attr('data-content-url');
    if (url) {
        $(this).html('').load(url);
    }
});
</script>

This simple check should prevent the child event from being handled by your callback.

Hope this helps! ;)

Default-user
jvikman Purchased

I understood that this helped! Thanks very Much! :)

Best wishes, Jaakko

Hey there Display Inline:)

Is it possible to eliminate or hide the “close” button on the Modal popups??? I would like to be able to close the Modal with just the button on the Modal top bar. I have searched the documentation and didn’t seem to find it…I do apologize if I missed it;)

Thanks, Don

displayinline

Hey! :)

Sure: just pass an empty object to the buttons option:

$.modal({
    /* your options */
    buttons: {}
});

The modal won’t have any button then. Tell me if you need more details! ;)

Default-user

Works Perfect!!! That was one of those ‘DUH!’ moments I just had;) Thanks man!

displayinline

No problem ;) Glad I could help!

MayhemLV Purchased

I just wanted to say thank you for all of your hard work that went into this product. It was my first purchase on TF and it’s working very well for me. Great job!

displayinline

Thanks a lot! ;)

mwsasser Purchased

I have been trying to get the CLEditor to show on the page. This is what I have on the page but it’s not working, am I missing something?

<link rel=”stylesheet” href=”js/libs/CLEditor/jquery.cleditor.css”> <script> // Init var editorTextarea = $(’#cleditor’), editorWrapper = editorTextarea.parent(), editor = editorTextarea.cleditor({ width: ‘100%’, height: 350 })[0];

// Update size when resizing editorWrapper.sizechange(function() { editor.refresh(); });

</script>

<textarea class=”input full-width autoexpanding” placeholder=”Your comment here…” id=”cleditor” ></textarea>

Default-user
mwsasser Purchased

Thanks for the help. Its hard to see that something is out of order when I have so many includes.

displayinline

No problem, glad I could help! :)

Default-user
mwsasser Purchased

Not only that, I got the bbcode plugin for cleditor working on one page and the regular cleditor working on another. Simply rename the id of course. :-)

Hi displayinline,

Something a bit weird is happening to my laptop (1366×768) :

$(document).ready(function ()
{
    alert($.template.mediaQuery.name);
})

You know what ? It says “mobile-portrait”, even after rotating the display (portrait mode) ! :)

Default-user

I got it ! :)

I just added $.template.init(); at the end of the page.

I spent hours on something as silly as that…

That’s an important fact that you probably should point out in the doc.

displayinline

Glad to hear you found a solution :)

Actually, if you don’t trigger it manually, $.template.init(); is automatically called in a document.ready callback defined in the file setup.js. That’s why I was asking about the order of your scripts: if setup.js is above your custom document.ready callback, $.template.init(); will fire before it.

but calling it manually just does the trick too ;)

Default-user

I understand, but each time I moved setup.js elsewhere than at the bottom of the page, I got lots of errors from Firebug, and nothing worked.

in my opinion, knowing that document.ready is fired after the page has finished to load, setup.js will always be above my own code, wherever it may be in the page.

It’s me again:)

I think I might have run into a small bug. When I scroll the page all the way to the bottom, the tooltips on the #shortcuts menu appear to lose their positioning. I visited your demo page and it has the same bug. Scroll the page all the way to the bottom and hover over the “Stats” icon on the shortcut links…the tooltip barely shows up.

Do you happen to know why this is happening and if there is a workaround for it???

Thanks again for everything man! You rock!

displayinline

Hi!

Indeed, there was an error in the positioning function – thanks for reporting it! I fixed it, it should work fine now: download the latest version of the plugin here.

Tell me if you notice any other issue! :)

Default-user

Perfect!!! Works Great! Thanks dude!

tgpadaki Purchased

Hello! Is it possible to resize the columns in a table? How can I do it? Warm Regards, Govinda Padaki

displayinline

Hello!

If you want to resize the columns as in Word or Excel, you can use an external plugin such as colResizable, it’s really simple to use and seems to work quite fine ;)

Note that if you want to use it along with DataTables, you need to disable columns size management by setting bAutoWidth to false when initializing DataTables.

Hope this helps!

Hello,

How can I get a function openModal() (like the demo) to setModalPostion on load of the Modal? All I have been able to do it make a button that moves it once its loaded but i want it to already load in a top position.

for example I make the green action button move it: 'Center' : { color: 'green', click: function(win) { win.setModalPosition(400, 30); } },

The reason I want this is when typing into a modal on iPad it gets hidden.

displayinline

Hello,

If you open a simple modal, just store a reference and call the method on it:

var modal = $.modal({ ... });
modal.setModalPosition(400, 30);

Note that, as long as you keep the reference to the modal (or use $.modal.current), you can trigger the method at will.

If you use AJAX, you may use the standard $.ajax() callbacks:

var modal = $.modal({
    ajax: {
        complete: function() {
            modal.setModalPosition(400, 30);
        }
    }
});

Hope this helps! ;)

Default-user

Great works many thanks. Do you know how to get a modal to close if you click outside of it?

displayinline

Just add this code anywhere (in your page or in any generic JS file):

$(document).on('click', '.modal-blocker', function()
{
    $(this).nextAll('.modal').closeModal();
});

;)

Hi,

Im trying to set my sortable table to default to 100 results as opposed to just 10(default). How can i change this?

Default-user

I have set the iDisplayLength in the jquery.dataTables.min.js to 100 but it still only shows 10 results. Is this the correct place?

Default-user

its ok, i have it fixed. I had to enable bLengthChange

displayinline

Oh, I didn’t know about that. Thanks for sharing! :)

a small problem about content-panel. i tried to write <script></script> at the bottom of /doc/content/reference/content-panels.html.

when open it as mobile-panels, the back button come out twice.

Default-user
as what i mention in my post, i just wrote <script></script> into (bottom of) /doc/content/reference/content-panels.html. http://pastebin.com/cakRBkzv

when i resize my browser (in mobile view), check the conten panel and select either option, the back button come out twice.

temporary fixed in this way. http://pastebin.com/CT349MHZ
displayinline

Hi,

I made some tests, and it seems that when jQuery loads content which contain scripts, it inserts first the content, then the scripts. In this particular case, this caused the automatic setup to run twice on the same elements, causing the duplicated back button.

You can solve this by adding a simple check in the declaration of $.fn.contentPanel in js/developr.content-panel.js (around line 200): add this just above the line if (contentPanel.length > 0 && panelContent.length > 0):

if (contentPanel.hasClass('enabled-panels'))
{
    return;
}

This should fix the issue. Thanks for reporting! :)

Default-user

got it, thanks.

How do you upgrade this from 1.3 to 1.4?

I can’t find the upgrade instructions.

displayinline

Hi,

If you did not make any changes to the CSS/jS files, just overwrite the folders /js and /css with the ones from the new version, and you are done ;)

Nothing changed in the HTML markup, so you don’t need to change anything.

Tell me if you need more details!

Hi,

is it possible to add Ext-JS without exploding the css ? I tryed with ext-js 4.1 and some bugs appear.

Anyone already tryed ? Thx.

displayinline

Hi!

Sorry, I have never used Ext-JS before, so I can’t give you an answer on this. If anyone has done this before, I’d be happy to know how it went too ;)

Meanwhile, can you tell me what kind of issues you have? They are probably inheritance issues, nothing a good debugging can’t fix: you may try to open your browser’s developer panel (F12), and in the inspect tab, click an element to see which styles are causing the issues. Then just redefine the right values in the stylesheet to prevent inheritance.

If you have an online test page, I can check it to give you some help on doing this :)

heubel Purchased

Hi, if I include the wizard alone in a single page, the background does not fullfill the page until the bottom, so I have the linen background image until the end of the wizard and then a blank background, what is not nice visually.

1) How to make the wizard centralized in the page top and bottom margins?

2) How to make the linen background going until the bottom of the page (fullfill the height at 100%)?

Many thanks for the great theme!

displayinline

Hi,

You just need to add the class full-page-wizard to the body element, and copy the code included at the bottom of the example wizard page in the package. Your wizard will automatically be centered and positioned each time the window is resized.

Tell me if you need more details! ;)

Hi displayinline,

I have one more question. :)

It’s about the modal window’s buttons. In English they could be, for example, “Cancel” and “Submit”. But what if the user is not english-speaking ? I tried to replace “Cancel” and “Submit” by variables, but this doesn’t work at all. Is there a way to dynamically set these buttons text, or possibly replace them with icons ? Thanks in advance !

Default-user

Oh, jacascript syntax !! I known the onClose function, but instead of writing onClose: function() {sauvegarder();} I wrote onClose: sauvegarder();, and of course this didn’t work. Thank you ! :)

Default-user

I forgot to report something. One day you told me that the difficulties I encountered with my laptop’s touch screen were coming from the class .no-touch, and that I just had to remove all of them, which actually fixed the problem.

I found later that the problem was caused by the fact that $.template.init() was not automatically fired, and has been fixed the day I added it at the end of every single page. I mean I could reuse the original style.css file content without any kind of problem.

displayinline

Good to know! Thanks for sharing ;)

Is there an easy way to add TableTools for the export to excel/PDF feature? I’ve been working with it, but have can’t get it fully working without glitches.

Default-user

Thanks for the reply, I used that code and the buttons appeared, but only the Print button works. I did add the code for the SWF path as well:

"oTableTools": {
                "sSwfPath": "../TableTools/media/swf/copy_cvs_xls_pdf.swf" 
            },

Did you ever encounter this problem?

Default-user

I got it working.Thanks !

displayinline

Glad I could help! ;)

Just wondering if you’ve found a solution to the problem with the Entypo fonts where glyphs requiring 5 characters were not rendering properly. Will that be fixed in V1.5? Thanks.

displayinline

Indeed, it doesn’t work for me too, but I think I found the issue: I checked the Entypo font file your server sends, and it is different from the one I use. Somehow I included the wrong version in the archive you downloaded… Sorry!

I replaced the webfonts with the new files in the archive, and updated the link. Can you try downloading it again and replacing the webfonts? It should work fine now ;)

ListingWareBob

I thought those other Entypo files looked suspiciously like some you had me try in November! Yep, these new ones work – even on the old iPad 1 (that was no longer being updated) and all of the ‘5 character’ issues seem to be gone! Thanks for the effort – great fix!

displayinline

Great! :) These will be in the next update so.

Thanks for your help and your feedback!

by
by
by
by
by
by