Jquery onclick Toggle large div menu - javascript

I am trying to expand menu What We Do Let's Meet.
The problem:div is below the navigation bar and acts like a large menu with 100% width. I made it working on codepen somehow but found solution to be naive. How can i have robust menu design where i can automatically get onclick toggle over every li element inside the ul with div class as target.
Secondary, i can't manage to change the background-color li element on click.
$( ".sub-menu1" ).click(function() {
$( ".sub-menu-list" ).toggle();
$( ".sub-menu-list1" ).hide();
});
$( ".sub-menu2" ).click(function() {
$( ".sub-menu-list1" ).toggle();
$( ".sub-menu-list" ).hide();
});
header.header {
color: #111;
background: rgba(255,255,255,1);
width: 100%;
displaY: flex;
justify-content: space-between;
font-weight:600;
}
header .header-item {
align-self: center;
}
header .header-items {
display:inline-block;
padding:0 3rem 0 0;
}
header li.header-items:last-child {
padding:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="header-item">
<li class='header-items'>Hi!</li>
<li class='header-items'><a class="sub-menu1" href="#" > What We Do</a></li>
<li class='header-items'><a class="sub-menu2" href="#">Let's Meet</a></li>
</nav>
</header>
<section class="sub-menu-list" onfocusout="closed()">
<div str-row>
<div class="box" str-xs="12" str-sm>
<a href="#"><img class="responsive" src="http://dummyimage.com/100x100/000/fff" />
<p>1</p>
</a>
</div>
<div class="box" str-xs="12" str-sm>
<a href="#"><img class="responsive" src="http://dummyimage.com/100x100/000/fff" />
<p>2</p>
</a>
</div>
<div class="box" str-xs="12" str-sm>
<a href="#"><img class="responsive" src="http://dummyimage.com/100x100/000/fff" />
<p>3</p>
</a>
</div>
<div class="box" str-xs="12" str-sm>
<a href="#"><img class="responsive" src="http://dummyimage.com/100x100/000/fff" />
<p>4</p>
</a>
</div>
</div>
<form class="ci_form" action='' method='post'>
<div str-row>
<div str-xs="12" str-sm="4" str-sm-offset="2">
<input type="text" placeholder="Enter Name" name="fname">
</div>
<div str-xs="12" str-sm="4">
<input type="tel" placeholder="Contact Number" name="phone">
</div>
</div>
<section str-row>
<div str-sm="4" str-sm-offset="2" str-xs="12">
</div>
<div str-sm="4" str-xs="12">
<select id="fieldselector">
<option value="0">Select Reason to Contact</option>
</select>
</div>
</section>
<div str-row>
<div str-xs="12" str-sm="8" str-sm-offset="2">
<button class="button submission">Get Quote</button>
</div>
</div>
</form>
</section>
<section class="sub-menu-list1">
<div str-row>
<div class="box" str-xs="12" str-sm>
<a href="#"><img class="responsive" src="http://dummyimage.com/100x100/000/fff" />
<p>1</p>
</a>
</div>
<div class="box" str-xs="12" str-sm>
<a href="#"><img class="responsive" src="http://dummyimage.com/100x100/000/fff" />
<p>2</p>
</a>
</div>
<div class="box" str-xs="12" str-sm>
<a href="#"><img class="responsive" src="http://dummyimage.com/100x100/000/fff" />
<p>3</p>
</a>
</div>
<div class="box" str-xs="12" str-sm>
<a href="#"><img class="responsive" src="http://dummyimage.com/100x100/000/fff" />
<p>4</p>
</a>
</div>
</div>
</section>
The code snippet is not looking accurate but can help to some extent. Codepen demo looks far better. link given above.

Related

How to make the second row of the second column be the same height as first column

I'm trying to build a layout which essentially looks like this (the blue line being the scroll bar)
But with how I have it right now the lower green box goes past the total height of the entire box. I've uploaded a rough version of what I have created onto codepen, I'm using the Bulma framework and essentially I want the lower box in the second column be a height where the total height of the left column equals the height of the right column.
So I want it to end where the black line is and have a scroll bar where the right hand side is.
I can set the height of the lower box to be a specific view height which fixes it a tiny bit and just set the overflow to scroll, but it gets messed up a bit if you try to resize.
At worst, I can do this with JavaScript by making the height of the lower box equal to height of left column - height of top box but I'm trying to see if there's a better CSS way.

My solution: set .column.is-2 to flex with direction column, set #getHeight display: block and make bottom one scrollable with overflow: auto.
Codepen demo: https://codepen.io/anon/pen/ZVJdgj
html {
overflow:hidden;
}
.fullh:not(:last-child) {
margin-bottom: 0rem;
}
.fullh:last-child {
margin-bottom: 0rem;
}
.fullh{
margin-top: 0rem;
margin-left: 0rem;
margin-right: 0rem;
}
.shadow {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
option:hover{
background-color:#F1F6FE;
}
.is-vertical-center {
display: flex;
align-items: center;
}
.component-helper {
cursor: pointer;
color: #74A2F8;
}
.component-helper:hover {
color: #504A77;
}
.column.is-2 {
display: flex;
flex-direction: column;
}
#getHeight {
display: block;
}
.column.is-2 > .scroll {
overflow: auto
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css" />
<link rel="icon" type="image/png" href="" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="dashboard_script.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<body>
<nav class="navbar is-transparent navbar-padding" role="navigation" aria-label="main navigation" style="background-color: #fafafa">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item nav-text" href="#" style="font-weight: 500;font-size: 1.5rem;color: #74A2F8;">
Test
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu">
<div class="navbar-end nav-text">
<a class="navbar-item">
Test
</a>
<a class="navbar-item">
Test
</a>
<a class="navbar-item">
Test
</a>
<a class="navbar-item" style="color:#f15870" href="/logout">
Test
</a>
</div>
</div>
</div>
</nav>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<section class="hero is-fullheight" style="background-color: #fafafa">
<div class="columns fullh" style="height:92vh;">
<div id="heightActual" class="column is-10">
<iframe class="shadow" src="/" frameborder="0" style="width: 100%;height:100%;">
</iframe>
</div>
<div class="column is-2">
<div id="getHeight" class="columns">
<div class="column">
<div class="box is-vertical-center is-centered" style="height:100%;background-color: #fafafa;">
<div class="has-text-centered" style="margin: 0 auto;">
<ul>
<li class="component-helper" id="add">Add Components</li>
<li class="component-helper" id="edit">Edit Components</li>
<li class="component-helper" id="order">Order Components</li>
<li class="component-helper" id="order">Add pages</li>
<li class="component-helper" id="order">View Pages</li>
</ul>
</div>
</div>
</div>
</div>
<div class="columns scroll">
<div class="column">
<div id="heightFix" class="box is-vertical-center is-centered" style="background-color: #fafafa;display:block;">
<div style="font-weight: 500;font-size: 1.2rem;">
All
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div style="font-weight: 500;font-size: 1.2rem;">
All
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div style="font-weight: 500;font-size: 1.2rem;">
All
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div style="font-weight: 500;font-size: 1.2rem;">
All
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Modal containing all the Elements -->
<div class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box" style="width: 100%;">
</div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
</body>
Hope this will help

How to trigger an event on specific html element with class in vanilla javascript

I'm trying to refactor my jquery code to vanilla because I want to use js properly. But I'm having a problem. I cannot figure out how for example trigger event only on third element with specific class. Because querySelector always returns the first element with that class for example this is my half finished code
const box = document.querySelector('.media-page--box-container');
$(box).on('mouseenter', () => {
// $(this). => select hovered element and do something only on it
console.log('enter')
}).on('mouseleave', () => {
console.log('leave')
});
.media-page--box-container:not(:first-child){
margin-top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
You can find example in the snippet

Use the code below if you want to add a listener to one element.
const box = document.querySelector('.media-page--box-container');
box.addEventListener("click", function() {
console.log("Clicked!");
});
<div class="media-page--box-container">.media-page--box-container</div>
Or this code for few elements
const boxes = document.querySelectorAll('.media-page--box-container');
boxes.forEach(function(box){
box.addEventListener("click", function() {
console.log("Clicked!");
});
});
<div class="media-page--box-container">.media-page--box-container 1</div>
<div class="media-page--box-container">.media-page--box-container 2</div>
<div class="media-page--box-container">.media-page--box-container 3</div>
querySelector returns one object, querySelectorAll and getElementsByClassName return array of objects. Not getElementsByClassName require class name, not selector in parameters.
console.log("querySelector", document.querySelector('.media-page--box-container'));
console.log("querySelectorAll", document.querySelectorAll('.media-page--box-container'));
console.log("getElementsByClassName", document.getElementsByClassName('media-page--box-container'));
<div class="media-page--box-container">.media-page--box-container 1</div>
<div class="media-page--box-container">.media-page--box-container 2</div>
<div class="media-page--box-container">.media-page--box-container 3</div>
Note, if there will be no elements on the page, methods will return null. So, you should check this case. If box will null, the code will break with an error.
const box = document.querySelector('.media-page--box-container');
console.log("box value", box);
// Wrong:
box.addEventListener("click", function() {
console.log("Clicked!");
});
// Correct:
if (box !== null)
box.addEventListener("click", function() {
console.log("Clicked!");
});
<div class="media-page--box-container-A">.media-page--box-container-A</div>
<div class="media-page--box-container-B">.media-page--box-container-B</div>

This answer should highlight a few things. You may need to handle event bubbling differently. I added e.target to the hover message. Your target is a block element that will trigger the mouse events even where you can't see it so I highlighted it in red. querySelectorAll will grab all elements not just the first one the way querySelector works.
const boxes = document.querySelectorAll('.media-page--box-container');
boxes[2].addEventListener("mouseover", myMouseover );
boxes[2].addEventListener("mouseleave", myMouseout);
function myMouseover(e) {
console.log('enter' + e.target);
}
function myMouseout() {
console.log('leave');
}
.media-page--box-container:not(:first-child) {
margin-top: 50px;
}
.media-page--box-container {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>

You can use querySelectorAll to retrieve all nodes matching your selector.
Because it returns a NodeList, which is an array-like object, you can traverse that by invoking array.prototype.foreach and passing through the nodelist.
From there you can add event listeners to each item in the node list, or any individual node based on the iterator.
const boxes = document.querySelectorAll('.media-page--box-container');
Array.prototype.forEach.call(boxes, (box, i) => {
if (i===2) {
box.addEventListener('mouseenter', () => {
console.log('enter')
});
box.addEventListener('mouseleave', () => {
console.log('leave')
});
}
});
.media-page--box-container:not(:first-child){
margin-top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>

Dynamically creating div height in 2 rows

So I am trying to get the height of the div toolLeft to match div height of toolRight and the same with beneLeft and beneRight. Below is my code, but only get the beneLeft height to change to match beneRight. Looked at some examples on where I could be wrong, but not seeing it. On top of that, my function has gotten super bloated. What is the best approach to this?
The code:
<div class="container">
<div class="homeHead col-md-12">
<h2>Welcome to the Navia Banefits participant portal, {{ ppt.Ppt.firstName }}!</h2>
<p>{{ ppt.Ppt.coName }} ({{ ppt.Ppt.coCode }})</p>
<div class="alerts">
<div id="example" ng-app="fpsClientApp">
<div class="demo-section k-header">
<div ng-controller="pptController">
<div kendo-tab-strip k-content-urls="[ null, null]" id="alertTabs">
<!-- tab list -->
<ul>
<li class="k-state-active">special messages</li>
<li>outstanding swipes</li>
<li>recent denials</li>
<li>upcoming dates</li>
<li>account alerts</li>
</ul>
<div class="alertCompany">
<p> {{ ppt.CompanyAlert.value }} </p>
</div>
<div class="alertSwipes">
<p ng-repeat="swipes in ppt.Swipes"><span class="col-md-2">{{swipes.date|date : 'MM/dd/yyyy'}}</span> <span class="col-md-9">{{date.descr}}</span></p>
</div>
<div class="alertDenials">
<p ng-repeat="denials in ppt.Denials"><span class="col-md-2">{{denials.date|date : 'MM/dd/yyyy'}}</span> <span class="col-md-9">{{denials.descr}}</span></p>
</div>
<div class="alertDates">
<p ng-repeat="dates in ppt.Dates"><span class="col-md-2">{{dates.key|date : 'MM/dd/yyyy'}}</span> <span class="col-md-9">{{dates.value}}</span></p>
</div>
<div class="alertAccounts">
<p ng-repeat="date in ppt.Alerts" ><span class="col-md-2">{{date.date|date : 'MM/dd/yyyy'}}</span> <span class="col-md-9">{{date.descr}}</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- begin Benefit Tile cards -->
<div class="beneArea">
<div class="beneLeft col-md-3">
<div>
<h2>My Benefit Statements</h2>
</div>
<div>
<p>Click on a benefit tile to access more detailed information.</p>
</div>
</div>
<div class="beneRight col-md-9">
<div class="beneTile col-md-3" data-ng-repeat="Benefits in ppt" style="margin: 4px; margin-left: 20px;">
<div class="beneHead">
<p>{{ ppt.Benefits[0].name }}</p>
</div>
<div class="beneDetails">
<div class="beneText">
<p class="beneDesc">Current Balance</p>
<p class="beneMoney">{{ ppt.Benefits[0].balance }}</p>
<p class="beneDesc">Annual Election</p>
<p class="beneMoney">{{ ppt.Benefits[0].annualAmt }}</p>
</div>
<div class="beneFooter" style="clear: both;">
<p><span>Last day to incur expenses:</span> <span style="float: right; padding-right: 10px;">{{ ppt.Benefits[0].lastIncurDate|date : 'MM/dd/yyyy' }}</span></p>
<p><span>Last day to submit claims:</span> <span style="float: right; padding-right: 10px;">{{ ppt.Benefits[0].lastSubmitDate|date : 'MM/dd/yyyy' }}</span></p>
</div>
</div>
</div>
</div>
</div>
<!-- end Benefit Tile cards -->
<!-- being Tool Tile cards -->
<div class="toolArea">
<div class="toolLeft col-md-3">
<div>
<h2>My Tools</h2>
</div>
<div>
<p>Click on a tile to access and maintain your account.</p>
</div>
</div>
<div class="toolRight col-md-9">
<div class="tools">
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/submiticon.svg" >
<p>Submit a Claim for Reimbursement</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/commuterOrder">
<img src="ppt/assets/toolIcons/commutericon.svg" >
<p>GoNavia Commuter</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/accessHsa">
<img src="ppt/assets/toolIcons/hsa.svg" >
<p>Access my HSA</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/clearSwipe">
<img src="ppt/assets/toolIcons/clearswipe.svg" >
<p>Clear a Swipe</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/naviconnect.svg" >
<p>Access NaviConnect</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/naviapp.svg" >
<p>Manage My Navi App</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/formsdocs.svg" >
<p>Forms and Documents</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/navicommuter.svg" >
<p>Access my NaviCommuter</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/requestnewcard.svg" >
<p>Request a new NaviCard</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/updateprofile.svg" >
<p>Update my Profile</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/onlineenrollment.svg" >
<p>Online Enrollment</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/recurring.svg" >
<p>My Recurring Claims</p>
</a>
</div>
</div>
</div>
</div>
<!-- end Tool Tile cards -->
</div>
<script>
$(document).ready(function () {
$("#alertTabs").kendoTabStrip({
tabPosition: "left",
animation: { open: { effects: "fadeIn" } }
});
});
var leftBeneHeight = $(".beneLeft").height();
var rightBeneHeight = $(".beneRight").height();
if (leftBeneHeight > rightBeneHeight) {
$(".beneRight").height(leftBeneHeight);
} else {
$(".beneLeft").height(leftBeneHeight);
};
var leftToolHeight = $(".toolLeft").height();
var rightToolHeight = $(".toolRight").height();
if (leftToolHeight > rightToolHeight) {
$(".toolRight").height(leftToolHeight);
} else {
$(".toolLeft").height(rightToolHeight);
};
</script>
Sorry couldn't provide a fiddle as this also pull from a private API.

This is how I would do it.
lvar leftToolHeight = $('.toolLeft').height();
var rightToolHeight = $('.toolRight').height();
if (leftToolHeight > rightToolHeight) {
$('.toolRight').height(leftToolHeight);
} else {
$('.toolLeft').height(rightToolHeight);
}
Do the same thing with beneLeft and beneRight. I hope this helps!

Rich Text Editor doesnot work properly in IE 10

I have Implemented richtext editor like this.
Problem 1. If i remove images and put simple div, it does not works. The function for
formatting is called, no error comes. But there is no output also. I tried this for div and span.
Problem 2. In IE 10, to format element I have to select previous element. Though it works well in firefox.
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script>
var txtEditor;
var viewHtml = 1;
function initDoc() {
txtEditor = $('#textBox')[0];
}
$(window).load(initDoc);
function formatDoc(sCmd, sValue) {
//if (validateMode()) { document.execCommand(sCmd, false, sValue);
$(txtEditor).focus(); }
document.execCommand(sCmd, false, sValue); $(txtEditor).focus();
}
function validateMode() {
if (viewHtml==1) { return true; }
alert("Uncheck \"Show HTML\".");
$(txtEditor).focus();
return false;
}
</script>
<style type="text/css">
#textBox {
margin-left: 10px;
width: 650px;
height: 200px;
border: 1px #000000 solid;
padding: 12px;
overflow: scroll;
}
#textBox , #sourceText {
padding: 0;
margin: 0;
max-width: 650px;
min-height: 200px;
}
#editMode label {
cursor: pointer;
}
.attributesStyle {
margin-left: 0px;
border: 1px solid #ccc;
padding: 3px;
float: left;
}
.link {
width: 16px;
height: 17px;
}
.floatLeft {
float: left;
}
.floatRight {
float: right;
}
.marginLeft10 {
margin-left: 10px;
}
.clearBoth {
clear: both;
}
a:hover {
cursor: pointer;
}
</style>
<body >
<form >
<input type="hidden" name="myDoc">
<div style="margin-bottom:10px;">
<div class="floatLeft marginLeft10">
<a onclick="formatDoc('formatBlock', '<h1>');">
<div id="h1" class="attributesStyle">
<img class="link" title="H1" src="~/Images/Heading1.png" />
</div>
</a>
<a onclick="formatDoc('formatBlock', '<h2>');">
<div id="h2" class="attributesStyle">
<img class="link" title="H2" src="~/Images/Heading2.png" />
</div>
</a>
<a onclick="formatDoc('formatBlock', '<h3>');">
<div id="h3" class="attributesStyle">
<img class="link" title="H3" src="~/Images/Heading3.png" />
</div>
</a>
<a onclick="formatDoc('formatBlock', '<h4>');">
<div id="h4" class="attributesStyle">
<img class="link" title="H4" src="~/Images/Heading4.png" />
</div>
</a>
<a onclick="formatDoc('formatBlock', '<h5>');">
<div id="h5" class="attributesStyle">
<img class="link" title="H5" src="~/Images/Heading5.png" />
</div>
</a>
<a onclick="formatDoc('formatBlock', '<h6>');">
<div id="h6" class="attributesStyle">
<img class="link" title="H6" src="~/Images/Heading6.png" />
</div>
</a>
<a onclick="formatDoc('formatblock', '<p>');">
<div id="divParagraph" class="attributesStyle">
<img class="link" title="Paragraph" src="~/Images/paragraph.png" />
</div>
</a>
<a onclick="formatDoc('formatblock', '<pre>');">
<div id="divParagraph" class="attributesStyle">
Pre
</div>
</a>
<a onclick="formatDoc('formatblock', '<blockquote>');">
<div class="attributesStyle">
<img class="link" title="Quote" src="~/Content/themes/base/images /quote_1.png" />
</div>
</a>
</div>
<div class="floatLeft marginLeft10">
<a onclick="formatDoc('bold');">
<div id="bolds" class="attributesStyle" title="Bold">
<img class="link" title="Bold" src="~/Images/text_bold.png" />
</div>
</a>
<a onclick="formatDoc('italic');">
<div id="italic" class="attributesStyle" title="Italic">
<img class="link" title="Italic" src="~/Images/text_italic.png" />
</div>
</a>
<a onclick="formatDoc('underline');">
<div class="attributesStyle" title="Underline">
<img class="link" title="Underline" src="~/Images/text_underline.png" />
</div>
</a>
<a onclick="formatDoc('insertorderedlist');">
<div class="attributesStyle">
<img class="link" title="Order List" src="~/Content/themes/base/images/list_numbered_32.png" />
</div>
</a>
<a onclick="formatDoc('insertunorderedlist');">
<div class="attributesStyle">
<img class="link" title="Bullets List" src="~/Content/themes/base/images/text_list_bullets.png" />
</div>
</a>
<a onclick="formatDoc('undo');">
<div class="attributesStyle" title="undo">
<img class="link" src="~/Content/themes/base/images/rotateLeft.png" />
</div>
</a>
<a onclick="formatDoc('redo');">
<div class="attributesStyle" title="redo">
<img class="link" src="~/Content/themes/base/images/rotateRight.png" />
</div>
</a>
</div>
<div class="floatLeft marginLeft10">
<a onclick="formatDoc('justifyleft');">
<div class="attributesStyle" title="Justify left">
<img id="justifyleft" class="link" title="Justify Left" src="~/Content/themes/base/images/text_align_left.png" />
</div>
</a>
<a onclick="formatDoc('justifycenter');">
<div class="attributesStyle" title="Justify Center">
<img id="justifycenter" class="link" title="Justify Center" src="~/Content/themes/base/images/text_align_center.png" />
</div>
</a>
<a onclick="formatDoc('justifyright');">
<div class="attributesStyle" title="Justify Right">
<img id="justifyright" class="link" title="Justify Right" src="~/Content/themes/base/images/text_align_right.png" />
</div>
</a>
</div>
<a id="divToggleHtml" >
<div class="attributesStyle" title="Toggle Html">
Toggle HTML
</div>
</a>
<div class="floatLeft marginLeft10">
<a onclick="javascript: var sLnk = prompt('Write the URL here', 'http:\/\/'); if (sLnk && sLnk != '' && sLnk != 'http://') { formatDoc('CreateLink', sLnk); }">
<div class="attributesStyle" title="Add Link">
<img class="link" src="~/Content/themes/base/images/link.png" />
</div>
</a>
<a onclick="formatDoc('InsertImage', true);">
<div class="attributesStyle" title="Add Image">
<img class="link" src="~/Content/themes/base/images/image.png" />
</div>
</a>
<a onclick="formatDoc('Unlink');">
<div class="attributesStyle" title="Unlink">
<img class="link" src="~/Content/themes/base/images/brokenLink.png" />
</div>
</a>
</div>
<div class="clearBoth">
</div>
</div>
<div id="textBox" contenteditable="true"><i>Amit Sinha</i></div>
<p style="display:none;" id="editMode"><input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" /> <label for="switchBox">Show HTML</label></p>
<p><input type="submit" value="Send" style="display:none;" /></p>
</form>
</body>

i can provide a solution to the first problem.
didn't work for me either as long as i had text in there. problem seemed to be some kind of "select text instead of respond to the click"
add these css-settings for your button-divs:
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select:none;
this should make your controls respond to clicking.
unfortunately, i can't test your 2nd problem as i'm working on linux ;)

Drop-down menu hidden behind JS slideshow

I have created a submenu, it is hidden behind a banner which uses JavaScript, hover effect is also not working on the submenu items.
I want the submenu to appear over the banner.
Here is my code:
<!--menu_wrap-->
<div class="menu_wrap">
<ul class="menu">
<ul class="mainMenus">
<li class="home" onclick='showSubMenu("sm_item1")'>Yuave for
<li>
<img src="images/divider.png" width="2" height="50" />
</li>
<ul class="subMenus" id="sm_item1" style="float:left; width:235px; margin-left:302px; margin-top:92px">
<div id="top_triangle" class="top_triangle1" style="height:10px; width:200px;">
<div class="chat-bubble-arrow-border1"></div>
<div class="chat-bubble-arrow1"></div>
</div>
<div id="cont" style="float:left; width:235px; height:220px; background:#E7EDED; border-top-right-radius:8px; border-top-left-radius:8px; border-bottom-left-radius:8px; color: #37A0C0; font-family: 'Carme'; font-size: 18px; text-decoration: none;" class="hover">
<div id="btop" style="float:left; width:235px; height:11px;"></div>
<div id="item1" style="float:left; width:235px; height:33px;" onMouseOver="show('div1')" onMouseOut="hide('div1')">
<div id="tx1" style="float:left; margin-left:0px; width:228px; height:26px;" onMouseOver="this.style.background='#F1F5F6'" onMouseOut="this.style.background='#E7EDED'">
<div id="txtchng" style="float:left; margin-left:20px;"> <a href="#" style="text-decoration:none; color:#37A0C0">
Online Sellers
</a>
</div>
</div>
</a>
</div>
<div id="item1" style="float:left; width:235px; height:33px" onMouseOver="show('div1')" onMouseOut="hide('div1')">
<div id="tx1" style="float:left; margin-left:0px; width:228px; height:26px;" onMouseOver="this.style.background='#F1F5F6'" onMouseOut="this.style.background='#E7EDED'">
<div id="txtchng" style="float:left; margin-left:20px;"> <a href="#" style="text-decoration:none; color:#37A0C0">
Charities and non-profit
</a>
</div>
</div>
</a>
</div>
<div id="item1" style="float:left; width:235px; height:33px" onMouseOver="show('div1')" onMouseOut="hide('div1')">
<div id="tx1" style="float:left; margin-left:0px; width:228px; height:26px;" onMouseOver="this.style.background='#F1F5F6'" onMouseOut="this.style.background='#E7EDED'">
<div id="txtchng" style="float:left; margin-left:20px;"> <a href="#" style="text-decoration:none; color:#37A0C0">
Events and Classes
</a>
</div>
</div>
</a>
</div>
<div id="item1" style="float:left; width:235px; height:33px" onMouseOver="show('div1')" onMouseOut="hide('div1')">
<div id="tx1" style="float:left; margin-left:0px; width:228px; height:26px;" onMouseOver="this.style.background='#F1F5F6'" onMouseOut="this.style.background='#E7EDED'">
<div id="txtchng" style="float:left; margin-left:20px;"> <a href="#" style="text-decoration:none; color:#37A0C0">
Tech Stars
</a>
</div>
</div>
</a>
</div>
<div id="item1" style="float:left; width:235px; height:33px" onMouseOver="show('div1')" onMouseOut="hide('div1')">
<div id="tx1" style="float:left; margin-left:0px; width:228px; height:26px;" onMouseOver="this.style.background='#F1F5F6'" onMouseOut="this.style.background='#E7EDED'">
<div id="txtchng" style="float:left; margin-left:20px;"> <a href="#" style="text-decoration:none; color:#37A0C0">
Health and Beauty
</a>
</div>
</div>
</a>
</div>
<div id="item1" style="float:left; width:235px; height:33px" onMouseOver="show('div1')" onMouseOut="hide('div1')">
<div id="tx1" style="float:left; margin-left:0px; width:228px; height:26px;" onMouseOver="this.style.background='#F1F5F6'" onMouseOut="this.style.background='#E7EDED'">
<div id="txtchng" style="float:left; margin-left:20px;"> <a href="#" style="text-decoration:none; color:#37A0C0">
Services and Trade
</a>
</div>
</div>
</a>
</div>
<div id="bbot" style="float:left; width:235px; height:11px;"></div>
</div>
<div id="div1" style="float:left; width:213px; height:220px; background:#F1F5F6; margin-left:226px; margin-top:-220px; border-top-right-radius:8px; border-bottom-right-radius:8px; font-family: 'Carme'; ">
<div id="xbtop" style="float:left; width:213px; height:5px;"></div>
<div id="image_box" style="float:left; width:200px; height:120px; margin-left:13px">
<div id="mboximg" style="float:left; margin-left: 50px; margin-top: 12px;">
<img src="images/GNOC_orange.png" />
</div>
</div>
<div id="bhead" style="float:left; width:200px; height:25px; color:#37A0C0; font-size: 16px; margin-left:13px; font-weight:bold">Perfect for:</div>
<div id="btxts" style="float:left; width:200px; height:65px; color:#666; margin-left:13px; font-size:12px">Amazon Sellers</br>Online Shop</br>Facebook Sellers</br>eBay Sellers</br>
</div>
<div id="xbbotom" style="float:left; width:213px; height:5px"></div>
</div>
</ul>
</li>
</ul>
<li> <a <?php if($base_path=='howit_works.php' ){ ?> class="selective" <?php } ?> href="<?php echo $base_path.'/howit_works.php'; ?>">How it works</a>
</li>
<li>
<img src="images/divider.png" width="2" height="50" />
</li>
<li> <a <?php if($base_path=='satisfy_customer.php' ){ ?> class="selective" <?php } ?> href="<?php echo $base_path.'/satisfy_customer.php'; ?>">Happy customers</a>
</li>
<li>
<img src="images/divider.png" width="2" height="50" />
</li>
<li> <a <?php if($base_path=='register_page.php' ){ ?> class="selective" <?php } ?> href="<?php echo $base_path.'/register_page.php'; ?>">Get started </a>
</li>
<li>
<img src="images/divider.png" width="2" height="50" />
</li>
<li class="contact" style="padding-right:0px;"> <a <?php if($base_path=='contact_us.php' ){ ?> class="selective" <?php } ?> href="<?php echo $base_path.'/contact_us.php'; ?>">Contact us</a>
</li>
</ul>
</div>
<!--menu_wrap-->
</div>
<!--content_row-->
<!--content_row-->
<div class="content_row">
<div id="container">
<div id="example">
<div id="slides">
<div class="slides_container">
<div class="slide">
<div class="div_left_slid">
<div class="content">
<h4>Customer Interaction for all businesses</h4>
<h3>Automate call handling. Improve Customer Service. Increase productivity</h3>
</div>
</div>
<div class="div_right_slid">
<img style="float:right" src="images/IP_telephone_gray.png" height="157" />
</div>
</div>
<div class="slide">
<div class="div_left_slid">
<div class="content">
<h4>Improve your bottom line</h4>
<h3>Project big company Image. Manage existing customers. Attract new customers</h3>
</div>
</div>
<div class="div_right_slid">
<img src="images/Growth_1_orange_header.png" height="175" />
</div>
</div>
<div class="slide">
<div class="div_left_slid">
<div class="content">
<h4>Get started in minutes</h4>
<h3>Easy to use self-service interface. Accessible from computer, tables or mobile. No software download. No activation delays</h3>
</div>
</div>
<div class="div_right_slid">
<img src="images/jongl.png" height="175" />
</div>
</div>
</div> <img src="images/arrow_left.png" width="24" height="43" alt="Arrow Prev">
<img src="images/arrow_right.png" width="24" height="43" alt="Arrow Next">
</div>
</div>
</div>
</div>
<!--content_row-->

I know this is an older question, but here is an answer:
.menu {
position: relative; /* if you haven't already set this element to position absolute/relative, leave this intact, otherwise erase this line*/
z-index: 9999; /* sets stacking order above almost any element on page*/
}
The property to look at here would be z-index: http://www.w3.org/wiki/CSS/Properties/z-index

Categories

Resources