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
Related
Need a script for my html page that helps me do the following: When i click on a text_head1 a list of lines scroll down, when i click on other text_head2 the last list scroll up and the new list scroll down!
Basically what you need is pure javascript/jQuery.
If you're using jQuery, you can catch the click on your "text_head" element.
Then you add it a class "active" for example and use a function to display the list under the element (like show() or slideDown()).
Then on your next click, you'll search for the class "active" on your "text_head" elements.
If there is one, you can hide the list (hide() or slideUp()), and display the list under the clicked element.
Perhaps what you want is called "accordion". It exists in many UI packages, like jQuery UI: http://jqueryui.com/accordion/
What you are looking for is an accordion effect. A simple google query like Javascript accordion will get you started
I would like to make a website with one page that has inside other pages.
To go from one page to another there's a tab or similar menu, so the page doesn't change, only the inner content.
The inner content has a lot of jquery and php: one has a form to make a search on the left and the results are shown in the center with datatables, so you can search inside the results, order them, etc, etc. When you switch from one content to another I don't want the content to be reset ( example: you make a search and then you go to another page/inner content , when you come back the results of the search have to be still there). One of the tabs has a list( a submenu). When you select something from that list every page has to know and to use that selected value.
I thought the I can make all this with a lot of ajax, jquery ui tabs and php.
My questions are: it's good to make something like that? Is there another way to achieve what I want? Would it be better to make a normal menu with a lot of pages( no more inner content, but diffrent pages) and keep the selected value in session?In this case how can I keep the results?(session again?)
I hope that this question is allowed. Thank you all!
EDIT: I'm not asking the code( I know how jquery tabs and I searched google). I'm asking if it's a good practice to make something like that( one page with a lot of content) or it's better to use more pages?
EDIT 2: I'll refrase my question. I have to make something like this: 10 pages with different content that have php, jquery inside with a menu to navigate from one page to another. When you go from one page to another the searches and options selected in the pages that you left have to be still there, so that when you go back you can see them. One menu has a submenu with a list. When you select something from that list the selected value changes things in half of the pages(what you see inside). How should I do this?(don't show me code, tell me only what should I use to accomplish this)
EDIT3: I looked online and yahoo mail has what I want. The top of the page is allways the same. Then you have a menu: inbox, contacts, calendar. When you click on contacts only part of the page changes ( my inner content as I called it) and the same happens when you click on the other voices in the menu. Inside contacts, if you click on one contact you can see details about that contact, then if you click on inbox and again contacts you can still see the contact that you selected before. How can I achieve this?
You can simple achieve this by using jquery Tab plugin .
or you should create your website template in which you replace content through ajax call.
<html>
....
<body>
<div class="tab_container">
<ul>
<li> Tab 1</li>
<li> Tab 2</li>
</ul>
<!-- integrate nested menu here -->
</div>
<div id="content">
onclick on tab selection display appropriate content here
</div>
</body>
</html>
I would suggest you if simply display content on the basis of tab selection than go for Ui-tabs
If you are developing complex website. and you need multiple menu. than try jquery dropdown menu. For displaying content, overwrite content div on the basis of tab selection using ajax as I have mention in my example.
Here is link for jquery drop-down menu
http://codecanyon.net/item/jquery-css3-dropdown-menu-plugin/996815?ref=jared501
Live Example
HTML is for structure and some simple data explanation.
If you want to make some data you should use something like PHP, ASP...
If you want to have some nice pages with effects use JavaScript and common this languages.
But you don't have exact question so the answer is the common
I'm trying to figure out how to set up an accordion so that a different active panel is displayed depending which link is used to open the page.
If you look at the page I'm working on - http://testing.xenongroupadmin.com/lms/admin/index.html - you can see a navigation bar at the top. If you hover on a selection, a drop down box appears.
The first menu item, 'Course Materials' shows three options - 'Workshops', 'Distance Learning' and 'Learning Resources'. Click on any of these links and the target page opens, featuring a jQuery accordion. The titles on this accordion correlate with the three options in the nav bar.
So, to get to the point, what I want is for the appropriate accordion tab to be open depending on which link is clicked. So if I were to click 'Distance Learning' in the navigation menu, the 'materials' page would load with the Distance Learning accordion tab open.
If the 'Course Materials' link is clicked without choosing an option from the sub-menu, all accordion tabs should be closed.
Can anyone help? My server is set up for use with PHP if any server-side scripting is necessary. Also happy to use Ajax if necessary.
Thanks!
Have your sub menu link to materials.html with a hash tag indicating the panel to open. Like 'materials.html#workshop-slides', then use Javascript to parse location.hash on document ready and open the appropriate panel.
You can use accordions option 'active':
$('#accordion').accordion({
active : 0
});
-1 for closed, 0 for Workshops, 1 for Distance Learning and 2 for Learning Resources
A way to do this in javascript. Pass the active tab reference in the url as #tab-0 (where the number is going to be the index of the tab). Here is a crude implementation to get you started:
$(document).ready(function() {
var a =0;
if(location.href.indexOf("#tab-1")) a = 1;
if(location.href.indexOf("#tab-2")) a = 2;
$('#accordion').accordion({collapsible : true, active : a});
});
If you want to do it from php, then you have to replace the 'none' value with the proper tab index to be opened.
I am looking for a method/trick to DISABLE (not just hide) a horizontal scroll bar. I have search all over and all I have found was "overflow-x:hidden". The issue with that is i have to drag an element from one div to another
im working on a jquery ui based page where a user can drag a div from one container to another container. the first side is dynamically populated with divs from the database. I need verticle scrolling because it's a dynamically populated list, but with horizontal scrolling enable it prevents the divs from being able to be dragged over to the droppable area.
You haven't said, so I will assume you are using jQuery to do dragging. In the jQuery docs on Draggable, there is an option called 'scroll'. If you set it to false, draggable objects will not scroll the window.
This is a fairly common problem. Have a look at this page. It describes a workaround To this problem by appending the draggable to a different element ondragstart and reappending it to its original container ondragend.
I am trying to create a popup when my link is clicked. I have been looking all over and all I could find was a html code like this
<p onClick="confirm('Correct?')" </p>
What I am trying to create is a popup that display a table with name, zip code e.t.c
so basically instead of the popup displaying correct like the code above does?, I want it to display somethings of my own choosing. I am looking for one that has a close button at the top it.
Thanks everyone.
So. You'll need a javascript function named showTable() and a div having an id: popup.
Change code to: <p onClick="ShowTable(ID)" </p>, where ID is the table's ID.
Store the table's values in a javascript array.
The ShowTable should consist of:
function showTable(id){document.getElementById("popup").style.display=block;
document.getElementById("popup").innerHTML=table[id];}
Also, the table[id] should conatin this too: Close popup
And add this function:
function closePopup(){
document.getElementById("popup").style.display=none;
}
To make it more designed, you could use jQuery animations.
Perhaps the option that requires the least amount of work on your end would be using jQuery UI, which has a Dialog plugin. You would need to be somewhat familiar with jQuery, though. Here's the link: http://jqueryui.com/demos/dialog/