1835 comments found

Issue: Demo Page URL: https://medtexter.stripe01.cs12.force.com/mtSignInNew2

The wizard section is displayed in full page width, we want the wizard to be in center (width wise), some thing like attached screen. Not sure what is going wrong with the demo page which is forcing the wizard to appear in full width.

https://dl.dropbox.com/u/14985576/Issue%20copy%202.PNG
displayinline

Hi,

You just need to add the class full-page-wizard to the body element, as in the example file ;) Your wizard block will be centered then.

subrigo Purchased

Greets!

I’m having an issue where the icons are really large in IE9. If I specify an icon size class, they’re even larger. Any idea what may be causing it?

displayinline

Hi,

Well, hard to tell what causes this without seeing the actual page… IE has a weird handling of em-sized pseudo-elements – it changes from one version to another – so I had to include hacks to fix it. Did you make sure none of them were removed in style.css?

Also, make sure your document has a valid HTML5 doctype at the beginning of the file (there should be absolutely nothing before):

<!DOCTYPE html>

Tell me if you still make them right! ;)

Default-user
subrigo Purchased

No luck.

I haven’t done anything with style.css, and the doctype is the first thing in the file. Here’s a link where you can see the issue in IE9 (the icons on the left are too large):

http://dev1.dev.subrigo.net/

Thanks!

Bart

displayinline

Well, these font-icons size issues with IE have been driving me mad… They seems to occur for no reason. You may try to download the update I made to include the new Entypo Icon set (it has now 238 icons), as it includes some improved IE hacks and seems to work fine here with every version I tested.

Just overwrite the existing files with the ones in the zip, and clear your browser’s cache.

Tell me if this solve your issue, and if not, I’ll be looking for another solution ;)

saruman Purchased

Hello display. In constellation theme you made a class for inputs elements in a form when they’re required. In this theme there is a class to do that? I looked into the docs but I don’t find anything like that.

Let me know.

Thank you.

saruman
saruman Purchased

Yes, but I’m testing and not working :(

<label for=”name” class=”required label”>Name</label>

displayinline

Just apply the class to any parent of the label – for instance:

<p class="button-height inline-label required">
    <label for="input-2" class="label">Label</label>
    <input type="text" class="input" value="">
</p>

If you want to have the option to apply it directly on labels, add another selector:

/* Required style */
.required .label,
.label.required {
    color: black;
    }
    .required .label:after,
    .label.required:after {
        content: ' *';
        color: red;
    }

Hope this helps!

saruman
saruman Purchased

Yes! Works perfectly :) thank you :D

Hi – Does the admin theme include the front end templates for the Home page, Features, Login, etc?

Thanks -

displayinline

Hi,

Sure, the landing page you can see here is included in the package, as well as the corresponding PSD ;)

im a huge fan of your work so I hope this wasnt answered already.. can yousetup a page like you did for constellation where there are links to the different features? there are SOO many features that it is hard to get an overview of them all by clicking around the demo or viewing the psd.

Also, in constellation there was a way to see each feature individually in the docs and at the top you listed the dependant css files. I might be blind but is there anything like that in developr?

Hi there:)

I don’t know if this is a bug or not, but I am trying to find a workaround. I have applied the “scrollable” class to the #shortcuts menu, so that I will be able to scroll it down while using a tablet…..the problem is that this class eliminates the small carrot arrow at the top of the open shortcuts menu when viewing on mobile (#shortcuts:before)...

I tried the following with no success… if ($.template.mediaQuery.name === ‘desktop’) { $(’#shortcuts’).addClass(‘scrollable’); } });

Any Ideas?

displayinline

Hi!

Sure, you can take advantage of the template responsive events to enable or disable the scrolling, depending on the active layout:

$(document).on('init-queries change-query', function()
{
    if ($.template.mediaQuery.isSmallerThan('tablet-portrait'))
    {
        $('#shortcuts').removeCustomScroll();
    }
    else
    {
        $('#shortcuts').customScroll();
    }
});

Note that you must put this before the line $.template.init(); if you use it, in order for this script to catch the init-queries event.

Hope this helps! ;)

Default-user

Works like a charm:) Thanks buddy! You absolutely rock!

ignore my last question, i was dumb.

On the wizard I am trying to change the color of the bar with the step numbers and legend field from the brownish color to the blue gradient.. can you tell me what element I should apply the color class to please?

displayinline

Hi!

These were not dumb questions, I would have answered to you ;)

On your question about how to change the background color of the wizard steps, there is no built-in method for this, but you have several options:

- If you just want a particular wizard to have a blue bar, just add this script at the end of your file:

$(document).ready(function()
{
    $('.wizard-steps').addClass('blue-gradient');
});

- If you want all wizards to use a blue steps bar, edit the file css/colors.css remove the selector from the anthracite gradient grouped declaration (line 400) and add it to the blue gradient grouped declaration (line 549).

- You may also edit the wizard plugin (js/developr.wizard.js) and add the class directly on the steps list UL (at line 109), or even add a new option to pass a custom color class.

Hope this helps! :)

Default-user

tyvm.. that helped a lot for real.

koza95 Purchased
Hello I have one more issue :( When running it as iOS Web App. Please check screenshoot below: https://www.dropbox.com/s/uh1bx0bxvyqz7qy/Photo%2005.02.2013%2018%2009%2055.png I hope You can help me to fix it :)
Default-user
koza95 Purchased

You are writing abou that too big height of box?;) It happens only when in iOS Web App mode.

displayinline

Sorry, I just realized my explanation was not really clear: this issue is related to the font icons on the left of the inputs, because they happen to be too large for a short time, pushing the inputs next to them on the line below – all of this precisely when the script that controls the layout detects the size of the form.

If you set a fixed size, this won’t happen anymore, and the login form should display fine ;)

Default-user
koza95 Purchased

Thanks working now ;)

Hello,i just bought you theme. I was the one which i was searching for quite a long time. It is just awesome. You have provide the event and calender. I want to know how to add events to the calender or the event list.

Your help will be greatly appreciated.

Hello,i just bought you theme. I was the one which i was searching for quite a long time. It is just awesome. You have provide the event and calender. I want to know how to add events to the calender or the event list.

Your help will be greatly appreciated.
displayinline

Hello, and thanks! :)

You will find all instructions in the documentation, in the section Features reference / Agenda and calendars, along with ready-to-use markup examples.

Remember that this template is only a skin, so if you want to dynamically add events, you will need to code a function yourself, for instance in the browser using jQuery of server-side using AJAX calls.

Tell me if you have any other question or if you want more details!

Default-user

Thanks for the reply.. Can you please show me example(a demo link with the js code) to dynamically add events, which i can use with this skin.

saruman Purchased

Hi display. Me again :)

I have some issues with the error bubble of the validationEngine on a modal window. The content (form) is loaded with ajax, but when I press the “Guardar” (Submit) button some bubbles are showing inside the content of the modal insted outside… you know what I mean :)

Check the image for the reference:

Let me know :) thanks.

displayinline

When the modal is open, right-click on the content and click Inspect: in the developer panel, locate the div with the class modal-content, it should have none of these other classes: modal-scroll, custom-scroll.

If it has, it means to plugin it not correctly updated. If not, this might mean something else than the modal is causing the issue. Inspect all elements inside your modal (for instance, the form, any wrapping DIV or FIELDSET) and in the computed styles (most often on the right column of the inspect tab, above or below the CSS stack) check if any of them has an overflow value different from visible.

Also, can you show me the exact code you use to open the modal?

saruman
saruman Purchased

Ok…. I checked and none of those classes appears on the div where is modal-content…. I’m sending you an email with the screenshot of the code with the inspect. Also, the javascript of that modal. Let me know in this way or by email any comments.

saruman
saruman Purchased

Works perfect now after we talked by email :) Check this out:

You are the best!

Hello, I recently sent you a message with some IE issues that I am currently having with this theme. Please review and let me know if you need any other information

Mainly we are having issue in displaying left menu and right panel in IE. Please download this document that contains the screenshots taken from different browsers (IE, Firefox and Chrome). I have highlighted the sections that are not properly displaying in IE browser.

Download here: https://www.dropbox.com/s/lroghffh6x3jqqi/ieissues.pdf

Thanks for your help

displayinline

Hello,

This issue happens because the older versions of IE have no support for CSS media queries: the template uses a javascript polyfill to enable them, Respond.js.

What seems to happen here is that the polyfill fails to load, probably because of a wrong path, so the template displays in the mobile layout in IE, even for wider screens. You may solve this by editing js/setup.js and setting the right path to the folder where the polyfill is located at line 123: you may either use

  • An absolute path:
    respondPath: '/myApp/js/libs/',
    
  • Dynamic path detection:
    respondPath: $('script').last().attr('src').replace(/[^\/]+$/, '')+'libs/',
    

If you can’t find the line, make sure to upgrade to version 1.4.

Tell me if you need more details or if you still have issues! ;)

Hello, I am trying to use the login-full.html,

else
                {
                    // Remove previous messages
                    formWrapper.clearMessages();

                    // Show progress
                    displayLoading('Checking credentials...');

                    // Stop normal behavior
                    event.preventDefault();
                                      $.ajax({ 
                        type:'POST',
                        url:'login.php',
                        data:'&user='+user+'&password='+pass,
                        success: function (result) {
                            if (result == 'success') {
                                document.location.href = './index.html';
                            }
                            else {
                                formWrapper.clearMessages();
                                displayError('Invalid user/password, please try again');
                            }
                        }

                        });
    }
            });

and the login.php as


$user = $_POST['user'];
$password = $_POST['password'];

if($user == 'admin' && $password == 'admin')
{

    echo "success";
    exit;

}else{
    echo "error";

}

?>

The problem is its always showing always “Invalid user/password, please try again”. Is der any probz with the code? Please help

displayinline

Hello,

Just to make sure, did you check if the correct login.php script path is used? Remember you can use your browser’s developer tools to inspect what’s sent and received during AJAX calls. For instance, in Chrome, hit F12 and switch to the Network tab.

Aside from that, it’s hard to tell what’s not working without testing the actual code and making some tests on it… You may for instance try to dump the content of $_POST to a file to make sure the form data is correctly received:

file_put_contents('form-data.txt', var_export($_POST, true));

Sorry I can’t help more!

Default-user

Thanks i could fix the bugs. Thanks a lot. You Rock.

saruman Purchased

Hi.

I’m trying to add custom options to “confirm” dialog inline but is not working :(

I have this:

<a href="javascript:void(0);" class="button icon-trash with-tooltip confirm" data-confirm-options="{message:'New message here'}"></a>

The custom message is not showing, only the default “Are you sure?” text.

Let me know if I’m doing right.

Thanks.

displayinline

Hi,

The syntax of JSON in data-* attributes is a bit tricky, here is the exact syntax you should use:

data-confirm-options='{"message":"New message here"}'

The message key has no quotes in your code, so parsing fails and jQuery considers this to be a string, not an object. Also, you should rather use single quotes for the attribute, as double quotes are the standard in JSON.

Quick tip: you can use jsoneditoronline.org to build or even just check your JSON syntax.

Hope this helps! ;)

saruman
saruman Purchased

Yes, you right. Sorry for my noob problem LOL

displayinline

There’s no noob problems, only problems you haven’t met yet ;)

Attached are some of the sample screens of different pages on the site, issue encircled in red. The incons show up twice.

Till now this is only happening on android phone/browser not able to replicate on ipad, or iphone or in a browser.

https://dl.dropbox.com/u/14985576/Screenshot_2013-02-05-23-02-22%20%281%29.png https://dl.dropbox.com/u/14985576/Screenshot_2013-02-05-23-08-19.png https://dl.dropbox.com/u/14985576/Screenshot_2013-02-05-23-11-58.png
displayinline

I am surprised, even the second solution gave no results? Mmh… And updating Modernizr should have fixed that too.

What kind of android browser do you use? Chrome or the native browser? Also, did you have the opportunity to test this on another type of Android phone?

For instance, if the second screenshot is from your Sign In process (the link you gave in the other comment), I don’t have the issue on my Galaxy SIII.

Default-user

still having an issue with this. Updated the Modernizr too.

Android Version: 4.0.4 Build Number: 6.1.A.2.55 Mobile Model: Xperia S LT26i

https://dl.dropbox.com/u/14985576/Screenshot_2013-02-13-22-44-34.png
displayinline

This is not an issue, this is the expected behavior: in mobile touch browsers, the system UI for selection is used by default, because it provides a better and familiar experience for the user.

If you want to disable this and use the plugin’s style, set the option styledOnTouch to true (either in the plugin’s defaults or select by select).

This feature was previously disabled for Android browsers, because of support issues, but now it should work fine so it has been enabled by default.

Tell me if you need more details!

Sample URL: https://medtexter.stripe01.cs12.force.com/mtSignInNew2

Issue: Step 1/2/3 of the wizard have dropdowns, though they are implemented correctly but still creating issue while selecting the any of the listed values in them. 1. If user try to select some value the dropdown opens and closes immediately. 2. After repeated try it may stick there for some time but as soon as user try to select any value list over there it closes. 3. Issue only happening on iPod/iPhone/Android. 4. Dropdown for Country (Step 2/3) have search enabled, but it also do not work due to above mentioned issue.

displayinline

Hi,

I found that this issue is related to the form validation plugin, here is how to fix it: replace this line in developr.input.je (close to the end of the file):

hidden.hide();

By this one:

hidden.css('display', '');

It should work fine now, I updated the files in the download link.

Thanks for reporting! ;)

Default-user

QUERY: Dropdowns having long entries as options are breaking the UI of the form. In Order to contain this issue applied Class=”expandable-list” also added style=”width:200px”. Its a porblem only on mobile view with Firefox ANy suggestions?

displayinline

You may do as follow in form.css:

- find the selector .select.expandable-list > .drop-down, and add this property:

max-width: 320px;

- then inside the 768px media-query block at the end of the file, add this style:

.select.expandable-list > .drop-down {
    max-width: none;
}

- and just above the 768px media-query block, add this media-query size:

/*480px*/
@media only screen and (min-width: 480px) {

    .select.expandable-list > .drop-down {
        max-width: 440px;
    }

}/*/mediaquery*/

Now the drop-down will have a maximum width in mobile mode, and none in desktop mode.

It this what you are looking for?

saruman Purchased

Hello, me again :)

I found an issue using textarea with a class autoexpanding on a modal window. Check the image to see what I mean:

Is there a possible fix for that? Let me know.

Thank you

displayinline

Hello!

This happens because your modal window has reached its own max-height. Setting a bigger value will only report the problem, and will not work on smaller screens.

I think you should set a max-height on the textarea itself:

<textarea class="input full-width autoexpanding" style="max-height: 180px;">...</textarea>

You will need to fine-tune the height until it gives the expected result, but I think this is the best option.

Hope this helps! ;)

saruman
saruman Purchased

Helped me a lot! Thank you.

Hi there! I have a quick question, how can I add a custom loading symbol inside a modal when an ajax request is processing?

displayinline

Hi!

Just set the content of the window with whatever you like, it will be replaced when the ajax request completes:

var modal = $.modal({
    title: 'Ajax content',
    content: '<div style="height: 200px; line-height: 200px; text-align: center;"><span class="loader big" /></div>',
    url: 'some-page.html',
    width: 300,
    ajax: {
        complete: function()
        {
            modal.centerModal();
        }
    }
});

The ajax.complete callback is used to center the window once the content is loaded, you can get rid of it if you don’t need it (for instance if your window has fixed size).

And if you want to call an AJAX request on an already open window, just do:

// Open the window
var modal = $.modal({ ... });

/* Later: */

// Set loading content
modal.setModalContent( '<div style="height: 200px; line-height: 200px; text-align: center;"><span class="loader big" /></div>' );

// Load content
modal.loadModalContent( 'some-page.html' );

You will find the various sizes and styles for the loader in the documentation, in Template basics / Generic elements / visual elements

Tell me if you need more details! ;)

Default-user

This was exactly what I needed!! Thanks again for your help! :-D

displayinline

Glad I could help! :)

nikko Purchased

hi, apparently the collapsible plugin is not working with both Safari and Firefox. However it is working with Chrome.

http://dev.esoundz.com/landingpages/drummasters2.php

Any idea why? Even if I run the DOC in Safari or Firefox, the demo Collapsible would not fold/unfold when I click on the header.

displayinline

Hi,

You just need to add the javascript polyfill for browsers with no native support for details elements: js/libs/jquery.details.min.js.

Without it, they don’t know how to handle this type of element.

Tell me if you need more details! ;)

rufinus Purchased

Hi again,

The following problem is a bit off from “using” your great template, instead its more of a JS problem. But if you could take a look, it would be much appreciated.

I started to add some code to have all user interaction with the site is handled via ajax. this works as expected for normal links, but not so for tabs. (its acting kinda strange to be precise)

i registered a setup function like:
    $.template.addSetupFunction(function(self, children)
    {
        $('div.standard-tabs.ajax div.tabs-content > div').on('showtabinit', function(){
            var url = $(this).find('div:first-child').data('url');
            $(this).load(url + '/ajax/1', function(){
                $('.stanard-tabs').refreshTabs();
            });
        });
        return this;
    });

    $('#maincontent').applySetup();

First Problem: if i call the page normaly tab-1 isnt loaded, but clicking on tab-2 loads the content.

Second Problem: if the page containing the tabs is loaded via ajax, tab-1 is shown directly. But clicking on tab-2 leads to loading the content 4 times (according to firebug).

You can see this on http://demo.cwd.at/admin

As you see tab-1 doesnt load (or isnt triggered) tab-2 works as expected.

Now click on the “Ajax Loading Link” above (and have firebug open).

tab-1 is autoloaded with the content. but as soon as you click tab-2 the content is loaded 4 times instead of 1.

It looks like the showtabinit hook is registered more than once.

Any hint/tip suggestion what goes wrong?

I really like the setup function, as you say the lead to less code, but it seems i just dont get them right.

TIA Rufinus

displayinline

Hi!

There is just a little change to make to your code: you should only add this listener on the content affected by the applySetup() call, so instead of:

$('div.standard-tabs.ajax div.tabs-content > div').on('showtabinit', function(){

Use:

this.findIn(self, children, 'div.standard-tabs.ajax div.tabs-content > div').on('showtabinit', function(){

Otherwise, you listener is applied every time the setup function is called, whether it runs on your main content or anywhere else – which is why it your listener gets called several times after a few DOM changes.

About the first tab not being loaded, this is because the tabs plugin initializes it (and so triggers the init event) before your setup function runs. To prevent this, just take your call to $.template.addSetupFunction() out of the document.ready callback in admin.js. And so you won’t need the $('#maincontent').applySetup(); as the initial global setup will take care of applying your setup.

Note that you may even drop the automatic setup and use event delegation:

$('#maincontent').on('showtabinit', 'div.standard-tabs.ajax div.tabs-content > div', function(){
    var url = $(this).find('div:first-child').data('url');
    $(this).load(url + '/ajax/1', function(){
        $('.stanard-tabs').refreshTabs();
    });
});

Tell me if you still have issues or if you need more details! ;)

Default-user
rufinus Purchased

hi!

very nice. with the findIn, after reloading per ajax, on click on tab-2 its still loading twice, but nevermind, using the event delegation as in your second example fixes this too.

thank you very much. your level of support is just awesome.

Rufinus

by
by
by
by
by
by