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
Related
Currently trying to wrap my head around something in OpenCart. It's been years since I have done anything with PHP so having a little trouble. I'm redirecting clicks of href links in to the same div the page is in but some href links need to be ignored because they add elements to the page. I'm ignoring them with a not() selector via my own class I am adding to links I want to ignore, though having trouble adding a class to some links.
For example on the products form for adding products there's an option tab which lets you add different options such as check boxes and date/time. The drop down menu for adding these options has some href links that I can't seem to figure out how to add a class to.
Here's a pastebin to the product_form.php: http://pastebin.com/Fchxw8XG
Here's a look at the actual pages html through chrome dev tools:
I just need to figure out how to add a class called navtab to these dropdown links so I can ignore them.
So I figured it out, I didn't even need to do anything directly to the URL. Instead I am just detecting when a link is clicked in that div (the option dropdown is the only links in there) and I am adding a class on click and then processing the rest of my script.
Here's what I originally had;
$("#products").on("click", "a:not(.navtab, #)", function (e) {
$("#products").load($(this).attr("href"));
e.preventDefault();
});
So it will ignore any link with the class navtab, but I needed to add the class so before this runs I run this:
$(function(){
var option = $('#tab-option');
option.delegate('a','click',function(){
option.addClass('navtab');
$(this).addClass('navtab');
});
});
I am playing with things here above my head but am desperately trying to learn.
I have an administration page, using jquery I display a hidden div that displays a another page inside.
I do this using:
$(document).ready(function(){
$("a#fadeoutblog").click(function(){
$("#page").fadeTo("slow",0.25)
$("#terms4").fadeIn("slow")
$("#back2").fadeIn("slow")
$("#terms4").load("blogpageload.php")
}); });
So terms4 is the div on the admin page and it diplays the page blogpageload.php!
On this page is a table that displays all the posts of a really simple blog, 'a' delete post a tag and an approve post 'a' tag (which just sets the approved column to 'Y' in the database). What i want is for the page inside this div to refresh when a post in the table is deleted(or the delete 'a' tag is clicked). The problem is that when you click on the delete 'a' tag we are sent to the ammendblogdatabase.php page first so that the post can be deleted!.
I have tried multiple methods but they all have problems!
The main part that is causing problems is that to view this div that contains a page the user must first click on another a tag that uses a jquery to stop the 'display: none;'.
Im not sure what code you may need to see but please ask....
This is the information in the table cell with the delete button:
echo "<a id='refreshblog' href='deleteblogentry.php?username=".$usn."&timeleft=".$tml."'>Delete</a>";
Thank you!
The problem you're most likely having is binding to "future" elements (e.g. elements that will be on the page, but aren't yet). To overcome this, you can use .on() to avoid this.
$('#terms4').on('click','a',function(){
// will bind to anchor elements in #terms4 at the time of execution
// (most likely page ready) and look for future anchors added (in
// the case of .load() completing)
});
From there, you can bind your own show/hide event, maybe call an ajax method that deletes the entry behind the scenes, and make a re-call to .load again and refresh the page.
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/
I am having difficulties in the following problem:
I have a screen in PHP which displays a list of some records when I choose any of these
records (by clicking) it gives me a web site to share the data with this record. So far, it works.
I need to click on some of these records, instead of him
open another page, scroll down the screen and the record data to appear in the same screen, ie without opening another window.
Do you have any idea how to do this?
Thanks
You'll need to have a DIV at the bottom of the page, which will be completed by using an Ajax call and some javascript or jquery.
Without going into too much detail, heres what needs to happen:
User clicks a link which fires off an ajax request.
The backend PHP script takes the ajax call and generates either XML or pure HTML and returns the data.
JQuery or JavaScript on the original page takes the return and populates the empty DIV at the bottom of the page.
Regards
It sounds like you'll need to use ajax to pull this off.
I would personally suggest starting with reading up on the jQuery javascript library if you are not familiar with it already. It provides a very good set of ajax tools to work with.
Create a DIV layer on the bottom of the page. Use a simple AJAX library like this
Create a new php page that will only load a new record based on the recordID and call this page on the onclick method of your link that is now opening in the new window
I would try adding some jQuery to your page to handle this effect.
If you do add jQuery here is a function written to do just that:
http://pastebin.com/SeMHwSgg
Call the script like so:
Where a is the record you are having them click on and href="[some anchor]" located at the spot on the screen where you want the scrolling to stop:
<a id="gotop" href="#" onclick="goTop();return false;">click here</a>
So
Indeed, there is no error, it just does not have the effect that (scroll down the screen and show the record data). For now, it only shows the record open in another window.
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