I'd like to move a couple of the elements out of the stage but can't quite work out the hooks I can remove and then add in again in a different position.
- I have fpd_mainbar set to position default, but I'd like to move it to below the product image/canvas on product page
- I'd like to move the actions out of the stage and positioned above it instead
If anyone has any guidance to achieve this I'd be really grateful.
0 Votes
J
Jeremy Aaron Horland posted
about 8 years ago
Best Answer
Above is the wrong script, with the same wrapper.
Replace the part below "//PUT YOUR JAVASCRIPT HERE"
<script type='text/javascript'>
jQuery( document ).ready(function() {
var testStage = function(){
if (jQuery( "div.fpd-view-stage").length ) {
//PUT YOUR JAVASCRIPT HERE
jQuery("div.fpd-actions-wrapper").insertBefore("div.fpd-product-designer-wrapper");
} else {
window.setTimeout(testStage, 20);
}
};
window.setTimeout(testStage, 20);
});
</script>
1 Votes
J
Jeremy Aaron Horlandposted
about 8 years ago
A few improvements
1) Now, instead of page by page, I have moved the script to a new plugin "CSS & Javascript Toolbox" -- so I can assign it to different products without re-writing it or pasting it on every page. Works great, has an "auxiliary" section where all the woo products just show up.
2) A re-write to make it work there was needed, this is also a lot more elegant than the previous, but still not hooked into or detecting specific FPD logic. I'd still love some help from the FPD team for this.
It took a little doing, but I figured out the issue.
FPD loads items & stage -after- page load, and it operates after window.ready. Any script loaded at or before window.ready was failing to move stuff around the editor box.
A quick wait-and-sniff wrapper works well here. There is likely a way to be more elegant here, and detect the operation of the FPD javascript itself, and attach this to the operations of FPD's own logic.
<script type='text/javascript'>
jQuery( document ).ready(function() {
setTimeout(function(){
while (!jQuery( "div.fpd-view-stage").length ) {
sleep(10);
}
//PUT YOUR JAVASCRIPT HERE
jQuery("div.fpd-actions-wrapper").insertBefore("div.fpd-product-designer-wrapper");
}, 10);
});
</script>
So, for you, hopefully this works, for the FPD staff -- what is the best, most elegant way to load scripts -AFTER- your editor box loads into the DOM but before the user has page control?
0 Votes
R
Rhiannon Doyleposted
about 8 years ago
Admin
Yes, tried it in browser debugger and it worked as you described.
Using OH Script header and footer, and put the below in header but no change:
These two lines work as-is on the demo site, if tested in your browser's console.
They should just work, when inserted into your page at end of page load, such as in the page footer.
How are you inserting the script into your page?
What plugin are you using?
Have you tried this in your browser's debugger console first to see if it works?
0 Votes
J
Jeremy Aaron Horlandposted
about 8 years ago
these statements work as-is, no prep. You can test them by entering them into your javascript "debug" console in your developers tools. If you do not have your developers tools loaded in your browser, google up how to do so for your browser of preference.
You can also just enter them into your page-script plugin box. Which one did you choose? Many of them require "script" tags in order to operate such as the "OH Add Script Header Footer" which I use.
To enter them into my plugin I would put this into the FOOTER script box :
I achieved the same thing in the end by extending the canvas size height, and positioning the main bar with css.
0 Votes
R
Rhiannon Doyleposted
about 8 years ago
Admin
I'd like to move <divclass="fpd-mainbar fpd-clearfix"> to just before fpd-views-selection
and <divclass="fpd-actions-wrapper"> to before fpd-product-designer-wrapper
1 Votes
J
Jeremy Aaron Horlandposted
about 8 years ago
If you've tried the UI & Layout Composer and you're sure the elements you want to move cannot be done with this tool then you need to write a little jQuery to do the same thing.
You will need a plug-in that lets you place javascript on individual pages, such as "OH Add Script Header Footer."
Do you know -exactly- which div you want to move around, and -exactly- where on the page you want to put it?
0 Votes
R
Rhiannon Doyleposted
about 8 years ago
Admin
I'd certainly be happy to give that a go and see what effect it had on the page load
0 Votes
J
Jeremy Aaron Horlandposted
about 8 years ago
Is it acceptable for you to do this before page-load time with jQuery and a scripting plug-in?
I'd like to move a couple of the elements out of the stage but can't quite work out the hooks I can remove and then add in again in a different position.
- I have fpd_mainbar set to position default, but I'd like to move it to below the product image/canvas on product page
- I'd like to move the actions out of the stage and positioned above it instead
If anyone has any guidance to achieve this I'd be really grateful.
0 Votes
Jeremy Aaron Horland posted about 8 years ago Best Answer
Above is the wrong script, with the same wrapper.
Replace the part below "//PUT YOUR JAVASCRIPT HERE"
with your jQ -
jQuery("div.fpd-actions-wrapper").insertBefore("div.fpd-product-designer-wrapper");
Such as :
1 Votes
14 Comments
Rhiannon Doyle posted almost 8 years ago Admin
Thanks so much for taking the time to investigate this. Appreciate the explanation as well - makes sense!
Works perfectly well and gives total control over where to position these elements outside of the stage.
0 Votes
Jeremy Aaron Horland posted about 8 years ago Answer
Above is the wrong script, with the same wrapper.
Replace the part below "//PUT YOUR JAVASCRIPT HERE"
with your jQ -
jQuery("div.fpd-actions-wrapper").insertBefore("div.fpd-product-designer-wrapper");
Such as :
1 Votes
Jeremy Aaron Horland posted about 8 years ago
A few improvements
1) Now, instead of page by page, I have moved the script to a new plugin "CSS & Javascript Toolbox" -- so I can assign it to different products without re-writing it or pasting it on every page. Works great, has an "auxiliary" section where all the woo products just show up.
2) A re-write to make it work there was needed, this is also a lot more elegant than the previous, but still not hooked into or detecting specific FPD logic. I'd still love some help from the FPD team for this.
0 Votes
Jeremy Aaron Horland posted about 8 years ago
It took a little doing, but I figured out the issue.
FPD loads items & stage -after- page load, and it operates after window.ready. Any script loaded at or before window.ready was failing to move stuff around the editor box.
A quick wait-and-sniff wrapper works well here. There is likely a way to be more elegant here, and detect the operation of the FPD javascript itself, and attach this to the operations of FPD's own logic.
So, for you, hopefully this works, for the FPD staff -- what is the best, most elegant way to load scripts -AFTER- your editor box loads into the DOM but before the user has page control?
0 Votes
Rhiannon Doyle posted about 8 years ago Admin
Yes, tried it in browser debugger and it worked as you described.
Using OH Script header and footer, and put the below in header but no change:
<script type='text/javascript'>
jQuery(document).ready(function() {
jQuery("div.fpd-actions-wrapper").insertBefore("div.fpd-product-designer-wrapper");
})
</script>
0 Votes
Jeremy Aaron Horland posted about 8 years ago
These two lines work as-is on the demo site, if tested in your browser's console.
They should just work, when inserted into your page at end of page load, such as in the page footer.
How are you inserting the script into your page?
What plugin are you using?
Have you tried this in your browser's debugger console first to see if it works?
0 Votes
Jeremy Aaron Horland posted about 8 years ago
these statements work as-is, no prep. You can test them by entering them into your javascript "debug" console in your developers tools. If you do not have your developers tools loaded in your browser, google up how to do so for your browser of preference.
You can also just enter them into your page-script plugin box. Which one did you choose? Many of them require "script" tags in order to operate such as the "OH Add Script Header Footer" which I use.
To enter them into my plugin I would put this into the FOOTER script box :
0 Votes
Rhiannon Doyle posted about 8 years ago Admin
I can't seem to get that to work. Would you have to remove the initial div first to use .insertBefore?
0 Votes
Jeremy Aaron Horland posted about 8 years ago
sorry this took so long :
for your first request :
jQuery("div.fpd-mainbar").insertBefore("div.fpd-views-selection");
works GREAT -- try it at your debugger console on one of the demo pages or on your own site.
and
jQuery("div.fpd-actions-wrapper").insertBefore("div.fpd-product-designer-wrapper");
takes care of your other issue. This will allow a lot more flexibility than the css solution.
Attachments (1)
Screen-Shot-....jpg
252 KB
0 Votes
Rhiannon Doyle posted about 8 years ago Admin
I achieved the same thing in the end by extending the canvas size height, and positioning the main bar with css.
0 Votes
Rhiannon Doyle posted about 8 years ago Admin
and <div class="fpd-actions-wrapper"> to before fpd-product-designer-wrapper
1 Votes
Jeremy Aaron Horland posted about 8 years ago
If you've tried the UI & Layout Composer and you're sure the elements you want to move cannot be done with this tool then you need to write a little jQuery to do the same thing.
You will need a plug-in that lets you place javascript on individual pages, such as "OH Add Script Header Footer."
Do you know -exactly- which div you want to move around, and -exactly- where on the page you want to put it?
0 Votes
Rhiannon Doyle posted about 8 years ago Admin
0 Votes
Jeremy Aaron Horland posted about 8 years ago
Is it acceptable for you to do this before page-load time with jQuery and a scripting plug-in?
0 Votes
Login or Sign up to post a comment