When I run this on my computer, the numbers disappear and reappear when I check the boxes, as desired. I think there was a problem with attaching the external resource script. Where do I put the link to the library?
I'm having a problem formatting the code to required embed the fiddle, but go to j-s-f-iddle and add /codergirl789/k37jqj2c/2/
There was a double quote in your url for your external script.
Like this:
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
I've updated a fiddle with the current url:
http://jsfiddle.net/gregborbonus/k37jqj2c/4/
Also, if you need to load jQuery, just click the Javascript button (top right of the javascript console with the gear next to it) and under "Frameworks and Extensions" drop down to the jQuery version you want.
Related
I tried including the 'tab.html' and ‘content.html’ into my 'index.html' (using w3school code: how to include HTML, found at: https://www.w3schools.com/howto/howto_html_include.asp), but the javascript and css elements do not work. The buttons don't work as intended. Look at:
https://rads-198409.appspot.com
If you resize (to a smaller size) the browser window, the tab is supposed to change to a drop-down menu, but the button does not work at all. I have checked the individual pages and they seem to work just fine, just not when they are combined.
Am I doing something wrong? Could someone help? All the code I used is from w3school and I have only modified the file names (tab.html and content.html to point to the right files). Below are links to the code:
Code for ‘tab.html’ - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav
Code for ‘content.html’ - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_symbol
Code for ‘index.html’ - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_html_include_2
This is why:
The links take you nowhere. #home (or # then whatever) is referring to an element in the page. This means that the link doesn't actually take you anywhere, unless you actually change the link to something else.
You're using a w3schools template. Come on, man!
Explanation on #1:
Say there was a footer at the bottom of a page, named "footer". To jump to that element, all you have to do is put #footer at the end of the url, and your browser will jump your screen to the bottom. Similarly, the #home hash means that it goes to a place where an element called home is. In this case, that's the top. The other buttons though, refer to different elements. The problem is that these elements don't exist in the template. To make them work, you must change the url to a real working url, or create elements with ids such as "news", "contacts", and such.
I am trying to automatically download a plugin on my wordpress site by implementing phantomJs. For some reason, I cannot seem access the download button (shown below)
This is the HTML code to the image (with domain sensitive information blurred out for security purposes)
So far, I have tried accessing this element by using the following code:
function() {
page.evaluate(function() {
let mainLink = document.querySelector('a[data-slug="better-wp-security"]')
mainLink.click()
})
}
Some things to mention:
This function, as it is part of a larger file, will NOT execute until the page has finished loading.
PhantomJS is executing correctly, there are no problems with permissions
The script before-hand is properly accessing the install plugins page, which I verified by capturing screenshots before trying to click.
I have defined click earlier int he file, it works perfectly.
Any ideas how I can accomplish this? Thanks all!
ADDED INFORMATION:
It seems as if the path from the main div element is as follows:
#the-list .plugin-card plugin-card-better-wp-security .plugin-card-top .action-links .plugin-action-buttons .install-now button
I imagine the solution to this question has something to do with this sequence.
I was able to accomplish this by now going after the data-slug attribute, but rather going after the href element itself. Although I can't generate my own wponce value without the use of the Rest API, I was able to search the document to find an href that contained certain parts of the url. This is the final code below:
document.querySelector('a[href*="action=install-plugin&plugin=better-wp-security"]').click()
That's it! Simple and easy!
I am working on a project on my website Click here to go to project site,
but after inputting all the needed information, the download element does not work. Here is the code for the download link: The download may work on this website, but it doesn't work on my website, which is strange.
<a id="down" href="blob:http://veryblankwhitepaper.weebly.com/8d869eaa-5bce-4326-9dff-dd0b50286a84" download="filename.txt">DOWNLOAD</a>
For some reason, when I click this, nothing happens.
If you want, you can see the javascript here.
Scroll down to the scripts within the "/text-file-generator.html"
(I put all the scripts for my pages in one file)
Edit1: If I take the element out of the div that it is in, it seems to work, but I want it to still be in the div.
Your scripts change the link too quickly. Try adding a setTimeout function for half a second when you click the link. This should allow it to download.
I've got an interesting question. I'm running Squarespace # buscadprimero.caminoglobal.org
and need to target the top-right button on the navigation (Ingresar, which means login) to bring up a Javascript form provided to me via embed code. The code itself works fine when included as a code block in the body of a page, but Squarespace only allows navigation buttons at the top to be hyperlinks. There's nowhere for me to add code to the button itself, being that it is a largely consumer platform and works great for straightforward application until you try to change the way it works.
They make an allowance for custom code via a "code injection" menu that adds whatever code you want to the HTML header of the page, so I've been trying to target this div, which does not have an id but who's class is external, with Javascript to replace its contents with an onclick listener to bring up this form. Tracking?
Here's my embed code, which like I said is fine:
<script>// <![CDATA[
!function(e,t){e._cc={}, e._cc.host="https://www.coachingcloud.com/";var n=function(){var n=t.createElement("script"),c=t.getElementsByTagName("script")[0];n.src=e._cc.host+"login.min.js",c.parentNode.insertBefore(n,c)};e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);
// ]]></script>
I've been trying document.getElementsByClassName("external").innerHTML; but when set to a var that returns undefined. New to Javascript but not afraid to learn. I'd like to figure out how to properly target the div, first of all, and then replace its contents (which currently is a link to my 404 page) with a Javascript function that activates on click. Thanks for the guidance!
I've tested the following on your site in Chrome, and have successfully changed the content. The page contained multiple ".collection" elements, so i select only the last one:
JavaScript / jQuery
$("#mainNavigation .collection").last().html("<a href='/newlink'>Test</a>");
Thanks to the great help of #Arg0n, I've now got a working login form that appears in the top-right-most button of my site. Using:
$(function() { $("#mainNavigation .collection").last().html("<span id='cc-login'>Ingresar</span>"); });
as the function to replace the contents of the div in question, I inserted <span id='cc-login'>Ingresar</span> as the call to the provided embed code:
<![CDATA[ !function(e,t){e._cc={}, e._cc.host="https://www.coachingcloud.com/";var n=function(){var n=t.createElement("script"),c=t.getElementsByTagName("script")[0];n.src=e._cc.host+"login.min.js",c.parentNode.insertBefore(n,c)};e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document); // ]]>
Turns out that a little jQuery was helpful in accessing the desired div, and setting its html contents was a bit beyond my area of expertise.
Many thanks to the StackOverflow community for helping me learn about targeting page elements with Javascript to procedurally manipulate its contents.
Are you able to see the coding of a Javascript function on a webpage your viewing? Is there a way using Google Chrome DevTools for example?
Specifically, I want to figure out how to code something like this
!Example 1
from this page
http://www.indeed.com/cmp/Bruce-Productions/jobs/Graphic-Designer-0a8d9cff06bf2790
Thanks in advance for any help!
Yes there is a way to look at all of a webpages html, Javascript files, and CSS using Chrome.
Open up the page in chrome, right click on the page and select inspect element (or press ctrl+shift+I).
From there you can navigate the different elements on the the page and the structure of the HTML file.
To get at the Javascript and CSS files switch over to the sources tab and look through the folders on the left to find the file you are looking for.
A word of warning, depending on the site the code that they are using may be minified (most all of the white space removed, and lots of variable names and other things shortened) or otherwise very difficult to read. If you are looking to do something more specific then I would recommend searching for that, or posting a question regarding that problem.
If you want to view the Javascript code, you can right-click the page, then select Inspect, then navigate to the javascript line by highlighting or selecting that line with .js extension and then position your pointer in the .js file, right-click & select Reveal in Sources panel.
In the browser you do right click to open a menu and select "View Source Code". Then you can read or save that page to analyze the content for any image or script.
But your question is so generic maybe you should try something basic and try to builds thing from there. Otherwise make a more specific question of what you want to do.
You can check it by opening the inspector in your browser and selecting the "coverage" menu. Then click on the "type" column until you find the .js files.
It is pretty much it, but you can read more details here: https://developer.chrome.com/docs/devtools/coverage/