Forums

Get help. Give help. A Web Design and Development Community.

Remove and load

  • # December 14, 2012 at 8:14 am

    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?

    # December 14, 2012 at 8:15 am

    What do you have so far?

    Do you have a link?

    Could you put something in Codepen for us to play with?

    # December 14, 2012 at 8:26 am

    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?

    # December 14, 2012 at 8:32 am

    As a starting point, the ‘[Tabbable Nav](http://twitter.github.com/bootstrap/components.html#navs “http://twitter.github.com/bootstrap/components.html#navs”)’ 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?

    # December 14, 2012 at 8:44 am

    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.

    # December 14, 2012 at 9:57 am

    This reply has been reported for inappropriate content.

    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

    # December 14, 2012 at 9:59 am

    I want to really remove it but thank you for the input.

    # December 14, 2012 at 10:18 am

    >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?

    # December 14, 2012 at 10:22 am

    Something like that, yes. But if I have the display:none the content is loaded anyway right? It’s just hidden.

    # December 14, 2012 at 10:24 am

    > 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.

    # December 14, 2012 at 10:27 am

    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.

    # December 14, 2012 at 10:32 am

    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.

    # December 14, 2012 at 10:34 am

    This reply has been reported for inappropriate content.

    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.

    # December 14, 2012 at 10:35 am

    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.

    # December 14, 2012 at 10:37 am

    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.

Viewing 15 posts - 1 through 15 (of 25 total)

You must be logged in to reply to this topic.

We have a pretty good* newsletter.