Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Apr 2013
    Posts
    26
    Thanks
    7
    Thanked 0 Times in 0 Posts

    need to get rid of slider

    Hello,

    I downloaded this template:
    http://www.sendspace.com/file/l9g2v3


    as you can see, on the homepage, there is a slider with 3 slides.
    I wish there was just one static image there with no sliding. the javascript sliding slows down the website's loading, and I just dont need it.



    if I click on the button by the red arrow, it goes to the next slide:






    I am not sure what I have to do to make it just a static image. I want the first slide only, not the second or third slides.

    I have tried many things, but I always mess up the template in some way.

    How can I do this please?
    Last edited by joejohn; 12-26-2013 at 09:37 PM.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,482
    Thanks
    6
    Thanked 981 Times in 954 Posts
    I’m not feeling like downloading your files. Typically it suffices to just post the HTML and JS code here. I would think that if you removed the HTML code for the other two slides it would just be static automatically.

  • #3
    New Coder
    Join Date
    Apr 2013
    Posts
    26
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    I’m not feeling like downloading your files. Typically it suffices to just post the HTML and JS code here. I would think that if you removed the HTML code for the other two slides it would just be static automatically.
    are you sure you wanna see the codes here, they are really long

    html:
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Agency HTML5 Responsive Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Le styles -->
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="assets/css/docs.css" rel="stylesheet">
    <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
        <![endif]-->
    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
    </head>
    <body data-spy="scroll" data-target=".bs-docs-sidebar">
    <!-- Navbar
        ================================================== -->
    <div class="jumbotron masthead">
      <div class="splash"> <img src="assets/img/home-banner-bg.jpg" alt="Banner" /> </div>
      <div class="splash"> <img src="assets/img/home-banner-bg2.jpg" alt="Banner" /> </div>
      <div class="splash"> <img src="assets/img/home-banner-bg3.jpg" alt="Banner" /> </div>
      <div class="nav-agency">
        <div class="navbar navbar-static-top"> 
          <!-- navbar-fixed-top -->
          <div class="navbar-inner">
            <div class="container"> <a class="brand" href="index.html"> <img src="assets/img/Logo.png" alt="Logo"></a>
              <div id="main-nav">
                <div class="nav-collapse collapse">
                  <ul class="nav">
                    <li class="active"><a href="index.html">Home</a> </li>
                    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="javascript:"> Work <b class="caret"></b></a>
                      <ul class="dropdown-menu">
                        <li><a href="work.html">One Column</a></li>
                        <li><a href="work-two-columns.html">Two Column</a></li>
                        <li><a href="work-three-columns.html">Three Column</a></li>
                        <li><a href="work-details.html">Work Details</a></li>
                      </ul>
                    </li>
                    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="javascript:"> Pricing <b class="caret"></b></a>
                      <ul class="dropdown-menu">
                        <li><a href="pricing.html">Four Column</a></li>
                        <li><a href="pricing-three-columns.html">Three Column</a></li>
                      </ul>
                    </li>
                    <li class="dropdown"><a href="javascript:" class="dropdown-toggle" data-toggle="dropdown"> Pages <b class="caret"></b></a>
                      <ul class="dropdown-menu">
                        <li><a href="faq.html">FAQ</a></li>
                        <li><a href="contact.html">Contact Us</a></li>
                        <li><a href="components.html">Components</a></li>
                      </ul>
                    </li>
                    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="javascript:"> Blog <b class="caret"></b></a>
                      <ul class="dropdown-menu">
                        <li><a href="blog.html">Blog Page</a></li>
                        <li><a href="blog-single.html">Single Page</a></li>
                      </ul>
                    </li>
                    <li><a href="index.html">Purchase</a> </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="container show-case-item">
        <h1> ENGAGE & INNOVATE, OR DIE<br />
          (555) 111-0000 </h1>
        <p> Gone are the days of building simple websites. Clients are demanding more functionality
          and better results from their websites and we create unforgettable brand experiences.
          Our passion is helping design and build solutions that strike the perfect balance
          between users, business, and technology.</p>
        <a href="work.html" class="bigbtn">View Our Work</a>
        <div class="clearfix"> </div>
      </div>
      <div class="container show-case-item">
        <h1> SIMPLICITY IS A GOOD THING<br />
          ADOPT! </h1>
        <p> Gone are the days of building simple websites. Clients are demanding more functionality
          and better results from their websites and we create unforgettable brand experiences.
          Our passion is helping design and build solutions that strike the perfect balance
          between users, business, and technology.</p>
        <a href="work.html" class="bigbtn">View Our Work</a>
        <div class="clearfix"> </div>
      </div>
      <div class="container show-case-item">
        <h1> PLAN, BUILD, LAUNCH<br />
          & GROW! </h1>
        <p> Gone are the days of building simple websites. Clients are demanding more functionality
          and better results from their websites and we create unforgettable brand experiences.
          Our passion is helping design and build solutions that strike the perfect balance
          between users, business, and technology.</p>
        <a href="work.html" class="bigbtn">View Our Work</a>
        <div class="clearfix"> </div>
      </div>
      <div id="banner-pagination">
        <ul>
          <li><a href="#" class="active" rel="0"> <img src="assets/img/slidedot-active.png" alt="" /></a></li>
          <li><a href="#" rel="1"> <img src="assets/img/slidedot.png" alt="" /></a></li>
          <li><a href="#" rel="2"> <img src="assets/img/slidedot.png" alt="" /></a></li>
        </ul>
      </div>
    </div>
    <div class="container">
      <div class="marketing">
        <h1> Introducing Agency!</h1>
        <p class="marketing-byline"> Need reasons to purchase this template? See below.</p>
        <hr class="soften">
        <div class="row-fluid">
          <div class="span4"> <img src="assets/img/responsive.png" alt="Responsive">
            <h2> <span class="firstword">Responsive</span> Layout</h2>
            <p class="features"> We combine creative forces with systematic activists. All ideas require implementation
              and our multi-disciplined network fosters a wide array of abilities that empower
              visionaries and entrepreneurs to lead meaningful brands.</p>
          </div>
          <div class="span4"> <img src="assets/img/think-creative.png" alt="Think Creative">
            <h2> <span class="firstword">Built With</span> Bootstrap 2</h2>
            <p> Inspired Thinking. Ask smarter questions, push for innovative solutions and believe
              in the power of creativity. Be consistently open and honest. Be true to ourselves
              and our values. Find, stimulate and maintain the best minds.</p>
          </div>
          <div class="span4"> <img src="assets/img/core-values.png" alt="Core Values">
            <h2> <span class="firstword">Valid</span> HTML5 CSS3</h2>
            <p> Inspired Thinking. Ask smarter questions, push for innovative solutions and believe
              in the power of creativity. Be consistently open and honest. Be true to ourselves
              and our values. Find, stimulate and maintain the best minds.</p>
          </div>
        </div>
        <hr class="soften">
        <div class="row-fluid textleft">
          <div class="span8">
            <h2> <span class="firstword">Our</span> Services</h2>
            <p> We've been doing this for a long time and the knowledge we gather from our years
              of experience helps us to understand how the mobile channel can help our clients
              in their challenges. We help brands by creating and developing compelling and strategic
              solutions that are not depended on channels or platforms, but instead creating a
              link between human needs and brands.</p>
            <p> A few other benefits to this template include a price table element and the ability
              to modify button backgrounds using CSS3. </p>
            <div class="row-fluid bordertop">
              <p> With this templates, comes the following awesomenesses :)</p>
              <div class="span4">
                <ul class="services">
                  <li><i class="icon-user"></i> Built for and by nerds</li>
                  <li><i class="icon-th"></i> 12-column grid</li>
                  <li><i class="icon-globe"></i> Bad-*** support</li>
                  <li><i class="icon-book"></i> Growing library</li>
                </ul>
              </div>
              <div class="span4">
                <ul class="services">
                  <li><i class="icon-resize-small"></i> Responsive design</li>
                  <li><i class="icon-eye-open"></i> Cross-everything</li>
                  <li><i class="icon-list-alt"></i> Documentation</li>
                  <li><i class="icon-cog"></i> jQuery plugins</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="span4">
            <h2> <span class="firstword">Agency</span> Perks</h2>
            <div class="benefit first clearfix"> <span class="icon flexible-hours"></span><span class="benefit_text">
              <div class="perks-title"> Flexible Hours</div>
              <p> Come late at work or take free time if you want, we focus on results.</p>
              </span> </div>
            <div class="benefit clearfix"> <span class="icon coffee-day"></span><span class="benefit_text">
              <div class="perks-title"> Surprise Treats</div>
              <p> Every week we have one day that is dedicated to surprise treat.</p>
              </span> </div>
            <div class="benefit clearfix"> <span class="icon personal-projects"></span><span class="benefit_text">
              <div class="perks-title"> Personal Projects</div>
              <p> We support you... to build your very own projects.</p>
              </span> </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Footer
        ================================================== -->
    <footer class="footer">
      <div class="container">
        <div class="row-fluid">
          <div class="span12">
            <blockquote>
              <p class="testimonial">Working with Agency has been a refreshing experience. They listened to our needs and came up with a great solution.</p>
              <p class="name">Sarfraz Shoukat, <b>Owner - Greepit.com</b></p>
            </blockquote>
          </div>
        </div>
        <hr class="soften1">
        <div class="row-fluid">
          <div class="span3">
            <h4>Navigation</h4>
            <ul class="footer-links">
              <li><a href="#">Home</a></li>
              <li><a href="#">Work</a></li>
              <li><a href="#">Elements</a></li>
              <li><a href="#">Contact</a></li>
              <li><a href="#">Blog</a></li>
            </ul>
          </div>
          <div class="span3 MT70">
            <h4>Useful Links</h4>
            <ul class="footer-links">
              <li><a href="#">eGrappler.com</a></li>
              <li><a href="#">Greepit.com</a></li>
              <li><a href="#">WordPress.com</a></li>
              <li><a href="#">ThemeForest.net</a></li>
              <li><a href="#">Free Vector Icons</a></li>
            </ul>
          </div>
          <div class="span3 MT70">
            <h4>Something from Flickr</h4>
            <div id="flickr-wrapper"> 
              <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=8&amp;display=latest&amp;size=s&amp;layout=x&amp;source=user&amp;user=10133335@N08"></script> 
            </div>
          </div>
          <div class="span3 MT70">
            <h4>Who We Are</h4>
            <p>We are a creative production studio specialising in all things digital. Find us, connect & collaborate.</p>
            <ul class="footer_social clearfix">
              <li><a href="#" class="footer_facebook">Facebook</a></li>
              <li><a href="#" class="footer_twitter">Twitter</a></li>
              <li><a href="#" class="footer_googleplus">Google+</a></li>
              <li><a href="#" class="footer_rss">RSS</a></li>
            </ul>
          </div>
        </div>
        <hr class="soften1 copyhr">
        <div class="row-fluid copyright">
          <div class="span12">Copyright &copy; 2012. Greepit.com</div>
        </div>
      </div>
    </footer>
    <!-- Le javascript
        ================================================== --> 
    <!-- Placed at the end of the document so the pages load faster --> 
    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> 
    <script src="assets/js/jquery.js" type="text/javascript"></script> 
    <script src="assets/js/google-code-prettify/prettify.js" type="text/javascript"></script> 
    <script src="assets/js/bootstrap-transition.js" type="text/javascript"></script> 
    <script src="assets/js/bootstrap-alert.js" type="text/javascript"></script> 
    <script src="assets/js/bootstrap-modal.js" type="text/javascript"></script> 
    <script src="assets/js/bootstrap-dropdown.js" type="text/javascript"></script> 
    <script src="assets/js/bootstrap-scrollspy.js" type="text/javascript"></script> 
    <script src="assets/js/bootstrap-tab.js" type="text/javascript"></script> 
    <script src="assets/js/bootstrap-tooltip.js" type="text/javascript"></script> 
    <script src="assets/js/bootstrap-popover.js" type="text/javascript"></script> 
    <script src="assets/js/bootstrap-button.js" type="text/javascript"></script> 
    <script src="assets/js/bootstrap-collapse.js" type="text/javascript"></script> 
    <script src="assets/js/bootstrap-carousel.js" type="text/javascript"></script> 
    <script src="assets/js/bootstrap-typeahead.js" type="text/javascript"></script> 
    <script src="assets/js/bootstrap-affix.js" type="text/javascript"></script> 
    <script src="assets/js/application.js" type="text/javascript"></script> 
    <script src="assets/js/superfish.js" type="text/javascript"></script> 
    <script src="assets/js/custom.js" type="text/javascript"></script> 
    <script type="text/javascript">
            $(document).ready(function () {
    
                var showCaseItems = $('.show-case-item').hide();
    
                var splashes = $('.splash').hide();
                //get each image for each slide and set it as a background of the slide
                //            splashes.each(function () {
                //                var img = $(this).find('img');
                //                var imgSrc = img.attr('src');
                //                img.css('visibility', 'hidden');
                //                $(this).css({ 'background-image': 'url(' + imgSrc + ')', 'background-repeat': 'no-repeat' });
                //            });
    
                splashes.eq(0).show();
                showCaseItems.eq(0).show();
    
                var prevIndex = -1;
                var nextIndex = 0;
                var currentIndex = 0;
    
                $('#banner-pagination li a').click(function () {
    
                    nextIndex = parseInt($(this).attr('rel'));
    
                    if (nextIndex != currentIndex) {
                        $('#banner-pagination li a').html('<img src="assets/img/slidedot.png" alt="slide"/>');
                        $(this).html('<img src="assets/img/slidedot-active.png" alt="slide"/>');
                        currentIndex = nextIndex;
                        if (prevIndex < 0) prevIndex = 0;
    
                        splashes.eq(prevIndex).css({ opacity: 1 }).animate({ opacity: 0 }, 500, function () {
                            $(this).hide();
                        });
                        splashes.eq(nextIndex).show().css({ opacity: 0 }).animate({ opacity: 1 }, 500, function () { });
    
                        showCaseItems.eq(prevIndex).css({ opacity: 1 }).animate({ opacity: 0 }, 500, function () {
                            $(this).hide();
                            showCaseItems.eq(nextIndex).show().css({ opacity: 0 }).animate({ opacity: 1 }, 200, function () { });
                        });
    
                        prevIndex = nextIndex;
                    }
    
                    return false;
                });
    
            });
        </script>
    </body>
    </html>
    javascript: there are so many files, I dont even know which one to paste here.

    I want to remove the code so the relevant javascript doesn't load at all.
    Last edited by joejohn; 12-27-2013 at 05:33 AM.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,482
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Oh yeah, Bootstrap. That’s exactly what I criticize about this framework/boilerplate crap: It adds bloat to a site and people just use it because it works without knowing anything about it and what is or isn’t important.

    Apparently the JavaScript for the slider is at the bottom of the HTML document, the script that’s not referenced in an external file:
    Code:
    <script type="text/javascript">
      $(document).ready(function () {
        var showCaseItems = $('.show-case-item').hide();
    …
    …
    But if you remove that it will probably show all three slides so you also need to remove the HTML for the redundant ones. The slides are the divs that start with <div class="container show-case-item">.

    And when you’ve done that you can probably even remove the line at the bottom that reads <script src="assets/js/bootstrap-carousel.js" type="text/javascript"></script>

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,189
    Thanks
    10
    Thanked 569 Times in 550 Posts
    Quote Originally Posted by VIPStephan View Post
    Oh yeah, Bootstrap. Thatís exactly what I criticize about this framework/boilerplate crap: It adds bloat to a site and people just use it because it works without knowing anything about it and what is or isnít important.
    that's like saying the thing i hate about cars is all the wreaks...

    I was anti-framwork not too long ago, but mobile changed my mind. Trying to keep up with all the different physical and logical dimension is sadistic. If you only care about desktops, you can likely skip a layout package like bootstrap, skeleton, whatever. But if you want the same app/site to work well on pads and phones as well as old-fashioned desktops, it behooves you not to re-invent the wheel.


    one can do a custom build of bootstrap with only the components actually needed, and we can use Zepto instead of jQuery if bloat is a concern. Trying to do a good-looking, responsive, and robust layout without a framework will substantially increase development time.


    OP: just remove the extra add-on script that defines the sliders; no need to rework lots of layout/content html. you can also hide/show in CSS once you remove the js, or use a native bootstrap interaction widget to non-automatically advance the slides.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,482
    Thanks
    6
    Thanked 981 Times in 954 Posts
    I’m not saying that responsible use is bad, and all frameworks do serve a certain purpose because they have been invented by someone who felt the need to ease something. The problem is the prevalent misuse because people just use it without understanding what they are doing and why they need it at all. And honestly, I can’t imagine what’s so hard about developing a site for different devices without bloatware like that.
    Again, if you know how to use frameworks effectively then it’s all good. But unfortunately these people are a minority.


  •  

    Posting Permissions

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