I'm hoping I can get this question answered here...
I have a client who wants to add a PayPal "Add to Cart" button inside a Lightbox window. I was able to achieve this by placing the PayPal code inside the image title tag.
Not sure if this was the best way, but it worked.
However, here is my problem...
Now when you mouse over the image thumbnail the image title tooltip popup displays the PayPal code. Not good...
Is there a way to disable this feature? Can I tell browsers to not display this popup?
Here is the link (I only applied the code to the first two photos):
http://lancemissionart.com/index.php?Page=gallery&title=fof&gallery=msd
Thanks!
I would modify lightbox to use a different attribute instead of title, like paypalForm. Modification on line 398 of lightbox.js.
398: imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('paypalForm')));
The other option would be to only set the title attribute onMouseDown and setting it back to empty string when the lightbox is closed.
You should change from using Lightbox to Thickbox (looks like you might be experimenting with it in your code). Lightbox is for images only (even though you've made it work its pretty ugly putting all that in the title tag and pretty wrong), Thickbox will let you include your form.
http://jquery.com/demo/thickbox/
Thickbox it is not maintained any longer!
Related
i want to open html href link files in message box or any display box.( sorry i dont know, exact word for box.)
is there any way to open href links in any kind of display boxes.? i need answer only in JavaScript technology. Help me
I don't think an alert() or confirm() or any other built-in browser dialog box can display more than just simple text. But you can have any HTML content you want in a modal div dialog. The jQuery UI Dialog is a popular example. You don't need to use that plugin, though it would make it easy.
Essentially you just render a hidden element to the page (commonly a div) and respond to some page event by styling the element to "float" over the rest of the page. That element, since it's part of the DOM like anything else, can contain any HTML you'd like.
Take a look at jQuery's fancybox -> Fancy Box
well depending on how you building your web app. You could integrate twitter bootstrap, it has tons of great JavaScript plugins. a modal might solve your problem.
http://getbootstrap.com/2.3.2/javascript.html#modals
Alternative you can uses a lightbox, I see someone has already mentioned fancybox. The second version is now out.
its supports images, iframe, and divs as conetent
http://fancyapps.com/
im new to javascript and jQuery in general,
I have a html openened in Shadowbox with something like
Argentina
Inside that html i have a link to another html that i want to display in the same shadowbox, but it's size is bigger.
How could i resize the shadowbox so that the second html it's not cutted off?
I've read something about
function openSB(path,width,height){
but i dont know how to make it work
Thanks
http://www.victorstanciu.ro/dynamically-resizing-the-shadowbox-js-modal-window/
"The reason you might want to manually resize the modal window is in case the content inside changes, for example in the case of IFrames. Fortunately, implementing such a method is quite easy."
You don't say what version you're using, but a comment on that page offers a solution for version 3 also: http://codestory.a-chantioux.fr/dynamic-resize-with-shadowbox-js/
I am quite a newbie web development having basic knowledge in HTML CSS and JavaScript. I have a small blog page, which allows users to upvote a title of a blogpost - similar to what SoF has on its questions.
So, the problem I am facing is that I am unsure how I should change the icon (which I have in a sprite) once the user has clicked on it. So, in a nut shell
(Page1) icon1.png --> User Clicks --> (Page1) icon2.png
where icon1.png and icon2.png are in my sprites.png
I think JS is the way to go for this - but I was wondering if it is (is doing some sort of AJAX the way to do it?)- any directions would be much appreciated.
Thanks.
$(function(){
$('#SELECTOR').click(function(){
$('#icon1').css('background-position','0px, 120px') //whtever bg position
});
})
You can use javascript as below.
On click set background image position.
document.getElementById('SELECTOR').style.backgroundPosition='0px 150px';
where SELECTOR is the element's ID on which you want to change image position
As per you said you have sprite image so you just need to set image position accordingly.
To make things easy, here's the site - http://schnell.dreamhosters.com/folio/pixelread.php View the source code all you like.
The middle button of the top bar in your browser window that says "Palette" is supposed to open up a fancybox in the middle of the screen, and that box should load into it the data inside the element with id of 'data', but it doesn't and comes up with an error message of "The requested content cannot be loaded. Please try again later." I took this example straight from the fancybox website and double-checked that all the CSS, image and JS files are in their proper place and loaded. So now I'm lost and no idea how to do/fix this.
PS - I use Google Chrome 6.0. I'll see if this happens in IE8 or Firefox.
PPS - Found a solution. I can force the HTML content that goes into a fancybox by using the 'content' property. Using that and jQuery I can easily stuff a box with whatever I want. Thanks for the help guys.
Found a solution. I can force the HTML content that goes into a fancybox by using the 'content' property. Using that and jQuery I can easily stuff a box with whatever I want. Thanks for the help guys.
I think the problem is that fancybox isn't recognizing your content as being inline (not exactly sure why, but maybe something to do with the query string in the url, since it works when that isn't present).
I would try adding the explicit type: inline to your fancybox declaration:
$("a#inline").fancybox({'type':'inline'});
I've tried various approaches,
I've no clue how to do it without destroying the script or rescripting it all.
Here's a link to the page: http://hem.bredband.net/noor/bildspelet.html
You need to click the edit button on the top left, put 2 URLs to pictures, take these e.g.
http://barcelona.magicka-evropa.cz/images/fc-barcelona.jpg
http://tux.crystalxp.net/png/uttaresh-fc-barcelona-13276.png
You'll notice the pictures aren't centered.. I haven't put in any code to center it in the example.. How can i go about to do that?
It appears that you're using the jQuery Cycle Lite Plugin. If so, the plugin provides an event called "after" which you would want to listen to.
In that callback, you would want to check if the image is downloaded already or not. Once its downloaded, you would execute your logic to center the image.