SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple Text Slider QUICK HELP

    Hello guys, i need a little help here.
    I'm totally inexperienced in Jquery and CSS but i'm usually a fast learner

    I downloaded the CODASLIDER (Coda-Slider_2.png) and transformed it: nowcs.jpg

    But I need it to stay that way, and i don't know how to do: aftersx.png

    Someone can help me?
    I already tried change CSS but i don't know how change Arrows and etc...

    I'll need to put the Jquery here on my site, I made a simulation by fireworks:

    Additionally, I leave here the link to download the coda slider modified if you want to take a look
    Thank you!

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,873
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    When I look at the index file in the .rar archive you posted, I see something that looks like screenshot two (where you say you've transformed it).
    So what exactly is your problem?
    Are you trying to style this to look like screenshot 3 (where you have the red navigation)?

  3. #3
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes pullo, i need transform screenshot 2 in screenshot 3 style but that was so hard and i found this example: http://www.sitepoint.com/forums/show...yle-Don-t-Work

    Maybe that can be more easily to style, what you think?

    In this case i just need change style from next and preview buttons and that will work perfectly

    Thanks bro!

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,873
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    The navigation arrow styles can be found in the coda-slider.css stylesheet, as of line 107.
    The HTML is inserted in the jquery.coda-slider-3.0.min.js.
    Search the file using a text editor for:

    HTML Code:
    <div class="coda-nav-left-arrow" data-dir="prev" title="Slide left"><a href="#"></a></div>
    as well as:

    HTML Code:
    <div class="coda-nav-right-arrow" data-dir="next" title="Slide right"><a href="#"></a></div>
    It will be easier for you to use the non-compressed version, however.

    If you open this file and scroll to the bottom, all of the options are listed there.

  5. #5
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks pullo, i done the job but i can't put in my opencart store
    Slider: http://upgradeloja.genesiseries.com/...tos/index.html

    I need incorporate this code:

    STYLE
    Code:
    	<style type="text/css" media="screen">
    		.slides_container {
    			width:244px;
    			display:none;
    		}
    
    		.slides_container div {
    			width:244px;
    			height:230px;
    			display:block;
    		}
    
    
    		.pagination {
    			list-style:none;
    			margin:0;
    			padding:0;
    			display:none;
    		}
    	</style>
    SCRIPTS
    Code:
    	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    	<script src="js/slides.min.jquery.js"></script>
    
    	<script>
    		$(function(){
    			$('#slides').slides({
    				preload: true,
    				generateNextPrev: true
    			});
    		});
    	</script>
    Divs:
    Code:
    	<div id="slides">
    		<div class="slides_container">
    			<div>
    				<p><font color="#bdbdbd">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</font></p>
    			</div>
    			<div>
    				<p><font color="#bdbdbd">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</font></p>
    			</div>
    			<div>
    				<p><font color="#bdbdbd">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</font></p>
    			</div>
    			<div>
    				<p><font color="#bdbdbd">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</font></p>
    			</div>
    		</div>
    	</div>
    But when i put all this in depoiment space just don't work
    The facebook fanbox work perfectly

    Facebook Script
    Code:
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    </script>
    Probably you don't know how opencart modules and themes work, but:

    This are the footer.tpl

    Code:
    <div id="custom-footer">
    <div class="set-size">
    	
    		<?php if ($this->config->get('about_us_status') == '1') : ?>
    		
    		<div class="grid-<?php echo 12 / $custom_footer_active_columns; ?> float-left">
    			
    			<h2><?php echo $this->config->get('about_us_header'); ?></h2>
    			
    			<p>
    			
    				<?php echo html_entity_decode($this->config->get('about_us_text')); ?>
    				
    			</p>
    		
    		</div>
    		
    		<?php endif; ?>
    That is the most important, admin/view/template/module/universal.tpl

    Code:
    		<!-- ABOUT US -/////////////////////////// -->
    		
    		<!-- Title Footer -->
    		
    		<div class="title-footer">
    			<div>
    				
    				<h3>About us</h3>
    				<?php $selected_disabled = false; $selected_enabled = false; if($about_us_status == 0) { $selected_disabled = ' selected="selected"'; } if($about_us_status == 1) { $selected_enabled = ' selected="selected"'; } ?>
    				<select name="about_us_status" style="width:272px"><option value="0"<?php echo $selected_disabled; ?>>Disabled</option><option value="1"<?php echo $selected_enabled; ?>>Enabled</option></select>
    				
    			</div>
    		</div>
    		
    		<div class="left" style="width:450px">
    		
    				<!-- Input -->
    				<div>
    				
    					<p>Header text</p>
    					<div class="input"><input type="text" value="<?php echo $about_us_header; ?>" id="about_us_header" name="about_us_header" style="width:251px;padding:2px 10px" /></div>
    				
    				</div>
    				<!-- End Input -->
    				<!-- Input -->
    				<div>
    				
    					<p>About text</p>
    					<div class="input"><textarea name="about_us_text" rows="10" cols="50" style="width:263px;height:250px;padding-top:10px"> <?php echo $about_us_text; ?></textarea></div>
    				
    				</div>
    				<!-- End Input -->
    		
    		</div>
    		
    		<!-- END ABOUT US ?///////////////////////////////////// -->
    Is there no way to mount the slider on another corner and pull only one table with the slider into the module with a simple command?
    Thanks!

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,873
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by isleno View Post
    Thanks pullo, i done the job but i can't put in my opencart store
    Slider: http://upgradeloja.genesiseries.com/...tos/index.html
    Well done. Looking good!

    Is there no way to mount the slider on another corner and pull only one table with the slider into the module with a simple command?
    Probably. Can you post a link where I can see what you are talking about?

  7. #7
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was thinking about create some table or frame in a simple page and call all that inside this table, have a command to do this? like a <?php echo
    How as said i tried put the style, script and divs where i want my slider but anything this worked, nothing appears, it's like if space were completely empty.

    I'm using opencart in my store, i don't know if this information helps but opencart uses MVC structure
    http://opencart-help.com/general/18-...tructured.html
    e s
    I already have a slider in Jquery (from my theme) and i know, i can put where i want my slider i just don't know do it.

    Thanks for all bro, any idea?

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,873
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    The MVC pattern will itself not affect where you can place elements on a page.
    However, I'm not familiar with the opencart framework, so I'm not sure of how many other factors are in play that can influence your page's layout.

    Can you post a link where I can see what you are talking about?

  9. #9
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bro, so... i discovered what was my problem.
    I was trying call <script src="js/slides.min.jquery.js"></script> and the correct was <script src="depoimentos/js/slides.min.jquery.js"></script>

    Now you can see all working there: http://upgradeloja.genesiseries.com

    But now i was thinking about to how improve my slider, as i will use my slider to show opinions from my clients i will need update them with a high frequently
    A good solution i found are create a SQL database and call with <? php echo.

    Take a look:

    There we will have 1 div, and two <p> ok?
    As you can see, first <p> are the opinion, where my client will can say anything.
    The second <p> display the name of my client and city - state

    HTML Code:
    <div>
    				<p class="depoimento"><font color="#bdbdbd">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</font></p><p class="cliente"><font color="#99CB1E">Paulo Henrique, So Paulo - SP</font></p>
    </div>
    I was wondering and this can be (where depo = opinion):

    PHP Code:
    <div>
                    <p class="depoimento"><font color="#bdbdbd"><?php echo ('depo')?></font></p><p class="client"><font color="#99CB1E"><?php echo ('client')?></font></p>
    </div>
    But we have a problem here.
    Using this method i also will need define every 'depo' and every 'client' and i will need put $depo1, $client1, $depo2, $client2 etc...
    And i need to pull from database, how to do?

    If i create my DB with 2 spaces, one called DEPO and other called client, we can use php to pull the text from DB
    But i need to RANDOM it.

    That will be like this:

    Code:
    <p class="depoimento">PHP SELECT A RANDOM CLIENT OPINION AND PULL</p><p class="cliente">PHP PULL NAME OF CLIENT OPINION</p>
    That can work?

    Thanks!

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,873
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by isleno View Post
    But we have a problem here.
    Using this method i also will need define every 'depo' and every 'client' and i will need put $depo1, $client1, $depo2, $client2 etc...
    And i need to pull from database, how to do?
    If you want to output a list of your clients and options just use some kind of loop.

    PHP Code:
    <?php 
      $clients 
    = array( array("rose"1), array( "daisy"2), array( "pete"3));
      for (
    $i0$size count($clients); $i$size$i++){
        echo(
    "<p class=\"depoimento\">$clients[i][1]</p><p class=\"cliente\">$clients[i][0]</p>");
      } 
    ?>

  11. #11
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry but i don't know how to use this code and what means rosa, daisy and pete?

    Will be easily use with mysql database, that way i will can include opinions quickly

    I was searching about how to randomize a text in mysql and this can be like:

    SELECT * FROM `sometable` WHERE 1 ORDER BY RAND() LIMIT 1;

    after random i just need print the text: <p class="depoimento">PRINT HERE</p>
    I just don't know how to do, some idea?

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,873
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by isleno View Post
    Sorry but i don't know how to use this code and what means rosa, daisy and pete?
    Sorry to confuse you. This was just an example of how you would iterate over an array of clients pulled from the database.

    Quote Originally Posted by isleno
    after random i just need print the text: <p class="depoimento">PRINT HERE</p>
    I just don't know how to do, some idea?
    Presuming you have the results stored in some kind of array, I would just iterate over that using for or foreach, as per my previous example.

    Hope that helps.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •