How to place div container inside another div container, within a tab - javascript

Totally baffled because this should be so simple. I have a jquery tab structure. Within the first tab I've inserted a div container that appears as a yellow box. Inside this yellow box div I'm trying to insert a div. container that appears as a red box.
But I can't get the red box to appear inside the yellow box. I've tried the usual positioning and z-index, etc but strangely nothing works. I think I've become blind to the obvious.
Fiddle: https://jsfiddle.net/k1kphcm8/
$('.tabs-nav a').on('click', function(event) {
event.preventDefault();
$('.tab-active').removeClass('tab-active');
$(this).parent().addClass('tab-active');
$('.TabContainerClass div').hide();
$($(this).attr('href')).fadeIn(300)
});
$('.tabs-nav a:first').trigger('click'); // Default
.tabs-nav {
list-style: none;
margin: 0;
padding: 0;
}
.tabs-nav .tab-active a {
background: white;
font-size: 13px;
border-width: 1px;
border-bottom-color: white;
border-top-color: darkorange;
border-left-color: darkorange;
border-right-color: darkorange;
}
.tabs-nav a {
border-width: 0px 1px 1px 0px;
border-style: solid;
border-bottom-color: darkorange;
border-right-color: #C9C9C9;
background: #E6E6E6;
color: #7A7A7A;
display: block;
font-size: 12px;
height: 32px;
line-height: 32px;
text-align: center;
width: 122px;
}
.tabs-nav li {
float: left;
}
.TabContainerClass {
width: 491px;
height: 250px;
border: 1px solid darkorange;
border-top: 0;
clear: both;
position: relative;
background: white;
}
.YellowDivClass {
position: absolute;
background-color: yellow;
width: 350px;
height: 200px;
margin: 30px 0px 0px 20px;
z-index: 1;
}
.RedDivClass {
position: absolute;
background-color: red;
z-index: 10;
top: 0px;
left: 0px;
width: 50px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul class="tabs-nav">
<li class="tab-active">Countries
</li>
<li class="">Year
</li>
<li class="">Materials
</li>
<li class="">Products
</li>
</ul>
<div class="TabContainerClass">
<div id="YellowDiv" class="YellowDivClass">
<div id="RedDiv" class="RedDivClass"></div>
</div>
<div id="tab-2" style="display: none;">
<p>This is TAB 2</p>
</div>
<div id="tab-3" style="display: none;">
<p>This is TAB 3.</p>
</div>
<div id="tab-4" style="display: none;">
<p>This is TAB 4.</p>
</div>
</div>


To hide all the inactive tabs you are using:
$('.TabContainerClass div').hide();
which hides all the divs inside TabContainerClass which is not intended. Instead use this to hide only the direct children of TabContainerClass:
$('.TabContainerClass > div').hide();
UPDATED FIDDLE
$('.tabs-nav a').on('click', function(event) {
event.preventDefault();
$('.tab-active').removeClass('tab-active');
$(this).parent().addClass('tab-active');
$('.TabContainerClass > div').hide();
$($(this).attr('href')).fadeIn(300)
});
$('.tabs-nav a:first').trigger('click'); // Default
.tabs-nav {
list-style: none;
margin: 0;
padding: 0;
}
.tabs-nav .tab-active a {
background: white;
font-size: 13px;
border-width: 1px;
border-bottom-color: white;
border-top-color: darkorange;
border-left-color: darkorange;
border-right-color: darkorange;
}
.tabs-nav a {
border-width: 0px 1px 1px 0px;
border-style: solid;
border-bottom-color: darkorange;
border-right-color: #C9C9C9;
background: #E6E6E6;
color: #7A7A7A;
display: block;
font-size: 12px;
height: 32px;
line-height: 32px;
text-align: center;
width: 122px;
}
.tabs-nav li {
float: left;
}
.TabContainerClass {
width: 491px;
height: 250px;
border: 1px solid darkorange;
border-top: 0;
clear: both;
position: relative;
background: white;
}
.YellowDivClass {
position: absolute;
background-color: yellow;
width: 350px;
height: 200px;
margin: 30px 0px 0px 20px;
z-index: 1;
}
.RedDivClass {
position: absolute;
background-color: red;
z-index: 10;
top: 0px;
left: 0px;
width: 50px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul class="tabs-nav">
<li class="tab-active">Countries
</li>
<li class="">Year
</li>
<li class="">Materials
</li>
<li class="">Products
</li>
</ul>
<div class="TabContainerClass">
<div id="YellowDiv" class="YellowDivClass">
<div id="RedDiv" class="RedDivClass"></div>
</div>
<div id="tab-2" style="display: none;">
<p>This is TAB 2</p>
</div>
<div id="tab-3" style="display: none;">
<p>This is TAB 3.</p>
</div>
<div id="tab-4" style="display: none;">
<p>This is TAB 4.</p>
</div>
</div>


The problem one of your selectors. You are hiddding every div element instead of hidden only direct div elements. So instead of $('.TabContainerClass div').hide();. You should have $('.TabContainerClass > div').hide();

Related

Multiple dropmenu buttons - Open only clicked button

I found good split dropmenu button script.
Created multiple buttons, and problem is if I click one button then all dropmenus of other buttons open...
So what I want to accomplish is only to open dropmenu that i've clicked not all menus (10post per page so i have 10buttons) that are on page.
Guess I need some id recognition code in my .js.
my script:
$(function() {
var splitBtn = $(".x-split-button");
$("button.x-button-drop").on("click", function() {
if (!splitBtn.hasClass("open"))
splitBtn.addClass("open");
});
$(".x-split-button").click(function(event) {
event.stopPropagation();
});
$("html").on("click", function() {
if (splitBtn.hasClass("open"))
splitBtn.removeClass("open");
});
});
.x-split-button {
position: relative;
display: inline-block;
text-align: left;
margin-top: 20px;
}
.x-button {
position: relative;
margin: 0;
height: 30px;
float: left;
outline: none;
font-weight: 600;
line-height: 27px;
background: #F2F2F2;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 2px #E0E0E0;
}
.x-button:hover {
cursor: pointer;
background: #E0E0E0;
}
.x-button:active {
background: #D3D3D3;
}
.x-button.x-button-drop {
border-left: 0;
height: 30px;
}
.open > .x-button-drop-menu {
display: block;
}
.x-button-drop-menu {
position: absolute;
top: 27px;
right: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
background-color: #F2F2F2;
color: #000000;
background-clip: padding-box;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 2px #E0E0E0;
}
.x-button-drop-menu li a {
display: block;
padding: 3px 20px;
clear: both;
font-family: arial;
color: #000000;
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center><font color="green">1st forum post....text goes here....</font><br/>
<span class="x-split-button">
<button class="x-button x-button-main">Admin Options</button>
<button class="x-button x-button-drop">▼</button>
<ul class="x-button-drop-menu">
<li>
Edit
</li>
<li>
Delete
</li>
<li>
Move
</li>
</ul>
</span>
<br/><br/><br/><br/><br/><font color="green">2nd forum post....text goes here....</font><br/>
<span class="x-split-button">
<button class="x-button x-button-main">Admin Options</button>
<button class="x-button x-button-drop">▼</button>
<ul class="x-button-drop-menu">
<li>
Edit
</li>
<li>
Delete
</li>
<li>
Move
</li>
</ul>
</span>
</center>

jQuery $(this) is concerned about the element concerned in this function (Onclick). We use closest() to reach The parent container (.x-split-button) which is the targeted element in this case.
We can also use $(this).parent(".x-split-button").addClass("open");
In other situations, you could use $(this).parents(); when the container is not a direct parent.
$(function() {
var splitBtn = $(".x-split-button");
$("button.x-button-drop").on("click", function() {
if (!($(this).closest(".x-split-button").hasClass("open"))){
splitBtn.removeClass("open");
$(this).closest(".x-split-button").addClass("open");
}else{
$(this).closest(".x-split-button").removeClass("open");
}});
$(".x-split-button").click(function(event) {
event.stopPropagation();
});
$("body").on("click", function() {
if (splitBtn.hasClass("open"))
splitBtn.removeClass("open");
});
});
.x-split-button {
position: relative;
display: inline-block;
text-align: left;
margin-top: 20px;
}
.x-button {
position: relative;
margin: 0;
height: 30px;
float: left;
outline: none;
font-weight: 600;
line-height: 27px;
background: #F2F2F2;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 2px #E0E0E0;
}
.x-button:hover {
cursor: pointer;
background: #E0E0E0;
}
.x-button:active {
background: #D3D3D3;
}
.x-button.x-button-drop {
border-left: 0;
height: 30px;
}
.open > .x-button-drop-menu {
display: block;
}
.x-button-drop-menu {
position: absolute;
top: 27px;
right: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
background-color: #F2F2F2;
color: #000000;
background-clip: padding-box;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 2px #E0E0E0;
}
.x-button-drop-menu li a {
display: block;
padding: 3px 20px;
clear: both;
font-family: arial;
color: #000000;
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center><font color="green">1st forum post....text goes here....</font><br/>
<span class="x-split-button">
<button class="x-button x-button-main">Admin Options</button>
<button class="x-button x-button-drop">▼</button>
<ul class="x-button-drop-menu">
<li>
Edit
</li>
<li>
Delete
</li>
<li>
Move
</li>
</ul>
</span>
<br/><br/><br/><br/><br/><font color="green">2nd forum post....text goes here....</font><br/>
<span class="x-split-button">
<button class="x-button x-button-main">Admin Options</button>
<button class="x-button x-button-drop">▼</button>
<ul class="x-button-drop-menu">
<li>
Edit
</li>
<li>
Delete
</li>
<li>
Move
</li>
</ul>
</span>
</center>

align toggled div directly below parent

Having a little trouble trying to get a toggled div to align directly below the parent. It seems to appear to the right and slightly over the top of the parent.
This will be for use on an editor toolbar, the the text editor stackoverflow and various forums use.
Unsure on the best and simplest way to solve it.
$(document).on('click', ".editor-dropdown", function() {
$('.editor-dropdown-content', this).toggle(); // p00f
});
.editor-dropdown {
background: #ffffff;
border: 1px solid #ddd;
cursor: pointer;
float: left;
padding: 5px 14px;
}
.editor-dropdown-content {
display: none;
z-index: 900;
position: absolute;
background: #ffffff;
border: 1px solid #ddd;
padding: 5px 14px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="editor-dropdown">
Header
<b class="caret-down"></b>
<div class="editor-dropdown-content">
<span class="dropdown-option" data-tag="h1">H1</span> H2 H3 H4
</div>
</div>
Example: https://codepen.io/anon/pen/JNQZzM

Set the parent to position: relative then use top/left positioning to put the menu where you want it. If you want everything to align better, I would make the "header" text an element and apply the border/padding/etc to it and style the menu the same way set to left: 0; top: 100%; to left-align it and put it below "header"
$(document).on('click', ".editor-dropdown", function()
{
$('.editor-dropdown-content', this).toggle(); // p00f
});
.editor-dropdown {
float: left;
position: relative;
}
.dropdown-header {
background: #ffffff;
border: 1px solid #ddd;
cursor: pointer;
padding: 5px 14px;
display: inline-block;
}
.editor-dropdown-content {
display: none;
z-index: 900;
position: absolute;
background: #ffffff;
left: 0;
top: 100%;
border: 1px solid #ddd;
padding: 5px 14px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="editor-dropdown">
<span class="dropdown-header">Header</span>
<b class="caret-down"></b>
<div class="editor-dropdown-content">
<span class="dropdown-option" data-tag="h1">H1</span> H2 H3 H4
</div>
</div>

Please put "Header" text under span tag and give it a class like below:
<div class="editor-dropdown">
<span class="dropdoanHeader">Header</span>
<b class="caret-down"></b>
<div class="editor-dropdown-content">
<span class="dropdown-option" datatag="h1">H1</span>
H2
H3
H4
</div>
</div>
After that replace below css
.editor-dropdown
{
background: #ffffff;
border: 1px solid #ddd;
cursor: pointer;
float: left;
}
.dropdoanHeader
{
padding: 5px 14px;
}
.editor-dropdown-content
{
position:absolute;
padding-left:10px;
background: #ffffff;
border: 1px solid #ddd;
padding: 5px 14px;
}

I edited the CSS like below
.editor-dropdown-content
{
display: none;
z-index: 900;
position:relative;
background: #ffffff;
border: 1px solid #ddd;
padding: 5px 14px;
left: 60;
bottom: 100;
}
Was able to align it below header . Check the codepen below
https://codepen.io/anon/pen/xdoJKp

Is this what you are after?
$(document).on('click', ".editor-dropdown", function()
{
$('.editor-dropdown-content').toggle(); // p00f
});
.editor-dropdown
{
background: #ffffff;
border: 1px solid #ddd;
cursor: pointer;
padding: 5px 14px;
width: 200px;
}
.editor-dropdown-content
{
display: none;
background: #ffffff;
border: 1px solid #ddd;
padding: 5px 14px;
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="editor-dropdown">Header
<b class="caret-down"></b>
</div>
<div class="editor-dropdown-content">
<span class="dropdown-option" data-tag="h1">H1</span>
H2
H3
H4
</div>

You could try adding position: absolute; to the .editor-dropdown and then left: 0; to .editor-dropdown-content.
However, better is probably to take the .editor-dropdown-content out of the .editor-dropdown
https://codepen.io/anon/pen/dWBjpQ

Take a look at this one?
HTML:
<div class="editor-dropdown">
Header
<b class="caret-down"></b>
</div>
<div class="editor-dropdown-content">
<span class="dropdown-option" data-tag="h1">H1</span>
<span class="dropdown-option" data-tag="h1">H2</span>
<span class="dropdown-option" data-tag="h1">H3</span>
<span class="dropdown-option" data-tag="h1">H4</span>
</div>
Css:
.editor-dropdown
{
background: #ffffff;
border: 1px solid #ddd;
cursor: pointer;
padding: 5px 14px;
}
.editor-dropdown-content
{
display: none;
z-index: 900;
top: 40px;
background: #ffffff;
border: 1px solid #ddd;
padding: 5px 14px;
}
.dropdown-option {
display:block;
}
Javascript:
$(document).on('click', ".editor-dropdown", function()
{
$('.editor-dropdown-content').toggle(); // p00f
});
https://codepen.io/anon/pen/ZKdjLJ

Keep element with hover effect visible only if tooltip is being displayed

I have an anchor element which is hidden and turns visible only by hovering over it. When the user clicks the anchor a custom tool-tip appears with the native link of the anchor. The tool-tip is being displayed until the user clicks the "x" button or somewhere outside it. I want to keep the anchor(with the hover effect) visible as long as the tool-tip is being displayed and when the tool-tip is not displayed the anchor should again hidden and visible only by hovering.
$('a.anchor').click(function(event) {
event.stopPropagation();
var thistool = $(this).parent().find('div.tooltip');
$('div.tooltip').not(thistool).hide();
thistool.toggle();
thistool.find('input').select();
});
$('.icon-decline').on('click', function() {
$(this).parent().hide();
});
$('div.tooltip').on('click', function(event) {
event.stopPropagation();
});
$(document).on('click', function() {
$('div.tooltip').hide();
});
span {
position: relative;
}
.tooltip {
display: none;
position: absolute;
font-size: 15px;
line-height: 20px;
font-weight: normal;
color: #7b7a79;
width: auto;
white-space: nowrap;
text-align: center;
box-sizing: border-box;
border-radius: 6px;
background: #fff;
z-index: 1;
right: -208px;
bottom: -11%;
border: 2px solid #7b7a79;
}
.tooltip-arrow {
top: 50%;
left: -9px;
margin-top: -5px;
border-top: 5px solid transparent;
border-right: 7px solid #7b7a79;
border-bottom: 5px solid transparent;
}
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
}
.tooltip-inner {
max-width: 200px;
padding: 10px;
color: #fff;
text-align: center;
text-decoration: none;
background-color: #eff4f9;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
input {
border-left-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
background-color: #eff4f9;
}
.icon-decline {
display: block;
float: right;
position: relative;
top: -4px;
right: 2px;
height: 20px;
cursor: pointer;
}
.anchor i {
visibility: hidden;
}
h1:hover .anchor i {
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="intro">
<span>Intro
<div class="tooltip" style="display: none;">
<i class="icon-decline">X</i>
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
<input type="text" id="theInput" onfocus="this.select();" readonly="readonly" dir="rtl" value="http://local/someurl/somemore/#intro">
</div>
</div>
<a href="#intro" class="anchor">
<i class="icon-chain-link">#</i>
</a>
</span>
</h1>

Please see example, seems to do what you need?
Basically i created a css class which i add and remove when the tooltip is shown. Also changed visibility to display.
Relative parts
CSS
.icon-chain-link {
display: none;
}
h1:hover .icon-chain-link {
display: inherit;
}
.icon-show {
display: inherit;
}
Javascript these lines
$(this).find("i").addClass("icon-show");
$(".icon-chain-link").removeClass("icon-show");
$('a.anchor').click(function(event) {
event.stopPropagation();
$(this).find("i").addClass("icon-show");
var thistool = $(this).parent().find('div.tooltip');
$('div.tooltip').not(thistool).hide();
thistool.toggle();
thistool.find('input').select();
});
$('.icon-decline').on('click', function() {
$(this).parent().hide();
$(".icon-chain-link").removeClass("icon-show");
});
$('div.tooltip').on('click', function(event) {
event.stopPropagation();
});
$(document).on('click', function() {
$('div.tooltip').hide();
$(".icon-chain-link").removeClass("icon-show");
});
span {
position: relative;
}
.tooltip {
display: none;
position: absolute;
font-size: 15px;
line-height: 20px;
font-weight: normal;
color: #7b7a79;
width: auto;
white-space: nowrap;
text-align: center;
box-sizing: border-box;
border-radius: 6px;
background: #fff;
z-index: 1;
right: -208px;
bottom: -11%;
border: 2px solid #7b7a79;
}
.tooltip-arrow {
top: 50%;
left: -9px;
margin-top: -5px;
border-top: 5px solid transparent;
border-right: 7px solid #7b7a79;
border-bottom: 5px solid transparent;
}
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
}
.tooltip-inner {
max-width: 200px;
padding: 10px;
color: #fff;
text-align: center;
text-decoration: none;
background-color: #eff4f9;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
input {
border-left-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
background-color: #eff4f9;
}
.icon-decline {
display: block;
float: right;
position: relative;
top: -4px;
right: 2px;
height: 20px;
cursor: pointer;
}
.icon-chain-link {
display: none;
}
h1:hover .icon-chain-link {
display: inherit;
}
.icon-show {
display: inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="intro">
<span>Intro
<div class="tooltip" style="display: none;">
<i class="icon-decline">X</i>
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
<input type="text" id="theInput" onfocus="this.select();" readonly="readonly" dir="rtl" value="http://local/someurl/somemore/#intro">
</div>
</div>
<a href="#intro" class="anchor">
<i class="icon-chain-link">#</i>
</a>
</span>
</h1>

This could be one solution, add a class to the parent element when the tooltip is visible, i hope this can help you :)
$('a.anchor').click(function(event) {
event.stopPropagation();
var thistool = $(this).parent().find('div.tooltip');
$(this).closest('h1').toggleClass('tooltip-open');
thistool.find('input').select();
});
$('.icon-decline').on('click', function() {
$(this).closest('h1').removeClass('tooltip-open');
});
$('div.tooltip').on('click', function(event) {
event.stopPropagation();
});
$(document).on('click', function() {
$('h1').removeClass('tooltip-open');
});
span {
position: relative;
}
.tooltip {
display: none;
position: absolute;
font-size: 15px;
line-height: 20px;
font-weight: normal;
color: #7b7a79;
width: auto;
white-space: nowrap;
text-align: center;
box-sizing: border-box;
border-radius: 6px;
background: #fff;
z-index: 1;
right: -208px;
bottom: -11%;
border: 2px solid #7b7a79;
}
.tooltip-arrow {
top: 50%;
left: -9px;
margin-top: -5px;
border-top: 5px solid transparent;
border-right: 7px solid #7b7a79;
border-bottom: 5px solid transparent;
}
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
}
.tooltip-inner {
max-width: 200px;
padding: 10px;
color: #fff;
text-align: center;
text-decoration: none;
background-color: #eff4f9;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.tooltip-open .tooltip{
display: block;
}
input {
border-left-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
background-color: #eff4f9;
}
.icon-decline {
display: block;
float: right;
position: relative;
top: -4px;
right: 2px;
height: 20px;
cursor: pointer;
}
.anchor i {
visibility: hidden;
}
h1:hover .anchor i, .tooltip-open .anchor i {
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="intro">
<span>Intro
<div class="tooltip">
<i class="icon-decline">X</i>
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
<input type="text" id="theInput" onfocus="this.select();" readonly="readonly" dir="rtl" value="http://local/someurl/somemore/#intro">
</div>
</div>
<a href="#intro" class="anchor">
<i class="icon-chain-link">#</i>
</a>
</span>
</h1>

How can I append only once?

I'm new in jQuery, please help me to fix this case. every time I click it, the link will multiply. how can I stop append function only once, Please help me.
$(".dl-trigger").click(function() {
$("#ChildCat a").each(function() {
var cat = $(this);
$("<a />", {
"href": cat.attr("href"),
"text": cat.text()
}).appendTo("#dlmenu");
});
$("#dlmenu").slideDown("slow");
});
FIDDLE

Use one() method in jQuery, the handler execute once per element.
$(".dl-trigger").one('click', function() {
$("#ChildCat a").each(function() {
var cat = $(this);
$("<a />", {
"href": cat.attr("href"),
"text": cat.text()
}).appendTo("#dlmenu");
});
$("#dlmenu").slideDown("slow");
});
.clear {
clear: both;
float: none;
display: block;
}
.container {
max-width: 990px;
width: 100%;
margin: 0 auto;
}
.inner {
padding: 0px 10px;
}
#main {
margin: 10px auto;
}
.grid-two {
width: 50%;
}
[class*='grid-'] {
float: left;
display: block;
position: relative;
}
#header {
width: 100%;
line-height: 60px;
background: #FFF;
border-top: 4px solid #33AB83;
border-bottom: 1px solid #FEFEFE;
box-shadow: 0px 1px 1px #EEE;
position: relative;
left: -5px;
}
#topmenu {
display: none;
}
span.dl-trigger {
width: 30px;
height: 35px;
line-height: 35px;
text-align: center;
background: #33AB83;
color: #FFF;
padding: 15px 15px;
cursor: pointer;
position: absolute;
top: -4px;
right: -15px;
font-weight: bold;
}
#dlmenu {
width: 100%;
height: 100%;
background: #33AB83;
padding: 0px 15px;
position: relative;
left: -20px;
top: -15px;
display: none;
}
#dlmenu a {
width: 100%;
display: block;
padding: 5px 15px;
margin-left: -15px;
border-top: 1px solid #2a9471;
border-bottom: 1px solid #36b88d;
color: #296d56;
display: block;
text-shadow: 1px 1px 0px #49c39a;
}
#dlmenu a:hover {
background: #3bc094;
}
a {
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
<div class="container">
<div class="inner">
<div id="logo" class="grid-two">
<a title="Test Menu" href="http://localhost/">PLEASE CLICK on MENU ICON</a>
</div>
<!-- end of #logo -->
<div id="navigation" class="grid-two">
<span class="dl-trigger button green">☰</span>
<ul id="topmenu">
<li class="ParentCat">
<span><i class="fa fa-navicon" aria-hidden="true"></i> Parent Category</span>
<ul id="ChildCat">
<li>Category Category A
</li>
<li>Category B
</li>
<li>Category C
</li>
<li>Category D
</li>
<li>Category Category A
</li>
<li>Category B
</li>
<li>Category C
</li>
<li>Category D
</li>
</ul>
</li>
</ul>
</div>
<!-- end of #navigation -->
<div class="clear"></div>
</div>
<!-- end of .inner -->
</div>
<!-- end of .container -->
</header>
<!-- end of #header -->
<div id="main">
<div class="wrapper">
<div class="inner">
<div id="dlmenu"></div>
</div>
</div>
</div>
UPDATE :
If you just want to toggle the menu on click, then you can use slideToggle() as #A.Wolff suggested.
$(".dl-trigger").click(function() {
$("#dlmenu").slideToggle("slow");
});
$("#ChildCat a").appendTo("#dlmenu");
.clear {
clear: both;
float: none;
display: block;
}
.container {
max-width: 990px;
width: 100%;
margin: 0 auto;
}
.inner {
padding: 0px 10px;
}
#main {
margin: 10px auto;
}
.grid-two {
width: 50%;
}
[class*='grid-'] {
float: left;
display: block;
position: relative;
}
#header {
width: 100%;
line-height: 60px;
background: #FFF;
border-top: 4px solid #33AB83;
border-bottom: 1px solid #FEFEFE;
box-shadow: 0px 1px 1px #EEE;
position: relative;
left: -5px;
}
#topmenu {
display: none;
}
span.dl-trigger {
width: 30px;
height: 35px;
line-height: 35px;
text-align: center;
background: #33AB83;
color: #FFF;
padding: 15px 15px;
cursor: pointer;
position: absolute;
top: -4px;
right: -15px;
font-weight: bold;
}
#dlmenu {
width: 100%;
height: 100%;
background: #33AB83;
padding: 0px 15px;
position: relative;
left: -20px;
top: -15px;
display: none;
}
#dlmenu a {
width: 100%;
display: block;
padding: 5px 15px;
margin-left: -15px;
border-top: 1px solid #2a9471;
border-bottom: 1px solid #36b88d;
color: #296d56;
display: block;
text-shadow: 1px 1px 0px #49c39a;
}
#dlmenu a:hover {
background: #3bc094;
}
a {
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
<div class="container">
<div class="inner">
<div id="logo" class="grid-two">
<a title="Test Menu" href="http://localhost/">PLEASE CLICK on MENU ICON</a>
</div>
<!-- end of #logo -->
<div id="navigation" class="grid-two">
<span class="dl-trigger button green">☰</span>
<ul id="topmenu">
<li class="ParentCat">
<span><i class="fa fa-navicon" aria-hidden="true"></i> Parent Category</span>
<ul id="ChildCat">
<li>Category Category A
</li>
<li>Category B
</li>
<li>Category C
</li>
<li>Category D
</li>
<li>Category Category A
</li>
<li>Category B
</li>
<li>Category C
</li>
<li>Category D
</li>
</ul>
</li>
</ul>
</div>
<!-- end of #navigation -->
<div class="clear"></div>
</div>
<!-- end of .inner -->
</div>
<!-- end of .container -->
</header>
<!-- end of #header -->
<div id="main">
<div class="wrapper">
<div class="inner">
<div id="dlmenu"></div>
</div>
</div>
</div>

How to highlight anchor link when target div comes in view in jQuery?

I have a webpage like the following layout;
The HTML is;
<div class="header" style="text-align: center">Demo</div>
<div class="navi">
<div class="title">
Options
</div>
</div>
<div class="content">
<div class="da">
diva
divb
divc
divd
</div>
<div class="db">
<div style="width: 300px; height: 300px; background-color: #996633"><a id="diva" name="diva">DIV1</a></div>
<div style="width: 300px; height: 300px; background-color: #CC0066"><a id="divb" name="divb">DIV2</a></div>
<div style="width: 300px; height: 300px; background-color: #3300FF"><a id="divc" name="divc">DIV3</a></div>
<div style="width: 300px; height: 300px; background-color: #99CC00"><a id="divd" name="divd">DIV4</a></div>
</div>
</div>
<div class="footer"> </div>
and CSS is;
html, body, div, h2, img, ul, li, form, time {
margin: 0;
padding: 0;
border: 0;
}
html, body {
position: absolute;
height: 100%;
width: 100%;
min-width: 800px;
}
.header{
height: 40px;
color: #FFF;
background-color: #666666;
}
.title{
display: block;
float: left;
margin-top: 4px;
margin-left: 10px;
}
.content{
margin-bottom: 36px;
}
.footer{
height: 30px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
border-top: solid 1px #CCCCCC;
background: #FFFFFF;
}
.da,.db{
position: absolute;
z-index: 0;
top: 82px;
bottom: 30px;
}
.da{
width: 200px;
border-right: solid 1px #CCCCCC;
overflow: visible !important;
}
.da a{
font-family: Tahoma;
display: block;
padding: 10px;
text-decoration: none;
color: #555;
}
.da a:hover{
background-color: #DDD;
}
.da .current,.da .current:hover{
background-color: #FF6600;
}
.db{
left: 200px;
right: 0;
background-color: #CC99FF;
overflow: scroll;
overflow-x:hidden;
}
The links of sidebar are anchored to 4 cascaded divs. They are linked to divs and when I click on links, the corresponding div will scroll up. This worked fine. But I tried to achieve something different. The link of current visible div may be given orange background color, so that when user scrolls the page, the orange color will shift from one link to another, according to the current div on page. After some googling and research, I found this SO question useful jQuery changing css on navigation when div # scrolls into view. A demo of the solution is available in this fiddle which is exactly what I want.
But when I tried to implement this solution in my layout, it is not working, ie, links are not highlighting to corresponding div.
Here is my fiddle.
How can I implement the same in my layout?

Try this:
CSS:
.da,.db{
position: relative; // changed to relative. Because of absolute your document height is affected.
z-index: 0;
top: 82px;
bottom: 30px;
}
.db{
left: 142px;
top:42px;
right: 0;
background-color: #CC99FF;
overflow: scroll;
overflow-x:hidden;
}
jQuery:
$('.da a').removeClass('current').eq(i).addClass('current'); // replaced selected with current which you are using.
DEMO

I couldn't wrap my head around some of these answers, but I found this really simple idea.
It's basically saying that the mouse will be in view at some position on the screen, and if it is within a specific div, highlight the matching link.
HTML
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="nav">
<span id ="menu">☰</span>
<ul id="top-menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
</ul>
</div>
<div id="wrapper">
<div id="one" class="container">
one
</div>
<div id="two" class="container">
two
</div>
<div id="three" class="container">
three
</div>
<div id="four" class="container">
four
</div>
<div id="five" class="container">
five
</div>
<div id="six" class="container">
six
</div>
</div>
CSS
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
font-family: Geneva, Tahoma, Verdana, sans-serif;
margin: 0px;
}
.nav{
width: 100%;
height: 50px;
background: rgba(200,200,200,0.2);
position: fixed;
top: 0px;
}
#menu{
float: right;
font-size: 40px;
font-weight: normal;
padding-right: 20px;
color: rgba(100,100,100,0.9);;
}
.nav ul{
width: 150px;
list-style-type: none;
background: rgba(200,200,200,0.2);
border-radius: 5px;
}
#top-menu{
clear: both;
display: block;
float: right;
padding-left: 0px;
margin-top: 10px;
margin-right: 20px;
}
.links{
color: black;
font-size: 20px;
font-weight: normal;
}
.nav ul li a{
text-decoration: none;
text-align: center;
display: block;
padding: 2px 0px 2px 10px;
}
.nav ul li a:hover{
color: #fff;
background-color: black;
border-left: thick solid red;
}
#wrapper{
margin-top: 50px;
}
.container{
width: 800px;
height: 600px;
margin: 0px auto;
background: rgba(200,200,200,0.2);
border-bottom: 1px solid rgba(200,200,200,1);
padding: 20px;
}
.active{
color: white;
background-color: rgba(100,100,100,1);
border-left: thick solid rgba(0,255,0,0.5);
}
jQuery
$(document).ready(function(){
$("div").mouseenter(function(){
var id = $(this).attr('id');
$('a').removeClass('active');
$("[href=#"+id+"]").addClass('active');
});
});
Source

Categories