Develop Reference

swapping div content using jquery [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I found a pretty sweet codepen regarding buttons/aesthestics and re-purposed it to fit what our team is trying to build. Basically we want buttons going down vertically on the left hand side with a large div on the right hand side. When a certain button is clicked on the left, the div on the right will change to show the appropriate content. After doing some reading, it looks like jQuery is the answer to this functionality. I've never actually coded jQuery and couldn't get anything to work correctly yet. There are two things we need:
When the button is clicked on the left, we need the div on the right to change content.
When the button on the left is active, I want the styling to remain what it looks like when it's hovered.
Can someone provide some guidance? Thanks!
#wrapper {
text-align: center;
}
.bt_wrap {
display: flex;
flex-direction: column;
width: auto;
height: auto;
background: gray;
width: 100px;
height: 100px;
cursor: pointer;
perspective: 200px;
transition: background 0.2s ease-out;
}
.box {
position: absolute;
perspective-origin: 50px 50px;
transform-origin: 50px 50px;
transition: transform 0.2s ease-out;
transform-style: preserve-3d;
}
.icon,
.icon2 {
position: absolute;
top: 0;
left: 20px;
margin-top: 20px;
background: black;
color: #fff;
width: 60px;
height: 60px;
font-size: 2em;
line-height: 60px;
transition: background 0.2s ease-out;
transform: translate3d(0px, 0px, 30px) rotateY(0deg);
}
.icon2 {
background: black;
transform: translate3d(29px, 0px, 0px) rotateY(90deg);
transition: background 0.2s ease-out;
}
.bt_wrap:hover {
background: blue;
}
.bt_wrap:hover .icon {
background: black;
}
.bt_wrap:hover .icon2 {
background: black;
color: blue;
}
.bt_wrap:hover .box {
transform: rotateY(-90deg);
}
.started {
font-size: 0.75em;
position: absolute;
bottom: 4px;
right: 4px;
color: green;
background: white;
border-radius: 50%;
width: 1em;
}
.main {
display: flex;
}
.content {
width: 100%;
padding-left: 1em;
text-align: center;
display: flex;
align-items: center;
}
.form-title {
margin-top: 0;
margin-bottom: 30px;
padding-bottom: 15px;
position: relative;
}
.form-title::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 80px;
height: 4px;
background: orange;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-otransform: translateX(-50%);
transform: translateX(-50%);
}
<div class="main">
<div id="wrapper" class="steps">
<div class="bt_wrap" name="1">
<div class="box">
<i class="icon fa fa-clipboard">
<span ng-class="{'started': c.data.questionnaire}" class="fa fa-check-circle"></span>
</i>
<i class="icon2 fa fa-clipboard">
<span ng-class="{'started': c.data.questionnaire}" class="fa fa-check-circle"></span>
</i>
</div>
</div>
<div class="bt_wrap" name="2">
<div class="box">
<i class="icon fa fa-building">
<span ng-class="{'started': c.data.work_history}" class="fa fa-check-circle"></span>
</i>
<i class="icon2 fa fa-building">
<span ng-class="{'started': c.data.work_history}" class="fa fa-check-circle"></span>
</i>
</div>
</div>
<div class="bt_wrap" name="3">
<div class="box">
<i class="icon fa fa-users">
<span ng-class="{'started': c.data.beneficiaries}" class="fa fa-check-circle"></span>
</i>
<i class="icon2 fa fa-users">
<span ng-class="{'started': c.data.beneficiaries}" class="fa fa-check-circle"></span>
</i>
</div>
</div>
<div class="bt_wrap" name="4">
<div class="box">
<i class="icon fa fa-university">
<span ng-class="{'started': c.data.tax}" class="fa fa-check-circle"></span>
</i>
<i class="icon2 fa fa-university">
<span ng-class="{'started': c.data.tax}" class="fa fa-check-circle"></span>
</i>
</div>
</div>
<div class="bt_wrap" name="5">
<div class="box">
<i class="icon fa fa-file-pdf-o"></i>
<i class="icon2 fa fa-file-pdf-o"></i>
</div>
</div>
</div>
<div class="content">
<div class="form-container">
<h2 class="form-title">Welcome to Your Employment Guide!</h2>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h4>
<div class="text-center">
<input type="button" value="NEXT" class="btn btn-primary next">
</div>
</div>
</div>
</div>

Here's my take:
http://jsfiddle.net/bxmaqtd3/
When the button is clicked on the left, we need the div on the right to change content.
My solution uses jquery show() and hide() to show and hide divs which contain slide content. You will need to include all the content in your html with unique IDs (i.e. #slide1, #slide2, #slide3, etc) and use the css display: none on all slides except the first (or default) slide.
This solution uses a custom data attribute to store the ID of the slide div which you want the given button to show. For example:
<div class="bt_wrap" name="1" data-slide="slide1">
When the button on the left is active, I want the styling to remain what it looks like when it's hovered.
To achieve this I duplicate the :hover styles into a new class called active when you click on one of the button divs it removes the class from all buttons and then adds the class to the button you have just clicked.
JS:
$('.bt_wrap').click(function(){
$('.bt_wrap').removeClass('active'); //remove active class on all buttons
$(this).addClass('active'); //add active class to the one that you clicked
var slideId = $(this).attr('data-slide'); //find the value of the associated slide id
$('.slide').not("#" + slideId).hide(); //hid all slides except the one you want to show
$("#" + slideId).show(); //show the one you want to show
});
CSS:
#slide1 {
display: block;
}
#slide2 {
display: none;
}
.active .box {
transform: rotateY(-90deg);
}
.active {
background: blue;
}
HTML:
<head>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
</head>
<div class="main">
<div id="wrapper" class="steps">
<div class="bt_wrap" name="1" data-slide="slide1">
<div class="box">
<i class="icon fa fa-clipboard">
<span ng-class="{'started': c.data.questionnaire}" class="fa fa-check-circle"></span>
</i>
<i class="icon2 fa fa-clipboard">
<span ng-class="{'started': c.data.questionnaire}" class="fa fa-check-circle"></span>
</i>
</div>
</div>
<div class="bt_wrap" name="2" data-slide="slide2">
<div class="box">
<i class="icon fa fa-building">
<span ng-class="{'started': c.data.work_history}" class="fa fa-check-circle"></span>
</i>
<i class="icon2 fa fa-building">
<span ng-class="{'started': c.data.work_history}" class="fa fa-check-circle"></span>
</i>
</div>
</div>
<div class="bt_wrap" name="3">
<div class="box">
<i class="icon fa fa-users">
<span ng-class="{'started': c.data.beneficiaries}" class="fa fa-check-circle"></span>
</i>
<i class="icon2 fa fa-users">
<span ng-class="{'started': c.data.beneficiaries}" class="fa fa-check-circle"></span>
</i>
</div>
</div>
<div class="bt_wrap" name="4">
<div class="box">
<i class="icon fa fa-university">
<span ng-class="{'started': c.data.tax}" class="fa fa-check-circle"></span>
</i>
<i class="icon2 fa fa-university">
<span ng-class="{'started': c.data.tax}" class="fa fa-check-circle"></span>
</i>
</div>
</div>
<div class="bt_wrap" name="5">
<div class="box">
<i class="icon fa fa-file-pdf-o"></i>
<i class="icon2 fa fa-file-pdf-o"></i>
</div>
</div>
</div>
<div class="content">
<div id="slide1" class="slide form-container">
<h2 class="form-title">Welcome to Your Employment Guide!</h2>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h4>
<div class="text-center">
<input type="button" value="NEXT" class="btn btn-primary next">
</div>
</div>
<div id="slide2" class="slide form-container">
<h2 class="form-title">Some other title</h2>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h4>
<div class="text-center">
<input type="button" value="NEXT" class="btn btn-primary next">
</div>
</div>
</div>
</div>

Adding a custom navbar to an specific section in Fullpage.js

Using Fullpage.js I added a Bootstrap custom navbar inside section 1 for achieving a "our features effect" and when you click on a tab the text inside that section changes.
The Bootstrap code works but I want to set the navbar on the bottom on section 1, but it keeps adding itself to section 0.
What would be the best way to achieve this?
CSS:
#section0 {
background:url("images/vd48-main.jpg") center top no-repeat;
background-image: url("images/vd48-main.jpg");
background-position: fixed;
background-color: #000000;
}
#section1 {
background:url("images/vd48-main.jpg") center top no-repeat;
background-image: url("images/vd48-main.jpg");
background-position: fixed;
}
#section2 img{
margin: 20px 0 0 52px;
background-image: url(images/vd48-main.jpg);
padding: 30% 0 0 0;
}
#section3 img{
bottom: 0px;
position: absolute;
margin-left: -420px;
}
.intro p{
width: 50%;
margin: 0 auto;
font-size: 1.5em;
}
.twitter-share-button{
position: absolute;
z-index: 99;
right: 149px;
top: 9px;
}
.fp-tooltip{
color: #AAA;
}
#fp-nav span, .fp-slidesNav span{
border-color: #AAA;
}
#fp-nav li .active span, .fp-slidesNav .active span{
background: #AAA;
}
.nav-tabs{
overflow: hidden;
position: fixed;
bottom: 0;
width: 100%;
}
.bg-inverse{
z-index: 999;
}
HTML:
<ul id="menu">
<li data-menuanchor="firstPage">Visit Counter</li>
<li data-menuanchor="secondPage">Feature Image</li>
<li data-menuanchor="3rdPage">Big Image</li>
<li data-menuanchor="4thpage">Product Specs 1</li>
<li data-menuanchor="4thpage">Product Specs 2</li>
<li data-menuanchor="4thpage">Product Specs 3</li>
<li data-menuanchor="4thpage">Customer Care</li>
<li data-menuanchor="4thpage">Our App</li>
<li data-menuanchor="4thpage">Reservation/Contact</li>
</ul>
<div id="fullpage">
<!-- Section 0 -->
<div class="section" id="section0">
<h1>Van Dutch</h1>
<p>Visit Counter lorem ipsum </p>
</div>
<!--Section 1 -->
<div class="section" id="section1">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<div class="container">
<h2>Dynamic Tabs</h2>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
</div>
<!--Section 2 -->
<div class="section" id="section2">
<div class="intro">
<h1>Example</h1>
<p>HTML markup example to define 4 sections.</p>
<img src="imgs/example2.png" alt="example" />
</div>
</div>
<!--Section 3 -->
<div class="section" id="section3">
<div class="intro">
<h1>Working On Tablets</h1>
<p>
Designed to fit to different screen sizes as well as tablet and mobile devices.
<br /><br /><br /><br /><br /><br />
</p>
</div>
<img src="imgs/tablets.png" alt="tablets" />
</div>
<!--Left Sidebar -->
<div id="fp-nav" class="left" style="margin-top: -43.5px;">
<ul>
<li>
<span></span>
<div class="fp-tooltip left">fullPage.js</div>
</li>
<li>
<span></span>
<div class="fp-tooltip left">Powerful</div>
</li>
<li>
<span></span><div class="fp-tooltip left">Amazing</div>
</li>
<li>
<span></span><div class="fp-tooltip left">Simple</div>
</li>
</ul>
</div>

I managed to fix my issue using CSS.
#section1 .nav-tabs{
width: 100%;
position: absolute;
bottom: 0;
}

How to toggle visibility of nested list on click?

I have a nested lists:
<ol id="warningType">
<li id="Other">Other
<ul class="toggle_menu">
<li>Create() is conflict with Delete() when you are creating.</li>
<li>View() must have the same parent with Delete().</li>
</ul>
</li>
<li id="Input">Input
<ul class="toggle_menu">
<li>Get() can be the input of Create().</li>
</ul>
</li>
<li id="Exception">Exception
<ul class="toggle_menu">
<li>If you forget to delete all elements, Post() will throw Error A.</li>
<li>View() will throw IllegalException.</li>
</ul>
</li>
</ol>
I would like to click "Other""Input" and "Exception" to get or hide the nested list. Any help with it would be appreciated.

It is called Accordion, and actually it's not neccessary to insert tag into li tag. Here is example.
Your html:
<ul class="accordion">
<li>
<h3>Section 1</h3>
<p>Text 1 of this section Lorem ipsum.</p>
</li>
<li>
<h3>Section 2</h3>
<p>Text 1 of this section Lorem ipsum.</p>
</li>
<li>
<h3>Section 3</h3>
<p>Text 1 of this section Lorem ipsum.</p>
</li>
</ul>
Css:
* {
box-sizing: border-box;
}
body {
width: 100%;
margin: 0 auto;
background: #009788;
}
ul.accordion {
list-style-type: none;
width: 40%;
padding: 0px;
margin: 5% auto 0 auto;;
}
.accordion > li {
width: 100%;
display: block;
}
.accordion li > h3 {
background: #f5f5f5;
text-align: center;
margin: 0;
border-bottom: 2px solid #d6d6d6;
cursor: pointer;
padding: 10px 0px;
font-size: 24px;
}
.accordion li > h3:hover {
background: #ccc;
}
.accordion li > h3:after {
content: "+";
float: right;
margin-right: 2%;
}
.accordion li > p {
display: none;
background: #fff;
padding: 10px;
border-bottom: 2px solid #d6d6d6;
font-size: 20px;
margin: 0;
}
.accordion li h3.active:after {
content: "-";
float: right;
margin-right: 2%;
}
and Jquery code:
$(document).ready(function() {
$('h3').click(function(){
$(this).toggleClass('active');
$(this).siblings().not(':animated').slideToggle();
});
});

Are you looking for something like this accordion :
https://www.w3schools.com/howto/howto_js_accordion.asp
<!DOCTYPE html>
<html>
<head>
<style>
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
</head>
<body>
<h2>Animated Accordion</h2>
<p>Click on the buttons to open the collapsible content.</p>
<button class="accordion">Section 1</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
</script>
</body>
</html>

You can achieve this via accordion
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Other</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<ul class="toggle_menu">
<li>Create() is conflict with Delete() when you are creating.</li>
<li>View() must have the same parent with Delete().</li>
</ul></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Input</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body"><ul class="toggle_menu">
<li>Get() can be the input of Create().</li>
</ul></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Exception</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body"><ul class="toggle_menu">
<li>If you forget to delete all elements, Post() will throw Error A.</li>
<li>View() will throw IllegalException.</li>
</ul></div>
</div>
</div>
</div>
This is using bootstrap's collapsible accordion

how to stop mouse hover function in small window?

why,even after applying java script function to stop mouse hover in small window
it's not working? and even when i click on menu it's background color changes to black.every thing seems fine still it's not working ??
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kewaunee</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- bootstarp css-->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- userdefined css -->
<link rel="stylesheet" type="text/css" href="mystyle.css">
<!-- jquery file-->
<script src="assets/js/jquery.js"></script>
<!-- bootstarp js-->
<script src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="myscript.js"></script>
<style>
.navbar{
background-color: #3366cc;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="kewaunee.png"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">Home<b class="caret"></b>
<ul class="dropdown-menu">
<li>home 1</li>
<li>home2</li>
</ul>
</li>
<li class="dropdown">Master<b class="caret"></b>
<ul class="dropdown-menu">
<li>Add Region</li>
<li>Add Tax</li>
<li>Add Milestone</li>
<li>Add Customer</li>
</ul>
</li>
<li>Transaction</li>
<li>Report</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<!-- Trigger the modal with a button -->
<li><a data-toggle="modal" href="#myModal"><span class="glyphicon glyphicon-log-in" ></span> Login</a></li>
<!-- modal login form -->
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
</div>
<div class="modal-body">
<form role="form" method="post" action="#">
<div class="form-group-sm" class="col-xs-2">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group-sm" class="col-xs-2">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
Forgot password
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
<!--end of login form -->
</ul>
</div>
</div>
</nav>
<div class="container-fluid text-center">
<div class="row content">
<div class="col-sm-2 sidenav">
<p class="well">Master</p>
<p class="well">Transaction</p>
<p class="well">Report</p>
</div>
<div class="col-sm-8 text-left">
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<hr>
<h3>Test</h3>
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-2 sidenav">
<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>&#169 Kewaunee 2015</p>
</footer>
</body>
</html>
myscript.js
$(document).ready(function() {
if ($(window).width() > 768) {
$('.dropdown').on('mouseover', function(){
$('.dropdown-toggle', this).next('.dropdown-menu').show();
}).on('mouseout', function(){
$('.dropdown-toggle', this).next('.dropdown-menu').hide();
});
}
else {
$('.dropdown').off('mouseover').off('mouseout');
}
$('.dropdown-toggle').click(function() {
if ($(this).next('.dropdown-menu').is(':visible')) {
window.location = $(this).attr('href');
}
});
});
myscript.css
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
background-color: #3366cc;
}
.navbar.navbar-inverse{
position: relative;
top: 20px;
}
.navbar-brand{
padding-top: 5px;
}
.navbar-header
{
height:100%;
}
.navbar-inverse .navbar-nav>li>a
{
color: white;
}
.navbar-inverse .navbar-nav .dropdown>a:hover
{
background-color: red;
}
.dropdown:hover .dropdown-menu
{
background-color:#3366cc;
border: 1px solid blue;
}
.dropdown .dropdown-menu a
{
color: white;
}
.dropdown .dropdown-menu a:hover
{
background-color: red;
color: white;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content
{
height: 500px;
}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Dropdown menu*/
.caret-up {
width: 0;
height: 0;
border-left: 4px solid rgba(0, 0, 0, 0);
border-right: 4px solid rgba(0, 0, 0, 0);
border-bottom: 4px solid;
display: inline-block;
margin-left: 2px;
vertical-align: middle;
}
/* Set black background color, white text and some padding */
footer {
background-color: #3366cc;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
.modal-body{
height: 200px;
}
</style>

To me this seems to work fine, but if you want the effect not only on page refresh maybe you should in addition to $(document).ready() use also $(window).resize()

Redirecting to home page if scroll to div not exist

I dont know how well i can explain my problem so i have made two html files and try to explain my problem using those files.
I am using scroll to div element using jquery(the code i have taken from web) in my home page. so when a user clicks a link it will scroll down to that particular element in homepage. The problem is when the user move out of home page and to other webpages then those link becomes dead and will not work.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Scroll Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./script.js"></script>
</head>
<body>
<div class="main-wrap">
<h1>This is scroll demo</h1>
<div id="con1">
<h3>Container 1</h3>
<img src="./img/img1.jpg" alt="image 1" />
</div>
<div id="con2">
<h3>Container 2</h3>
<img src="./img/img2.jpg" alt="image 2" />
</div>
<div id="con3">
<h3>Container 3</h3>
<img src="./img/img3.jpg" alt="image 3" />
</div>
<div id="con4">
<h3>Container 4</h3>
<img src="./img/img4.jpeg" alt="image 4" />
</div>
<div id="con5">
<h3>Container 5</h3>
<img src="./img/img5.jpeg" alt="image 5" />
</div>
<div id="con6">
<h3>Container 6</h3>
<img src="./img/img6.jpg" alt="image 6" />
</div>
<div id="con7">
<h3>Container 7</h3>
<img src="./img/img7.jpg" alt="image 7" />
</div>
<div id="con8">
<h3>Container 8</h3>
<img src="./img/img8.jpg" alt="image 8" />
</div>
<div id="con9">
<h3>Container 9</h3>
<img src="./img/img9.jpg" alt="image 9" />
</div>
<div class="nav">
<ul id="navlist">
<li>Container 1</li>
<li>Container 2</li>
<li>Container 3</li>
<li>Container 4</li>
<li>Container 5</li>
<li>Container 6</li>
<li>Container 7</li>
<li>Container 8</li>
<li>Container 9</li>
<li>Container 10</li>
</ul>
</div>
</div>
<style>.main-wrap { width: 960px; border: 1px solid #CCC; margin: 0 auto }
img { max-width: 100%; }
.nav { background: #DDD; position: fixed; right: 10px; top: 10px; }
#navlist, #navlist li { list-style: none; margin: 0; padding: 0 }
#navlist li { margin: 20px }
#navlist li a { padding: 20px }
</style>
<script>
$('a[href^="#"]').on('click', function(event) {
var target = $( $(this).attr('href') );
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
}
});
</script>
</body>
</html>
lol.html
<!DOCTYPE html>
<html>
<head>
<title>Scroll Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./script.js"></script>
</head>
<body>
<div class="main-wrap">
<h1>container 10</h1>
<div>
<h3>Lorem ipsum dolor</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
</div>
<div class="nav">
<ul id="navlist">
<li>Container 1</li>
<li>Container 2</li>
<li>Container 3</li>
<li>Container 4</li>
<li>Container 5</li>
<li>Container 6</li>
<li>Container 7</li>
<li>Container 8</li>
<li>Container 9</li>
<li>Container 10</li>
</ul>
</div>
</div>
<style>.main-wrap { width: 960px; border: 1px solid #CCC; margin: 0 auto }
img { max-width: 100%; }
.nav { background: #DDD; position: fixed; right: 10px; top: 10px; }
#navlist, #navlist li { list-style: none; margin: 0; padding: 0 }
#navlist li { margin: 20px }
#navlist li a { padding: 20px }
</style>
<script>
$('a[href^="#"]').on('click', function(event) {
var target = $( $(this).attr('href') );
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
}
});
</script>
</body>
</html>
in this sample webpage it has 10 menus (container1-10). in this 10 menu 9 of them (container 1-9) will only work in index.html. container 10 menu links to another page lol.html.
The problem is when user is in lol.html if user click any menu from container 1-9 nothing happens. I want to redirect users to home page to that element when clicked container 1-9.
Hope i didn't confused anyone

First, edit your A tag in pages that are not the homePage for :
<li>Container 1</li>
And then, you can use something like this to detect a click from another page in your homePage:
//Used for the demo, just get the window's location
var simulatedURL = "www.domaine.org/#case4";
var getAnchor = simulatedURL.split("#");
$('a[href="#' + getAnchor[1] + '"]').trigger("click");
Please see the quick Fiddle

Hope this will work for you..
$('a[href^="#"]').on('click', function(event) {
var target = $( $(this).attr('href') );
if(target.length==0)
window.location.href='index.html'+$(this).attr('href');
else
{
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
}
});

Since you navigate to lol.html from your home page you can use history.back to get back the previous page.
$('a[href^="#"]').on('click', function(event) {
history.back();
});