1 - Accordion style vertical list that expands element (Film # and description) when "+more" link is clicked, and closes the previous open film and description.
2 - Activation of "+ more" shows a photo in separate div, and hides the previous photo that was visible in this separate div.
I have simple code which shows a div and then on click it hides the div but its not working:
Code:
hidediv(divID)
{
[code]....
This is my first little foray into JQuery, so far i'm impressed, having had very little JS experience, I was able to create the result. I wanted very qucikly and easily!
However, I'm having one little niggle...
Here's my code:
This works fine.. ticking the checkbox shows and hides the div. However, if I check the checkbox and refresh the page, the checkbox remains ticked, but the div is hidden. how I can make it work reliably?
We are looking to implement something similar to the navigation found at this site: [URL] When you click on ABOUT, CONTACT, or LAB, the appropriate div within the content-main div shows/hides as appropriate. Fancy. I'm happy to read up on this on my own, but I don't really know how they accomplished this, so I'm not sure what to research. Since the page doesn't refresh, I'm assuming AJAX may be involved? Most importantly, I'm very interested in how their URL structure works. It looks like #about is an anchor that they are linking to. I thought about doing it in PHP, which I'm more familiar with, but I'd rather not refresh the page if I don't have to.
View 9 Replies View RelatedI'm trying to code a menu which when clicking say the 'news' button, a div will appear to the right containing the news, if you then click the button below, say 'information', the news div will be replaced by the 'information' div. I can figure out how to make a single menu item show and hide a div, but I can't for the life of me figure out how to do it for a whole menu.
View 11 Replies View RelatedI have been on this for over an hours now, it is probably something simple and/or stupid, but why doesn't this script work? I have read forums til my eyes are crossed and can't see what I am doing wrong I am new to javascript, but not programming. The point here is to create a function that compares two strings and then shows or hides a div depending on the results of the comparison. I was trying to pass in the name of the two input text boxes containing the text and the name of the div to show or hide (so that it can be used in multiple scenariios.) Right now my error message is that document.getElementById(field1).value is not a function.
Here is the code below..
I expanded upon a script a friend helped me write, to create a simple check box that hides / shows content, as shown HERE. [URL] Unfortunately, I don't have a clue how to expand this, so that I can use more than one checkbox on the page, to open different sections.
<html>
<head>
<title>Title of page</title>
<script language="JavaScript">
function getCookie(NameOfCookie)
{ if (document.cookie.length > 0)
{ begin = document.cookie.indexOf(NameOfCookie+"=");
[Code]....
I've got my accordion working.The html and jq are as follows
<div class="nav">
<h3><div></div>
<h3><div></div>
<h3><div></div>etc..
</div>
$(document).ready(function() {
This hides all divs except the first one (check the site) on load, then whenever I click a h3, it performs as an accordion, sliding the hidden div down and other visible divs back upI want to add another functionality. I want it to be like, if you click on a h3, and the next div is already open, it will hide that div. else, it performs this function. This would be a basic if/else then wouldn't it? I'm new to jq but I've done mIRC scripting in the past and I don't know how the selectors work yet
wrote this code for me:
<script>
var totalWidth = 0;
$("#gallery img").each(function(){
[Code]....
it alerts the width of all my images, great!
But now, I need to add onto that 20px between each image and 104px or so onto the end
Then I need to be able to write it out to the style of the #content div?
here's the site: [URL]
This is probably quite a simple problem but I can't figure out the answer. I'm working on a site that has news stories and events coming in. What I would like is to have the news stories to be styled with squares and events with discs for instance. I might be able to change the actual plug-in so the CSS affects this change, but I just wondered how I could change the list-style-type with jQuery.
[Code]...
so, I can pass a value from a select list to another function which then decides which function to call, but I want to cut out the middleman, and make the values the function calls, and call them directly on the onchange... I imagine something like this:
<select id="select" onchange="this.value">
<option selected value="function1()">Funtion 1</option>
<option value="function2()">Function 2</option>
<option value="function3()">Function 3</option>
</select>
I am using jquery ui to have two connected sortable lists. The first list is available numbers, and the second is selected numbers. Everything with the jquery is working fine. The problem i am having is when i try to get the contents of the selected numbers box, it is empty, even though the sortables are or were dragged to that list. I tried using this.
var response = $("#selected_numbers_box").val();
alert( response );
and I also tried this..
var response = $("#selected_numbers_box").html();
alert( response );
both are empty. What i am trying to do is retrieve the values of the new list "Selected numbers Box".
I have a database driven website, which shows a list of files that have been uploaded by users. I have a script called controller.php, which generates the HTML:
Code:
//excerpt
<?php foreach($uploads as $upload): ?>
<div class="upload">
<p><?php echo $upload['filename'] ?> |
<?php echo $upload['size'] ?> |
<?php echo $upload['type'] ?>
</p>
[Code]...
I've created a accordion with a unorderd list. You cann see this effect on jsfiddle.Unfortunately there are problems with more than one level. A click in this case hide the parent and next click is needed.
View 2 Replies View RelatedI'm using the jquery accordion in order to list all email received/sent. The header (h3+a) shows the object, the content (div) is the mail text.
HTML accordion :
<div id="accordion"><div>
<h3><a href="#">object 1</a></h3>
<div>mail 1 text</div>
</div><div>
<h3><a href="#">object 2</a></h3>
<div>mail 2 text</div>
</div>
<div>
<h3><a href="#">object 3</a></h3>
<div>mail 3 text</div>
</div>
</div>
Accordion script function:
$(function() {
$( "#accordion" ).accordion({
autoHeight: false,
header: "h3",
navigation: true
});
});
I would like to request my SQL database only when i clic on the header of a mail, and avoid to preload all the mails. The other problem, much important in my case, is to mark the mail "read" or "unread". There is a column in the SQL database for this. So, the mail needs to change to "read" state when I click on his accordion's header. Before using accordion, I was using simple link which reloads all the page. I've no problem with PHP/SQL, but I'm not so good in javascript/jquery, or ajax...
SQL request (simplified) :
$sql = "SELECT mail_object, mail_text FROM table_mail ";
$req = mysql_query($sql);
SQL update read-state (simplified) :
$sql_2 = "UPDATE table_mail SET mail_read=1 ";
$req_2 = mysql_query($sql_2);
So, is there any way to execute this code when I click on a header? After that, I'll asking you how to change header style to differentiate read/unread mail (in bold for example, or change background image/color).
I have an accordion list much like the example here : [URL]. Say for instance I have page links under the heading 'Section 2' of that demo above. How can I make it so that when you visit a page from these links 'Section 2' is visible and 'section 1' and 'section 3' are closed?
At the moment I have :
$(document).ready(function(){
$("#accordion").accordion({
active: false,
collapsible: true
});
});
<!-- start accordian menu -->
<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div><ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul></div>
<h3><a href="#">Section 2</a></h3>
<div><ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul></div>
<h3><a href="#">Section 3</a></h3>
<div><ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul></div>
<!-- end accordion menu -->
</div>
What I need to add to make 'Section 2" visible only?
I would like to ask what must i change and in which file / line so i can have instead of on hover and closing automatically the ability to expand by myself and close myself the menu with accordion list choise...the site preview is: [url]
View 5 Replies View RelatedI needed a sidebar menu that, when a user clicks the <h3>, a submenu expands. When the user then clicks on a different menu item, the previous submenu disappears meaning only one submenu can be visible at one time.
Now the code I have at the moment (from jQuery forums) works. It now needs a bit more refining so that it works the way I intend.
When you first load the page, all of the submenus are collapsed which is a real pain as each submenu has 20 - 30 selections.
Is there a way to have them all hidden initially?
Is there a way to get an open submenu to close by clicking on the H3 title again?
Since the site is local only, I posted up a sample on my JSfiddle account.
[url]
This one, which I also found on google, did what I wanted, but without the smooth slide animation. - [url]
When you then click on one of the H3's, it kicks into action and works great!
I have an AJAX script which is used for a "live search" type function.When a user begins to type their search, after 3 characters, my AJAX script jumps into action and shows them a list of possible results.I has worked fine for months, and now suddenly I have found that it is causing a javascript error.I have traced the error down to the "open" call... ie: this.xmlHttp.open("GET", url, true);Like I said, this has worked for ages and I haven't changed these files since I got them working.
View 1 Replies View RelatedHow would I seperate a text string such that it would appear on seperate lines ie. Initial Input: StrMsg = "This is an example of a string that will appear on seperate lines" "Hoping that this fully works, there will be no errors and all will be well" "This is the last line of text."
[Code]..
I am wondering if there is a way to set the list-style img attribute in css to actually be a href to the external .js ??? Or can I set the img attr to a href through the dom using "append"?
If not, does anyone have some good ideas on how I can acheive this so that the list stays expanded until only the FIRST item is clicked on.
Given the CSS style:
li{list-style-image: url("someimage.gif")}
....how can I change the list-style-image for a given <li>, given an object
reference?
(I've unsuccessfully tried stuff like
theObject.style.list-style-image="url(someotherimage.gif)")
Here is the simple demo(run in IE7):
View 2 Replies View RelatedI created an accordion menu with rollover sub menus. My question is there a way to stop the rollover effect in the sub menus until the accordion animation is finished? When I click on a category link on the accordion the sub menu links flashes until the animation is done.
View 1 Replies View Relatedexplain to me the difference between the two? I just finished an online tutorial on Accordian Widget UI and it
View 5 Replies View RelatedI'm using the code below, but it hides ALL div's on the page. How do itarget just the layer1 div?
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
[Code]....