1004 comments found

rscholey Purchased

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.

rscholey Purchased

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,

displayinline

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….

displayinline

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!

Default-user

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

displayinline

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 !

displayinline

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

displayinline

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>

;)

Default-user

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>
displayinline

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

Default-user

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

displayinline

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.

displayinline

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!

rscholey Purchased

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.

displayinline

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 ?

displayinline

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.

displayinline

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>
displayinline

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

rscholey Purchased

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.

displayinline

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

apsylone Purchased

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

displayinline

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

Default-user
apsylone Purchased

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… :/

displayinline

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.

apsylone Purchased

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

displayinline

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

Default-user
apsylone Purchased

Thanks for the tip ! :)

apsylone Purchased

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 !

displayinline

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

Default-user
apsylone Purchased

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 !

displayinline

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

mbaak Purchased

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

displayinline

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

Default-user
mbaak Purchased

Works like a charm!

Thanx!

displayinline

Glad I could help! ;)

apsylone Purchased

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,

displayinline

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

apsylone Purchased

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

displayinline

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

Default-user
apsylone Purchased

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

Thanks ! :)

apsylone Purchased

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,

displayinline

Hi,

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

Default-user
apsylone Purchased

Nice tip !

Working like a charm :)

sebumd Purchased

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

displayinline

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

Default-user
sebumd Purchased

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.

displayinline

Glad I could help! ;)

apsylone Purchased

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

displayinline

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