PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Sun Sep 20, 2020 12:09 pm

All times are UTC - 5 hours




Post new topic Reply to topic  [ 12 posts ] 
Author Message
PostPosted: Thu Jun 18, 2015 12:49 pm 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
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?

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


Top
 Profile  
 
PostPosted: Thu Jun 18, 2015 1:18 pm 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6425
Location: Montreal, Canada
You can use negative margin to move them up.

_________________


Top
 Profile  
 
PostPosted: Thu Jun 18, 2015 1:38 pm 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
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........?!?!?!

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


Top
 Profile  
 
PostPosted: Thu Jun 18, 2015 1:52 pm 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6425
Location: Montreal, Canada
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 17962 times ]

_________________
Top
 Profile  
 
PostPosted: Thu Jun 18, 2015 2:00 pm 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
Show me what Css areas I adjusted. I couldn't fathom it.

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


Top
 Profile  
 
PostPosted: Thu Jun 18, 2015 2:12 pm 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6425
Location: Montreal, Canada
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;
}

_________________


Top
 Profile  
 
PostPosted: Thu Jun 18, 2015 2:34 pm 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
Ahh I see what you added. Thanks.

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


Top
 Profile  
 
PostPosted: Fri Jun 19, 2015 3:28 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom

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.

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


Top
 Profile  
 
PostPosted: Fri Jun 19, 2015 3:36 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
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?

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


Top
 Profile  
 
PostPosted: Fri Jun 19, 2015 7:01 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6425
Location: Montreal, Canada
Can you post your code? Throw up a fiddle or paste it all here? Will make troubleshooting this much easier.

_________________


Top
 Profile  
 
PostPosted: Fri Jun 19, 2015 7:07 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
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
}

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


Top
 Profile  
 
PostPosted: Fri Jun 19, 2015 8:39 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
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.

_________________
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  [ 12 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 4 guests


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:  
cron
Powered by phpBB® Forum Software © phpBB Group