Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I cannot find the right solution how hide a certain content on new part of page generated from PHP. (I am new in javascript)
I have a page, which loads new content below the actual, if a visitor scrolling down (like on Facebook.)
Each time, when a new content will displayed, I want run a function, which will hide certain content on the page.
Here is the code which loads new content. This works great.
(function() {
var $loadMore = $('.load-more').first();
if (!$loadMore.get(0)) {
return;
}
var timeout;
var $loadMoreLink = $loadMore.children('a'),
$list = $loadMore.prev('ul');
$loadMoreLink.on('click', function(event) {
event.preventDefault();
getMore();
});
function checkForMore() {
if (($window.scrollTop() + $window.height()) > ($list.offset().top + $list.height())) {
getMore();
}
}
function getMore() {
if (!$loadMoreLink.is(':visible')) {
return;
}
$loadMoreLink.attr('hidden', true);
$.get($loadMoreLink.attr('href'), function(response) {
$list.append(response);
var moreUrl = $list.children().last().data('more-url');
if (moreUrl) {
$loadMoreLink.attr('href', moreUrl);
$loadMoreLink.removeAttr('hidden');
}
else {
$loadMore.attr('hidden', true);
}
console.log(moreUrl)
});
}
$window.on('scroll', function() {
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(checkForMore, 50);
});
checkForMore();
})();
Here is my code, with help of which I want to hide certain content. That does not work :(. I have tried really much, and spent many days on that.
var hideUnity = document.getElementsByClassName("load-more");
for (var i = 0; i < hideUnity.length, i++) {
hideUnity[i].addEventListener("click", function() {
if (something && something) {
$(document).ready(function(){
$("li.unity").hide();
});
}
});
}
Link to loading file at page
<div class="load-more">
Load more
</div>
Can someone help me, please? :). Thanks.
I don't know if there is a reason to mix native js and jQuery, but you can do your function easily using the framework:
$(function(){
$(".load-more").on('click', function(){
// now $(this) represents clicked object while $('.load-more') still represents all elements with provided class
if( whateveryouwant ){
$("li.unity").hide();
}
});
});
Edit
If you need to use a delegated event, just replace
$(".load-more").on('click', function(){....
by
$(document).on('click', '.load-more', function(){....
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I want to see if users on my site have logged on more than one time so they have to log back in. When I run my code, the h4 element has no text content inside of it. Also, the h4 does not have any text at first and it waits for the code to give its HTML. However, Chrome does tell me that there is localStorage. I think it is how that I am trying to get it is the problem. The other problem that the code looks correct for me. Does anyone know how to fix this?
Here is my code:
var login = 0;
window.onload = function() {
login++;
localStorage.setItem("save1", btoa(login));
CheckForOtherLogin();
};
function CheckForOtherLogin() {
window.localStorage.getItem("save1");
if (login === null) {
login = 0;
} else {
login = atob(login);
document.getElementById("test").innerHTML = login;
}
}
Edit: Looks like I made a little tiny mistake:
var login = 0;
window.onload = function() {
login++;
localStorage.setItem("save1", login);
CheckForOtherLogin();
};
function CheckForOtherLogin() {
window.localStorage.getItem("save1");
if (login === null) {
login = 0;
} else {
document.getElementById("test").innerHTML = login;
}
return login;
}
it seems that what your're passing to the localstorage is an object so the html won't read it, also in the "CheckForOtherLogin()" function you need to asign a value to the var "login" when you get the value from the localStorage just try this:
`var login = 0;
window.onload = function() {
login++;
localStorage.setItem("save1", login);
CheckForOtherLogin();
};
function CheckForOtherLogin() {
login = window.localStorage.getItem("save1");
if (login === null) {
login = 0;
} else {
document.getElementById("test").innerHTML = login;
}
}`
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
As the title says, I have some code that only fires the click event once. Can you guys take a look?
UPDATE:
I have edited the code to show the whole function. Im making a plugin for jQuery. Anyway, the point is that the code DOES WORK but the click function of a.click() ets fired only once, removing one filter only.
addFilterProcess: function ()
{
var $this = this;
var select_filters = this.select_filters;
var selected_filter = select_filters.val();
if (selected_filter != 0)
{
if (this.active_filters.length == 0)
{
this.active_filters.push(selected_filter);
this.used_filters.append(this.template_show_filter(this.options.available_filters[selected_filter], selected_filter));
var filter = this.used_filters.find('#filter-'+selected_filter);
var a = filter.find('a');
a.click(function () {
$this.removeFilter(a.attr('filter'));
});
this.btn_apply_filters.show();
this.btn_cancel_filters.show();
this.btn_apply_filters.on('click', function () {
$this.applyFilters();
});
this.btn_cancel_filters.on('click', function () {
$this.cancelFilters();
});
/*
Reset the select, to show the first option
*/
select_filters.val(0);
}
else
{
if (this.active_filters.indexOf(selected_filter) === -1)
{
this.active_filters.push(selected_filter);
this.used_filters.append(this.template_show_filter(this.options.available_filters[selected_filter], selected_filter));
/*
Reset the select, to show the first option
*/
select_filters.val(0);
}
}
}
},
Try
$(this).removeFilter(a.attr('filter'));
I have a slider with 10 slider elements. However, only 7 out of 10 elements are rendered, given my data structure contains 20 sets. The site is hosted here
The code in question
function populateCarousell(cdata) {
var x = 0; //debug
jQuery(".wslide-slides .wslide-slide").each(function() {
var single = cdata.shift();
var jcurrSlide = jQuery(this);
jcurrSlide.find(".wslide-caption-text").text(single.title);
jcurrSlide.find("a").attr('href', "https://carousell.com/p/" +single.id);
jcurrSlide.css({'background-image':Base64.decode('dXJs')+'('+single.primary_photo_full_url+')'});
jcurrSlide.css({'background-image':'contain'});
jcurrSlide.css({'background-position':'50% 50%'});
jcurrSlide.css({'background-repeat': 'no-repeat'});
x++; //debug
jcurrSlide.find(".wslide-slide-inner2").removeAttr('style').find("img").css({'display':'none'});
});
alert(x); //Outputs 7
}
which is activated by (to ensure page fully loaded)
function caroDataCallback(data) {
if(document.readyState != "complete" ) {
setTimeout(function() { caroDataCallback(data); }, 2000);
}
else{
populateCarousell(data);
}
}
Upon examination in Chrome, the results is
That's because your page is not fully loaded when you call populateCarousell(cdata) function in your javascript file. Try instead of using $(document).ready(), use the $(document).load() to make sure all the images are loaded before you initiate your carousel.
Update: Use $(window).on('load', function() { .. }); instead.
Hope this helps.
Can anybody tell me what are the possible solutions for these??
Question 1: A web page as a form with the id "my_form" and a few elements with the class "excluded" applied. How can you make a copy of the form and get rid of all elements with the excluded class, only from the new copy of the form?
Question 2: Examine this code snippet. What do you think it's supposed to do? Why doesn't it work? How would you fix it?
$("li").each(function () {
if ($(this).find("ul")) {
$(this).css("background-color", "gray");
} else {
$(this).css("background-color", "white");
}
});
Question 3: A user is complaining that audio is playing even after hitting the play/pause button. Given the below implementation, why would that happen? How would you fix it?
// Pause Button Implementation:
$("#togglePlayPause").on("click", function () {
if (audio.paused === true) {
audio.play();
} else {
audio.pause();
}
});
// when the current audio has played all the way through, read the next element.
audio.addEventListener("ended", function () {
if (audio.paused === false) {
var nextElement = _getNextElement();
// scroll the page so that the next element we're reading is at the top of the browser window.
$(window).animate(scrollTop: nextElement.offset().top, 400, function () {
_playElementAudio(nextElement);
});
}
});
Any help will be appreciated..
Question 1
$("#form").not(".excluded").clone().appendTo("#anotherForm");
I have a code that was answered for me in another post which is below. However I have since ran into a new problem that I can't solve easily. I added additional LoadKML functions e.g. Function LoadKML1(), function LoadKML2(). The problem is now I need to click the killKML button to clear LoadKML1 before I can click LoadKML2. I would like to have the LoadKML1 clicked to load the KML and if clicked again LoadKML1 to run the killKML code. basically an on and off button in essence.
Any help is appreciated.
var kmlLoaded = false;
function LoadKML() {
alert('Kill KML');
if (kmlLoaded) {
return
killKML();
}else{
alert('Creating KML');
var nwlink = "http://kml-samples.googlecode.com/svn/trunk/kml/NetworkLink/placemark.kml"
createNetworkLink(nwlink);
kmlLoaded=true;
}
}
function killKML(source) {
ge.getGlobe().getFeatures().removeChild(networkLink);
you could change your code and call the killKML() in the kmlLoaded check like this:
function LoadKML() {
if (kmlLoaded) {
//return
killKML();
}else{
var newlink = "http://www.something.com/test.kml";
createNetworkLink(newlink);
kmlLoaded=true;
}
}