in bootstrap nav pills work only for 1st one. I have inserted forms for each nav pill and only shows a blank page.
I have php code inside nav pills and a form. ANy fix thanks in advance
My code:
https://pastecode.io/s/3ghb2xg7
Try removing the fade class from the tab pane div.
Related
Hi this is what I'm trying to do. I have a page, and on that page is a div with a list of posts in it and when I click one of those posts, I would like to display the content of that post, in a seperate div, on the same page. and when I click on another post, the content of the post replaces the first content and so on.
is this possible? and how would I acheive this?
Thanks in advance!
Yes, You can show post content into a specific div element when a link is clicked, without having to refresh the page or going to an inner page.
You can set <div id="single-post-container"></div> div something like this and on click you can append post content inside this element using ajax method.
Please follow this tutorial. They have explained the same method as you want on your site.
Hope this will help you.
Thanks.
this can be achieved using bootsrap modal via attribute. Check this link out where I demo it
https://www.codeply.com/go/gIcBhBLhxW
edit: using wordpress:
I have a menu button called Contact me, that leads to a contact me page.
I also have 8 pages, with a contact me form at the very bottom.
Is there a way to change that menu button name contact me, to scroll down to the end of the page in use, no matter what that page is?!
the difference here is i dont have one constant jump to point, but the bottom of any page the user is currently using.
Set the link for the contact me menu to href="#contactmeform" or something similar, then wrap your entire contact form in a div with id="contactmeform"
This way the navigation link will take you to the element with that ID on the page you are on.
Make the href on the anchor text point to "/contact#contact"
Then add id="contact" on your contact form. This will the hash on the anchor will be used to scroll the page to that anchor point.
<body>
Contact Me
<a name="bottom">
<form id=contactMe>
</form>
</body>
I'm working within Zend Framework 2 and following this tutorial to display and handle form submission via AJAX. Instead of using a jQuery UI modal, I'm using the modal from Twitter Bootstrap 3.
To begin with, I'm just trying to load some dummy content in the modal by specifying a path to a controller action in the href attribute of the modal trigger button.
The view file for the AJAX action I call contains dummy html.
When I click on 'Add Agency', the page darkens but no modal window is displayed although the dummy html does appear in the top left corner of the page. I'm expecting a Twitter Bootstrap modal window to be displayed along with the dummy html within it. When I remove the href tag from the modal trigger button, the modal displays fine.
Appreciate if anyone can help me achieve this simple aim of loading content in the Twitter Bootstrap modal window.
The reason my dummy HTML wasn't being displayed within the modal window was because I wrote the HTML markup for the modal div, along with its inner divs for the header, body and footer sections of the modal. I wrongly assumed that the content I call via AJAX will be inserted into the modal-body div, however the HTML doest not get injected in the modal-body div and because the markup for that div already exists, the dummy HTML appears outside of this and breaks the layout.
So I removed all the inner divs within the modal div and moved them into the remote content, so that the HTML I want to return is enclosed in those divs.
For sake of simplicity, my site has two floated DIV blocks. #Sidebar and #Content. In my sidebar, I have a jQuery Vertical Accordion Menu, which expands. (Duh, it's an Accordion Menu)
Anyhow, when a user clicks on one of the submenu headers, it expands the menu and forces its containing DIV to expand as well.
I'm looking for a way, using jQuery, to expand #Content to the same size as #Sidebar, as #Sidebar is expanding. Is this possible?
I have tried the normal way to make both DIV's the same size, but it does so when the page loads, not dynamically.
Thanks for any help!
Rick
You can bind to the accordionchange event a function like so:
$("#Sidebar").bind('accordionchange', function () {
$("#Content").height($("#Sidebar").height());
});
That should set the heights to be equal when the animation completes.
EDIT: You may also bind it in the accordion initializer by setting the change: field to your function to run when the accordion has changed
Is there a way I can have collapsible list and have the clicked list expand when clicked and stay expanded even when the page refreshes?
I'm using PHP, CSS and Jquery
This is called an accordion, and there is one in jQuery UI : http://docs.jquery.com/UI/Accordion