MantraThemes

MantraThemes does not currently provide support for this item.

1017 comments found.

Your documentation states: “There are two ways to open a new modal window, both of which accept an options map (see below for a detailed list) and return the jQuery object of the new window.”

Is this correct? It looks to me like the object returned is the object with id of “modal” that is the container of windows. Just asking as I’ve been confused about this.

Following on from my last post. I have the following code:

function userModalOpen(oLink, content) {
    var $modal = $.modal({
        title: oLink.title,
        closeButton: true,
        content: content,
        width: false,
        resizeOnLoad: true
    });

    var a = win.getModalContentBlock();
}

When I run this it tells me win is not defined. Hope you can help put me in the right direction with this. I’m very confused on how to use win.

Thanks,

Hi!

On your code snippet, the window reference is stored in $modal, not in win, so this should work:

var a = $modal.getModalContentBlock();

Tell me if this does not help or if you need more details! ;)

what type of charts are available to use ? i can see bars….

Hi,

The template use the Google Charts API , you will find a gallery of all available charts here ;)

Tell me if you need more details!

ah ok thanks, so i need to have access to google to be able to graph ?

Not really, the template only loads the required files from Google’s CDN , everything is done client-side then.

You can check their quick start guide to see how they work ;)

Hi,

I want to add a menu to each row in the table instead of edit and delete icons. I am thinking of adding a gears icon in the Actions column, on click it will display a context menu or regular menu with options like “Edit”, “Delete”, “Clone”, “Flag” etc… Can you help me with the javascript or html. I tried to add it but it display the menu at the bottom of the table. Also the menu ideally should display on the left side as it is the last column of the table with no space on the right.

Thanks !

Hi!

You may use a variation of the table drop-downs from the demo page tables.html:

<td class="low-padding">
    <span class="select compact expandable-list expand-left">
        <span class="select-value icon-gear" />
        <span class="select-arrow" />
        <span class="drop-down">
            <a href="#">Edit</a>
            <a href="#">Delete</a>
            <a href="#">Clone</a>
            <a href="#">Flag</a>
        </span>
    </span>
</td>

Hope this helps! ;)

Whoops, wrong template markup, sorry! Here is the correct one:

<div class="button menu-opener">
    <img src="images/icons/fugue/gear.png" width="16" height="16" class="picto" />
    <div class="menu-arrow">
        <img src="images/menu-open-arrow.png" width="16" height="16" />
    </div>
    <div class="menu">
        <ul class="reverted">
            <li class="icon_edit"><a href="#">Edit</a></li>
            <li class="icon_delete"><a href="#">Delete</a></li>
            <li class="icon_cards"><a href="#">Clone</a></li>
            <li class="icon_security"><a href="#">Flag</a></li>
        </ul>
    </div>
</div>

;)

Thanks di ! thats exactly what I want. I was wondering if this code was from your new template ! thanks @rscholey

1st…Great Adin Theme! Finally something everyone in the organization loves.

I am having an issue with asp.net partial-page postbacks. Upon completion of the post-back, some of the elements lose their formatting. for eaxample the check bock will revert to just the plain old check box rather than the theme’s exsquisite slider (mini-switch). Is there a js function I need to call to force the ui to re-render? (see code below)

Thanks, Michael

<asp:updatepanel id=”panelLogin” runat=”server” updatemode=”Always”> <contenttemplate>

 

<label for=”login”> User Name </label> <asp:textbox id=”txtUserName” runat=”server” cssclass=”full-width”></asp:textbox>

<label for=”pass”> Password </label> <asp:textbox id=”txtPassword” runat=”server” textmode=”Password” cssclass=”full-width”></asp:textbox>

<button type=”submit” class=”float-right” id=”btnLogin” runat=”server” onclick=”doBusy();”>Login</button>

<input runat=”server” type=”checkbox” id=”chkLogin” value=”0” class=”mini-switch” /> <label for=”keeplogged” class=”inline”>Keep me logged in</label>

</contenttemplate> </asp:updatepanel>

Hi, and thanks! :)

About your issue, this is related to the template auto-setup which is used to style the elements: it fires automatically on page load and every time the content gets modified via jQuery. I think asp.net uses its own DOM manipulation methods, so the automatic setup is not called.

You can easily apply it yourself on any element using the corresponding methods:

$('#panelLogin').applySetup(false, true);

You will find more details on this methods and on the template setup in the documentation in Template basics / How the template works / Automatic template setup

Tell me if you need more details! ;)

Thanks for the help but that did not work; however it did point me in the right direction. ‘applyTemplateSetup’ did the trick. For any other .net users out there, here is how you do this:

If IsPostBack Then
   ScriptManager.RegisterStartupScript( _
      panelLogin, Me.[GetType], "ApplyUI", _
      "$('#" & panelLogin.ClientID & "').applyTemplateSetup(false,true)", _
      True)
End If

Thanks, MJF

Whoops, sorry for the wrong reference! I was thinking of another template… Anyway, glad to see you found out, and thanks for sharing the solution! ;)

Clicking a menu like that was visible even after viewing the content on it, because the page is always returning to the dashboard menu after clicking any menu.

Hi,

If you want the active page to be shown automatically in the navigable menu when the page loads, just add the class navigable-current to the corresponding link in the menu:

<a href="link.html" class="navigable-current">Current element</a>

Note that you have to this on the server-side, while building the markup. You may also do this client-side, but this depends on your setup and on the structure of your application.

Hope this helps!

I am going to use or code myself a jQuery Auto Expand textarea on my site. Can you let me know if there is one you are considering using one that’s already out there or are you considering coding one yourself for your next version of constellation. If you have already picked one then I would just like to use the same. Thanks.

Hi,

I am not planning to add an auto-expand feature, so you can go and use the one you have picked ;)

Hi – is this a customisable website template ?

Hi!

This template is a admin skin for developers building their own CMS /framework. It is build on HTML5 and CSS3 , with several javascript plugins. You will find a detailed list of features in the item’s description ;)

Tell me if you need more details!

Thanks. Can i sue it to build a simple website ? given i don’t have any HTML /CSS programming skills. But also no stranger to techie skills since i’m an Oracle Programmer by profession.

Well, I guess you can do so, but you will need at least a basic understanding of how HTML and CSS work: most of the time, copy and paste will be enough, but sometimes you will need to edit markup and styles.

You will find many tutorials on HTML and CSS , I would say that if you already have developer skills it will only take you 5-6 hours of training to get the basics ;)

Hi, I have this piece of code which is not displayed very well in IE8 and only IE:
<section class="grid_12">
    <div class="block-content">
        <h1>Daily overview</h1>
        <div class="block-controls">
            <ul class="controls-buttons">
                    <li><a class="modal-link" href="#"><img width="16" height="16" src="/images/icons/fugue/plus-circle.png" /> Add teams</a></li>
            </ul>
        </div>
        <ul class="planning no-margin">....

There is a huge space between the planner and the add button. The class block-controls is taken to much in height.

Any help  would be appreciated. Regards Andrea</ul></div>

Hi,

Sorry but I couldn’t replicate the issue, even with your markup. Maybe is this a specific case – or did you make changes to the CSS ? If so, try replacing your modified stylesheets by the stock ones, to see if a compatibility hack was not lost sometime.

If not, can you provide an online demo where I can run some tests? I will check if I can find what is wrong ;)

You previously gave the following code as a solution to adding a menu into each row of a table cell to replace the edit and delete actions:

<td class="low-padding">
    <span class="select compact expandable-list expand-left">
        <span class="select-value icon-gear" />
        <span class="select-arrow" />
        <span class="drop-down">
            <a href="#">Edit</a>
            <a href="#">Delete</a>
            <a href="#">Clone</a>
            <a href="#">Flag</a>
        </span>
    </span>
</td>

Maybe I am missing something but I tried this by replacing the code in an a table action cell in the index.html page of your demo and it gave me the following words:

Edit Delete Clone Flag

With no styling. You also mention “You may use a variation of the table drop-downs from the demo page tables.html”. Can you explain which table drop-down you mean. I can’t see any tables.html that uses anything similar.

As always thanks for the great work and the great response table you provide for users needing help with the skin.

Whoops, I used the wrong template markup once again… Sorry!

Here is the correct markup:

<div class="button menu-opener">
    <img src="images/icons/fugue/gear.png" width="16" height="16" class="picto" />
    <div class="menu-arrow">
        <img src="images/menu-open-arrow.png" width="16" height="16" />
    </div>
    <div class="menu">
        <ul class="reverted">
            <li class="icon_edit"><a href="#">Edit</a></li>
            <li class="icon_delete"><a href="#">Delete</a></li>
            <li class="icon_cards"><a href="#">Clone</a></li>
            <li class="icon_security"><a href="#">Flag</a></li>
        </ul>
    </div>
</div>

Thanks for pointing that! ;)

Is think there’s a bug in your form.css It’s missing the HTML5 tag “url” and “email” for input types. Or maybe i’m missing something ?

Thanks :)

Hi!

HTML defines 13 new input types, I choose not to include them all because it would add extra load on the rendering engine.

Feel free to add those you use, simply by duplicating the styles with input[type=”text”] ;)

I agree to not add extra load to the template, but maybe the @ type is too restricting ?

I didn’t wanted to modify the supplied CSS because if you make changes to the template, it would be a pain to update with my modifications… :/

Without the [type] selector, the radio and checkbox inputs would be affected too… I had to make a choice.

About modifying the CSS , I would advise not to worry about that: it is easy to merge your modified code with new version using a comparison tool such as Winmerge ;) Quick tip: comment your changes, so they will be easy to spot when merging two versions.

Another bug : docs not working on “Chrome Version 21.0.1180.82” on “Mac OS X 10 .8”. The content is not loading, having : “Origin null is not allowed by Access-Control-Allow-Origin.” in console. Maybe link to this : http://stackoverflow.com/questions/3595515/xmlhttprequest-error-origin-null-is-not-allowed-by-access-control-allow-origin

Hope this helps !

Works like a charm on “FF 14.0.1”.

Cheers

This is a known bug, caused by Chrome’s very restrictive sandbox on cross-domain requests. To solve this, just put the documentation files on your local webserver, and everything will work fine ;)

Thanks for the tip ! :)

In your documentation, I cannot find how to param the “controlbar” for button click ? Maybe i’m missing something, can you help me ? Thanks :)

PS : Love your work !

Do you mean you want to set the action on button click? Then just use the onclick attribute of these buttons:

// Call function
<button type="button" class="grey" onclick="someFunction()">Reset</button>

// Load url
<button type="button" class="grey" onclick="document.location.href='url.html'">My profile</button

Note that you can also simply replace these buttons by links with the class button.

PS: Thanks! :)

Yes i wanted to add an url for the “back to list” button, but it seems to be hard for a simple thing. Also, i don’t like using javascript for a redirect to url link. I prefer using an anchor.

The style for “a class=’button’” isn’t the same as the “button” style.

Any another solution ?

Thanks for your help !

I understand, I am not a big fan too of buttons redirections…

On anchors, just use the class big-button to give them the same look as buttons – I don’t know why I forgot this in my last comment ;)

Hi,

Here is the url to see for yourself the problem with textarea. http://62.195.186.60/cms/mobile/mobile/Log-Task2.cfm?ID=2190941

Hope this helps?

Mike

Hi!

I think I found the issue: to use a textarea, you should use the textarea element, not an input with the type textarea.

So instead of this:

<input type="textarea" name="TaskLogComment" id="TaskLogComment" value="" style="width: 100%; height: 100px; ">

Use this:

<textarea name="TaskLogComment" id="TaskLogComment" style="width: 100%; height: 100px; "></textarea>

Everything should work as expected then ;)

Works like a charm!

Thanx!

Glad I could help! ;)

Does the style for ”.with-icon.icon-info a” should be ”.with-icon.icon-info > a” in simple-list.css line 464 ? Because each link in a “li” is considered like a block and break a new line so.

Thanks for your answer,

Hi,

Did you mean .simple-list li a? If so, using .simple-list li > a is more specific and reduce the inheritance issues. This is a good point, thanks for the suggestion! :)

In the documentation : “doc/index.html#content/css/menus.html” there’s a lot of class for icons, there’s one for editing, one for deleting, but adding and listing are missing ?

I would love to use them in the menu.

Thanks :)

Hi,

You can easily extend the available classes by adding your own in css/standard.css around line 1637: just pick a name and an icon from the Fugue Icon Set, and use the pattern:

.menu .icon_[name] { background-image: url(../images/icons/fugue/[icon].png); }

And you are done! ;)

I wil create a new stylesheet for adding mine so :)

Thanks ! :)

For the breadcrumbs, when the element is active, the “anchor” doesn’t have to be present. But if i suppress the anchor, the style missing some spaces.

I think you should add a case where the breadcrumbs doesn’t have an anchor.

Cheers,

Hi,

You can use a span instead of an anchor for each element, this will preserve the layout and spacing ;)

Nice tip !

Working like a charm :)

Hello,

I have been using Modals and they work great. However, I tried using iFrame modals and they don’t work upon second load. So, if I open a modal, close it, then try to trigger it again, I get an error that $.modal is not defined. Help!

Thanks! Your theme is amazing!

PS. I have the latest version from http://dl.dropbox.com/u/22527484/jquery.modal.js

Hello, and thanks! :)

Everything works fine in the stock files, maybe some script is overwriting jQuery somehow (for instance, by loading it once again). Did you check your browser’s console for javascript errors?

Just to make sure, check that you set the useIframe option to true – otherwise the whole content of the target page will be loaded in the same scope as the parent page, thus overwriting scripts.

If you still can’t make it work, please send me a link to an online test page, I will check if I can find a solution ;)

Thank you so much! I was loading the content via Ajax because I was writing “useIFrame” (check the capitalization!) and that page had jQuery included.

Great theme! Would recommend to friends.

Glad I could help! ;)

Like for the button ”+ Add” in the “grid view”, it would be a nice addition to have the possibility to add infinite button side by side (after the “add” one).

Unfortunately, due to the way they are positioned, it is not possible to have several buttons side by side…

They is a solution, but it requires you to set an explicit left-margin on each additional button to offset them to the right position.

by
by
by
by
by
by