Dynamic Pages with html5 + XML + JS? - javascript

Basically this is the first time when i ASK A QUESTION on stackoverflow. Anyway i will really appreciate if someone can point me to some direction about creating an simple product catalog app using html5+xml+js.
Well the structure is the following:
A: Home page >click> Product Categ >click> List of Products >click> Product Page Description
I'm not sure how shall i create the dynamic pages for the products to be able to extract all the products description from XML whenever click on any of product from the list page.
For example i have 10 products on the page, when i click on product X, an dynamic page with the product X 's (image, description, price) to be created, and so on.
I hope all of these things make sense for you and thanks a lot for your precious time.

For reading XML files using JavaScript, check answers from this question. For HTML5 and JavaScript in general I suggest you to check tutorials for some basics:
JavaScript - http://www.w3schools.com/js/default.asp
HTML5 - http://www.w3schools.com/html/html5_intro.asp
You can also check jQuery library tutorial. And here is jQuery's website.
I think that you should read some basics to learn how to look for more in the web and search for "how-to" connected with specified things you want to do and still don't know where to start.
EDIT:
If you want to check something that you'll need exactly at the beginning, you can check this documentation of addEventListener JavaScript method that will allow you to set action that will be invoked when particular event of the element fires. You can also check links connected to jQuery I mentioned above - jQuery is JavaScript library that makes writing JS simplier. But with both JavaScript and jQuery you have to spend some time reading documentation to know what you can do and how to achieve it.

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 to make a soundcloud widget?

So I have been looking to make a Sound Cloud widget for code-pen for testing then I will implement it to my website. what I am trying to aim for is something that displays a couple of tabs that you can click on that will let you change the view to different parts of my profile such as my re-posts and my tracks that is all I want but my problem is that i do not know how to code at all I have looked at the soundcloud resources:
https://developers.soundcloud.com/docs/widget
but it is all confusing as I have no idea what to start with as a base and what I need. I have looked for templates but found nothing that matches my keywords.
for now all I am trying to do is create a widget that matches this Image
using css js and html and any other code that can be embedded in html
I also want to make it possible for anyone to modify it for their own account by a variable at the top of the JavaScript code for the key, a commented out link to get a consumer key and any other key that is related/required for the widget, the user id / user URL, how to find the user id with link.
for now those are not required because getting a working widget is my first priority even if it does not look good. so I am asking for help on what I NEED to do first to get a base to it for example what lines do I need in my html to import the SDK for the widget? what are the requirements do I need for my widget such as a API key and what one because I know you can enable certain things with api's and disable options such as playback
https://www.w3schools.com/howto/howto_js_tabs.asp
Make the href="www.example.soundcloud.com/user/re-posts" for each tab, I am unfamiliar with soundcloud API's though

Dynamically Updating Website Over Time

I am wondering if someone could give me a brief explanation as to how a site like darebee.com can auto-update its content every day. I understand javascript can be used to create div content through use of arrays but I don't think that is what is going on here.

How to create a gallery with different states

I have a gallery page with four different sections: art, tattoo, info and gallery. The first image of each is displayed in a DIV called imageWrap when the headings are clicked, while the arrow icons (visible on section highlight) cycle through the images and notes via variables which reference a number of arrays.
I want to make the arrow buttons reference the correct variable set dependending on which section is active. Is there a way to listen for the current gallery state and modify the action listeners to handle the correct variable?
The page with the issue is located here:
www.christopherwynne.com/tattoo
I am still fairly new at Java, and any insight would be greatly appreciated.
Well i suggest you learn some Javascript Basics to develop more attractive webpages, i don't think java work on here for doing.
if you don't know anything about Javascript i leave you this resource
Javascript its sexy
JSIS give you the best resource to learn property JS, also give you another tutorials for learn some others frameworks like Meteor
Also if you say "i don't have time to learn JS i need my tattoo web page and the gallery image working" take a look on this page
Codrops Images Galley
Its very easy to adapt to the current web and look pretty nice
Hope it helps

Trying to integrate Javascript range slider into my website but not sure where to start

I am trying to build a little test shell for my website using Javascript. What I have at the moment is a normal website. PHP/HTML with an SQL backend.
What I'd like is a simple Javascript feature whereby the user has a single slider object and can use this object to set the upper and lower limit on a number of variables, which will be determined by a drop down box just underneath the slider.
Aside from this, I'd just like a number of checkboxes which dictate which products are displayed (i.e if I'd like food but not drink, the food checkbox would be ticked!).
I'm not expecting anyone on SO to do this for me, of course, but I would like to find some specific areas I could go to learn how to do this, and google is failing me in this regard. I will then begin working/editing this post to show my code/ask for help.
Can anyone help please?
It seems that you want to build a specific search for site, but instead of the user searching it is what is displayed. I would start with looking at php, based upon which checkboxes they choose, you can return variables which would show them what they want to see.
I personally wouldn't use javascipt for this.
I'm not sure what your level of experience is with Javascript, so my apologies if this answer is too basic.
To put a slider on your page refer here for the HTML:
http://webhole.net/2010/04/24/html-5-slider-input-tutorial/
Then in Javascript get the value of that slider when making your GET requests of the server.
You can store the selected value or checked value in the target element, when you process, you just call the element and get the value from them. Using jquery data() method can store the value to element and retrive it pretty easy.
If you still have no clue, I redcomend you learn some basic javscript techniques, go to this site www.jquery.com .
Are you using jQuery and jQuery UI? jQuery UI has a nice slider widget with a number of configuration options and good documentation: http://jqueryui.com/demos/slider/
If you're not used to it, there may be a bit of a learning curve for jQuery, but it makes a great number of UI features much, much easier to code. Showing and hiding elements based on checkboxes, for example, is a pain to do in straight JS but fairly simple to do with jQuery. There are lots of other ways to just make a slider, but if you're planning to do much more with the UI I'd strongly recommend using a library like jQuery to do the heavy lifting.

Categories