Develop Reference

Onmousedown / OnmouseUp issue with website

I'm trying to make my arrows (image files) change color when clicked with this code:
<img id="imag" src="img/left.png" onmousedown="DownLeft()" onmouseup="UpLeft()">
<img id="img" src="img/right.png" onmousedown="mouseDown()" onmouseup="mouseUp()">
<script>
function mouseDown() {
document.getElementById("img").src="img/right-hover.png";
}
function mouseUp() {
document.getElementById("img").src="img/right.png"; }
function DownLeft() {
document.getElementById("imag").src="img/left-hover.png";}
function UpLeft() {
document.getElementById("imag").src="img/left.png";} </script>
The idea is when the one of the images is clicked they will turn blue as long as they are clicked but the code does just work for the right.png image and I have tried so many things to make it for both but with no luck! Am I overseeing something? I will very much appreciate some answers or help.

If the image is clicked, the page change or the page refresh so you must use php to know if the link was cliked or not and change the image.

I don't know what the error was, but when I tried again with the same code as above a couple minutes after posting the question here it just worked! So no problem anymore

jquery lazy loading plugin

I am creating a portal using large number of images. For smoothness I add lazy loading plugin to this portal
This is the plugin http://www.appelsiini.net/projects/lazyload
I used this code for initializing the plugin:
$(function () {
$("img.lazy").lazyload({
effect: "fadeIn"
});
});
Image url is like this:
<a href="#">
<img src="/public/images/dflt_03.jpg" data-original="<?php echo $this->magImg;?><?php echo $top['img_path'];?>" width="180" height="230" alt="cover" class="lazy">
</a>
This worked perfectly. But my problem is that after loading the page there is no image for displaying. after mouse scroll takes place this will show images. I want to show some images before it will be scrolled.

There is no markup provided of your html page, but since the concept of lazy loading is that images get loaded only when needed, that is when they appear in the viewport, probably triggering a scroll or resize event on window or body should work. Try any of these after page load (or, better, when lazy loading complete callback gets called):
$("html, body").trigger("scroll");
$(window).trigger("resize");

See the fix proposal here
I checked the plugin and changed this line in the update method:
if (settings.skip_invisible && $this.css('display') === 'none') {
//if (settings.skip_invisible && !$this.is(":visible")) {

Hover fast slideshow error

I have a slideshow and I have links to the images on the slideshow.
When the mouse enters the links, the slideshow pauses and plays when the mouse leaves.
My problem is that the slideshow appears to get faster and faster when you quickly move the mouse across the links.
function begin_slideshow() {
some code
}
and the mouse enter/leave function
element.on('mouseenter', function () {
var url = $(this).data('loc').replace('_t', '');//grabs the image
fig.attr("src", url);//changes the source
$('.shown').removeClass('shown');//the link that can be seen has a class of shown
$(this).addClass('shown');//adds class of shown to the now showing link
clearTimeout(timer);
}).on('mouseleave', function () {
timer = setTimeout(begin_slideshow, 5000);
});
I think the problem lies in the hover somewhere, hopefully you can help :) as I am truly stuck.
EDIT
http://jsfiddle.net/uYMkr/8/

I would assume your problem would lie in the timeout. However it seems correct. Therefor I would think the problem exists in either your usage of the slideshowcode, or in the slideshowcode itself. Can you post that?

jQuery: how to implement this roll-out effect?

I need some help to implement this roll over / out effect.
This is the screenshot: http://dl.dropbox.com/u/72686/roll-over-out.png
I have a menu. When I roll over the item "Products" the popup block appears below it, with a tree with all products.
<div id="menu">
<div id="product"> Roll over here </div>
...
</div>
<div id="popup">
<div> <a> link </a> </div>
<div> <a> link </a> </div>
<div> <a> link </a> </div>
...
</div>
This block has css:
#popup {
position:fixed
display:none
}
Now, it is clear how to implement roll over to show the block:
("#product").mouseover(function() {
$('#popup').css("display","block");
})
However how can I handle the rollout ? I have the following issues:
1) If I add roll-out to the menu item "#product", when I roll-out from it (to move to the popup with product trees), I make this last one to disappear (because I'm leaving the menu item).
2) If I add roll out functionality to the popup, I have issues with his children. i.e. If I move the mouse over a link of the tree, the popup disappear (because I'm leaving the parent #popup).
thanks
ps. I cannot use :hover (it is not supported by jquery version on Drupal CMS).

Firstly I think you will find that mouseenter and mouseleave are better events for this kind of thing. See the jQuery example in IE to understand why, not a huge problem but you may end up wit flickering otherwise.
However that will still not solve your problem. I would suggest use a setTimeout to close the menu, and then if your mouse enters the menu before the time out cancel the time out:
var t;
$("#product").mouseleave(function() {
t = setTimeOut(function(){$('#popup').hide();}, 100);
})
$("#popup").mouseenter(function() {
if(t)
{
clearTimeout(t);
t=null;
}});
This will prevent the popup from closing if you move from the product element to the pop up element. The clear timeout method prevents the timeout function from being executed.

Thorough Tutorial: Drop down menu

I have created similar solution, you can check it out here. See the demo here.

By the way, :hover isn't jQuery - it's CSS.
http://www.w3schools.com/cssref/sel_hover.asp

Expanding videoplayer like CNN-website, prerably jQuery-based

I'm wondering if anyone knows of a script/plugin, jquery-based or otherwise, which could be used to achive the effect that can be found on CNN.com.
I'm talking about the videos that are representet by a small thumbnail, that when clicked expands in to the text and plays.
I'm by no means a JS-guru, and me and flash isn't the bestest of friends, but I'm not completly cluess.
Essentially, what im looking for is a way to click a thumbnail, expand a swf, and stop it if i contract it again. something like that.
ANY ideas, tips or insights are welcome!

A simple approach would be replacing the content of a div with the Flash video when clicked:
HTML
<div id="video-001">
<img src="video-thumb.jpg" />
</div>
jQuery
$('#video-001').toggle(function() {
$(this).html('<object whatevergoeshere...></object>');
}, function() {
$(this).html('<img src="video-thumb.jpg" />');
});
This is a simple example but it can be improved a lot, maybe by inserting the image as the div background, saving the code in the cache of the element (with .data()), adding the click event to all div with a specific class...
Hope it helps :)