Sorting a table with PHP - javascript

Alright, I'm ready to take the PHP plunge. I've got an HTML5 animation with table sorting tools (a button for "by date," another for "by title"), and I wanted to have these sort a table on the same page. I've Googled around and haven't found any suitably customizable ready-made table sorters, so I've learned some PHP basics as well as a bit of jQuery, and wanted to do this.
The HTML5 animation was compiled in Hype, and is technically an HTML document referring to a .js file.
If this is possible, any help is appreciated.
EDIT
Alright, I've got some code for you. There's more than a bit of it, so brace yourselves. This first one is from the "Hype.js" file, which is the file in question. Once again, this was completely compiled by Hype.
(dead link removed)
Now here's headeranimated_hype_generated_script.js. The second part of the link (starting with http://) is a link to the page I intend to put the table on, but since I've got less than 10 reputation, I'm limited to 2 links.
(dead links removed)
(I figure it's easier to view them in-browser as a standalone page rather than a comment box here)
My concrete question is, is it possible to use PHP or possible jQuery to use custom buttons to sort a table?

You can use the JQuery Table Sorter Plugin.

Related

I'm using a DataTables plugin for my ASP.NET MVC program. The table displays without any CSS. Why?

I have been troubled with this problem for DAYS, and this is a last resort.
I am following along with a course, and in it the instructor has us use DataTables to pull a list of users from a database. The plugin is pulling data from my db correctly, and the functionality of the table seems to be working. The problem is that the table is hideous, and virtually unusable.
I'm at a loss, as I have made sure my code mimics everything from the video lesson. I've even analysed my code next to his in GitHub.
I've even made sure to use his version numbers for plugins, as the course was recorded in 2016-2017 I believe. I have considered the fact that I'm using Visual Stdio 2019, and he is not. Also, I remember there being a large bootstrap update as recently as a couple years ago. (DataTables uses bootstrap)
I'll show some code below, but here are both repos for this project(Vidly):
My Repo |
Instructor's Repo
Since this is apparently a CSS problem, I looked to how I was importing my css files. I am using a bundle inside of the BundleConfig file in the App_start folder:
But it's exactly the same as the instructor wrote it, identical.
Lastly, here's the code in relation to the first image, the page with the table in question:
I am lost.
EDIT:
Last night I was messing with my included files in the BundleConfig file and switched the dataTables to bootstrap 4 and got a more desirable result:
As you can see, this is definitely laid out better, and has the desired dimensions, but the colors of the hovered rows and certain text is still off and unappealing.
If your Bootstrap version is 4, then you need to load in the *.bootstrap4.css / *.bootstrap4.js files for DataTables (rather than *.bootstrap.* which is for Bootstrap 3).
Update for the edit
Looks like you might also be loading the jquery.dataTables.css file (the tell is the gaps in the pagination)? You can remove that. Only one of the style files should be loaded.
What is the tutorial that you were following btw?

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!!

unexpected script/css conflict, how to resolve?

I've asked this question earlier on which has been technically answered by Bardh Lohaj but unfortunately the answer itself presents a further problem. The question is about a cool way to ajax upload files in a multi field form. The solution would work perfectly except that because the form is using bootstrap.min.css in order to display form sections in JS triggered tabs - meaning the form is nicely broken up into manageable parts while remaining all as one page, means the nice solution offered by Bardh does not function correctly. What is the best way forward to resolve the css/js conflict in order to get both functions to operate fully? I've never had this sort of problem before.
As requested, here is a fiddle of the page, I cannot get the +1 feature seated in Section 3, to work on the fiddle as it does on the real page. Fiddle: http://jsfiddle.net/k3dj214k/2/
I want to get this working in the file upload section (Section 3) of the page on the above fiddle. I've tried several times but always with the same failure - the bootstrap.min.css that is required for the tab function, breaks the file upload function. Advice on how to get them both working together is appreciated.
There is too much code to paste in here, please review jsfiddle link above
The accepted and used solution is not one I'm hugely proud of but it IS functional. Separate the upload form function from the main form so they are two separate pieces of html/php. Break the primary form part way through (close the form) and enter the file upload form as an iframe. After this, re-open the original form.
Not a wonderfully technical solution, but is does work with minimal issues/problems.

wysiwyg javascript editor replace images with text

I am currently working on a MVC4 asp.net project(my first, before I worked with WPF and winforms, no real website expierience). And I want to make a editor/wysiwyg for comments that people can make on items on the site. Everything is already setup but the comments are just written in a <textarea/>. Now I googled a bit and found a bunch of WYSIWYG editors for javascript, however I can t find a good one, or a good way to solve this issue:
Lets say the site is about poker (it is not but it is for easy example) and when a person makes a comment like "h9 is better then s10" once he posts (or at the time he types, that would even be better). The h9 is replaced by a hearts 9 jpg (or we can create a div of it and it has a backgroundimage css property)(all the jpgs are on the server ofc). (Same for the S10 it should be replaced by the spade 10 card image)
I got no clue how I can fix this, so any help with what wysiwyg editor I should use for this problem and how I could get closer to fixing it, would really be appreciated.
Maxim

Categories