I have a project that I am trying to find a solution for. I am attempting to have an Element (maybe a DIV), between 2 pages, be synchronized in real-time. After doing some research, it looks like using WebSocket to link them might be the best solution. I'm not experienced with setting up a scenario like this so have been trying to wrap my head around it.
My ultimate goal is to be able to inject (via JQuery) code into the shared/synced div (iframes with PDFs, URLs, other files) that will show up without refreshing on the 2nd page, real-time, so it works almost like co-browsing, but only a section of the page.
I'm building my app with ASP.NET MVC4/Razor.
Any suggestions or pointers in the right direction would be greatly appreciated!
If you use ASP.NET SignalR might be a solution.
Related
Let's say I have a website called https:// www.mysite.com. I am trying to figure out how I can capture events (like button click) on some other site (say - https://www.othersite.com that is willingly loaded) inside of mysite (something like a iframe).
Note: I do not have access to https://www.othersite.com
Something like :
<my-site>
// load external site https://www.othersite.com here
</my-site>
I tried using iframes but I realised it's not possible due to Same Origin Policy. (Please do not suggest the php solution with file_get_contents. I have gone through all the articles here on stackoverflow in the last couple of days but could not find a JS solution to this).
Basically, I was looking at something similar to Selenium IDE (It's extension here) where I want to capture events carried out by the user on https://www.othersite.com but its loaded on/inside mysite.
Any pointers to what can be some of the right approaches/strategies for solving this?
This is very fundamental question in what I am trying to achieve and I want to do it the right way. Any guidance is greatly appreciated!
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 am currently building a website but in an effort to prevent not necessary data to be loaded i decided to split but the website into serveral divs and load the content inside the div.
Because of this when i click on the back button i dont go to the previous location on the site but to where i was browsing before. Is there a way to solve this without rewriting the entire site? So for instance on my site there would be a members page that would be called upon using javascript by loading $('#content').load('members.php?id=$id');
For instance by creating a fake location...index.php#fakelocation (which contains the specific content i just loaded)
Can anyone give me a push in the right direction (or if this is impossible id like to hear it to)
I think what you're looking for is a combination of the History API and AJAX.
Lucky for you, there's a great library called PJAX that combines these technologies.
Without knowing more about how your backend works, I can't comment on additional steps to optimize the whole application, but PJAX is friendly with any number of server-side technologies.
Hi folks I am building a CRUD system very similar to this example http://jsfiddle.net/rniemeyer/WpnTU/.
Context:
I have several HTML pages that each contain the same table of data but showing different information (each page have their diffirent use).
On each row theres an edit button like yuo see in the example. Since the modal form is the same accross all the HTML pages I decided to create one HTML page containing the modal form. I then use jquerys load function like so $("#load_modal").load("pages/modal_form.html"); on each of the HTML pages.
Problem:
On a basic HTML page this is working out great. I tought this was a brilliant approach and gave myself a pat on the back. But now the problem I have is that when started implementing knockout it dosent seems to be working together very well. Modal dosent always pop up correctly and such.
My question:
At this point im not looking to figure out my code issue. I spent days and weeks staring at it and I came to the conclusion that I need to rethink my approach altogether. Im curios to hear some of your opnions on what would be the best aproach to tackle something like this.
Ideas so far:
I found this https://github.com/rniemeyer/knockout-amd-helpers/tree/master/examples But dosent use the latest knockout version and seems more complicated for something simple I need.
I also saw that using requireJS would be another idea but honestly these seem to complicate things for me.
Would anyone know of a simpler template solution or even have a whole different approach to this?
Using jQuery to modify your DOM is not going to work well in Knockout. You can use components to define the form HTML. Use an observable to switch which component is displayed.
brand new to angular and I was just hoping for a little guidance on something that I could achieve relatively quickly in jQuery.
As a pet project I'm coming up with a comic organiser web app to learn angular. I started the project in jQuery looking like so...
<div id='main'>
<div id='library'>
</div>
<div id='series' data-currently-loaded-series='1234'>
</div>
<div id='comic' data-currently-loaded-comic='4321'>
</div>
</div>
Now I based this design off of how gmail works it, it doesn't destroy tabs it simply hides them, or caches them, so that you'll never have load the same piece of information twice.
Clicking on a series in library loads it into the series div. If the 'currently loaded series id' matches the one I'm trying to load it won't load anything as it sees that it's already loaded it, so on and so forth...
I felt this sort of design would be invaluable for my little project as a lot of the comic cover images are high res and navigating between views would be a bit pointless, I of course know that images are usually cache by the browser, but I still couldn't see a reason to destroy the divs when I could simply hide them. I guess I'm trying to minimise data requests.
I've seen a few examples of this tab like behaviour around the internet but gmail is like the only instance I could find where they didn't destroy previous views/tabs on navigation.
Enter Angular...
I've found that when switching between partials and views it destroys the old data and I'm not too sure if this behaviour can be disabled. I thought I could set up the same div layout I had before and just load in multiple views and switch but Angular doesn't play well with multiple views (apparently UI-Router might be solution here). Even doing this all in one view wouldn't be ideal as I'm not too sure I'd be able to use URL routing...
I guess what my ultimate question is does anyone know the name of this tab caching mechanism gmail employs? If not could anyone point me in the direction of how I'd go about creating something similar?
Thanks
I suggest you using Bootstap and Ui bootstrap for angular.
A simply tutorial: http://odetocode.com/blogs/scott/archive/2013/08/14/dynamic-tabs-with-angularjs-and-ui-bootstrap.aspx