I am trying to figure out why this jQuery is working fine in Chrome and IE but not in Firefox. What it should be doing (and is doing in chrome and IE) is looping through each of the li's in the ul and seeing if the IMG src throws an error. If it does the li is removed.
$('ul.community-properties li').each(function() {
$('li IMG').on('error', function() {
$(this).parent().remove();
});
});
I have also tried
$('ul.community-properties li').each(function() {
$('li IMG').error(function() {
$(this).parent().remove();
});
});
If anyone has a more efficient way or a way to get this to work in all browsers that would be great.
Here is the html structure
<ul class="community-properties">
<li>
<img src="{tag_community property1_value}" />
<div class="item-link">View Property Details</div>
</li>
<li>
<img src="{tag_community property2_value}" />
<div class="item-link">View Property Details</div>
</li>
<li>
<img src="{tag_community property3_value}" />
<div class="item-link">View Property Details</div>
</li>
<li>
<img src="{tag_community property4_value}" />
<div class="item-link">View Property Details</div>
</li>
</ul>
Check to see if the image was loaded already
window.setTimeout( function() { //added delay to make sure that onerror already has run.
$('ul.community-properties li img').one('error', function() { //bind the error event to the images
$(this).parent().remove();
}).filter( function() { //check to see if an image was loaded from the cache as broken (or if onerror fired before set)
return (this.complete && (this.naturalWidth===0 || this.naturalWidth===undefined));
}).trigger("error"); //fire the error event
},1000); //Broken images should hide after one second
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="community-properties">
<li>
<img src="{tag_community property1_value}" />
<div class="item-link">View Property Details</div>
</li>
<li>
<img src="http://i.imgur.com/UyY6HH5.gif" />
<div class="item-link">View Property Details</div>
</li>
<li>
<img src="{tag_community property3_value}" />
<div class="item-link">View Property Details</div>
</li>
<li>
<img src="{tag_community property4_value}" />
<div class="item-link">View Property Details</div>
</li>
</ul>
Related
I want to create a function that will retain the alt value, so that I can take the name of a movie and transport it to the next webpage.
<div class="now-showing">
<ul class="movie-items">
<li>
<img id="a" src="/images/movie-a.jpg" alt="Movie A">
<button>BOOK</button>
</li>
<li>
<img id="a" src="/images/movie-b.jpg" alt="Movie B">
<button>BOOK</button>
</li>
<li>
<img id="a" src="/images/movie-c.jpg" alt="Movie C">
<button>BOOK</button>
</li>
</ul>
</div>
I'm aware that I have the same id name for each item, however I have 14 films in total at the moment, so I would like to have a single function that can get each items unique alt value. Currently, no matter which movie link I click, it shows me 'Movie A' using the following function:
function getMovieName() {
let link = document.getElementById('a');
let movieInfo = [];
movieInfo.push(link.alt);
console.log(movieInfo);
};
You can detect which A was clicked (and find the matching IMG tag) from the structure of the LI.
function getMovieName(e) {
e.preventDefault(); // stop the browser from immediately going to a.href
let link = e.target; // the link that was clicked
let img = link.closest("li").querySelector("img"); // the img that is in the same grandparent "li" tag as the link that was clicked
console.log(img.alt);
};
<div class="now-showing">
<ul class="movie-items">
<li>
<img src="/images/movie-a.jpg" alt="Movie A">
<button>BOOK</button>
</li>
<li>
<img src="/images/movie-b.jpg" alt="Movie B">
<button>BOOK</button>
</li>
<li>
<img src="/images/movie-c.jpg" alt="Movie C">
<button>BOOK</button>
</li>
</ul>
</div>
Your HTML is invalid, each ID should be unique.
Your code doesn't work, because .getElementById returns first element found.
Just use a different id for each movie
I am using handlebars to show data. I have a ul that filters the data and populates another ul. The filter ul has a couple of choices that currently output an empty ul. I want the empty ul to show a message that says "There are no sessions yet."
I am trying to use handlebars if helper. The problem I am running into is the message is showing up in all ul, even if it is not empty.
<div class="session-details-inner">
<div class="sidebar left-sidebar left-align">
<ul id="session_filter_15308050681959955093" class="session_filters no-list-style">
<li>
<a class="themelink active" data-filter="All" title="All Tracks">General</a>
</li>
<li>
<a class="themelink" data-filter="Destination Marketers" title="Destination Marketers">Destination Marketers</a>
</li>
<li>
<a class="themelink" data-filter="Exhibitions" title="Exhibitions">Exhibitions</a>
</li>
<li>
<a class="themelink" data-filter="Financials" title="Financials">Financials</a>
</li>
<li>
<a class="themelink" data-filter="Registration" title="Registration">Registration</a>
</li>
<li>
<a class="themelink" data-filter="Technical" title="Technical">Technical</a>
</li>
<li>
<a class="themelink" data-filter="Venues" title="Venues">Venues</a>
</li>
</ul>
</div>
<div class="sidebar right-sidebar left-align">
<ul class="scheduleday_wrapper themeborder no-list-style">
{{#each ./Sessions}}
{{#if TrackDescription.length}}
<li class="themeborder individual-session accordion-panel" data-track="{{TrackDescription}}">
<div class="session_content_wrapper expandable accordion">
<div class="session_content ">
<div class="session_title">
<h6>{{Title}}</h6>
</div>
</div>
</div>
<div class="session_content_extend hide session_content_wrapper panel">
<div class="session_content ">
<div class="session_excerpt">{{SessionDetails}}</div>
<div class="session_title_list">
<span class="ti-bookmark"></span>
<div class="session_title_item">{{TrackDescription}}</div>
</div>
</div>
</div>
</li>
{{else}}
<li class="no-sessions">There are no session yet.</li>
{{/if}}
{{/each}}
</ul>
</div>
<script type='text/javascript'>
$(document).ready(function($) {
$('.accordion').on('click', function() {
$parent_box = $(this).closest('.accordion-panel');
//$parent_box.siblings().find('.panel').slideUp(500);
$parent_box.siblings().find('.icon').removeClass('down');
$parent_box.find('.panel').slideToggle(500);
$parent_box.find('.icon').toggleClass('down');
});
$('ul.scheduleday_wrapper li .session_content_wrapper').on('click', function(ev) {
ev.preventDefault();
jQuery(this).next().toggleClass('hide');
});
$(".session_filters a").click(function(){
jQuery(".session_filters a").removeClass("active");
jQuery(this).addClass("active");
currentSessionType=jQuery(this).attr("data-filter");
jQuery(".individual-session").hide();
jQuery(".individual-session[data-track='"+currentSessionType+"'").show();
individualSession = jQuery('.individual-session');
if(currentSessionType == 'All'){
jQuery(".individual-session").show();
}
});
});
</script>
If you want to check & conditionally render if there are no sessions, shouldn't you do the length check on your Sessions instead of the TrackDescription?
Added this snippet of jQuery to check if all li had a style of display: none. If all li have display: none, show message li else hide message li.
if($('.scheduleday_wrapper').children(':visible').length == 0){
jQuery(".no-sessions").show();
}
else{
jQuery(".no-sessions").hide();
}
We need to be able to hide and show elements based on currently hovered element. We have tried the following below, but it does not add the is-active class and remove it based on what other element is on hover.
How can we hide and show elements based on the current hovered element?
Goal (based on example below):
when you hover over some under first, display <div class="two" id="some-link">some link</div> using is-active class
when you hover over path under first, <div class="two" id="some-link">some linke</div> should not display (remove is-active class), and <div class="two" id="path-link">path link</div> should display (add is-active class)
Current issue:
is-active class is not being removed when on hover element is changed
$(function() {
$('li#two').hover( function() {
var el_two = $(this);
var el_id = el_two.attr('id');
var el_link = el_two.attr('data-at');
var el_sel = '#'+el_link+'.'+ el_id;
var el_parent = el_two.parent().parent();
el_parent.find('.is-active').removeClass('is-active');
$(el_sel).addClass('is-active');
});
});
.two {
display: none;
}
.is-active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="one">
first
<div class="one">
<ul>
<li data-at="some-link" id="two">
some
</li>
<li data-at="path-link" id="two">
path
</li>
<li data-at="another-one" id="two">
another one
</li>
</ul>
<div class="dropdown">
<div class="two" id="some-link">some link text</div>
<div class="two" id="path-link">path link</div>
<div class="two" id="another-one">another one</div>
</div>
</div>
</li>
<li id="one">
second
<div class="one">
<ul>
<li>
another some
</li>
<li>
another path
</li>
</ul>
</div>
</li>
<li id="one">
third
<div class="one">
<ul>
<li>
third some
</li>
<li>
third path
</li>
</ul>
</div>
</li>
</ul>
First your .find() is using the wrong selector. You have find('is-active') which is an element name selector, you wanted a css class selector ie .is-active.
el_parent.find('.is-active').removeClass('is-active');
Note for removeClass() you don't use a css selector you just use a class name hence why you don't need the dot in that call
Now if you wanted to also have the class removed on hovering out of the element as well then you need to add an event listener for that, and call removeClass from there. .hover() uses a second argument for setting such an event listener callback.
$('li#two').hover(onHoverCallback,function(){
//code for finding the right element
$(el_sel).removeClass('is-active');
})
$(function() {
$('li#two').hover( function() {
var el_two = $(this);
var el_id = el_two.attr('id');
var el_link = el_two.attr('data-at');
var el_sel = '#'+el_link+'.'+ el_id;
var el_parent = el_two.parent().parent();
el_parent.find('.is-active').removeClass('is-active');
$(el_sel).addClass('is-active');
},function(){
var el_two = $(this);
var el_id = el_two.attr('id');
var el_link = el_two.attr('data-at');
var el_sel = '#'+el_link+'.'+ el_id;
$(el_sel).removeClass("is-active");
});
});
.two {
display: none;
}
.is-active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="one">
first
<div class="one">
<ul>
<li data-at="some-link" id="two">
some
</li>
<li data-at="path-link" id="two">
path
</li>
<li data-at="another-one" id="two">
another one
</li>
</ul>
<div class="dropdown">
<div class="two" id="some-link">some link text</div>
<div class="two" id="path-link">path link</div>
<div class="two" id="another-one">another one</div>
</div>
</div>
</li>
<li id="one">
second
<div class="one">
<ul>
<li>
another some
</li>
<li>
another path
</li>
</ul>
</div>
</li>
<li id="one">
third
<div class="one">
<ul>
<li>
third some
</li>
<li>
third path
</li>
</ul>
</div>
</li>
</ul>
First, my HTML tag is here
<ul>
<li>
<form>...</form>
<div>
<div class="A"></div>
<div class="B"><img class="wantToShow"></div>
</div>
<div class="C"></div>
</li>
<li>...</li>
</ul>
What I want to do is that when I mouse over <li>, the small image, <img class="wantToShow"> , is shown up(like hover).
But when I add event on each <li> element the following problems occur.
If I use jQuery.mouseover(<li>, function), the whole element in <li> shown up whenever I move mouse cursor in <li>.
If I use jQuery.mouseenter(<li>, function), an element, my mouse cursor enter at first, shown up. In this case, the real problem is that the event do not catch <li> but an element in <li>.
What can I do for this... Thank you!
I think something like this is what you are after:
$('li').on('mouseover',function() {
var $this = $(this);
if($('.wantToShow').is(':hidden')) {
$this.find('.wantToShow').show();
} else {
$this.find('.wantToShow').hide();
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<form>This is A</form>
<div>
<div class="A"></div>
<div class="B">
<img src='https://placebear.com/200/300' class="wantToShow">
</div>
</div>
<div class="C"></div>
</li>
<li>This is B</li>
</ul>
I want to make the dropdown close when clicking anywhere in a document, currently it only closes when I click on the dropdown menu itself. Here's what I currently have of the HTML and JQuery:
HTML:
<div class="user-menu">
<div id="dropdown" class="ddmenu">
<img src="#" class="user-menu-pic" alt="">
<span>Name Lastname</span>
<img src="images/dropdown-icon.png" class="right dropdown-icon" width="30" height="30" alt="">
<ul>
<li>My Profile</li>
<li>Change profile picture/background</li>
<li>Settings</li>
<li>Change password</li>
<li>Sign Out</li>
</ul>
</div>
</div>
Jquery:
$('#dropdown').on('click', function (e) {
e.preventDefault();
if ($(this).hasClass('open')) {
$(this).removeClass('open');
$(this).children('ul').slideUp('fast');
} else {
$(this).addClass('open');
$(this).children('ul').slideDown('fast');
}
});
I think you are looking for something like this:
JSFiddle : DEMO
$('#dropdown').on('click', function (e) {
e.preventDefault();
if ($(this).hasClass('open')) {
$(this).removeClass('open');
$(this).children('ul').slideUp('fast');
} else {
$(this).addClass('open');
$(this).children('ul').slideDown('fast');
}
});
$(document).mouseup(function (e) {
var container = $("#dropdown");
if (!container.is(e.target) // if the target of the click isn't the container...
&&
container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.children('ul').slideUp('fast');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="user-menu">
<div id="dropdown" class="ddmenu">
<img src="#" class="user-menu-pic" alt=""> <span>Name Lastname</span>
<img src="images/dropdown-icon.png" class="right dropdown-icon" width="30" height="30" alt="">
<ul>
<li>My Profile
</li>
<li>Change profile picture/background
</li>
<li>Settings
</li>
<li>Change password
</li>
<li>Sign Out
</li>
</ul>
</div>
</div>
Note : Actually it doesn't need two clicks, it's working with very first click. But you can see that when you click on Menu(very first time), so it is already open(i.e. Already slideDown) and does not have class open. So it executes the loop which returns false for hasClass("open"). Now in that loop we say menu to slideDown, which is already in the slideDown State.
If you want better explanation do me a favor add class="ddmenu open" to your html like this: <div id="dropdown" class="ddmenu open"> and then try it again.