Thanks Brian.
Could you have a look at this and tell me where I am going wrong or
could you tell me where to place the information as I have done the
following and can still not get it right.
I will realy apreciate your help.
Thanks
Hugo
Here is what I have done :
I have now added the function as follows in the head and tried the
following two lines at three different places but still no luck. The
errors seems to have gone away now , but I do not see the Bla.
div = $("<div style='display:none'>blah</div>");
$(document.body).appendChild(div);
1) I have put the two lines in the function but no luck,
2) I have put the two lines in the fuction below the Return HTML Get
Element but no luck.
3) I have put it in its own javascript tags below the declaration of
the div as it is but no luck.
This is the function now in the head. You can see my code source
here.
http://www.somewhere2rent.com/test/
I have also made the image smaller just in case the text is behind
the
image.
<script type="text/javascript">
$(function()
{
whatever(); {
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>
<body>
<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>
</body>
</html>
ANy more help will be apreciated.
On Apr 11, 4:29 am, brian <bally.z...@gmail.com> wrote:
> 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 + '"
>
> ...
>
> read more »- Hide quoted text -
>
> - Show quoted text -
