Ronen
|
I'm using 2 sidebars (left and right) and on small screens (cellular)
It's show first sidebars widgets and the content
Can I switch it?
to show first the contents and then all widgets?
(artisteer 4.2, wp 3.8)
|
| |
Tanya
Artisteer Team
|
Hi,
Unfortunately there is no such option in the application. The left sidebar is shown on the top of the content and the right sidebar under the content in the responsive mode.
Best regards,
Tanya
|
| |
jrgweb
|
@Ronen - An alternative is to use a script to accomplish this feature.
<script type="text/javascript">
$(window).resize(function(){
if ($(window).width() <= 480){
$(document).ready(function() {
$('div.art-sidebar1').insertBefore('div.art-sidebar2');
});
}
});
</script>
What this script is saying is when the screen resolution is less than 480 px, then move sidebar1 right before sidebar2
|
| |
Nick
|
Thanks jrgweb, it works like a charm, and looking at the code, I know how to modify it when in a template there is only a left sidebar. For a year and a half, I was making templates only with right sidebars. Things will change now, thanks to you.
|
| |
Trevor
|
Just be aware that on less powerful hardware this can be slow.
|
| |
jrgweb
|
@Nick - I've been using this method with artisteer for about a year now and have no issues or even heard of any issues. I also in the early days would set the sidebars right of the content until clients insisted they didn't want this design, so I found a work around. I wasn't sure I wanted to totally re-do the responsive design so the script has done excellent for my purpose.
@Trevor - Thank you for the heads up. After I read your comment, I ran and got an old netbook, dusted it off and fired it up to test. So far it worked great. I'm not a fan of netbooks(especially windows) as they are slooow. 
|
| |
Nick
|
Do they still sell netbooks? I thought the tablets killed them... anyways, to complete the "tutorial". The above code is when you have 2 sidebars. If you have just 1 sidebar, you have to show it before the footer, since there is no sidebar 2.
<p><script type="text/javascript">
$(window).resize(function(){
if ($(window).width() <= 480){
$(document).ready(function() {
$('div.art-sidebar1').insertBefore('.art-footer');
});
}
});
</script>
|
| |
Trevor
|
Inserting before the footer may cause some issues. You could always insert after the content. As for older devices I know there have been speed issues with moving things around on crummy free phones, this may not be the case anymore as even those phones are pretty fast nowadays. I'll work this into Tuxedo as an option.
|
| |
Nick
|
I was hoping for that !!!
|
| |
Bazish
|
What a Great TIP that is.. Excellent @jrgweb 
good point Trevor regarding slowness of the content moving around on devices with low hardware profile.. but now a days almost everything coming around dual core/quad core in cells... so this might be not an issue...
not only this should be included into Tuxedo but Artisteer should also include this into there software... (all thumbs up to @jrgweb)
when including in Tuxedo, i am sure we will get an option to force left sidebar at bottom of content not only after 480 resolution devices but it should given use option to input resolution size.. so we control if we want it to be at bottom of content on tablets too...
|
| |
S
|
Quote jrgweb:
@Ronen - An alternative is to use a script to accomplish this feature.
<script type="text/javascript">
$(window).resize(function(){
if ($(window).width() <= 480){
$(document).ready(function() {
$('div.art-sidebar1').insertBefore('div.art-sidebar2');
});
}
});
</script>
What this script is saying is when the screen resolution is less than 480 px, then move sidebar1 right before sidebar2
What file does this go into?
|
| |
Trevor
|
Ya, option for phones or tablets will be included.
|
| |
Trevor
|
Header.php or script.js
|
| |
S
|
Thank you, Trevor 
|
| |
S
|
Quote Nick:
Do they still sell netbooks? I thought the tablets killed them... anyways, to complete the "tutorial". The above code is when you have 2 sidebars. If you have just 1 sidebar, you have to show it before the footer, since there is no sidebar 2.
<p><script type="text/javascript">
$(window).resize(function(){
if ($(window).width() <= 480){
$(document).ready(function() {
$('div.art-sidebar1').insertBefore('.art-footer');
});
}
});
</script>
Does this go in the footer.php file?
|
| |
S
|
Um...nevermind my last question 
|
| |
josicus
|
great solution, tnx.
|
| |
LenW
|
The above script does not work in Artisteer 4.1 theme I have installed, it breaks the normal responsive actions of the theme. In Chrome I get an error, found in the code inspector:
Uncaught TypeError: Property '$' of object [object Object] is not a function
Its highlighting the following line:
if ($(window).width() <= 680){
I have changed the dimension, but it still has the error with 480.
Any suggestion as to a fix for this please?
Thanks
|
| |
jrgweb
|
@LenW - Do you have url to website with problem?
|
| |
Scott
|
Quote jrgweb:
@LenW - Just tried it in artisteer 4.1 and works perfect.
I too love this great fix by jrgweb, however I cannot seem to get it working...
When I export the WordPress theme I remove the "art-" from the CSS. I'm also exporting the theme with one sidebar positioned on the left.
Any idea on the script adjustments? Using (Art.4.1.0.59861)
|
| |
jrgweb
|
@Scott - Try the modfied script posted below.
This assumes you didn't replace ".art-" with anything else.
This script is inserting sidebar1 after the content. with .art- removed.
<script type="text/javascript">
$(window).resize(function(){
if ($(window).width() <= 480){
$(document).ready(function() {
$('div.sidebar1').insertAfter('div.content');
});
}
});
</script>
|
| |
Scott
|
Quote jrgweb:
@Scott - Try the modfied script posted below.
This assumes you didn't replace ".art-" with anything else.
This script is inserting sidebar1 after the content. with .art- removed.
<script type="text/javascript">
$(window).resize(function(){
if ($(window).width() <= 480){
$(document).ready(function() {
$('div.sidebar1').insertAfter('div.content');
});
}
});
</script>
Where would the best place be to put this script?
|
| |
jrgweb
|
@Scott
I insert mine in the footer.
|
| |
Scott
|
@jrgweb
I get a white screen no matter where I put the script...
|
| |
jrgweb
|
Do you have url
|
| |
jrgweb
|
@Scott - you can contact me at jrgweb @ gmail.com
|
| |
LenW
|
@jrgweb still no difference with your modified code. With the script installed it just makes the site totally unresponsive.
I am using the Insert Headers and Footers plugin to add the script to the website, and its adding it correctly.
The website is one of my testing sites, with many plugins installed, so there may be some conflict.
Will send url to your email address tomorrow.
|
| |
LenW
|
@Jrgweb
Finally got it sorted. With Wordpress the script has to start with the "jQuery(document).ready(function($) {"
line according to other forums I have read, otherwise it will not useth JQuery library loaded by Wordpresss correctly, then all other code inside it. This may not be the totally right explanation, but jQuery is starting to make a little more sense.
Then it worked. However, it only works on way, moving the sidebar when the window size reduces, it needs to reset the sidebars if the window size increases as it could on a PC monitor or even a tablet. NEw code is:
<script type="text/javascript">
jQuery(document).ready(function($) {
$(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>
|
| |
LenW
|
I suppose we are left with an interesting question:
Should the sidebar(s) be before or after the content, is this down to the needs of the site and customer, or is there a good reason one way or the other.
|
| |
jrgweb
|
@Len - This example started with users wanting the content before the sidebars only on responsive design.
I've actually used this method to change the layout of the sidebars. For example, artisteer doesn't allow for 2 sidebars first then content on desktop view. You can have 1 column or sidebar-content or content-sidebar or content and 2 sidebars but not 2 sidebars and content.
In artisteer 4.2 you can set this per menu item also.
|
| |