JavaScript - How To Set Up Jcarousel Without Ajax

Hi i have a question and i would really appreciate the help of fellow coders. I came across a certain horizontal jcarousel on the website http://www.goal.com , i would like to know how this was done as i would like to use this type of jcarousel for my websites homepage . i would really appreciate the help of you guys .

Hello,
We have jcarousel on our forum site which rotates automatically. It is vbulletine forum. In fact originally it was working fine with old design and rotating images automatically in horizontal direction with a set of 5 images visible at a time and total 12 images in set.

But we have upgraded our forum design in last week and I started getting issues with Jcarousel scroller.

Our site URL is http://newtest.naturalparenting.com.au
Please go at any topic and post page finally, Below first post there is a scroller
e.g http://newtest.naturalparenting.com....ad.php?t=42713


While old site design is still active at
http://ninad.naturalparenting.com.au
Please go at any topic and post page finally, Below first post there is a scroller
e.g http://ninad.naturalparenting.com.au...ad.php?t=40745

At new design when we implemented jcarousel scroller it is showing only one image in a horizontal row at jscroller and it disappears immediately and after 3-4 min it do reappear again. When I inspected it using firebug I have noticed that other images are coming below vertically not horizontally, really strange. Also I noticed another thing is that it is not updating width at element.style in firebug for UL tag. It is showing fix width 220 px all time. I think due to that all images appearing vertically one after one rather than horizontally.

It is really very strange issue for me. I have tried all ways to fix it but alas !!!

Any help would be greatly appreciated.

Code:

<style type="text/css">
.jcarousel-skin-tango .jcarousel-container {
 -moz-border-radius: 0px;
 background: transparent;
 border: 0px solid #CEC8B7;
}
.jcarousel-skin-tango .jcarousel-direction-rtl {
 direction: rtl;
}
.jcarousel-skin-tango .jcarousel-container-horizontal {
 width: 695px;
 padding: 20px 30px;
}
.jcarousel-skin-tango .jcarousel-container-vertical {
 width: 75px;
 height: 220px;
 padding: 40px 20px;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
 height: 220px;
 margin-left: auto;
 margin-right: auto;
 width: 675px;
}
.jcarousel-skin-tango .jcarousel-clip-vertical {
 width:  75px;
 height: 220px;
}
.jcarousel-skin-tango .jcarousel-item {
 width: 75px;
 height: 75px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
 margin-left: 0;
 margin-right: 10px;
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
 margin-left: 10px;
 margin-right: 0;
}
.jcarousel-skin-tango .jcarousel-item-vertical {
 margin-bottom: 10px;
}
.jcarousel-skin-tango .jcarousel-item-placeholder {
 background: #fff;
 color: #000;
}
/**
 *  Horizontal Buttons
 */
.jcarousel-skin-tango .jcarousel-next-horizontal {
 position: absolute;
 top: 83px;
 right: 5px;
 width: 32px;
 height: 32px;
 cursor: pointer;
/* background: transparent url(images/checkout/nivo_nav.png) no-repeat scroll right top;*/
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
 left: 5px;
 right: auto;
 background: transparent url(images/checkout/nivo_nav.png) no-repeat scroll right top;
}
.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
 background-position: -32px 0;
}
.jcarousel-skin-tango .jcarousel-next-horizontal:active {
 background-position: -64px 0;
}
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
 cursor: default;
 background-position: -96px 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal {
 position: absolute;
 top: 83px;
 left: 5px;
 width: 31px;
 height: 31px;
 cursor: pointer;
 /*background: transparent url(images/checkout/nivo_nav.png) no-repeat scroll left top;*/
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
 left: auto;
 right: 31px;
 /*background-image: url(images/checkout/nivo_nav.png);*/
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
 background-position: -32px 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
 background-position: -64px 0;
}
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
 cursor: default;
 background-position: -96px 0;
}
/**
 *  Vertical Buttons
 */
.jcarousel-skin-tango .jcarousel-next-vertical {
 position: absolute;
 bottom: 5px;
 left: 43px;
 width: 32px;
 height: 32px;
 cursor: pointer;
 background: transparent url(next-vertical.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-next-vertical:hover {
 background-position: 0 -32px;
}
.jcarousel-skin-tango .jcarousel-next-vertical:active {
 background-position: 0 -64px;
}
.jcarousel-skin-tango .jcarousel-next-disabled-vertical, .jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover, .jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {
 cursor: default;
 background-position: 0 -96px;
}
.jcarousel-skin-tango .jcarousel-prev-vertical {
 position: absolute;
 top: 5px;
 left: 43px;
 width: 32px;
 height: 32px;
 cursor: pointer;
 background: transparent url(prev-vertical.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-prev-vertical:hover {
 background-position: 0 -32px;
}
.jcarousel-skin-tango .jcarousel-prev-vertical:active {
 background-position: 0 -64px;
}
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical, .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover, .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {
 cursor: default;
 background-position: 0 -96px;
}

#upsell {
margin-bottom: 10px;
margin-top: 0;
text-align: center;
}

#upsell li {
 border: 0 dashed #CCCCCC;
 float: left;
 height: 220px;
 list-style: none outside none;
 margin: 0 10px 0 0;
 padding: 2px;
 width: 125px;
}
</style>  
<script type="text/javascript" src="/resources/scripts/jquery-1.4.2.min.js"></script>

Jquery, Jcarousel problems - want it to go back to the start and then stop
Here is the link - I want it to go from the last - which would be the 3rd image and swoosh back to the beginning and stop. my alternative is already uploaded where I have it just go to the 4th which is the same at the first..

Help it would look nicer with it swooshing back to the beginning and stopping.

http://www.macrojump.com/sti_demo/home.php
Code:

$(document).ready( function() {

  function carouselInit(carousel) {
    $('.level0-hero-carousel .carousel-control a').bind('click', function() {
      carousel.scroll( parseInt( $(this).attr('rel') ) );
      carousel.stopAuto();
      return false;
    });

    carousel.clip.hover(function() {
        //carousel.stopAuto();
    }, function() {
        //carousel.startAuto();
    });

  };

  function firstItemAction(carousel, item, idx, state) {
    $('.level0-hero-carousel .carousel-control a').removeClass('active').eq(idx-1).addClass('active');
  };

 $('.level0-hero-carousel').jcarousel({
    scroll: 1,
    initCallback: carouselInit,
    itemFirstInCallback:  firstItemAction,
  


    auto: 4,
    wrap: 'first',
    animation: 1500,
 

    buttonNextHTML: null,
    buttonPrevHTML: null
  });

    if( $('.level0-hero-carousel ul li').size() > 1 )
    $('.level0-hero-carousel .carousel-control').show();

  $('.level0-hero-carousel .carousel-control a').hover(function() {
    $(this).addClass('hover');
  }, function() {
    $(this).removeClass('hover');
  });
 
  /* Alerts */
  $('.level0-alerts ul li').eq(0).show();

  var alertsInterval = null;
  var alertsIndex = 0;
  var alertsIntervalLength = 1500;
  var alertsCount = $('.level0-alerts ul li').size();

  var expandedSizeClass = 'level0-alerts-expanded-' + alertsCount;
  
  // Update NumAlerts Text
  $('.level0-alerts .alerts-toggle span').text(
    alertsCount + ' Alerts'
  );

  $('.level0-alerts .alerts-controls .alerts-toggle').bind('click', function() {
    var itemsCount = $('.level0-alerts ul li').size();
    if( $('.level0-alerts').hasClass('level0-alerts-expanded') ) {
      $('.level0-alerts').removeClass('level0-alerts-expanded');
      $('.level0-alerts').removeClass(expandedSizeClass);
      switchAlert();
      startAlertsInterval();
    } else {
      $('.level0-alerts').addClass('level0-alerts-expanded');
      $('.level0-alerts').addClass(expandedSizeClass);
      $('.level0-alerts ul li').show();
      stopAlertsInterval();
    }
    return false;
  });
  
  var switchAlert = function() {
    $('.level0-alerts ul li').hide();
    alertsIndex++;
    $('.level0-alerts ul li').eq(alertsIndex % alertsCount).show();
  }

  var startAlertsInterval = function() {
    if(alertsInterval == null)
      alertsInterval = setInterval(switchAlert, alertsIntervalLength);
  }
  
  var stopAlertsInterval = function() {
    if(alertsInterval != null) {
      clearInterval(alertsInterval);
      alertsInterval = null;
    }
  }

  if(alertsCount > 1) {
    $('.level0-alerts .alerts-controls').show();
    startAlertsInterval();
  }
  
});

/*
 * jQuery Placeholder Plug-in
 *
 * Copyright (c) 2010 Max Davis
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 *
 * Revision: 1
 * Version: 0.1
 *
 * v0.1
 * - First public release
 *
*/

(function($){
	
	$.fn.placeholder = function() {
	  $(this).each( function() {
  		if($(this).attr("type") == "password") {
		
  			var original_pass_field = $(this);

  			if(original_pass_field.val() == "") {
  				$(this).parent().append("<input type=\"text\" value=\""+ $(this).attr("placeholder") +"\" name=\"pass_placeholder\" class=\"form-text placeholder-inactive\" id=\"pass_placeholder\">");
  				$(this).css("display","none");
  			}

  			var original_pass_field = $(this);

  			$("#pass_placeholder").focus(function() {
  				if(original_pass_field.val() == "") {
  					$("#pass_placeholder").css("display","none");
  					original_pass_field.css("display","");
  					original_pass_field.focus();
  				}
  			});

  			original_pass_field.blur(function() {
  				if(original_pass_field.val() == "") {
  					$("#pass_placeholder").css("display","");
  					original_pass_field.css("display","none");
  				}
  			});

  		} else {

  			if($(this).val() === "") {
  				$(this).val($(this).attr("placeholder"));
  				$(this).addClass('placeholder-inactive');
  			}

  			$(this).focus(function() {
  				if($(this).val() === $(this).attr("placeholder")) {
  					$(this).removeClass('placeholder-inactive').addClass('placeholder-active');
  					$(this).val("");
  				}
  			}).blur(function() {
  				if($(this).val() === "") {
  					$(this).removeClass('placeholder-active').addClass('placeholder-inactive');
  					$(this).val($(this).attr("placeholder"));
  				}
  			});
  		}
  	} )

	} 
	
})(jQuery);

Hi,

I am hoping I just need to be pointed in the right direction with this.

I have Page1.

When Page1 body onloads it uses Ajax to call PartA

Within PartA I have a message board so members can write messages which will be sent to my database in PartA[1] and immediately posted for view on to PartA[2]. As I want to have my request to the server updating regularly I want to have PartA[2] on a timed loop to refresh - I do not need the content of PartA[1] to refresh.

So the order of events would look like this:
Page1
|
onload call
|
v
PartA
/ \
V V
PartA[1] PartA[2]
(loads once) (constantly refreshes)

What I am not sure about is that I have <body> and <head> attributes in Page1 only. I have already used my body onload to call PartA (and can't use it to call PartA[2] before PartA has loaded anyway).

I do not want the user to have to click a button or do anything to call up PartA[2].

So my question is how would I get PartA[2] to automatically load within PartA?

I hope I have made this clear, but if I haven't let me know and I will try again.

hi;

This is my first post and am abit stuck.

I used JQuery AJAX to get data from a different page and show it in my div.

This all works fine but now i want the page collected by AJAX to execute a Javascript function which is in the page which request the AJAX page.

I have this so far but its not working.
This is in the AJAX-ed page.
Code:

<a href="#" onClick="change_postcode(prompt('Please Enter Your Postcode', 'SW10')");
)">SW10</a>

And the page which requested the AJAX page.
Code:

<script type="text/javascript"> 
function change_postcode(postcode){
$('#view8').html('<p><img src="http://www.MySite.com/images/loading.gif"/><br />Loading! Please Wait...</p>');
  $('#view8').load("http://www.mywebsite.com/include.php?inc=Events&when=&amp;postcode="+postcode);
}</script>

I though about using top but that didn't work. Code:

<a href="#" onClick="top.change_postcode(prompt('Please Enter Your Postcode', 'SW10')");
)">SW10</a>

How can i get my AJAX page to execute a Javascript function which is in the page which contains the the AJAX page.

Thankyou all for reading my post
Paul

P.S Am very sorry for my way with words.