I want to get text of an email behind canvas, but not finding a way to do it.
I am trying the following code
from selenium import webdriver
driver=webdriver.Chrome()
driver.get('https://thatsthem.com/phone/806-241-6888')
table=driver.find_element_by_css_selector('.row.clearfix.mt15').get_attribute('innerHTML')
When I print table I don't see variable behind canvas (like var p1 = "makaya0";). They can be seen in source code when I open "View Page source" on browser. How we can access that variables and get text from them?
Below is page Source
<ul class="list-unstyled list-inline record-list">
<li>
<span class="label label-info"> <i class="fa fa-check"></i> Mobile</span>
</li>
<li>
<i class="fa fa-phone" data-toggle="tooltip" title="Phone Number"></i>
<h3>
<span itemprop="telephone">806-241-6889</span>
</h3>
</li>
<li>
<span class="label label-success"><i class="fa fa-check"></i> Valid Email Address</span>
</li>
<li>
<i class="fa fa-envelope" data-toggle="tooltip" title="Email Address"></i>
<canvas id="c59baf787024e2" width="160" height="20" class="email"></canvas>
<script id="t2i">
var p1 = "makaya0";
var p2 = "923#yah";
var p3 = "oo.com";
var c59baf787024e2 = document.getElementById("c59baf787024e2");
var c59baf787024e2_context = c59baf787024e2.getContext("2d");
c59baf787024e2_context.fillStyle = "#353535";
c59baf787024e2_context.font = "98% sans-serif";
c59baf787024e2_context.textBaseline = "bottom";
c59baf787024e2_context.fillText(p1 + p2 + p3, 0, 20);
document.getElementById("t2i").parentElement.removeChild(document.getElementById("t2i"));
</script>
</li>
<li itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<i class="fa fa-home" data-toggle="tooltip" title="Address"></i>
<a class="no-linky" href="https://thatsthem.com/address/8114-Sherman-Ave-Lubbock-TX-79423">
<span itemprop="streetAddress">8114 Sherman Ave</span>
<br/> <i class="fa-placeholder"></i>
<span itemprop="addressLocality">Lubbock</span>
<span itemprop="addressRegion">TX</span>
<span itemprop="postalCode">79423</span>
</a>
</li>
</ul>
the values you are talking about are javascript variables.
they're not 'text' per say.
to run a script in javascript through selenium, you can do:
output = self.driver.execute_script("return p1;")
and it will put the value of variable p1 in javascript into the output variable in python.
This assumes the variable p1 is in the global context, which it seems to be in your case.
Related
HTML :
<div class="free-videos-content">
<div>
<div>Free Videos <span class="tri-down">▼</span></div>
<div class="span-childs">
<span><i class="fa fa-book"></i> Checkout our Free Videos</span>
<span> <i class="fa-solid fa-paperclip"></i> Assignments:1</span>
</div>
</div>
<div class="free-videos-expand">
<hr>
<div><i class="fa-solid fa-square"></i> How to utilise Appliedaicourse</div>
<hr>
<div><i class="fa-solid fa-square"></i> Python for Data Science Introduction</div>
<hr>
<div><i class="fa-solid fa-square"></i> Python for Data Science: Data Structures</div>
<hr>
<div><i class="fa-solid fa-square"></i> Plotting for exploratory data analysis (EDA)</div>
<hr>
<div><i class="fa-solid fa-square"></i> Linear Algebra</div>
<hr>
<div><i class="fa-solid fa-square"></i> Probability and Statistics</div>
</div>
</div>
JS:
clickToExpandFreeVideos = document.querySelector('.free-videos-content div:first-child')
expandedFreeVideos = document.querySelector('.free-videos-content .free-videos-expand')
console.log(expandedFreeVideos.clientHeight);
console.log(clickToExpandFreeVideos.clientHeight);
clickToExpandFreeVideos.addEventListener("click", () => {
console.log(expandedFreeVideos.clientHeight);
console.log(clickToExpandFreeVideos.clientHeight);
})
OUTPUT IN BROWSER CONSOLE:
0
0
403
77
as in code , 3rd and 4th output will be displayed only after clicking on clickToExpandFreeVideos
Pls explain why is this happening !
Most likely, the outer log statements are executed before the document is fully loaded. Try
const clickToExpandFreeVideos = document.querySelector('.free-videos-content div:first-child')
const expandedFreeVideos = document.querySelector('.free-videos-content .free-videos-expand')
window.addEventListener("load", (event) => {
console.log(expandedFreeVideos.clientHeight);
console.log(clickToExpandFreeVideos.clientHeight);
});
This will log the values immediately after the document has fully loaded, when your divs are fully set up. Keep in mind (from MDN):
The Element.clientHeight read-only property is zero for elements with no CSS or inline layout boxes;
So you will not get a value (other than zero) before CSS is applied.
I have a html page, where I have two div classes :
<i class="fas fa-info-circle float-left resultsInfo" style="color: red; padding-top: 4px;" ></i>
<i class="fas fa-info-circle float-left resultsInfo" ></i>
On Page load, I need to get the count of how many times these each Div has been repeated. The only differentiating factor between these two div is the style. So I wanted to know how many times the first div oocured and how many times the second one. Please help me to find this out. I am new to HTML and js
I think the easiest way is this:
<html>
<body>
<p id="demo"></p>
<ul>
<i class="count fas fa-info-circle float-left resultsInfo" style="color: red; padding-top: 4px;" ></i>
<i class="count fas fa-info-circle float-left resultsInfo" ></i>
</ul>
</body>
</html>
and js is lookin like
document.getElementById("demo").innerHTML = "count: " + document.querySelectorAll('.count').length;
here is the example: https://jsfiddle.net/f7tsLcrd/
This snippet returns the number of elements that have a "count" class and red color
$(".count").filter(function() {
return ($(this).prop('style').color == 'red');
}).length
On my site I have a menu to the right of the navigation bar. It displays the search when it is available on the current page.
I want to display an icon when the search is available.
All search blocks have the class .views-exposed-form and appear in #navbar-collapse-second
I added to my icon, the class .icon-navbar-alert-disable which is used to hide the icon.
How to remove the .icon-navbar-alert-disable class when the .views-exposed-form class is present in #navbar-collapse-second ?
Here is the css code to hide the icon :
.region-navigation-menu-second .navbar-toggle-second .icon-navbar-alert-disable {
display: none;
}
Here is the code of the button of my manu with the icon :
<div{{ attributes }}>
<a class="navbar-toggle-second collapsed" data-toggle="collapse" data-target="#navbar-collapse-second" aria-expanded="false">
<div class="icon-navbar">
<span class="fa-layers fa-3x">
<i class="far fa-circle"></i>
<span class="navbar-icon-open">
<i class="fas fa-filter" data-fa-transform="shrink-9"></i>
</span>
<span class="navbar-icon-close">
<i class="fas fa-times" data-fa-transform="shrink-8"></i>
</span>
</span>
</div>
<div class="icon-navbar-alert icon-navbar-alert-disable">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-filter fa-stack-1x fa-inverse"></i>
</span>
</div>
</a>
</div>
Here is the page concerned, this is the menu on the right :
https://www.s1biose.com/boutique/ma-boutique-pro
I started a JS code but it is not complete :
$('#navbar-collapse-second') ???.views-exposed-form??? {
$('#block-togglenavigationsecond').removeClass('icon-navbar-alert-disable');
});
UPDATE
(function ($) {
if ($('#navbar-collapse-second').hasClass('views-exposed-form')) {
$('#block-togglenavigationsecond').removeClass('icon-navbar-alert-disable');
} else {
$('#block-togglenavigationsecond').addClass('icon-navbar-alert-disable');
};
})(window.jQuery);
enter image description here
Are you looking for the hasClass selector in jQuery?
If so wrap it in a if statement and inside you can show the result you'd like from it;
if ($('#navbar-collapse-second').hasClass('views-exposed-form') === false) {
$('#block-togglenavigationsecond').removeClass('icon-navbar-alert-disable');
} else {
$('#block-togglenavigationsecond').addClass('icon-navbar-alert-disable');
};
I am calling showedit function with argument. But when i alert it in the function it is showing partial value.
Here is the HTML code:
<a href="javascript:void(0)" onclick="showedit(856478546521458789);">
<i class="fa fa-pencil-square-o" aria-hidden="true" style="font-size: 20px;float: right;"></i>
</a>
Here is the Javascript code:
function showedit(id) {
alert(id);
document.getElementById("update_status_" + id).style.display = "block";
document.getElementById("status_" + id).style.display = "none";
}
Can you tell me what is the problem?
Send the argument as a string. See the code snippet below:
<a href="javascript:void(0)" onclick="showedit('856478546521458789');">
<i class="fa fa-pencil-square-o" aria-hidden="true" style="font-size: 20px;float: right;"></i>
</a>
It is happening because it is exceeding JavaScript's MAX_INT value.
My website has a sidebar that is the same on all pages. In order to avoid copying and pasting the html for the sidebar for every page I wrote some javascript as this answer suggested: How can I make my navi-bar the same across my html?
I am happy with these results except for one thing, my sidebar displays things like the users name, which I access with {{ request.user.get_full_name }}, but this does not work when I put that in my sidebar.js. So I thought a good work around would be to set a var user={{request.user.get_full_name}} in the <script> tags in my html file and then use <h3>user</h3> in my js, but I am not sure how to do that.
This is my sidebar.js
document.getElementById("navMenu").innerHTML =
'<div id="circle"><span class="glyphicon glyphicon-user"></span></div><h3>Your Name</h3>'+
'<ul class="nav nav-pills nav-stacked" style="text-align: left;">'+
'<li><i class="fa fa-home fa-fw" aria-hidden="true"></i> Home</li>'+
'<li><i class="fa fa-user fa-fw" aria-hidden="true"></i> Profile</li>'+
'<li><i class="fa fa-envelope fa-fw" aria-hidden="true"></i> Messages</li>'+
'<li><i class="fa fa-users fa-fw" aria-hidden="true"></i> Boards</li>'+
'<li><i class="fa fa-newspaper-o fa-fw" aria-hidden="true"></i> Feed</li>'+
'<li><i class="fa fa-globe fa-fw" aria-hidden="true"></i> Notifications</li>'+
'<li><label for="logout" style="font-size: 15px; font-weight: inherit;"><i class="fa fa-lock fa-fw" aria-hidden="true"></i> Logout</label></li>'+
'</ul>';
So in the second line where it has <h3>Your Name</h3> I want that to be the user variable. And this is how I am trying to pass the variable in my HTML page:
<div id="sidebar">
<nav id="navMenu"></nav>
<script src="{% static 'app/js/sidebar.js' %}">var user={{request.user.get_full_name}}</script>
<!-- logout button/form -->
<form action="/" method="post">
{% csrf_token %}
<input class="hidden" id="logout" type="submit" value="Logout"/>
</form>
</div>
I would like to avoid using PHP. The bottom line is can I use django like that inside the <script> tags and if so, how do I then use that variable in my javascript?
I can't find the reference, but I'm skeptical <script src="something.js"> can also have source within it. I've not seen it done that I can recall.
This should work, which is similar to what you are doing:
<script>
var user = '{{request.user.get_full_name}}'; // created by your django html
</script>
<script src="{% static 'app/js/sidebar.js' %}"></script>
And then in your sidebar.js you just need to do:
"....<h3>" + user + "<h3>..."
However, a cleaner way to do this would be to encapsulate your js into a function that takes the username as a parameter:
<script src="{% static 'app/js/sidebar.js' %}"></script>
Where your js is something like,
function sidebar(user) {
document.getElementById("navMenu").innerHTML = "....<h3>" + user + ";<h3>..."
}
Followed by:
<script>
sidebar('{{request.user.get_full_name}}'); // where this is created via your template.
</script>