JavaScript - Jquery Slideshow Works In Local View But Not On Server

Hi there!

i want to know, what should I do to make the j query simple slide show repeat playing as currently it stops when the slide show finishes.

How can I do it repetitive?

I have a slideshow that allows the user to see the previous slide title and the next slide title along with the current slide and its content. I tested locally not in WP and the code worked fine. Once I placed my source within WP everything went south. I inspector the first line in the script seems to be what is having the issues - $(window).load(function(){ and I am unsure what to do next.

The source was used from Edit fiddle - JSFiddle

the page I am trying to get to work is located here - Sevices | Q&D CONSTRUCTION, INC.Q&D CONSTRUCTION, INC.

I am open to any suggestions.

Code:

 <script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130801/jquery.cycle2.min.js"></script>
    
  
  <style type='text/css'>
    .cycle-slide {
    width: 100%;
    text-align: center;
}
img {
    max-width: 300px;
}

#next {
    float: right;
}
#prev {
    float: left;
}
.center {
    text-align: center;
}
  </style>
  


<script type="text/javascript">//<![CDATA[ 
 $(window).load(function(){ 
var slideshow = $('.cycle-slideshow');
    maxSlides = slideshow.data('cycle.opts').slideCount;

slideshow.on({
    'cycle-update-view': function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
        UpdateTitles();
    }
});

function UpdateTitles(){
    var currentSlide = slideshow.data('cycle.opts').currSlide;
    activeSlide = $(".cycle-slide-active");
    activeTitle = activeSlide.data('title');
    
    if(currentSlide == 0){
        nextTitle = activeSlide.next().data('title');
        prevTitle = $(".cycle-slide").eq(maxSlides).data('title');
    }
    else if(currentSlide == maxSlides-1){
        prevTitle = activeSlide.prev().data('title');
        nextTitle = $(".cycle-slide").eq(0).data('title');
    }
    else {
        nextTitle = activeSlide.next().data('title');
        prevTitle = activeSlide.prev().data('title');
    }
    
    $('h1').html(activeTitle);
    $('#prev').html("Previous: "+prevTitle);
    $('#next').html("Next: "+nextTitle);
}

UpdateTitles();
});//]]>  

</script>

I'm trying to add next and previous buttons to this slideshow done in jQuery. I've gotten stuck trying to figure it out with no progress. Could anyone help me out with this? Thanks.

Here's the code:
Code:

$(document).ready(function(){
	/* This code is executed after the DOM has been completely loaded */
	
	var totWidth=0;
	var positions = new Array();
	
	$('#slides .slide').each(function(i){
		
		/* Traverse through all the slides and store their accumulative widths in totWidth */
		
		positions[i]= totWidth;
		totWidth += $(this).width();
		
		/* The positions array contains each slide's commulutative offset from the left part of the container */
		
		if(!$(this).width())
		{
			alert("Please, fill in width & height for all your images!");
			return false;
		}
		
	});
	
	$('#slides').width(totWidth);

	/* Change the cotnainer div's width to the exact width of all the slides combined */

	$('#menu ul li a').click(function(e,keepScroll){

			/* On a thumbnail click */

			$('li.menuItem').removeClass('act').addClass('inact');
			$(this).parent().addClass('act');
			
			var pos = $(this).parent().prevAll('.menuItem').length;
			
			$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
			/* Start the sliding animation */
			
			e.preventDefault();
			/* Prevent the default action of the link */
			
			
			// Stopping the auto-advance if an icon has been clicked:
			if(!keepScroll) clearInterval(itvl);
	});
	
	$('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
	/* On page load, mark the first thumbnail as active */
	
	
	
	/*****
	 *
	 *	Enabling auto-advance.
	 *
	 ****/
	 
	var current=1;
	function autoAdvance()
	{
		if(current==-1) return false;
		
		$('#menu ul li a').eq(current%$('#menu ul li a').length).trigger('click',[true]);	// [true] will be passed as the keepScroll parameter of the click function on line 28
		current++;
	}

	// The number of seconds that the slider will auto-advance in:
	
	var changeEvery = 7;

	var itvl = setInterval(function(){autoAdvance()},changeEvery*1000);

	/* End of customizations */
});

I am looking for tutorials on creating a slideshow with thumbnails, but i need one where i can put the mouse over the thumbnail depending on the direction i am the mouse the thumbnail will move left or right

thanks

So i purchased a template from template monster for wordpress.

http://www.templatemonster.com/demo/28861.html

On the front page when you click on the thumbnail it changes the big image in the middle. I can't figure out how for the life of me to make that image also a link.

My main problem is the code below. img_b1.jpg is the full size image and image_1.jpg is the thumbnail image. When you click on the thumbnail it changes the big image in the middle. When I add a clickable href=" to the main image it breaks the whole chain.
---------------------------------------------------------------------
<a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b1.jpg" title="Agrocore">

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_1.jpg" alt="Agrocore" />

</a>


------------------------------------------------------------------------

Full code below


<div id="thumbs" class="navigation">

<ul class="thumbs noscript">

<li>

<a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b1.jpg" title="Agrocore">

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_1.jpg" alt="Agrocore" />

</a>

<div class="caption">

<div class="indent1">living set </div>

<div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br />

Sleek and stylish interior to suit your taste.</div>

<div class="indent"><h4>Contemporary</h4></div>

</div>

</li>

<li>

<a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b2.jpg" title="ProClinique">

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_2.jpg" alt="ProClinique" />

</a>

<div class="caption">

<div class="indent1">in grey</div>

<div class="image-desc">Luxury living is being redefined and emphasis is being laid on comfortable living, without compromising on style, modest in the color codes</div>

<div class="indent"><h4>Sitting room </h4></div>

</div>

</li>

<li>

<a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b3.jpg" title="Beauty">

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_3.jpg" alt="Beauty" />

</a>

<div class="caption">

<div class="indent1">living set </div>

<div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br />

Sleek and stylish interior to suit your taste.</div>

<div class="indent"><h4>Contemporary</h4></div>

</div>

</li>

<li>

<a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b4.jpg" title="Market">

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_4.jpg" alt="Market" />

</a>

<div class="caption">

<div class="indent1">in grey </div>

<div class="image-desc">Luxury living is being redefined and emphasis is being laid on comfortable living, without compromising on style, modest in the color codes</div>

<div class="indent"><h4>Sitting room </h4></div>

</div>

</li>

<li class="last">

<a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b5.jpg" title="Business">

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_5.jpg" alt="Business" />

</a>

<div class="caption">

<div class="indent1">living set </div>

<div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br />

Sleek and stylish interior to suit your taste.</div>

<div class="indent"><h4>Contemporary</h4></div>

</div>

</li>

</ul>

</div>



</div>

</div>

I am completely lost here. My page is http://myresearchfinder.com/dev/newchecktest.html

The first checkbox should spawn a menu and then the "breast" option could spawn another. It works flawless in IE9. But in FF 3.6 the first checkbox simply does nothing. In Chrome, it spawns the menu, but strangely the checkboxes in the next menu are not clickable. soooo weird. any ideas? this should be standard css/jquery.

I must make clear that I am not a javascript programmer; I am simply trying to get this script to work on my website. It functions perfectly locally (with all browsers), but after uploading to my website, it shows the controls at the top, but not the content.

Below is the code for the FreeMind Flash Browser which can be found he http://freemind.sourceforge.net/wiki.../Flash_browser

It requires 2 additional files, flashobject.js and visorFreemind.swf plus the FreeMind file (*.mm) that stores the content. The FreeMind file that has the content displays perfectly on localhost, but not on the website. I have all of these files in the same directory and have double checked everything, but it still doesn't function on my website. I have other flash files and scripts on the same website in other pages that function perfectly.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="freemind flash browser"/>
<meta name="keywords" content="freemind,flash"/>
<title>MINDMAPS</title>
<script type="text/javascript" src="flashobject.js"></script>
<style type="text/css">
	
	/* hide from ie on mac \*/
	html {
		height: 100%;
		overflow: hidden;
	}
	
	#flashcontent {
		height: 100%;
	}
	/* end hide */

	body {
		height: 100%;
		margin: 0;
		padding: 0;
		background-color: #9999ff;
	}

</style>
<script language="javascript">
function giveFocus() 
    { 
      document.visorFreeMind.focus();  
    }
</script></head>
<body onLoad="giveFocus();">
	
	<div id="flashcontent" onmouseover="giveFocus();">
		 Flash plugin or Javascript are turned off.
		 Activate both  and reload to view the mindmap
	</div>
	
	<script type="text/javascript">
		// <![CDATA[
		// for allowing using http://.....?mindmap.mm mode
		function getMap(map){
		  var result=map;
		  var loc=document.location+'';
		  if(loc.indexOf(".mm")>0 && loc.indexOf("?")>0){
			result=loc.substring(loc.indexOf("?")+1);
		  }
		  return result;
		}
		var fo = new FlashObject("visorFreemind.swf", "visorFreeMind", "100%", "100%", 6, "#9999ff");
		fo.addParam("quality", "high");
		fo.addParam("bgcolor", "#a0a0f0");
		fo.addVariable("openUrl", "_blank");
		fo.addVariable("startCollapsedToLevel","3");
		fo.addVariable("maxNodeWidth","200");
		//
		fo.addVariable("mainNodeShape","elipse");
		fo.addVariable("justMap","false");
		fo.addVariable("initLoadFile",getMap("blues.mm"));
		fo.addVariable("defaultToolTipWordWrap",200);
		fo.addVariable("offsetX","left");
		fo.addVariable("offsetY","top");
		fo.addVariable("buttonsPos","top");
		fo.addVariable("min_alpha_buttons",20);
		fo.addVariable("max_alpha_buttons",100);
		fo.addVariable("scaleTooltips","false");
		fo.write("flashcontent");
		// ]]>
	</script>
</body>
</html>

Hi,

I know this works in principle as I have used it successfully on other pages I am using so I must have a typo or some other small mistake, I have gone over and over it, taken things out, put them back in and I can't for the life of me work out where my mistake is. Another pair of eyes would certainly be appreciated.

My code is:
Code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#submitnewfestival').click(function(){
	var data = $('#publicnewevent').serialize();
	$.post ('insertPublicEvent.php',data, function(){
				alert("Thank you for adding an event to our calendar.");
			$('#publicnewevent').each (function(){
				this.reset();
				});
			});	
				return false;
	});
});
</script>

				<form action="" name="publicnewevent" id="publicnewevent" method="post" autocomplete="off" >


<label class="two">Dress Code:</label>
<input type="text" class="input" name="dresscode" id="dresscode" value="Enter Dress Code" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Enter Dress Code':this.value;" size="100" />
	
	<br />
	<br />
<input type="button" name="submitnewfestival" id="submitnewfestival" value="Submit" /> &nbsp;
</form>

The insertPublicEventForm.php works as I have tested it without JQuery as a direct post. This is a heavily reduced version of the form, but even like this I can not get it to work.

Overview
Well it's been a while since I've been here! Another set of eyes on this would really help me out. I have a simple slider plugin that I wrote in jQuery. One of the parameters that I've written is which element you want to be the container for each slide. In the example I'm going to post, I'm using a list item (li).

The Problem
Due to lazy coding or whatever, I really made a blunder of things inside my plugin. Throughout the plugin, I'm calling that parameter directly. Because of this, the script context is being applied to EVERY element on the page.

So...when I pass in the tag jQuery selector: $('li') as the element selector, it works...but it applies the slider effects to every <li> on the page, not just the container I assign to the plugin.

Every time I change $('li') to anything more specific at all (a class, an id, better selector) or I rewrite the plugin to use something more specific (hard-coded), the browser usually crashes due to an unresponsive script. I'm seeing this in Chrome & Firefox. I'm guessing this some kind of weird closure-memory leakage issue that I'm just not ready to handle, or something about the way jQuery and event delegation/binding works.

The frustrating thing is that if I do a console.log of the element parameter, and I use something more specific....it returns just fine! The script blows up the page though....

The Code
Code:

<html>
<head>
<script>
(function($) {
	$.fn.extend({
		luSlider: function(options) {
		
			var o = $(this);
		
			var defaults = {
				element : $(this),
				direction: 'left',
				next: null,
				prev: null,
				distance: null,
				speed: 'slow',
				prevAtEnd : null,
				nextAtEnd : null,
				prevNextEvent: null,
				pagination: false,
				elementClick : false,
				pager : $(this),
				callback: null
			};
			
			var options =  $.extend(defaults, options);
			
			o.data('curPosition','');
			
			// set cursor for next & previous buttons
			if (options.prev != null) options.prev.css('cursor','pointer');
			if (options.next != null) options.next.css('cursor','pointer');
				
			
			// Wrap all of our items in a super large div with hidden overflow
			o.find('ul').first().wrap("<div style='width:999999px;' id='luSliderWrapper'></div>");
			o.css('overflow','hidden');
			
			// If no distance specified, do it based on the width of a single element
			var totalWidth = 0;
			
			
			var el = options.element;

			
			// Get the total width of all our items
			el.parent('ul').css({'padding':'0px','margin':'0px'});
			
			el.each(function() {
				totalWidth += $(this).outerWidth(true);
								
				//float our items to the left
				el.css({'display':'block','position':'relative','float':'left'});

				

			});
			
			// Get individual item width
			var itemWidth = totalWidth / el.size();
			//var itemWidth = el.outerWidth(true);
		
			// Get the number of visible items based on our container size
			var spaceUsed = $(this).innerWidth() / itemWidth;
			var numVisibleItems = Math.floor( spaceUsed );
			
			
			/*
			if (spaceUsed % 1 > 0 ) {
				$(this).css({'padding-left':itemWidth/2,'padding-right':itemWidth/2});
			}*/
			
						
			// a variable to store the number of items
			var numItems = el.size();
			
			
			if (options.distance == null) options.distance = itemWidth; 


			/* Initialize the location */	
			if ( $(this).data('curPosition') == undefined ) {
				$(this).data('curPosition',0);
			} 
			
			
			// get the total number of pages
			var numPages = Math.ceil(numItems / numVisibleItems);
			
			
			togglePrevNext();
			buildPager();
			
													
			
			return this.each(function() {
			
				if (options.elementClick) {
					//el.click(function() {
					//	document.location = $(this).find('a').attr('href');
				//	});
				}
				
				//	var cb = options.prevNextEvent;
				
							
				
				// Animate Next
				options.next.click(function() {
					
					togglePrevNext();
									
					var theEnd = endOfShow();
					var howFar = options.distance;
				
					if (!(theEnd)) {

						o.data('curPosition',  Math.round( (o.data('curPosition')) + 1) );
						
						if (options.pagination) {
							howFar *= numVisibleItems;
						}				
						
						distance = "-=" + howFar;
						
						el.stop(true,true).animate({
							"left" : distance
						},options.speed);
					} else {
						// end of show	
					}			
					
					
					
					togglePrevNext();
					
					movePager();
					
					handleCallBack();
				});
				
								
				// Animate Previous
				options.prev.click(function() {
				
					togglePrevNext();
					
					//var theEnd = endOfShow('prev');
					var theEnd = startOfShow();
					var howFar = options.distance;
					
					if (!(theEnd)) {
						o.data('curPosition',  (o.data('curPosition') - 1) );
						
						if (options.pagination) {
							howFar *= numVisibleItems;
						}
						
						distance = "+=" + howFar;

						
						el.stop(true,true).animate({
							"left" : distance
						},options.speed);
						
					} else {
						// end of show
					}
										
					togglePrevNext();
					movePager();
					handleCallBack();
				}); // end prev.click
				
					
				$('#luSliderPager li').click(function() {
					var curPage = $('li.activePage').index();
					var newPage = $(this).index();
					var direction = (curPage > newPage) ? "+=" : "-=";
					
					var distance = Math.abs(curPage - newPage) * options.distance;
					
					if (options.pagination) {
						distance *= numVisibleItems;
					}

					var newLeft = direction + distance;
					
					// set position
					o.data('curPosition', newPage);
					movePager();
					
					// animate
					el.stop(true,true).animate({
						"left" : newLeft
					
					},options.speed);				

				});
				
			}); // end return
						
			function togglePrevNext() {
			
				(startOfShow() ) ? options.prev.addClass(options.prevAtEnd) : options.prev.removeClass(options.prevAtEnd);
							
				(endOfShow() ) ? options.next.addClass(options.nextAtEnd) : options.next.removeClass(options.nextAtEnd);	
			} 
			
			
			function handleCallBack() {
				if (typeof options.callback == "function") options.callback(o,options); 
			}
			
			// Determine our boundaries...and if we've reached them
			function startOfShow() {
				return(o.data('curPosition') <=0 ) ? true : false; 
			}
			
			function endOfShow() {
		
				if (options.pagination) {
					return (o.data('curPosition') >= numPages-1) ? true : false;
				} else {
					return (o.data('curPosition') >= (numItems - numVisibleItems) ) ? true : false;
				}				
			}
			
			
			
			function movePager() {
				$('.activePage').removeClass('activePage');
				$('.pager').eq(o.data('curPosition')).addClass('activePage');
			}
			
		
			
			function buildPager() {
			
				/* Custom CSS rule for pager default */
				var style = "<style type='text/css'> #luSliderPager li { float: left; display:block; width:13px; height:16px; padding: 0 5px; }";
				style += ".pager { background:url('luSlider/images/pager_button-sprite.png') left top no-repeat; cursor:pointer; }.activePage { background-position:left -15px; }</style>";
				
				$(style).appendTo("head");
				
				var numItemsPerPage = o.width() / itemWidth;
				var pager = "<ul id='luSliderPager'>";
				
				
				for (var x = 0; x < numPages; x++ ) {
					if (o.data('curPosition') == x) {
					pager += "<li class='pager activePage'></li>";
					}else {
					pager += "<li class='pager'></li>";}
				}
				pager += "</ul>";	
				
			 	$(pager).appendTo(options.pager);
			 }
			
			
			function showPager() {
							
			}
			
		}
		
	});				
})(jQuery);

</script>


<script>
$(function() {
/* * * * * * * * Slider Code * * * * * * * */
	
	var myCB = function(o, options) {
			// my callback function executed after every transition
			//console.log(o.numVisibleItems);
	}
	
	$('#sliderContainer').luSlider({ 
		element : $('li'),
		next : $('#slide_terms_right'),
		prev : $('#slide_terms_left'),
		speed : 1000,
		prevAtEnd : "slide_terms_prev_disabled", 
		nextAtEnd : "slide_terms_next_disabled",
		elementClick : true,
		pagination : true,
		pager : "#pager",
		callback : myCB
	});
)};
</script>

</head>
<body>
<div id="sliderContainer">
		
	<ul id="mySlides">
         <li class="slide"></li>
         <li class="slide"></li>
         <li class="slide"></li>
        </ul>
</div>
</body>
</html>

notes
the line var el = options.element; is where I start to have issues. The example I mentioned of hard-coding & console.log that works is this:

Code:

...
var el = options.element;
console.log(el);  //displays what I'd expect, a jQuery object

el = o.find('li');  // only find li's that are children of the div attached to the plugin
console.log(el);  //displays exactly what I'd expect, a jQuery object of JUST the right li's

// if I change el to be this new selector tho...the browser page will crash. 'Unresponsive Script' etc.
...

Please ignore anything hard-coded into the plugin, I tossed several things in for brevity. Also if you have any other code cleanup tips, I'm more than receptive. Also for this example I removed all of the crazy ajax and php and other template-y type stuff.

I noticed the problem when I embedded the slider on my page and my top navigation menu (which uses a <ul>) started scrolling off the screen when I clicked on my slider arrows :P




THANK YOU SO MUCH,
-Celt

Ok, This one has plagued me for some time now. I am parsing an XML file for a search feature. On my local machine, the code below works fine in FF, but when I upload it, I get an error stating y[0] (the root element) is undefined. I think the problem may be with my onload method but I can't be sure.

Code:

function importXML()
{
        if (document.implementation && document.implementation.createDocument)
        {
                xmlDoc = document.implementation.createDocument("", "", null);
                xmlDoc.onload = createTable;
        }
        else if (window.ActiveXObject)
        {
                xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
				xmlDoc.async=false;
                xmlDoc.onreadystatechange = function () {
					if (xmlDoc.readyState==4) createTable();
				}
         }
        else
        {
                alert('Your browser can\'t handle this script');
                return;
        }
        xmlDoc.load("catalog.xml");
}

// and now for the part that fails

var y = xmlDoc.getElementsByTagName('data');
var dcount = 0;
for (t=0;t<y[0].childNodes.length;t++) {  //this is the line where FF reports the error
	if (y[0].childNodes[t].tagName == "record") { 
		dcount++;
	}
}

The xml syntax is as follows
Code:

<data>
<record>
<item 1>text</item 1>
<item 2>text</item 2>
<item 3>text</item 3>
</record>
<record>
<item 1>text</item 1>
<item 2>text</item 2>
<item 3>text</item 3>
</record>
</data>

I just can't figure out why this works locally and not on the server. IE works fine, but then again it uses the activeXObject method so it should function differently.

Hi,
I have created a site and on one page it uses 2 divs side by side to display text information. in the left hand div it contains 8 links. these links when clicked load up text stored in separate text files and display it in the right hand div.

The code below was working when i ran it from my mac but when i try to load it off the webhost it fails to execute.

Code:

$(document).ready(function() {

	  $("#mc").click(function() {
	    $("#innertext").load('mc.txt');
	  });

         $("#sd").click(function() {
	   $("#innertext").load('sd.txt');
	 });

         $("#ma").click(function() {
	  $("#innertext").load('ma.txt');
	 });

	$("#rtm").click(function() {
	$("#innertext").load('rtm.txt');
	});

	$("#cm").click(function() {
	$("#innertext").load('cm.txt');
	});

	$("#r").click(function() {
	$("#innertext").html('r.txt');
	});

	$("#bp").click(function() {
	$("#innertext").load('bp.txt');
	});

	$("#pc").click(function() {
	$("#innertext").load('pc.txt');
	});

});

Code:

<div class="wrapper p2">
                        <ul class="list1 col-1">
                          <li>&gt; <a href="javascript:void(0);"  onclick="function("mc");" id="mc">Consultancy</a></li>
                          <li>&gt; <a href="javascript:void(0);" onclick="function("sd"); id="sd">Strategy</a></li>
                          <li>&gt; <a href="javascript:void(0);" onclick="function("ma"); id="ma">Market Assessment</a></li>
                          <li>&gt; <a href="javascript:void(0);" onclick="function("rtm"); id="rtm">Routes to Market</a></li>
                        </ul>
                        <ul class="list1 col-2">
                          <li>&gt; <a href="javascript:void(0);" onclick="function("cm"); id="cm">Change management</a></li>
                          <li>&gt; <a href="javascript:void(0);" onclick="function("r"); id="r">Restructuring</a></li>
                          <li>&gt; <a href="javascript:void(0);" onclick="function("bp"); id="bp">Planning</a></li>
                          <li>&gt; <a href="javascript:void(0);" onclick="function("pc"); id="pc">Project management</a></li>
                        </ul>
                      </div>

here is a link to the page on the webhost--
http://herkes.host56.com/index-2.html

Any ideas to why this does not work? any help is appreciated

Hi everybody I have a problem

I want a header that is a slideshow and use lightbox for other images.
No I have this all working but not at the same time.

If I use this code in this order only the first script that is the lightbox script works.
PHP 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 src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="js/jquery.cycle.all.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
           $('.slideshow').cycle({
              fx: 'scrollLeft',
              speed: 1000,
              timeout: 7000
           });
        });
        </script> 


If I use this code so I switched the order only the slideshow works:
PHP Code:
<script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="js/jquery.cycle.all.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
           $('.slideshow').cycle({
              fx: 'scrollLeft',
              speed: 1000,
              timeout: 7000
           });
        });
        </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> 


I also tried this: but then they both did not work

PHP Code:
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="js/jquery.cycle.all.min.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(){
                                   
           $('.slideshow').cycle({
              fx: 'scrollLeft',
              speed: 1000,
              timeout: 7000
           });
           
           $().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> 


Can you help me solve this problem so they both work?

Hey all,

1) When clicking on a list in an accordion, it should change the quicktime movie playing in a main window area. It works in firefox but not in safari. The variable imgTitle holds the expected output (e.g. '../images/Intro-1.mov'). It changes the src attribute of the embed tag. This change works in Firefox where the new movie plays on click. However, when clicking the list item in safari, nothing happens.

2) There is a problem in firefox as well in that the movie overlays everything else on page, even though it should be behind the text. Positioning would be tedious given that there's many nested elements and I would have to set relative positioning to the entire page. Any reason for this behavior of embed tags?

Code:

$(".image_thumb ul li ul li").click(function(){  			
 
	var imgTitle = $(this).find('a').attr("href");  
	var imgDesc = $(this).find('.block').html();  
	var imgDescHeight = $(".main_image").find('.block').height(); 	

	if ($(this).is(".active")) {   
		return false;  
	} else {
		console.log(imgTitle);
		$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
			$(".main_image .block").html(imgDesc).animate({ opacity: 0.85,	marginBottom: "0" }, 250 );
			$(".main_image embed").attr({ src: imgTitle}); 
		});
	}

	$(".image_thumb ul li ul li").removeClass('active');  
	$(this).addClass('active');  
	return false;

}) .hover(function(){
	$(this).addClass('hover');
	}, function() {
	$(this).removeClass('hover');
});

Thanks for response.

Hi,

I have a form that I am submitting using JQuery, if I copy and paste the form into my main page, everything works fine. If I try to call the form in a separate page to onload none of the buttons work.

Is there away around this?

Not sure if providing my script helps or not, but just in case here it:
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">
<title>Messages</title>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#submitNewSend, #submitNewSend2, #submitNewSave, #submitNewSave2').click(function(){

	var btn = $(this).attr('id');
	if(btn == 'submitNewSend'){
		file = 'insertMessage.php';
		Msg = 'Your message has been sent';
	} else if(btn == 'submitNewSend2'){
		file = 'insertMessage.php';
		Msg = 'Your message has been sent';
	} else if (btn == 'submitNewSave'){
		file = 'insertSaveMessage.php';
		Msg = 'Your message has been saved';
	} else if (btn == 'submitNewSave2'){
		file = 'insertSaveMessage.php';
		Msg = 'Your message has been saved';
	}
		var data = $('#MessageNew').serialize();
		$.post (file,data, function(){
				alert(Msg);
			$('#MessageNew').each (function(){
				this.reset();
				});
			});	
				return false;
	});
});
</script>


<script type="text/javascript">
function loadXMLDoc(File,ID){
if (window.XMLHttpRequest)  {
  xmlhttp=new XMLHttpRequest();
  }
else {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById(ID).innerHTML=xmlhttp.responseText;
    }
  }

xmlhttp.open("POST",File,true);
xmlhttp.send();
}
</script>
<head>
<body onload="loadXMLDoc('getloadCompose.php','txtHintCompose')">
<br />
<br />
<div id="txtHintCompose"></div>
</form>
</body>
</html>

And the getloadCompose.php is:
Code:

<form action="" method="post" name="MessageNew" id="MessageNew" autocomplete="OFF">
<table id="new" width="60%">
	<tr>
	<th>Compose Message</th>
	</tr>
	<tr>
	<td class="first">
	<input type="button" class="button3" name="submitNewSend2" id="submitNewSend2" value="Send">
	<input type="button" class="button3" name="submitNewSave2" id="submitNewSave2" value="Save"> 
	<input type="button" class="button3" name="submitNewCancel" value="Cancel" onclick="loadXMLDocRefresh('getloadInbox.php','txtHintMessage')" />
	</td>
	</tr>
	<tr>
	<td>
		<br />
		<label class="two"><b>To:</b></label><input type="text" class="input" name="to" id="to" value=""><input type="text" class="input" name="recipient" id="recipient" value="" onkeyup="showHint(this.value, 'getEmailName.php','txtHintEmailTo')" size="70" /><br /><br />
		<div id="txtHintEmailTo"></div>
	</td>
	</tr>
	<tr>
	<td>
		<label class="two"><b>Subject:</b></label><input type="text" class="input" name="subject" id="subject" value="enter subject" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'enter subject':this.value;" size="70" /><br /><br />
	</td>
	</tr>
	<tr>
	<td>
		<label class="two"><b>Message: </b></label><div class="scroll"><textarea rows="10" cols="75" class="input" name="messsage" id="message">Enter Message</textarea></div><br /><br /><br />

	</td>
	</tr>
	<tr>
	<td class="first">
	<input type="button" class="button3" name="submitNewSend" id="submitNewSend" value="Send">
	<input type="button" class="button3" name="submitNewSave" id="submitNewSave" value="Save"> 
	<input type="button" class="button3" name="submitNewCancel" value="Cancel" onclick="loadXMLDocRefresh('getloadInbox.php','txtHintMessage')" />
	</td>
	</tr>
	</table>
</form>

I know I have buttons doing the same function,there is an ease of use reason for it. I can put everything on my main page if necessary, but it wouldn't really be doing exactly what I want it to do.

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;
            });
    });