target location after pressing enter - javascript

This is probably a very simple thing, but I'm very new to Javascript and HTML5 and can't seem to find an answer to my question.
I'm currently developing an app for Samsung Smart TV.
I currently have 2 major files: Main.js and index.html, in which most of my code is written. Also, I have a style sheet called Main.css.
My problem: I have a button the screen, that when pressing it (that is, when pushing enter on the remote), I want the screen to change in to a completely different one (from welcome screen to admin settings). How do I do that??
Hope my question is not too general. Any help would be appreciated.

You should divide your index.html with divs that represent a scene. To make it easy please use Basic Project it will generate a pattern to split the html/css/js like different pages and you only need to call sf.scene.show("SettingsScene")
If you're using javascript project, then the answer from user3384518 is the only way. Like i mentioned above, split your body to several divs and do hide/show the div

Your question is clear, but you don't say if you use a library (or not).
So, if you use jQuery :
$('.myButtonName').click(function () {
$('#myWelcomScreenDiv').hide(200, function () {
$('#myAdminSettingsDiv').show(200);
});
});
But, if you would like to do something better, I recommend you to use a framework like Backbone.js or Angular.js.

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 different paragraphs show up after clicking on something

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.

Is it possible to change entire css class / js and anything associate with that?

I am new here.
Just want to ask several question to anyone experienced in this field.
So I have just bought a php website, and the case is that the owner of this theme seems a bit strict with copyright stuff, so he placed his own identity in almost every way.
In example, the website named "mcdonalds", he have almost in his entire css class after his name/brand, example .mcdonalds_header , or .mcdonalds_style.css , etc .
Now my question is,
Is it possible to change entire css class dynamically?
I meant, if I open it through text editor maybe I could replace them all by hitting Ctrl+H and replace "mcdonalds_" with [nothing].But of course it will return many errors as the entire php and js file are associated with those class.
What I want in example I have
index.php with 8 div have class "mcdonalds_grid"
style.css file with class "mcdonalds_grid"
is it possible to edit the class in css "mcdonalds_grid" to "gridStyle", and then the entire 8 class in the file changed automatically, too?
Because I am not sure to do it manually. In my case I have up to hundred thousands to be edited. It sicks. And if you asked the reason I need to do this, so it looks more professional using my own brand rather than using mcdonald's stuffs.
Any view would be appreciated.
Thanks!
Others have mentioned Jquery.
You could also do it dynamically with Less Mixins: https://www.gaslampmedia.com/mapping-css-styles-less/.
Or you could do it non-dynamically (I would recommend this). You could use an IDE (Integrated Development Environment) or an advanced text editor to search and replace all instances of a text string in the entire project at once. In your case, you could replace all instances of mcdonald with the name of your company or project. Advanced Text Editors like Sublime Text or Notepad++ could let you do this, but you would generally need to open all of the files at once. IDEs like Visual Studio or Dreamweaver would also let you do this, with the benefit of not having to open all of the files (you just add the files to your project).
I personally don't suggest to make these types of edit but if you must need to do then follow the process:
From the answer of the question
You can use IDE to change something in the whole project. I would suggest NetBeans. It's easy. Just add the project to NetBeans, click on edit (in the top left corner) and then click on Replace in project.. ( check in the bottom of the popup)
then

Simple lightbox feedback form? Included screenshot

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.

want to make better content display

We are developing a social networking project, in this project we are adding content , e.g. images , video,audio,link(html).
Currently we are using shadowbox.js to show it.But for better and effectiveness we want to use some other better plugin, or want to make own window for showing images and link.
Please help , what is the best solution for this project.
I want to know this is the white board quesion means programmer.stackexchange question or stackoverflow quesion?
Thanks
There are 31 here:
http://www.dreamcss.com/2009/03/31-mind-blowing-collection-of-jquery.html
You should find one or more that suits your needs.
I would suggest using colorbox.js it can be found here :
http://colorpowered.com/
It is easily styled, comes with a pleathera of options including an image slideshow, can handle iFrames, Ajax content, Images, etc, and comes with a few options for styling to begin with.
Made my own div and use that for displaying content :)

Categories