6

Hello people please help!

I have gone through all the jquery issues in stackoverflow. I tried some of the solutions but i am not getting the result as i want. I am making a one page website for my company but i am having trouble in bringing responsiveness to it.

The code is as follows:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Top Accountant. Providing solution for all your accounting needs</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="css/bootstrap-theme.css" />
</head>
<body>
<!-- Navigation -->  
<div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Top Accountant</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li class="dropdown">
                    <a href="#"class="dropdown-toggle" data-target=".dropdown">Services <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Service 1</a></li>
                        <li><a href="#">Service 1</a></li>
                        <li><a href="#">Service 1</a></li>
                        <li><a href="#">Service 1</a></li>
                    </ul>
                </li>
                <li><a href="#">Contact</a></li>

            </ul>
        </div>
    </div>
</div>

<!-- End of Navigation -->  

<!--Image slider-->

<div id="myCarousel" class="carousel slide">

    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <div class="carousel-inner">

        <!--images size should be 1920-741 px -->
        <div class="item active">
            <img src="img/accountancy-services.png" />
            <div class="container">
                <div class="carousel-caption">
                    <h1>Lorem ipsum</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nisl sit amet est sodales imperdiet.</p>
                    <p><a class="btn btn-lg btn-primary" href="#">Contact Us</a></p>
                </div>
            </div>
        </div>

        <div class="item">
            <img src="img/images.jpg" />
            <div class="container">
                <div class="carousel-caption">
                    <h1>Lorem ipsum</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nisl sit amet est sodales imperdiet.</p>
                    <p><a class="btn btn-lg btn-primary" href="#">Contact Us</a></p>
                </div>
            </div>
        </div>

        <div class="item">
            <img src="img/accountant-9-tips.png"/>
            <div class="container">
                <div class="carousel-caption">
                    <h1>Lorem ipsum</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nisl sit amet est sodales imperdiet.</p>
                    <p><a class="btn btn-lg btn-primary" href="#">Contact Us</a></p>
                </div>
            </div>
        </div>
    </div>

    <a class="left carousel-control" href="#myCarousel" data-slide="Prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="Next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

<!--End Image slider-->

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="js/bootstrap.js"></script>

There are few things which i have made so far.

1.) When the website is viewed in mobile or tab the nav bar disappears and a toggle button appears. This is working fine.

2.) I have dropdown menu in services which is not working for me. 3.) I have made a carousel as well which is sliding perfectly but not responding to the the left and right click icon.

I don't know what's the problem as 1 is working fine but 2 & 3 are not working.

Please help me in this matter and advise me where am i going wrong.

Thanks in advance.

Improve this question
3
  • Welcome to SO, please ask one question at a time and only include code relevant to what's not working Commented Feb 9, 2016 at 13:03
  • Thanks for your prompt reply Darren. I think it is problem with jquery which i am not able to figure it out. I thought it will be useful. Do you want me to edit my question?? Commented Feb 9, 2016 at 13:05
  • check your console for any errors , also could you create a jsfiddle and replicate the same there, jsfiddle.net Commented Feb 9, 2016 at 13:11

3 Answers 3

Reset to default
2

Double check the docs for working markup examples. There are few problems with your markup. Use data-toggle="dropdown" for the dropdown, and your href/class attributes are not spaced. Remove the data-target for the dropdown.

As far as the carousel goes, next and prev are case sensitive so you need to use data-slide="prev". Also, since you're using navbar-fixed-top don't forget to add body {padding-top: 50px;} or the navbar will overlay your carousel content.

Here's a working update: http://codeply.com/go/gJvCndru8B

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks Skelly your suggestions were right. It was all spelling mistake and instead of data-toggle="dropdown" I had written data-target="dropdown"
0

Replace your entire html code with this:

     <!DOCTYPE html>
<html lang="en">
<head>
  <title>Top Accountant. Providing solution for all your accounting needs</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

</head>
<body>

<!-- Navigation -->  
<div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Top Accountant</a>
        </div>

        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>

                <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Services
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
           <li><a href="#">Service 1</a></li>
                        <li><a href="#">Service 1</a></li>
                        <li><a href="#">Service 1</a></li>
                        <li><a href="#">Service 1</a></li>
        </ul>
      </li>
                <li><a href="#">Contact</a></li>

            </ul>
        </div>
    </div>
</div>

<!-- End of Navigation -->  

<!--Image slider-->

<div id="myCarousel" class="carousel slide">

    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <div class="carousel-inner">

        <!--images size should be 1920-741 px -->
        <div class="item active">
            <img src="img/accountancy-services.png" />
            <div class="container">
                <div class="carousel-caption">
                    <h1>Lorem ipsum</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nisl sit amet est sodales imperdiet.</p>
                    <p><a class="btn btn-lg btn-primary" href="#">Contact Us</a></p>
                </div>
            </div>
        </div>

        <div class="item">
            <img src="img/images.jpg" />
            <div class="container">
                <div class="carousel-caption">
                    <h1>Lorem ipsum</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nisl sit amet est sodales imperdiet.</p>
                    <p><a class="btn btn-lg btn-primary" href="#">Contact Us</a></p>
                </div>
            </div>
        </div>

        <div class="item">
            <img src="img/accountant-9-tips.png"/>
            <div class="container">
                <div class="carousel-caption">
                    <h1>Lorem ipsum</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nisl sit amet est sodales imperdiet.</p>
                    <p><a class="btn btn-lg btn-primary" href="#">Contact Us</a></p>
                </div>
            </div>
        </div>
    </div>

    <a class="left carousel-control" href="#myCarousel" data-slide="Prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="Next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

<!--End Image slider-->


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</body>
</html>
Improve this answer

Comments

0

To repair your dropdown :

data-toggle=".dropdown" => data-toggle="dropdown" without the .

For the carousel, I don't understand your problem, but take a look at the documentation

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.