You can put it at the very bottom and wrap it with <script> tags, or
you could put it in the head in script tags like this:
<head>
<script>
$(function(){
..onload code goes here..
});
</script>
</head>
Also $(document.body).appendChild(div); can go after the div is
declared instead. I would suggest you perhaps read some books/
tutorials on javascript and/or jquery to learn more. It is very
different from ASP since ASP is server-side code and javascript is
client-side.
On Apr 10, 4:01 pm, "globalpropertyonline....@gmail.com"
<globalpropertyonline....@gmail.com> wrote:
> Me again....
>
> I tried your code here like this. but it does not seem to work. Any
> pointers ???
>
> <script type="text/javascript">
>
> function mycarousel_itemLoadCallback(carousel, state)
> {
> for (var i = carousel.first; i <= carousel.last; i++) {
> if (carousel.has(i)) {
> continue;
> }
>
> if (i > mycarousel_itemList.length) {
> break;
> }
>
> // Create an object from HTML
> var item = jQuery(mycarousel_getItemHTML(mycarousel_itemList
> [i-1])).get(0);
>
> // Apply thickbox
> tb_init(item);
>
> carousel.add(i, item);
> }
>
> };
>
> /**
> * Item html creation helper.
> */
> function mycarousel_getItemHTML(item)
> {
> var url_m = item.url.replace(/_s.jpg/g, '_m.jpg');
>
> return '<a href="' + url_m + '" title="' + item.title + '"
> myrefval="' + item.myref + '" mydescval="' + item.mydesc + '"
> myCountryURLval="' + item.myCountryURL + '" myCountryval="' +
> item.myCountry + '" myRegionval="' + item.myRegion + '" myTownval="' +
> item.myTown + '" myTermval="' + item.myTerm + '" myAreaval="' +
> item.myArea + '" myagentcodeval="' + item.myagentcode + '"><img src="'
> + item.url + '" width="175" height="125" border="0" alt="' +
> item.title + '" /></a>';
>
> div = $("<div style='display:none'>blah</div>")
>
> };
>
> jQuery(document).ready(function() {
> jQuery('#mycarousel').jcarousel({
> size: mycarousel_itemList.length,
> itemLoadCallback: {onBeforeAnimation:
> mycarousel_itemLoadCallback}
> });
>
> });
>
> jcarousel.find("img")
> .hover(
> function(){
> div.css({display:'block',position:'absolute',left:$(this).offset
> ().left, top:$(this).offset().top+$(this).height()});
> $(document.body).appendChild(div);
>
> },
>
> function(){
> div.css({display:'none'});
>
> });
>
> </script>
>
> On Apr 10, 8:50 pm, "globalpropertyonline....@gmail.com"
>
>
>
> <globalpropertyonline....@gmail.com> wrote:
> > Thank you for taking the time to respond to my question....
>
> > I am not vary good at Javascript and I am learning as I am going
> > along. I do most of my stuff with ASP.
>
> > Could you be so kind to tell me where I would place this code in the
> > code that I supplied ?
>
> > I managed to get this working by changing things and refresh. Takes me
> > a long time, but I learn....
>
> > If you could tell me where to PLACE THIS CODE AND SEE IT IN ACTION, i
> > CAN THEN TRY TO SEE WHAT TO DO AND HOW TO CHANGE IT...
>
> > div = $("<div style='display:none'>blah</div>")
>
> > jcarousel.find("img")
> > .hover(
> > function(){
> > div.css({display:'block',position:'absolute',left:$(this).offset
> > ().left, top:$(this).offset().top+$(this).height()});
> > $(document.body).appendChild(div);
>
> > },
>
> > function(){
> > div.css({display:'none'});
>
> > });
>
> > OR IF YOU CAN, show me how to implement this bit, I will so greatfull.
>
> > Since theimageelements are sort of dynamic it might be better to
> > use
> > live events with mouseover/mouseout, or mousemove
>
> > Thnak you again for your time.
>
> > Hugo
>
> > On Apr 10, 8:22 pm, jay <jay.ab...@gmail.com> wrote:
>
> > > If you want it directlybelowtheimagethe easiest thing to do would
> > > be to position it absolutely to this position when you hover over
> > > theimage. Something like this might work:
>
> > > div = $("<div style='display:none'>blah</div>")
>
> > >jcarousel.find("img")
> > > .hover(
> > > function(){
> > > div.css({display:'block',position:'absolute',left:$(this).offset
> > > ().left, top:$(this).offset().top+$(this).height()});
> > > $(document.body).appendChild(div);},
>
> > > function(){
> > > div.css({display:'none'});
>
> > > });
>
> > > Since theimageelements are sort of dynamic it might be better to use
> > > live events with mouseover/mouseout, or mousemove
>
> > > On Apr 10, 9:54 am, "globalpropertyonline....@gmail.com"
>
> > > <globalpropertyonline....@gmail.com> wrote:
> > > > Hi,
>
> > > > I am playing withjcarouseland trying to showtextbelowmy images.
> > > > Like for example the reference nr or name of theimage.
>
> > > > I am showing images of properties from my database and allow the user
> > > > to scroll through the properties. If they like one, they can click on
> > > > it and it will then show a page with more details on it.
>
> > > > I have tried to addtextbut it seems to show only one character that
> > > > I can see because it is behine the nextimage. I have then tried to
> > > > use the <BR> tagg but this does not move thetextdown.
>
> > > > Here is my code and would you be so kind to try and help me or point
> > > > me in the right direction.
>
> > > > I am not sure if you can add thetexthere or If I have to add it in
> > > > the jquery.jcarousel.js
>
> > > > You can see the test URL here and would apreciate any help or advice.
>
> > > >http://www.somewhere2rent.com/test/
>
> > > > I am not sure what to change in the stylesheet, have tried to make
> > > > some options bigger or smaller but do not realy know.
>
> > > >Belowis code that I have tried to addtextto.
>
> > > > return '<a href="' + url_m + '" title="' + item.title + '" myrefval="'
> > > > + item.myref + '" mydescval="' + item.mydesc + '" myCountryURLval="' +
> > > > item.myCountryURL + '" myCountryval="' + item.myCountry + '"
> > > > myRegionval="' + item.myRegion + '" myTownval="' + item.myTown + '"
> > > > myTermval="' + item.myTerm + '" myAreaval="' + item.myArea + '"
> > > > myagentcodeval="' + item.myagentcode + '"><img src="' + item.url + '"
> > > > width="175" height="125" border="0" alt="' + item.title + '" />Mytext
> > > > here ???</a>';
>
> > > > return '<a href="' + url_m + '" title="' + item.title + '" myrefval="'
> > > > + item.myref + '" mydescval="' + item.mydesc + '" myCountryURLval="' +
> > > > item.myCountryURL + '" myCountryval="' + item.myCountry + '"
> > > > myRegionval="' + item.myRegion + '" myTownval="' + item.myTown + '"
> > > > myTermval="' + item.myTerm + '" myAreaval="' + item.myArea + '"
> > > > myagentcodeval="' + item.myagentcode + '"><img src="' + item.url + '"
> > > > width="175" height="125" border="0" alt="' + item.title + '" /><BR>My
> > > >texthere ???</a>';
>
> > > > <script type="text/javascript">
>
> > > > function mycarousel_itemLoadCallback(carousel, state)
>
> > > > {
>
> > > > for (var i = carousel.first; i <= carousel.last; i++) {
>
> > > > if (carousel.has(i)) {
>
> > > > continue;
>
> > > > }
>
> > > > if (i > mycarousel_itemList.length) {
>
> > > > break;
>
> > > > }
>
> > > > // Create an object from HTML
>
> > > > var item = jQuery(mycarousel_getItemHTML(mycarousel_itemList[i-1])).get
> > > > (0);
>
> > > > // Apply thickbox
>
> > > > tb_init(item);
>
> > > > carousel.add(i, item);
>
> > > > }
> > > > };
>
> > > > /**
>
> > > > * Item html creation helper.
>
> > > > */
>
> > > > function mycarousel_getItemHTML(item)
>
> > > > {
>
> > > > var url_m = item.url.replace(/_s.jpg/g, '_m.jpg');
>
> > > > return '<a href="' + url_m + '" title="' + item.title + '" myrefval="'
> > > > + item.myref + '" mydescval="' + item.mydesc + '" myCountryURLval="' +
> > > > item.myCountryURL + '" myCountryval="' + item.myCountry + '"
> > > > myRegionval="' + item.myRegion + '" myTownval="' + item.myTown + '"
> > > > myTermval="' + item.myTerm + '" myAreaval="' + item.myArea + '"
> > > > myagentcodeval="' + item.myagentcode + '"><img src="' + item.url + '"
> > > > width="175" height="125" border="0" alt="' + item.title + '" /></a>';
>
> > > > };
>
> > > > jQuery(document).ready(function() {
>
> > > > jQuery('#mycarousel').jcarousel({
>
> > > > size: mycarousel_itemList.length,
>
> > > > itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
>
> > > > });
> > > > });
>
> > > > </script>
>
> > > > .jcarousel-skin-ie7 .jcarousel-container {
>
> > > > -moz-border-radius: 10px;
>
> > > > background: #D4D0C8;
>
> > > > border: 2px solid #808080;
>
> > > > }
>
> > > > .jcarousel-skin-ie7 .jcarousel-container-horizontal {
>
> > > > width: 545px;
>
> > > > padding: 20px 40px;
>
> > > > }
>
> > > > .jcarousel-skin-ie7 .jcarousel-container-vertical {
>
> > > > width: 200px;
>
> > > > height: 545px;
>
> > > > padding: 40px 20px;
>
> > > > }
>
> > > > .jcarousel-skin-ie7 .jcarousel-clip-horizontal {
>
> > > > width: 545px;
>
> > > > height: 130px;
>
> > > > }
>
> > > > .jcarousel-skin-ie7 .jcarousel-clip-vertical {
>
> > > > width: 180px;
>
> > > > height: 130px;
>
> > > > }
>
> > > > .jcarousel-skin-ie7 .jcarousel-item {
>
> > > > width: 175px;
>
> > > > height: 125px;
>
> > > > border: 1px solid #fff;
>
> > > > }
>
> > > > .jcarousel-skin-ie7 .jcarousel-item:hover {
>
> > > > border-color: #808080;
>
> > > > }
>
> > > > .jcarousel-skin-ie7 .jcarousel-item-horizontal {
>
> > > > margin-right: 7px;
>
> > > > }
>
> > > > .jcarousel-skin-ie7 .jcarousel-item-vertical {
>
> > > > margin-bottom: 7px;
>
> > > > }
>
> > > > .jcarousel-skin-ie7 .jcarousel-item-placeholder {
>
> > > > }
>
> > > > /**
>
> > > > * Horizontal Buttons
>
> > > > */
>
> > > > .jcarousel-skin-ie7 .jcarousel-next-horizontal {
>
> > > > position: absolute;
>
> > > > top: 65px;
>
> > > > right: 5px;
>
> > > > width: 32px;
>
> > > > height: 32px;
>
> > > > cursor: pointer;
>
> > > > background: transparent url(next-horizontal.gif) no-repeat 0 0;
>
> > > > }
>
> > > > .jcarousel-skin-ie7 .jcarousel-next-horizontal:hover {
>
> > > > background-position: -32px 0;
>
> > > > }
>
> > > > .jcarousel-skin-ie7 .jcarousel-next-horizontal:active {
>
> > > > background-position: -64px 0;
>
> > > > }
>
> > > > .jcarousel-skin-ie7 .jcarousel-next-disabled-horizontal,
>
> > > > .jcarousel-skin-ie7 .jcarousel-next-disabled-horizontal:hover,
>
> > > > .jcarousel-skin-ie7 .jcarousel-next-disabled-horizontal:active {
>
> > > > cursor: default;
>
> > > > background-position: -96px 0;
>
> > > > }
>
> > > > .jcarousel-skin-ie7 .jcarousel-prev-horizontal {
>
> > > > position: absolute;
>
> > > > top: 65px;
>
> > > > left: 5px;
>
> > > > width: 32px;
>
> > > > height: 32px;
>
> > > > cursor: pointer;
>
> > > > background: transparent url(prev-horizontal.gif)
>
> ...
>
> read more »- Hide quoted text -
>
> - Show quoted text -
