1843 comments found

Hi, Purchased your theme. Great Job thanks!

Problem is that I am trying to write a jQUERY CLICK event for the ON / oFF switches. [CHECK BOXES].

But no matter what I tried the event is not firing. I have tried various options.

Do you have any solution or perhaps some sample code to help me?

//code— $(‘input[type=”checkbox”]’).click(function(){ alert(‘ok’); var name = this.name; //<----—-this is faster // $(’.container’).find(‘[name=”’name’”]’).toggle(); });

//--- thanks in advance.

Default-user

Sorry forgot to mention: you can have a look at my page using firefox and firebug you should be able to see my code:

http://clockit.co.za/activity/clock.php

Thanks again, pulling my hair out of my head at the moment! :)

Default-user

Update! : ok I got it working!!!

I just changed the code to ..

$(‘input[type=checkbox]’).on(‘change’, function(e) { var active = this.checked; alert(active);

});
and now it is working!

thanks for support!!

displayinline

Glad I could help ;)

Is there a way to use the icons on the left navigation bar to display and hide div layers instead of linking to pages? Should I use custom jquery, or is there something already built in to the template script do this?

Thanks

displayinline

Hi,

Sure, you can do anything you want with these icons, they are just regular links ;) There is no built-in function to do this, but this can be done quite easily with just a few lines of jQuery:

$('#icon-id').click(function(event)
{
    event.preventDefault();
    $('#some-div').show();
});

Let me know if you have any other question!

Hello,

Been using this theme for a little while now. Everything is pretty great except that I discovered a behavior in the integration with jQuery validation engine that is blocking us on further progress.

Let’s say that you have a wizard and that wizard has a collapsed details block, created using a details tag and including js/lib/jquery.details.min.js, Let’s go on to say that the details block has a required field in it. If you click the Next button while the details block is collapsed, validation does not occur in the details block. But, if you click the Next button while the details block is expanded, validation occurs correctly. This leads to unusual behavior if we have several details blocks and the user is free to expand or collapse them at will.

Is there a way that we can validate both collapsed and expanded details blocks in wizards when the user clicks Next?

This behavior can be reproduced by inserting the following example code into the form-wizard.html example after the Gender div:


<div class="field-block button-height">
    <details class="details">
        <summary class="with-small-padding" tabindex="0" style="-moz-user-select: none;" role="button" aria-expanded="false">Configure Optional Data
        </summary>
        <div style="display: none;" class="with-padding" xmlns="http://www.w3.org/1999/html">           
                <legend class="legend">My optData</legend>
                <div id="optData" class="button-height margin-bottom">
                    <div class="basicoptData with-padding">
                        <p class="button-height ">
                            <label for="blah" class="label required">This optData</label>
                            <input name="blah" id="blah" class="input float-left mid-margin-bottom validate[custom[number],min[0],max[10],required]" 
                                   size="15" maxlength="undefined" type="text">                        
                    </p></div>
                </div>
        </div>
    </details>
    </div>


displayinline

Hello,

This is the expected behavior of the plugin, it allows validating only the displayed step. But indeed this is not convenient for hidden children elements. Here’s how you can fix this, by using a couple internal template emthods:

// Triggered for each validation
$('form').on('jqv.form.validating', function()
{
    // Get active fieldset
    var fieldset = $('fieldset.active');
    if (fieldset.length)
    {
        // Show all elements
        var hidden = fieldset.find('input').not('[type="hidden"]').tempShow();

        // Hide back after validation
        setTimeout(function()
        {
            // Show only blocks with no error
            hidden.not(hidden.has('.formError')).tempShowRevert();
        }, 0);
    }
});

Hope this helps! ;)

Default-user

That did the trick. Thanks!

Hi, on iphone last wizard step (4th) goes in next line. so my question is 1) How to remove legand on mobile device. How i use this “hidden-on-mobile” class? 2) Can you please , provide information or code to upload Avatar image on server via php. 3) I want to use adobe flex page for one of menu which resides at left side in our case .So How to achieve this? Is iframe is optimal solution to this and if yes how we can implement in our template. or other solution is welcomed always ! eg – https://www.dropbox.com/s/ysh2ce2ohen1dol/flex_wizard.jpg

displayinline

Hi,

1) If you want to hide the steps block on mobile layout, add this at the bottom of your page:

$(document).ready(function()
{
    $('.wizard-steps').addClass('hidden-on-mobile');
});

This will add the class hidden-on-mobile after the wizard is initialized.

2) Well, this is out of the support range for this template, but you can find many tutorials on this subject ;)

3) I have never used Flex before, but the iframe seems to be a good solution. The implementation details depends on your project, so I can’t give a comprehensive solution, but you may either use CSS or JS to control it. Also, keep in mind that iframes are not always well handled by smartphones – make tests to ensure this is the right solution.

vsrm Purchased

Hi,

Is there a way to display Form fields in 4 columns (Caption, Field, Caption, Field) and also it should be responsive? i.e if there is no space then the [Caption, Field] combination should listed in individual Rows.

Basically looking for a Table layout with 4 TDs but for this theme and also responsive.

Thanks in advance.

displayinline

Hi,

Sure, you can mix responsive columns and inline form labels, something like this:

<div class="columns">
    <div class="six-columns twelve-columns-mobile">
        <p class="button-height inline-label">
            <label for="input1" class="label">Label</label>
            <input type="text" name="input1" class="input" value="">
        </p>
    </div>
    <div class="six-columns twelve-columns-mobile">
        <p class="button-height inline-label">
            <label for="input1" class="label">Label</label>
            <input type="text" name="input1" class="input" value="">
        </p>
    </div>
</div>

Hope this helps! ;)

shemz Purchased

Hi login.html does not seem to be responsive. I tried setting max-width to the container div and the form elements, but then li elements misbehaved. Any suggestion on how to do it?

NVM, solved with this code.

$( document ).ready( function( )
{
    if ( $.template.mediaQuery.isSmallerThan( 'tablet-portrait' ) )
    {
        $( '#container' ).width( $( window ).width( ) - 50 );                
        $( '#login' ).width( $( container ).width( ) - 100 );        
        $( '#pass' ).width( $( container ).width( ) - 100 );            
    }
});

The pixels are random guess values, but it works.

Default-user
shemz Purchased

Nope that ugly hack does not work as intended. The form fields are resized, but so does the text area as well, and only a few characters are displayed. For example, as placeholder, it just shows “log”, but not the entire text “login”.

Any idea how to solve it?

displayinline

Hi,

Actually, login.html is designed to fit even on older smartphones screens (such as iPhone 1-4). Smaller devices will just need to scroll horizontally, but they are probably used to it if their screen is that small ;)

If you want to make the form fluid, the max-width option is the right solution. For the inputs size, I think you should use this solution instead, it does not need JS and should give better results. And is the viewport is really too small, simply hide the icons, you will save a few pixels.

Let me know if you need more details! :)

Hello, do you know if this theme has been developed into an intranet app? and if there is anyone out there who has a link of what this theme can do?

displayinline

Hello,

Some people have reported doing so, but they never gave me a demo link, sorry! Maybe if some of them read this, they may contact you, that’d be great! ;)

ahking Purchased

I want to use the Content Panel to load different pages, by using the link. (example: <!-- This link will open on the content panel -->) <a href="content.html" class="<strong>open-on-panel-content">Link</a>

Using the <!-- Main content will be loaded here --> <div class="panel-load-target scrollable" style="height:400px">...</div>

It will not load the page into the content area. Am I missing something?

displayinline

Hi,

It seems you have a typo in your class name, use this instead:

<a href="content.html" class="open-on-panel-content">Link</a>

It should work fine then ;) Keep in mind that this will only work for links inside the content panels. For any other case, you can use the content panel API described in the documentation.

Let me know if you need more details!

Issue: We have implemented Wizard on one of the pages on our site. It has got 4 steps. Based on a values (bSkip) (which gets populated on page load), if its “true”, if the user is on Step 1, we want to skip the step (Step 2) and goto step 3 straight. The same is applicable if a user is on step 3 and wants to go back, and if the variable= true, the user should go straight to step 1. Also if the variable (bSkip = false), the wizard should work normally, that is the user will progress the step in sequence.

Example bSkip = false; a. STEP 1 -> STEP 2 -> STEP 3—> STEP 4 b. STEP 4 -> STEP 3 -> STEP 2—> STEP 1

bSkip = true; a. STEP 1 -> STEP 3 -> STEP 4 b. STEP 4 -> STEP 3 -> STEP 1

Below is the wireframe of the page
<div id="dSpace" class="with-small-padding">                       
    <apex:form id="frm" styleClass="block wizard">           
        <h3 id="dBanner" class="block-title">Prescription Info </h3>
        <!--==== STEP 1: start ====-->              
        <fieldset id="fs1" class="wizard-fieldset fields-list">                    
            <!-- FURTHER HTML CONTENTS HERE -->
        </fieldset>
        <!--==== STEP 2: start ====-->              
        <fieldset id="fs2" class="wizard-fieldset fields-list">                

            <!-- FURTHER HTML CONTENTS HERE -->
        </fieldset>
        <!--==== STEP 3: start ====-->              
        <fieldset id="fs3" class="wizard-fieldset fields-list">                    
            <!-- FURTHER HTML CONTENTS HERE -->
        </fieldset>
        <!--==== STEP 4: start ====-->              
        <fieldset id="fs4" class="wizard-fieldset fields-list">                    
            <!-- FURTHER HTML CONTENTS HERE -->
        </fieldset>    
    </apex:form>
</div>
displayinline

Hi,

I am sorry, but this is too much specific to your project, I can’t provide support here. But the solution should be quite simple, by using the wizard API methods such as markWizardStepAsComplete() and showWizardStep() ;)

Can the WYSIWYG handle image uploads?

Default-user

I’m having issues with the file uploader function in IE 11. It looks like the latest version of CKEditor works with IE 11, but the version included in your template does not. Is there anyway you can upgrade your template CKEditor version to the latest version?

displayinline

Hi,

The version included in the template has not been modified, you may simply grab the latest version from their website and overwrite the old one ;)

Default-user

Thanks. I wasn’t sure if their is a license I have to purchase or not. But it sounds like it’s open source.

I have 3 radio buttons on a page. Next to the radio buttons I have a dropdown and a textbox. When they click the dropdown or select the textbox I have jQuery uncheck the radio button and select the radio button next to the element. If I run the jQuery below, 2 of the 3 radio buttons are selected. Can you help?

<input type=”radio” id=”radDateRange” runat=”server” class=”radio mid-margin-left” value=”1”>

<input type=”radio” id=”radPerson” runat=”server” class=”radio mid-margin-left” value=”2”>

<input type=”radio” id=”radMessage” runat=”server” class=”radio mid-margin-left” value=”3”>

$(‘input[id$=radMessage]’).attr(‘checked’, false).change(); $(‘input[id$=radDateRange]’).attr(‘checked’, false).change(); $(‘input[id$=radPerson]’).attr(‘checked’, false).change();

displayinline

Hi,

Without trying the actual code, hard to tell what’s wrong, but here’s a few tips that might help:

  • Give a name attribute to your radio, this will help the browser now which one it should change when one is clicked (but maybe you already did)
  • Select your inputs by using the direct id selector : $('#radMessage'), it will be much faster
  • You should rather change the checked property using prop() instead of attr()read this to learn why

If none of this help, let me know and we’ll look for another solution! ;)

Default-user

That worked, adding the name attribute fixed it. Thanks again. :)

Hello. i have a question. how to disable menuTooltip() on a button that has class disabled?

displayinline

Hello,

This is not possible by default, but it is easy to add: edit developr.tooltip.js, and add this in the function at line 1022:

if ($(this).hasClass( 'disabled' ))
{
    return;
} 

Hope this helps! ;)

We have a tab based form set up to structure the information, of course the user can click on the tabs to navigate to the next, we however want to display a button on the bottom to function as a ‘next tab’. other tab features use the anchor links to call the required tabs which does not work in developr. Can you let me know how we can call other tabs?

displayinline

Hi,

Sure: you can use the tabs’ API with showTab(). For instance:

$('#some-content-block').showTab();

You can call the method on the tab content-block or on anything inside it.

Let me know if you need more details! ;)

Another somewhat odd question for you!

I have created two multiple selects that you can use buttons to move things between, but when I right align the content of the list, the scroll overlay cuts off the words :(

I tried to decode and change the form.css for the select class, but only succeeded it making things worse. How can I move the scroll overlay from the right side of the multiple select to the left side?

Default-user

Seems to be working great! Thanks so much!

Default-user

Well….almost great :) We are back on 1.4 and the new input.js file seems to be newer, and is missing a bunch of code from the select classes. Consequently all our select dropdowns now won’t hold a width we set via inline style :) Did selects get split out into a new file, or do we need to upgrade the whole project to a newer version of Developr?

displayinline

You just need to upgrade the plugin’ file (developr.input.js) and all select-related styles in form.css (or the whole stylesheet). Both are required for the new version to work ;)

Hello there ! Thanks for the great work. I have one tiny issue with DataTable-simple.css where sorting arrows do not display on IE8.. Any idea?

displayinline

Hi,

You just need to change the float value of .modal-actions from left to right in css/styles/modal.css (around line 110).

Hope this helps! ;)

Default-user

Hi ! Thank you for your answer. This is what I had tried before. Unfortunately, even if the close button is in fact on the right of the modal box, on IE8, the modal spreads to fit the entire width of the page, which I don’t seem able to fix. Any idea ?

displayinline

Well, I made some tests and it seems to work fine here… Hard to tell why it doesn’t work for you, IE8 can be quite frustrating sometimes.

Do you have an online demo I could check? If I can see the issue, I should be able to help ;)

When working with the Wizard, the legends are not all being displayed, only the legend for the current frameset, regardless of the wizard’s width. In the demo, the labels are always displayed. I would like all of them to be displayed. I know that I had this working initially but, for the life of me, can’t recall what I did to make them hide. I’m on 1.4, btw, and using the automated setup (class=”wizard”). I tried to set the force option via manual setup but that didn’t work, either.

How can I get all of the legend labels to display? Thanks!

displayinline

Hi,

This may happen if you deleted the wizard styles in the last media query block in form.css. Here’s what you should see at the end of the file:

/* Wizard */
.full-page-wizard {
    text-align: center;
    }
    .full-page-wizard > .block {
        text-align: left;
        margin: 0 auto;
        max-width: 800px;
    }
    .wizard-steps > li {
        width: auto;
        text-indent: 0;
        padding: 0 9px 0 65px;
    }
    .wizard-step {
        margin-left: -32px;
    }
    .wizard-fieldset:last-child,
    .wizard-enabled .wizard-fieldset.active {
        -webkit-border-bottom-left-radius: 5px;
        -webkit-border-bottom-right-radius: 5px;
        -moz-border-radius: 0 0 5px 5px;
        border-radius: 0 0 5px 5px;
    }

If they were deleted or modified, adding them back should fix your issue ;)

jdevin Purchased

Hi there,

I’m sure this question has been asked before – but there is no real way I can figure out how to search the comments so I figured I’ll ask the question.

I’m using version 1.6 of developr – with the accordion function with toggle mode enabled. How do I set it up so that the accordions start off closed (rather than the first one open). Also is there a way to open a specific accordion element using javascript?

Thanks!

displayinline

Hi,

If you want to have all steps closed at first, you can use the toggle mode, simply by adding the class toggle-mode to the main DL element.

And to open a specific element, simply simulate a click on the corresponding DT:

$('#some-dt').click();

Let me know if you need more details! ;)

Default-user
jdevin Purchased

Hi there – thanks for this – so the click event works – but having toggle-mode on my main dl is what I had originally – and the first item is always open. I want it so that when the page loads – all items are closed.

displayinline

You are right, this does not work as expected in this case… Here is the fixed plugin, it should work fine now ;)

Let me know if you still have issues with this!

Will this work with a MSSQL server?

displayinline

Hi,

This is only an admin skin for developers, not a working admin. You need to implement it on top of any CMS/framework, so you can make it work with whatever you want ;)

Let me know if you have any other question!

I am not sure if someone asked this earlier, but search is not available, so I will ask.

I moved to a new server, and half of the icons are garbled with special characters instead of the icons. My PHP version is 5.3.3 if that matters any.

Is there a known issue and a fix?

Default-user

Found the fix. Default language set to UTF-8

displayinline

Hi, glad to hear you already found the solution! ;)

Hi,

I tried to open your demo site in iPhone 5 running iOS 7. Menu button at the top right corner doesn’t seem to work. I was just wondering if this is an existing issue with iOS 7.

Thanks!

displayinline

Hi,

Everything seems to work fine here, can you tell me more? The menu just doesn’t open, or is this anything else? If I can manage to replicate the issue I should be able to help ;)

by
by
by
by
by
by