PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Thu Mar 23, 2017 3:09 am

All times are UTC - 5 hours




Post new topic Reply to topic  [ 4 posts ] 
Author Message
PostPosted: Fri Feb 10, 2017 5:55 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4137
Location: United Kingdom
[syntax=php]This could be a real quick one for you CSS experts to answer as I am a little stumped.

We are looking at the homepage. On an Android tablet, it seems to ignore quite a bit of code, so we now need to make things work purely via widths of screens.

This does mean that images will be loaded even if not displayed (for mobile) when it is a mobile view, and same for desktop. Hopefully this isn’t bad for speed.

Here’s the issue. The slider at the top called “Owl Slider”, needs to have a mobile and desktop version. It does now. But we need to alter it so it does it purely on width.

The attached “owl-code.txt” is the PHP script running. You will see “class-‘item mobile’” for mobile, and item desktop, for desktop.
One turn off one display, and the other follows suit.

I’m trying to use this CSS to control it, but it won’t have it. If I bring the window size down to 765, the desktop one remains on screen.

Syntax: [ Download ] [ Hide ]
<style>
@media screen (max-width: 768px)
{
.owl-carousel .owl-theme .item .desktop
{
display: none;
}
}

@media screen (min-width: 769px)
{
.owl-carousel .owl-theme .item .mobile
{
display: none;
}
}  
</style>
<link href="/js/owlslider/css/custom.css" rel="stylesheet" property='stylesheet'>
<link href="/js/owlslider/owl-carousel/owl.carousel.css" rel="stylesheet" property='stylesheet'>
<link href="/js/owlslider/owl-carousel/owl.theme.css" rel="stylesheet" property='stylesheet'>
<link href="/js/owlslider/google-code-prettify/prettify.css" rel="stylesheet" property='stylesheet'>
<link href="/js/owlslider/owl-homepage-override.css" rel="stylesheet" property='stylesheet'>
<script src="/js/owlslider/jquery-1.9.1.min.js"></script>
<script src="/js/owlslider/owl-carousel/owl.carousel.js"></script>
<script src="/js/owlslider/bootstrap-collapse.js"></script>
<script src="/js/owlslider/bootstrap-transition.js"></script>
<script src="/js/owlslider/bootstrap-tab.js"></script>
    <script>
    $(document).ready(function() {
      $("#owl-big").owlCarousel({
      autoPlay: 5000,
      stopOnHover: true,
      navigation : true,
      slideSpeed : 5000,
      paginationSpeed : 2000,
      singleItem : true,
      touchDrag: true,
      mouseDrag: true
      });
    });
    </script>

    <div id="owl-big" class="owl-carousel owl-theme">
   <?php
 
$query = ("SELECT * FROM homepage WHERE section = 'mobileslider' ORDER BY priority ASC");
$result = $pdo->query($query);
while ($row = $result->fetch(PDO::FETCH_OBJ))
      {
                        echo "<div class='item mobile'><a href='$row->url'><img src='/images/pages/$row->image' alt='$row->image'></a></div>";
                        }

$query = ("SELECT * FROM homepage WHERE section = 'desktopslider' ORDER BY priority ASC");
$result = $pdo->query($query);
while ($row = $result->fetch(PDO::FETCH_OBJ))
      {
                        echo "<div class='item desktop'><a href='$row->url'><img src='/images/pages/$row->image' alt='$row->image'></a></div>";
                        }
echo "</div>";

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Fri Feb 10, 2017 6:27 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6185
Location: Montreal, Canada
Looks like you're looking for four items deep when you've only got two. When you're taragetting elements with two specific classes, omit the space in the selector (e.g. '.owl-carousel.owl-theme'). That's assuming you even need that level of specificity.

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Fri Feb 10, 2017 6:44 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4137
Location: United Kingdom
Oh I see. So when the spacing is in the class:
class="owlslider newslide", and then within another div there are two like that, you do it in CSS like this:

.owlslider.newslide .innerslide.innernewslide

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Fri Feb 10, 2017 7:21 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4137
Location: United Kingdom
This works, however the item div still seems to load after the item desktop div. so when it slides across, you get a blank slide...?!?!

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 4 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group