SitePoint Sponsor

User Tag List

Results 1 to 23 of 23
  1. #1
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Disappearing arrows

    Does anyone know why the left ( prev ) and right ( next ) arrow are not showing in the products slider here and why they do not slide when you click them?

    http://organicwebdesigns.co.uk/hmw-demo

  2. #2
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Right I've got the arrows up but howdo I get it to scroll? css? Javascrpt?

    What am I missing to get it to scroll across?

    Many thanks if you can help

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

    You can use either CSS or JavaScript to implement a slider.
    Both have advantages and disadvantages , although I personally would opt for JS.
    If you need any help, then make a slimed down example page (with just the slider on it) and I'll show you how.

  4. #4
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Great thanks!!!

    Is this ok?

    http://www.organicwebdesigns.co.uk/h.../?page_id=1907

    Can't wait to see how it goes

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

    Quote Originally Posted by hantaah View Post
    Yeah, not bad.
    However, you posted this:

    Code:
    <!DOCTYPE html>
    <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en-US"> <![endif]-->
    <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang="en-US"> <![endif]-->
    <!--[if IE 8]>         <html class="no-js lt-ie9" lang="en-US"> <![endif]-->
    <!--[if gt IE 8]><!--> <html class="no-js" lang="en-US"> <!--<![endif]-->
    <head>
    
    
        <meta charset="utf-8">
    
        <title>
              Slider    </title>
        <link rel="icon" type="image/png" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/tree_favico1.ico">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
        <!--[if lte IE 9]>
            <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    
    
        <link rel="alternate" type="application/rss+xml" title="Health Means Wealth Feed" href="http://www.organicwebdesigns.co.uk/hmw-demo/feed/">
    
        <link href='//fonts.googleapis.com/css?family=Abel:200,300,400,600,700,200italic,300italic,400italic,600italic,700italic&subset=latin,cyrillic' rel='stylesheet' type='text/css'><link href='//fonts.googleapis.com/css?family=Abel:200,300,400,600,700,200italic,300italic,400italic,600italic,700italic&subset=latin,cyrillic' rel='stylesheet' type='text/css'><link href='//fonts.googleapis.com/css?family=Oregano:200,300,400,600,700,200italic,300italic,400italic,600italic,700italic&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
        
    	<link rel="alternate" type="application/rss+xml" title="Health Means Wealth Feed" href="http://www.organicwebdesigns.co.uk/hmw-demo/feed/">
    <link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/LayerSlider/css/layerslider.css?ver=4.5.1">
    <link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/sidebar-login/assets/css/sidebar-login.css?ver=2.5.2">
    <link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/siteorigin-panels/css/front.css?ver=1.1.1">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oregano:400,400italic|Hammersmith+One:400">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto+Condensed%3A300%2C400%2C700&subset=latin&ver=3.5.1">
    <link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/woocommerce/assets/css/woocommerce.css?ver=3.5.1">
    <link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/css/foundation.min.css">
    <link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/css/app.css">
    <link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/css/jquery.isotope.css">
    <link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/css/flexslider.css">
    <link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/css/responsive.css">
    <link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/css/prettyPhoto.css">
    <link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/css/options.css">
    <script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
    <script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/LayerSlider/js/layerslider.kreaturamedia.jquery.js?ver=4.5.1'></script>
    <script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/LayerSlider/js/jquery-easing-1.3.js?ver=1.3.0'></script>
    <script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/LayerSlider/js/jquerytransit.js?ver=0.9.9'></script>
    <script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/LayerSlider/js/layerslider.transitions.js?ver=4.5.1'></script>
    <script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/sidebar-login/assets/js/blockui.min.js?ver=2.57'></script>
    <script type='text/javascript'>
    /* <![CDATA[ */
    var sidebar_login_params = {"ajax_url":"http:\/\/www.organicwebdesigns.co.uk\/hmw-demo\/wp-admin\/admin-ajax.php","login_nonce":"8e12c9bffc","force_ssl_login":"0","force_ssl_admin":"0","is_ssl":"0","i18n_username_required":"Please enter your username","i18n_password_required":"Please enter your password","error_class":"sidebar_login_error"};
    /* ]]> */
    </script>
    <script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/sidebar-login/assets/js/sidebar-login.min.js?ver=2.5.2'></script>
    <script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/js/retina.js'></script>
    <link rel='canonical' href='http://www.organicwebdesigns.co.uk/hmw-demo/?page_id=1907' />
    
    <script type="text/javascript">
    
        jQuery(document).ready(function () {
    
            var menu_speed = 'slow';
            var animation_effect = 'slide_down';
    
    		jQuery("nav#top-menu > ul > li > ul").hide();
    
            var windowWidth = jQuery(window).width();
    
            jQuery(window).resize(function() {
                //jQuery("nav#top-menu > ul > li > ul").hide();
                windowWidth = jQuery(window).width();
                //alert(windowWidth);
            }).resize();
    
                    jQuery("nav#top-menu > ul > li").hover(function () {
    
                        if (animation_effect == 'fade_in')
                            jQuery('ul', this).stop(true, true).fadeIn(menu_speed);
    
                        if (animation_effect == 'slide_down')
                            jQuery('ul', this).stop(true, true).slideDown(menu_speed);
    
    
                    }, function () {
    
                        if (animation_effect == 'fade_in')
                            jQuery('ul', this).stop(true, true).fadeOut(menu_speed);
    
                        if (animation_effect == 'slide_down')
                            jQuery('ul', this).stop(true, true).slideUp(menu_speed);
    
                    });
    
    
            jQuery('nav#top-menu > ul > li').mouseleave(function() {
                jQuery("nav#top-menu > ul > li > ul").hide();
            });
                    jQuery(".menu-item-wrap").hover(function () {
                if(jQuery(this).parent("li").hasClass("current-menu-item"))
                    jQuery(this).parent("li").addClass("was_active");
                else
                    jQuery(this).parent("li").addClass("current-menu-item");
    
                jQuery("img.active-icon", this).css("display", "inline");
                jQuery("img.normal-icon", this).css("display", "none");
    
            }, function () {
                if(!jQuery(this).parent("li").hasClass("was_active"))
                    jQuery(this).parent("li").removeClass("current-menu-item");
                jQuery("img.active-icon", this).css("display", "none");
                jQuery("img.normal-icon", this).css("display", "inline");
            });
    
            
        });
    
    
    </script>
    
    <style type='text/css' media='screen'>
    	h1{ font-family:"Oregano", arial, sans-serif;}
    	h2{ font-family:"Oregano", arial, sans-serif;}
    	h3{ font-family:"Oregano", arial, sans-serif;}
    	#top-menu .link-text { font-family: 'oregano', sans-serif; font-weight: 600; font-size: 18px; }
    	h4{ font-family:"Hammersmith One", arial, sans-serif;}
    	h5{ font-family:"Hammersmith One", arial, sans-serif;}
    	h6{ font-family:"Hammersmith One", arial, sans-serif;}
    	blockquote{ font-family:"Hammersmith One", arial, sans-serif;}
    	p{ font-family:"Hammersmith One", arial, sans-serif;}
    	li{ font-family:"Hammersmith One", arial, sans-serif;}
    </style>
    <!-- fonts delivered by Wordpress Google Fonts, a plugin by Adrian3.com -->
    
    <!-- WooCommerce Version -->
    <meta name="generator" content="WooCommerce 2.0.8" />
    
        <script type="text/javascript" src="https://d1xnn692s7u6t6.cloudfront.net/widget.js"></script>
        <script type="text/javascript">(function k(){window.$SendToKindle&&window.$SendToKindle.Widget?$SendToKindle.Widget.init({}):setTimeout(k,500);})();</script>
    
    </head>
    
    <body class="page page-id-1907 page-template page-template-page-custom-php siteorigin-panels ?page_id=1907 wpb-js-composer js-comp-ver-3.5.5 vc_responsive" >
    
    
    <div id="change_wrap_div" class="  ">
    
    
        
        
    
    <section id="header"  >
    
    <div class="row">
    
        <div class="twelve columns">
    
            <div id="logo">            <a href="http://www.organicwebdesigns.co.uk/hmw-demo/"><img src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/HealthisWealth_opt04.2-420x105.png" alt="Health Means Wealth"></a>
                </div>
            <a href="#" class="top-menu-button"></a>
    
            <nav id="top-menu" class="fake"><ul id="menu-primary-nav" class="menu"><li id='primary-nav-1808'><span class="menu-item-wrap no_icon"><a  href="http://www.organicwebdesigns.co.uk/hmw-demo/?page_id=62" style=""><span class="link-text">Home</span></a></span><div class='under'></div></li>
    <li class="has-submenu" id='primary-nav-1819'><span class="menu-item-wrap no_icon"><a  href="http://www.organicwebdesigns.co.uk/hmw-demo/?page_id=863" style=""><span class="link-text">Contacts</span></a></span><ul style="width: 1000px; display: none;">
                <li class="has-submenu">
                <div class="menu-item-wrap" style="padding:9px 10px 8px 20px;">
                <div class="mega-text"><div class="wpb_row vc_row-fluid "> 
    	<div class="vc_span8 wpb_column column_container">
    		<div class="wpb_wrapper">
    			 
    	<div class="wpb_gmaps_widget wpb_content_element">
    		<div class="wpb_wrapper"><div class="wpb_map_wraper"><iframe width="100%" height="200" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.ru/?ll=55.674487,37.762756&amp;spn=0.662101,2.113495&amp;t=m&amp;z=10&amp;t=m&amp;z=14&amp;output=embed"></iframe></div>
    		</div> 
    	</div>  
    	<div class="wpb_text_column wpb_content_element ">
    		<div class="wpb_wrapper">
    			
    <h3><em>OUR CONTACT INFO</em></h3>
    <hr />
    <p><strong>Address:</strong> <span style="color: #808080;"> PO BOX 2870, Purley, Surrey,</span> <strong> Country</strong>: UK <strong> Telephone</strong>:<span style="color: #808080;"> 020 8660 2792 ( Surrey Office );</span> <strong>or</strong>: <span style="color: #808080;">01283 226197 ( Derbyshire office );</span> <strong>or</strong>: <span style="color: #808080;">07808 275444 ( Mobile, general &amp; order enquiries );</span> <strong>or</strong>: <span style="color: #808080;">07897 799691 ( Mobile, sisters only );</span> <strong>Email:</strong><span style="text-decoration: underline; color: #50b4e6;"><span style="text-decoration: underline;"> enquiries@healthmeanswealth.co.uk</span></span></p>
    <h3></h3>
    
    		</div> 
    	</div>  
    		</div> 
    	</div> 
     
    	<div class="vc_span4 wpb_column column_container">
    		<div class="wpb_wrapper">
    			 
    	<div class="wpb_text_column wpb_content_element ">
    		<div class="wpb_wrapper">
    			
    <h3><em>Health Means Wealth</em></h3>
    <hr />
    <ul class="styled-list">
    <li>
    <h5><span style="text-decoration: underline; color: #808080;"><span style="text-decoration: underline;"><span style="color: #808080; text-decoration: underline;">The Original Sunnah Remedy Site</span></span></span></h5>
    </li>
    <li>
    <h5><span style="text-decoration: underline; color: #808080;"><span style="text-decoration: underline;"><span style="color: #808080; text-decoration: underline;">Online store for natural medicine</span></span></span></h5>
    </li>
    <li>
    <h5><span style="text-decoration: underline; color: #808080;"><span style="text-decoration: underline;"><span style="color: #808080; text-decoration: underline;">Authentic sources for knowledge</span></span></span></h5>
    </li>
    <li>
    <h5><span style="text-decoration: underline; color: #808080;"><span style="text-decoration: underline;"><span style="color: #808080; text-decoration: underline;">Courses and events available</span></span></span></h5>
    </li>
    </ul>
    
    		</div> 
    	</div>  
    	<div class="wpb_text_column wpb_content_element ">
    		<div class="wpb_wrapper">
    			
    <h3><em>A FEW WORDS ABOUT US</em></h3>
    <hr />
    <p><span style="color: #808080;">Lorem ipsum dolor sit amet, noluisse forensibus eu sea, mea mutat movet appareat et, at quo vero dissentiunt definitiones. Labore facilisis eam ei. An mea homero offendit, mea mucius appellantur id. Dicat tation nominati ea vix, vis ne appetere salutatus.</span></p>
    
    		</div> 
    	</div>  
    		</div> 
    	</div> 
     </div>
    </div></div></li>
                </ul><div class='under'></div></li>
    <li class="has-submenu" id='primary-nav-1809'><span class="menu-item-wrap no_icon"><a  href="http://www.organicwebdesigns.co.uk/hmw-demo/?page_id=1791" style=""><span class="link-text">Articles</span></a></span><ul style="width: px; display: none;">
                <li class="has-submenu">
                <div class="menu-item-wrap" style="padding:9px 10px 8px 20px;">
                <div class="mega-text"><p>Allah Is The Curer</p>
    <p>The Quran</p>
    <p>Blackseed</p>
    <p>Costus</p>
    <p>Cupping ( Hijamah )</p>
    <p>Dates</p>
    <p>Ghee</p>
    <p>Hennah</p>
    <p>Honey</p>
    <p>Katam</p>
    <p>Kohl Ihmid</p>
    <p>Misk</p>
    <p>Miswak</p>
    <p>&nbsp;</p>
    </div></div></li>
                </ul><div class='under'></div></li>
    <li id='primary-nav-1810'><span class="menu-item-wrap no_icon"><a  href="http://www.organicwebdesigns.co.uk/hmw-demo/?page_id=15" style=""><span class="link-text">Blog page</span></a></span><div class='under'></div></li>
    <li id='primary-nav-1811'><span class="menu-item-wrap no_icon"><a  href="http://www.organicwebdesigns.co.uk/hmw-demo/?page_id=518" style=""><span class="link-text">Shop</span></a></span><div class='under'></div></li>
    <li id='primary-nav-1805'><span class="menu-item-wrap no_icon"><a  href="http://www.organicwebdesigns.co.uk/hmw-demo/?page_id=1804" style=""><span class="link-text">Newsletter</span></a></span><div class='under'></div></li>
    </ul></nav>
    
            <form role="search" method="get" id="searchform" class="form-search" action="http://www.organicwebdesigns.co.uk/hmw-demo/">
                <label class="hide" for="s">Search for:</label>
                <input type="text" value="" name="s" id="s" class="s-field" placeholder="Enter request...">
                <input type="submit" id="searchsubmit" value=" " class="s-submit">
            </form>
    
            </div>
    
            <div class="twelve columns">
                <div class="head-bott">
    
                    <div class="soc-head-icons">
    
                        <a href="http://www.facebook.com/permalink.php?id=244035225714055&story_fbid=160582304107252" class="fb" title="Facebook">Facebook</a><a href="https://accounts.google.com/" class="gp" title="Google +">Google +</a><a href="https://twitter.com/HealthmnsWealth" class="tw" title="Twitter">Twitter</a><a href="http://dribble.com" class="dr" title="Dribble">Dribble</a><a href="http://linkedin.com" class="li" title="LinkedIN">LinkedIN</a>                </div>
                </div>
            </div>
    
        </div>
    
    </section>
            
    
    <section id="layout">
        <div class="row">
            <div class="twelve columns">
    
            
      <div id="et-product-slider">
    <div class="et-carousel-wrapper">
    <ul class="clearfix" style="width: 1764px; left: 0px;">
    <li class="et-product">
    						<a href="#"><img width="220" height="9999" alt="Product 1" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png"></a></p>
    <h3><a href="#">Product 1</a></h3>
    <div class="et-price-button">
    							<span class="et-price-sale"><span class="amount"><span class="lighter"></span>10</span></span>
    						</div>
    </li>
    <li class="et-product">
    						<a href="#"><img width="220" height="9999" alt="product 2" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png"></a></p>
    <h3><a href="#">Product 2</a></h3>
    <div class="et-price-button">
    							<span class="et-price-sale"><span class="amount"><span class="lighter"></span>29</span></span>
    						</div>
    </li>
    <li class="et-product">
    						<a href="http://organicwebdesigns.co.uk"><img width="220" height="9999" alt="Product 3" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png"></a></p>
    <h3><a href="http://organicwebdesigns.co.uk">Product 3</a></h3>
    <div class="et-price-button">
    							<span class="et-price-sale"><span class="amount"><span class="lighter"></span>19</span></span>
    						</div>
    </li>
    <li class="et-product">
    						<a href="http://organicwebdesigns.co.uk"><img width="220" height="9999" alt="Product 4" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png"></a></p>
    <h3><a href="http://organicwebdesigns.co.uk/">Product 4</a></h3>
    <div class="et-price-button">
    							<span class="et-price-sale"><span class="amount"><span class="lighter"></span>39</span></span>
    						</div>
    </li>
    <li class="et-product">
    						<a href="http://organicwebdesigns.co.uk"><img width="220" height="9999" alt="Product 5" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png"></a></p>
    <h3><a href="http://organicwebdesigns.co.uk">Product 6</a></h3>
    <div class="et-price-button">
    							<span class="et-price-sale"><span class="amount"><span class="lighter"></span>29</span></span>
    						</div>
    </li>
    <li class="et-product">
    						<a href="http://organicwebdesigns.co.uk"><img width="220" height="9999" alt="Product 7" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png"></a></p>
    <h3><a href="http://organicwebdesigns.co.uk">Product 7</a></h3>
    <div class="et-price-button">
    							<span class="et-price-sale"><span class="amount"><span class="lighter"></span>39</span></span>
    						</div>
    </li>
    </ul></div>
    <p> <!-- .et-carousel-wrapper --></p>
    <div class="et-slider-arrows"><a href="#" class="et-arrow-prev"><span>Previous</span></a><a href="#" class="et-arrow-next"><span>Next</span></a></div>
    </div>
      
            </div>
        </div>
    </section>
        <section id="footer">
        <div class="row">
            <div class="four columns">
                <section id="crum-text-widget-2" class="widget widget_crum-text-widget"><div class="title"><h3>Time & Date</h3></div>tba</section>        </div>
            <div class="four columns">
                <section id="wp_sidebarlogin-2" class="widget widget_wp_sidebarlogin"><div class="title"><h3>Login</h3></div>
    		<form name="loginform" id="loginform" action="http://www.organicwebdesigns.co.uk/hmw-demo/wp-login.php" method="post">
    			
    			<p class="login-username">
    				<label for="user_login">Username</label>
    				<input type="text" name="log" id="user_login" class="input" value="" size="20" />
    			</p>
    			<p class="login-password">
    				<label for="user_pass">Password</label>
    				<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" />
    			</p>
    			
    			<p class="login-remember"><label><input name="rememberme" type="checkbox" id="rememberme" value="forever" checked="checked" /> Remember Me</label></p>
    			<p class="login-submit">
    				<input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="Login &rarr;" />
    				<input type="hidden" name="redirect_to" value="http://www.organicwebdesigns.co.uk/hmw-demo/?page_id=1907" />
    			</p>
    			
    		</form><ul class="pagenav sidebar_login_links"><li class="lost_password-link"><a href="http://www.organicwebdesigns.co.uk/hmw-demo/?page_id=1797">Lost Password</a></li></ul></section>        </div>
            <div class="four columns">
                
    <section class="widget">
        <div class="follow-widget">
    
                        <a href="http://organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/feed.rss"  class="rss">
                    <img class="icon" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/img/share/rss.png" alt="ico">
                    <span class="number">Subscribe</span>
                    <span class="text">To RSS Feed</span>
                </a>
                    
                    <a href="http://www.facebook.com" class="fb">
                <img class="icon" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/img/share/fb.png" alt="ico">
    
                <span class="number">0</span>
                <span class="text">fans</span>
            </a>
            
                    <a href="http://www.youtube.com" class="yt">
                <img class="icon" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/img/share/youtube.png" alt="ico">
    
                <span class="number">0</span>
                <span class="text">followers</span>
            </a>
                            <a href="http://vimeo.com" class="vi">
                <img class="icon" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/img/share/vimeo.png" alt="ico">
    
                <span class="number">0</span>
                <span class="text">subscribers</span>
            </a>
                    
            <a href="http://www.dribble.com" class="dr">
                <img class="icon" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/img/share/dribble.png" alt="ico">
    
                <span class="number">0</span>
                <span class="text">followers</span>
            </a>
            
        </div>
    
            </section>
    
                </div>
        </div>
    </section><section id="sub-footer">
        <div class="row">
            <div class="six mobile-two columns copyr">
                 Health Means Wealth 2013        </div>
            <div class="six mobile-two columns">
    
                
            </div>
        </div>
    </section>
    
    
    
    <a href="#" id="linkTop" class="backtotop"></a>
    
    </div>
    
    $.fn.et_carousel_slider = function( options ) {
    		var settings = $.extend( {
    			slide 					: 'li',				 			// slide class
    			arrows					: '.et-slider-arrows',			// arrows container class
    			prev_arrow				: '.et-arrow-prev',				// left arrow class
    			next_arrow				: '.et-arrow-next',				// right arrow class
    			scroll_speed			: 500,							// fade effect speed
    			use_arrows				: true,							// use arrows?
    			manual_arrows			: ''							// html code for custom arrows
    		}, options );
    
    		return this.each( function() {
    			var $et_slider 				= $(this),
    				$et_slider_wrapper		= $et_slider.find( 'ul' ),
    				$et_slide				= $et_slider.find( settings.slide ),
    				et_slides_number		= $et_slide.length,
    				et_scroll_speed			= settings.scroll_speed,
    				et_active_slide			= 1,
    				et_slider_total_width	= $et_slide.innerWidth() * et_slides_number,
    				modifier				= 3,
    				container_width			= $('#container').width(),
    				et_is_animated			= false;
    
    			$et_slider_wrapper.width( et_slider_total_width );
    
    			if ( settings.use_arrows && et_slides_number > 1 ) {
    				if ( settings.manual_arrows == '' )
    					$et_slider.append( '<div class="et-slider-arrows"><a class="et-arrow-prev" href="#">' + settings.previous_text + '</a><a class="et-arrow-next" href="#">' + settings.next_text + '</a></div>' );
    				else
    					$et_slider.append( settings.manual_arrows );
    
    				// show slider arrows on mobile devices only, if we have less than 4 slides
    				if ( et_slides_number < 4 ) $et_slider.addClass( 'et_only_mobile_arrows' );
    
    				$et_slider_arrows 	= $( settings.arrows );
    				$et_slider_prev 	= $et_slider.find( settings.prev_arrow );
    				$et_slider_next 	= $et_slider.find( settings.next_arrow );
    
    				$et_slider_next.click( function(){
    					if ( et_is_animated ) return false;
    
    					et_slider_move_to( 'next' );
    
    					return false;
    				} );
    
    				$et_slider_prev.click( function(){
    					if ( et_is_animated ) return false;
    
    					et_slider_move_to( 'previous' );
    
    					return false;
    				} );<link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/crumina_slider/css/crumina_slider.css?ver=3.6.2">
    <link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/css/crumina_menu.css?ver=3.5.1">
    <link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/js_composer/assets/css/js_composer_front.css?ver=3.5.5">
    <script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart.min.js?ver=2.0.8'></script>
    <script type='text/javascript'>
    /* <![CDATA[ */
    var woocommerce_params = {"countries":"{\"AF\":[],\"AT\":[],\"BE\":[],\"BI\":[],\"CZ\":[],\"DE\":[],\"DK\":[],\"FI\":[],\"FR\":[],\"HU\":[],\"IS\":[],\"IL\":[],\"KR\":[],\"NL\":[],\"NO\":[],\"PL\":[],\"PT\":[],\"SG\":[],\"SK\":[],\"SI\":[],\"LK\":[],\"SE\":[],\"VN\":[],\"AU\":{\"ACT\":\"Australian Capital Territory\",\"NSW\":\"New South Wales\",\"NT\":\"Northern Territory\",\"QLD\":\"Queensland\",\"SA\":\"South Australia\",\"TAS\":\"Tasmania\",\"VIC\":\"Victoria\",\"WA\":\"Western Australia\"},\"BR\":{\"AC\":\"Acre\",\"AL\":\"Alagoas\",\"AP\":\"Amap\u00e1\",\"AM\":\"Amazonas\",\"BH\":\"Bahia\",\"CE\":\"Cear\u00e1\",\"DF\":\"Distrito Federal\",\"ES\":\"Esp\u00edrito Santo\",\"GO\":\"Goi\u00e1s\",\"MA\":\"Maranh\u00e3o\",\"MT\":\"Mato Grosso\",\"MS\":\"Mato Grosso do Sul\",\"MG\":\"Minas Gerais\",\"PA\":\"Par\u00e1\",\"PB\":\"Para\u00edba\",\"PR\":\"Paran\u00e1\",\"PE\":\"Pernambuco\",\"PI\":\"Piau\u00ed\",\"RJ\":\"Rio de Janeiro\",\"RN\":\"Rio Grande do Norte\",\"RS\":\"Rio Grande do Sul\",\"RO\":\"Rond\u00f4nia\",\"RR\":\"Roraima\",\"SC\":\"Santa Catarina\",\"SP\":\"S\u00e3o Paulo\",\"SE\":\"Sergipe\",\"TO\":\"Tocantins\"},\"CA\":{\"AB\":\"Alberta\",\"BC\":\"British Columbia\",\"MB\":\"Manitoba\",\"NB\":\"New Brunswick\",\"NF\":\"Newfoundland\",\"NT\":\"Northwest Territories\",\"NS\":\"Nova Scotia\",\"NU\":\"Nunavut\",\"ON\":\"Ontario\",\"PE\":\"Prince Edward Island\",\"QC\":\"Quebec\",\"SK\":\"Saskatchewan\",\"YT\":\"Yukon Territory\"},\"CN\":{\"CN1\":\"Yunnan \\\/ \u4e91\u5357\",\"CN2\":\"Beijing \\\/ \u5317\u4eac\",\"CN3\":\"Tianjin \\\/ \u5929\u6d25\",\"CN4\":\"Hebei \\\/ \u6cb3\u5317\",\"CN5\":\"Shanxi \\\/ \u5c71\u897f\",\"CN6\":\"Inner Mongolia \\\/ \u5167\u8499\u53e4\",\"CN7\":\"Liaoning \\\/ \u8fbd\u5b81\",\"CN8\":\"Jilin \\\/ \u5409\u6797\",\"CN9\":\"Heilongjiang \\\/ \u9ed1\u9f99\u6c5f\",\"CN10\":\"Shanghai \\\/ \u4e0a\u6d77\",\"CN11\":\"Jiangsu \\\/ \u6c5f\u82cf\",\"CN12\":\"Zhejiang \\\/ \u6d59\u6c5f\",\"CN13\":\"Anhui \\\/ \u5b89\u5fbd\",\"CN14\":\"Fujian \\\/ \u798f\u5efa\",\"CN15\":\"Jiangxi \\\/ \u6c5f\u897f\",\"CN16\":\"Shandong \\\/ \u5c71\u4e1c\",\"CN17\":\"Henan \\\/ \u6cb3\u5357\",\"CN18\":\"Hubei \\\/ \u6e56\u5317\",\"CN19\":\"Hunan \\\/ \u6e56\u5357\",\"CN20\":\"Guangdong \\\/ \u5e7f\u4e1c\",\"CN21\":\"Guangxi Zhuang \\\/ \u5e7f\u897f\u58ee\u65cf\",\"CN22\":\"Hainan \\\/ \u6d77\u5357\",\"CN23\":\"Chongqing \\\/ \u91cd\u5e86\",\"CN24\":\"Sichuan \\\/ \u56db\u5ddd\",\"CN25\":\"Guizhou \\\/ \u8d35\u5dde\",\"CN26\":\"Shaanxi \\\/ \u9655\u897f\",\"CN27\":\"Gansu \\\/ \u7518\u8083\",\"CN28\":\"Qinghai \\\/ \u9752\u6d77\",\"CN29\":\"Ningxia Hui \\\/ \u5b81\u590f\",\"CN30\":\"Macau \\\/ \u6fb3\u95e8\",\"CN31\":\"Tibet \\\/ \u897f\u85cf\",\"CN32\":\"Xinjiang \\\/ \u65b0\u7586\"},\"HK\":{\"HONG KONG\":\"Hong Kong Island\",\"KOWLOON\":\"Kowloon\",\"NEW TERRITORIES\":\"New Territories\"},\"IN\":{\"AP\":\"Andra Pradesh\",\"AR\":\"Arunachal Pradesh\",\"AS\":\"Assam\",\"BR\":\"Bihar\",\"CT\":\"Chhattisgarh\",\"GA\":\"Goa\",\"GJ\":\"Gujarat\",\"HR\":\"Haryana\",\"HP\":\"Himachal Pradesh\",\"JK\":\"Jammu and Kashmir\",\"JH\":\"Jharkhand\",\"KA\":\"Karnataka\",\"KL\":\"Kerala\",\"MP\":\"Madhya Pradesh\",\"MH\":\"Maharashtra\",\"MN\":\"Manipur\",\"ML\":\"Meghalaya\",\"MZ\":\"Mizoram\",\"NL\":\"Nagaland\",\"OR\":\"Orissa\",\"PB\":\"Punjab\",\"RJ\":\"Rajasthan\",\"SK\":\"Sikkim\",\"TN\":\"Tamil Nadu\",\"TR\":\"Tripura\",\"UT\":\"Uttaranchal\",\"UP\":\"Uttar Pradesh\",\"WB\":\"West Bengal\",\"AN\":\"Andaman and Nicobar Islands\",\"CH\":\"Chandigarh\",\"DN\":\"Dadar and Nagar Haveli\",\"DD\":\"Daman and Diu\",\"DL\":\"Delhi\",\"LD\":\"Lakshadeep\",\"PY\":\"Pondicherry (Puducherry)\"},\"ID\":{\"AC\":\"Daerah Istimewa Aceh\",\"SU\":\"Sumatera Utara\",\"SB\":\"Sumatera Barat\",\"RI\":\"Riau\",\"KR\":\"Kepulauan Riau\",\"JA\":\"Jambi\",\"SS\":\"Sumatera Selatan\",\"BB\":\"Bangka Belitung\",\"BE\":\"Bengkulu\",\"LA\":\"Lampung\",\"JK\":\"DKI Jakarta\",\"JB\":\"Jawa Barat\",\"BT\":\"Banten\",\"JT\":\"Jawa Tengah\",\"JI\":\"Jawa Timur\",\"YO\":\"Daerah Istimewa Yogyakarta\",\"BA\":\"Bali\",\"NB\":\"Nusa Tenggara Barat\",\"NT\":\"Nusa Tenggara Timur\",\"KB\":\"Kalimantan Barat\",\"KT\":\"Kalimantan Tengah\",\"KI\":\"Kalimantan Timur\",\"KS\":\"Kalimantan Selatan\",\"KU\":\"Kalimantan Utara\",\"SA\":\"Sulawesi Utara\",\"ST\":\"Sulawesi Tengah\",\"SG\":\"Sulawesi Tenggara\",\"SR\":\"Sulawesi Barat\",\"SN\":\"Sulawesi Selatan\",\"GO\":\"Gorontalo\",\"MA\":\"Maluku\",\"MU\":\"Maluku Utara\",\"PA\":\"Papua\",\"PB\":\"Papua Barat\"},\"MY\":{\"JHR\":\"Johor\",\"KDH\":\"Kedah\",\"KTN\":\"Kelantan\",\"MLK\":\"Melaka\",\"NSN\":\"Negeri Sembilan\",\"PHG\":\"Pahang\",\"PRK\":\"Perak\",\"PLS\":\"Perlis\",\"PNG\":\"Pulau Pinang\",\"SBH\":\"Sabah\",\"SWK\":\"Sarawak\",\"SGR\":\"Selangor\",\"TRG\":\"Terengganu\",\"KUL\":\"W.P. Kuala Lumpur\",\"LBN\":\"W.P. Labuan\",\"PJY\":\"W.P. Putrajaya\"},\"NZ\":{\"NL\":\"Northland\",\"AK\":\"Auckland\",\"WA\":\"Waikato\",\"BP\":\"Bay of Plenty\",\"TK\":\"Taranaki\",\"HB\":\"Hawke\u2019s Bay\",\"MW\":\"Manawatu-Wanganui\",\"WE\":\"Wellington\",\"NS\":\"Nelson\",\"MB\":\"Marlborough\",\"TM\":\"Tasman\",\"WC\":\"West Coast\",\"CT\":\"Canterbury\",\"OT\":\"Otago\",\"SL\":\"Southland\"},\"ZA\":{\"EC\":\"Eastern Cape\",\"FS\":\"Free State\",\"GP\":\"Gauteng\",\"KZN\":\"KwaZulu-Natal\",\"LP\":\"Limpopo\",\"MP\":\"Mpumalanga\",\"NC\":\"Northern Cape\",\"NW\":\"North West\",\"WC\":\"Western Cape\"},\"TH\":{\"TH-37\":\"Amnat Charoen (\u0e2d\u0e33\u0e19\u0e32\u0e08\u0e40\u0e08\u0e23\u0e34\u0e0d)\",\"TH-15\":\"Ang Thong (\u0e2d\u0e48\u0e32\u0e07\u0e17\u0e2d\u0e07)\",\"TH-14\":\"Ayutthaya (\u0e1e\u0e23\u0e30\u0e19\u0e04\u0e23\u0e28\u0e23\u0e35\u0e2d\u0e22\u0e38\u0e18\u0e22\u0e32)\",\"TH-10\":\"Bangkok (\u0e01\u0e23\u0e38\u0e07\u0e40\u0e17\u0e1e\u0e21\u0e2b\u0e32\u0e19\u0e04\u0e23)\",\"TH-38\":\"Bueng Kan (\u0e1a\u0e36\u0e07\u0e01\u0e32\u0e2c)\",\"TH-31\":\"Buri Ram (\u0e1a\u0e38\u0e23\u0e35\u0e23\u0e31\u0e21\u0e22\u0e4c)\",\"TH-24\":\"Chachoengsao (\u0e09\u0e30\u0e40\u0e0a\u0e34\u0e07\u0e40\u0e17\u0e23\u0e32)\",\"TH-18\":\"Chai Nat (\u0e0a\u0e31\u0e22\u0e19\u0e32\u0e17)\",\"TH-36\":\"Chaiyaphum (\u0e0a\u0e31\u0e22\u0e20\u0e39\u0e21\u0e34)\",\"TH-22\":\"Chanthaburi (\u0e08\u0e31\u0e19\u0e17\u0e1a\u0e38\u0e23\u0e35)\",\"TH-50\":\"Chiang Mai (\u0e40\u0e0a\u0e35\u0e22\u0e07\u0e43\u0e2b\u0e21\u0e48)\",\"TH-57\":\"Chiang Rai (\u0e40\u0e0a\u0e35\u0e22\u0e07\u0e23\u0e32\u0e22)\",\"TH-20\":\"Chonburi (\u0e0a\u0e25\u0e1a\u0e38\u0e23\u0e35)\",\"TH-86\":\"Chumphon (\u0e0a\u0e38\u0e21\u0e1e\u0e23)\",\"TH-46\":\"Kalasin (\u0e01\u0e32\u0e2c\u0e2a\u0e34\u0e19\u0e18\u0e38\u0e4c)\",\"TH-62\":\"Kamphaeng Phet (\u0e01\u0e33\u0e41\u0e1e\u0e07\u0e40\u0e1e\u0e0a\u0e23)\",\"TH-71\":\"Kanchanaburi (\u0e01\u0e32\u0e0d\u0e08\u0e19\u0e1a\u0e38\u0e23\u0e35)\",\"TH-40\":\"Khon Kaen (\u0e02\u0e2d\u0e19\u0e41\u0e01\u0e48\u0e19)\",\"TH-81\":\"Krabi (\u0e01\u0e23\u0e30\u0e1a\u0e35\u0e48)\",\"TH-52\":\"Lampang (\u0e25\u0e33\u0e1b\u0e32\u0e07)\",\"TH-51\":\"Lamphun (\u0e25\u0e33\u0e1e\u0e39\u0e19)\",\"TH-42\":\"Loei (\u0e40\u0e25\u0e22)\",\"TH-16\":\"Lopburi (\u0e25\u0e1e\u0e1a\u0e38\u0e23\u0e35)\",\"TH-58\":\"Mae Hong Son (\u0e41\u0e21\u0e48\u0e2e\u0e48\u0e2d\u0e07\u0e2a\u0e2d\u0e19)\",\"TH-44\":\"Maha Sarakham (\u0e21\u0e2b\u0e32\u0e2a\u0e32\u0e23\u0e04\u0e32\u0e21)\",\"TH-49\":\"Mukdahan (\u0e21\u0e38\u0e01\u0e14\u0e32\u0e2b\u0e32\u0e23)\",\"TH-26\":\"Nakhon Nayok (\u0e19\u0e04\u0e23\u0e19\u0e32\u0e22\u0e01)\",\"TH-73\":\"Nakhon Pathom (\u0e19\u0e04\u0e23\u0e1b\u0e10\u0e21)\",\"TH-48\":\"Nakhon Phanom (\u0e19\u0e04\u0e23\u0e1e\u0e19\u0e21)\",\"TH-30\":\"Nakhon Ratchasima (\u0e19\u0e04\u0e23\u0e23\u0e32\u0e0a\u0e2a\u0e35\u0e21\u0e32)\",\"TH-60\":\"Nakhon Sawan (\u0e19\u0e04\u0e23\u0e2a\u0e27\u0e23\u0e23\u0e04\u0e4c)\",\"TH-80\":\"Nakhon Si Thammarat (\u0e19\u0e04\u0e23\u0e28\u0e23\u0e35\u0e18\u0e23\u0e23\u0e21\u0e23\u0e32\u0e0a)\",\"TH-55\":\"Nan (\u0e19\u0e48\u0e32\u0e19)\",\"TH-96\":\"Narathiwat (\u0e19\u0e23\u0e32\u0e18\u0e34\u0e27\u0e32\u0e2a)\",\"TH-39\":\"Nong Bua Lam Phu (\u0e2b\u0e19\u0e2d\u0e07\u0e1a\u0e31\u0e27\u0e25\u0e33\u0e20\u0e39)\",\"TH-43\":\"Nong Khai (\u0e2b\u0e19\u0e2d\u0e07\u0e04\u0e32\u0e22)\",\"TH-12\":\"Nonthaburi (\u0e19\u0e19\u0e17\u0e1a\u0e38\u0e23\u0e35)\",\"TH-13\":\"Pathum Thani (\u0e1b\u0e17\u0e38\u0e21\u0e18\u0e32\u0e19\u0e35)\",\"TH-94\":\"Pattani (\u0e1b\u0e31\u0e15\u0e15\u0e32\u0e19\u0e35)\",\"TH-82\":\"Phang Nga (\u0e1e\u0e31\u0e07\u0e07\u0e32)\",\"TH-93\":\"Phatthalung (\u0e1e\u0e31\u0e17\u0e25\u0e38\u0e07)\",\"TH-56\":\"Phayao (\u0e1e\u0e30\u0e40\u0e22\u0e32)\",\"TH-67\":\"Phetchabun (\u0e40\u0e1e\u0e0a\u0e23\u0e1a\u0e39\u0e23\u0e13\u0e4c)\",\"TH-76\":\"Phetchaburi (\u0e40\u0e1e\u0e0a\u0e23\u0e1a\u0e38\u0e23\u0e35)\",\"TH-66\":\"Phichit (\u0e1e\u0e34\u0e08\u0e34\u0e15\u0e23)\",\"TH-65\":\"Phitsanulok (\u0e1e\u0e34\u0e29\u0e13\u0e38\u0e42\u0e25\u0e01)\",\"TH-54\":\"Phrae (\u0e41\u0e1e\u0e23\u0e48)\",\"TH-83\":\"Phuket (\u0e20\u0e39\u0e40\u0e01\u0e47\u0e15)\",\"TH-25\":\"Prachin Buri (\u0e1b\u0e23\u0e32\u0e08\u0e35\u0e19\u0e1a\u0e38\u0e23\u0e35)\",\"TH-77\":\"Prachuap Khiri Khan (\u0e1b\u0e23\u0e30\u0e08\u0e27\u0e1a\u0e04\u0e35\u0e23\u0e35\u0e02\u0e31\u0e19\u0e18\u0e4c)\",\"TH-85\":\"Ranong (\u0e23\u0e30\u0e19\u0e2d\u0e07)\",\"TH-70\":\"Ratchaburi (\u0e23\u0e32\u0e0a\u0e1a\u0e38\u0e23\u0e35)\",\"TH-21\":\"Rayong (\u0e23\u0e30\u0e22\u0e2d\u0e07)\",\"TH-45\":\"Roi Et (\u0e23\u0e49\u0e2d\u0e22\u0e40\u0e2d\u0e47\u0e14)\",\"TH-27\":\"Sa Kaeo (\u0e2a\u0e23\u0e30\u0e41\u0e01\u0e49\u0e27)\",\"TH-47\":\"Sakon Nakhon (\u0e2a\u0e01\u0e25\u0e19\u0e04\u0e23)\",\"TH-11\":\"Samut Prakan (\u0e2a\u0e21\u0e38\u0e17\u0e23\u0e1b\u0e23\u0e32\u0e01\u0e32\u0e23)\",\"TH-74\":\"Samut Sakhon (\u0e2a\u0e21\u0e38\u0e17\u0e23\u0e2a\u0e32\u0e04\u0e23)\",\"TH-75\":\"Samut Songkhram (\u0e2a\u0e21\u0e38\u0e17\u0e23\u0e2a\u0e07\u0e04\u0e23\u0e32\u0e21)\",\"TH-19\":\"Saraburi (\u0e2a\u0e23\u0e30\u0e1a\u0e38\u0e23\u0e35)\",\"TH-91\":\"Satun (\u0e2a\u0e15\u0e39\u0e25)\",\"TH-17\":\"Sing Buri (\u0e2a\u0e34\u0e07\u0e2b\u0e4c\u0e1a\u0e38\u0e23\u0e35)\",\"TH-33\":\"Sisaket (\u0e28\u0e23\u0e35\u0e2a\u0e30\u0e40\u0e01\u0e29)\",\"TH-90\":\"Songkhla (\u0e2a\u0e07\u0e02\u0e25\u0e32)\",\"TH-64\":\"Sukhothai (\u0e2a\u0e38\u0e42\u0e02\u0e17\u0e31\u0e22)\",\"TH-72\":\"Suphan Buri (\u0e2a\u0e38\u0e1e\u0e23\u0e23\u0e13\u0e1a\u0e38\u0e23\u0e35)\",\"TH-84\":\"Surat Thani (\u0e2a\u0e38\u0e23\u0e32\u0e29\u0e0e\u0e23\u0e4c\u0e18\u0e32\u0e19\u0e35)\",\"TH-32\":\"Surin (\u0e2a\u0e38\u0e23\u0e34\u0e19\u0e17\u0e23\u0e4c)\",\"TH-63\":\"Tak (\u0e15\u0e32\u0e01)\",\"TH-92\":\"Trang (\u0e15\u0e23\u0e31\u0e07)\",\"TH-23\":\"Trat (\u0e15\u0e23\u0e32\u0e14)\",\"TH-34\":\"Ubon Ratchathani (\u0e2d\u0e38\u0e1a\u0e25\u0e23\u0e32\u0e0a\u0e18\u0e32\u0e19\u0e35)\",\"TH-41\":\"Udon Thani (\u0e2d\u0e38\u0e14\u0e23\u0e18\u0e32\u0e19\u0e35)\",\"TH-61\":\"Uthai Thani (\u0e2d\u0e38\u0e17\u0e31\u0e22\u0e18\u0e32\u0e19\u0e35)\",\"TH-53\":\"Uttaradit (\u0e2d\u0e38\u0e15\u0e23\u0e14\u0e34\u0e15\u0e16\u0e4c)\",\"TH-95\":\"Yala (\u0e22\u0e30\u0e25\u0e32)\",\"TH-35\":\"Yasothon (\u0e22\u0e42\u0e2a\u0e18\u0e23)\"},\"US\":{\"AL\":\"Alabama\",\"AK\":\"Alaska\",\"AZ\":\"Arizona\",\"AR\":\"Arkansas\",\"CA\":\"California\",\"CO\":\"Colorado\",\"CT\":\"Connecticut\",\"DE\":\"Delaware\",\"DC\":\"District Of Columbia\",\"FL\":\"Florida\",\"GA\":\"Georgia\",\"HI\":\"Hawaii\",\"ID\":\"Idaho\",\"IL\":\"Illinois\",\"IN\":\"Indiana\",\"IA\":\"Iowa\",\"KS\":\"Kansas\",\"KY\":\"Kentucky\",\"LA\":\"Louisiana\",\"ME\":\"Maine\",\"MD\":\"Maryland\",\"MA\":\"Massachusetts\",\"MI\":\"Michigan\",\"MN\":\"Minnesota\",\"MS\":\"Mississippi\",\"MO\":\"Missouri\",\"MT\":\"Montana\",\"NE\":\"Nebraska\",\"NV\":\"Nevada\",\"NH\":\"New Hampshire\",\"NJ\":\"New Jersey\",\"NM\":\"New Mexico\",\"NY\":\"New York\",\"NC\":\"North Carolina\",\"ND\":\"North Dakota\",\"OH\":\"Ohio\",\"OK\":\"Oklahoma\",\"OR\":\"Oregon\",\"PA\":\"Pennsylvania\",\"RI\":\"Rhode Island\",\"SC\":\"South Carolina\",\"SD\":\"South Dakota\",\"TN\":\"Tennessee\",\"TX\":\"Texas\",\"UT\":\"Utah\",\"VT\":\"Vermont\",\"VA\":\"Virginia\",\"WA\":\"Washington\",\"WV\":\"West Virginia\",\"WI\":\"Wisconsin\",\"WY\":\"Wyoming\",\"AA\":\"Armed Forces (AA)\",\"AE\":\"Armed Forces (AE)\",\"AP\":\"Armed Forces (AP)\",\"AS\":\"American Samoa\",\"GU\":\"Guam\",\"MP\":\"Northern Mariana Islands\",\"PR\":\"Puerto Rico\",\"UM\":\"US Minor Outlying Islands\",\"VI\":\"US Virgin Islands\"}}","plugin_url":"http:\/\/www.organicwebdesigns.co.uk\/hmw-demo\/wp-content\/plugins\/woocommerce","ajax_url":"\/hmw-demo\/wp-admin\/admin-ajax.php","ajax_loader_url":"http:\/\/www.organicwebdesigns.co.uk\/hmw-demo\/wp-content\/plugins\/woocommerce\/assets\/images\/ajax-loader@2x.gif","i18n_select_state_text":"Select an option\u2026","i18n_required_rating_text":"Please select a rating","i18n_no_matching_variations_text":"Sorry, no products matched your selection. Please choose a different combination.","i18n_required_text":"required","i18n_view_cart":"View Cart \u2192","review_rating_required":"yes","update_order_review_nonce":"e67e7cf016","apply_coupon_nonce":"de6a2b5f65","option_guest_checkout":"yes","checkout_url":"\/hmw-demo\/wp-admin\/admin-ajax.php?action=woocommerce-checkout","is_checkout":"0","update_shipping_method_nonce":"f3dda7520a","add_to_cart_nonce":"0c58a6ed24","cart_url":"http:\/\/www.organicwebdesigns.co.uk\/hmw-demo\/?page_id=1794","cart_redirect_after_add":"no"};
    /* ]]> */
    </script>
    <script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/woocommerce/assets/js/frontend/woocommerce.min.js?ver=2.0.8'></script>
    <script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/woocommerce/assets/js/jquery-cookie/jquery.cookie.min.js?ver=1.3.1'></script>
    <script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/woocommerce/assets/js/frontend/cart-fragments.min.js?ver=2.0.8'></script>
    <script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/woocommerce/assets/js/jquery-placeholder/jquery.placeholder.min.js?ver=2.0.8'></script>
    <script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/js/foundation.min.js'></script>
    <script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/js/app.js'></script>
    <script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/js/gmap3.min.js'></script>
    <script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-includes/js/jquery/jquery.color.min.js?ver=2.1.0'></script>
    <script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/js_composer/assets/flexslider/jquery.flexslider-min.js?ver=3.5.5'></script>
    <script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/js_composer/assets/js/prettyphoto/js/jquery.prettyPhoto.js?ver=3.5.5'></script>
    <script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/crumina_slider/js/crumina_slider_content.js?ver=3.6.2'></script>
    <script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/js_composer/assets/js_composer_front.js?ver=3.5.5'></script>
    </body>
    </html>
    But all I really needed was this:

    Code:
    <!DOCTYPE html>
    <html class="no-js" lang="en-US">
      <head>
        <meta charset="utf-8">
        <title>Slider</title>
        <link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/css/foundation.min.css">
        <link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/css/app.css">
        <link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/css/flexslider.css">
        <link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/css/options.css">
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
      </head>
      
      <body>
        <div id="change_wrap_div">
          <section id="layout">
            <div class="row">
              <div class="twelve columns">
                <div id="et-product-slider">
                  <div class="et-carousel-wrapper">
                    <ul class="clearfix" style="width: 3000px; left: 0px;">
                      <li class="et-product">
                        <a href="#">
                          <img width="220" height="9999" alt="Product 1" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png">
                        </a>
                        <h3><a href="#">Product 1</a></h3>
                        <div class="et-price-button">
                          <span class="et-price-sale">
                            <span class="amount"><span class="lighter"></span>10</span>
                          </span>
                        </div>
                      </li>
                                  
                      <li class="et-product">
                        <a href="#">
                          <img width="220" height="9999" alt="product 2" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png">
                        </a>
                        <h3><a href="#">Product 2</a></h3>
                        <div class="et-price-button">
                          <span class="et-price-sale">
                            <span class="amount"><span class="lighter"></span>29</span>
                          </span>
                        </div>
                      </li>       
                    </ul>
                  </div>
                  
                  <div class="et-slider-arrows">
                    <a href="#" class="et-arrow-prev"><span>Previous</span></a>
                    <a href="#" class="et-arrow-next"><span>Next</span></a>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
      </body>
    </html>
    Please don't take this the wrong way, what you did was a big help already (and more than a lot of people are willing to do). I just wanted to point this out for future reference

    Anyway, I thought it might be fun to write this using JavaScript, a opposed to use a plugin.

    Here's my first idea. What do you think?

    It's coded very badly, so please don't use this on your page yet, I just wanted to make sure we were moving in the right direction.

  6. #6
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Yes that's exactly!!! Mine doesn't work as good as yours though, it jumps up when you press the button and the right arrow moves but the left doesn't.

    http://organicwebdesigns.co.uk/hmw-demo

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,940
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Ok, I'll refine my script tomorrow and post some more then.
    Off to bed now, as it's late.

  8. #8
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Thanks I really appreciate it,
    Much fun

  9. #9
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    would you recomment putting the js at the end of the poage or in an external file?

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,940
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    If you put it at the end of the page, it will have two advantages:

    1) any elements that your JS references will exist in the DOM, thus the call to $(document).ready(function(){ ... }); will not normally be needed.

    2) It will give the page the appearance of loading faster.

    I'm just playing around with your slider now. I'll post back when I've got everything working.

  11. #11
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    If you put it at the end of the page, it will have two advantages:

    1) any elements that your JS references will exist in the DOM, thus the call to $(document).ready(function(){ ... }); will not normally be needed.

    2) It will give the page the appearance of loading faster.

    I'm just playing around with your slider now. I'll post back when I've got everything working.
    ahh I see

    ok looking forward
    many thanks

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,940
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    So, I finished the slider.
    You can find it here.

    I had to alter the CSS of .et-carousel-wrapper and ul.clearfix a tiny bit. You can see my changes in the header of the document.
    Apart from that I corrected a couple of bugs (the page doesn't jump on scroll and you cannot scroll past the final image, no matter how hard you try).
    The code is also considerably more robust than what I posted in my previous demo.
    You should just be able to drop it into your page and have it work.

    Here's the code, just to be complete:

    Code:
    <!DOCTYPE html>
    <html class="no-js" lang="en-US">
      <head>
        <meta charset="utf-8">
        <title>Slider Demo</title>
        <link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/css/foundation.min.css">
        <link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/css/app.css">
        <link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/css/flexslider.css">
        <link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/css/options.css">
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        
        <style>
          .et-carousel-wrapper{
            margin:50px auto;
            padding:26px 22px;
            width: 944px;
          }
          
          ul.clearfix{
            width: 2832px; 
            left: 0px;
          }
        </style>
      </head>
      
      <body>
        <div id="change_wrap_div">
          <section id="layout">
            <div class="row">
              <div class="twelve columns">
                <div id="et-product-slider">
                  <div class="et-carousel-wrapper">
                    <ul class="clearfix">
                      <li class="et-product">
                        <a href="#">
                          <img width="220" height="9999" alt="Product 1" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png">
                        </a>
                        <h3><a href="#">Product 1</a></h3>
                        <div class="et-price-button">
                          <span class="et-price-sale">
                            <span class="amount"><span class="lighter"></span>10</span>
                          </span>
                        </div>
                      </li>
                                  
                      <li class="et-product">
                        <a href="#">
                          <img width="220" height="9999" alt="product 2" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png">
                        </a>
                        <h3><a href="#">Product 2</a></h3>
                        <div class="et-price-button">
                          <span class="et-price-sale">
                            <span class="amount"><span class="lighter"></span>29</span>
                          </span>
                        </div>
                      </li>
                                  
                      <li class="et-product">
                        <a href="#">
                          <img width="220" height="9999" alt="product 2" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png">
                        </a>
                        <h3><a href="#">Product 3</a></h3>
                        <div class="et-price-button">
                          <span class="et-price-sale">
                            <span class="amount"><span class="lighter"></span>29</span>
                          </span>
                        </div>
                      </li>
                                  
                      <li class="et-product">
                        <a href="#">
                          <img width="220" height="9999" alt="product 2" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png">
                        </a>
                        <h3><a href="#">Product 4</a></h3>
                        <div class="et-price-button">
                          <span class="et-price-sale">
                            <span class="amount"><span class="lighter"></span>29</span>
                          </span>
                        </div>
                      </li>
                                  
                      <li class="et-product">
                        <a href="#">
                          <img width="220" height="9999" alt="product 2" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png">
                        </a>
                        <h3><a href="#">Product 5</a></h3>
                        <div class="et-price-button">
                          <span class="et-price-sale">
                            <span class="amount"><span class="lighter"></span>29</span>
                          </span>
                        </div>
                      </li>
                                  
                      <li class="et-product">
                        <a href="#">
                          <img width="220" height="9999" alt="product 2" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png">
                        </a>
                        <h3><a href="#">Product 6</a></h3>
                        <div class="et-price-button">
                          <span class="et-price-sale">
                            <span class="amount"><span class="lighter"></span>29</span>
                          </span>
                        </div>
                      </li>
                                  
                      <li class="et-product">
                        <a href="#">
                          <img width="220" height="9999" alt="product 2" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png">
                        </a>
                        <h3><a href="#">Product 7</a></h3>
                        <div class="et-price-button">
                          <span class="et-price-sale">
                            <span class="amount"><span class="lighter"></span>29</span>
                          </span>
                        </div>
                      </li>
                                  
                      <li class="et-product">
                        <a href="#">
                          <img width="220" height="9999" alt="product 2" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png">
                        </a>
                        <h3><a href="#">Product 8</a></h3>
                        <div class="et-price-button">
                          <span class="et-price-sale">
                            <span class="amount"><span class="lighter"></span>29</span>
                          </span>
                        </div>
                      </li>
                                  
                      <li class="et-product">
                        <a href="#">
                          <img width="220" height="9999" alt="product 2" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png">
                        </a>
                        <h3><a href="#">Product 9</a></h3>
                        <div class="et-price-button">
                          <span class="et-price-sale">
                            <span class="amount"><span class="lighter"></span>29</span>
                          </span>
                        </div>
                      </li>
                                  
                      <li class="et-product">
                        <a href="#">
                          <img width="220" height="9999" alt="product 2" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png">
                        </a>
                        <h3><a href="#">Product 10</a></h3>
                        <div class="et-price-button">
                          <span class="et-price-sale">
                            <span class="amount"><span class="lighter"></span>29</span>
                          </span>
                        </div>
                      </li>
                                  
                      <li class="et-product">
                        <a href="#">
                          <img width="220" height="9999" alt="product 2" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png">
                        </a>
                        <h3><a href="#">Product 11</a></h3>
                        <div class="et-price-button">
                          <span class="et-price-sale">
                            <span class="amount"><span class="lighter"></span>29</span>
                          </span>
                        </div>
                      </li>
                                  
                      <li class="et-product">
                        <a href="#">
                          <img width="220" height="9999" alt="product 2" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png">
                        </a>
                        <h3><a href="#">Product 12</a></h3>
                        <div class="et-price-button">
                          <span class="et-price-sale">
                            <span class="amount"><span class="lighter"></span>29</span>
                          </span>
                        </div>
                      </li>
                    </ul>
                  </div>
                  
                  <div class="et-slider-arrows">
                    <a href="#" class="et-arrow-prev"><span>Previous</span></a>
                    <a href="#" class="et-arrow-next"><span>Next</span></a>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
        
        <script>
          var Slider = {
            thumbsContainer: $(".clearfix"),
            thumbWidth: $(".clearfix").find("li").outerWidth(), 
            currentPos: 0,
            
            updateCurrentPosition: function(){
              this.currentPos = Math.abs(parseInt(this.thumbsContainer.css('left')));
            },
            
            scrollLeft: function(){
              if (this.currentPos < this.thumbsContainer.width() - (4 * this.thumbWidth)){
                this.thumbsContainer.filter(':not(:animated)').animate({left: '-=' + this.thumbWidth}, function(){
                  Slider.updateCurrentPosition();
                });
              } 
            },
            
            scrollRight: function(){
              if (this.currentPos > 0){
                this.thumbsContainer.filter(':not(:animated)').animate({left: '+=' + this.thumbWidth}, function(){
                  Slider.updateCurrentPosition();
                });
              }
            },
            
            init: function(){
              $(".et-arrow-prev").on("click", function(e){
                e.preventDefault();
                Slider.scrollLeft();
              });
              
              $(".et-arrow-next").on("click", function(e){
                e.preventDefault();
                Slider.scrollRight();
              });
            }
          }
          
          Slider.init();
        </script>
      </body>
    </html>
    I hope that helps you.

    BTW: I was just looking at your homepage. Are you a graphic designer (or do you possess graphic design skills)?

  13. #13
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Wow, it's great!!! Pardon me for my ignorance, I come across the bugs thing alot what does it actually mean when something has bugs? I tried this on my page and I can't scroll it at all how do I get over this? http://organicwebdesigns.co.uk/hmw-demo

    I'm impressed if this is all hand written and very appreciative that someone will take the time to show me how to do it.
    wrt to my home page I'm just starting out and trying out my first few projects. I try with graphics where I can and am self taught but can do basic graphic stuff otherwise it's purchsed. I just started a course for jscript and am overwheled a little so I've decided to try and do things practically, I feel I learn better that way. Jumping into learning code gets me wondering what it's all for. I guess like learning Algebra. What's th point in knowing the value of x when you don't even know what x is representing?

  14. #14
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,940
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by hantaah View Post
    Wow, it's great!!! Pardon me for my ignorance, I come across the bugs thing alot what does it actually mean when something has bugs?
    A bug is an error in a computer program that produces an incorrect or unexpected result.
    For example, in my previous version, if you scrolled slowly, you couldn't scroll past the final image, however, if you hit the scroll button really quickly, the animations would build up and you could make the slider scroll out of sight.
    This is unexpected/undesired behaviour and thus a bug.

    Quote Originally Posted by hantaah View Post
    I tried this on my page and I can't scroll it at all how do I get over this? http://organicwebdesigns.co.uk/hmw-demo
    To start with, you need to make the adjustments to your CSS I alluded to in my previous post:

    Code JavaScript:
    .et-carousel-wrapper{
      margin:50px auto;
      padding:26px 22px;
      width: 944px;
    }
     
    ul.clearfix{
      width: 2832px; 
      left: 0px;
    }

    Hopefully it should work after that

    Quote Originally Posted by hantaah View Post
    I'm impressed if this is all hand written and very appreciative that someone will take the time to show me how to do it.
    I love jQuery, but I don't like the fact that people sometimes throw plugin after plugin at a problem, when really they only need a very small subset of the plugin's functionality.
    That's why, I try and write these things myself. It's also a great way of learning.

    Quote Originally Posted by hantaah View Post
    wrt to my home page I'm just starting out and trying out my first few projects. I try with graphics where I can and am self taught but can do basic graphic stuff otherwise it's purchsed.
    Shame. I need to find a friendly graphic designer to make me a trident as my forum avatar

    Quote Originally Posted by hantaah View Post
    I just started a course for jscript and am overwheled a little so I've decided to try and do things practically, I feel I learn better that way. Jumping into learning code gets me wondering what it's all for. I guess like learning Algebra. What's th point in knowing the value of x when you don't even know what x is representing?
    Good on you. Everyone has got to start somewhere and some degree of JS understanding is an invaluable skill for developpers today.

  15. #15
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Yes, it'sa shame, i would have done it for free!

    About the plug ins I was looking for some today then went againt it in the search of code.

    wrt the css I placed this in my css

    .et-carousel-wrapper {
    margin:50px auto;
    padding:26px 22px;
    width: 944px;
    }

    and

    ul.clearfix {
    width: 2832px;
    left: 0px;
    }

    but it's like that. Something wrong with my css or something? What do you think?

  16. #16
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,940
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by hantaah View Post
    Yes, it'sa shame, i would have done it for free!
    Daw!


    Quote Originally Posted by hantaah View Post
    Something wrong with my css or something? What do you think?
    I think so. I just used Chrome's DevTools to inspect the slider on your demo page and I cannot see any width on ul.clearfix.
    If all else fails try adding them inline, just for testing purposes.

  17. #17
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Strange!!! I have it inline and stranger things are happening

  18. #18
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    12
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The product images about half way down the page are creating a scrollbar horizontally for me, so only part of your site is responsive

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

    So, the main problem is that I was targeting classes in my original JS and they are being used elsewhere on the page, which causes the script to break.
    This is easily remedied using ids instead.

    1. Give the div element with the class of "et-carousel-wrapper" an id of "slider-outer".
    2. Give the <ul> element with a class of "clearfix" an id of "slider-inner">
    3. Change the JS, like so:
      Code JavaScript:
      var Slider = {
              thumbsContainer: $(".clearfix"),
              thumbWidth: $(".clearfix").find("li").outerWidth(), 
              currentPos: 0,

      becomes:

      Code JavaScript:
      var Slider = {
              thumbsContainer: $("#slider-inner"),
              thumbWidth: $("#slider-inner").find("li").outerWidth(),
              currentPos: 0,
    4. Apply the following CSS:

      Code CSS:
      #slider-inner{width: 2832px; left: 0px; padding-top:26px;}
      #slider-outer{overflow:hidden}
      .et-carousel-wrapper{padding:0px !important}

    Here's a demo of it working.
    Unfortunately, the price tag is being cut off of the <li> items.
    I managed to get around that in my original demo by adding:

    Code CSS:
    .et-carousel-wrapper{
      padding:26px 22px;
    }

    But something in your styles is overriding that.
    I'm a bit short on time right now, so I'll leave it to you to fix

    Hope that helps.

  20. #20
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    ahh I did have a thought for that, ok let me try this and tell you how it goes

  21. #21
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    oops I'm not sure what happening now

    http://79.170.40.244/healthmeanswealth.co.uk/


    also there were clearfix so I changed the class not sure if it is right

    #slider-inner:after {
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
    }
    #slider-inner:after {
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
    }

    what was it you were mentioning you wanted for your emblem btw? Perhaps I could try and do one

  22. #22
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,940
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by hantaah View Post
    oops I'm not sure what happening now
    Oh dear. Me neither.

    I'm afraid your basic problem is that you have lots of plugins included on that page, multiple CSS files, lots of inline code and your whole template is very convoluted. This makes debugging a nightmare.

    Please don't misunderstand me, this is a characteristic of Content Management Systems in general, as opposed to a criticism of your coding style.

    What we need to do is to make a very basic template and work from there.

    Is it possible you can do this?
    If so, please try and remove all unnecessary content, as well as superfluous plugins.
    Maybe also removing some of the code from your header and footer includes.

    Once we have that, we can get the scroller working, then start adding back pieces of your page until we find out what is breaking things.

    what was it you were mentioning you wanted for your emblem btw? Perhaps I could try and do one
    A trident. Maybe something along these lines: http://www.123rf.com/photo_6739228_g...ackground.html

  23. #23
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I'm determined to work through this and get it working. Back soon


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
  •