modifying cool dhtml tooltip

[mickkmg]

greetings!

i am glad i found this site, it has helped me in my learning process in web developing.

however i wish to pick all y'all brains for this one...

I have an automatic fade slideshow going, and have assigned the cool dhtml tooltip for each images...

the script: <a href="http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.htm">cooldhtmltooltip</a>

i just want to know if its possible to add timer function to the tip so i can get them to change dynamically with the slideshow.

many thanks!!

MK

[jscheuer1]

I'd use the timer function of the slideshow for that.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

[mickkmg]

ah of course, my apology

here's the test page i use:

http://www.suryaprasetya.com.au/portfolio/test-page/

many thanks

MK

[jscheuer1]

Change this:

<script type="text/javascript">
$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){
      $('.fadein :first-child').fadeOut()
         .next('img').fadeIn()
         .end().appendTo('.fadein');}, 
      3000);
});
</script>

to:

<script type="text/javascript">
$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){
      $('.fadein :first-child').fadeOut()
         .next('img').fadeIn(function(){
		if(tipobj.style.visibility === 'visible'){
			this.onmouseover();
		}
	})
         .end().appendTo('.fadein');}, 
      3000);
      $('.fadein').mouseleave(hideddrivetip);
});
</script>

And, in the class="fadein" division, get rid of all of the onmouseout events. Make it like so:

<div class="fadein">
 <img src="http://www.suryaprasetya.com.au/files/gimgs/79_013_v2.jpg" onmouseover="ddrivetip('Ari Prasetya (Identity)', '#ffffff')";
 onclick="location.href='http://www.suryaprasetya.com.au/portfolio/ap-identity/';" style="cursor: pointer;">
 <img src="http://www.suryaprasetya.com.au/files/gimgs/64_008.jpg" onmouseover="ddrivetip('Thursday Sunday (Lookbook)', '#ffffff')";
 onclick="location.href='http://suryaprasetya.com.au/portfolio/ts-lookbook-ss-11/';" style="cursor: pointer;">
  <img src="http://www.suryaprasetya.com.au/files/gimgs/51_008_v2.jpg" onmouseover="ddrivetip('Concrete Soul (Publication)', '#ffffff')";
 onclick="location.href='http://suryaprasetya.com.au/portfolio/concrete-soul/';" style="cursor: pointer;">
<img src="http://suryaprasetya.com.au/files/gimgs/29_002_v2.jpg" onmouseover="ddrivetip('Chronicle (Branding & Packaging)', '#ffffff')";
 onclick="location.href='http://suryaprasetya.com.au/portfolio/chronicle/';" style="cursor: pointer;">
</div>

But I think the whole thing would be more effective it it simply paused on mouseover:

<script type="text/javascript">
$(function(){
    var pause;
    $('.fadein img:gt(0)').hide();
    setInterval(function(){
      if(pause){return;}
      $('.fadein :first-child').fadeOut()
         .next('img').fadeIn(function(){
		if(tipobj.style.visibility === 'visible'){
			this.onmouseover();
		}
	})
         .end().appendTo('.fadein');}, 
      3000);
      $('.fadein').mouseenter(function(){pause = true;}).mouseleave(function(){pause = false; hideddrivetip();});
});
</script>

[mickkmg]

Hey John

Thanks so much! You've been a great help, understanding what I exactly was saying.

Now I know where to go when I'm stuck in javascripting

Alright where do I send the beer to?

Speak soon John, thanks again!

MK

[mickkmg]

another question, I'll just post it in here rather than creating new page...

using the same script, can I integrate this into Wordpress? have tried couple times but it just won't work. Would really like to keep it in jQuery form rather than having to convert to PHP.

Thanks John!

MK

[jscheuer1]

I don't use Wordpress. But it uses PHP, so if you want to use any javascript in Wordpress, it needs to be used with respect for the PHP in use to create the page in Wordpress.

But the scripts still go on the page with the external tag to jQuery before the code in these posts (preferably in the head of the page, but it can go in the body, just not inside the markup used by the script), and the markup still goes in the body of the page. Most importantly perhaps is that the paths to the images must be accurate. If there's any doubt, you may use the absolute path.

A Wordpress page is the same once it gets to the browser as any other page. If any of the code on it is so far off as to make it impossible for the browser's error correction routines to render it as desired, it won't.

For instance, there should be only one external script tag to jQuery and it has to come before all of the scripts that use it.

You can check to see what is getting sent (served) to the browser by using the browser's 'view source'. If that doesn't look right you need to change the includes and/or other code that goes into making up the Worpress page until it does.

It can help to mark the includes with comments so you know where each begins and ends in the finished code served to the browser.

If you're still having problems post a link to the page.

[mickkmg]

ah no worries.

have decided to keep my current cms as it is working fine as it is. after all, if its not broken why fix it?

thanks again John

[mickkmg]

hello again!!

After implementing this script on a friend's page, another friend has come up with a request to implement this system with a slight modification to it.

basically we want the same concept of slideshow, without the timer and automatic slide, but with arrows for next and previous.

after reading that again, we basically want a simple slideshow i think :/ but i like the simplicity of this slideshow, we basically just stack images and create the slideshow

the reason i need this is because we are going to have 3 or more slideshow on one page for different projects.

any pointer and suggestions would be much appreciated!

thanks!

[mickkmg]

hi again!

still waiting on reply, i should probably show an example

its basically like this :

http://mathiasbynens.be/demo/slideshow

but with navigation (arrows for prev and next) and no auto slideshow

many thanks