My doubt is actually pretty simple. I have an image of a V890 server and on mouseover of that image i want to call a lightbox,which shows the specs of that server.
I cant get the code to work. Also never used 'onmouseover' function before so dunno how to write the code.
I have found a useful lightbox called 'lightwondow'.
<strong>Monster Fixed Page</strong> - This page is just plain to big for the browser window unless you maximize a 30 inch monitor.
I need to add a mouseover to this code.
Any help would be appreciated.
Thanks.
Anand.
i think the lightbox is usually load at the onclick event, you have to change that to be able to lauch it onmouseover.
Open the file lightbox.js an change the line:
anchor.onclick = function () {myLightbox.start(this); return false;}
with:
anchor.onmouseover= function () {myLightbox.start(this); return false;}
By the way i think you ahve to add the rel attribute to the anchor:
rel="lightbox"
HTH!
Related
A very short summary of "why" I need this. I am using PlUpload which lets you upload files using Ajax while providing you back events like percentage, completion, etc. You instantiate the object, then call the "init" (telling it on which ID to "link to") and then add all the event listeners. Since the page which needs the object is created at run time and cannot include JS, I simply created a DIV (which I will make invisible when everything works...) in the main page with the links inside.
This is the link:
<a id="browse" href="javascript:;">Browse</a>
If I click it directly, it works.
When I create the new subpage in real-time, I want the link to be called when the user clicks on an image, like this:
<img onclick="document.getElementById('browse').click(); return false;" src="whatever.jpg">
But it doesn't seem to be working. If I use any other "clickable link" rather than the "browse", it works, so there is no apparent error in the syntax.
Please note that if I modify the link like this:
<a id="browse" onclick="alert('Hello'); return false;" href="javascript:;">Browse</a>
Then I can see the "Hello" popup when I click on the image.
I am a beginner in JS/HTML, so if this is an obvious problem... Sorry ;)
Or if you know of a better solution to the general problem (without jQuery please), I would be grateful :)
This is the init part of the PlUpload:
var uploader = new plupload.Uploader({
browse_button: 'browse',
url: 'newupload.php',
});
uploader.init();
Embed the element inside element and you can click on the image which will do the same effect.
<img src="..."></img>
Instead of using the click() method try using this:
$('#browse').trigger("click");
this should trigger the event of the link instead of listening to the event and if you dont want to use jQuery you can simply do this:
document.getElementById('browse').onclick();
Happy coding!
On a page (we'll call it: domain.com/subdirectory/page.html) I have a link like this:
Link
The new window opens perfectly, but the problem is, the pre-existing window gets redirected to {domain.com}/{subdirectory}/0 and I can't figure out why it's adding the 0 to the subdirectory and trying to go there.
I have tried moving the window.open to the onclick and making the href "void(0)" and even changed it to a span with an onclick, but I get the same results no matter which option I try. All I want is for the new window to pop up and for nothing to happen to the page you're already on.
The same thing happens in IE9 and in Chrome.
The reason I am using the window.open and not target="_blank" is because I also want to remove the menu and other stuff from that window to save space.
Answer Discovered
When I summarized the problem, I simplified my code too much as to make it impossible for anyone to answer (not by intention of course). I apologize for this.
Here's the actual window.open command (minus the URL): window.open('[hidden url]'_blank',height='400px',width='450px',location=0,menubar=0,resizable=0,status=0,titlebar=0,toolbar=0);
The problem was the "location=0". When I read a tutorial on window.open, it said to set this to 0 if I didn't want the URL shown. Personally, I didn't care, but I figured, the more real estate for information display the better. As it turns out, "location" is a URL and not a boolean property.
Once I removed the "location=0" it began functioning as expected/desired.
Thank you for trying to help.
Use an onclick and return false from the event handler:
Link
I also recommend separating your Javascript from your HTML. If you just have the one link you could do something like:
<a id="linkid" href="someurl" target="_blank">Link</a>
Then somewhere before your closing </body> tag and after that link tag:
<script>
document.getElementById('linkid').onclick = function(){
window.open('someurl','_blank');
return false;
}
</script>
You need to put it in an onclick event. You need to also add in return false; to stop the browser from following the link.
Link
jsFiddle of it working.
Here's another, slightly cleaner way to do it:
<a id="link" href="#">Link</a>
<script type="text/javascript">
var link = document.getElementById("link");
link.onclick = function() {
window.open('someurl','_blank');
return false;
}
</script>
I don't know your scenario, but this is probably the ideal way to do it:
<a target="_blank" href="someurl">Link</a>
Clean and simple, and it does the exact same thing.
When I summarized the problem, I simplified my code too much as to make it impossible for anyone to answer (not by intention of course). I apologize for this.
Here's the actual window.open command (minus the URL): window.open('[hidden url]'_blank',height='400px',width='450px',location=0,menubar=0,resizable=0,status=0,titlebar=0,toolbar=0);
The problem was the location=0. When I read a tutorial on window.open, it said to set this to 0 if I didn't want the URL shown. Personally, I didn't care, but I figured, the more real estate for information display the better. As it turns out, location is a URL and not a boolean property.
Once I removed the location=0 it began functioning as expected/desired.
You should try to learn JavaScript. Its really powerful and the basic things aren't very hard to learn.
There is an JavaScript object named window with an attribute (variable) called location. That is the URL of your page so, with the window.open(..., location = 0, ...); you were setting the URL of the page you wanted to open as http://the_page_you_are_calling_from_url/0.
So... yes, you were correct that location was the problem.
If you wish, take a look at Mozilla window API
We use some ajax to update a photo on a page. But afterwards, the slimbox lightbox no longer works. Previously, it does.
I tried doing:
window.opener.slimbox2();
But it immediately opens the lightbox (as in the screen darkens and a white box appears at the middle). What I'd like is just to get the slimbox2 plugin sort of ready, not immediately pop-out. I tried looking at the js code for slimbox2 but it's already the minified version and it seems that the entire function is automatically called as it has this format:
(function () {
// code here
})(jQuery);
How do I call it again?
We have found a solution to our problem which is actually quite simple. On the anchor tag for the lightbox we just added:
onclick='jQuery.slimbox("[Image URL]"); return false;'
So it looks like this:
<a rel='lightbox' href='image name' onclick='jQuery.slimbox("[Image URL]"); return false;'><img src='image source'></a>
This is the jQuery slimbox2 API for more parameters:
http://code.google.com/p/slimbox/wiki/jQueryAPI
You have to call the javascript function which are used to show the light box or slim box whatever you are using. you have to add "window.opener.slimbox2();" when you have a response text code define your popup code there and it will work for you.
If still it's not work provide me code here so i will guide you
For some reason IE won't trigger an onclick event. I have a link in my webpage which should renew a captcha image, but no matter what I try, the onclick event won't trigger. I even tried this to test the onclick event:
<a href="#" id="rc" onclick='alert("test"); return false;'>change image</a>
But nothing happened. I also tried to add the onclick event using js in the window.onload event, same result. All other javascript scripts do work, so js is working. Does anyone has any idea why this doesn't work?
by the way, the event doesn't work in any version of IE, and it does work in any other browser.
Edit: If you want to see the full source, go to: http://www.rosegardenvoorburg.nl/Contact?stackoverflow
The page is in Dutch, but the sourcecode is (of course) HTML, so you must be able to understand that.
edit2: I've found a solution myself, and you're never gonna believe what's wrong:
When I'm logged in to the control panel, a div is added at the top of the page, similar to the one shown in ie7 (which tells you you're browser is too old). However, when I don't add a border to that div, the captcha refresh button doesn't work. This doesn't make any sense at all, but at least I've found a solution...
Try with the below:
<a href="javascript:void(0);" id="rc" onclick='alert("test"); return false;'>change image</a>
Also have a look at Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?
You are doing it in the wrong order
FIRST add the onload, THEN change the source
var cImg;
function renewCaptcha(){
cImg = new Image();
cImg.onload=function(){document.getElementById("captcha").src = cImg.src;};
cImg.src='/Img/captcha/securimage_show.php?' + Math.random();
}
Few tips to ponder!
check if javascript:alert("test") on your ie address bar pops up the message.
Also check and make sure that javascript option is not turned off.
You may also want to reset your ie settings and see if it work.
Also try to see if same works on your fellow colleague's computer.
I'm changing the image src of an image node.
I want to be able to make sure that it's changed before executing somecode. How would i do that?
right now i have
function changePic(imgNode, newPic, desc){
var descNode = $("#description");
$(imgnode).fadeTo(500, 0, function(){
$(imgnode).attr("src", newPic);
$(imgnode).attr("alt", desc)
descNode.text(desc);
$(imgnode).fadeTo(500, 1);
});
}
Works great if the server's fast/ a local server. Works terribly if the server's slow, where the image will fade back in before changing...
any idea?
Edit: I'm loading the image when changePic is called. Any better ways to do it?
More: Also why is it not a good idea to put the last line,
$(imgnode).fadeTo(500, 1);
, outside of the callback function?
Preload the image, but to be sure it's completely loaded, use the .load() event.
Quote:
The load event is sent to an element
when it and all sub-elements have been
completely loaded. This event can be
sent to any element associated with a
URL: images, scripts, frames, iframes,
and the window object.
And don't miss this line:
It is possible that the load event
will not be triggered if the image is
loaded from the browser cache. To
account for this possibility, we can
use a special load event that fires
immediately if the image is ready.
event.special.load is currently
available as a plugin.
I put together an example of how I think you want it to work. I switch between three images I found through Google Images. I bind the load event before I change the src of the image to be sure it's triggered.
http://jsfiddle.net/xdjjR/1/
I guess, you can preload image in hidden elements, so that it's loaded with other html. When the source changed such image should be shown immediately.
Use the callback param
doc
ex from doc:
$('#clickme').click(function() {
$('#book').fadeOut('slow', function() {
// Animation complete.
});
});