Toggling for Live Webpages - javascript

I am currently working on a project at my internship where we are trying to create some kind of display that shows live status updates of our servers. I have the webpages I need to use on file; however, I am very confused on how to code the display. We are planning to use HTML and JavaScript, so I have been able to find these links. Are they leading me down the right path?
Javascript to rotate between pages within ONE HTML page
https://www.wikihow.com/Toggle-HTML-Display-With-JavaScript
Still, I am not sure how to add the links in there as well as if/how to write the CSS.
Any help would be appreciated!

Related

I want edit every single page in wordpress. Is possible?

Sorry if this question sounds stupid but im a noob with wordpress.
I am a javascript developer, and I want make a little game (or games) with wordpress. Opening main page there is a sliding puzzle. After complete, a button appears and clicking there you pass to another page. This is basically the same to all pages.
But I can't find were i put my javascript or HTML code. I create the pages but I can't edit them the way I want, everytime i try to do it i only can edit like word. I cant create, change or edit divs attibutes or tags. To be honest the only thing i can edit is CSS in stylesheet, but is too limited.
I have done the search, try found a solutions or ways to done it but when i look to tutorials is all diferent from what i see.
to give you an ideia I want to do a mix of this:
-> http://www.rustylake.com/room-escape-games/cube-escape-case-23.html
and this
-> https://ebonyriddle.com/
but i don't know how to edit page to page.
can you help me?
Thanks for everything
PS: I know I can do it without Wordpress, but I want use it anyway to learn more about the CMS (because of work) maintain website structure and later learn how to do my own templates or plugins.
To answer your question directly, yes it is possible (and easy, relatively speaking) to add custom code to every page / post of a Wordpress site.
More generally, you’re talking about creating a custom Wordpress theme, which you can find out more about here:
https://codex.wordpress.org/Theme_Development
and here:
https://developer.wordpress.org/themes/getting-started/ (Good suggestion from #ItsGeorge)
Regarding adding custom JavaScript to a theme, your files will need to be enqueued as per these instructions.
Outlining the steps involved in Wordpress theme development would go beyond the scope of your question, but there are plenty of resources online and answers to Wordpress specific questions on wordpress.stackexchange.com. You will need to familiarise yourself with php as well as JavaScript, to take full control of Wordpress.
I would say that developing a game feels like an odd fit... If learning Wordpress is your objective, a blog or personal website might be a better place to start, then you could move onto a game once you are familiar with the concepts involved, e.g. the loop, which plays a huge part in how Wordpress works
Good luck!
The primary focus of WordPress is to put HTML code and JS out of the user. You might manage your extra JavaScript files with your theme customization. If you want to get more control about how your pages are rendering, you should use action hooks and filters. The simplest way for you is to override each page template like this
https://developer.wordpress.org/themes/basics/template-hierarchy/#single-page
The preferable resource to ask Wordpress related questions is https://wordpress.stackexchange.com/

How can I override the appearance of embedded Javascript?

I'm redesigning a Squarespace site for a client who owns a cooking school. She uses an external booking site (Fareharbor) to manage her classes which are then embedded into the site using JavaScript widget. The embedded listings don't match the style of the rest of the site, which looks really unprofessional, so I want to update the styles to make them look better. I tried modifying it in the CSS stylesheet (both in page and for the whole site) and it did nothing (clearly the script takes priority). I've looked around and people have said there's a way to do it using JQuery or straight JavaScript, but while I'm pretty adept at following code instructions and have a little JS experience, I'm pretty new to this so I don't actually know where I would put whatever code I use to change it.
So my question is:
1) What is the best way to override the default appearance of the embedded script?
2) If the answer involves using JavaScript/JQuery to modify the appearance of the original script, how do I do that? (What is the code, and where do I put it).
The page I'm trying to modify is figcookingschool.com/classes (currently working on the first embed, with the pictures – assuming the answer to this will help me with the second!) and the code I was given to embed the JavaScript is:
<script src="https://fareharbor.com/embeds/script/items/figcookingschool/?full-items=yes&fallback=simple"></script>
One of the many things I want to do is change the border-radius to 0 on each box so if you want something to use as an example, that's a good one ;) Thanks in advance!!

Javascript for checking 404/500 pages/all links are clickable through

I've started using new tool,GI, for automated testing, and ill need to make javascript for testing the website's links, if they are clickable through, and there are no 404/500 pages on website. Ideally script should just include javascript code and be as simple as possible. Thank you in advance for help!

print web page which contain code listing (with horizontal scrolling)

In those months, I'm always reading at code listings on web page (manly brief and coincise tutorials) and these listings have scrollbar to allow horizontal navigation.
I would like to print to PDF those web pages but I would gain a cutted code.
I searched for a solution looking at html source code in search of quick configuration to modify, css solutions (overflow-x/y) and javascript scripts (jPrintArea and many homemade) but they are (as far as I have understood) all solution to be implemented by the Owner side and not the User side.
I wanted to know if someone know a script or a method to do that (or at least to print only the code listing block with its original formatting). I suppose it is a problem that the whole community met while learning how to develop with online tutorials.
I can't post images so here two examples:
http://codeincomplete.com/posts/2012/6/23/javascript_racer_v1_straight/
https://pgetov.wordpress.com/2013/05/25/first-person-shooter-scene-setup/
You could try to disable javascript temporary. I don't know if this works for you but it could be worth a try.
Source: Mozillazine: Printing a scrollable frame
You can always just copy paste the code to print it and reassamble the page manually.

how to find and mark all links in the web page?

I'm making an application which finds all links and buttons on the web page and
shows marks over the links and buttons (with any browser or custom application window).
Now, I'm trying to implement it with browser helper object(BHO)
and javascript. The BHO injects javascript code in the existing web site and the injected javascript finds the location of links and buttons and marks the links in the web page by analyzing DOM of the page.
However, it has many problems because there are lots of links that are coded by DHTML, javascript, flash and the like. What makes me difficult is that it is not easy to mark these links because it often moves and disappear after the page is completely loaded.
In particular, flash buttons cannot be accessed by HTML DOM, so I'm in trouble with finding such flash buttons with the above method. Therefore, it may be necessary for me to implement this application with different method or framework, but I can't find any other way to do. I think any method to find click-able object on the webpage of screen would be helpful to me. I hope you have some suggestions for me?
To highlight all normal links on a site you can use this jQuery snippet:
$('a').css('color', '#F00');
There is no easy way to highlight flash links or links by window.location in JavaScript.

Categories