How to fix order of positions in responsive desing?


Author Message
jrgweb

Posted: 1/21/2014
Quote message 

@Benny - place the following in your head:

<script type="text/javascript">
jQuery(window).resize(function(){
if (jQuery(window).width() <= 480){
jQuery(document).ready(function() {
jQuery('div.art-sidebar1').insertBefore('div.art-sidebar2');
});
}
});
</script>

I had to change the $ to jQuery for it to work in joomla. Most of the examples are done in HTML. :-)
 
jrgweb

Posted: 5/14/2014
Quote message 

@Alex Lloyd - If you used the code above it will not work as you don't have a sidebar2.

This should work.

<script type="text/javascript">
jQuery(window).resize(function(){
if (jQuery(window).width() <= 480){
jQuery(document).ready(function() {
jQuery('div.art-sidebar1').insertAfter('div.art-content');
});
}
});
</script>


Where did you place the script?
 
Alex Lloyd

Posted: 5/15/2014
Quote message 

Thanks for your reply. To place the script I went to the wordpress login - http://www.belgradelakepoint.com/wp-admin/ then clicked on Appearance then editor and clicked and pasted the code to the bottom of the header.php script. Should I be doing this in artisteer? If so where would I put it? Thanks.
 
Alex Lloyd

Posted: 5/18/2014
Quote message 

Website http://www.belgradelakepoint.com

The above worked for android phone and iphone in landscape and portrait but on a tablet and ipad the sidebar still displays before the content. Is there code I can add for the content to display before the sidebar?

Also the menu does not show the sub menu items in any browser for screen resolutions 768 or less. The other issue is that there is no scrolling from left to right in any browser for the same screen resolutions. See http://www.belgradelakepoint.com/idx/city/belgrade/?idx-q-ListingOfficeID%3C0%3E=2277&idx-d-SortOrders%3C0%3E-Column=Price&idx-d-SortOrders%3C0%3E-Direction=DESC

Any help is very much appreciated. Thanks.
Alex
 
JTL Web Design

Posted: 9/28/2014
Quote message 

First off, I'll admit I only skimmed the above posts because they seem to focus on changing it to the right (position-6) and then using code to move it back to the left. If I adjust my site to simply have the items on the right instead of the left (the side makes no difference to my client, as long as it is on the side) will it move it below the content in mobile view?
 
Ventsislav

Posted: 3/14/2015
Quote message 

I use the following:

In the index.php before the code:

<?php if ($view->containsModules('position-6', 'position-8', 'position-3')) : ?>
<div class="art-layout-cell art-sidebar2">

added

<div class="art-content7"><?php echo $view->position('position-7', 'art-block'); ?></div>
<div class="art-content4"><?php echo $view->position('position-4', 'art-block'); ?></div>
<div class="art-content5"><?php echo $view->position('position-5', 'art-block'); ?></div>

In the template.css add

@media all and (min-width: 700px)
{
.art-content7{
display: none !important;
}
.art-content4{
display: none !important;
}
.art-content5{
display: none !important;
}
}

@media all and (max-width: 700px)
{
.art-sidebar1 {
display: none !important;
}

.art-content7{
display: block;
}
.art-content4{
display: block;
}
.art-content5{
display: block;
}
}

This does not work for IE8
Greetings


 
Jeeni

Posted: 7/30/2015
Quote message 

I'm late to come to this party - but thought I'd add this here if it's of any help to anyone in the future. My colleague was looking for help with a WordPress Artisteer template and we found that adding the following to the <b>footer</b> worked best for our site:

<script type="text/javascript">


jQuery(window).resize(function(){
if (jQuery(window).width() <= 480){
jQuery(document).ready(function() {
jQuery('div.art-sidebar1').insertAfter('div.art-content');
});
}
});

jQuery(window).resize(function(){
if (jQuery(window).width() >= 481){
jQuery(document).ready(function() {
jQuery('div.art-content').insertAfter('div.art-sidebar1');
});
}
});

</script>