How can I center an image in this kind of script? - javascript

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.

Related

How can I add button (close/stop) on top of the Notiflix.Loading() overlay?

I am using "notiflix" library in my project in which I've used notiflix.loading.pulse() for a long running process and which is perfectly okay but I need a Button (close/stop process) upon overlay of that notiflix.loading().
How can I customise overlay and put Button on it? (Please refer below image which depicts overlay coming on whole page while using notiflix.loading.pulse(), I just want to put HTML button on this overlay)
Please refer this link for notiflix
I don't know exactly what you mean, but you can use the function
Notiflix.Loading.Remove();
And then the loading screen dissapears, i hope my answer is useful :).
Also you can read examples in readme.md file in the github repo.
https://github.com/notiflix/Notiflix

Embedding dynamically sized webpage with javascript

Okay, so first some background info: I am trying to embed a webpage within another page. The sub-page is basically a small web application written in javascript and html that takes in several screens of input (radio buttons, text boxes, etc.) and gives a screen with results at the end. Each of these screens can be a different size.
There are two methods I have tried using to do the embedding:
1) Copy all of the html and javascript from the sub-page into the main page and stick it in a div/table/whatever.
2) Keep the sub-page in its own file and embed it using embed/object/iframe.
Using the first method the page behaves as it should; the only real problem (aside from being kind of a messy solution) is that the sub-page I am embedding is actually generated by an external application, and every so often the page is replaced with a newer version. This more or less rules out using the first method as a long-term solution.
Now the second method has its own problems. Since the embedded javascript page changes in height, the frame that is holding it needs to vary in size with it. I'm able to change the size using any of the solutions given here, however these do not update the size of the frame as the user progresses through each screen.
The closest solution I've been able to come up with so far is using a document.onclick handler to catch any clicking which might cause the next screen of the sub-page to come along. The handler pauses for a very short time (to allow the next screen to come up) and then calls the necessary resizing function. However this feels like a very hacky solution, and there is also a slightly noticeable delay during with the scroll bar shows up on the side of the frame when it hasn't expanded yet to fit the new content. I'm thinking there must be a better way to do this.
If the file is on the same server/domain, you could just load it in with jQuery. Here is some jQuery code:
<script type="text/javascript">
$(document).ready(function() {
$('#id-of-div').load('/path/to/page.html');
});
</script>
Just change id-of-div to the id of the div that you want the page to be loaded into and change /path/to/page.html to the actual URL to the page. (you don't need the domain of it, just the path to it)
I hope this helps.
If this answers your question, please remember to click the checkmark next to this to accept this answer.

How to use jQuery to detect loaded background image after inserting out CSS

I had googled for a long time to find out the solution but failed in the end.
Here comes my detail problems below:
I have a javascript code written with jQuery lib.
$('<link id="userCSS" rel="stylesheet" href="'+link+'" type="text/css" charset="utf-8">').insertAfter("title");
You can find out that we will dynamically load the CSS file from somewhere else.
And then , because the file generated by someone's server is different from person to person, there may have a random css segment like this:
body,html {
background:#000 url(http://i43.tinypic.com/xxxx.jpg) top left no-repeat;
font-family:Arial,Verdana,sans-serif;
font-size:12px;
}
So , here comes a problem ! I hope I can trigger the onload event when background image is loaded but I had tried all ways with no hope.
Does anyone have some related experiences with this and give me a hand !? Thanks :]
No example code, but the best I can suggest is to extract the full url in parentheses, then create an image object, set the source to that url, and then bind whatever you action you want to the onload for that image. I'm not 100% it will work, but I believe that the image will only be downloaded once for both the background and your new image object, firing the event at the correct time.
You may need to also use the event.special.load plugin in case the image in the background gets downloaded before the image object is created. Because if that happens, it'll be coming from the cache which the onload event may or may not handle correctly.

Hide Image Title Tool Tip Popup on Mouse Rollover or Hover

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!

How to force user to not click until javascript has loaded (lightbox)

I have a fairly large js lightbox gallery and an hasty user can click on a thumb before the page has finished loading, this may result in opening the actual image without the "cool" js popup effect.
Are there nice ways of "forcing" the user to wait for the page to finish loading before clicking?
Thank you very much
The best way to achieve this would be to place a transparent or slightly grayed div across the entire page with a very high z-order value so it sits above all other elements.
The trick with this is you want to place it in the native HTML so it is loaded/rendered before any other processing occurs and the user has a chance to react. Then, simply remove it via js once ALL other loading has been done on the page.
Not sure if i get you right:
You could try to put an transparent div or something above your conent, so the user
won't be able to perform clicks. I.e. the clicks won't have the effect undesired by
you - to be more exact. ^^
For this kind of problem, i use archetype.js. He will load all that your page need ( css, templates, javascript ), and then allow the user to do something.
And you avoid to do this by hand ( it can be dirty and not so easy, if you use a lot of javascript )
Inline onclick="return false" for anchor -- easiest way.

Categories