Hi guys. I want to make this javascript code that get all tab contents from HTML, remove them, and then load them only when the user click on the tab. Is this possible?
I don't have an example code but I'm making one now.
I know how to select the elements but I don't know any function to remove the selected elements and other to load them. load() is just used to load external files right?
As a starting point, the 'Tabbable Nav' from Twitter Bootstrap comes to mind. I don't know the workings behind it, but it seems to achieve what you're looking for, so perhaps have a look at how that works?
Thank you for your tip David, I will look into the code of that to figure it out.
If anyone have other tips please let me know. I prefer to understand how can this be done and not use an external library.
When you say remove and then show them when they click something, is the content variable depending on what they click or is it simply a case of hiding and showing "static" content?
If so toggling a hidden state, or even toggling an active class might be appropriate. Example;
It's like a plugin. I want to have the ability to grab the HTML objects, stop them from loading and then load it only with the click action. Like some slideshows do I think.
I know andy, that's why I made this question in Javascript section, but I don't know what functions can I use to save, remove and load the HTML stuff. That's my question.
Yeah basically. Unless you use Javascript to deploy the code in the page. So basically doing an append/prepend on a particular element with code that's only present in the javascript.
Ok, that's a start. So I can get the HTML code with get() and when the click occurs I can use append() to insert it. I just need a function to remove HTML to achieve what I want.
Hi guys. I want to make this javascript code that get all tab contents from HTML, remove them, and then load them only when the user click on the tab. Is this possible?
What do you have so far?
Do you have a link?
Could you put something in Codepen for us to play with?
I don't have an example code but I'm making one now.
I know how to select the elements but I don't know any function to remove the selected elements and other to load them. load() is just used to load external files right?
As a starting point, the 'Tabbable Nav' from Twitter Bootstrap comes to mind. I don't know the workings behind it, but it seems to achieve what you're looking for, so perhaps have a look at how that works?
Thank you for your tip David, I will look into the code of that to figure it out. If anyone have other tips please let me know. I prefer to understand how can this be done and not use an external library.
When you say remove and then show them when they click something, is the content variable depending on what they click or is it simply a case of hiding and showing "static" content?
If so toggling a hidden state, or even toggling an active class might be appropriate. Example;
http://codepen.io/andyunleashed/pen/rsInA
I want to really remove it but thank you for the input.
Actually, I don't think so.
I'm assuming that you don't want it loaded on pageload at all but only want it to be inserted on a click event.
Is that more like it?
Something like that, yes. But if I have the display:none the content is loaded anyway right? It's just hidden.
Yes it is....To be honest the solution will depend on what you effect are trying to achieve and why.
Let me try to explain.
It's like a plugin. I want to have the ability to grab the HTML objects, stop them from loading and then load it only with the click action. Like some slideshows do I think.
Yeah, but are you planning on having these 'objects' in your page HTML and hidden prior to load or inserted INTO the page HTML on a click.
The two are different.
Your best bet for that is probably AJAX then, if you don't want the HTML to load at all. That I can't do in a codepen.
But you could use JS to pull in the content from an external page/resource.
Inserted into, not hidden, because it can be videos/images so I don't want to have a slow load. I hope I'm making myself clear.
I know andy, that's why I made this question in Javascript section, but I don't know what functions can I use to save, remove and load the HTML stuff. That's my question.
There you go folks...I'm no JS / AJAX expert (or even a novice) but that's what he's after.
Over to you.
Thank you both for clear that out.
I assume I've got your point there. $.load() should be what you are looking for.
jQuery API - $.load
Also, check out this screen cast from chris: AJAXing a WordPress theme
Just register on the tab-button click event and load the content from another URL.
So it's not possible to use the load or any other javascript/jquery function to load code, it that it? It always have to be from an external url.
Yeah basically. Unless you use Javascript to deploy the code in the page. So basically doing an append/prepend on a particular element with code that's only present in the javascript.
Like this, http://codepen.io/andyunleashed/pen/gEJdf
Oh, and you should be aware that your content won't be visible to SEO bots unless it's in a permitted subdirectory.
Ok, that's a start. So I can get the HTML code with get() and when the click occurs I can use append() to insert it. I just need a function to remove HTML to achieve what I want.
I think remove() will do it
Is there a way to have a callback when the stuff inserted with append finishes loading?