There's no need for body onload="" when using jquery. As long as the
library is included, you need only do:
$(function()
{
whatever();
});
Here, the whatever() function will run as soon as the DOM is loaded
(generally, this occurs before the page is displayed).
On Fri, Apr 10, 2009 at 11:07 PM, globalpropertyonline....@gmail.com
<globalpropertyonline....@gmail.com> wrote:
>
> Thanks Jay,
>
> I have put a function Load() in the head and called it in body onload.
> and then add the two lines in Javascript just below the Div is
> declared but it seems to have a javascript error and no Bla is
> displayed.
>
> I tried to change a few things but no luck.
>
> This is what I have done.
>
> <script type="text/javascript">
> function load()
> {
>
> jcarousel.find("img")
> .hover(
> function(){
> div.css({display:'block',position:'absolute',left:$(this).offset
> ().left, top:$(this).offset().top+$(this).height()});
> },
>
> function(){
> div.css({display:'none'});
> });
>
> }
> </script>
>
> </head>
>
> <body onload="load()">
>
>
> <div id="wrap" align="center">
>
> <script type="text/javascript">
>
> div = $("<div style='display:none'>blah</div>");
> $(document.body).appendChild(div);
>
> </script>
>
> <ul id="mycarousel" class="jcarousel-skin-ie7">
> <!-- The content will be dynamically loaded in here -->
> </ul>
>
> </div>
>
> On Apr 11, 12:49 am, jay <jay.ab...@gmail.com> wrote:
>> 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 {
>>
>> > > > > }
>>
>> > > > > /**
>>
>> ...
>>
>> read more »- Hide quotedtext-
>>
>> - Show quotedtext-
