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

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 3:30 pm

medlsc

avatar
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

avatar
Administrator
Administrator
You can download the files and cods from here...
http://landofcoder.com/index.php?format=html&task=view.download&cid=6&Itemid=71&option=com_jdownloads

medlsc

avatar
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

avatar
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

5 Re: how to put this slider into my annoucement on Sat Aug 04, 2012 10:51 pm

medlsc

avatar
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

avatar
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.

7 Re: how to put this slider into my annoucement on Mon Aug 06, 2012 10:10 pm

medlsc

avatar
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/

8 Re: how to put this slider into my annoucement on Mon Aug 06, 2012 10:31 pm

ankillien

avatar
Administrator
Administrator
This CSS code would solve it...

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

medlsc

avatar
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 7:52 pm

ankillien

avatar
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 10:43 pm

medlsc

avatar
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 9:49 am

ankillien

avatar
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 1:53 pm

medlsc

avatar
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 7:16 pm

ankillien

avatar
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 9:13 pm

medlsc

avatar
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 5:55 pm

ankillien

avatar
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

Sponsored content


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

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