Tech-Today
Recently I've just wanted a nice rollover caption implemented on our wedding invitation website, such on a list of wedding invitations, when you hover on one, a caption will be shown. Of course, there are some wedding invitation categories that would have more cards than others so we need paging. And I implemented the paging using ajax calls. This is the part that complicates everything since the caption library should only be called once all the images are loaded.
At first I tried window load function, it worked on all the first page. But on pages with paging, it failed. So if you have a case where you only display the image on 1 page you can try:
But what really work, is on the page (below) where the images are rendered (im my case it's a partial view). I've insert the following script:
FYI, I've used the ff library:
Image caption script (jquery): http://code.google.com/p/jquery-imageoverlay/
Wait for all images script (jquery): https://github.com/alexanderdickson/waitForImages/blob/master/README.md
To see how it actually work, you can look at the ff website: http://kalidadprintsandfavors.com/wedding-invitations/wedding-invitations
- How To Create A Data Table In Angular Using Ngtable
I'm trying to evaluate front end frameworks since it's becoming more and more popular lately (I'm more of a backend developer using primefaces). And so I'm looking at angular2 and react, but in this tutorial we will be trying to develop...
- How To Change Jquery's Dialog Button Label At Run Time
Recently I've used a 3rd party jquery library that pops up a jquery dialog with form content. However if has a default button Save and Cancel, which most of the time is ok, but sometimes you have need to localized or change the label depending on...
- Adding Loading Screen To C# Mvc Ajax Dialog Form Using Jquery
With my experience from telerik, I want my entity's add and edit form to be a popup so I don't have to change screen. I'm using C# MVC3, so I tried to look for jquery add on that would do the job. Fortunately I've come up with this article:...
- Jquery Document.ready $("#controlid") Is Null Error
I'm working on a script that uses jquery and it's working normally on a simple page that I made. However when I create a master page in c# and put the jquery code in the page that extends the master page I get this error: $("#controlId") is null...
- How To Make Uploadify Work On Codeigniter
Recently, I have a requirement to implement a multiple file upload in one of my project. During upload I also need to pass a variable which will classify the category of the uploaded files. The category is a dropdown control. What we need: 1.) codeigniter...
Tech-Today
Jquery wait for all the images to be loaded before calling an action, such as image caption
Recently I've just wanted a nice rollover caption implemented on our wedding invitation website, such on a list of wedding invitations, when you hover on one, a caption will be shown. Of course, there are some wedding invitation categories that would have more cards than others so we need paging. And I implemented the paging using ajax calls. This is the part that complicates everything since the caption library should only be called once all the images are loaded.
At first I tried window load function, it worked on all the first page. But on pages with paging, it failed. So if you have a case where you only display the image on 1 page you can try:
$(window).load(function () { $("#templates").ImageOverlay({ border_color: "#6f5140", overlay_text_color: "#FFF", overlay_color: "#6f5140" }); });
I'm assuming you have a div with "templates" id, which contains images element for the image caption library mentioned below. But what really work, is on the page (below) where the images are rendered (im my case it's a partial view). I've insert the following script:
$('#templates').waitForImages(function () {
$("#templates").ImageOverlay({ border_color: "#6f5140", overlay_text_color: "#FFF", overlay_color: "#6f5140" });
});
FYI, I've used the ff library:
Image caption script (jquery): http://code.google.com/p/jquery-imageoverlay/
Wait for all images script (jquery): https://github.com/alexanderdickson/waitForImages/blob/master/README.md
To see how it actually work, you can look at the ff website: http://kalidadprintsandfavors.com/wedding-invitations/wedding-invitations
- How To Create A Data Table In Angular Using Ngtable
I'm trying to evaluate front end frameworks since it's becoming more and more popular lately (I'm more of a backend developer using primefaces). And so I'm looking at angular2 and react, but in this tutorial we will be trying to develop...
- How To Change Jquery's Dialog Button Label At Run Time
Recently I've used a 3rd party jquery library that pops up a jquery dialog with form content. However if has a default button Save and Cancel, which most of the time is ok, but sometimes you have need to localized or change the label depending on...
- Adding Loading Screen To C# Mvc Ajax Dialog Form Using Jquery
With my experience from telerik, I want my entity's add and edit form to be a popup so I don't have to change screen. I'm using C# MVC3, so I tried to look for jquery add on that would do the job. Fortunately I've come up with this article:...
- Jquery Document.ready $("#controlid") Is Null Error
I'm working on a script that uses jquery and it's working normally on a simple page that I made. However when I create a master page in c# and put the jquery code in the page that extends the master page I get this error: $("#controlId") is null...
- How To Make Uploadify Work On Codeigniter
Recently, I have a requirement to implement a multiple file upload in one of my project. During upload I also need to pass a variable which will classify the category of the uploaded files. The category is a dropdown control. What we need: 1.) codeigniter...