Acquiring Twitter updates for a dynamic Bootstrap carousel display

I've been trying to load multiple tweets from the stream into the slideshow, but I can only get one to show up. I believe it has to do with the placement of the <div id="feed"> element, but I can't seem to figure out what I'm missing.

In my HTML, I currently have it nested within one of the carousel-content divs, but I have a feeling it should be a standalone content div with the feed:

    <div id="carousel-example" class="carousel slide" data-ride="carousel">
    <!-- Wrapper for slides -->
    <div class="row">
        <div class="col-xs-offset-3 col-xs-6">
            <div class="carousel-inner">
                <div class="item active">
                    <div class="carousel-content">
                        <div>
                            <div id="feed">
                                <ul class="tweets">
                                    <li class="tweet"></li>
                                </ul>
                            </div>
                             <h3>#1</h3>

                            <p>This is a twitter bootstrap carousel that only uses text. There are no images in the carousel slides.</p>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="carousel-content">
                        <div>
                             <h3>#2</h3>

                            <p>This is a twitter bootstrap carousel that only uses text. There are no images in the carousel slides.</p>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="carousel-content">
                        <div>
                             <h3>#3</h3> 
                            <p>This is a twitter bootstrap carousel that only uses text. There are no images in the carousel slides.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Controls --> <a class="left carousel-control" href="#carousel-example" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
 <a class="right carousel-control" href="#carousel-example" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>

</div>

The relevant Javascript code can be found in the following fiddle.

Here is the current working version: JSFIDDLE

Answer №1

It turned out that the solution was quite straightforward. Begin by fetching the feed and then constructing the necessary inner elements to contain the tweets:

HTML

<div class="parser" style="display: none"></div>

               <div class="container">

                 <div id="carousel-example" class="carousel slide" data-ride="carousel">
                    <!-- Wrapper for slides -->
                    <div class="row slides">
                        <div class="col-xs-offset-3 col-xs-6">
                            <div class="carousel-inner">

                            </div>
                        </div>
                    </div>
                </div>
                <!-- Controls --> <a class="left carousel-control" href="#carousel-example" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#carousel-example" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>

            </div>

JavaScript

    var Twitter ={};

 Twitter.callback = function(jsonP){
             //console.log("json", jsonP);
             var parser = $(".parser"),
             container = $(".carousel-inner"),
             tweets,
             i,
             createItem = function(item,index){

               var div = $('<div class="item'+((index === 0)?' active':'') +'"></div>'),
               divInner = $('<div class="carousel-content"></div>');
               console.log('<div class="item'+((index === 0)?' active':'') +'"></div>');
               div.append(divInner.append($(item).children()));

               div.append($(item).children());

               return div;
           };

           parser.html(jsonP.body);



           tweets = $('.h-feed').children('li');

           for(i = 0; i < tweets.length; i++){                   
            container.append(createItem(tweets[i],i));
        }


    }

    window.addEventListener("load" , function(){
     var jp = document.createElement("script");
     jp.src = "https://cdn.syndication.twimg.com/widgets/timelines/506829210191552512?&lang=en&callback=Twitter.callback&suppress_response_codes=true&rnd=0.3450709420721978";
     var hd = document.getElementsByTagName("head")[0];
     hd.appendChild(jp);

 });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for transforming a container div into a content slider

Working with Bootstrap 3, a custom div has been created as shown below: <div class="second-para"> <div class="container"> <div class="second-section"> <div class="c ...

What steps should I follow to align these unordered lists side by side?

Is there a way to align these lists (unordered lists inside list items 1 through 4) side by side using CSS3? I've tried different methods, but I can't seem to figure it out. Here is the code I've been using: <footer> <ul> ...

A method for enabling a stationary, fluctuating height object to occupy area

Initially, I am looking for a solution using only CSS. While JavaScript can accomplish this easily, I prefer to stick to CSS for now. On my webpage, I have three containers: two fixed and one static. The goal is to adjust the padding of the static contai ...

Unable to invoke the 'apply' method on an undefined object when configuring directions for the jQuery Google Maps plugin

I've gone through the steps in a tutorial to create a jquery mobile google map canvas here, and have attempted to set it up. However, I keep encountering this error in my JavaScript console: Uncaught TypeError: Cannot call method 'apply' ...

How to vertically align radio buttons with varying label lengths using Angular and Bootstrap 4?

Is there a way to properly align radio buttons with variable length labels? When each label has a different length, the radio buttons appear misaligned. How can this be fixed? <div class="row"> <div class="form-check form-check-inline" *ngFor="l ...

I'm receiving the error message "Fatal error: Call to a member function query() on a non-object," what could be causing this issue?

Need help with fixing an error on my private server realmeye. The error message I'm receiving is: Fatal error: Call to a member function query() on a non-object in /home/noxus/public_html/realmeye/index.php on line 112 =========================== ...

PHP loaded HTML does not allow JavaScript to execute

My system includes an announcements feature where all announcements are retrieved from a database and displayed on the screen using Ajax and PHP. Below is the code snippet used to load each announcement onto the page: echo '<div id="announcements ...

Utilize Google Autofill to easily populate address fields in a form

I've come across several autofill address codes, but I'm looking to integrate a Post function that would allow me to post the obtained data to a PHP page. Is there anyone who can assist with the javascript or HTML code to achieve this? HTML Cod ...

How can I animate scrolling up or down using jQuery and CSS?

I have a a element that triggers an action when clicked: <a href="#" class="hel" onclick="YPCP1_();">Scroll down</a> Also, function YPCP_(){ var scroll = $(window).scrollTop(); window.scrollTo(0, 600); } The function successfully sc ...

Exploring the method of displaying a JSON 2D array through the utilization of getJSON

Is there a way to read 2D JSON data? An example of a JSON file is given below: [ { "name":"Menu1", "permission":"1", "link":"http://naver.com" }, { "name":"Menu2", "permission":"2", "link":"http://daum.net", ...

Tips for minimizing the padding/space between dynamically generated div elements using html and css

Currently, I have 4 dropdown menus where I can choose various options related to health procedures: Area, specialty, group, and subgroup. Whenever I select a subgroup, it dynamically displays the procedures on the page. However, the issue I am facing is th ...

Is it necessary for the Jquery Component to return false?

I'm currently working on developing a jQuery module using BDD (Behavior-driven development). Below is the code snippet for my component: (function($) { function MyModule(element){ return false; } $.fn.myModule = function ...

What is the best method to retrieve text from a <span> element within an <li> element nested inside a <ul> using BeautifulSoup?

I need help extracting the content from the Here’s what’s new section on this page. Specifically, I am trying to capture everything between In the coming weeks and general enhancements. After inspecting the code, I noticed that the <span> elemen ...

Create unique identifiers for the TD elements of Viz.js that will be displayed within the SVG elements

Below is the DOT code snippet in Viz.js that I am working with: digraph G { node [fontname = "font-awesome"]; 17 [id=17, shape="hexagon", label=<<TABLE BORDER="0"> <TR><TD>undefined</TD></TR> <TR><TD>[47-56]< ...

Unable to switch the text option

[Fiddle] I'm currently working on a project where I want pairs of buttons to toggle text by matching data attributes. While I can successfully change the text from "Add" to "Remove" on click, I am facing an issue with toggling it back to "Add" on the ...

Issue with timestamp in the Instagram API call to retrieve media using AJAX (GET /media/search)

My API call is returning a 400 bad request error message: {"meta":{"error_type":"APIInvalidParametersError","code":400,"error_message":"invalid parameters-check the max\/min-timestamps, if you supplied them"}} Even though my request appears to be co ...

The width of a CSS border determines its height, not its width

When I try to use border-width: 100px; to set the horizontal width to 100px, it ends up setting the height to 100px instead. Any help would be greatly appreciated. .border-top-green { border-top: 1px solid #4C9962; border-width: 100px; padding-t ...

The close menu button is not functioning properly when clicked outside the menu - the buttonevent.matches is not recognized as a

I am encountering an issue with the dropdown menu that is not closing when clicking outside of the menu button. Despite having faced this problem before, I can't seem to find a solution now. Any help would be greatly appreciated as I am uncertain why ...

`Using a PHP function parameter within an array: An essential guide`

I'm encountering an issue while declaring a function parameter within my array. Here is the simplified version of what I have: function taken_value($value, $table, $row, $desc) { $value = trim($value); $response = array(); if (!$value) ...

Removing a row from an HTML table using JavaScript

I have a piece of JavaScript code that is responsible for managing an HTML table. One of the functionalities it needs to support is deleting a row from the table. Currently, I am using the following snippet of code to achieve row deletion: var rowToDele ...