1836 comments found

Keeg0123 Purchased

Hey.

I’m using the columns and having an issue with “three-columns” expanding margin all the way across to fill the parent div. Any idea why? Been working on this forever, can’t get it. I want to have my “three-column” sized divs sit next to each other horizontally. It won’t do that because the margin is expanding to the right.

Please help. Thanks. Keegan

See Picture here : Screenshot

displayinline

Hey,

Actually the columns only have a left margin of 2.5%, so they shouldn’t fill all available space like this. Can you make sure you use the correct markup? For 3-columns wide columns, your markup should be:

<div class="columns">
    <div class="three-columns">3 cols</div>
    <div class="three-columns">3 cols</div>
    <div class="three-columns">3 cols</div>
    <div class="three-columns">3 cols</div>
</div>

If you already have the correct markup, can you send me the complete source-code of this portion of the page, or a link to an online demo page I could check? This will help me find what may cause this ;)

I am having a problem with the “full-width” class..

I have an input field with an info-icon in it. But when I set the full-width class, the input expands properly but the info icon stays where it is leaving a large space between it and the left side of the input.

<div class="margin-top">
    <p class="button-height">
        <span class="input full-width">
            <input type="text" name="pseudo-input-4" id="pseudo-input-4" class="input-unstyled full-width" value="">
            <span class="info-spot">
                <span class="icon-info-round" />
                <span class="info-bubble">
                    Please enter the email address your registered with
        </span>
    </span>
</span>
</p>
<a class="button" href="javascript:void(0)">
    <span class="button-icon green-gradient glossy">
    <span class="icon-download" />
    </span>
Reset
</a>
</div>
displayinline

Hi!

Actually, this is a limitation of the HTML box-model: an element with full-width settings (width: 100% in this case) will take the exact inner width of its parent, whether it has siblings or not.

There is a simple solution for this: add a small padding to the pseudo-input block, and float the info icon into that space:

<p class="button-height">
    <span class="input full-width" style="padding-left:32px;">
        <span class="info-spot" style="float:left; margin: 8px 0 0 -22px;">
            <span class="icon-info-round" />
            <span class="info-bubble">
                Please enter the email address your registered with
            </span>
        </span>
        <input type="text" name="pseudo-input-4" id="pseudo-input-4" class="input-unstyled full-width" value="">
    </span>
</p>

Of course, if you are going to reuse this often, you should create classes instead of using inline styles.

Hope this helps! ;)

djshaker Purchased

Hi,

Just a question, i need to clone a select box, or add on the fly the class “select” on a select box, how i can force the build of the design ? I test trigger hide and show bug that’s don’t work.

Thanks by advance.

displayinline

Hi!

If you want to clone existing styled selects, you can follow the instructions I gave a in this answer ;)

Also, if you want to style a dynamically created select, just inserting it in the DOM using one of jQuery’s methods (append, insertBefore…) should be enough, the automatic template setup will take care of this. Just make sure that the select has the class select.

And if you want to manually style a select, just call the styleSelect() method on it (also make sure it has the class select on it):

$('#new-select').addClass('select').styleSelect();

Tell me if you need more details! ;)

Hi- My firefox just updated to current version, and it now has a pretty serious issue with your select class.

Any elements with class=”select” remain focused once clicked. This even happens in the help documentation page you provided, so it isn’t a coding error. Since I’ve just started with this template, I can’t be sure it was the firefox update, but it is definitely firefox specific.

What happens is that the select elements never lose focus, even as other elements gain focus. This is true even when I add .blur() methods to try to clear them out. (You can tell they still have focus, even when on another element because they still have the blue highlight around them).

What’s worse is that if you have a select element with class=select above an element where you type in text (standard input or text area) it will try to select the select option (if available) that starts with that letter the user just typed in the standard input. Obviously this makes the form entirely unusable.

This only happens with Firefox, and only with class=”select” (other selects work normally).

Any ideas?

displayinline

Hi!

I noticed this behavior too recently, it looks like Firefox has dropped its previous correct support for focus handling on non-input elements… Maybe for performance concerns, or for more strict compliance to standards, I don’t know.

I already started working on this, and I managed to fix most of these issues, you may try to download the latest version of the form plugin here. Tell me if it fixes your issue too! ;)

Nevermind my last post, I found the details in another posting.. They really should have a search feature in the comments! :)

Got a question, in the RTL version, everything is BACKWARDS!? This is causing some issues for me.. When I type in an email address, the @ gets put in from of the word till you finish typing your email address. In input fields things get reversed (i.e. “123 Any Street” becomes “Any Street 123”, also “Avatar (.jpg)” becomes “)Avatar (.jpg”, “Question?” becomes ”?Question” and many other issues like this)..

This makes the RTL version completely unusable for me as my visitors will get really confused.. Any way to fix this?

displayinline

Hi again!

I saw your message after replying to the previous one ;)

About the RTL version, it is intended for Right To Left languages, such as arabic, thus it won’t work well with western languages. If you want to reverse the layout (menu on the left and shortcuts on the right), just add the class reversed to the body element. You can even do it dynamically if you want to allow your users to change it:

$(document.body).toggleClass('reversed');

You will find more on this in the documentation, in Template basics / How the template works / Basic markup explained.

Tell me if you need more details! ;)

RodRod Purchased

First great job! So sorry if this question has been ask and answered, it is really impossible to try to read 804 comments…

I’m working on the inbox,(which is awesome) but i cant figure out how to change the default ’.panel-content’. I cant get the ‘loadPanelContent’ in the content-panel.js to fire…

I’m passing a variable to the page(inbox) to load a message and replace the default content… Not having a problem from with-in the page but cant get it to work from the $(document).ready… Any help would be great…

Again Great Work!

displayinline

Hi, and thanks! :)

About your issue, just make sure your document.ready callback is defined after the content-panels script link, otherwise it will fire before the plugin has started.

If this is not the issue, I just need some more details to help. Can you show me some of the code you use? This will help me understand how you want it to work ;)

RodRod
RodRod Purchased

i was addressing the prototype wrong… In case any one else would need it, here is what I did:

$(document).ready(function(){ var url = ‘mypage.aspx?m=< =messageId >’ $(’.content-panel’).loadPanelContent(url, ’.content-panel’, ’.panel-navigation’, false) });

I had grabbed your updates for Entypo and added them to my 1.4 template. It worked in general, but I did find that there are some references to the Entypo fonts in places other than the style.css file, such as the CSS for the DataTables plugin. Just wanted to help make sure it’s all in there for version 1.5! Thanks.

ListingWareBob

It may have something to do with how on Entypo’s website they are using the HTML code (for example, ???? for ‘phone’ instead of U+1F4DE). As I said, it’s a little above my head, but I feel like the solution is so close!

displayinline

It works on the iPad, but if you open it on Safari desktop, many icons are missing (at least on Windows). And on Android, the default browser works fine, but Chrome has the issue too.

The HTML codes work sometimes, but unfortunately they can’t be used in pseudo-elements (before and after), who are used to display the icons…

ListingWareBob

OK, I guess that particular avenue of inquiry is exhausted! I did go download Safari 5.1.7 for Windows and it’s not showing them properly. Safari on the iPad (first gen) is halted at 5.1.1, so I guess it’s just anything higher than those that will work. Safari 6.x on Mac does work fine.

kinamori Purchased

Hello,

Is there a simple way of having a “select all” option in a multiple selection check list, in which all the options will be checked? Similarly, is there a way of having an option to “deselect all” as well?

displayinline

Hello!

Sure, you can use a simple jQuery command for this, for instance:

var select = $('#my-select');

// Use one of these lines
select.find('options').prop('selected', true); // Check all
select.find('options').prop('selected', false); // Uncheck all

// Refresh styling
select.change();

You may use a link or an image next to the select to trigger this code.

Hope this helps! ;)

utrdbaeu Purchased

Hi!

I’m having issues with selects (class=”select”) and switches (class=”switch”). On some pages the form doesn’t POST anything from from elements with these two classes. I can check the value of the field with onSubmit, but then the field doesn’t get POSTed.

What am I missing?

Bostjan

displayinline

Hi!

It is the first time I hear of such issue… Does it happen in every browser? If you have an online demo I may check, I will see if I can find what’s wrong ;)

utrdbaeu
utrdbaeu Purchased

Did you recieve the link to demo site? You can email me at_ info at utrdba dot eu

displayinline

Hi,

Sorry, but I did not get your mail. Can you send it back? Please use the contact form on my profile ;)

sorry for not understanding your answers to previous questions regarding tab links. I’m trying to create a link outside of tab area to open a tab. Could you be more specific on how to accomplish? So for example, I have this:
<a href="what do i put here to open tab-2?">tab link</a>
  • Essentials
  • Secondary

Thanks for your help!

Default-user

sorry again…how do i ‘call that’ ($(‘a[href=”#tab-2”]’).click();)

displayinline

No problem ;) I wanted to show you an example, but the comment system messes with the special characters, so here is a link:

http://pastebin.com/yk1Jze3L

Note that inside link/button attribute, the double quotes of the code I gave you need to be escaped.

Hope this helps!

Default-user

perfect…noticed that the href needs to be an onclick to work in IE. Thanks!!!

when I open for editing in dreamweaver not see the design view, it is just showing the split black and white text without proper alignment, etc.. Is that so? Sorry for the amateur question, ok? I’m a programmer but I am still starting in css.

displayinline

Hi,

The design view of Dreamweaver probably has some issues rendering the template complex responsive layout – it is intended for simple pages edition. You should rather use the code view, and preview your pages in your favorite browser.

Tell me if you need more details ;)

freelabrasil

You recommend me some, even if paid, which is good for editing and rendering that lets you see the page in real time? It may even be what you use to create the template. Thank you.

displayinline

Actually, there are very few IDE who provide WYSIWIG for such templates… In fact I don’t know any.

As most developers, I use a text editor (Sublime Text 2) for coding, and preview the result in my browser.

Hi DisplayInline:),

Sorry to bother you again, i’m having a couple issues…one of which I’m sure is an easy fix but I can’t figure out how to do it.

Issue #1 What would be the most efficient way to hide (or clear) the present notify messages when a link is clicked. For example, I would like to show the notify messages on a specific page, and then hide or clear them when the user clicks a link to some ajax loaded content.

Issue #2 My second issue still has to do with the double images appearing in Android 4.0. I am desperately in need of a fix for this as many of my users use this platform. I have searched everywhere and cannot come up with a fix :(. I added the updated Modernizr with no luck. I would definitely be willing to pay you to help me fix it. Please let me know if you have any ideas.

Thanks for everything you have done..you really are a lifesaver!:)

displayinline

Hi!

Here are my answers:

1 This is not documented, but you can call this simple code to close all open notifications:

$('.notification').fadeAndRemove().trigger('close');

2 This is really an annoying bug… Some users have reported that updating Modernizr solved the issue, but it does not seem to work for everyone. The lib still fails in some cases. A simple workaround (at least to wait until it get fixed) is to edit setup.js, find this line:

if ($('html').hasClass('no-generatedcontent'))

And change it to:

if ($.template.ie7)

This will make sure this fallback only triggers for IE7 (for which it was mostly intended), and not for Android.

Hope this helps! ;)

Default-user

PERFECTION! Thank you so much!!! You fixed both problems!!!

displayinline

Glad I could help ;)

heubel Purchased

Using iPad and Safari when I click to “add bookmark” and choose to “add to home screen” it creates a Developr icon.

Questions:

1) How to personalize the icon? Are there some standards we have to respect?

2) When I click any link inside the page it opens a new Safari instance and asks for login, how to avoid it and make all href links to open the pages as an application?

Many thanks for the great work

displayinline

Hi,

1) You can use the included iOS Icon Kit to create your own icon (in the folder Psd/Elements), all required sizes are included. Then just replace the default ones in img/favicons – you may need to delete and re-create the bookmark to see the new icon on your device. You will find more instructions on how to create custom favicons in this article.

2) I added some code to handle this in the latest update, here it is:

// Support for webapp mode on iOS
if (('standalone' in window.navigator) && window.navigator.standalone)
{
    $(document).on('click', 'a', function (event)
    {
        var link = $(this),
            href = link.attr('href');

        // Do not process anchors
        if (!href || href.indexOf('#') === 0)
        {
            return;
        }

        // Do not process if AJAX navigation link
        if (link.hasClass('navigable-ajax') || link.hasClass('navigable-ajax-loaded'))
        {
            return;
        }

        // Check target
        if (!(/^[a-z+\.\-]+:/i).test(href) || href.indexOf(document.location.protocol+'//'+document.location.host) === 0)
        {
            // Prevent link opening
            event.preventDefault();

            // Open inside the webapp
            document.location.href = href;
        }
    });
}

Just add this in setup.js, inside $.template.init function declaration.

Hope this helps! ;)

Default-user
heubel Purchased

Hi many thanks for your answer, it helped us a lot!

Just a final question. We have updated to version 1.4 but when we load the “application” in iOs, the splash screen is upside down for the horizontal picture, no matter if we position the device -180 degrees or +180 degrees the image always shows up upside down. Where can we fix that?

Many thanks for the excellent job!

Regards!

displayinline

Glad I could help ;)

About the splash screen, it was saved with the wrong rotation: all you need to do is open the file img/splash/ipad-landscape.png in your image editor, rotate it 180°, and save it.

It should display correctly now ;)

rufinus Purchased

Hi again,

how can I, or could you, add the “disabled” functionality to the value input too? I can add the class and i get the changed mouse pointer, but the style doesnt change nor are the buttons disabled.

TIA Rufinus

displayinline

Hi,

I never noticed that before, thanks for reporting ;) I updated the form plugin, now the value inputs won’t work anymore when disabled – get the latest version here.

I also updated the shorthand methods enableInput() and disableInput() to handle correctly this input type:

// Disable
$('#value-input').disableInput();

// Enable
$('#value-input').enableInput();

It will take care of disabling the input and adding the disabled class.

Tell me if you notice any other issue! ;)

poetawd Purchased

Hey man, there is one feature I am missing… that is a splitter (http://demos.kendoui.com/web/splitter/index.html)

This would be useful for, lets say, a interactible table…. you click in a row of the table and in the other pane of the splitter some data would be load…

I am implementing this on my version… but, it would be awesome if you add this as a official feature….

displayinline

Hey,

Nice idea! But I am not sure about adding this to the template, as this probably won’t work fine on touch devices (the handles are too small for fingers) and it would need a responsive fallback for smaller screens. So I think using an external plugin is the best solution ;)

davidwj Purchased

Does the data for the content panel have to be loaded through ajax? Or can I build all my html in one file using different levels and it know how to handle it?

Specifically the gallery listing example you have.

displayinline

Hi,

Actually you can use it the way you want: if you want to skip ajax, just get rid of classes open-on-panel-content and open-on-panel-navigation on your links and just bind some code to your navigation panel’s links to hide/reveal the relevant sections in your content panel.

As long as you don’t affect the content panels wrapper themselves, they will remain responsive ;)

Tell me if you need more details!

subrigo Purchased

Apologies if you get this question frequently. I’m trying to embed jquery in my HTML in a script tag, and it’s not being recognized (although it does work when I load external javascript files). What am I doing wrong? :)

Specifically, when I try to use jquery, I get this error: ‘ReferenceError: $ is not defined’

Thanks, Bart

displayinline

Hi!

You just need to put you script block below the jQuery script itself – otherwise, your code is parsed before jQuery gets defined, and the error you report occurs.

jQuery is defined a the bottom of the file, just look for this line:

<script src="js/libs/jquery-1.8.2.min.js"></script>

Hope this helps! ;)

drgdrg Purchased
drgdrg Purchased

I am using the Developr theme and love it.

one challenge…

We have a form with two SELECT’s. We’re doing an AJAX based on the first (Customer) and want to update the second pull down (website list)

The code works 100% when not styled.

With the theme, my understanding is the SELECTs on screen are really styled spans, and the actual SELECT is hidden.

The problem is that the SPAN that is shown is not being refreshed along with the hidden SELECT.

Is there any way to force a refresh? I’m on Version 1.3

displayinline

Hi!

Sure, this is easy: just trigger the special event to force the styling plugin to refresh the list after you are done changing it:

$('#select').trigger('update-select-list');

Note that most of the time, you will also need to trigger a change event, to update the displayed value:

$('#select').trigger('update-select-list').change();

Everything should work fine then ;)

Tell me if you need more details!

drgdrg Purchased

REMINDER: I’m on 1.3 not 1.4 …

Not to sound remedial here, but if my form is:

<select name=”companyID” id=”companyID”> <option value ….> </select>

<select name=”websiteID” id=”websiteID”> <option value ….> </select>

... </form>

Exactly what would I put where – with ID’s in place

A change in CompanyID should trigger the change in WebsiteID

Thanks :)

by
by
by
by
by
by