WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

WebArtz - The Web Design Forum » Web Designing & Coding » HTML (Hyper Text Markup Language) » how to put this slider into my annoucement

View previous topic View next topic Go down  Message [Page 1 of 1]

1 how to put this slider into my annoucement on Sat Aug 04, 2012 2:00 pm

medlsc


Registered Member
Registered Member
i want to put in the annoucement this slider. How to do that ?

http://landofcoder.com/demo/mootool/lofslidernews/index2.html

http://med-lab-scietists.free-forums.biz/

ankillien


Administrator
Administrator

medlsc


Registered Member
Registered Member
When i download the files what i do next ? I don't know the procedure.

http://med-lab-scietists.free-forums.biz/

ankillien


Administrator
Administrator
Ok,

1) Get codes from css/style.css file and add the CSS codes in your Admin CP > Display > Colors > CSS.

2) From the images folder, you need to upload these images to any image hosting site: load-indicator.gif, transparent_bg.png, arrow-bg.png, grad-bg.gif

3) Add links to these images in the CSS code in appropriate place.

4) Open index.html file in notepad, copy the code and put it in your homepage message.

5) Add image URLs and your content/text in the HTML source code.

6) Take codes from js/mootools.svn.js and js/lofslidernews.mt11.js files and add them in javascript code management.

I hope it helps Smile

medlsc


Registered Member
Registered Member
I done what you said but i don't understand where i go wrong.

here's the css code WITH THE PICS

Code:
@charset "utf-8";
/* CSS Document */
.lof-slidecontent{
   position:relative;
   overflow:hidden;
   border:#F4F4F4 solid 1px;
   width:892px;
   height:300px;
}
.lof-slidecontent .preload{
   height:100%;
   width:100%;
   background:#FFF;
   position:absolute;
   top:0;
   left:0;
   z-index: 999;
   color:#FFF;
   text-align:center
}
.lof-slidecontent .preload div{
   height:100%;
   width:100%;
   background:transparent url(http://i34.servimg.com/u/f34/15/44/56/66/load-i10.gif) no-repeat scroll 50% 50%;
}
/* main flash */
.lof-main-wapper{
   margin-right:auto;
   overflow:hidden;
   background:transparent url(http://i34.servimg.com/u/f34/15/44/56/66/load-i10.gif) no-repeat scroll 50% 50%;
   padding:0px;
   height:100%;
   width:600px;
   position:relative;
   overflow:hidden;
}

.lof-main-wapper .lof-main-item{
   overflow:hidden;
   padding:0px;
   margin:0px;
   height:100%;
   width:100%;
   position:absolute;
}
.lof-main-wapper .lof-main-item img{
   padding:0px;   
   width:600px;
}

.lof-main-item-desc{
   z-index:100px;
   position:absolute;
   top:150px;
   left:50px;
   width:400px;
   background:url(http://i34.servimg.com/u/f34/15/44/56/66/transp10.png);

   /* filter:0.7(opacity:60) */
}
.lof-main-item-desc p{
   color:#FFF;
   margin:0 8px;
   padding:8px 0
}
.lof-main-item-desc h3 a{
   color:#FFF;   
   margin:0;
   font-size:140%;
   padding:20px 8px 2px;
   font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
}
.lof-main-item-desc h3 a:hover{
   color:#FF6;
   text-decoration:underline;
}


/* item navigator */
ul.lof-navigator{
   top:0;
   padding:0;
   margin:0;
   position:absolute;
   width:100%;
}
ul.lof-navigator li{
   cursor:hand;
   cursor:pointer;
   list-style:none;
   width:100%;
   padding:0;
   margin:0;
   overflow:hidden;
}
.lof-navigator-outer{
   position:absolute;
   right:0;
   top:00px;
   z-index:100;
   height:300px;
   width:310px;
   overflow:hidden;
   color:#FFF
}
.lof-navigator li.active{
   background:url(http://i34.servimg.com/u/f34/15/44/56/66/arrow-10.png) no-repeat scroll left center;
   color:#FFF
}
.lof-navigator li:hover{
   
}


.lof-navigator li h3{
   color:#FFF;
   font-size:100%;
   padding:15px 0 0 !important;
   margin:0;

}
.lof-navigator li div{
   background:url(http://i34.servimg.com/u/f34/15/44/56/66/transp10.png);
   color:#FFF;
   height:100%;
   position:relative;
   margin-left:15px;
   padding-left:15px;
   border-top:1px solid #E1E1E1;
}

.lof-navigator li.active div{
   background:url(http://i34.servimg.com/u/f34/15/44/56/66/grad-b10.gif);
   color:#FFF;
}
.lof-navigator li img{
   height:60px;
   width:60px;
   margin:15px 15px 10px 0px;
   float:left;
   padding:3px;
   border:#C5C5C5 solid 1px;
}
.lof-navigator li.active img{
   border:##6C8E5C  solid 1px;
}
.lof-navigator li.active h3{
   color:#FFF;
}
.lof-next{
   position:absolute;
   top:0;
   height:30px;
   background:#F9F9F9;
   display:block;
   width:100%;
}
.lof-previous{
   position:absolute;
   bottom:0;
   height:30px;
   background:#F9F9F9;
   display:block;
   width:100%;
}     
 body { margin:0px; font-family:Arial, Helvetica, sans-serif; background:#000000; }
#container { width:900px; margin:0px auto 0px; background:#FFFFFF; padding:10px; font-size:12px; margin-top:50px; }
a{
   text-transform:none;
   color:#333
}
#footer{
   background:#F0F0F0;
   padding:10px;
   border:#999 dotted 1px;
} 



HERE THE HTML CODE WITH THE PICS

Code:
<div id="container">
          <h1><strong>Lof SliderNews 1.0</strong> -  Mootool 1.1</h1>
     
 <p>
   <strong> Direction: Opacity - Navitagor on the right side .</strong>
    The plugin allow to use the wheelup and wheeldown to previous|next item in the list
</p>     
<!------------------------------------- THE CONTENT -------------------------------------------------><div id="lofslidecontent45" class="lof-slidecontent"><div class="preload"><div></div></div>
 <!-- MAIN CONTENT -->
  <div class="lof-main-wapper">
        <div class="lof-main-item">
              <img src="http://i34.servimg.com/u/f34/15/44/56/66/79190210.jpg" title="Newsflash 2" height="300" width="900">         
                <div class="lof-main-item-desc">
                <h3><a target="_parent" title="Newsflash 2" href="#">Newsflash 2</a></h3>

                <p>The one thing about a Web site, it always changes! Joomla! makes it easy to add Articles, content,...</p>
            </div>
        </div>
      <div class="lof-main-item">
           <img src="http://i34.servimg.com/u/f34/15/44/56/66/43557610.jpg" title="Newsflash 1" height="300" width="900">            <div class="lof-main-item-desc">
                <h3><a target="_parent" title="Newsflash 1" href="#">Newsflash 1</a></h3>
                <p>Joomla! makes it easy to launch a Web site of any kind. Whether you want a brochure site or you are...</p>

            </div>
        </div>
      <div class="lof-main-item">
           <img src="http://i34.servimg.com/u/f34/15/44/56/66/64190610.jpg" title="Newsflash 3" height="300" width="900">            <div class="lof-main-item-desc">
                <h3><a target="_parent" title="Newsflash 3" href="#">Newsflash 3</a></h3>
                <p>With a library of thousands of free Extensions, you can add what you need as your site grows. Don't...</p>
            </div>
        </div>
        <div class="lof-main-item">

           <img src="http://i34.servimg.com/u/f34/15/44/56/66/41671911.jpg" title="Newsflash 5" height="300" width="900">            <div class="lof-main-item-desc">
                <h3><a target="_parent" title="Newsflash 5" href="#">Newsflash 5</a></h3>
                <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p>
            </div>
        </div>
       
        <div class="lof-main-item">

           <img src="http://i34.servimg.com/u/f34/15/44/56/66/41671911.jpg" title="Newsflash 5" height="300" width="900">            <div class="lof-main-item-desc">
                <h3><a target="_parent" title="Newsflash 5" href="#">Newsflash 5</a></h3>
                <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p>
            </div>
        </div>
        <div class="lof-main-item">

           <img src="http://i34.servimg.com/u/f34/15/44/56/66/41671911.jpg" title="Newsflash 5" height="300" width="900">            <div class="lof-main-item-desc">
                <h3><a target="_parent" title="Newsflash 5" href="#">Newsflash 5</a></h3>
                <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p>
            </div>
        </div>
           
  </div>
  <!-- END MAIN CONTENT -->
    <!-- NAVIGATOR -->

  <div class="lof-navigator-outer">
        <ul class="lof-navigator">
            <li>
               <div>
                   <img src="http://i34.servimg.com/u/f34/15/44/56/66/79190210.jpg">
                   <h3> NewsFlash 1 </h3>
                     <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu...
                </div>   
            </li>
            <li>
               <div>
                   <img src="http://i34.servimg.com/u/f34/15/44/56/66/43557610.jpg">
                   <h3> NewsFlash 2 </h3>
                     <span>20.01.2010</span> -In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
                </div>   
            </li>

            <li>
               <div>
                    <img src="http://i34.servimg.com/u/f34/15/44/56/66/64190610.jpg">
                    <h3> NewsFlash 3 </h3>
                   <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
                </div>   
            </li>
           
          <li>
                <div>
                    <img src="http://i34.servimg.com/u/f34/15/44/56/66/41671911.jpg">
                    <h3> NewsFlash 4</h3>
                    <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
                </div>
            </li>   
            <li>
                 <div>
                   <img src="http://i34.servimg.com/u/f34/15/44/56/66/64190610.jpg">
                   <h3> NewsFlash 5</h3>
                   <span>20.01.2010</span> -In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
                </div> 
            </li>
          <li>
                <div>
                    <img src="http://i34.servimg.com/u/f34/15/44/56/66/41671911.jpg">
                    <h3> NewsFlash 6</h3>
                    <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
                </div>
            </li>          
        </ul>
  </div>
 </div>
<script type="text/javascript">
   var _lofmain =  $('lofslidecontent45');
   var _lofscmain = _lofmain.getElement('.lof-main-wapper');
   var _lofnavigator = _lofmain.getElement('.lof-navigator-outer .lof-navigator');
   var object = new LofFlashContent( _lofscmain,
                             _lofnavigator,
                             _lofmain.getElement('.lof-navigator-outer'),
                             { fxObject:{ transition:Fx.Transitions.Quad.easeInOut,  duration:800},
                                interval:3000,
                                direction:'opacity' } );
   object.start( true, _lofmain.getElement('.preload') );
</script>

<!------------------------------------- END OF THE CONTENT ------------------------------------------------->
 <p>
<a href="index.html">Demo 1</a>  | <a href="index2.html">Demo 2</a>  |  <a href="index3.html">Demo 3</a>  | <a href="index2.1.html">Demo with mootool 1.2</a> </p><div id="footer">
 <a href="http://landofcoder.com">LandOfCoder.Com</a>
</div>
    </div>


At the end for the js/mootools.svn.js and js/lofslidernews.mt11.js files i did two javascript codes, not one.

Look my test forum : http://proxeirooo.forumgreek.com/



http://med-lab-scietists.free-forums.biz/

ankillien


Administrator
Administrator
Looks like there is something wrong with it.
Here is another one which is similar to this slider: http://www.jscodes.com/jquery-feature-list-code/

It is simpler and made with jquery.

medlsc


Registered Member
Registered Member
I put an accordion into the annoucement for the latest topics. I want to reduce this space between the vertical button and the picture inside the container. How to do that ?



I found codes from this forum. http://www.avacweb.com/t221-21-show-recent-topics-preview-in-accordion

http://med-lab-scietists.free-forums.biz/

ankillien


Administrator
Administrator
This CSS code would solve it...

Code:
.slide .postbody {
width: 100%;
}

medlsc


Registered Member
Registered Member
thx ankillien. I have one more problem. I don't have all the text of the topic inside the container. I have the half of this. The text is cutted on the right side of the topic.

http://med-lab-scietists.free-forums.biz/

10 Re: how to put this slider into my annoucement on Fri Aug 10, 2012 6:22 pm

ankillien


Administrator
Administrator
This code would fix it...

Code:
.slide .post .postbody {
white-space: wrap !important
}

11 Re: how to put this slider into my annoucement on Fri Aug 10, 2012 9:13 pm

medlsc


Registered Member
Registered Member
It's not working ankillien. The problem with the space remains.

http://med-lab-scietists.free-forums.biz/

12 Re: how to put this slider into my annoucement on Sat Aug 11, 2012 8:19 am

ankillien


Administrator
Administrator
Sorry, my bad.
Please tr this one. I have tested and it should work Smile

Code:
.slide .postbody .content {
white-space: wrap !important
}

13 Re: how to put this slider into my annoucement on Sat Aug 11, 2012 12:23 pm

medlsc


Registered Member
Registered Member
Good morning Ankillen Smile The problem still remains. Look the following picture. The text is cutted on the right side of the container.

http://med-lab-scietists.free-forums.biz/

14 Re: how to put this slider into my annoucement on Sat Aug 11, 2012 5:46 pm

ankillien


Administrator
Administrator
Hmmm... weird!

Try searching for this part in the slider code...

<div style="width: 100%; text-align: center; position: absolute; white-space: nowrap;">


and remove the bolded part from it. The problem should be fixed then.

15 Re: how to put this slider into my annoucement on Sat Aug 11, 2012 7:43 pm

medlsc


Registered Member
Registered Member
I don't find anything like than ankillien. Can i add a code to fix this problem.

http://med-lab-scietists.free-forums.biz/

16 Re: how to put this slider into my annoucement on Thu Aug 16, 2012 4:25 pm

ankillien


Administrator
Administrator
This code should fix it.

Code:
.fa_ticker_content > div {
white-space: wrap !important;
}


If it doesn't, there must be a problem with the javascript Wink

View previous topic View next topic Back to top  Message [Page 1 of 1]

WebArtz - The Web Design Forum » Web Designing & Coding » HTML (Hyper Text Markup Language) » how to put this slider into my annoucement

Permissions in this forum:
You cannot reply to topics in this forum