We Keep Coding

Get a dynamic element to change text

I have a dynamic element in my web page like this that appear when I click on an icon:
<span class="elasticbar-item text-right text-baseline">
<button class="button primary" data-next-button="">MY TEXT</button>
</span>
But I want to change default text that come from server (where I don't have access) with a new text.
What I tried before now is represented by:
var buttonIntervalCheck = setInterval(function () {
var button = $("[data-next-button]");
if(button.length === 1) {
button.text("NEW TEXT");
clearInterval(buttonIntervalCheck);
}
}, 1000);
Example in Google Chrome
First result is when I clicked on my icon.
Second result is when I make Inspect on the button (Ctrl+Shift+I) on the button.
And I don't understand how exactly works.
How I can fix it?

Try running this on your console:
$("[data-next-button]").text("NEW TEXT");
If it works correctly, then your timing is wrong. You are probably calling button.text before the DOM has loaded. Try wrapping your code around the ready fuction:
$(function() {
var buttonIntervalCheck = setInterval(function () {
var button = $("[data-next-button]");
if(button.length === 1) {
button.text("NEW TEXT");
clearInterval(buttonIntervalCheck);
}
}, 1000);
});

You can't select a dynamic element with jquery , try with js like
document.querySelector("[data-next-button]")

In the example below there is a setTimeout() that adds the button in the HTML dynamically in 5 seconds. Then, the setInterval() changes the text of the button and close the interval. Everything worked as you expected. I don't see any error here.
var buttonIntervalCheck = setInterval(function () {
var button = $("[data-next-button]");
if(button.length === 1) {
button.text("NEW TEXT");
clearInterval(buttonIntervalCheck);
}
}, 1000);
setTimeout(function(){
$('#ss').html(`<span class="elasticbar-item text-right text-baseline">
<button class="button primary" data-next-button="">MY TEXT</button>
</span>`);
}, 5000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='ss'></div>

Create a Bookmarklet that clicks multiple buttons on one page

I created a bookmarklet for a site a while back that ticks multiple checkboxes on a page:
javascript:javascript:;$("input[name='unfollow[]']").attr({checked:true});
Unfortunately the UI has changed and instead of checkboxes there are buttons that need to be clicked. Here is an example of the HTML of one of the buttons:
<button class="process mode-basic Unfollow" data-verb="unfollow">Unfollow</button>
There can be up to 100 of these buttons. How do I create a bookmarklet that clicks all of these buttons? Is it possible to build up a delay between each click?
Thanks.

Assuming the page has jQuery loaded, you can click each one with a delay in between:
(function(){
var unfollowButtons = $('button.Unfollow');
var index = unfollowButtons.length-1;
unfollow();
function unfollow(){
if(index >= 0){
$(unfollowButtons[index--]).click();
setTimeout(unfollow, 500);
}
}
})();

$('button[data-verb="unfollow"]').on({
click: function() {
$('#result').append($(this).text() + ' was clicked<br/>');
}
});
$('#unfollow-all').on({
click: function() {
$('button[data-verb="unfollow"]').each(function(index) {
var el = $(this);
setTimeout(function() {
clickButton(el);
}, 500 * index);
});
}
});
function clickButton(button) {
button.click();
}
fiddle: http://jsfiddle.net/6AJNc/1/

how to stop setInterval() on slidetoggle() then restart again?

I have looked at all the other answers similiar to this question but i can't make them fit my scenario.
i have a page that has a sidebar that contains 15 results that auto refreshes, which is fine.
There is a link that loads up an external page into a div with an overlay. then this new div with the FULL list of the results also auto refreshes whilst its open. (don't want both divs auto-refreshing in background uneccesarily)
in this full list div each result has a jquery slideToggle() function to display more information.
what i am TRYING(and failing) to do is make the auto refresh stop whilst this slideToggle is displaying information, cos otherwise when the page refreshes it goes back to display:none.
here is my latest attempt:
html
main page has div to load into...
<div id="full_list"> loading... </div>
external page with the full list
<div class="events_list"> <!--container for events -->
<ul><li>
<div class="full_event"> <!--each event in a list-->
#1<b> 500 m race </b> <!--this bit always seen -->
<div class="event_slide"> <!--this div is slideToggled() -->
<b>500m race </b><br>
<div class="evntdescription">
run 500mrun 500mrun 500mrun 500mrun 500mrun 500m
</div>
</div>
</div>
</li></ul>
</div>
now my attempted javascript
var refreshData;
var infodisplay = $('.event_slide').css('display');
function autoRefresh () {
if(infodisplay == 'none')
{
refreshData = setInterval(function() {
$('#full_list').load('eventlist.php');
}, 1000);
}
else
{
clearInterval(refreshData);
}
};
$("#view_events").click(function(){ //this opens up the div //
overlay.fadeIn(1000).appendTo(document.body);
$('#full_list').load('eventlist.php'); //loads external page//
$('#full_list').fadeIn(800, function() {
autoRefresh (); //start the auto refresh/
$("body").on("click",".full_event", function(e){
$(this).children('div.event_slide').slideToggle(300, function() {
autoRefresh (); //thought it might work if i add the function
//here as well //
});
});
});
$("body").on("click","#close", function(e){ //closes div//
overlay.fadeOut(300);
$("#full_list").fadeOut(300);
});
return false;
});
basically it doesnt do anything. i have made it work if i get rid of the second autoRefresh function, but it won't stop the function from going. just keeps on refreshing, also not sure how to stop the refresh when i close the div aswell.
let me know if you need more info.
thanx!

Try clearing the interval when the asynchronous loading has completed:
function autoRefresh () {
refreshData = setInterval(function() {
$('#full_list').load('eventlist.php', function() {
clearInterval(refreshData);
});
}, 1000); };

ok so i figured it out anyway. thanx for trying if you did tho.
put the if statement into a function after toggle is completed.
only downside is if it refreshes at same time that its still 'toggling' it will refresh. it won't clear the interval untill the toggle has completed. no idea how to get round that.
changed the code to this:
var refreshData;
function autoRefresh() {
refreshData = setInterval(function() {
$('#full_list').load('eventlist.php');
}, 10000);
};
$("#view_events").click(function(){ //this opens up the div //
overlay.fadeIn(1000).appendTo(document.body);
$('#full_list').load('eventlist.php'); //loads external page//
$('#full_list').fadeIn(800, function() {
autoRefresh (); //start the auto refresh/
$("body").on("click",".full_event", function(e){
$(this).children('div.event_slide').slideToggle(300, function() {
if($(this).css('display') == 'none')
{$('#full_list').load('eventlist.php');
autoRefresh();
}
else
{
clearInterval(refreshData);
};
});
});
});
$("body").on("click","#close", function(e){ //closes div//
overlay.fadeOut(300);
$("#full_list").fadeOut(300);
});
return false;
});

bpopup multiple

I'm using a lightweight jQuery popup plugin called 'bPopup'. I'm using it on my website at the moment to load multiple popup windows when clicked. I was recently told that my code was inefficient as I was loading multiple popups with multiple JavaScript 'listeners', i.e.:
<script type="text/javascript">
;(function($) {
$(function() {
$('#my-button_1').bind('click', function(e) {
e.preventDefault();
$('#element_to_pop_up_32754925023').bPopup();
});
});
})(jQuery);
</script>
<script type="text/javascript">
;(function($) {
$(function() {
$('#my-button_2').bind('click', function(e) {
e.preventDefault();
$('#element_to_pop_up_95031153149').bPopup();
});
});
})(jQuery);
^^ The multiple JavaScript 'listeners'. And, for the Popups:
<!-- Button that triggers the popup -->
<a class="main" id="my-button_1" href="#">Popup 1</a></b><br />
<!-- Element to pop up -->
<div id="element_to_pop_up_1">
// ...
</div>
<!-- Button that triggers the popup -->
<a class="main" id="my-button_1" href="#">Popup 1</a></b><br />
<!-- Element to pop up -->
<div id="element_to_pop_up_1">
// ...
</div>
He's probably right (sure of it), but not sure how to implement this, or whether this is even possible (small chance he's wrong).
Help? And thanks!

Since you are using jquery, you should use it's on() method to attach a single listener to the parent DOM element, and use the selector parameter to properly delegate the event to it's children (the button/popups).
If this sounds confusing, a simple example might help:
HTML:
<div id="parent">
Show popup 1
<div id="popup1" class="popup">1</div>
Show popup 2
<div id="popup2" class="popup">2</div>
Show popup 3
<div id="popup3" class="popup">3</div>
Non-popup link
</div>
JS:
$('#parent').on('click', 'a.button', function (event) {
event.stopPropagation();
event.preventDefault();
var popup = $(this).attr('href');
$('#'+popup).bPopup();
});
This adds a single event listener on the parent element, which only gets triggered if the child element which triggered the event matches the selector (in this case a.button). It determines which popup to show by retreiving the popup's id from the href attribute.
You can see this example working here.

The below function ( myFunction() ) takes the Id of anchor/div tag which is clicked and another id of div content to be display. And applies the same style for all popup models. And also it hides the old popup which already opened when u open new popup. All popup properties you can change.
Here i used only for two popups but you can use it for many as same did here.
<script type="text/javascript">
function myFunction(whId,whtDivContent,e) {
//var totWidth = $(document).width();
//var marTop = position.top;
var elt = $(whId);
var position = elt.position();
var marLeft = position.left - 130;
if(marLeft <= 1) {
marLeft = 10;
}
var openModal_profile ='#openModal_profile';
var openModal_menu ='#openModal_menu';
// Prevents the default action to be triggered.
e.preventDefault();
$(whtDivContent).bPopup({
position: [marLeft, 0] //x, y
,opacity: 0.9
,closeClass : 'b-close'
,zIndex: 2
,positionStyle: 'fixed' //'fixed' or 'absolute' 'relative'
,follow: [false,false] //x, y
,onOpen: function() {
if(openModal_profile == whtDivContent) {
$(openModal_menu).bPopup().close();
}
else if(openModal_menu == whtDivContent) {
$(openModal_profile).bPopup().close();
}
$(whId).css({'background-color':"#DFDFDF"});
}
,onClose: function() { $('.close').click(); $(whId).css({'background-color':""}); }
});
}
;(function($) {
// DOM Ready
$(function() {
// From jQuery v.1.7.0 use .on() instead of .bind()
//$(id_menu).on('click',function(e) {}
var id_menu = '#id_menu';
var openModal_menu ='#openModal_menu';
$(id_menu).toggle(function(e) {
//$(id_menu).css({'background-color':"#DFDFDF"});
myFunction(id_menu,openModal_menu,e);
},function(e){
//$(id_menu).css({'background-color':""});
$('.close').click();
$(openModal_menu).bPopup().close();
});
var id_profile = '#id_profile';
var openModal_profile ='#openModal_profile';
$(id_profile).toggle(function(e) {
//$(id_profile).css({'background-color':"#DFDFDF"});
myFunction(id_profile,openModal_profile,e);
},function(e){
//$(id_profile).css({'background-color':""});
$(openModal_profile).bPopup().close();
});
//ENDS HERE
});
})(jQuery);
</script>

How to create Html lock on part of page using JS? (may be Jquery)

I want a part of my HTML page to be visiable to users with enabeld JavaScript only after clicking on to some button, while users with no JS support will seeit always.
So I mean we have a normal page with header and body but with no footer unteel some button is clicked. (while wievers that use no JS modes will see footer always.)

You could hide the footer using javascript and show it when a button is clicked:
$(function() {
$('#footer').hide();
$('#someButton').click(function() {
$('#footer').show();
});
});

jQuery:
$(function (){
$('#footer').hide();
$('#mybutton').click(function (){
$('#footer').show();
});
});

"Vanilla JavaScript"
window.onload = function () {
var footer = document.getElementById('footer'), someButton = document.getElementById('someButton');
footer.style.display = "none";
someButton.onclick = function () {
footer.style.display = "block";
};
};