|
JavaScript - Is There A Ay To Place A Link In The Caption Of Lightbox In Jquery?
I'm using this Lightbox plugin with jQuery and wanted to know if there's a way to place a link inside the lightbox caption or anywhere inside. Or is there another lightbox plugin that can do this?
Similar TutorialsHi All I am currently working on a site using Lightbox 2.04 and all i would like to do is make a slight alteration to it's basic function and that is: Move the Cation and close button to the top of the display rather than the bottom. This however appears to be proving a little tricky, i have searched the net to no avail and pretty much moved everything around in the .js file and have even had an open post on Huddletogether for the last few weeks but to no avail. Can anyone help. Please!!! Thanks in advance. I found a way to add a caption to Facebox using the following code: Code: $('a[rel*=facebox-cap]').mousedown(function() {
var caption = $(this).attr('title');
$().one('reveal.facebox', function() {
$('<span class="caption">' + caption + '</span>').appendTo('.header');
});
});
This displays the caption (from the title attribute) but as you click on other links that use rel="facebox-cap" title="whatever", the previous caption isn't removed. In other words, the script keeps appending captions without removing any. Can someone assist with the functions above to fix this? Does .hide or .remove need to be added? I'm trying to learn JS but my "designer" mind is having a tough time lol. I have a request for a lightbox that has the image which expands to fit the height or width, and also displays the thumbnails of the previous and next image. They want it to behave similar to this: http://www.karamann.com/#/interiors/...lakeshore/zoom Can someone point me to either a tutorial or an existing script? I've found dozens of lightboxes, but none with the thumbnails. I do have a lightbox that has static prev/next buttons. Is there any way I can have the script replace those buttons with thumbnails? Would this be the way to go? Hi all I have a page on a website I am creating that has both a lightbox rel link and a quick calculator to work out a size of a product. Here are the links to the java files I am using: <link rel="stylesheet" href="css/style.css" type="text/css" media="all" /> <link rel="stylesheet" href="css/jquery.lightbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="scripts/jquery.js"></script> <script type="text/javascript" src="scripts/jquery.lightbox.js"></script> <script type="text/javascript" src="scripts/swfobject.js"></script> <script type="text/javascript" src="scripts/sandstone.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script src="scripts/prototype.js" type="text/javascript"></script> <script src="scripts/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="scripts/lightbox.js" type="text/javascript"></script> Here is the actual lightbox link: <a href="testimage.jpg" rel="lightbox" ><img src="testimage.jpg" > And finally the calculator: <form method="post" action=""> <table width="220" border="0" cellpadding="2" cellspacing="0"> <tr align="left"><td width="87" height="30" class="meter-calc-text">Width (m)</td> <td width="117" height="30" align="left"> <input name="width" type="text" id="calc-width" size="6" /></td> </tr> <tr align="left"><td height="30" class="meter-calc-text">Length (m)</td> <td height="30" align="left"><input name="length" type="text" id="calc-length" size="6" /></td> </tr> <tr align="left"><td height="40" colspan="2"> <select name="packcontents" class="meter-calc-dropdown" id="calc-packcontents" onchange="updateProduct(this.options[this.selectedIndex].id)" style="width:140px;"> <option value="0" selected class="meter-calc-text">Product Select</option> <option value="1" selected class="meter-calc-text">1</option> <option value="2" selected class="meter-calc-text">2</option> </select> <input type="button" name="go" value="Go" id="calc-trigger" class="calc-go" /> </td> </tr> <tr> </tr> </table> <table width="220" border="0" cellpadding="2" cellspacing="0"> <tr> <td width="83" height="30" class="meter-calc-text">You Requi </td> <td width="121" height="30" align="left" class="product-cell-info-table-text"> <input name="meters" type="text" class="small" id="calc-meters" value="" size="5" /> <span class="meter-calc-text">m2</span> </td> </tr> <tr> <td height="30" class="meter-calc-text"> </td> <td height="30" align="left" class="product-cell-info-table-text"> <input name="packs" type="text" class="small" id="calc-packs" value="" size="5" /> <span class="meter-calc-text">Packs</span> </td> </tr> </table> <input type="hidden" name="productid" id="productid" value=""> <div id="addit" style="display:none"> <a name="addit" class="meter-calc-text" onclick="location.href='basket.php?action=add&id='+$('#productid').val()+'&quantity='+$('#calc-packs').val()+'&return=http://www.cq-designs.co.uk/clientarea/sandstonecentre/clientarea/sandstonecentre/product.php?category=2&type=&colour=1'">Add To Cart</a> </div> </form> The problem I am having is that they both don't work together. If I comment out the lightbox javascript the calcukator works but not the lightbox and Vice Versa! Please help Thanks Pete Please see URL: http://www.freedommd.com/Freedom10/index.shtml 1. On the navbar, click on "Demos > EMR Features" (using jQuery for the navbar) 2. On the "FreeDOM EMR" page, in addition to the jQuery navbar, I am using Lightbox to display images (click on the "dashboard" thumbnail). There is a conflict of some sort here between scripts. Code: <!--jquery menu code directly below--> <script type="text/javascript" language="javascript" src="js/jquery.js"></script> <script type="text/javascript" language="javascript" src="js/navmenus.js"></script> <!--end jquery nav--> <!--Lightbox code directly below--> <script type="text/javascript" src="js-lightbox/prototype.js"></script> <script type="text/javascript" src="js-lightbox/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js-lightbox/lightbox.js"></script> <!--end Lightbox --> As is, on this page, my Lightbox code works fine, but my navbar will not expand the sub menus. If I remove the Lightbox code, then the navbar works fine. I'd really like for them both to work. : ) I tried putting the .js in different directories, separating the Lightbox code from the jQuery code but that didn't help. All .js files are attached. Much appreciated if someone can tell me what I need to do. Thanks, John Hello again, just noticed that the Jquery slider I installed appears to be stopping my lightbox from working. Here's my head code: Code: <head>
<title>Design Prohibited - James Clarke</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<link rel="shortcut icon" href="favicon.ico">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
</head>
Is there any way I can use them both together? I've wrote a jQuery script to fade some lines of text on the page. I've tested it and know it works. I've tried adding it to my WordPress homepage and testing it locally, but it doesn't work, I don't really know what I'm doing, and I can't make heads nor tails of the codex. I'd appreciate either a simple explanation or a real-world example Here are the steps I've taken: 1. added the line <?php wp_enqueue_script("jquery"); ?> just above the wp_head line. 2. added the script just below the wp_head line 3. Used the "No Conflict" syntax of jQuery(document).ready(function() {. Here's what the header looks like where I put my script Code: <?php
/**
* Template Name: Home Page
*
* @package WPFramework
* @subpackage Template
*/
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<?php if (is_search()) { ?>
<meta name="robots" content="noindex, nofollow" />
<?php } ?>
<title>
<?php
if (function_exists('is_tag') && is_tag()) {
single_tag_title("Tag Archive for ""); echo '" - '; }
elseif (is_archive()) {
wp_title(''); echo ' Archive - '; }
elseif (is_search()) {
echo 'Search for "'.wp_specialchars($s).'" - '; }
elseif (!(is_404()) && (is_single()) || (is_page())) {
wp_title(''); echo ' - '; }
elseif (is_404()) {
echo 'Not Found - '; }
if (is_home()) {
bloginfo('name'); echo ' - '; bloginfo('description'); }
else {
bloginfo('name'); }
if ($paged>1) {
echo ' - page '. $paged; }
?>
</title>
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
<?php if ( is_singular() ) wp_enqueue_script('comment-reply'); ?>
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
<script type="text/javascript">
jQuery(document).ready(function() {
//set all the divs opacity to 0
$("#rotator div").css({opacity: 0});
//show the current div
$("#rotator div.current").css({opacity: 1});
//run the rotateImages function every 3 seconds
setInterval("rotateBanners()", 4000);
});
function rotateBanners () {
var curBanner = $("#rotator div.current");
//get whatever div is after the current banner
var nxtBanner = curBanner.next();
//if there's nothing left, go back to top of loop
if (nxtBanner.length == 0)
nxtBanner = $("#rotator div:first");
curBanner.removeClass('current').addClass("previous").animate({ opacity: 0.0 }, 1500);
nxtBanner.css({ opacity: 0.0 }).addClass("current").animate({ opacity: 1.0 }, 1500,
function() {
curBanner.removeClass("previous");
});
};
</script>
</head>
Hi everybody I have a problem I want a beautiful accordion header on my website and use pirobox that is a lightbox version. I had this problem before but then u used a slideshow instead of this accordion header. If I use this code: only the accordion works Code: <script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/pirobox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$().piroBox({
my_speed: 300, //animation speed
bg_alpha: 0.5, //background opacity
slideShow : 'true', // true == slideshow on, false == slideshow off
slideSpeed : 3, //slideshow
close_all : '.piro_close' // add class .piro_overlay(with comma)if you want overlay click close piroBox
});
});
</script>
<script language="javascript" type="text/javascript" src="js/mootools.js"></script>
<script language="javascript" type="text/javascript" src="js/script.js"></script>
but if I change the order like this: only the pirobox works Code: <script language="javascript" type="text/javascript" src="js/mootools.js"></script>
<script language="javascript" type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/pirobox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$().piroBox({
my_speed: 300, //animation speed
bg_alpha: 0.5, //background opacity
slideShow : 'true', // true == slideshow on, false == slideshow off
slideSpeed : 3, //slideshow
close_all : '.piro_close' // add class .piro_overlay(with comma)if you want overlay click close piroBox
});
});
</script>
Then in the demo version there is this code: Code: <script type="text/javascript">
new LofmCordion( {wapperSelector: $E('#lof-cordion-1 .lof-cordion-wapper') } );
</script>
I don't know where to use it. In the demo version it's in the end, but I tried that and it still didn't work. I also used it immidiately after: Code: <script language="javascript" type="text/javascript" src="js/mootools.js"></script> <script language="javascript" type="text/javascript" src="js/script.js"></script> But it still doesn't work.. Please help me I'm kinda new to javascript and I really want to know how to solve this! thanks First off thank you in advance to whomever decides to help out. I am having an issue where I am using lightbox, however what is showing up is a text link "Request Email." I understand how to manipulate this text to say anything I want. However, I am having difficulty changing the text link to an image. Instead of the text, I want to have an image (button) stored on my server http://www.something.com/something.jpeg be the link to click on instead of the text. It seems this would be easy to accomplish, but I cant figure it out. It anybody can send me in the right direction it would be appreciated. Thanks! [CODE] <a id='anchor_LU8eKAvs2W' href='http://www.emailmeform.com/builder/form/LU8eKAvs2W'>Request Email!</a><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> if (typeof jQuery == 'undefined'){ document.write(unescape("%3Cscript src='http://www.emailmeform.com/builder/js/jquery-1.4.4.min.js' type='text/javascript'%3E%3C/script%3E")); } </script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <script type="text/javascript"> if (typeof $.ui == 'undefined'){ document.write(unescape("%3Cscript src='http://www.emailmeform.com/builder/js/jquery-ui-1.7.2.custom.min.js' type='text/javascript'%3E%3C/script%3E")); } </script> <link rel="stylesheet" type="text/css" href="http://www.emailmeform.com/builder/styles/dynamic.php?t=post" /> <script type="text/javascript" src="http://www.emailmeform.com/builder/js/dynamic.php?t=post&t2=0&use_CDN=true"></script> <script>$(function(){$('#anchor_LU8eKAvs2W').colorbox({width:'75%', height:'75%', iframe:true});})</script> [CODE] Hello everyone, I wonder if you can help a noob. I have an AJAX query that loads results from a mysql query into a div on my page. It all renders well with echoed results from a php query file. However I cannot get echoed links with a tag to open it up in light/slim/media box to work. Any ideas? Here is the part of the queried php that returns the results. Code: echo "<table width='100%'>";
echo "<tr><td><strong>Title</strong></td><td><strong>Location</strong></td><td><strong>Preview</strong></td></tr>";
while($row = mysql_fetch_array($result))
{
$danum = "000000".strval($row['id']) ;
echo "<tr><td width='410px;margin:5px'>".$row['title'] . "</td><td width='410px;margin:5px'>" . $row['place'] . "</td><td width='120px;margin:5px'><a href='archive/800/da".substr($danum,strlen($danum)-6,6).".jpg' rel='lightbox'><img src='archive/100/da".substr($danum,strlen($danum)-6,6).".jpg' class='lbThumb'></a></td></tr>";
}
echo "</table>";
I have all of the required scripts in the head of the main page. I don't know Jquery/Javascript too well at all but I can look at this code and see its pretty simple.. jQuery Panel: Code: $(document).ready(function() {
// Expand Panel
$(".open").click(function(){
$("div#panel").slideDown("slow");
});
// Collapse Panel
$(".close").click(function(){
$("div#panel").slideUp("slow");
});
// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});
and to trigger it from any link on the page it would need somethin like Code: $(".contact").click(function(){contactPanel()});
but I dont know how to give Panel code the name "contactPanel".. so this is where I'm stuck. how do i do this? also I have a "Open Contact Form" at the top of the page but I want to put a contact link at the very bottom and after the link is clicked i would like for the website to scroll up before the panel drops down.. is that possible? Hi everyone, I currently use javascript in an anchor tag to submit a form using Code: <a href="#" onClick="document.myformname.submit(); return false;">Submit</a> The only problem is, JQuery doesn't acknowledge that my form has been submitted. Has anyone come up against this problem before? If so, can you please share your work around? Thank you! B Hi guys, It's my first time to code in javascript... so I need a little help in changing the image captions in a gallery. Please find the files in the zip attached.. No effects needed for the caption change really... I don't want the captions to slide in like the images, I just want them to change when the images slide. Hope you guys can help me.. I've been at it for weeks, lol. Sorry a real noob here. Using Dreamweaver CS3 (WinXP), is there a simple way to add captions to disjointed rollovers? (The disjointed rollovers are created using image swap behavior) My aim is to click on a thumbnail, and when the image is projected on the poster, I want a caption appearing underneath. Can you please help me with this, here is my complete code Thanks [code] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript"> <!-- function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> </head> <body onload="MM_preloadImages('images/fullscreen/1z.jpg','images/fullscreen/2z.jpg')"> <p><img src="images/fullscreen/1z.jpg" alt="HL" name="pic1" width="114" height="102" id="pic1" onmouseover="MM_swapImage('poster','','images/fullscreen/1z.jpg',1)" onmouseout="MM_swapImgRestore()" /> <img src="images/fullscreen/2z.jpg" alt="HL" name="pic2" width="114" height="102" id="pic2" onmouseover="MM_swapImage('poster','','images/fullscreen/2z.jpg',1)" onmouseout="MM_swapImgRestore()" /></p> <p> </p> <p><img src="images/fullscreen/3z.jpg" alt="HL" name="poster" width="500" height="375" id="poster" /></p> </body> </html> [code] Hi, I am looking for some help with adding a caption in a semi transparent box over the main scrolling image in this http://jdhost.ueuo.com/scrolling/index.html I've been trying to hack other bits of javascript I've found on to it but I've had no luck. I would really apperciate any help. I have been trying for several days now to append a text caption to a displayed image using Javascript, but with no real success. Perhaps JS is not the best way. Has anyone a suggestion as to the best way to tackle this. I want to replace the image captions with text ones to help speed up the site. It is my home site here. A modification of the existing code seems obvious, but I have been unable to do this. Any help gratefully received. Frank Hello, hoping someone can help. Have built a slide show for header using following, but there is a very annoying time lag between the photo changing and the caption changing (ie photo changes, then a brief moment later the caption changes). Can anyone tell me how to correct this so that the caption and the photo change simultaneously? Thanks in advance! <script type="text/javascript"> $(function() { $('#slideshow').cycle({ fx: 'fade', timeout: 3000, after: function() { $('#caption').html(this.alt); } }); }); </script> Good day all, I was hoping someone could help me out with the following. I currently have a slideshow that as thumbnails under a main image. The thumbnails slide left and right with hover on a button and with a click changes main image without any problems. Few things I am looking to change/add: 1. The ability to mouse over the main image and have the caption appear than disappear when the mouse is moved off. Currently I have the caption as a static text under the main image. 2. Start the thumbnail position in the middle instead of the left 3. Add mouseover buttons to the main image to give the ability to cycle through the images instead of having to always use the thumbnails. Below I've include the Javascript code: Is this the best way or is there a better way? Example of slideshow: http://neileverosborne.com/portfolios/manatees.html JAVASCRIPT: Code:
var displayWaitMessage=true; // Display a please wait message while images are loading?
var activeImage = false;
var imageGalleryLeftPos = false;
var imageGalleryWidth = false;
var imageGalleryObj = false;
var maxGalleryXPos = false;
var slideSpeed = 0;
var imageGalleryCaptions = new Array();
function startSlide(e)
{
if(document.all)e = event;
var id = this.id;
if(this.id=='arrow_right'){
slideSpeedMultiply = Math.floor((e.clientX - this.offsetLeft) / 5);
slideSpeed = -1*slideSpeedMultiply;
slideSpeed = Math.max(-10,slideSpeed);
}else{
slideSpeedMultiply = 10 - Math.floor((e.clientX - this.offsetLeft) / 5);
slideSpeed = 1*slideSpeedMultiply;
slideSpeed = Math.min(10,slideSpeed);
if(slideSpeed<0)slideSpeed=10;
}
}
function releaseSlide()
{
var id = this.id;
slideSpeed=0;
}
function gallerySlide()
{
if(slideSpeed!=0){
var leftPos = imageGalleryObj.offsetLeft;
leftPos = leftPos/1 + slideSpeed;
if(leftPos>maxGalleryXPos){
leftPos = maxGalleryXPos;
slideSpeed = 0;
}
if(leftPos<minGalleryXPos){
leftPos = minGalleryXPos;
slideSpeed=0;
}
imageGalleryObj.style.left = leftPos + 'px';
}
setTimeout('gallerySlide()',20);
}
function showImage()
{
if(activeImage){
activeImage.style.filter = 'alpha(opacity=50)';
activeImage.style.opacity = 0.5;
}
this.style.filter = 'alpha(opacity=100)';
this.style.opacity = 1;
activeImage = this;
}
function initSlideShow()
{
document.getElementById('arrow_left').onmousemove = startSlide;
document.getElementById('arrow_left').onmouseout = releaseSlide;
document.getElementById('arrow_right').onmousemove = startSlide;
document.getElementById('arrow_right').onmouseout = releaseSlide;
imageGalleryObj = document.getElementById('theImages');
imageGalleryLeftPos = imageGalleryObj.offsetLeft;
var galleryContainer = document.getElementById('galleryContainer');
imageGalleryWidth = galleryContainer.offsetWidth - 20;
maxGalleryXPos = imageGalleryObj.offsetLeft;
minGalleryXPos = imageGalleryWidth - document.getElementById('slideEnd').offsetLeft;
if (navigator.userAgent.indexOf('MSIE') >= 0) {
var arrowWidth = document.getElementById('arrow_left').offsetWidth;
var el = document.createElement('div');
el.style.position = 'absolute';
el.style.left = arrowWidth + 'px';
el.style.width = (galleryContainer.offsetWidth - arrowWidth * 2) + 'px';
el.style.overflow = 'hidden';
el.style.height = '100%';
document.getElementById('galleryContainer').appendChild(el);
el.appendChild(document.getElementById('theImages'));
}
var slideshowImages = imageGalleryObj.getElementsByTagName('IMG');
for(var no=0;no<slideshowImages.length;no++){
slideshowImages[no].onmouseover = showImage;
}
var divs = imageGalleryObj.getElementsByTagName('DIV');
for(var no=0;no<divs.length;no++){
if(divs[no].className=='imageCaption')imageGalleryCaptions[imageGalleryCaptions.length] = divs[no].innerHTML;
}
gallerySlide();
}
function showPreview(imagePath,imageIndex){
var subImages = document.getElementById('previewPane').getElementsByTagName('IMG');
if(subImages.length==0){
var img = document.createElement('IMG');
document.getElementById('previewPane').appendChild(img);
}else img = subImages[0];
if(displayWaitMessage){
document.getElementById('waitMessage').style.display='inline';
}
document.getElementById('largeImageCaption').style.display='none';
img.onload = function() { hideWaitMessageAndShowCaption(imageIndex-1); };
img.src = imagePath;
}
function hideWaitMessageAndShowCaption(imageIndex)
{
document.getElementById('waitMessage').style.display='none';
document.getElementById('largeImageCaption').innerHTML = imageGalleryCaptions[imageIndex];
document.getElementById('largeImageCaption').style.display='block';
}
window.onload = initSlideShow;
So, i have this code which retrieves php files for me using jquery and id love to get it working with Jquery history plugin. I tried modifying the code i got from the ajax demo to work for me, but i just couldnt do it as i do not know any javascript really.. ( actually what i tried was simply to change "#ajax-links a" to "#menu li a" and .html to .php ..but nothing.. :rolleyes: Id be very gratefull if someone would help me out with this one. All related code can be found bellow (the ones that should be needed anyways): This is the code that retrieves php files inside "#content" when item from "#menu li a" with the specified id is clicked Code: $(document).ready(function(){
//References
var change = $("#menu li a");
var loading = $("#loading");
var content = $("#content");
//Manage click events
change.click(function(){
//show the loading bar
showLoading();
//load selected section
if(this.id == "home")
{
change.load(this.className='current-page');
content.slideUp();
content.load("pages/index.php", hideLoading);
content.slideDown();
}
else if(this.id == "secondpage")
{
change.load(this.className='current-page');
content.slideUp();
content.load("pages/secondpage.php", hideLoading);
content.slideDown();
}
else
{
//hide loading bar if there is no selected section
hideLoading();
}
});
//show loading bar
function showLoading(){
loading
.css({visibility:"visible"})
.css({opacity:"1"})
.css({display:"block"})
;
}
//hide loading bar
function hideLoading(){
loading.fadeTo(1000, 0);
};
});
Heres the structure of the menu/content Code: <ul id="menu"> <li><a id="home" class="normal" href="#Home"></a></li> <li><a id="secondpage" class="normal" href="#Secondpage"></a></li> </ul> <div id="content"> <ul id="sec-menu"> <li><a id="link1" class="normal" href="#">Link1</a></li> <li><a id="link2" class="normal" href="#">Link2</a></li> </ul> </div> Heres the code that jquery history plugin uses in demo for ajax Code: jQuery(document).ready(function($) {
function load(num) {
$('#content').load(num +".html");
}
$.history.init(function(url) {
load(url == "" ? "1" : url);
});
$('#ajax-links a').live('click', function(e) {
var url = $(this).attr('href');
url = url.replace(/^.*#/, '');
$.history.load(url);
return false;
});
});
|
|||||||