Buttons

How to make these submit buttons active, since there's no availability of php coding. or are the buttons already coded via javascript?

I too have been trying to get this to work,

I have exported a design and loaded my own php file, then created a js file and uploaded all to server but couldn't get it to work.

Assumed I did something wrong and gave up for now.

If the button is within a form, it should submit the form. However, you might have to set the button as a type=submit for all browsers to treat it that way. If it is not within the form you will need to write some JS to tie the buttons "onclick" function to submit the desired form.

For example:

<form id="someForm">..</form>
<button id="submitSomeForm" type="button">Submit</button>

Since jQuery is already included:

$("#submitSomeForm").on("click", function(){
      $("#someForm").submit();
});

Just a quick and dirty example :)

Saj

I need to link a button to an anchor link on the same page. Please advise.

Also how do I get the form to submit using the button. The button isn't working.

Hi @abdevart,

I think we need a little more info of what your trying to do.

If you are meaning you are trying to target something from a nav link to say the second Hero component on your page, that's simple inner page linking. You would set the HREF value to something like href="#second-hero" then on the second Hero component you add an ID of id="second-hero". Now when you click the Nav link, your page move to the second Hero component.

Regarding a form submission, your form needs to have an action="[some server address]". So you need to know of or work with a server that will handle your forms submission. Something I don't have much knowledge about so I'd recommend creating a separate thread about getting a form to work and hopefully someone with that kind of knowledge like Chris Hackwood(@hackers_84), Jo(@jo), BSS_User(@bss_user) might respond.

Saj

Saj,

Thanks for explaining how to do anchor links.

But I have a problem with the display. The anchor appears under the Fixed Top Navbar and is hidden from view. How would I make it appear just lower than the Navbar?

@bbfi, it's going to depend on what the real problem is and how you have coded your page.

Very likely it seems you might have something like.

<nav>nav link1, nav link2 etc....</nav>
<div id="page1">
  content.....
</div>

Try adding some padding for at least the height of the fixed nav bar so that content displays well enough under the nav.

Other then that kind of an example I'd need to know some more info.

Saj

Thanks Saj.

I incorporated your suggestion plus an image for each state and it works fairly well. You can check it out at Facilities That Have Been Assisted by BBFI.

I had to do a lot of coding to get this page to work due to the varied length of each column because of a different number of prisons for each state. The biggest hurdle was going from 3 columns for large and medium viewing down to two columns for small viewing.

If you want to check out the coding and think that there is a better way, please let me know.

Ok, so I found this script that should solve your problem and work better. Just add it as part of your custom JS file. I got it from this fiddle I found http://jsfiddle.net/ianclark001/aShQL/ I also updated it a little bit. I set it to figure out the navbar height + 5 more pixels for more spacing. And set it not to look at all links but only those within the features class subset.

/**
 * Check a href for an anchor. If exists, and in document, scroll to it.
 * If href argument ommited, assumes context (this) is HTML Element,
 * which will be the case when invoked by jQuery after an event
 */
function scroll_if_anchor(href) {
    href = typeof(href) == "string" ? href : $(this).attr("href");

    // You could easily calculate this dynamically if you prefer
    var fromTop = ($(".navbar").outerHeight() + 5);

    // If our Href points to a valid, non-empty anchor, and is on the same page (e.g. #foo)
    // Legacy jQuery and IE7 may have issues: http://stackoverflow.com/q/1593174
    if(href.indexOf("#") == 0) {
        var $target = $(href);

        // Older browser without pushState might flicker here, as they momentarily
        // jump to the wrong position (IE < 10)
        if($target.length) {
            $('html, body').animate({ scrollTop: $target.offset().top - fromTop });
            if(history && "pushState" in history) {
                history.pushState({}, document.title, window.location.pathname + href);
                return false;
            }
        }
    }
}    

// When our page loads, check to see if it contains and anchor
scroll_if_anchor(window.location.hash);

// Intercept all anchor clicks
$("body").on("click", ".features a", scroll_if_anchor);

Since you have 2 dropdown buttons it got a little confusing on figuring out to also get it to close the dropdown because there isn't a unique identifier to target it appropriately, and I was a little lazy :)

Saj

Saj,

I added the script to my js file but did not notice any difference with how the dropdown works in the page with the script and the original page without it.

I did add a unique identifier for each dropdown menu (menu_for_sm and menu_for_xs-md-lg).

Well looking at the script error your site is getting, I noticed that somehow when you pasted the script it didn't wrap correctly on this line

// If our Href points to a valid, non-empty anchor, and is on the same page (e.g. #foo)

That should be on a single line but the page (e.g. #foo) part ended up on it's own line causing the script to break.

And also it should be within the section

$(function(){
    ....
});

As I look through the script file for that section of code many of the comment lines are wrapping where they shouldn't be causing a broken script just remove it.

Then add this version of it

/**
 * Check a href for an anchor. If exists, and in document, scroll to it.
 * If href argument ommited, assumes context (this) is HTML Element,
 * which will be the case when invoked by jQuery after an event
 */
function scroll_if_anchor(href) {
    href = typeof(href) == "string" ? href : $(this).attr("href");

    /* You could easily calculate this dynamically if you prefer */
    var fromTop = ($(".navbar").outerHeight() + 5);

    /* If our Href points to a valid, non-empty anchor, and is on the same page (e.g. #foo) */
    /* Legacy jQuery and IE7 may have issues: http://stackoverflow.com/q/1593174 */
    if(href.indexOf("#") == 0) {
        var $target = $(href);

        /* Older browser without pushState might flicker here, as they momentarily */
        /* jump to the wrong position (IE < 10) */
        if($target.length) {
            $('html, body').animate({ scrollTop: $target.offset().top - fromTop });
            if(history && "pushState" in history) {
                history.pushState({}, document.title, window.location.pathname + href);
                return false;
            }
        }
    }
}    

/* When our page loads, check to see if it contains and anchor */
scroll_if_anchor(window.location.hash);

/* Intercept all anchor clicks */
$("body").on("click", ".features a", scroll_if_anchor);

after this section of your code

$(document).on('keyup', function(event) {
    if (event.which == 27 && $('.navbar-bootsnipp .bootsnipp-search').hasClass('open')) {
        $('a[href="#toggle-search"]').trigger('click');
    }
});

Or just remove it and add it as it's only script file so it doesn't mess with the other code in there.

I did test the script several times but right now I think they fact the there is a broken version and one that I am trying to do now through the console. It's supposed to be offsetting so that the map images are visible when you click your buttons link and scrolls to the state and map is supposed to be in view too.

Saj

Saj,

I think that I'm getting tired. I am not getting this at all right now. I did notice the problem with the comment lines though.

I'm quiting for the night, but how about this - I'll remove the script and start from scratch tomorrow.

I got confused with the scripts and the part where you said after this section of your code So could you post exactly what I should add as a js file since I will remove the original one.

Thanks.

When you remove that code I'll look at it tomorrow and then rewrite your whole script with it in the place I was suggesting so you can see the difference for comparison. And then we can go from there.

Or if you would like to first try just fixing the comments we can start there as well.

Saj

Saj,

I removed the script and I will wait for your input.

Thanks.

Sorry I just don't have the time right now. The script works but it's not great. You could add it as a separate script file so it doesn't mess up the rest of your script. But there has to be a better script out there and can adjust the position better. The script wasn't designed with the way you have that all laid out.

I'll have to look into this later sorry.

Saj

Saj,

That's okay. If you ever have some free time, your help will be really appreciated.

In the mean time, without the script, the page works but the state maps do not show along with the anchor when using the menu. It's not perfect but at least the name of the state shows correctly.

Thanks for your help.

How can I add the type "submit" to a button? This should be possible even if the button isn't contained in a form. I can find no way to change the "type" parameters in Bootstrap Studio.

Here is an example of some code i did in the past: <button type="submit" class="btn-info search-button"></button>

And this is what I want to change in Bootstrap Studio: <button class="btn btn-default search-btn" type="button"> </button>

Again, how can i change the type parameter? Thanks, Gary

@gary, select the Button and then in the Options pane (top right of the app) click to the Gear Icon, set the Button Type.

Saj

Sweet, thanks Saj! I knew I was missing something!

Gary