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.
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/
I'm working on bookstore website. The main page has all the books. Each has it's own button. Every book has it's button linked to the same page (buy.html), I want change content by clicking on different buttons as every book has it's own description
This is my HTML button code
<button onclick="window.open('buy.html')" class="book4">Buy</button>
I need to open buy.html but with different content according to the book
but what happens now is All buttons show the same content
Can any one help me in this issue,
Thanks.
Though your question is rather broad, I think I get your problem.
You need a way to distinguish between books without creating a new page for every book.
There are multiple ways of doing this. Personally I'd recommend using Server-Side scripts for this but you can also do this with JavaScript, you just have to put it in the link.
An example could be this:
<button onclick="window.open('buy.html?book=4')" class="book4">Buy</button>
What this does is open buy.html and specify what book you want to buy so you can create a function to pull only that description out of the database or however you want to do it.
I strongly recommend a database because as soon as you have a hundred or so books your page will get really slow and it's a waste of resources if you only display one.
The best way to get data out of a URL (as far as I know) is like so
Though, next time please post your code too, that would make it a lot easier to pinpoint the problem.
Good luck.
Edit: The JavaScript that I linked was not the best solution and rather complicated so I think a better and more easily understandable function can be found here
Can i hide my wordpress blog site's page source like this? I have to ask this question because there are many plugins which can disable page source and right-click. but after typing manually "view-source:url" in browser it instantly shows the source-code of wordpress site.If any body knows answer please write down . this is very important for all bloggers 'I think' .
TLDR: No, you can never hide the soure code of your page. There is NO way.
For a browser to render a web site you need to send it the HTML, CSS, and javascript code. Even though you can make it "harder" to see the code by disabling right click, anyone with just a little bit of understanding of the web will be able to read it easily (F12 in most browsers).
As a website designer it is important for you to understand this concept as it is very important in deciding on how to design your web site. Things the user should not see need to happen on the server side (where no user can reach it). Only things which dont matter if anyone can see should be sent to the user.
I think you cannot hide the whole code. Or do you want to hide a specific part of the code? For example, you can hide/encrypt the URL of an iframe in which you can display more sensitive content. However, I also don't really know how to do it in WordPress (I searched for a solution many times) but I heard it's possible.
I'm curious what about the answers.
I wouldn't even consider doing this. Not only does it ruin the end-user's experience, it can actually stop people with disability copying text from your site or using other right-click menu items.
You can't hide your code, but you can obfuscate some of it.
CSS Obfuscater.
JSS Obfuscater.
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/
I'm building a one-page(one file) site and want to get insight as to whether or not I'm taking the most practical and intelligent approach. The site is a simple site for a graphic designer. It has 4 "pages" which are "about me", "contact", "work", and "photos." What I want to do is have 4 divs(absolutely placed in the same spot) with only one visible at a time. When you click any of the links it turns the visibility of the others off and the clicked link on. There are a few ways I could do this though:
Should I use Visibility to show/hide the layers?
Should I use Z-Index to show/hide the layers?
Is jQuery the best way to handle this?
Is using classes such as .visible .hidden the best way to cycle which divs are shown/hidden?
Any other tips to doing this for maximum efficiency?
I know some will tell me to just use separate pages but the site is simple with thumbnails and most of the size is in the header and jQuery script honestly. The thumbnails are fairly small and I don't see a point to making the site with more than one page if I don't have to.
Thanks for any insight.
As Pekka indicated, there may be arguments against doing this as a single-file site. But I'll assume you have a compelling use case. Answering the question:
I would approach this like so:
Use four divs.
No need to absolutely position them, just put them one after another.
Give each div a distinct ID with a semantic name (e.g., "about", "contact", etc.).
Don't hide any of them initially, just let them show one after another. Now the page can be used by people without Javascript, and it works just fine for search engines.
On page load, use Javascript to hide all but the one you want to show.
Determine which one you want to show by looking at the anchor in the location, e.g., "#about" means you want to show the about div, "#contact" means you want to show the contact page.
When you are changing from one to another, change the anchor to match. Now the site is bookmarkable/linkable.
Consider using a history plug-in to manage the anchors, so you can get forward and back support without absolutely tearing your hair out with all the browser inconsistencies. :-)
Not an answer to your questions, but there are compelling reasons speaking against this kind of approach.
Most importantly, it won't work with JavaScript turned off. It will be completely unusable for somebody who has no JavaScript. This makes it an absolute no-no for me.
It makes it impossible to link to specific pages
It's a SEO nightmare - maybe not that important in a 4-page site but still worth mentioning
Maintenance becomes more difficult, as there are four or more complex page structures melted into one
If you are using jQuery, just call .show() and .hide() as needed to toggle the sections.
However as noted by #Pekka, it is likely better to leave these as separate pages.
I think that using Jquery would be the best way to achieve this effect. Pekka mentioned that it won't work for users who have javascript turned off, but really-how many people have javascript disabled these days? Pretty much every single website you will visit relies on javascript.
In my opinion, the best way to get tabs using jquery is to use a plugin developed by Nettuts editor, Jeffrey Way. His personal site on which the plugin is located is under construction right now but I downloaded it a while ago. Here's a link to a zip file with the necessary files inside.
Please note that I have simplified his version greatly. This means I have removed a lot of styling but this shouldn't be a problem, since you probably will want your own unique styles.
JW-Tabs
Hope this helps.