1825 comments found

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

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 ;)

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

@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 ! :)

displayinline

Hi, and thanks! ;)

On your question, the option wouldn’t work because the goal of the tooltip() method is to show the tooltip as soon as it is called. But you can easily do this, either by adding the class with-tooltip to your target element, or by adding a small custom method:

$.fn.tooltipOnHover = function(options)
{
    return this.on('mouseenter', function()
    {
        $(this).tooltip(options);
    });
};

Hope this helps! ;)

Default-user

Hi,

Thanks for the answer, but the tooltipOnHover function doesn’t prevent the tooltip from showing as soon as it is called (in the document.ready block), and it doesn’t even show the tooltip on mouse over.

The problem is that in Firefox the with-tooltip class doesn’t work. The only way to obtain your stylized tooltip is to invoke $(selector).tooltip(“something”); on the element.

Default-user

About line 827, in developr.tooltip.js, there are 3 listeners : onMouseleave, onBlur and onClick. Would it be relevant to add a fourth one, onMouseEnter ? If yes, how ?

displayinline

Hi,

Both methods works, but not on touch-enabled devices (because it would not work as expected). If you want these to work also on touch devices, you need to remove the check in developr.tooltip.js at the end of the file:

if (!Modernizr || !Modernizr.touch)

And in my previous example, you can add support for touch-events:

$.fn.tooltipOnHover = function(options)
{
    return this.on('mouseenter touchstart', function()
    {
        $(this).tooltip(options);
    });
};

Tell me if you need more details!

Default-user

I’m sorry but I don’t understand what you mean by “removing the check”. Do you mean || !Modernizr.touch ?

About the touch device, the with-tooltip class works very well in Safari and other browsers, except Firefox and Chrome.

displayinline

Sorry if I was unclear! I meant you should unwrap the whole code block from its condition:

if (!Modernizr || !Modernizr.touch)
{
    /* code */
}

Becomes:

/* code */

About Chrome and Firefox, these are the only desktop browsers with built-in support for standard touch events, which is why the other browsers works as if your device does not have touch support.

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 ;)

  • Bought between 1 and 9 items
  • Has been a member for 1-2 years
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>
displayinline

Hi,

Actually this is a know issue with Chrome: if an inline link has no text in it, it won’t be clickable – and Chrome doesn’t consider the icon as text, because it is only pseudo-content.

The workaround is simple:

<a href="#" title="Log-In" style="display:inline-block"><span class="icon-login icon-size4" /></a>

The display:inline-block property will give the link a size, and now it works – but don’t ask me why ;)

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 ;)

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

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 ! :)

displayinline

Hi,

Sure, you just need to use the dedicated jQuery method:

$('#myDiv').modal({ /* options */ });

This method will remove the element from the DOM, show it if required and open a modal window with it as content. What’s more, it will also take care of putting it back where it was before when the modal closes, and also hides it if it was hidden at first.

Of course, you can use the same options as for $.modal(). So if you want to process the select value, just do something like this:

$('#myDiv').modal({
    buttons: {
        'Cancel': {
            click : function(modal) { modal.closeModal(); }
        },
        'Ok': {
            classes : 'blue-gradient glossy',
            click : function(modal) {
                // Get select value
                var value = modal.getModalContentBlock().find('select').val();

                // Process value here

                // Close the window
                modal.closeModal();
            }
        }
    }
});

Note that you can do the same with the standard $.modal() method: just give your DIV as the content option:

$.modal({
    content: $('#myDiv')
});

Hope this helps!

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 ! :)

  • Bought between 50 and 99 items
  • Has been a member for 1-2 years
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

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

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!

  • Bought between 10 and 49 items
  • Has been a member for 1-2 years
  • United States
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! ;)

  • Bought between 1 and 9 items
  • Has been a member for 1-2 years
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>

displayinline

Hi!

Just to make sure: is this the order in which your code is set in your page? If so, this may be the issue: you need to place the script after the textarea, or the script won’t find it when it runs (because it is not yet in the DOM).

If you need or prefer to have the script on top, just use a document.ready callback:

<script>
$(document).ready(function() {
    // 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>

Tell me if you still can’t make it work! ;)

Default-user
mwsasser Purchased

I moved the script to the bottom of the page. It still doesn’t work. Any other suggestions?

displayinline

Do you have errors showing in your browser’s console? (Hit F12 to open the developer tools panel in most browsers).

If so, this may give a hint about what’s not working.

If you have no errors, can you put online a test page where I can run some tests? It will help me diagnose the exact issue ;)

Default-user
mwsasser Purchased

Yea, i already thought of the errors. Didn’t see them. Can I send you a url thats not visible to the world?

Default-user
mwsasser Purchased

I found the way to pm you, sent you something.

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. :-)

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

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) ! :)

displayinline

Hi,

Actually, “mobile-portrait” is the default media query (in the mobile-first logic of the template).

This may happen if your code runs before the media query detection code fires – meaning your code is above the file setup.js.

It is so? If not, check that the style #mediaquery-checker has not been removed from the various stylesheets: it is used to determine the active media query.

Tell me if you still have the issue! ;)

Default-user

I’m not sure I understand what you’re telling me.

I found #mediaquery-checker in the following css files :

1200, 2x, 480, 768, 992, style.

As for setup.js, it is located at the end of the page :

<!-- JavaScript at the bottom for fast page loading -->
<!-- Scripts -->
<script src="js/setup.js"></script>

Should I put it at the beginning of the page, after or before jquery.js ?

Actually, what I am trying to do is to prevent the calendar from triggering something if the events it contains are displayed as small dots. But it is worth knowing why $.template.mediaQuery.name shows the wrong info.

displayinline

If you found the style in every stylesheet, then this is not the problem – good point. About the position of the script, what I meant is that your script should be after setup.js:

<script src="js/setup.js"></script>
<script>
$(document).ready(function ()
{
    alert($.template.mediaQuery.name);
});
</script>

It should work fine then ;) At least it works for me on the stock template files.

Tell me if still can’t make it work!

Default-user

When setup.js is located before jquery.js, Firebug reports lots of errors and nothing works, even the alert in question. When it is located after jquery.js, everything works fine.

Unfortunately, the alert keeps showing “mobile-portrait’...

Could you please give me an URL where I can test $.template.mediaQuery.name, if any ?

Or is there any other way to check if the calendar events are displayed as dots ?

displayinline

Sure, you can go to the template demo website, open your browser’s console and simply enter:

$.template.mediaQuery.name

The console will output the current value.

Aside from that, you may check the calendar events display mode:

if ($('#test .cal-events > li').css('display') === 'inline-block')
{
    // Dot mode
}
else
{
    // Full mode
}

Does this help?

Default-user

Yes, from the demo website I get the right value :

>>> $.template.mediaQuery.name
"desktop" 

Strange, isn’t it ?

($(’#test .cal-events > li’).css … works as expected, but this is not the best solution. I’d better keep trying to understand why I get “mobile-portrait” instead of “desktop”.

Anyway, thanks a lot for both solutions ! :)

Default-user

It’s a total mystery. I just finished to read the doc about media queries and tried this:

var element = $('#only-desktop');
$(document).on('init-queries', function()
{
    if ($.template.mediaQuery.isSmallerThan('desktop'))
    {
        element.hide();
    }
    }).on('enter-query-desktop', function()
    {
        element.show();
    }).on('quit-query-desktop', function()
    {
        element.hide();
});

It works fine !

I also tested this page: http://scottjehl.github.com/Respond/test/test.html

Works fine also !

And this one : http://scottjehl.github.com/Respond/test/unit/

Tests #2 and #4 failed in Firefox, and #9 in Safari. I don’t know what it’s used for, but do you think this could relate to my specific issue ?

Default-user

But this alone doesn’t work :

$(document).on('init-queries', function()
{
    if ($.template.mediaQuery.isSmallerThan('desktop'))
    {
        element.hide();
    }
});
Default-user

Well, after dozens of tests I know what works and what doesn’t.

Everything works except things like $.template.mediaQuery.isSmallerThan, or $.template.mediaQuery.name

In other words, the whole problem comes from $.template.mediaQuery

And please, don’t suspect me to spend my time modifying your scripts ! I have never done so… :)

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.

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

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!

  • Bought between 1 and 9 items
  • Has been a member for 1-2 years
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!

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

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();
});

;)

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

Hi,

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

displayinline

Hi,

You need to set the option iDisplayLength:

$('#table').dataTable({
    iDisplayLength: 100
});

You will find a comprehensive options reference for this plugin here.

Hope this helps! ;)

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! :)

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

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.

displayinline

Hi,

Can you show me a sample of the code you are using? Including the HTML structure. You may use an online code sharing service such as http://pastebin.com/ or http://codepen.io/.

This will help me find what’s going wrong ;)

Default-user
vampcheah Purchased
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
vampcheah Purchased

got it, thanks.

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

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!

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

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 :)

  • Bought between 10 and 49 items
  • Has been a member for 3-4 years
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! ;)

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

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 !

displayinline

Hi!

If you want to use dynamic keys for your JS options object, you need to use an alternative syntax, for instance:

// Define translations
var textCancel = 'Annuler',
    textConfirm = 'Confirmer';

// Build modal options
var options = { buttons: {} };
options.buttons[ textCancel ] = function(modal) { ... };
options.buttons[ textConfirm ] = {
    classes : 'blue-gradient glossy',
    click : function(modal) { ... }
};

Note that for confirm() and prompt() methods, since v1.4 you have dedicated options to set the text:

// Confirm
$.modal.confirm('Êtes-vous sûr ?', confirmCallback, cancelCallback, {
    textCancel: 'Annuler',
    textConfirm: 'Confirmer'
});

// Prompt
$.modal.prompt('Saisissez une valeur :', callback, cancelCallback, {
    textCancel: 'Annuler',
    textSubmit: 'Valider'
});

Hope this helps!

Default-user

Thanks !

I understand this syntax :

$(selector).modal ({
buttons: {
options.buttons[ textCancel ] = function(modal) { ... };
options.buttons[ textConfirm ] = {
    classes : 'blue-gradient glossy',
    click : function(modal) { ... }
};

However, I don’t understand the use of var options = { buttons: {} };

displayinline

This is just a shorthand for:

var options = {};
options.buttons = {};

;)

Default-user

Sorry, but your explanations are not a model of clarity. I hope that the next version will be fully and easily localize-able, with for instance html5 inline attributes like data-modal-options.

In the meantime, Cancel will be a small red button with a “X” label, and Submit a bigger green one with an internationally known “Ok” label.

As you know, “Pourquoi faire compliqué quand on peut faire simple ?”. :)

displayinline

Sorry if I’ve not been clear enough, this is basic javascript syntax and I supposed you’d already know it: in JS, if you want to dynamically set an index in an object (or set an index with special characters or reserved words), you need to use the bracket syntax as in my example.

Here is a full working example, paste it in one of your page to see the actual result:

$(document).ready(function()
{
    // Options pour la fenêtre modale
    var options = {
        title: 'Titre de la fenêtre',
        content: 'Exemple de contenu',
        buttons: {}
    };

    // Textes des boutons
    var textCancel = 'Annuler',
        textConfirm = 'Confirmer';

    // Boutons
    options.buttons[ textCancel ] = function(modal) { modal.closeModal(); };
    options.buttons[ textConfirm ] = {
        classes : 'blue-gradient glossy',
        click : function(modal)
        {
            alert('Le bouton Confirmer a été cliqué');
            modal.closeModal();
        }
    };

    // Ouverture
    $.modal( options );
});

About using the button in inline options, this not possible as you can’t store functions in JSON, so you still need to initialize your modal with a small script. Aside from the buttons, most other options can be defined in the inline options:

<!-- Bloc de contenu -->
<div id="modal-target" style="display:none" data-modal-options="{"title":"Titre de la fenêtre"}">Contenu de la fenêtre modale</div>

<script>
    $(document).ready(function()
    {
        $('#modal-target').modal();
    });
</script>

Hope this is clearer to you now! ;)

Default-user

Thanks for taking the time to further clarify ! :)

I come from actionscript, which belongs also to the ECMAScript standard but with a quite different syntax. That’s why I am a bit confused with javascript. And I started to learn jQuery two months ago, which doesn’t help at all…

Anyway, I’ll keep you posted about the above code.

Thanks a lot ! :)

Default-user

Works great, thank you ! :)

What I hadn’t understood is that I had to define the options.buttons before calling the $(selector).modal() itself. That’s why including them after .modal({... was not working.

Does the modal fire an event when it closes ? I didn’t find anythig like that in the doc.

displayinline

Glad I could help ;)

About your last question, there is an available option in the modal plugin to define a close callback:

$.modal({
    onClose: function()
    {
        var modal = $(this);
        // Your code here
    }
});

The callback may also return false to prevent the modal from closing. If it does not return false, the modal will close.

Hope this helps!

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 ;)

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

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.

displayinline

Hi,

I made some tests, and it seems to integrate fine when using this sDom structure (note the extra T):

'sDom': '<"dataTables_header"lfrT>t<"dataTables_footer"ip>',

You also need to edit the TableTools stylesheet and change a little bit this style (line 29):

div.DTTT_container {
    position: relative;
    float: right;
    margin-bottom: 0;
    padding: 10px;
}

Is this what you were looking for? If you have functional issues with this plugin, I suggest you should check DataTables’ forums, you will get much more qualified answers than I can provide ;)

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! ;)

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

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

Hi! :)

Well, I was about to write you that I had given up, because I couldn’t find a way to remap the characters correctly: some services generate a font with a wrong line-height, and the others crappy vectors.

But I just had an idea: I remapped the font with Fontello, and rebuild the correct line-height and characters size using FontSquirrel, and it seems it worked ;)

The complete new icons set displays now correctly in all browsers I tested (including iOS and Android). You can download the updated files here, please tell me if it works fine for you too.

And thanks for poking me about this! It was the impulse I needed ;)

displayinline

Just updated the link, it was missing a few bits…

ListingWareBob

Outstanding! I’ll try it today and let you know. Thanks!

ListingWareBob

Hmm – I’ve just uploaded it to my test site and everything comes across as a small box with characters like ‘F004’ instead of the glyphs. I’ll try to troubleshoot, but any ideas?

displayinline

The previous webfont is probably stuck in your browser cache: clean it, and refresh your pages. By default, webfonts have a very long cache delay, thus you need to force things a little.

Also make sure you have copied all the files included in the archive, just in case.

Tell me if you still have issues!

ListingWareBob

I’ve cleared out my browser cache in multiple browsers – still no luck. Will keep trying, but…?

displayinline

Mmmh… Do you have an url I may check? If so, I will run some tests to try to find what’s going wrong. Also, do you use Windows, OSX or Linux? I have not yet tested them all, and the OS may have an influence in some edge cases.

ListingWareBob

You can see it here: http://listingware.com/internal/dev-new/html/ – I made sure and copied everything from your update into the most recent download of the template and then uploaded a new directory. I’ve tried it on Windows 8 with IE, Chrome, and Firefox, and Mac Mountain Lion with Safari.

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