How to click a "DIV" element on a site, using JavaScript - javascript

I want to click the "continue" which is given on the end of this page, note that the site is not mine, its someone else's. The element is located after the pagination,
I tried to click it this way :
//Method 1
document.querySelector(".se-pagination-button.se-pagination-button--next").click();
//Method 2
document.querySelector(".se-pagination-layout").lastElementChild.click();
But unfortunately it did not work for me. Is there anyway I can click it ? Because when you click it through the mouse or pad, it triggers a function. But not when I want to click it through the JavaScript.

That website is a hot mess of different systems, but they use Vue.
So what you are looking for is:
document.querySelector(".se-pagination-button.se-pagination-button--next").__vue__._events.tap[0]()

Related

How to track when a Radio button is clicked in Google Tag Manager without clicking the submit button/moving on from the page?

I've a pretty simple question but its been bothering me for a few days now. I want to track when someone clicks a radio button as a trigger or click, essentially to track the click and pull the data I need even if they haven't clicked submit or moved off the page. I just want to be able to do it when its clicked on the page but I can't seem to get my head around it in Google Tag Manager.
I ended up coming up with this so far but its pulling all clicks.
My solution was to create a custom variable that isolates the radio button by its class using Query Selector, then create a tag that fires on all clicks. The issue is that this is bringing back way more data than I need. It is bringing back random clicks on the page.
I tried to set it up in google tag manager as Some clicks, then set it to My Radio Variable - Equals - True but this didn't bring back anything at all.
My Radio Variable:
function () {
return document.querySelector('[class="radios__input"]:checked').id
}
I'm still new to this so any help would be greatly appreciated, thanks in advance.
This might require not only the variable.
Now you can get the id from the radio element which is great.
But you said it is returning a lot of other element you don't need so looks like it is lack of the trigger setting.
Trigger should be the important one in this scenario.
You can narrow down the range to only the radio element you want to track.
Like configure the trigger to
Click Element , match css selector , {Your special css selector to the radio button}
If you are not familiar about the above I mentioned. You can attach some screenshots about what is your trigger and variable and how you use it in your GTM.

JavaScript / jQuery - How to stop slideDown from scrolling page

I just recently started using WP with the Divi theme. However, I quickly ran into the first limitations of the theme and now am trying to sort this out manually.
I tried finding a solution to this problem before (extensively if I may say), but I just can't wrap my head around why my problem persists - mostly as I have absolutely no prior experience with Javascrip/jQuery.
What I am trying to do:
Have multiple buttons and on click show different divs. Once a different one is selected by the user, the previous one should be hidden - Currently I only use two buttons for testing.
What is working:
Both hiding and showing is working and there is no problem if the buttons are used in the sequence: Click 1. button to show -> click 1. button to hide -> then click 2. button to show etc.
My problem:
However, if the first button's div is visible and the second button is clicked, does what it's supposed to do but scrolls to the very end of the page. This is the behavior I am trying to stop.
I haven't understood yet, how I can get the neccessary HTML to make a working JSFiddle, but below is the code, which is implemented by the theme into the body of the page. It is mostly based on some code I found on this site, but I can't seem to find the original post.
I ve tried using scrollTop as well as the current tempScroll, which I saw in yet another post as a method to save the scrolling position and recalling it. However, no matter what I put in, it doesnt seem to change the behavior.
I'd appreciate any pointers in the right direction or other help and hope that I posted this correctly.
Cheers
<script type="text/javascript">
jQuery(document).ready(function( $ ) {
$('.button_verstecken_click').on('click', function(e){
e.preventDefault();
var targetDiv = $($(this).attr('href'));
if(!targetDiv.is(':visible')){
$('.button_verstecken').slideUp();
targetDiv.slideDown('slow',function(){);
e.preventDefault();
}else{
$('.button_verstecken').slideUp();
}
});
});
</script>

Can't edit HTML in Chrome dev tools Sources tab

I have a noob question about the Sources panel in dev tools: when in the Elements tab I see my CSS to the right. I click on a CSS file and am brought to the Sources tab where I can make live edits.
I can bring up the JS and do the same, but...
If I bring up the HTML file, I am unable to make any edits to the HTML. Why is this? Is this by design? What am I missing?
Once the DOM is loaded, the browser doesn't use the original source, since the DOM can be modified on the fly by Javascript. If you want to make live edits to the DOM, you can do it in the Elements tab. Right click on an element or attribute, and there are options to edit it.
If I understood you correctly, you are trying to edit the left side of source. Try to double click on position when you want to edit code or get right click mouse and click on "Edit as HTML".
In this case, you can click on three horizontal dots which will appear on the left side of the same line where you will click once( just single click and enjoy ). A single click on the line to edit and then single click on three dots which will appe
I had the same issue and a search got me to here.
For me what fixed it was to open the navagator bar, then click "filesystem", then click "add folder to workspace" , then click the folder location of whatever file you are wanting to edit. Once done, I was able to edit the html freely.

history.js first step can't remind

I'm using history.js (https://github.com/browserstate/history.js - with the jQuery port) and I cant handle the "first step" (the origin one).
I.E. I'm from "/myPage", then I go to "/myPage/myContent2" and to "/myPage/myContent3" : it change, using AJAX, a part of the page. When I press the "previous" button, I come back to "/myPage/myContent2" and all is OK, but if I press it again, I'm back to "/myPage" (in adress bar) but my original content doesn't display :/. I've got an empty space in place of my content.
You could see live exemple here (it's not an Ad! But my online website - in french) : http://www.variance-auto.com/kits-film-teintes/vitre-teintee-Audi?choix_film=1 (that is equal to "/myPage")
Click one or more "modele" in the list on the left of the page.
In this live example I made a "hack" to avoid part of this problem : I double the first step using a "History.pushState" on the page load, that "save" the data of the first step. But you could see that you need two hit on the "previous" button to get back to the real previous page.
Thanks for your help.
I did an article on this a couple of days a go.
Have a look at it and if you need any further assistance let me know, I'll do by best to help.
The URL is:
http://www.codeproject.com/Tips/758486/Make-an-MVC-Application-into-a-SPA-with-AJAX-and-H

Display link on mouseover

I've got certain regions of the page that, when clicked, will redirect the user to certain addresses. My problem is that when the user 'mouses over' these regions, they see a pointer, but have no idea where it links to. For my purposes it is important that the user knows where they are being linked to. I believe Google displays 'fake' links when you mouseover links.
How can I achieve this? Is it impossible without having actual <a> tags?
I'm currently using location.href="http://www.site.com" to redirect the user where "site" is stored in a javascript array and changes depending on the mouse position.
EDIT: The link should be displayed in the normal mouseover link area - in chrome this is the bottom left corner - just like when you mouseover an ordinary link and you see where the link leads to.
I don't believe this is possible without using <a> tags, the best you could hope for is to use the title attribute to show a tooltip.
e.g.
<div title='www.google.co.uk' style='cursor:pointer'>
This is my div!
</div>
Using anchor links (as Google does), you can do something like:
<a href="http://www.mwhahaha.com"
onmouseover="this.href='http://www.test.com';"
onmouseout="this.href='http://www.mwhahaha.com';"
onclick="this.href='http://www.mwhahaha.com';">Link</a>​​​​​​​
This will show a link that looks like it's going to www.test.com, but clicking it actually goes to www.mwhahaha.com, although I'm not sure how legal/good practice this is (only tested this in Chrome)...
If I remember correctly, Google changes the href of the link to the real url during the mousedown event. Try pressing the mouse button while hovering over a link, but moving your mouse cursor off the link before releasing the button. When you hover over the link again, you should see a new URL.
I'm answering from my phone or else I'd check it myself. They may be doing it differently now.

Categories

Resources