jrgweb
|
@Len - Here is an example for desktop to move sidebars.
On the home menu item, you have the standard content, sidebar1 and sidebar2. On the blog menu item, you have sidebar1, sidebar2 and content. Artisteer doesn't offer 2sidebars then content in the layout functions.
http://demo.artisteertoday.com/move_sidebars/index.html
|
| |
LenW
|
@jrgweb - Your demo is similar to my testing site. My initial requirement was with a website with a left and right sidebar and content in the middle on the desktop, to switch the sidebars for responsive mode. What we have here works fine if we reduce the desktop size.
But: the above code still does not work if I access the test site using a smartphone, where the size is initially narrow. The sidebar switch is not triggered as there is no resize taking place. The code needs to be modified to allow for the initial load size as well. The code below needs trimming, not all of it is needed if I change some before's to after's.
<script type="text/javascript">
jQuery(document).ready(function($) {
if ($(window).width() <= 680){
jQuery('div.pptk-sidebar2').insertBefore('div.pptk-content');
jQuery('div.pptk-sidebar1').insertBefore('div.pptk-sidebar2');
}
if ($(window).width() > 680){
jQuery('div.pptk-sidebar1').insertAfter('div.pptk-content');
jQuery('div.pptk-sidebar2').insertAfter('div.pptk-sidebar1');
}
$(window).resize(function(){
if ($(window).width() <= 680){
jQuery('div.pptk-sidebar2').insertBefore('div.pptk-content');
jQuery('div.pptk-sidebar1').insertBefore('div.pptk-sidebar2');
}
if ($(window).width() > 680){
jQuery('div.pptk-sidebar1').insertAfter('div.pptk-content');
jQuery('div.pptk-sidebar2').insertAfter('div.pptk-sidebar1');
}
});
});
</script>
|
| |
Lunarion
|
jQuery(document).ready(function($)
{
if ($(window).width() >= 1000)
{
jQuery('div.art-sidebar1').insertBefore('div.art-content');
}
if ($(window).width() < 1000)
{
jQuery('div.art-sidebar1').insertAfter('div.art-content');
}
$(window).resize(function()
{
if ($(window).width() >= 1000)
{
jQuery('div.art-sidebar1').insertBefore('div.art-content');
}
if ($(window).width() < 1000)
{
jQuery('div.art-sidebar1').insertAfter('div.art-content');
}
});
});
Here is my code, inserted at the end of the script.js
Works like a charm! Thanks everyone.
|
| |
unknown
|
sadly that doesnt work on android. it switches once you go down half the page.
|
| |
Elvira
Artisteer Team
|
@unknown,
Just checked it and this works fine on my Android phone.
For example, this is how I placed 2 sidebars before the content area.
I opened header.php file and inserted the following code before </head> tag:
<script type="text/javascript">
jQuery(window).resize(function($) {
if (jQuery(window).width() <= 1199){
jQuery('div.art-sidebar1').insertBefore('div.art-sidebar2');
jQuery('div.art-content').insertAfter('div.art-sidebar2');
}
else {
jQuery('div.art-sidebar1').insertBefore('div.art-content');
jQuery('div.art-content').insertBefore('div.art-sidebar2');
}
});
</script>
Best regards,
Elvira
|
| |