PHP Developers Network
http://forums.devnetwork.net/

Owl Carousel: can the 'dots' be put absolutely in the bottom
http://forums.devnetwork.net/viewtopic.php?f=68&t=141442
Page 1 of 1

Author:  simonmlewis [ Thu Jun 18, 2015 12:49 pm ]
Post subject:  Owl Carousel: can the 'dots' be put absolutely in the bottom

http://owlgraphic.com/owlcarousel/demos/one.html
I need to get the dots that are beneath the image, to be absolutely positioned at the base of the image, rather than under it.

I think the DIV is designed outside of the image DIV, and don't understand the JS hardly enough to get them moved.

Is it a CSS issue, or JS?

Author:  Celauran [ Thu Jun 18, 2015 1:18 pm ]
Post subject:  Re: Owl Carousel: can the 'dots' be put absolutely in the bo

You can use negative margin to move them up.

Author:  simonmlewis [ Thu Jun 18, 2015 1:38 pm ]
Post subject:  Re: Owl Carousel: can the 'dots' be put absolutely in the bo

If you try that yourself, for example:
.owl-pagination
{
margin-top: -25px,
}

The dots all move up but the active one, goes behind the image........?!?!?!

Author:  Celauran [ Thu Jun 18, 2015 1:52 pm ]
Post subject:  Re: Owl Carousel: can the 'dots' be put absolutely in the bo

Works fine for me. You'll likely need to adjust colour and opacity also.

Attachments:
Screen Shot 2015-06-18 at 2.20.41 PM.png
Screen Shot 2015-06-18 at 2.20.41 PM.png [ 1.11 MiB | Viewed 17961 times ]

Author:  simonmlewis [ Thu Jun 18, 2015 2:00 pm ]
Post subject:  Re: Owl Carousel: can the 'dots' be put absolutely in the bo

Show me what Css areas I adjusted. I couldn't fathom it.

Author:  Celauran [ Thu Jun 18, 2015 2:12 pm ]
Post subject:  Re: Owl Carousel: can the 'dots' be put absolutely in the bo

Syntax: [ Download ] [ Hide ]
.owl-theme .owl-controls {
    margin-top: -40px;
    text-align: center;
}
.owl-buttons {
    display: none;
}
.owl-theme .owl-controls .owl-page span {
    display: block;
    width: 12px;
    height: 12px;
    margin: 5px 7px;
    border-radius: 20px;
    background: rgb(255, 255, 255) none repeat scroll 0% 0%;
    opacity: 0.8;
}
.owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span {
    opacity: 0.8;
}

Author:  simonmlewis [ Thu Jun 18, 2015 2:34 pm ]
Post subject:  Re: Owl Carousel: can the 'dots' be put absolutely in the bo

Ahh I see what you added. Thanks.

Author:  simonmlewis [ Fri Jun 19, 2015 3:28 am ]
Post subject:  Re: Owl Carousel: can the 'dots' be put absolutely in the bo


This one appears to let you add text. I need a slider form this Owl, where I can have text at the bottom of each image in each DIV. With the sliding abilities.

While I can get the text below the image (tho not sure how to adjust height of each item div, the "data" is in an external JSON file.

I did read that you can just embed JSON onto a page:

Syntax: [ Download ] [ Hide ]
              <div id="owl-demo" class="owl-carousel">
              <script id="data" type="application/json">
{
        "owl" : [
            {"item" : "<span class='item'><img src='17272077z1.jpg' /><p>1</p></span>"},
            {"item" : "<span class='item'><img src='17272077z1.jpg' /><p>2</p></span>"},
            {"item" : "<span class='item'><img src='17272077z1.jpg' /><p>3</p></span>"},
            {"item" : "<span class='item'><img src='17272077z1.jpg' /><p>4</p></span>"},
            {"item" : "<span class='item'><img src='17272077z1.jpg' /><p>5</p></span>"},
            {"item" : "<span class='item'><img src='17272077z1.jpg' /><p>6</p></span>"},
            {"item" : "<span class='item'><img src='17272077z1.jpg' /><p>7</p></span>"},
            {"item" : "<span class='item'><img src='17272077z1.jpg' /><p>8</p></span>"},
            {"item" : "<span class='item'><img src='17272077z1.jpg' /><p>9</p></span>"},
            {"item" : "<span class='item'><img src='17272077z1.jpg' /><p>10</p></span>"},
            {"item" : "<span class='item'><img src='17272077z1.jpg' /><p>11</p></span>"},
            {"item" : "<span class='item'><img src='17272077z1.jpg' /><p>12</p></span>"},
            {"item" : "<span class='item'><img src='17272077z1.jpg' /><p>13</p></span>"},
            {"item" : "<span class='item'><img src='17272077z1.jpg' /><p>14</p></span>"}
        ]
}
</script>

    </div>

But so far it's producing nothing on screen. No errors, no characters.

Author:  simonmlewis [ Fri Jun 19, 2015 3:36 am ]
Post subject:  Re: Owl Carousel: can the 'dots' be put absolutely in the bo

Ok I'm not sure you can have two different sliders on the one page. I've tried the "full.html" version of the slider further down, because that is like JSON but it's all internal.

But it doesn't work at all for me, not with the big top slider working.

Any ideas?

Author:  Celauran [ Fri Jun 19, 2015 7:01 am ]
Post subject:  Re: Owl Carousel: can the 'dots' be put absolutely in the bo

Can you post your code? Throw up a fiddle or paste it all here? Will make troubleshooting this much easier.

Author:  simonmlewis [ Fri Jun 19, 2015 7:07 am ]
Post subject:  Re: Owl Carousel: can the 'dots' be put absolutely in the bo

I'm now using this.
I've changed no external JS file.
Both sliders work. And I've gotten rid of the second sliders dots, but what's happening now is that the top big slider "one", is not resizing.

I worked out you can change the ID of each slider so the JS and CSS are relative independant. The DIVs and big-slider dots all show and change fine, but the big slider's images now don't resize.

Syntax: [ Download ] [ Hide ]
</div>


   
    <link href="/js/owlslider/css/custom.css" rel="stylesheet">
   
    <link href="/js/owlslider/owl-carousel/owl.carousel.css" rel="stylesheet">
    <link href="/js/owlslider/owl-carousel/owl.theme.css" rel="stylesheet">
    <link href="/js/owlslider/google-code-prettify/prettify.css" rel="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: 2000,
      stopOnHover: true,
      navigation : true,
      slideSpeed : 300,
      paginationSpeed : 400,
      singleItem : true,
      touchDrag: true,
      mouseDrag: true
      });
    });
    </script>
   
    <div id="owl-big" class="owl-carousel owl-theme">
   
   <?php
$query = ("SELECT * FROM static WHERE section = 'bigslider' ORDER BY priority ASC");
$result = $pdo->query($query);
while ($row = $result->fetch(PDO::FETCH_OBJ))
      {
                        echo "<div><a href='$row->url'><img src='/images/pages/$row->image'></a></div>";
                        }
?>
    </div>


 <div class='mainbodybox' style='padding-left: 14px'>

   <div id="owl-multi" class="owl-carousel">
          <div class="item"><img src='/images/pages/17272077z1.jpg' /><br/><p>1</p></div>
          <div class="item"><img src='/images/pages/17272077z1.jpg' /><br/><p>2</p></div>
          <div class="item"><img src='/images/pages/17272077z1.jpg' /><br/><p>3</p></div>
          <div class="item"><img src='/images/pages/17272077z1.jpg' /><br/><p>4</p></div>
          <div class="item"><img src='/images/pages/17272077z1.jpg' /><br/><p>5</p></div>
          <div class="item"><img src='/images/pages/17272077z1.jpg' /><br/><p>6</p></div>
          <div class="item"><img src='/images/pages/17272077z1.jpg' /><br/><p>7</p></div>
          <div class="item"><img src='/images/pages/17272077z1.jpg' /><br/><p>8</p></div>
          <div class="item"><img src='/images/pages/17272077z1.jpg' /><br/><p>9</p></div>
          <div class="item"><img src='/images/pages/17272077z1.jpg' /><br/><p>10</p></div>
          <div class="item"><img src='/images/pages/17272077z1.jpg' /><br/><p>11</p></div>
          <div class="item"><img src='/images/pages/17272077z1.jpg' /><br/><p>12</p></div>

        </div>
  <style>
    #owl-multi .item{
border: 1px solid #cccccc;
        padding: 0px 0px;
        margin: 5px;
        color: #000000;
        text-align: center;
    }
    </style>      
      <script>
    $(document).ready(function() {
      $("#owl-multi").owlCarousel({
              autoPlay: 2000,
      stopOnHover: true,
      pagination: false
      });
    });

    </script>
 
<div class='mainbodybox'>
 


owl.theme.css adjusted as follows:
Syntax: [ Download ] [ Hide ]
/*
*       Owl Carousel Owl Demo Theme
*       v1.3.3
*/


.owl-theme .owl-controls{
        margin-top: -20px;
        text-align: center;
}

/* Styling Next and Prev buttons */

.owl-theme .owl-controls .owl-buttons div{
display: none;
}
/* Clickable class fix problem with hover on touch devices */
/* Use it for non-touch hover action */
.owl-theme .owl-controls.clickable .owl-buttons div:hover{
        filter: Alpha(Opacity=100);/*IE7 fix*/
        opacity: 1;
        text-decoration: none;
}

/* Styling Pagination*/

.owl-theme .owl-controls .owl-page{
        display: inline-block;
        zoom: 1;
        *display: inline;/*IE7 life-saver */
}
.owl-theme .owl-controls .owl-page span{
        display: block;
        width: 12px;
        height: 12px;
        margin: 5px 7px;
margin-bottom: 15px;
        filter: Alpha(Opacity=50);/*IE7 fix*/
        opacity: 0.8;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
border: 2px solid #ff5500;
        background: #000000;
}

.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span{
        filter: Alpha(Opacity=100);/*IE7 fix*/
        opacity: 1;
}

.owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span {
    opacity: 0.8;
background: #ffffff;
border: 2px solid #ffffff;
}


/* If PaginationNumbers is true */

.owl-theme .owl-controls .owl-page span.owl-numbers{
        height: auto;
        width: auto;
        color: #FFF;
        padding: 2px 10px;
        font-size: 12px;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px;
}

/* preloading images */
.owl-item.loading{
        min-height: 150px;
        background: url(AjaxLoader.gif) no-repeat center center
}

Author:  simonmlewis [ Fri Jun 19, 2015 8:39 am ]
Post subject:  Re: Owl Carousel: can the 'dots' be put absolutely in the bo

Ok I have sorted it. The problem was a missing class for img in the top slider.
While we are here, I wonder if you might help me sort this.

Rightly or wrongly, I use this to determine device and size to display, and then use CSS for up to 767px and 768 - 3000.

Syntax: [ Download ] [ Hide ]
if ((preg_match("/(iPad|iPhone|BlackBerry|Android|motorola|nokia|panasonic|playbook|ipod|alcatel)/", $_SERVER["HTTP_USER_AGENT"])))
{ echo "<meta name=\"viewport\" content=\"width=device-width, user-scalable=no\">";}
else
{
echo "
<Script>
if($.mobile.media(\"screen and (min-width: 768px)\")) {
    // Check for iPhone4 Retina Display
    if($.mobile.media(\"screen and (-webkit-min-device-pixel-ratio: 2)\")) {
        $('meta[name=viewport]').attr('content','width=device-width, user-scalable=no,initial-scale=.5, maximum-scale=.5, minimum-scale=.5');
    }
}
</script>"
;
}  
 


Problem is, on an ipad in Portrait, I was trying to get the width of the main part of the size to be max-width: 950px. But it now had a big gap to the right. But if I do it on a PC shrinking the browser down, it doesn't do that.

Currently our sites on ipads and large devices "zoom" down to the right width of the screen, and then on mobile they are small versions. I want to make 768px wide versions nicer. And thought I could use % rather than px so they resize for iPad.

Is anything I am doing above, causing a possible problem?

If I take the "ipad" reference out, it doesn't have the gap, but doesn't resize the screen down either, on the homepage in particular. I know this cause the top menu ought to be crushing down but isn't.... and does on desktop.

Page 1 of 1 All times are UTC - 5 hours
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/