Cannot find elements by class jQuery in just inserted HTML - javascript

render:function () {
var self = this;
$.ajax({url:'/db/list.json', dataType:'JSON'}).done(function (json) {
var html = tmpl['video-list']({videos:json});
self.$el.html(html);
});
console.log($('.video-thumb-box'));
$.each($('.video-thumb-box'), function(){
console.log(this);
$(this).bind('mouseenter', function(){
console.log($('.video-thumb-info', this));
});
});
}
tmpl['video-list']({videos:json}) is underscore template and contain list of items in DIVs here is example return
<div class="span3">
<a href="#/video/123">
<div class="video-thumb-box">
<img class="video-thumb-img" src="test" alt="Video tumbnail">
<div class="video-thumb-info hide">
<img class="pull-right" width="16" height="16" src="/img/icons/namba.png">
something
</div>
</div>
</a>
</div>
<div class="span3">
<a href="#/video/123">
<div class="video-thumb-box">
<img class="video-thumb-img" src="test" alt="Video tumbnail">
<div class="video-thumb-info hide">
<img class="pull-right" width="16" height="16" src="/img/icons/namba.png">
something
</div>
</div>
</a>
</div>
Why cannot I find anything in $('.video-thumb-box')?

your each loop is backwards.
$('.video-thumb-box').each(function() {
console.log(this);
$(this).bind('mouseenter', function(){
console.log($('.video-thumb-info', this));
});
});
Here's the jQuery .each() API page

Related

Image filter Navigation

I have all the code and seems okay to me but when I click on the navigation links the link is directed to index.html or the landing project. How do I make the links filter the images?
This is the Javascript and html
$(document).ready(function() {
$(".button").click(function() {
var name = $(this).attr("data-filter");
if (name == "all") {
$(".filter").show("2000");
} else {
$(".filter").not("." + name).hide("2000");
$(".filter").filter("." + name).show("2000");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="portfolio">
<div style="text-align: center">
<div class="navigation">
ALL
ONE
TWO
THREE
</div>
<div class="ImageContainer">
<div class="filter one">
<img src="img/beach.jpg" width="400px" height="250px">
</div>
<div class="filter one">
<img src="img/Windows.jpg" width="400px" height="250px">
</div>
I expected my images to filter but they navigation links are not working
You need to prevent the default action of the link and also change your numbers to numbers (remove the quotes around the 2000)
$(document).ready(function() {
$(".button").click(function(e) { // pass the event back into the function
e.preventDefault(); // prevent the link action
var name = $(this).attr("data-filter");
if (name == "all") {
$(".filter").show(2000); // remove quotes
} else {
$(".filter").not("." + name).hide(2000);
$(".filter").filter("." + name).show(2000);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="portfolio">
<div style="text-align: center">
<div class="navigation">
ALL
ONE
TWO
THREE
</div>
<div class="ImageContainer">
<div class="filter one">
<img src="img/beach.jpg" width="400px" height="250px">
</div>
<div class="filter one">
<img src="img/Windows.jpg" width="400px" height="250px">
</div>

Check if a element is visible

I want to check if an element is visible and play a song only when it is, using: a trigger('click') event handler.
Unfortunately, I can't get it working as expected.
What am I doing wrong and how can I fix it?
Here is my JavaScript code (jQuery):
$('.overlay').on('click', function () {
if ($('a.icon-play').is(':hidden') == false) {
$('#stop').trigger('click');
} else {
$('#play').trigger('click');
}
});
Below is my HTML code:
<div class="info">
<div class="player-home-video">
<audio id="yourownlullaby-audio" src="uploads/downloads/Buenas%20%20Noches%20%3C?php%20echo%20$_POST['name'];%20?%3E.mp3"></audio>
</div>
<div class="thumbnail-home-video">
<a href="#" id="play">
<span class="icon-play preview-icon" id="play"></span>
</a>
<a href="#" id="stop">
<span class="icon-pause preview-icon" id="stop"></span>
</a>
<img class="info" src="img/thumbnail-home-video.png" />
<div class="overlay"></div>
</div>
</div>
$('.overlay').on('click', function () {
if ($('a .icon-play').is(':hidden') == true) {
$('#stop').trigger('click');
}
else
{
$('#play').trigger('click');
} });
Your​ if should be the other way.

Changing multiple images with JQuery

So here is the JQuery I am using
jQuery(document).ready(function($) {
$('.ltwitch').each(function () {
var tnick = $(this).data('tnick');
var span = $(this).next();
$.getJSON("https://api.twitch.tv/kraken/streams/"+tnick+".json?callback=?", function(c) {
if (c.stream == null) {
span.html("Offline");
} else {
span.html("Online");
}
});
});
});
And the HTML that was with it when I found it
<a class="ltwitch" href="http://www.twitch.tv/ifstudios" data-tnick="IFStudios">IFStudios</a> (<span>...</span>)
RoosterTeeth (...)
Now what I want to do, I have HTML that looks like this
<a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/sweet.png" class="img-responsive" alt="">
</a>
Basically when a channel becomes live I want to switch the img src from the image I have it set to, to the same image with -online on the end. So I can have multiple pictures on the website, but I can have the images change dependent on who is live and who isn't.
So if I have
<a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/sweet.png" class="img-responsive" alt="">
</a>
When her channel goes live, it will turn to
<a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/sweet-online.png" class="img-responsive" alt="">
Or if it was
<img src="img/portfolio/carrot.png"
it would turn to
<img src="img/portfolio/carrot-online.png"
Any ideas?
Try the below code
jQuery(document).ready(function($) {
$('.ltwitch').each(function () {
var tnick = $(this).data('tnick');
var span = $(this).next();
$.getJSON("https://api.twitch.tv/kraken/streams/"+tnick+".json?callback=?", function(c) {
var img = $(img-selector);
var source = img.attr('src');
if (c.stream != null) {
// Online
if(source.indexOf('.png') != -1){
source = source.replace(".png", "-online.png");
img.attr('src',source);
}
}
else{
// Offline
source.replace("-online", "");
img.attr('src',source);
}
});
});
});
Note: You have to pass the correct image selector to $(img-selector). Also call the same function again for refreshing

Condensing jQuery script

Looking to condense the jQuery I have here into a few lines, I know it can be done but I can't seem to get it to work looking at other posts and round the web...
HTML
<h2>Meet The Team</h2>
<img src="img/1.png" id="team" class="team" />
<img src="img/1.png" id="team1" class="team" />
<img src="img/1.png" id="team2" class="team" />
<img src="img/1.png" id="team3" class="team" />
<img src="img/1.png" id="team4" class="team" />
<img src="img/1.png" id="team5" class="team" />
<div id="teamintro" class="teamintro">
<h3>Matt</h3>
<p>personal intro </p>
</div>
<div id="teamintro1" class="teamintro">
<h3>Garrett</h3>
<p> </p>
</div>
<div id="teamintro2" class="teamintro">
<h3>Erik</h3>
<p> </p>
</div>
<div id="teamintro3" class="teamintro">
<h3>Matt</h3>
<p> </p>
</div>
<div id="teamintro4" class="teamintro">
<h3>Chi</h3>
<p> </p>
</div>
<div id="teamintro5" class="teamintro">
<h3>Daemon</h3>
<p> </p>
</div>
jQuery
<script>
$(document).ready(function() {
$('.teamintro').hide();
$('#team').hover(function() {
$('#teamintro').fadeIn(600);
},
function(){
$('#teamintro').hide();
});
$('#team1').hover(function() {
$('#teamintro1').fadeIn(600);
},
function(){
$('#teamintro1').hide();
});
$('#team2').hover(function() {
$('#teamintro2').fadeIn(600);
},
function(){
$('#teamintro2').hide();
});
$('#team3').hover(function() {
$('#teamintro3').fadeIn(600);
},
function(){
$('#teamintro3').hide();
});
$('#team4').hover(function() {
$('#teamintro4').fadeIn(600);
},
function(){
$('#teamintro4').hide();
});
$('#team5').hover(function() {
$('#teamintro5').fadeIn(600);
},
function(){
$('#teamintro5').hide();
});
});
</script>
So what I am looking to do it to get the persons info to appear when you hover over the image of the said person.
jQuery passes the DOM element on which the event occurred to your function as this, so you can easily get its id and use that:
$('.team').hover(
function() {
var num = this.id.substring(4); // Remove the "team" prefix
$('#teamintro' + num).fadeIn(600);
},
function(){
var num = this.id.substring(4); // Remove the "team" prefix
$('#teamintro' + num).hide();
}
);
The selector .team matches all of your elements with the team class. Within the callbacks, this is the DOM element, so this.id is its id. .substring(4) removes the team prefix.

creating a toggle button to change page views

I am using knockout js to get my data to display and i am also using it to bind templates. I have a page that displays the same information in two different ways: one is a grid view and the other is a list view. Currently i have both views displayed on the page load. I would like to create two buttons one for the grid and one for the list. I am not sure how to go about it with Knockout js any tips or help is appreciated.
View Page
<div data-bind="template: {name:'grid-template'}, visible: !showList()"></div>
<div data-bind="template: {name:'list-template'}, visible: showList()"></div>
<input type="button" value="Toggle" data-bind="click: toggleView"/>
<script style="float:left" type="text/html" id ="grid-template">
<section " style="width:100%; float:left">
<section id="users" data-bind="foreach: Users">
<div id="nameImage">
<figure id="content">
<img width="158" height="158" alt="Gravatar" data-bind="attr:{src: GravatarUrl}"/>
<figcaption>
<a title="Email" id="emailIcon" class="icon-envelope icon-white" data-bind="attr:{'href':'mailto:' + Email()}"></a>
<a title="Profile" id="profileIcon" class="icon-user icon-white"></a>
</figcaption>
</figure>
<p data-bind="text:Name"></p>
</div>
</section>
</section>
</script>
<script style="float:left" type="text/html" id="list-template">
<div data-bind="foreach: Users">
<div style="width:60%; float:left; margin:10px; height:58px">
<img style="float:left; margin-right:5px" width="58" height="58" alt="Gravatar" data-bind="attr:{src: GravatarUrl}"/>
<p style="height:58px; float:left; vertical-align:central" data-bind="text:Name"></p>
<a style="float:right" title="Profile" class="icon-user icon-black"></a>
<a style="float:right" title="Email" class="icon-envelope icon-black" data-bind="attr:{'href':'mailto:' + Email()}"></a>
</div>
</div>
</script>
#section scripts{
#Scripts.Render("~/bundles/user" + ViewBag.Layout.AppVersionForUrls)
<script type="text/javascript">
(function ($) {
$.views.User.GetUser('#url');
})(jQuery);
</script>
}
Knockout JS
$.views.User.UserViewModel = function (data) {
var self = this;
self.Name = ko.observable(data.Name);
self.Email = ko.observable(data.Email);
self.ContentRole = ko.observable(data.ContentRole);
self.MD5Email = ko.observable(data.MD5Email);
self.GravatarUrl = ko.computed(function () {
return 'http://www.gravatar.com/avatar/' + self.MD5Email() + '?s=300&d=identicon&r=G';
});
self.showList = ko.observable(true);
self.toggleView = function () {
self.showList(!self.showList());
}
};
If I understand correctly, you could bind the visible property of each div to a boolean that you flip each time a button is pressed.
HTML:
<input type="button" value="Toggle" data-bind="click: toggleView"/>
<div data-bind="visible: showGrid()">Grid</div>
<div data-bind="visible: !showGrid()">List</div>
View Model:
var ViewModel = function() {
var self = this;
self.showGrid = ko.observable(true);
self.toggleView = function() {
self.showGrid(!self.showGrid());
}
}
var vm = new ViewModel();
ko.applyBindings(vm);
Here's a jsFiddle.

Categories