jQuery Forum

I' m trying to build a newswebsite with on my homepage 4 highlighted articles. The 4 photos belong to the 4 titles on the right: www.aclebbeke.be. When an image is displayed, the correct item on the right should be highlighted...

Suggestions how to do this?

Hi, I have this problem on http://www.aclebbeke.be/. jScrollpane works properly, but there' s one annoying error in it: When clicking the first element within the scrollpane, it "jumps" one element down.

Thanks for your help!

I' m trying to create a simple onmouseover/onmouseout effect. The point is to display 5 of the latest news messages. When hovering, I want it to collapse so you can see 10 of the latest news messages, and display 5 news messages when you get out of the box again.

Now, this works, BUT, there' s one problem I can' t seem to fix. When going over this box, it automatically starts to open and close in some kind of loop. Stopping all animations before the next one starts doesn' t seem to help. What did help, was put an "alert"-box after the animation. Then it did the right thing. I' ve tested this in Firefox, IE8 and Chrome.

Anyone who can help me with this?

Hi,

I' m working on this website, which needs it' s own controls to go through the slides. The plugin I' m working with is Nivo Slider, and it generates a simple navigation for me. Here' s the url to the website: http://www.aclebbeke.be/. What I want to get, is that when I move over one of the blue items on the right, the image of that item should appear. When I move out, the slideshow should continue on it' s own. Also: the navigation in the bottom left of the picture should still keep on working.

I can' t really find something simular on the forum, or on the website of Nivo Slider. Is it possible, and if so: how?

Thanks for any help!

Hi all,

I have about 30 users, displayed on a page. What I want is that when one user gets dragged and dropped on another user, you automatically get redirected to a page "compare.php?id1=x&id2=y". I' ve been thinking/searching on how to do this, but can' t seem to find a decent solution.

All items have the classname "user". This is what I tried to do:

1. $(".user").draggable();
2.       $(".user").droppable({
3.             drop: function( event, ui ) {
4.                    document.location = "compare.php?id=" + $(this).attr("userhighlighted").innerHTML;
5.             }
6.       });
7. })
   

In "userhighlighted" I hold the userID. The HTML looks like this:

1. <div class='user'>
2.       <a href="profiel.php?id=userID">
3.             <img src="link" title="Firstname Name" />
4.       </a>
5.       <div class='user_info'>
6.             <p><a href="profiel.php?id=userID"> Firstname Name</a><br />
7.             <span class='small_grey'>Senior/Junior/...</span></p>
8.       </div>
9.       <div id="userhighlighted" style="width: 0px; height: 0px; visibility: hidden;">UserID</div>
10. </div>
    

Anyone who has an idea?
Thank you very much!

Hi,

I use the BetterTooltip - plugin to display some title-text when hovering an image.
Internet Explorer (7) is showing it just fine, but Firefox aligns the tooltip at the top of my page, while the image is somewhere 600-700px deep on the page.

The image is aligned in a table, behind some text and looks something like this:

1. <img src="images/info.png" title="This is some text" class="abo-info" />

So when I hover it, a tooltip has to pop up saying "This is some text".

My script:
$(document).ready(function(){
      $('.abo-info').betterTooltip({speed: 150, delay: 100});
});

With following CSS for the tooltip:

1. .tip {
2. width: 360px;
   
3. padding: 5px;
   
4. display: none;
   
5. position: absolute;
6. margin -top: 56px;
   
7. margin-left: 50px;
   
8. color: #FFF;
   
9. font-weight: bold;
   
10. font-size: 12px;
    
11. background-image: url(images/tooltip-bgr.png);
    
12. padding-left: 15px;
    
13. background-repeat: no-repeat;
    
14. float: left;
    
15. bottom: 0px;
16. }

The class abo-info doesn' t really have much css. This is what it looks like now:

1. .abo-info {
2. cursor: pointer;
   
3. display: absolute;
   
4. margin-left: 5px;
5. }

I' ve already tried without the absolute, and with a display: block: doesn' t work.

Thanks for helping me out here!