I am trying to mass follow people i know without clicking connect the button.I have been trying to find a bit of code to mass connect through javascript console for example:
$('.button-text.follow-text').trigger('click');
Is this possible to do?
Thanks
Sure, you can, but its hard to help you with a concrete example without knowing which page you're looking at and what the underlying HTML is.
The following HTML resembles the output of the "People you may know" list on LinkedIn:
<ul class="people-cards-list">
<li id="card-1234" class="card pymk-card" data-unique-id="0">
<!-- ... contents -->
<button class="bt-request-buffed buffed-blue-bkg-1" title="Connect with ..."></button>
</li>
<li id="card-5678" class="card pymk-card" data-unique-id="1">
<li id="card-9012" class="card pymk-card" data-unique-id="2">
<!-- and so on -->
</ul>
You would be able to fire a click event on all the connect buttons from your console with this single line:
$('.people-cards-list button.bt-request-buffed').each(function (index, button) { button.click() });
It should be doable to rewrite this for use on the page you need it for.
Depending on the amount of people you want to connect with, it could be smart to add a timeout to prevent killing your browsers with hundreds of requests:
$('.people-cards-list button.bt-request-buffed').each(function (index, button) { setTimeout(function () { console.log(button); }, 500*index) });
Is this what you need?
Related
Pretty simple question please : How can I add a button at the bottom called "Next" to switch to the next tab without having to get to the top of the page and click on the next tab ?
In fact, I'm copying the tab's code existing in the top of my page but it's not working.
<a id="aba_2" href="#aba_2">Next</a>
This is the existing HTML code that you can also find here https://codepen.io/DiogoAlvaro/pen/wWzNEm :
<ul id="abas" class="teste">
<li class="selecionada"><a id="aba_1" href="#aba_1">Aba 1</a></li>
<li><a id="aba_2" href="#aba_2">Aba 2</a></li>
<li><a id="aba_3" href="#aba_3">Aba 3</a></li>
</ul>
<div id="conteudos">
<div id="conteudo_1" class="conteudo visivel">
<p>Conteúdo da Aba 1</p>
</div>
<div id="conteudo_2" class="conteudo">
<p>Conteúdo da Aba 2</p>
</div>
</div>
The javascript code is :
var abas = document.getElementById("abas");
var conteudos = document.getElementById("conteudos");
function limparSelecao(){
abas.getElementsByClassName("selecionada")[0].classList.remove("selecionada");
conteudos.getElementsByClassName("visivel")[0].classList.remove("visivel");
}
abas.addEventListener("click", function(event){
var abaClicada = event.target.id;
var itemSelecionado = abaClicada.substring(abaClicada.lastIndexOf("_"));
limparSelecao();
event.target.parentElement.classList.add("selecionada");
conteudos.querySelector("#conteudo"+ itemSelecionado).classList.add("visivel");
});
The problem I'm noticing is the switching functionality between tabs is working only one time. It means if I copy the same tabs' code another time it will not work.
Can you help me with this issue please ?
Thanks in advance.
As you can see in your javascript, when you click on a tab things will be done in the background in order to show you its content.
When a tab is clicked the class selectionada is added to your tab as well the class visivel is added to your content in order to show it.
So that sad if you want to use a button you will need then some additional javascript which has to add the class selectionada to the tab and the class visivel to the content you want to display.
Additionally the button has to know which the current open (selectionada) tab is in order to open the next one. Also if you use a Next button it seems to me logical that you will also need a Previous button.
I don't know your programming skills but this process involves some logic in order to be done.
If you are confident with javascript and jquery you can do this with some little effort.
Anyway you know now why just using a button as you ar doing, will not work.
I am very new to jQuery and not entirely sure what I'm doing. Will try my best to explain the problem I'm facing.
I'm trying to lock some content on a landing page until a user shares the link using FB, Twitter, LinkedIN or G+. The first version of the script I wrote (which worked fine) ran like this:
<head>
<script type="text/javascript">
...
$(document).ready(function()
{
$('.class').click(clearroadblock());
buildroadblock();
}
</script>
<style>
.class
{
[css stuff]
}
</style>
</head>
<body>
<div id="something">
<ul>
<li> Link1 </li>
<li> Link2 </li>
</ul>
</div>
</body>
The problem I'm now facing is changing out this code to replace the list elements with social share buttons. As they are no longer under .class, but classes like fb-share-button and twitter-share-button. Please help me understand what I need to modify to accommodate this? PS: This is not a Wordpress site.
function clearroadblock()
{
$('#roadblockdiv').css('display', 'none');
$('#roadblockBkg').css('display','none');
}
This is the way I'm clearing the overlay once a click is detected, BTW.
Can I wrap the social buttons in divs, assign them IDs and use those IDs to trigger the click like below?
<div id="Button">
Tweet
</div>
$('#Button').click(clearroadblock());
You can have multiple classes on an element by separating them with a space. Try the following:
class="class fb-share-button"
Your jquery will still work off the "class" class. I would recommend you change this name to something more meaningful though. Your css can target the "class" for general styles, but you can also target fb and twitter separately.
Update
I decided to create a quick JSFiddle for this.
Some of the styles etc won't be the same as what you're doing, but the problem is resolved. I've created a div with id main that contains the content that you want to hide. There's an absolutely positioned div over the top of this, this is the roadblock. The javascript is showing the roadblock (assuming that's what you wanted to do with buildroadblock()).
On click of a link in the ul with id socialMedia we call clearroadblock. Notice the lack of parenthesis. This hides the roadblock.
This isn't a great way of preventing someone from seeing information, you might want to think about pulling the content down from the server when the action is performed, however, I think this answers your question.
Im using Bootstrap to create a tab content. It works fine outside netsuite. but once i put this page into netsuite it gives me an error saying "Cannot assign to read only property 'preventDefault' of error"
My page is like this
HTML:
<ul id="hireTab" class="nav nav-tabs" data-tabs="tabs">
<li class="active">One
<li class="active">Two
<li class="active">Three
</ul>
<div class="tab-content">
<div id="tabOne" class="tab-pane active">
One, one one
</div>
<div id="tabTwo" class="tab-pane active">
Two, two two
</div>
<div id="tabThree" class="tab-pane active">
Three, three three
</div>
</div>
JS:
<script type="text/javascript">
jQuery(function() {
jQuery('#hireTab a').click(function(e) {
e.preventDefault();
jQuery(this).tab('show');
});
});
</script>
On a closer look i found that the tab changing is working. but after the tab changes, the preventDefault doesnt stop the page junmping.
Any idea why is that or any solution? I am new to netsuite so bear with me if this question is stupid.
UPDATE: 1 hr of googling lead me to this page. http://backbonejs.org/#Router
So it appears that backbone is hijacking my browser and changed the behavior of it.
The syntax href="#xxx" is intercepted by backbone and interpreted into "HOME_URL/xxx".
The problem now is how to stop backbone from doing this when i dont want to mess with the backbone code while im not sure how it will effect other parts of the project.
My temporary solution is event.stopPropagation().
Final Working code is:
<script type="text/javascript">
jQuery(function() {
jQuery('#hireTab a').click(function(e) {
e.preventDefault();
e.stopPropagation();
jQuery(this).tab('show');//Maybe this line is not needed
});
});
</script>
What this function does is it kills the request and stop it from going up the DOM tree.
Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
It is a brutal way of doing this. Im sure there are more elegant or native of getting this to work.
I want to expand the collapsible content of a jQuery Mobile collapsible content section. I know I can click the heading to expand it, but I don't want to rely on the user to click the same section every time the page refreshes. I know I can set a variable in the html, but that won't do because the collapsible content will still close on postback.
I need this to be done with code rather than by the user. You can see my failed attempt below. I used the template from VS 2013's Web Forms project as a start then I added jQuery Mobile and followed the instructions from jQuery Mobile's site, or so I thought. This is a simplified test page but ultimately, I want to have an ASP.NET variables to detect whether, on postback, a section has already been clicked and if a collapsible section has already been clicked, open it again so the user doesn't have to click the same place again. Is there any way to persist the expanded state or dynamically expand jQuery Mobile's collapsible content?
<%# Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.vb" Inherits="ExpandTest._Default" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<script>
$(".myDiv").trigger("expand");
</script>
<div class="jumbotron">
<h1>ASP.NET</h1>
<p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
<p>Learn more »</p>
</div>
<div class="row">
<div class="myDiv" data-role="collapsible">
<h2>Getting Started</h2>
<p>ASP.NET Web Forms lets you build dynamic websites using a familiar drag-and-drop, event-driven model. A design surface and hundreds of controls and components let you rapidly build sophisticated, powerful UI-driven sites with data access.
</p>
<p>
<a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301948">Learn more »</a>
</p>
</div>
</div>
</asp:Content>
-- EDIT --
Thing I have tried (even just for proof of concept) that fail:
$(".myDiv").trigger('expand'); // Apparently does not execute
$('.myDiv').on("click", alert("Fe Fi Foo Bar!");); // does not run anything within
$(document).on("pagecreate", function () {
Also, I have recently read that document.ready is supposed to be used for jQuery but not jQuery Mobile. Telling is the fact that I cannot use the same code that other user seem to think works and the same code that works in jsfiddle already. This leads me to believe I'm missing something that should be obvious. I have modified the order of loading jQuery Mobile in relation to the code to no avail.
Add an ASP.Net hidden field to the page with viewstate enabled.
The jQM collapsible has events for expand and collapse. On the client side, you can handle these events and create a list of the currently expanded collapsibles, and save this list to the hidden field. After postback, client code in the pagecreate event can read the list from the hidden field and expand those items.
Assign IDs to all the collapsible divs, then you can save a comma delimited list of IDs to the hidden input:
$(document).on("pagecreate", "#page1", function(){
var prevExpanded = $("#hidden").val().split(',');
$.each( prevExpanded, function( key, value ) {
$("#" + value).collapsible( "option", "collapsed", false );
});
$( "[data-role=collapsible]" ).on("collapsiblecollapse collapsibleexpand", function( event, ui ) {
GetAllExpanded();
});
});
function GetAllExpanded(){
var AllExpanded = [];
$( "[data-role=collapsible]" ).not(".ui-collapsible-collapsed").each(function( index ) {
AllExpanded.push($(this).prop("id"));
});
$("#hidden").val(AllExpanded.join(','));
}
Use <asp:hidden> fields, and on expand change their values. Then you will be able to set the value of $(".col-md-4").trigger("expand"); on postback.
Well the following works, although I'm still at a loss as to better ways that work on Web Forms and I'll have to find a way to conditionally load this, perhaps using hidden fields as suggested earlier. Thanks for the help.
<script type="text/javascript">
$(function () {
$("h2.ui-collapsible-heading").trigger("click");
});
</script>
Only this much now: I'm creating a vcard design for myself. My motivation is to make it look as good as possible. I want to apply to a webdesign company with this vcard to get a professional education for webdesign.
I still have a lot to change till it completely fulfills in my requirements, but this is my current version of the design I just uploaded to get you an overview over the design.
So as you can see it's focused on retro, vintage, ribbons and scetch elements.
Right know I want to get rid of these jerking content refreshs. So I thought a dynamic content swap via ajax and jQuery would be the best way to do it.
I never did much with js or actually ajax.
I want to ask you guys about a solution you think benefits in my design. I was thinking about something smoothly.
The content which needs to be changed is placed in
<nav>
(...)
<ul class="ribbon s"><!--Following links got the class="ribbon b/p/l/k"-->
<li class="ribbon-content">Link</li>
<!--
?content=blog
?content=portfolio
?content=lebenslauf
?content=kontakt
-->
</ul>
(...)
</nav>
<section id="content">
<div class="con clearfix">
(...)
</div><!--An empty div for possibly swapping without touching the vintage paper thing -->
</section>
http://robert-richter.com/boilerplate/
for example use jquery.
first add jquery to your html. within the domready-event you can register click events on your ribbon-menue. on each click you load the div-content from the given link-url in the html-part.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$.ready(function(){
$(".ribbon-content a").on("click", function(event){
event.preventDefault();
$(".con").load($(event.target).attr("href"), function(){
// add code after loading - for example change classes of menue
})
});
})
</script>
additionly you can the the browser-history to enable the prev- and next-buttons of the browser.