I know that there are already a few answers regarding this subject, but I wanted to ask again, so that you can suggest the best option.
I have created a book that teaches (4 languages so far) at the same time. I will be selling various versions of this books travelling in Mexico. But it is also available online, free of charge. You can go directly to the version in question by visiting
http://jersllvs.majormigraine.com
I have created this book using the spreadsheet program in the OpenOffice suite (same as excel). Right now there are 4 columns for the 4 languages and as I am starting to work on language #5, I am realizing that I can save myself a lot of work, if I can hide/show the columns on the page. What I want to do is use the spreadsheet program to create the index.html for this book with all languages, and then add the needed code to the html file so that the user can check/uncheck the languages. There will be a list of languages at the top of the screen (English, Spanish, etc.) and each language will consist of 3 columns which will extend the entire length of the page.
I only have a limited knowledge of basic HTML, but have a long history working with computers, and can learn whatever is needed. However, as this entire project is to remain completely free (and I still have to get out and sell books to make a living), I want to find the easiest and fastest way to achieve this.
Thank You very much for your answer,
Jerry
I personally would use Jquery. However this could be pretty complicated if you arent too familiary with it. If you click the link I have provided below there is a short demonstration of what I think you are looking for. However because your webpage is so big, I think it could be very complicated for you as there is a lot of styling involved as well.
Take a look at the link I have made, and see if thats what you want. If yes, then you can slowly start to work out how to implement that into your site. To make Jquery work on your webpage you need to add the following code into the <head> tag of your HTML page.
<script type="text/JavaScript" src="http://code.jquery.com/jquery-latest.js"></script>
and then the Jquery code that you may use from my link will need to be within the <script> tags which will look like
<script type="text/javascript">YOUR CODE HERE</script>
I hope this is what your looking for. Here is the link to the page I have made for you: http://jsfiddle.net/3xR2p/1/
Related
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/
This is my first question here, I'm very new to coding so please forgive me any mistakes.
So i started learning html/css/some basic javascript recently and I'm trying to build a website just for practice. So one page on it looks like this:
https://imgur.com/ZHyeprC
And right now i have different html files for each article (linked under the site navigation: Shauna, The First One etc.), so each name of the article takes you to a different page.
What i want to do is to have multiple articles in just one html file, and make them show up/disappear when the name of the article is clicked.
I tried to figure it out somehow in jquery, but i only managed to wrap the article in a div and make it appear when the invisible div is clicked... which isn't much useful.
So is it posibble to do with simple javascript/jquery? If so, the how do i do this?
Thank you all in advance, Michal.
The most easy and practical way is to have one HTML file for each article. It makes your files more organized and easier to find. Otherwise, if your client just want to look at one article the page has to load all articles which may take longer if the client happens to have a slow internet connection.
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!!
I have been searching around for quite a while on ways to do this, and I'm beginning to think it's not doable. I can't say I'm an expert in html or CSS, but I have done a lot of research and found no tutorial for this specific problem.
I am coding a software user's guide to be posted online. The guide will include screenshots of the software, with figure numbers. The original code (I'm not the first on this project) simply hardcodes in the numbers of each image, which becomes more and more tedious as more information is added in.
I know there is a way to simply add in a new image and then tag the caption to include an automatically incrementing figure number. This would be very helpful, for if a new figure is added in, the numbers automatically change in all of the figures after the new one.
IF that were the only facet of the problem, I would simply use a CSS counter and be done with it. However, I also want to be able to reference specific figures in the text of the guide. My question is this: Is there a way to do this in CSS?
An example of text within the guide would be "Figure n shows the dialog box for customizing x." Is there a way to reference the nth figure in the guide without hardcoding the numbers?
If this is not possible in CSS, is there another language that can do it?
Edit: To clarify: The figures themselves would be labeled consecutively. But if I wanted to, within my text, refer to Figure 3, for example, that could be anywhere.
Edit 2: I have tried a javascript implementation using arrays. However, now it seems that some versions of Internet Explorer refuse to show the script portions of my code.
I am using the <script></script> tags within the body of my document, calling a javascript function located in the head. I know the syntax must be right because firefox and google chrome both load the page just fine. Is this simply IE being picky about something? (I checked, it's not my security settings).
Thing is, referring to things by their page index (incrementing) and by some figure number you maintain (also incrementing) are two identical solutions.
Actual problem: Maintaining the figure list with a sequence of ordered numeric identifiers becomes more difficult the longer a document becomes.
Solution: Give figures names, not numbers, and generate a number for display to the user. This gives ordered numbering to the user and allows you to reference figures with memorable names, but does not require you to reorder or modify figure numbers after every edit. Here's a quick example using jQuery:
<h2>How to add a contact</h2>
<img id="add-contact" class="figure" src="figures/add-contact.png" />
<p>This screenshot shows the location of the Add Contact button.</p>
<script type="text/javascript">
$(function() {
var figNum = 0;
$(".figure").each(function() {
figNum++;
$("a[href='#"+$(this).attr("id")+"']").append(" (figure "+figNum+")");
});
});
</script>
There are so many lightboxes to choose from, I'm looking for a very lightweight one to use in an embedded javascript widget that would be a single domain name. I saw the perfect one on chainreactioncycles.com, it popped up out of nowhere so I took a screenshot:
I tried looking for info on it on the page source, but couldn't find anything that would let me trace where it came from... Would anybody know of one like this? Or exactly that one?
If not exactly like above, anything similar would be great too, keeping the following in mind:
Very small javascript download (animation not needed)
Self contained, not dependent on any libraries other than jquery (since I'm already using that anyway).
Works in major browsers
Close button (like GetSatisfaction or UserVoice)
Dims background
Avoids javascript namespace conflicts (or can easily be made to avoid them)
CSS styling of lightbox does not interfere with site styling
Have you used an existing lightbox scripts for this same purpose with similar requirements? Did you roll your own? Insights welcome!
What you are looking for is called a modal box.
Here is a list of them
... and here is a striking replica of what you are looking for
Check out Zoombox.. It sounds like what you're looking for... Simple to use... Allows custom content.. jQuery Module... From past experience it covers what you have outlined as requirements etc
http://www.grafikart.fr/zoombox will tell you all you need to know.