I'm new to Javascript. I have a script that clicks on the ad unit on the site. But now I need to achieve the same in Javascript.I already have same script for Python+selenium, but now need on JS.
The object specified in the index.html javascript code
When the page loads the code is transformed into an ad unit, consisting of 3 images with links.
But it is necessary to click to start to get a reference At least one of the three blocks.
In Google Chrome, the function "View code" gives the following:
How to find and click on one of the three elements on the page with JS?
Find by xpath or ID or tagname?
Help me please! Thanks in advance!
Maybe this way helps m?...
<script type="text/javascript">
window.onload = function () {
var links = document.find_element_by_xpath("//a[contains(#href,'.xyz')]");
window.location = links;
}
</script>
If you want to trigger a click on a element using Javascript, you can try the following:
document.getElementById('element').onclick();
Here's the working fiddle:
https://jsfiddle.net/tbjbbt5a/
Related
I'm working on chrome extension. In one of my files (content script) I want to remotely click a particular element of a particular webpage. I know class names names showed in img of elements that I would like to be clicked.
Unluckily any options doesn't like clean JS or jQuery work for me (but 2 days ago it worked and I didn't change the method!). I know that content script is on the page I want, because of the console.log. My content script content (yeah desperately I try every option to show that it doesn't work at all, even one single options of those underneath is not working).
let check = location.href;
if (check.includes("categories")){
try {
console.log("works");
$(document).on('click', '.styles__Label-causv5-1 giszo', function() {
alert('hello');
});
document.getElementsByClassName('.articleButton___wrapper___3GdN_ core___flip-container___11Bqu').click();
document.getElementsByClassName('.styles__Label-causv5-1 giszo').click();
document.getElementsByClassName('.sc-AxmLO egaafL auto-tests-add-to-cart-button articleButton___add-to-cart___1Nngf core___flipper___3yDf4').click();
document.getElementsByClassName('articleButton___wrapper___3GdN_ core___flip-container___11Bqu').click();
document.getElementsByClassName('styles__Label-causv5-1 giszo').click();
document.getElementsByClassName('sc-AxmLO egaafL auto-tests-add-to-cart-button articleButton___add-to-cart___1Nngf core___flipper___3yDf4').click();
$('.styles__Wrapper-causv5-0 eBUpQR auto-tests-add-to-cart-button articleButton___add-to-cart___1Nngf core___flipper___3yDf4').click(function() { });
$('.styles__Label-causv5-1 giszo').click();
// yeah there is catch{} and other stuff under it but it doesn't matter here
I have GA on my website and i'm trying to track every click on the website. The following JavaScript must be used, it acts like an overlay on the page:
<script type="text/javascript">
var tile = new HTMLLiveTile.TileController();
window.onmousedown = function() {
tile.openStoreProduct("var1", "var2", "var3");
}
</script>
What would be the HTML equivalent code to track this?
Right now i have:
<a id="tile" onClick="ga('send', 'event', 'click1', 'click2', 'sample');"><img src="./images/image.png"> </a>
I'm very new to this, sorry if it's redundant. My assumption was to track the variable and add it to the onClick.
I guess you are asking for a solution that does not require much hassle and much changing in code and moreover without any need to change your previous code.
you can use event.target.+ things you need to know to get info.
function mouseTrack(){
var element_name = event.target.tagName;
alert("mouse click was detecteted at: "+ element_name);
}
window.addEventListener('click', mouseTrack(), false);
this code will alert the Tag Name of Element clicked (like DIV, a, SPAN etc you know the list.). But this code is awful.It wont work in Mozilla FF, It wont work In IE 9 below. I took some time to create a fiddle on JSFiddle.net you can view example I made Here
I have a site that was built a few years ago, it was constructed using nested tables which is turning out to be a major issue when trying to convert the template into a responsive design.
It is an html site with a lot of SEO so the client is not willing to convert to php and risk loosing the links.
So, I decided to use the jquery load method to load the menu into a div, so if I need to add a page or change the current menu, I only have to change 1 page.
So the menu uses an older javascript code to hide the dropdowns:
var menu=function(){
var t=15,z=50,s=6,a;
function dd(n){this.n=n; this.h=[]; this.c=[]}
dd.prototype.init=function(p,c){
a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
for(i;i<l;i++){
var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
h.onmouseover=new Function(this.n+'.st('+i+',true)');
h.onmouseout=new Function(this.n+'.st('+i+')');
}
}
dd.prototype.st=function(x,f){
var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
clearInterval(c.t); c.style.overflow='hidden';
if(f){
p.className+=' '+a;
if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
if(c.mh==c.offsetHeight){c.style.overflow='visible'}
else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
}else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
}
function sl(c,f){
var h=c.offsetHeight;
if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
clearInterval(c.t); return
}
var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
c.style.height=h+(d*f)+'px'
}
return{dd:dd}
}();
I didn't really think it would cause an issue as the css is working fine and I don't see any errors, here is how I include that html page.
<script>
$(function(){
$("#menud").load("menu.html");
});
</script>
<script type="text/javascript" src="script.js"></script>
however the dropdowns are not displaying on hover, I looked at the page in the inspector and see a lot of properties on the ul on the original page, but when inspecting the ul on the new page, it has no properties, and nothing happens when I hover over a link.
here is the link to the test page: http://pezzelectric.com/about-mobile.html
Instead of me posting 2 links, you can just remove the "/about-mobile.html" and go to the home page or any other page to see how the menu is supposed to be.
If I've understood correctly, I think you may be missing an initialisation script in your new page (/about-mobile.html).
The home page has the following near the bottom of the page:
<script type=text/javascript>
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>
and your new page doesn't. I tested it in my console on /about-mobile.html and it seemed to work, but I'm unsure if you couldn't use that for some reason.
I am working on an HTML web part. I wanted to make other web parts on the page to be collapsable and expandable. I found this script to place in an HTML form web part. It does exactly what I want. The only thing is all the other parts automatically are expanded when the page is loaded. I read through the script but, I am not familiar with jQuery syntax. The line in the code that I believe I need to change to make the sections automatically collapsed is:
$(this).closest('.s4-wpTopTable').find('tr:first').next().toggle().is(":visible") ? img.attr('src',Collapse) : img.attr('src',Expand );
I believe I just need to change where it has toggle as visible to is not visible. I am not sure how to write that.
Here's the whole script:
<script type="text/javascript" src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
$('.s4-wpTopTable').find('tr:first h3').append('<a class=\'min\'
style=\'float:right\'><img src=\'/_layouts/images/collapse.gif\'/></a>');
var Collapse = "/_layouts/images/collapse.gif";
var Expand = "/_layouts/images/expand.gif";
$('.min').click(function(){
var img = $(this).children();
$(this).closest('.s4-wpTopTable').find('tr:first').next().toggle().is(":visible") ? img.attr('src',Collapse) : img.attr('src',Expand ); }); }); </script>
Here is trick may be it will work for you.Click on Edit Web part,Under Appearance find the chrome state, you need to set Chrome state to 'minimized',By default Chrome state will be 'Normal.
Then place your code either in CEWP or in your .aspx page using Sharepoint Designer.
I'm quite new at using jquery but learning a bit everyday. I have solved many problems searching this web but I can't seem to find any solution for this one:
The web I'm workign at the moment use quite a lot of page anchors.
I have localscroll and scrollto as jquery libraries.
I animated the transition with this little script:
<script type="text/javascript">
$(document).ready(function () {
$('.scrolllento').localScroll({ duration: 1000 });
});
</script>
and it works fine whatever I add the class "scrolllento" to the cointainer of my links.
Now the problem I have is when a link jumps to an anchor of inside different page. my client has asked me if it's possible to load the page first then move to the anchor with same web transition.
I have been working on it with my little knowdlege and this is what I have atm:
<script type="text/javascript">
$(document).ready(function () {
var nosalto = $(location).attr('href');
if (nosalto.indexOf("HistoriaBMG") > 0) {
$.fn.gotoAnchor = function (anchor) {
location.href = this.selector;
}
$('#historia').gotoAnchor();
}
});
</script>
"HistoriaBMG" is the new page and "#historia" is the anchor I want to go inside that page.
and it seems again that it works...
the problem is I have no idea how to implement now the transition as the class "scrolllento" in the container of the link going to ../HistoriaBMG is ignored.
could anyone help me? thanks so much in advance and excuse my english, hope this question is clear enough.
According to the localScroll docs:
The plugin also adds a function, $.localScroll.hash() , that checks the URL in the address bar, and if there's a hash(#an_id), it will scroll to the element. It accepts a hash of settings, just like $.localScroll. You will likely call it on document ready. Check the regular example to see it in action.
So you simply need to call $.localScroll.hash()on $(document).ready()