Grow your CSS skills. Land your dream job.

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

    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

    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.

*May or may not contain any actual "CSS" or "Tricks".