I am adapting the Coverflow technique to work with a div. The coverflow function (included as a js file in the head section) is here. When I dynamically add a DIV, it doesn't show up in the coverflow. I am wondering if there is a way to add a destroy function to this js file so that whenever a new div add is added, I can call the destroy method and then reinstantiate. Any suggestions on how I should go about doing this?
I wasted a lot of hours trying to come up with a good technique but finally this seems to work. If you're passing a div to the function like this:
$("div.divname").coverflow({});
Then, do this when you add a new DIV:
addDiv();
divBackup = $("div.divname")
$("div.divname").remove()
$("parentdiv").append(divBackup)
$("div.divname").coverflow({});
If anyone has a good suggestion, please feel free to add it. Until then, figured this would help someone facing the same problem.
Why this works?
When you remove and add the div, all the eventhandlers are destroyed as well. So, the next time you call the coverflow function, it reattaches to everything that is present. Beware though! If you attached other handlers, they will be lost as well. I know this is not the optimal solution but use it if you have no other option.
Related
Here's what I'm trying to do:
I am doing a few things to my text input via "oninput=myFunction()"
When I start typing I wanted to do a few things:
I have the function removing a few elements and adding a textNode already, however, I need it to add 35-40 lines of HTML as well.
Would this be bad to do?
I'm not exactly sure how I should set it up to call this HTML through the function yet.
What's the best/cleanest way to go about doing this?
Should I just keep the HTML wrapped with a hidden display:none class, and have the function add a visible class?
I feel like that wouldn't be the best method, so that's why I'm here asking!
Any advice is appreciated. I'm typing on my phone so sorry if I wasn't very clear.
The better way in my opinion is have a script that will add your event handler after the element is ready (after page load). This function should take care of creating and removing any element that are part of the script on the fly.
Doing this will make sure your HTML is clean and that the JavaScript will do what it is responsible for. There are good ways to create HTML with JavaScript by using methods such as document.createElement and document.createTextNode. When your elements are created, you can append them in the right positions.
To help get the best rendering on all browsers, it is usually a good practice to make your elements display: none before everything is ready to display.
How can I add this function to something: http://awesomescreenshot.com/0ec17ri8dc
Its from this page.
Notice when you click on it a popup appears with the generated html to add the code somewhere. Have ben unable to find a good google search query that doesn't bring up irrelevant pages.
Thanks in adv.
Here's a quick solution.
If you know some basic jQuery you won't have problems with understanding the code but feel free to ask if you need any help.
Keep in mind that the code won't trigger a pop-up, it's just to get the embed code. I'd suggest using some plugin for this, fancybox is a good one.
I'm writing a userscript. What I'm trying to do is really simple. I need to block the UI while the script does some background tasks. I saw this method in another SO question and I changed it a bit to suit me.
Check this fiddle. When you click on the button, it covers up the UI.
Now since this is gonna be used on a webpage, I need to inject the following HTML part to the webpage through the script.
<div id="blocker">
<div>Loading...<img src="http://www.socialups.com/static/images/fbinventory/ajax_loader.gif"></div>
</div>
I did it like this.
var blockUI = document.createElement("div");
blockUI.setAttribute("id", "blocker");
blockUI.innerHTML = '<div>Loading...<img src="http://www.socialups.com/static/images/fbinventory/ajax_loader.gif"></div>'
document.head.appendChild(blockUI);
Check this fiddle for a clear idea.
But it does not work. I tried several ways to tackle the problem but to no avail .Can anyone please point out what I'm doing wrong here?
Thank you.
P.S - I need to do this without using jQuery or the library blockUI.
You are trying to append stuff to head; append it to body instead.
http://jsfiddle.net/dAKQX/
Don't put the block div in the head section of your document. Use document.body.appendChild(blockUI); instead.
you need to append your div to the body of the document. See: http://jsfiddle.net/zkzQy/1/
or like this in your code:
document.body.appendChild(blockUI);
I'm trying to create a voting/polling system and I want to make sure my idea is even possible before I dig in. I really like how the Colorbox examples look and work for a "popup" window/display, and I'm also really interested in this jqBarGraph plugin for displaying voting results. What I'd like to do when the user votes, is have the Colorbox "popup" come up and have the animated bar graph show up inside. I'm not sure how this would be implemented because in the examples of jqBarGraph that I've seen, the "graph" gets hooked up to a <div> tag or some other element. I know you can set up inline HTML in the Colorbox so maybe I would need to set up my <div> element with that, and then have the jqBarGraph use it?
So my question is: Is it possible to 1) Execute javascript when initializing my Colorbox (maybe in onOpen:function(){ ?) and 2) Is there a (easy?) way to display an instance of jqBarGraph inside my Colorbox popup?
Here is my (pseudo) code example so far of how I see this maybe working:
//This would happen in my bntVote click event?
$(".btnVote").colorbox({width:"50%",
inline:true,
href:"#myGraph",
function(){
var arrayOfData = new Array(
[[75],'voter 1'],
[[25],'voter 2']);
$('#myGraph').jqBarGraph({ data: arrayOfData });
}});
<div id="myGraph" style="display:none;"></div>
The idea for the function() above in my code sample where I'd like to execute the javascript for the jqBarGraph, came from here. I'm also open to any other suggestions, I just think these two plugins look very slick and would love to be able to implement them together.
Also, for what it's worth, I'm using VB.NET (.NET 3.5) and VS2010.
Many thanks in advance!
I think you already have all the pieces you need. Colorbox does support using inlined content, so your graph div would go there, and if you need to do any initialization when Colorbox opens, you can specify that in the onOpen function.
i write some html with JS into a div.
like this
$("#picdiv").html("<a rel='lightbox' href='pic.jpg'><img src='htumb.jpg'></a>");
it is just an example.
So, i have in $(document).ready Funcktion this code.
$('a[rel=lightbox]').fancybox();
but if i click on the link, a get to the page with picture... i know the Problem must be, i write the html with js, but i have no other option. So haw can I make fancybox works?
This is due to how jQuery works. The fancybox function will only work for current elements on the page and not ones dynamically added by javascript.
A quick fix might be to be modify the code as follows:
$("#picdiv").append($("<a rel='lightbox' href='pic.jpg'><img src='htumb.jpg'></a>").fancybox());
Not sure if the above will work, but the general idea is to ensure that any new elements created have the plugin applied.
solution
$('.picture_display').find('a[rel=lightbox]').fancybox();