Sliding box/menu with 3 options - javascript

I'm trying to make a box with a title and 2 arrows left and right of the title. When you click on either arrow, the box should fade out and the next one should fade in. I have another one like this on my page with 2 option (send and go back) and that one works fine, but for some reason it breaks when I have 3 options. I suspect it's my jQuery code that breaks when adding a third option.
My JSFiddle (minimal CSS to avoid confusion, the problem isn't there)
$('#go2').click(function(e) {
$('.box1, .box3').fadeOut('fast', function() {
$('.box2').fadeIn('slow');
});
});
$('#go3').click(function(e) {
$('.box2, .box1').fadeOut('fast', function() {
$('.box3').fadeIn('slow');
});
});
$('#go1').click(function(e) {
$('.box2, .box3').fadeOut('fast', function() {
$('.box1').fadeIn('slow');
});
});

The IDs must be unique (refer to id="go2").
The jQuery library must be included before the other libs.
You can simplify everything using a unique handler:
$('.box1, .box2, .box3').on('click', function(e) {
var isArrowRight = $(e.target).is('.right');
var isLeftArrow = $(e.target).is('.left');
if (!(isArrowRight || isLeftArrow)) {
return; // do nothing if you don't click the left/right arrow...
}
var nextEle = (isArrowRight) ? $(this).next('[class^=box]') : $(this).prev('[class^=box]');
if (nextEle.length == 0) {
nextEle = (isArrowRight) ? $('.box1') : $('.box3');
}
$('.box1:visible, .box2:visible, .box3:visible').fadeOut('fast', function(){
nextEle.fadeIn('slow');
});
});
i {
display: inline;
}
h1 {
display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap..css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/components/icon.min.css">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.min.js"></script>
<div class="box1">
<div class="boxTitle">
<i id="go3" class="icon angle left"></i>
<h1>Box 1</h1>
<i id="go22" class="icon angle right"></i>
</div>
<div class="boxField1">
Boxfield 1
</div>
</div>
<div class="box2" style="display: none">
<div class="boxTitle">
<i id="1" class="icon angle left"></i>
<h1>Box 2</h1>
<i id="3" class="icon angle right"></i>
</div>
<div class="boxField2">
Boxfield 2
</div>
</div>
<div class="box3" style="display: none">
<div class="boxTitle">
<i id="go2" class="icon angle left"></i>
<h1>Box 3</h1>
<i id="go1" class="icon angle right"></i>
</div>
<div class="boxField3">
Boxfield 3
</div>
</div>

Sorry but looking your jsfiddle file I see 2 problems:
you use the same id for more html tag, it's not possible try using class.
On the box2 you use id="1" and id="3" but on js you use go1, go2, go3.

Related

Why are the DOM elements not being selected

I have a function that shows an html element when hovered upon, but it does not seem to be working as intended.
My code in the js file is as follows:
const htmlIc = document.querySelector('.fa-html5');
const htmlInfo = document.querySelector('.info-section');
htmlIc.addEventListener("mouseover", toggleHtml);
function toggleHtml() {
htmlInfo.classList.add("show");
}
This is the element that the event listener is listening upon (the icon):
<div class="icons">
<a href="#!">
<i class="fab fa-html5 fa-2x"></i>
</a>
</div>
This is the element I would like to have the show class applied to:
<div class="info-section">
<h1>Lorem ipsum</h1>
</div>
I use SASS in this project, and I have verified by manually adding the show class to the element, and it is not a problem from that part
You can do something where you are toggling them via the style display option. One thing you could do is if you are married to using show class then you would need to create a similar toggle between displaying show and hide.
const htmlIc = document.querySelector(".fa-html5");
const htmlInfo = document.querySelector(".info-section");
htmlIc.addEventListener("mouseover", toggleHtml);
function toggleHtml() {
let infoSection = document.querySelector(".info-section");
if (infoSection.style.display === "none") {
infoSection.style.display = "block";
} else {
infoSection.style.display = "none";
}
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div class="icons">
<a href="#!">
<i class="fab fa-html5 fa-2x">hh</i>
</a>
<div class="info-section" style="display: none;">
<h1>Lorem ipsum</h1>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>
it's work!
also add .show css class
const htmlIc = document.querySelector('.fa-html5');
const htmlInfo = document.querySelector('.info-section');
htmlIc.addEventListener("mouseover", toggleHtml);
function toggleHtml() {
htmlInfo.classList.add("show");
}
<div class="icons">
<a href="#!">
<i class="fab fa-html5 fa-2x"></i>
</a>
</div>
<div class="info-section">
<h1>Lorem ipsum</h1>
</div>
htmlInfo.classList.toggle("show");
I just had to use the .toggle method for the classList. Since I was using a hover effect, the toggle was more suited for this situation. Credit goes to #BerkCoşar in the comments for this solution

Bootstrap carousel with Javascript function to play and pause

I have a problem in carousel class in bootstrap. I have defined a button which is by default a pause button, then i use a javascript function on that button to control the carousel like when clicked, the icon should change to play and the carousel should stop the cycle, but .click(function) is not working when the button is clicked instead it is pausing the carousel when i position the mouse on the button.
please help me solve this problem.
$(document).ready(function(){
$("#mycarousel").carousel( { interval: 2000 } );
$("#carouselButton").click(function()
{
if ($("#carouselButton").children("span").hasClass('fa-pause'))
{
$("#mycarousel").carousel("pause");
$("#carouselButton").children("span").removeClass('fa-pause');
$("#carouselButton").children("span").addClass('fa-play');
}
else if ($("#carouselButton").children("span").hasClass('fa-play'))
{
$("#mycarousel").carousel("cycle");
$("#carouselButton").children("span").removeClass('fa-play');
$("#carouselButton").children("span").addClass('fa-pause');
}
});
});
Nice question. I couldn't get { pause:null } to work as you wanted either. But digging this more, I got a working solution...
the key is toggling data-interval attribute on the carousel div
but this doesn't get the loop started, to trigger the start... we either have to hover-on and hover-off manually... or automate it (which we did)
but since there is some lag for adding/removing this attribute by jQuery, we (hackish-ly) add a setTimeout to take care of this
Working snippet below:
$(document).ready(function() {
$('#playPause').click(function() {
if ($("#myCarousel").attr("data-interval")) {
$("#myCarousel").removeAttr("data-interval");
$(".carousel-item>.active").removeAttr("active");
setTimeout(function() {
$(".carousel-control-next").trigger('click');
$(".carousel-inner").trigger('mouseenter');
$("#myCarousel").trigger('mouseenter');
}, 500);
} else {
$("#myCarousel").attr("data-interval", "500");
setTimeout(function() {
$(".carousel-control-next").trigger('click');
$(".carousel-inner").trigger('mouseenter');
$("#myCarousel").trigger('mouseenter');
$("#myCarousel").trigger('mouseleave');
}, 1000);
}
});
// Enable Carousel Indicators
$(".item1").click(function() {
$("#myCarousel").carousel(0);
});
$(".item2").click(function() {
$("#myCarousel").carousel(1);
});
$(".item3").click(function() {
$("#myCarousel").carousel(2);
});
// Enable Carousel Controls
$(".carousel-control-prev").click(function() {
$("#myCarousel").carousel("prev");
});
$(".carousel-control-next").click(function() {
$("#myCarousel").carousel("next");
});
});
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="container mt-3">
<button type='button' id='playPause'>Play / Pause</button>
<!-- The carousel -->
<div id="myCarousel" class="carousel slide mt-4">
<!-- Indicators -->
<ul class="carousel-indicators">
<li class="item1 active"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.w3schools.com/bootstrap4/la.jpg" alt="Los Angeles" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="Chicago" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="New York" width="1100" height="500">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#myCarousel">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myCarousel">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
I believe you left uncommented div with the same id:
<div class="btn-group" id="carouselButton">
then your button with the same id just doesn't work:
<button class="btn btn-danger btn-sm" id="carouselButton">
I had the same problem. The code comes from Coursera, Front-End Web UI Frameworks and Tools: Bootstrap 4 Week 4, Exercise (Instructions): More Bootstrap and JQuery
Answer below works well and in JavaScript for a different taste
function buttonFlip() {
var parentButton = document.getElementById("carouselButton");
var childSpan = document.getElementById("carouselButton_span");
if (parentButton.contains(childSpan) && childSpan.classList.contains("fa-pause")) {
$("#mycarousel").carousel('pause');
childSpan.classList.remove("fa-pause");
childSpan.classList.add("fa-play");
}
else {
$("#mycarousel").carousel('cycle');
childSpan.classList.remove("fa-play");
childSpan.classList.add("fa-pause");
}
}
If this is the bootstrap course lesson 4, from coursera, I had the same issue.
Go to this part and change the ID in my case I put carousel-style as id. Then go to the stylesheet and change the #carouselButton to the id you named in the btn-group.
It should work after that.
P.S The teacher doesnt explain to you but also you need to change the play icon to "fas fa play" as a class
it should look like this.
div class="btn-group" id="carousel-style">
<button class="btn btn-light btn-sm" id="carouselButton">
<span class="fa fa-pause"></span>
</button>
</div>
The Javascript should look like this:
<script>
$(document).ready(function() {
$('#mycarousel').carousel({ interval: 2000 });
$("#carouselButton").click(function(){
if ($("#carouselButton").children("span").hasClass('fa fa-pause')) {
$("#mycarousel").carousel('pause');
$("#carouselButton").children("span").removeClass('fa fa-pause');
$("#carouselButton").children("span").addClass('fas fa-play');
}
else if ($("#carouselButton").children("span").hasClass('fas fa-play')){
$("#mycarousel").carousel('cycle');
$("#carouselButton").children("span").removeClass('fas fa-play');
$("#carouselButton").children("span").addClass('fa fa-pause');
}
});
}); </script>

How to addClass & addRemove class or change property using .css?

I have tried many ways but still not working...
click the submit button & expand button(tab) to display the chatbot and hide the tab
click the minimize button(chatbot) to hide the chatbot and display the tab
1) addClass/RemoveClass
default.htm
<!-- ------- button ------- -->
<div class="ask-button-container">
<button id="submit" class="btnSubmit">Ask</button>
</div>
<!-- ------- tab ------- -->
<div id="tab{{__SELF__.id}}" name="{{__SELF__.id}}" class="my-tab">
<div id="tab-minimize">
<div id="tab-label"></div>
<div id="tab-expand{{__SELF__.id}}" class="tab-expand tab-btn"></div>
<div id="tab-close{{__SELF__.id}}" class="tab-close tab-btn"></div>
</div>
</div>
<!-- ------- chatbot ------- -->
<div id="chatbot-window-wrapper{{__SELF__.id}}" class="cb-window hidden" style="position: fixed;">
<div id="control-bar">
<div id="chatbot-minimize{{__SELF__.id}}" class="minus pull-right chatbot-btn"><span class="glyphicon glyphicon-minus-sign"></div>
</div>
<iframe id="chatbot-window" name="chatbot-window" scroll="" width="100%" height="100%" frameborder="2" src="{{ 'page1'|page }}"></iframe>
</div>
JS
$(function(){
$(".tab-close").click(function() {
$(this).closest(".my-tab").addClass("hidden"); //working
});
$(".tab-expand").click(function() {
var chatbot = $(this).closest(".cb-window");
chatbot.removeClass("hidden");
$(this).closest(".my-tab").addClass("hidden"); //working
});
$(".btnSubmit").click(function() {
var chatbot = $(this).closest(".cb-window");
chatbot.removeClass("hidden");
$(this).closest(".my-tab").addClass("hidden");
});
$(".minus").click(function() {
var chatbot = $(this).closest(".cb-window");
chatbot.addClass("hidden");
$(this).closest(".my-tab").removeClass("hidden");
});
});
2) .css
$(this).closest(".cb-window").css("visibility", "visible");
Can someone please show me how to do it? Thank you.
or any other ways using jquery? .show/.hide , .toggle?
The problem was with your way of reaching the proper element and your understanding on closest option of jquery.
As per definition - The closest() method returns the first ancestor of the selected element. An ancestor is a parent, grandparent,
great-grandparent, and so on.
When you say closest on btnSubmit click event, the .cb-window was never its ancestor so $(this).closest('.cb-window') would basically fail. You need to traverse back to btnSubmit's parent who will be sibling of .cb-window and then you can easily get that element. Below is how you can achieve it. Also, you do not need multiple $(function(){ which is equivalent to $(document).ready and only one is sufficient.
$(function() {
$(".btnSubmit").click(function() {
$(this).closest(".ask-button-container").siblings('.cb-window').removeClass("hidden");
//closest ancestor would be .ask-button-container and its sibling is .cb-window
$(this).closest(".my-tab").addClass("hidden");
//did not find .my-tab element in your `html`
});
$(".minus").click(function() {
$(this).closest('.cb-window').addClass("hidden");
$(this).closest(".my-tab").removeClass("hidden");
});
});
.hidden {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="ask-button-container">
<button id="submit" class="btnSubmit">Ask</button>
</div>
<div id="chatbot-window-wrapper{{__SELF__.id}}" class="cb-window hidden" style="position: fixed;">
<div id="control-bar">
<div id="chatbot-minimize{{__SELF__.id}}" class="minus pull-right chatbot-btn"><span class="glyphicon glyphicon-minus-sign"></div>
</div>
<iframe id="chatbot-window" name="chatbot-window" scroll="" width="100%" height="100%" frameborder="2" src="{{ 'page1'|page }}"></iframe>
</div>
When we click or do operation on an element we can add or remove class and you can try like this.
$('#elm').hover(
function(){ $(this).addClass('hover') },
function(){ $(this).removeClass('hover') }
)
the problem that you don't target the element you want in a right way .. you need to use
$(function(){
$(".tab-close").click(function() {
$(this).closest(".my-tab").addClass("hidden"); //working
});
$(".tab-expand").click(function() {
var chatbot = $(this).closest('.my-tab').next(".cb-window");
chatbot.removeClass("hidden");
$(this).closest(".my-tab").addClass("hidden"); //working
});
$(".btnSubmit").click(function() {
var chatbot = $(this).closest('div').next().next(".cb-window");
chatbot.removeClass("hidden");
$(this).closest('div').next(".my-tab").addClass("hidden");
});
$(".minus").click(function() {
var chatbot = $(this).closest(".cb-window");
chatbot.addClass("hidden");
chatbot.prev(".my-tab").removeClass("hidden");
});
});
.hidden{
display : none;
}
.minus{
padding : 5px;
background : red;
color: #fff;
text-align : center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- ------- button ------- -->
<div class="ask-button-container">
<button id="submit" class="btnSubmit">Ask</button>
</div>
<!-- ------- tab ------- -->
<div id="tab{{__SELF__.id}}" name="{{__SELF__.id}}" class="my-tab">
<div id="tab-minimize">
<div id="tab-label"></div>
<div id="tab-expand{{__SELF__.id}}" class="tab-expand tab-btn"></div>
<div id="tab-close{{__SELF__.id}}" class="tab-close tab-btn"></div>
</div>
</div>
<!-- ------- chatbot ------- -->
<div id="chatbot-window-wrapper{{__SELF__.id}}" class="cb-window hidden" style="position: fixed;">
<div id="control-bar">
<div id="chatbot-minimize{{__SELF__.id}}" class="minus pull-right chatbot-btn"><span class="glyphicon glyphicon-minus-sign">-</span></div>
</div>
<iframe id="chatbot-window" name="chatbot-window" scroll="" width="100%" height="100%" frameborder="2" src="{{ 'page1'|page }}"></iframe>
</div>

How to change target element state when overlapping element is hovered?

I have the following element in my page:
<div class="gallery-item" data-width="1" data-height="1">
<a href="#">
<div class="gryscl" data-image="gallery1">
<img src="assets/images/products/1.jpg" id="gallery1" alt="" class="image-responsive-height">
</div>
<div class="overlayer bottom-left full-width">
<div class="overlayer-wrapper item-info ">
<div class="gradient-grey p-l-20 p-r-20 p-t-20 p-b-5">
<div class="">
<i class="fa fa-info-circle fs-16" aria-hidden="true"></i>
</div>
<div class="">
<p class="block bold fs-14 p-t-10">Panavision Small AC Bag</p>
<h5 class="pull-right semi-bold font-montserrat bold">159,00 €</h5>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</a>
</div>
The image is swapped with a greyscale image via JS, which only shows the original full color image on hover. However, as there is content in the div.overlayer which animates up on hover to partially cover the image, the image is going back to greyscale prematurely.
How do I ensure that the full color image remains even when the hover is on the div.overlayer and it's contents?
Below is the JS that creates and swaps out the image:
<script type="text/javascript">
$(window).load(function () {
$("div.gryscl").each(function (index, obj) {
$("#" + $(obj).attr("data-image")).pixastic("desaturate");
});
$("div.gryscl").mouseenter(function (e) {
var self = document.getElementById($(e.currentTarget).attr("data-image"));
Pixastic.revert(self);
});
$("div.gryscl").mouseleave(function (e) {
$("#" + $(e.currentTarget).attr("data-image")).pixastic("desaturate");
console.debug($(e.currentTarget).attr("data-image"));
});
});
</script>

JQuery .on("click"... works intermitently

I have a piece of code:
$("body").on("click", ".reply-button", function(){
alert("test");
});
That is suppose to alert me when I click on an element that is generated on the fly (it is not part of the DOM when this code is executed).
Sometimes it works just as it's suppose to. I click the button and a little alert pops up. However, other times it stop working. Nothing I bind to it will work. If I bind to the container div (also generated on the fly), it does work, but not if I change the handler to incorporate button.
I am asking for what could be the possible reasons for this error? I do not know how to go about debugging this. My first guess was that it was something due to stopImmediatePropagation or stopPropagation but I couldn't find that being used in the same area.
Does anyone have any idea on how I should go about debugging this?
EDIT:
How is the DOM being generated?
I get the HTML from a template that's hidden.
var html = $("#template").html();
Then I append the template to a div container
$("#container").append(html);
EDIT2:
Here is the template being pulled:
<div id="tweets-container" class="feed-wrapper">
</div>
<div id="tweet-template" style="display:none;">
<!-- Tweet 1 -->
<div class="tweet animated" data-scannedTweetId="s_id">
<!-- User -->
<div class="tweet-user">
<!-- User picture -->
<img class="tweet-user-picture" src="s_twt_owner_profile_img_url" />
<!-- User info -->
<div class="tweet-user-info">
<!-- User name -->
<div class="tweet-user-info-name">
s_twt_owner_name (#s_twt_owner_sn)
</div>
<!-- User biography -->
<div class="tweet-user-info-biography">
s_twt_owner_desc
</div>
</div>
</div>
<!-- User statistics (following, followers, and tweets) -->
<span class="tweet-statistics animated">
<div class="following">
<div class="statistic-count">s_twt_owner_num_following</div>
<div class="statistic-label">following</div>
</div>
<div class="followers">
<div class="statistic-count">s_twt_owner_num_follower</div>
<div class="statistic-label">followers</div>
</div>
<div class="tweets">
<div class="statistic-count">s_twt_owner_num_twt</div>
<div class="statistic-label">tweets</div>
</div>
</span>
<!-- Tweet bars/graph -->
<div class="side-information animated">
<div class="bar-wrapper">
<!-- Actual bars -->
<div class="bars">
<div class="bar big-bar bar-green" style="height: tqes_heightpx; background: tqes_color;" data-toggle="tooltip" data-placement="top" title="tq_engage_score"></div>
<div class="bar bar-yellow" style="height: tqrs_heightpx; background: tqrs_color;" data-toggle="tooltip" data-placement="top" title="tq_relevancy_score"></div>
<div class="bar bar-light-green" style="height: sks_heightpx; background: sks_color;" data-toggle="tooltip" data-placement="top" title="s_klout_score"></div>
<div class="bar bar-green" style="height: sls_heightpx; background: sls_color;" data-toggle="tooltip" data-placement="top" title="s_legitimacy_score"></div>
<div class="bar bar-gray" style="height: tqgs_heightpx; background: tqgs_color;" data-toggle="tooltip" data-placement="top" title="tq_geography_score"></div>
</div>
<!-- Labels that correspond with each bar -->
<div class="bar-labels">
<div class="bar-label big-bar-label" data-toggle="tooltip" data-placement="bottom" title="Score">tq_engage_score</div>
<div class="bar-label-icon" style="font-size: 12px; color: #000;" data-toggle="tooltip" data-placement="bottom" title="Relevancy">
<i class="fa fa-bullseye"></i>
</div>
<div class="bar-label-icon" data-toggle="tooltip" data-placement="bottom" title="Influence">
<i class="fa fa-users"></i>
</div>
<div class="bar-label-icon" data-toggle="tooltip" data-placement="bottom" title="Legitimacy">
<i class="fa fa-check-circle"></i>
</div>
<div class="bar-label-icon" data-toggle="tooltip" data-placement="bottom" title="Geography">
<i class="fa fa-map-marker"></i>
</div>
</div>
</div>
<!-- Notes below the bars/graph -->
<div class="explanations">
<!-- Note below the bars/graph -->
<div class="explanation">
<div class="explanation-check"><i class="fa fa-first-comment"> </i>
<div class="explanation-text">
comment_one
</div>
</div>
</div>
<!-- Note below the bars/graph -->
<div class="explanation">
<div class="explanation-check"><i class="fa fa-second-comment"> </i>
<div class="explanation-text">
comment_two
</div>
</div>
</div>
</div>
</div>
<!-- Tweet score -->
<div class="score-wrapper">
<div class="score animated">tq_engage_score</div>
</div>
<!-- Tweet content -->
<div class="tweet-content">
s_twt_text
</div>
<!-- Time since tweet was posted -->
<div class="tweet-time-elapsed">
s_twt_time
</div>
<!-- Area below tweet with reply textarea and buttons -->
<div class="tweet-reply-section animated">
<!-- Reply textarea -->
<textarea class="tweet-reply animated">#s_twt_owner_sn </textarea>
<!-- Buttons -->
<div class="buttons animated">
<!-- Small buttons on top of reply button -->
<div class="top-buttons">
<span class="character-count">
</span>
</div>
<!-- Reply button -->
<div class="reply-button">
Reply <i class="fa fa-reply"></i>
</div>
</div>
</div>
</div>
</div>
JavaScript:
/**
* Add a tweet to the feed.
*/
function _addTweetToFeed(tweet, keywords) {
/** Get the tweet template */
var tweetHtml = $('#tweet-template').html();
// add score heights and colors properties to the tweet
tweet = _setScoreBars(tweet);
/** Linkify elements of the tweet */
tweet.s_twt_text = twitterify(tweet.s_twt_text); // the tweet
tweet.s_twt_owner_desc = twitterify(tweet.s_twt_owner_desc);
// fix search terms to be highlighted
tweet.s_twt_text = _highlightSearchTerms(tweet.s_twt_text, keywords); // the tweet
tweet.s_twt_owner_desc = _highlightSearchTerms(tweet.s_twt_owner_desc, keywords);
// change from twitter links to readable links
tweet = _fixTweetLinks(tweet);
/** Make numbers readable */
tweet.s_twt_owner_num_following = abbrNum(tweet.s_twt_owner_num_following, 1);
tweet.s_twt_owner_num_follower = abbrNum(tweet.s_twt_owner_num_follower, 1);
tweet.s_twt_owner_num_twt = abbrNum(tweet.s_twt_owner_num_twt, 1);
/** Loop through the properties of tweet object and populate tweetHtml with them */
for (var prop in tweet) {
if (tweet.hasOwnProperty(prop)) {
tweetHtml = _replaceAll(tweetHtml, prop, tweet[prop]);
}
// add comments
tweetHtml = _addComments(tweet, tweetHtml);
/** If both location and url are not present, remove the comma */
if (!(tweet.s_twt_owner_loc && tweet.s_twt_owner_url)) {
$('#url_comma').html('');
}
}
$('#tweets-container').append(tweetHtml);
}
"Sometimes it works just as it's suppose to" this line alone suggests that you run your code prior to DOM creation. sometimes your browser creates the dom fast enough and the handler is being attached to the body, and sometimes your javascript runs first and it isnt being attached. wrap your code in this:
$(function(){
$("body").on("click", ".reply-button", function(){
alert("test");
});
});
Does anyone have any idea on how I should go about debugging this?
Sometimes it's best to pull out a tiny portion of code, and see if it works in isolation. For example: http://jsfiddle.net/6v7z9fak/
js:
$("body").on("click", ".reply-button", function(){
alert("test");
});
html:
<button type="button" class="reply-button">Reply</button>
As you'll see, it works fine. So you can be confident that the error is not in that bit of code alone. It is either another part of the code, or how the parts are interacting together, or something else. Now slowly add more code, test, and see where it breaks.

Categories