Moving some elements

Posted over 6 years by Rhiannon Doyle

Post a topic
Answered
R
Rhiannon Doyle Admin

 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 over 6 years 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 : 


    

<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


14 Comments

Sorted by
R

Rhiannon Doyle posted over 6 years 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

J

Jeremy Aaron Horland posted over 6 years 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 : 


    

<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 Horland posted over 6 years

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.


 

<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-item picture").click(
					function() {
						setTimeout(function(){
							jQuery("div.fpd-close-stage-off-canvas span.fpd-icon-close").click();
						}, 20);
					}
				);
			} else {
				window.setTimeout(testStage, 20);
			}
			
		};
		
		window.setTimeout(testStage, 20);

});
</script>

 

0 Votes

J

Jeremy Aaron Horland posted over 6 years

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 Doyle posted over 6 years 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

J

Jeremy Aaron Horland posted over 6 years

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 Horland posted over 6 years

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 :


<script type='text/javascript'> 
jQuery("div.fpd-mainbar").insertBefore("div.fpd-views-selection");  
jQuery("div.fpd-actions-wrapper").insertBefore("div.fpd-product-designer-wrapper");
</script>

 


0 Votes

R

Rhiannon Doyle posted over 6 years Admin

I can't seem to get that to work. Would you have to remove the initial div first to use .insertBefore? 

0 Votes

J

Jeremy Aaron Horland posted over 6 years

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.


0 Votes

R

Rhiannon Doyle posted over 6 years Admin

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 Doyle posted over 6 years Admin

I'd like to move <div class="fpd-mainbar fpd-clearfix"> to just before fpd-views-selection

and <div class="fpd-actions-wrapper"> to before fpd-product-designer-wrapper

1 Votes

J

Jeremy Aaron Horland posted over 6 years

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 Doyle posted over 6 years 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 Horland posted over 6 years

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