Wordpress Customiser Refresh Issues - javascript

OK, I have been working with the customiser now for a number of days and one issue seems to be persisting, it may be the way I am thinking about this but can not see a solution in the API.
Basically I have a solid working set of controls and panels and have live updates working for things like colour pickers and text updates however I want to use settings like a full width setting for example that allows me to insert a php ternary operator to check if a theme_mod is a certain value and insert some text, php or css to make the change.
Obviously these changes are not being reflected in the preview window as it does not reload the entire page so logical operations are not showing until I have saved and done a manual reload of the page, I know I can not simply reload the iFrame but I am not sure what I can do.
Hopefully I have explained this well enough, many thanks in advance.

Related

Calling OA Page from custom JSP

I'm trying to launch a custom OAF page from a custom JSP. Although the OAF page is loading fine and functionality is also working correctly, but there is drastic change in the look and feel of the OAF page. FOr eg: Go/Clear buttons are displayed as rectangles. Also, for LOVInput fields, the Quick Select is coming as an hyperlink rather than Image that we see normally.
I'm using Oracle 11i and Jdev 9i.
I have registered my OAF page through AOL function, and calling using javascript from my custom JSP.
I have tried looking at various sites but mostly they deal with launching of OAF page (which i already have done).
https://community.oracle.com/thread/571687?start=0&tstart=0
https://community.oracle.com/thread/388873?start=15&tstart=0
My issue is with the difference in look and feel of the OAF page. It is working fine in JDev.
Image showing Go and QUick Select buttons
Fixed this issue by updating the profile option "Oracle Application Look and Feel" value at User/Responsibility level as "Browser Look and Feel".

Keep most HTML after link clicked

Hi i want to make an effect similar to what this site does http://www.hffm.co.uk/
When you change the page the url up top changes but the content in the sidebar and header stays the same. - i am also curious if this affects SEO.
They stay the same - and do not reload with the page - i figure it has to be some ajax thing? Curious what a system like this is called.
The point is in their case they dont want to interrupt the radio on a link change.
To update the specific part of the page it can be achieved through Ajax and JQuery. Basically both of the those works on the client side which means that website doesn't refresh. You can always make a Ajax request to the server which can return the content in a Json format and that content can be reflected on the page using Jquery.
This is only just a overview of how ajax/Jquery works. But you need to be more specific in what you are trying to achieve and what you have done so far.

How to modify spin.js to block the UI and show on the center of the screen

I'm already using spin.js in my application. I like it because it's pure JS and at least for me solved some issues that I was having using a loading image. However the default behaviour has two things that I would really like to change.
Here is a simple Fiddle example which is simple but very well illustrates what I would like to achieve.
I have a very long from and at the beginning of the HTML file I have <div id="show-spinner"></div> so when the user clicks Submit I can:
var target = document.getElementById('show-spinner');
var spinner = new Spinner().spin(target);
The problem is that when I'm at the end of the form where the submit button is when I call the spinner it shows in such a way that I may very well not see it at all, as it is in my Fiddle example (at least if you are using some low(laptop) resolution) but no matter the resoution there's always the chance to get so down below that you can't actually see that the spinner is shown. Which kinda leads me to the nex problem which I think is realted to the first - I would like to show the spinner always at the center of media screen (the laptop display for example) and also - since for example I don't want the user to be able to click Submit twice and in I would say, all of the cases, when I show the spinner I would like the user to not be able to interact with the UI - I mean, to click buttons, write stuff in inputs and so on so I would like to show some sort of load mask or I'm not sure how it's called, just like when you call alert()
So to sum it up - from what is it right now in my fiddle example I would like to change it to some alert like behaviour so that no matter where I am on the HTML dom I always get some sort of spinning animation on the center of my screen and mask diasbling the user to interact with the UI.
Since this sounds to me as kind of trivial task, or at least something that have been solved already I would accept answer pointing to plugin that provide such functionality. The only thing - I woul prefer to use something that is pure JS and doesn't use images.. but I will apreciate all suggestions!

Changing CSS with JS and saving change

I am creating a page that lets the user chose colours and various elements on the page will adopt the new colour. For example boxes to show the colour scheme selected. I've been using the code $('').css('background_colour',.....) and it works great.
The problem I have now is I made an example webpage which should use these various colours in the relevant sections of the page. For example, main text, background colour, etc. I can't use what I have been doing because none of the changes save and when I click the link that opens the example page it only shows the original colours I put in its CSS file. I figured the method I'm using doesn't isn't actually rewritting the CSS file because when I reload the page where the user selects colours every goes back to default.
If anyone can point me to places to read or suggest the best approach to changing the CSS file that is for a different page AND allows for those changes to be saved I would really help me out.
Hope my description makes sense
Thanks
You can use either cookies or html5 localstorage to store client preferences for your website.
It's plenty of different libraries on the Internet which can help you in this task.
Cookies libraries
https://code.google.com/p/cookies/
https://github.com/ScottHamper/Cookies
Localstorage library
http://www.jstorage.info/
I would suggest cookies if you need to read user preferences from your server side.
Otherwise you can go for localstorage.
if you want to use colors in relevant pages, you have to save your color change events in database or in sessions or in cookies.
Otherwise you can not save changes. Because web page is rendered again when you refresh the page.

Changing html form index when a new form element is added

I am working on an old legacy application which used document.forms[index] approach to access elements in the form and to submit the form. My task is to add a new top panel with few textboxes and buttons. I am using a form for this. This top panel is to be included in all the pages in the application. Now, all the pages stop working since form[index] needs to be updated in all the pages. I know using the form name is the best approach. I have around 1000 places to change. What is the best approach to avoid this problem? I still want to use form for my top panel since I am using spring forms to get the data. Any valuable advice will be appreciated. Thanks.
If you looked up the definition of "unmaintainable", that would be a good example.
One trick might be to leave one set of forms, hidden, with the legacy stuff in them, then make another set, lower in the HTML, that the user sees. Then use some JavaScript to map the data back into the original forms in order to continue to work with the expectations of the legacy code. This keeps everything in the same index-order.

Categories