Hover to display element not work on All ie - css

I am trying to display element on mouse hover using below codes, this works fine in all browsers except IE.
test_g1.php
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script language="JavaScript">
var HttPRequest = false;
function doCallAjax(ID) {
HttPRequest = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
HttPRequest = new XMLHttpRequest();
if (HttPRequest.overrideMimeType) {
HttPRequest.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
HttPRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
HttPRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!HttPRequest) {
alert('Cannot create XMLHTTP instance');
return false;
}
var url = 'test_g2.php';
var pmeters = "tID="+ID;
HttPRequest.open('POST',url,true);
HttPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
HttPRequest.setRequestHeader("Content-length", pmeters.length);
HttPRequest.setRequestHeader("Connection", "close");
HttPRequest.send(pmeters);
HttPRequest.onreadystatechange = function() {
if(HttPRequest.readyState == 3) // Loading Request
{
document.getElementById("mySpan").innerHTML = "<div>Now is Loading...</div>";
}
if(HttPRequest.readyState == 4) // Return Request
{
document.getElementById('mySpan').innerHTML = HttPRequest.responseText;
$('#mySpan div').hide();
$('#mySpan div').each(function(index){
$(this).delay(50*index).fadeIn(500);
});
}
}
}
</script>
</head>
<body Onload="JavaScript:doCallAjax('cat');">
<h1>CAT OR FLOWER</h1>
cat<br>
flower<br>
<span id="mySpan"></span>
</body>
</html>
test_g2.php
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<style type="text/css">
<!--
.recent-items {
list-style: none;
margin: 0 auto;
width: 940px;
overflow: hidden;
padding-left: 22px;
padding-top: 360px;
padding-bottom: 11px;
margin-top: -207px;
}
.thumbnail {
float: left;
margin: 7px;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
.imgWrap {
position: relative;
}
.imgDescription1 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(29, 106, 154, 0.72);
color: #fff;
visibility: hidden;
opacity: 0;
}
.imgWrap:hover .imgDescription1 {
visibility: visible;
opacity: 1;
border: 1px solid #000;
background: #333;
padding: 0px 10px 7px;
margin-left: 94px;
width: 201px;
height: 286px;
text-align: center;
position: absolute;
margin-top: -225px;
display: none;
z-index: 999;
padding-top: 10px;
}
-->
</style>
<?PHP
$strID = $_POST["tID"];
if ($strID == "cat")
{
$show[0] = "www.catchannel.com/images/articles/cat-yellow-200px.jpg";
$show[1] = "www.fairydol.com/wp-content/uploads/2013/09/c4-200x200.jpg";
$show[2] = "www.fairydol.com/wp-content/uploads/2013/09/cat3-200x200.jpg";
}
else
{
$show[0] = "www.flowerpicturegallery.com/d/228-4/flowers-rose-pictures.jpg";
$show[1] = "www.no1reviews.com/images/category-images/flower-delivery-usa.jpg";
$show[2] = "images.all-free-download.com/images/graphicmedium/hd_flower_picture_03_hd_pictures_169251.jpg";
}
?>
<ul class="recent-items" style=" width: 940px; ">
<?PHP
for($i=0;$i<3;$i++)
{
?>
<li class="thumbnail" style=" float: left; margin: 7px; width: 80px; ">
<div class="imgWrap">
<div style=" float: left; " >
<a href="aa.php">
<img border="0" src="http://<?PHP echo $show[$i]; ?>" width="80" height="80" />
</a>
</div>
<div class="imgDescription1"><img src="http://<?PHP echo $show[$i]; ?>"/><br>description.........</div>
</div>
</li>
<?PHP
}
?>
</ul>
What could be the possible issue and what am i missing here?


if manupulation is done with visibility 'display:none' is redundant here:
imgWrap:hover .imgDescription1 {
visibility: visible;
opacity: 1;
display: none;
}

Related

Custom WordPress nav menu the last li item – two social icons

I need to create WordPress custom nav menu containing two social icons in the last li item.
document.addEventListener('DOMContentLoaded', function() {
// Toggle
const btn = document.querySelector('#btnToggle');
btn.addEventListener('click', function(e) {
e.preventDefault();
document.body.classList.toggle('nav-show');
this.classList.toggle('btn-toggle--toggled');
});
// Highlight current page active menu item.
const selector = '.nav__link';
const elems = Array.from(document.querySelectorAll(selector));
const navigation = document.querySelector('nav');
function makeActive(evt) {
const target = evt.target;
if (!target || !target.matches(selector)) {
return;
}
elems.forEach(elem => elem.classList.remove('active'));
evt.target.classList.add('active');
};
navigation.addEventListener('mousedown', makeActive);
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
overflow-x: hidden;
}
img {
max-width: 100%;
display: block;
}
.social__link {
display: block;
}
svg {
width: 100%;
display: block;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.container {
margin: 0 auto;
width: 100%;
max-width: 1400px;
}
.header {
position: sticky;
top: 0;
background-color: #fff;
z-index: 1;
}
.logo__container {
padding: .3125rem .3125rem .625rem;
}
.logo {
display: flex;
align-items: center;
}
.logo__heart {
flex-basis: 27%;
}
.hgroup {
padding-left: .625rem;
}
.headline__light {
display: none;
}
.headline {
font-size: 1.25rem;
text-transform: uppercase;
margin: 0;
}
.navigation__container {
align-items: center;
}
.header__item {
display: flex;
}
.btn-toggle button {
background: none;
border: 0;
}
.btn-toggle {
width: 40px;
height: 40px;
cursor: pointer;
border: 1px solid #DDD;
border-radius: 4px;
padding: 9px;
position: absolute;
top: 24px;
right: 20px;
background: none;
}
.btn-toggle .line {
background: #888;
border-radius: 10px;
display: block;
position: absolute;
height: 2px;
transform: translate(-50%, -50%) rotate(0deg);
transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
opacity: 1;
top: 50%;
left: 50%;
width: 80%;
}
.btn-toggle .line:nth-child(1) {
margin-top: -6px;
}
.btn-toggle .line:nth-child(3) {
margin-top: 6px;
}
.btn-toggle--toggled .line:nth-child(2) {
opacity: 0;
}
.btn-toggle--toggled .line:nth-child(1) {
margin-top: 0;
transform: translate(-50%, -50%) rotate(45deg);
}
.btn-toggle--toggled .line:nth-child(3) {
margin-top: 0;
transform: translate(-50%, -50%) rotate(-45deg);
}
.nav {
background: #F2EFE8;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
max-height: 0;
overflow: hidden;
transition: 0.5s max-height;
}
.nav-show .nav {
max-height: 700px;
}
.nav__list {
display: flex;
flex-direction: column;
background: #F2EFE8;
border-top: 1px solid #DDD;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.nav__item {
flex-basis: 100%;
text-transform: uppercase;
font-size: .875rem;
text-align: center;
border-bottom: 1px solid #888;
letter-spacing: .0625rem;
}
.nav__link {
display: block;
text-decoration: none;
text-transform: uppercase;
color: #222;
padding: .625rem;
}
.nav__link:hover {
background: #c2def7;
}
.nav__link.active {
background: #abd4f8;
}
.icon__container {
display: flex;
justify-content: space-evenly;
align-items: center;
}
.nav__item.social__icon {
padding: .625rem;
}
.icon {
width: 10%;
}
#media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
.nav__list {
flex-direction: row;
flex-wrap: wrap;
}
.nav__item {
width: 50%;
flex-basis: 50%;
}
.nav__item:nth-of-type(1) {
order: 1;
}
.nav__item:nth-of-type(2) {
order: 3;
}
.nav__item:nth-of-type(3) {
order: 5;
}
.nav__item:nth-of-type(4) {
order: 7;
}
.nav__item:nth-of-type(5) {
order: 9;
}
.nav__item:nth-of-type(6) {
order: 2;
}
.nav__item:nth-of-type(7) {
order: 4;
}
.nav__item:nth-of-type(8) {
order: 6;
}
.nav__item:nth-of-type(9) {
order: 8;
}
.nav__item:nth-of-type(10) {
order: 10;
padding: .3125rem 0;
border-bottom: 1px solid #888;
}
.icon {
width: 9%;
}
}
#media only screen and (min-width: 768px) {
.logo__heart {
flex-basis: 25%;
}
.hgroup {
flex-basis: 71%;
}
.headline__light {
display: block;
font-size: .875rem;
text-transform: none;
}
.nav__list {
flex-grow: 1;
flex-wrap: wrap;
flex-direction: row;
}
.nav__item {
width: 33.33%;
flex-basis: 33.33%;
}
.nav__item:nth-of-type(1) {
order: 1;
}
.nav__item:nth-of-type(2) {
order: 4;
}
.nav__item:nth-of-type(3) {
order: 7;
}
.nav__item:nth-of-type(4) {
order: 2;
}
.nav__item:nth-of-type(5) {
order: 5;
}
.nav__item:nth-of-type(6) {
order: 8;
}
.nav__item:nth-of-type(7) {
order: 3;
}
.nav__item:nth-of-type(8) {
order: 6;
}
.nav__item:nth-of-type(9) {
order: 9;
}
.nav__item:nth-of-type(10) {
order: 10;
padding: .625rem;
flex-basis: 100%;
}
.icon {
width: 4%;
}
}
#media only screen and (min-width: 1024px) {
.logo {
width: 100%;
}
.logo__heart {
flex-basis: 30%;
}
.hgroup {
flex-basis: 100%;
padding: 0;
}
.unboxing__trick {
background-color: #F2EFE8;
width: 100vw;
position: relative;
margin: 0 calc(-50vw + 50%);
padding: 0 calc(50vw - 50%);
}
.btn-toggle {
display: none;
}
.nav {
max-height: 100%;
transition: none;
transition-duration: 0s;
display: flex;
flex-direction: row;
}
.nav__list {
flex-direction: row;
flex-wrap: nowrap;
border-top: none;
padding: .625rem 0;
}
.nav__item {
flex-basis: auto;
width: auto;
flex-grow: 1;
flex: 1 1 auto;
position: relative;
border-bottom: none;
}
.nav__item:after {
content: '';
position: absolute;
width: 1px;
left: 0;
top: 0;
bottom: 0;
background: linear-gradient(hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, .20) 50%, hsla(0, 0%, 0%, 0) 100%);
}
.nav__item:last-of-type {
border-right: 0;
}
.nav__item:nth-of-type(1) {
order: 1;
}
.nav__item:first-child::after {
display: none;
}
.nav__item:nth-of-type(2) {
order: 2;
}
.nav__item:nth-of-type(3) {
order: 3;
}
.nav__item:nth-of-type(4) {
order: 4;
}
.nav__item:nth-of-type(5) {
order: 5;
}
.nav__item:nth-of-type(6) {
order: 6;
}
.nav__item:nth-of-type(7) {
order: 7;
}
.nav__item:nth-of-type(8) {
order: 8;
}
.nav__item:nth-of-type(9) {
order: 9;
}
.nav__item:nth-of-type(10) {
order: 10;
flex: 1 1 8%;
padding: .3125rem 0;
border-bottom: none;
}
.nav__link:hover {
background: none;
color: #b8795a;
}
.nav__link.active {
background: none;
color: #b8795a;
}
.icon {
width: 25px;
}
}
#supports (position: sticky) {
.header {
position: sticky;
top: 0;
}
}
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title></title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="style.css">
<script src="app.js"></script>
</head>
<body>
<header class="header">
<section class="container">
<div class="header__container">
<div class="logo__container header__item">
<div class="logo">
<div class="logo__heart">
<img class="img__logo" src="http://placehold.it/169x160" alt="" title="">
</div>
<div class="hgroup">
<h1 class="headline__bold headline">Czysta świadomość</h1>
<h2 class="headline__light headline">
... stan bycia poza umysłem, wolny od goniących myśli, wszelkich uwarukowań, pobudek ego.<br> Czysta Świadomość to prawdziwe JA... to Światło i Miłość
</h2>
</div>
</div>
</div>
<nav class="navigation__container">
<button class="btn-toggle" id="btnToggle" aria-label="Open / Close Menu">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</button>
<div class="unboxing__trick">
<div class="nav">
<ul class="nav__list">
<li class="nav__item">
<a class="nav__link active" href="#">Strona Główna</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Ja jestem</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Kalendarz</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Warsztaty</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Wykłady</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Artykuły</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Audio</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Youtube</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Kontakt</a>
</li>
<li class="nav__item social__icon">
<figure class="icon__container">
<div class="icon">
<a class="social__link social__link--fb" href="#">
<svg version="1.1" id="Social_Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-297.5 123.5 595 595" enable-background="new -297.5 123.5 595 595" reserveAspectRatio="xMidYMid meet" xml:space="preserve">
<rect x="-64.47" y="206.101" fill="#FFFFFF" width="276.871" height="512.399"/>
<path id="Facebook" fill="#4460A0" d="M20.309,718.5H-264.66c-18.143,0-32.84-14.707-32.84-32.84V156.342
c0-18.144,14.698-32.842,32.84-32.842h529.324c18.135,0,32.836,14.698,32.836,32.842V685.66c0,18.137-14.701,32.84-32.836,32.84
H113.042V488.082h77.34l11.581-89.799h-88.921v-57.328c0-26,7.218-43.713,44.5-43.713l47.548-0.02v-80.316
c-8.223-1.092-36.449-3.538-69.289-3.538c-68.561,0-115.496,41.851-115.496,118.698v66.222H-57.23v89.798H20.31V718.5H20.309z"/>
</svg>
</a>
</div>
<div class="icon">
<a class="social__link social__link--youtube" href="#">
<svg version="1.1" id="Social_Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 36.305 595 595" enable-background="new 0 36.305 595 595" reserveAspectRatio="xMidYMid meet" xml:space="preserve">
<polygon fill="#FFFFFF" points="214.04,443.136 214.04,214.49 432.938,328.812 "/>
<path id="Youtube" fill="#CE1312" d="M589.05,214.115c0,0-5.819-41.248-23.65-59.408c-22.629-23.849-47.991-23.959-59.611-25.343
c-83.265-6.06-208.158-6.06-208.158-6.06h-0.261c0,0-124.895,0-208.157,6.06c-11.641,1.384-36.984,1.495-59.63,25.343
C11.75,172.873,5.948,214.115,5.948,214.115S0,262.565,0,310.993v45.417c0,48.445,5.949,96.875,5.949,96.875
s5.802,41.247,23.633,59.407c22.647,23.851,52.379,23.102,65.617,25.591c47.6,4.602,202.301,6.021,202.301,6.021
s125.024-0.185,208.288-6.246c11.621-1.4,36.983-1.514,59.611-25.36c17.831-18.166,23.652-59.408,23.652-59.408
S595,404.859,595,356.41v-45.417C595,262.565,589.05,214.115,589.05,214.115z M236.066,411.443l-0.019-168.18l160.762,84.38
L236.066,411.443z"/>
</svg>
</a>
</div>
</figure>
</li>
</ul>
</div>
</div>
</nav>
</div>
</section>
</header>
</body>
</html>

I cannot comment on Marco’s answer because I have not enough reputation, so I create a new answer…
Marco’s code only needs a small adjustment, then it should work: The social icons markup needs to be added to $items, and in the end, $items needs to be returned by the filter function.
function add_last_nav_item( $items ) {
$items .= sprintf(
'<li class="nav__item social__icon">
<figure class="icon__container">
<div class="icon">
<img src="%2$s/images/icon__facebook.svg">
</div>
<div class="icon">
<img src="%2$s/images/icon__youtube.svg"> .
</div>
</figure>
</li>',
'https://www.facebook.com/Czysta-%C5%9Awiadomo%C5%9B%C4%87-%C5%9Awiat%C5%82o-i-Mi%C5%82o%C5%9B%C4%87pl-811435542275919/',
get_template_directory_uri(),
'https://www.youtube.com/channel/UCxxKwAW7JE6eCx3OjNcO6Yw/'
);
return $items;
}
add_filter( 'wp_nav_menu_items', 'add_last_nav_item' );
Update for adding classes
To add a class to the li and a elements of the nav items, you can use the following snippet:
/**
* Add classes to li and a elements of the nav menus.
*
* #param string $items HTML of menu items.
*
* #return string
*/
function themeslug_add_menu_item_classes( $items ) {
// Disable libxml errors.
libxml_use_internal_errors( true );
// Create new DOMDocument object.
$dom = new DOMDocument();
// Load the HTML.
// Trick with <?xml endocing="utf-8" loadHTML() method of https://github.com/ivopetkov/html5-dom-document-php
$dom->loadHTML( '<?xml encoding="utf-8" ?>' . $items, 0 | LIBXML_NOENT );
$xpath = new DOMXPath( $dom );
// Get all nodes.
$nodes = $xpath->query( '//*' );
// Loop them.
foreach ( $nodes as $node ) {
// Check if we have an li element.
if ( 'li' === $node->tagName ) {
// Get existing classes from element and add our custom class.
$classes = $node->getAttribute( 'class' ) . ' my-custom-list-item-class';
// Set the custom class.
$node->setAttribute( 'class', $classes );
} // End if().
// Check if the node is an a element.
if ( 'a' === $node->tagName ) {
// Get existing classes from element and add our custom class.
$classes = $node->getAttribute( 'class' ) . ' my-custom-a-element-class';
// Set the custom class.
$node->setAttribute( 'class', $classes );
} // End if().
} // End foreach().
// Save the dom.
$items = themeslug_save_html( $dom );
// Return the items.
return $items;
}
add_filter( 'wp_nav_menu_items', 'themeslug_add_menu_item_classes' );
/**
* Enhanced variation of DOMDocument->saveHTML().
*
* Fix for cyrillic from https://stackoverflow.com/a/47454019/7774451.
* Replacement of doctype, html, and body from archon810\SmartDOMDocument.
*
* #param DOMDocument $dom DOMDocument object of the dom.
*
* #return string DOM or empty string.
*/
function themeslug_save_html( DOMDocument $dom ) {
$xpath = new DOMXPath( $dom );
$first_item = $xpath->query( '/' )->item( 0 );
return preg_replace(
array(
'/^\<\!DOCTYPE.*?<html><body>/si',
'!</body></html>$!si',
),
'',
$dom->saveHTML( $first_item )
);
}
It uses DOMDocument to parse the HTML of the nav items and DOMXPath to get all HTML nodes. After that, the nodes are looped and inside the loop it checks for the element type and adds a class if it is a li or a element.

could you paste this code on your functions.php
it should add the li at the end of your wp_nav_menu()
function add_last_nav_item($items) {
?>
<li class="nav__item social__icon">
<figure class="icon__container">
<div class="icon">
<img src="<?php echo get_template_directory_uri(); ?>/images/icon__facebook.svg">
</div>
<div class="icon">
<img src="<?php echo get_template_directory_uri(); ?>/images/icon__youtube.svg"> .
</div>
</figure>
</li>
<?php
}
add_filter('wp_nav_menu_items','add_last_nav_item');

You can extend the WordPress Walker class to build a custom menu.
Have a look at the codex documentation.
https://codex.wordpress.org/Class_Reference/Walker
You need to apply the required logic in that. Do not use jQuery or frontend scripts to do that. The menu is fully customiszable with the Walker.

How to set the width of absolute positioned droppdown menu to fit the longest list item?

I have a header with 2 dropdowns.
the dropdown menu position is absolute to it's wrapper container.
I want each dropdown menu width fit to the size of longest list entry. I am wondering if there is any solution without looping through li s and achieve it only using css?
<nav>
<div class="nav-dropdownContainer">
<div class="navdropdown nav-primary__dropdown">
<div class="navdropdown__text">
Themes
<i class="fa fa-chevron-down">+</i>
</div>
<ul class="navdropdown__list">
<li class="navdropdown__listItem">linktheme1</li>
<li class="navdropdown__listItem">linktheme2</li>
</ul>
</div>
<div class="navdropdown nav-primary__dropdown">
<div class="navdropdown__text">
tags
<i class="fa fa-chevron-down">+</i>
</div>
<ul class="navdropdown__list">
<li class="navdropdown__listItem">linktag1</li>
<li class="navdropdown__listItem">linktag2</li>
</ul>
</div>
</div>
</nav>
And CSS:
ul{
margin: 0;
padding: 0;
}
nav{
background-color: grey;
line-height: 35px;
}
.nav-dropdownContainer {
height: 70px;
width: 25%;
display: inline-block;
position: relative;
}
.navdropdown {
background-color: #455565;
display: inline-block;
border-right: 1px solid #fff;
height: 100%; }
.navdropdown:first-child {
border-left: 1px solid #fff; }
.navdropdown > ul {
margin: 0; }
.navdropdown:hover .navdropdown__text {
color: #fff; }
.navdropdown.open .navdropdown__text {
color: #fff; }
.navdropdown.open .navdropdown__list {
display: block; }
.navdropdown .fa-chevron-up,
.navdropdown .fa-chevron-down {
padding-left: 1rem;
font-size: 0.875rem; }
.navdropdown .navdropdown__text {
text-align: center;
cursor: pointer;
color: #ccc;
border-top: none;
padding: 1rem; }
.navdropdown__list {
position: absolute;
top: 100%;
z-index: 1000;
display: none;
float: left;
width: 100%;
left: 0;
background-color: #455565;
list-style-type: none; }
.navdropdown__list .navdropdown__listItem {
width: 100%;
float: left;
padding: 1rem;
background-color: #374350;
margin: 0; }
.navdropdown__list .navdropdown__listItem > a {
text-decoration: none;
color: #fff;
cursor: pointer; }
.navdropdown__list .navdropdown__listItem:hover {
background-color: #374856; }
JS:
(function() {
// Cache DOM
var $body = $('body'),
$window = $(window),
_dropdownClassName = '.navdropdown',
$dropdownContainer = $('.nav-dropdownContainer');
$body.on('click', _dropdownClassName, toggleDropdown);
function closeAllDropdowns(){
$(_dropdownClassName).removeClass('open');
$('.navdropdown__text i').removeClass('fa-chevron-up').addClass('fa-chevron-down');
}
/**
* toggle dropdown
*/
function toggleDropdown(){
const $this = $(this);
const $thisArrow = $this.find('.navdropdown__text i');
var leftPosition = $this.offset().left - $dropdownContainer.offset().left;
console.log('leftPosition', leftPosition);
if (window.Modernizr.mq('only screen and (max-width: 64em)')) {
$this.find('.navdropdown__list').css('left', 0);
}else{
if(leftPosition > 0){
$this.find('.navdropdown__list').css('left', leftPosition+'px');
}
}
if($thisArrow.hasClass('fa-chevron-down')){
closeAllDropdowns();
$this.addClass('open');
$thisArrow.removeClass('fa-chevron-down').addClass('fa-chevron-up');
}else{
closeAllDropdowns();
}
}
})();
Code Pen link: http://codepen.io/neginbasiri/pen/Xjgwkx

Add this to your navdropdown class : min-width: 40%;
It sets the minimum width of them to 40% of it's container width(If you have more items set this percentage proportional to the number of items).
If you want it be exactly like the biggest width involves some javascripts I don't recommend that way.

Graphic trouble in MS Edge

I'm developing a site that actively uses CSS3 transitions and flexbox-based layout. It works well in Chrome, Firefox, iPad 2 (Safari) and even in Windows Phone 8.1 (not sure which version of IE is in there). But in Edge I see some strange visual glitches, what seems to appear on hover state.
So here is what I get in every modern browser (except Edge, obviously):
And this is what get in Edge:
As you can see, it's totally messed up. And also there is another window right to the Edge window, and Edge somehow bring this "trouble" to another window. Moreover, I was not able to screenshot this (Edge repaints window right before shooting) so I've captured it on photo. This is not the only buggy place, it happens everywhere with CSS transitions, independetly what and for how long it animates. And every trouble is unique, I can't catch some pattern and realize what's the problem.
At first it seems like graphic driver or hardware issues, but it's a new computer (by "new" I mean 3-days-old) with new hardware and clean Windows 10 with every update installed, and I can't see anything like this bug on any other site in Edge or in any other browser or application.
Is it common or only I'm so lucky? And what can I do, except to remove any animation in Edge? My GPU is Intel HD 530, BTW.
upd: I'm sorry, I forgot to include this:
function calcTooltips() {
$('.photo').hide().show(0);
if ( $(window).innerWidth() >= 769 ) {
$('.tt-center').each(function() {
var index = $(this).data('tooltip');
var pPos = $(this).position();
var pWidth = $(this).outerWidth();
var pHeight = $(this).outerHeight();
$('.tooltip.tt[data-tooltip="' + index + '"]').css({
width: pWidth + 'px',
top: $('body').scrollTop() + pPos.top + pHeight + 'px',
left: pPos.left + 'px'
});
});
$('.tt-left').each(function() {
var index = $(this).data('tooltip');
var pPos = $(this).position();
var pWidth = $(this).outerWidth();
var pHeight = $(this).outerHeight();
$('.tooltip.tt[data-tooltip="' + index + '"]').css({
width: pWidth * 2 + 'px',
top: $('body').scrollTop() + pPos.top + pHeight + 'px',
left: pPos.left + 'px'
});
});
$('.tt-right').each(function() {
var index = $(this).data('tooltip');
var pPos = $(this).position();
var pWidth = $(this).outerWidth();
var pHeight = $(this).outerHeight();
$('.tooltip.tt[data-tooltip="' + index + '"]').css({
width: pWidth * 2 + 'px',
top: $('body').scrollTop() + pPos.top + pHeight + 'px',
left: pPos.left - pWidth + 'px'
});
});
}
}
function initTooltips() {
$(window).load(calcTooltips);
$(window).resize(calcTooltips);
$(window).scroll(calcTooltips);
$('.tt-trigger').hover(function() {
var index = $(this).data('tooltip');
$('.tooltip.tt[data-tooltip="' + index + '"]').finish().fadeIn('fast');
}, function() {
var index = $(this).data('tooltip');
$('.tooltip.tt[data-tooltip="' + index + '"]').fadeOut('fast');
});
}
function initMobileMenu() {
$(window).resize(function() {
if ( $(window).width() >= 961 ) {
$('#mobile-menu').hide();
$('main').removeClass('blurred');
$('footer').removeClass('blurred');
}
});
$('.toggle-button').click(function() {
$('#mobile-menu').toggle('slide', {}, 'fast');
$('main').toggleClass('blurred');
$('footer').toggleClass('blurred');
$('body').toggleClass('noscroll');
});
}
var didScroll;
var lastScrollTop = 0;
var delta = 50;
var navbarHeight = $('#classic-menu').outerHeight();
function hasScrolled() {
if ( $(window).innerWidth() >= 769 ) {
var st = $(this).scrollTop();
if(Math.abs(lastScrollTop - st) <= delta)
return;
if (st > lastScrollTop && st > navbarHeight) {
$('#classic-menu').removeClass('nav-down').addClass('nav-up');
$('.tooltip.tt').hide();
} else {
if(st + $(window).height() < $(document).height()) {
$('#classic-menu').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
}
function initScroll() {
$(window).scroll(function(event){
didScroll = true;
});
$(window).resize(function(event){
$('#classic-menu').removeClass('nav-up').addClass('nav-down');
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
}
var activeSlide = '';
function initSlides() {
$('.slide').click(function() {
if ( !$(this).hasClass('active') ) {
$('.slide.active').removeClass('active');
$(this).toggleClass('active');
activeSlide = $(this).data('slide');
}
});
}
var formRegexps = {
'name': /^.{2,}$/,
'address': /^.{6,}$/,
'email': /^\w+([\.\w]+)*\w#\w((\.\w)*\w+)*\.\w{2,3}$/,
'tel': /^\+7 \([0-9]{3}\) [0-9]{3} [0-9]{2}-[0-9]{2}$/
}
var formReturns = {
'name': false,
'address': false,
'email': false,
'tel': false
}
function formValidate() {
var isValid = true;
$.each(formRegexps, function(key, value) {
var exp = new RegExp(formRegexps[key]);
formReturns[key] = exp.test($('#' + key).val());
if (!formReturns[key]) { isValid = false }
});
return isValid;
}
function formShowErrors() {
$.each(formReturns, function(key, value) {
if (!formReturns[key]) {
$('.' + key + '-message').show();
}
});
$('.check-message.overall-message').show();
}
function formHideErrors() {
$.each(formReturns, function(key, value) {
$('.' + key + '-message').hide();
});
$('.check-message.overall-message').hide();
$('#classic-menu').removeClass('nav-up').addClass('nav-down');
}
function initFormCheck() {
$('form').submit(function (evt) {
formHideErrors();
if ( formValidate() == true ) {
evt.preventDefault(); // DELETE THIS LATER
} else {
evt.preventDefault();
formShowErrors();
}
});
}
function initPhoneInput() {
$('#tel').mask('+7 (999) 999 99-99');
}
$(function() {
initTooltips();
initMobileMenu();
initScroll();
initSlides();
initFormCheck();
initPhoneInput();
});
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
background: inherit;
color: inherit;
text-decoration: none;
}
ul {
list-style-type: none;
}
input,
select,
button {
outline: none;
}
img,
button,
.button,
.column h1,
.column h2,
.column h3,
.slide h1,
.slide h2,
.slide h3 {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Colors */
/* Shadows */
/* Borders */
/* Typography */
body,
input,
button {
font-family: 'Roboto', sans-serif;
}
p {
font-size: 17px;
}
/* Media Queries */
/* Base Layout */
html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body,
header,
main,
nav,
footer,
.layout,
.column,
.container,
.links,
.header-content,
.flex,
.full-flex .splash-link-inner {
display: flex;
}
#media (max-width: 960px) {
body,
main,
footer {
transition: -webkit-filter 0.3s, -moz-filter 0.3s, filter 0.3s;
}
}
body {
flex-flow: column;
min-height: 100vh;
background: url('../assets/images/temp-bg.jpg') fixed;
background-size: cover;
}
main {
flex: 1 0 auto;
align-self: center;
margin: 87px 0 0 0;
padding: 1rem 0 0 0;
justify-content: center;
align-items: flex-start;
width: 100%;
}
#media (max-width: 960px) {
main {
margin: 0;
padding: 4rem 0 0 0;
}
}
p {
margin: 1rem;
}
.photo {
width: 100%;
}
/* Containers */
.main.container {
flex-flow: column;
background: rgba(0, 0, 0, 0.8);
color: #F7F7F7;
padding: 1rem 1rem 0 1rem;
margin: 0 0 1rem 0;
width: 100%;
max-width: 960px;
}
.main.container.narrow {
max-width: 640px;
}
/* Header */
header {
z-index: 101;
flex-shrink: 0;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.8);
border-bottom: 1px solid #F7F7F7;
position: fixed;
top: 0;
width: 100%;
transition: top 0.2s;
}
.header-content {
justify-content: space-around;
flex: 1;
padding: 0 .5rem;
}
/* Footer */
footer {
z-index: 100;
width: 100%;
height: auto;
min-height: 1.4rem;
padding: 1rem 0;
justify-content: flex-end;
background: rgba(0, 0, 0, 0.6);
color: #F7F7F7;
}
#media (max-width: 768px) {
footer {
flex-flow: column;
align-items: center;
}
}
footer .links {
min-height: 1.4rem;
}
#media (max-width: 768px) {
footer .links {
padding-right: 1rem;
}
}
footer .links a {
margin: 0 1rem;
}
#media (max-width: 540px) {
footer .links a {
margin-left: 0;
margin-right: .5rem;
}
}
#media (max-width: 768px) {
footer .links a.last-link {
margin-right: 0;
}
}
footer .links a:hover {
opacity: 1;
border-bottom: 2px dashed #FFF;
}
#media (max-width: 768px) {
footer .links,
footer .copyright {
margin: 0;
padding: 0;
}
}
footer .phone {
margin: 0 1rem;
}
#media (max-width: 768px) {
footer .phone {
display: none;
}
}
footer .phone:hover {
opacity: 1;
}
footer .copyright,
footer .links a,
footer .phone {
opacity: 0.8;
}
/* Horizontal Divider */
hr {
border-color: #F7F7F7;
}
/* Links */
.splash-link,
.nav-link-container {
transition: .3s;
}
/* Buttons */
.button {
display: block;
padding: 0 1rem;
line-height: 2rem;
transition: .2s;
border: 0;
cursor: pointer;
font-size: 16px;
}
.button i {
margin-right: .5rem;
}
.button.accent {
background: #F7F7F7;
color: #303030;
}
.button.accent:hover,
.button.accent:active {
background: #dedede;
}
.action {
background: #FF530D;
color: #F7F7F7;
}
.action:focus {
background: #FF530D;
color: #F7F7F7;
}
.action:hover,
.action:active {
background: #d93f00;
}
.positive {
background: #1ABC9C;
color: #F7F7F7;
}
.positive:focus {
background: #1ABC9C;
color: #F7F7F7;
}
.positive:hover,
.positive:active {
background: #148f77;
}
.neutral {
background: #F7F7F7;
color: #303030;
}
.neutral:focus {
background: #F7F7F7;
color: #303030;
}
.neutral:hover,
.neutral:active {
background: #dedede;
}
.negative {
background: #E74C3C;
color: #F7F7F7;
}
.negative:focus {
background: #E74C3C;
color: #F7F7F7;
}
.negative:hover,
.negative:active {
background: #d62c1a;
}
/* Forms */
input,
select {
margin-left: .5rem;
padding: .5rem;
}
input {
font-size: 18px;
letter-spacing: .25px;
}
input:not(.modal) {
border: none !important;
}
select {
font-size: inherit;
}
/* Helpers */
.left-sided {
padding-left: 1rem;
margin-right: auto;
}
.right-sided {
padding-right: 1rem;
margin-left: auto;
}
.left-fixed {
left: 0;
}
.right-fixed {
right: 0;
}
.flex {
flex: inherit !important;
}
.full-flex {
flex: 1 1 100% !important;
}
#media (max-width: 960px) {
.hideable {
display: none;
}
}
.hidden {
display: none;
}
.blurred {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
filter: blur(5px);
}
.noscroll {
overflow: hidden;
}
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
.nav-up {
top: -88px;
}
/* Menu */
#media (max-width: 960px) {
#classic-menu .header-content,
#mobile-menu .header-content {
display: none;
}
}
#classic-menu .nav-link-container,
#mobile-menu .nav-link-container {
display: flex;
flex: 1;
align-items: center;
color: #F7F7F7;
text-align: center;
justify-content: center;
}
#classic-menu .nav-link-container .nav-link,
#mobile-menu .nav-link-container .nav-link {
font-weight: bold;
text-transform: uppercase;
}
#classic-menu .nav-link-container .nav-link:after,
#mobile-menu .nav-link-container .nav-link:after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width 0.2s ease, background-color 0.2s ease;
}
#classic-menu .nav-link-container.active,
#mobile-menu .nav-link-container.active {
color: #ababab;
}
#classic-menu .nav-link-container:hover:not(.active) > .nav-link:after,
#mobile-menu .nav-link-container:hover:not(.active) > .nav-link:after {
width: 100%;
background: #F7F7F7;
}
#mobile-menu {
width: 100%;
height: 100%;
position: fixed;
margin-top: 51px;
display: none;
}
#mobile-menu .mobile-header-content {
margin-top: -102px;
width: 100%;
}
#mobile-menu .mobile-header-content .logo-link {
display: flex;
align-items: center;
justify-content: center;
}
#media (max-height: 280px) {
#mobile-menu .mobile-header-content .logo-link {
display: none;
}
}
#mobile-menu .mobile-header-content .nav-link {
padding: 1rem;
}
/* Logo */
.logo {
width: 220px;
}
/* Toggle Button */
.toggle-button {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: fixed;
background: rgba(0, 0, 0, 0.8);
left: 0;
right: 0;
cursor: pointer;
text-align: center;
font-weight: bold;
text-transform: uppercase;
color: #F7F7F7;
padding: 1rem;
z-index: 102;
display: none;
}
#media (max-width: 960px) {
.toggle-button {
display: block;
}
}
.toggle-button i {
width: 30px;
}
/* Tooltips */
.tooltip {
text-align: center;
background: rgba(0, 0, 0, 0.8);
color: #F7F7F7;
position: absolute;
z-index: 1000;
display: none;
}
.tooltip p {
margin: .65rem;
}
/* Slide */
.slides.container {
margin-bottom: 1rem;
justify-content: space-between;
}
#media (max-width: 540px) {
.slides.container {
flex-flow: column;
}
}
.slides.container .slide {
display: flex;
align-items: flex-end;
justify-content: center;
flex: 1;
min-height: 200px;
padding: 1rem;
cursor: pointer;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
margin: 0 1rem 0 0;
transition: .2s;
}
#media (max-width: 540px) {
.slides.container .slide {
margin: 0 0 1rem 0;
align-items: center;
min-height: 100px;
}
.slides.container .slide:hover {
flex: 1;
}
}
.slides.container .slide .header {
text-shadow: 0 2px 5px #000;
transition: .2s;
}
.slides.container .slide:hover:not(.active) {
flex: 3;
}
.slides.container .slide.first-slide {
background-image: url('../assets/images/first-option.jpg');
background-size: cover;
}
.slides.container .slide.second-slide {
background-image: url('../assets/images/second-option.jpg');
background-size: cover;
}
.slides.container .slide.third-slide {
background-image: url('../assets/images/third-option.jpg');
background-size: cover;
margin: 0;
}
.slides.container .slide.active {
opacity: .5;
cursor: default;
}
.slides.container .slide.active .header {
text-shadow: none;
}
/* Form */
.form {
margin-top: 1rem;
margin-bottom: 1rem;
}
.form form {
display: flex;
flex-flow: column;
}
.form form .row {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.form form .row label {
width: 100px;
}
.form form .row input {
width: 100%;
}
.form button {
align-self: flex-end;
}
.asterisk {
margin: 0 .2rem 0 .2rem;
color: #FF3800;
}
/* Paragraph Override */
p {
margin: 0;
}
p.check-message {
margin: 0 0 1rem 100px;
text-align: center;
display: none;
}
p.check-message .fa {
color: #FF3800;
}
p.check-message.overall-message {
border-top: 1px solid #F7F7F7;
margin: 0 0 1rem 0;
padding: .5rem 0 0 0;
}
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no">
<link rel="icon" href="../favicon.ico?v=2">
<link rel="stylesheet" href="../styles/vendor/pace.css">
<script src="../scripts/vendor/pace.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic">
<link rel="stylesheet" href="../styles/vendor/font-awesome.min.css">
<!-- FOR DEVELOPMENT ONLY -->
<link rel="stylesheet" href="../styles/order.dev.css"> <!-- END -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.1/less.min.js"></script> -->
</head>
<body><header id="classic-menu" class="remodal-bg">
<div class="header-content">
<div class="flex">
<span class="nav-link">Каталог</span><span class="nav-link">Тач-панели</span><span class="nav-link">Заказ</span> </div>
<img src="../assets/images/main-logo.png" alt="Логотип EON2" class="logo">
<div class="flex">
<span class="nav-link">Где купить</span><span class="nav-link">Под­держка</span><span class="nav-link">Кон­такты</span> </div>
</div>
</header>
<div class="toggle-button"><i class="fa fa-reorder"></i>Меню</div>
<header id="mobile-menu">
<div class="mobile-header-content">
<img src="../assets/images/main-logo.png" alt="Логотип EON2" class="logo">
<div class="flex">
<span class="nav-link">Каталог</span><span class="nav-link">Тач-панели</span><span class="nav-link">Заказ</span> </div>
<div class="flex">
<span class="nav-link">Где купить</span><span class="nav-link">Под­держка</span><span class="nav-link">Кон­такты</span> </div>
</div>
</header>
<div class="tooltip tt" data-tooltip="0">
<p>Главная страница</p>
</div>
<div class="tooltip tt" data-tooltip="1">
<p>Каталог стан­дарт­ных решений на основе ПЛК</p>
</div>
<div class="tooltip tt" data-tooltip="2">
<p>Передовые решения с исполь­зованием тач-панелей</p>
</div>
<div class="tooltip tt" data-tooltip="3">
<p>Заказ уникаль­ного решения</p>
</div>
<div class="tooltip tt" data-tooltip="4">
<p>Информация о магазинах</p>
</div>
<div class="tooltip tt" data-tooltip="5">
<p>Обновление ПО и замена запчастей</p>
</div>
<div class="tooltip tt" data-tooltip="6">
<p>Адреса и телефоны</p>
</div><main>
<div class="main container narrow">
<div class="slides container">
<div class="slide first-slide " data-slide="first"><h2 class="header">First Option</h2></div>
<div class="slide second-slide " data-slide="second"><h2 class="header">Second Option</h2></div>
<div class="slide third-slide " data-slide="touch-panel"><h2 class="header">Тач-панель</h2></div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda deleniti, beatae eum totam odit expedita modi laudantium praesentium, quasi vero nihil doloribus consequatur! Aspernatur quae numquam nulla quidem iusto reiciendis hic deserunt a eaque ad ipsa, quibusdam magni laborum similique, rem laboriosam odit! Voluptates adipisci magni expedita fugit autem totam.</p>
<div class="form">
<form action="" method="post">
<div class="row">
<label for="name">Имя<span class="asterisk">*</span>:</label>
<input type="text" name="name" id="name" placeholder="Иван Иванов">
</div>
<p class="check-message name-message"><i class="fa fa-warning"></i> Имя должно состоять из 2 символов или более.</p>
<div class="row">
<label for="address">Адрес<span class="asterisk">*</span>:</label>
<input type="text" name="address" id="address" placeholder="ул. Первая, 32">
</div>
<p class="check-message address-message"><i class="fa fa-warning"></i> Адрес должно состоять из 7 символов или более.</p>
<div class="row">
<label for="email">E-mail:</label>
<input type="text" name="email" id="email" placeholder="example#mail.ru">
</div>
<p class="check-message email-message"><i class="fa fa-warning"></i> E-mail должен быть верным.</p>
<div class="row">
<label for="tel">Телефон<span class="asterisk">*</span>:</label>
<input type="text" name="tel" id="tel" placeholder="+7 (900) 800 70-60">
</div>
<p class="check-message tel-message"><i class="fa fa-warning"></i> Телефон должен состоять только из цифр.</p>
<p class="check-message overall-message">Форма заполнена неверно. Обратите внимание, что так <span class="asterisk">*</span> помечены обязательные к заполнению поля.</p>
<button class="positive button"><i class="fa fa-check"></i> Отправить</button>
</form>
</div>
</div>
</main> <footer class="remodal-bg">
<span class="left-sided copyright">© 2009—2016 ООО «ИПН»</span>
<div class="links">
Обратная связь
Оферта
Карта сайта
</div>
<span class="phone"><i class="fa fa-phone"></i> +7 (863) 231-09-18</span>
</footer>
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0-rc.2/jquery-ui.min.js" integrity="sha256-55Jz3pBCF8z9jBO1qQ7cIf0L+neuPTD1u7Ytzrp2dqo=" crossorigin="anonymous"></script>
<script src="../scripts/vendor/maskedinput.min.js"></script>
<script src="../scripts/order.js"></script>
</body>
</html>
This is a part of site, it was taken very roughly, but should be readable. All you need to do is to click on "Меню" button and hover on some links. It triggers bug for me in Edge.

BootStrap Continuous Slide [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
Here is a strip down version of my website. Using the mobile view, when the slides transitions there is a blank wipe before then next slide comes in
http://www.bootply.com/vUXtZz6HQ2
I am not quite understanding what I have to do to get the continuousswipe, that is the current slide will slide off as the next comes on the screen so it looks like it is one continuous strip,
as in the example of Bootstrap Carousel
HTML
<section class="marquee row">
<div class="carousel slide article-slide" data-ride="carousel" data-pause="hover" id="mainPromotion" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: none;">
<div class="carousel-inner">
<div class="item" data-cell-id="" data-interval="7000">
<div class="marquee-media" data-src-md="http://placehold.it/300&text=A" data-src-xs="http://placehold.it/300&text=A" data-link="http://placehold.it/300&text=A" data-link-target="" data-link-title="A" id="marquee0"><img class="marquee-image img-responsive" src="http://placehold.it/300x300&text=A"></div>
</div>
<div class="item" data-cell-id="" data-interval="7000">
<div class="marquee-media" data-src-md="http://placehold.it/300&text=B" data-src-xs="http://placehold.it/300&text=B" data-link="http://placehold.it/300&text=B" data-link-target="" data-link-title="B" id="marquee1"><img class="marquee-image img-responsive" src="http://placehold.it/300&text=B"></div>
</div>
<div class="item active" data-cell-id="" data-interval="7000">
<div class="marquee-media" data-src-md="http://placehold.it/300&text=B" data-src-xs="http://placehold.it/300&text=C" data-link="http://placehold.it/300&text=C" data-link-target="" data-link-title="C" id="marquee2"><img class="marquee-image img-responsive" src="http://placehold.it/300&text=C"></div>
</div>
</div>
<ol class="carousel-indicators clearfix">
<li class="" data-slide-to="0" data-target="#mainPromotion">
<img alt="A" src="http://placehold.it/300&text=A">
<p class="cell-text">A</p>
<i class="fa fa-caret-right fa-2x"></i>
</li>
<li data-slide-to="1" data-target="#mainPromotion" class="">
<img alt="B" src="http://placehold.it/300&text=B">
<p class="cell-text">B</p>
<i class="fa fa-caret-right fa-2x"></i>
</li>
<li data-slide-to="2" data-target="#mainPromotion" class="active">
<img alt="C" src="http://placehold.it/300&text=C">
<p class="cell-text">C</p>
<i class="fa fa-caret-right fa-2x"></i>
</li>
</ol>
</div>
</section>
CSS
/* CSS used here will be applied after bootstrap.css */
section.marque {
margin-top: 10px;
}
section.marquee .cell-text {
color: #777777;
position: relative;
padding: 5px;
font-weight: bold;
font-family: ProximaNova, Arial, Helvetica, sans-serif;
display: inline-block;
float: left;
vertical-align: middle;
text-align: left;
text-indent: 0;
height: 60px;
width: 125px;
}
section.marquee .cell-text:hover {
background-color: #00543d;
color: #ffffff;
}
section.marquee .carousel-control {
background-image: none !important;
}
section.marquee .next.left,
section.marquee .prev.right {
-ms-opacity: 1;
opacity: 1;
z-index: 0;
}
section.marquee .active.left,
section.marquee .active.right {
-ms-opacity: 0;
opacity: 0;
z-index: 0;
}
section.marquee .article-slide .carousel-indicators {
top: 0;
left: 18px;
margin-left: 0;
margin-top: 8px;
width: 204px;
z-index: 0;
}
section.marquee .article-slide .carousel-indicators img {
/*float: left;
left: 0;*/
display: inline-block;
float: left;
width: 70px;
height: auto !important;
}
section.marquee .carousel-indicators li {
text-indent: 0 !important;
border: 1px solid #c0c0c0;
display: inline-block;
-ms-border-radius: 0;
border-radius: 0;
margin-bottom: 2px;
margin-left: -2px;
width: auto;
height: auto !important;
line-height: 16px;
font-size: 15px;
background-color: white;
z-index: 0;
position: relative;
}
section.marquee .carousel-indicators li i {
display: none;
}
section.marquee .carousel-indicators li:hover .cell-text {
background-color: #00543d;
color: #ffffff;
}
section.marquee .carousel-indicators li.active .cell-text {
color: #00543d;
}
section.marquee .carousel-indicators li.active:hover .cell-text {
color: #ffffff;
}
section.marquee .carousel-indicators li.active {
border: 3px solid #00543d;
color: #00543d;
margin-left: -1px;
margin-bottom: -1px;
}
section.marquee .carousel-indicators li.active i {
display: block;
position: absolute;
text-indent: 0 !important;
right: -12px;
top: 15px;
}
section.marquee .edit-marquee-cell {
position: absolute;
top: 5px;
left: 45%;
}
#media (min-width: 768px) and (max-width: 991px) {
section.marquee .item img,
section.marquee .carousel {
width: 768px;
height: 300px;
}
}
#media (min-width: 1200px) {
section.marquee .item img,
section.marquee .carousel {
width: 100% !important;
height: auto !important;
}
}
#media (min-width: 991px) {
/* fade effect */
section.marquee .carousel .item {
z-index: 0;
left: 0 !important;
-webkit-transition: opacity .4s;
-moz-transition: opacity .4s;
-o-transition: opacity .4s;
-ms-transition: opacity .4s;
transition: opacity .4s;
}
}
#media(max-width : 991px) {
section.marquee .carousel-indicators li.active i,
section.marquee .carousel-indicators img,
section.marquee .carousel-indicators .cell-text {
display: none !important;
}
section.marquee .carousel-indicators {
position: relative !important;
margin-left: auto !important;
margin-right: auto !important;
width: 80px !important;
text-align: center !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: 0;
}
section.marquee .carousel-indicators li {
display: inline-block !important;
width: 15px !important;
height: 15px !important;
margin: 1px !important;
border: 1px solid #bcbcbc !important;
-ms-border-radius: 10px !important;
border-radius: 10px !important;
cursor: pointer;
}
section.marquee .carousel-indicators li.active {
width: 15px;
height: 15px !important;
background-color: #00543d !important;
}
backface-visibility: hidden;
perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}
}
JavaScript
$(function () {
var validFlag = false;
$(window).on({
"load": function() {
if (!window.marqueeJson) return;
var imageTemplate = Handlebars.compile($("#template-marquee-images").html());
var fragTemplate = Handlebars.compile($("#template-marquee-frags").html());
var compiledInner = $("section.marquee .carousel-inner");
var compiledFrags = $("section.marquee .carousel-indicators");
compiledInner.html(imageTemplate(window.marqueeJson));
compiledFrags.html(fragTemplate(window.marqueeJson));
if (window.marqueeJson.Cells.length == 1) {
compiledFrags.remove();
$("section.marquee .carousel-control").remove();
}
if (compiledInner.length > 0) {
validFlag = true;
var mainPromo = document.getElementById("mainPromotion");
var mc = new window.Hammer(mainPromo);
mc.on("swipeleft", function () {
$(mainPromo).carousel("next");
});
mc.on("swiperight", function () {
$(mainPromo).carousel("prev");
});
updateMarquee();
var carouselStartPromo = function (promoPos) {
if (!isNaN(promoPos) && (0 < promoPos) && (promoPos < 3)) {
$('#mainPromotion').carousel(promoPos);
} else {
$('#mainPromotion').carousel();
}
};
var t;
var promoStart = -1;
carouselStartPromo(promoStart);
$('#mainPromotion').carousel('pause');
var start = $('#mainPromotion').find('.active').attr('data-interval');
t = setTimeout(carouselStartPromo, start - 7000);
/*
This event is to fix an IE bug where the swf file does not replay when the marquee control cycles
around. It looks ahead to the next item before the slide event happens (or to the first item, if there
isn't an item after the active one) and reloads the swf by re-embedding it. This only fires if the
useragent contains "MSIE" for Internet Explorer.
*/
$('#mainPromotion').on('slide.bs.carousel', function () {
if(navigator.userAgent.indexOf('MSIE') > -1){
var params = { menu: "false", wmode: "transparent" };
var self;
if ($('#mainPromotion').find('.active + .item').length > 0) {
self = $('#mainPromotion').find('.active + .item').find('.marquee-media');
}
else {
self = $('#mainPromotion').find('.item').first().find('.marquee-media');
}
var flashMedia = self.attr("data-src-flv") !== undefined ? self.attr("data-src-flv") : false;
if (flashMedia) {
var flashId = self.attr("id") + "-flash";
swfobject.embedSWF(flashMedia, flashId, "100%", "300", "9.0", false, false, params);
}
}
});
$('#mainPromotion').on('slid.bs.carousel', function () {
clearTimeout(t);
var duration = $('#mainPromotion').find('.active').attr('data-interval');
$('#mainPromotion').carousel('pause');
t = setTimeout(carouselStartPromo, duration - 7000);
});
/* Marquee Unit Tracking (cells tracking in handlebar helpers) */
if (window.marqueeJson.AnalyticId.length > 1) {
$("#mainPromotion").attr("data-tracking", window.marqueeJson.AnalyticId);
}
}
},
"resize": function() {
if (!validFlag) return;
waitForFinalEvent(function() {
updateMarquee();
}, 300, new Date().getTime());
}
});
function updateMarquee() {
});

Going through your code the problem is caused in the css with these styles
section.marquee .next.left,
section.marquee .prev.right {
-ms-opacity: 1;
opacity: 1;
z-index: 0;
}
section.marquee .active.left,
section.marquee .active.right {
-ms-opacity: 0;
opacity: 0;
z-index: 0;
}
Removing these will get it working. What is happening is that the opacity:0; is applying straight away and so you just get a blank square.
If what your looking to do is have a fade out fade in effect on the slides, I think transition : opacity 1s ease; might help.
see below image of class being applied.

line 40,
if (!isNaN(promoPos) && (0 < promoPos) && (promoPos < 3)) {
$('#mainPromotion').carousel(promoPos);
update 4 by 3.

How to make this loading overlay effect responsive?

I'm trying to do a loading overlay effect with an rotating icon in the middle. I use fontawesome.
So I coded this: http://jsfiddle.net/eys3d/7/
It works, but I'm trying to make it responsive. I mean, when the section size decreases, the spin size will decrease too (remaining centered). An if the size of the section increases, the oposite.
I tried to use em units, but I didn't get the result I expected.
Is this the best way to do it? How I can make it responsive?
CSS
section {
width: 200px;
height: 200px;
margin: 50px;
}
#overlay {
position: relative;
width: 100%;
height: 100%;
z-index: 99999999999;
background: rgba(0, 0, 0, 0.5);
}
#overlay i {
position: absolute;
top: 50%;
left: 50%;
}
.spin-big {
font-size: 50px;
height: 50px;
width: 50px;
margin-top: -25px;
margin-left: -25px;
}
.spin-normal {
font-size: 35px;
height: 35px;
width: 35px;
margin-top: -22.5px;
margin-left: -22.5px;
}
.spin-small {
font-size: 20px;
height: 20px;
width: 20px;
margin-top: -10px;
margin-left: -10px;
}
HTML
<section>
<div id="overlay">
<i class="fa fa-spinner fa-spin spin-big"></i>
</div>
</section>
<section>
<div id="overlay">
<i class="fa fa-spinner fa-spin spin-normal"></i>
</div>
</section>
<section>
<div id="overlay">
<i class="fa fa-spinner fa-spin spin-small"></i>
</div>
</section>
Any tip, advice or help will be appreciated, and If you need more info, let me know and I'll edit the post.

Why you won't try to use display:table attribute to your overlay div and display:table-cell to fontawesome i class? as below:
#overlay {
width: 100%;
height: 100%;
display:table;
background: rgba(0, 0, 0, 0.5);
}
#overlay i {
display:table-cell;
vertical-align:middle;
text-align:center;
}
Working Demo

you can use this for good effect
.loading
{
pointer-events: all;
z-index: 99999;
border: none;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
cursor: wait;
position: fixed;
background-color: rgba(0, 0, 0, 0.6);
}

Just run into this looking for a similar solution.
The only way to responsively change the font-size would be through media queries.
I.e:
#media min-device-width: 300px{
font-size: 8px;
}
#media min-device-width: 480px{
font-size: 12px;
}
ext..

-----------div in Layout Page---------------
<div class="loading-bg" id="dvSpinner">
<img src="~/Areas/Images/loader.gif">
</div>
----------css-----------
.loading-bg {
background: #e9e9e9;
display: none;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.5;
z-index: 5000;
width: 100%;
}
.loading-bg img{
position: absolute;
top: 42%;
left: 46%;
height: 100px;
width: 100px;
}
-------------html------------
<div class="appendInputFieldForUAIHiddenDiv"
id="appendInputFieldForUAIHiddenDiv">
#Html.TextBoxFor(model => model.PrimaryEmail, new { #class = "form-control enter-email-FPHidden-div", id = "email-address-entered", name = "email-address-entered" })
#Html.ValidationMessageFor(model => model.PrimaryEmail)
<button type="submit" class="btn btn-info submit-button-FPHidden" onclick="submitbuttonFPHidden()">
#ASRP.Resources.Resource.Submit
</button>
</div>
--------------scripts--------------------------
function submitbuttonFPHidden() {
var username = $('#email-address-entered').val();
if (username == null || username == "") {
document.getElementById("email-address-entered").style.borderColor = "#ff0232";
return false;
}
if (!validateEmail(username)) {
document.getElementById("email-address-entered").style.borderColor = "#ff0232";
return false;
}
document.getElementById('dvSpinner').style.display = "block";
$.ajax({
url: "../User/ForgotPassword",
data: { email: username },
dataType: "json",
type: "post",
error: function (error, msg) {
$('div#dvSpinner').hide();
return false;
},
success: function (data) {
if (data.success) {
if (data.emailSent == "Successful") {
document.getElementById('FPHiddenDivContainer').style.display = "none";
document.getElementById('entered-email-address').style.display = "block";
document.getElementById('entered-email-address-para').innerHTML = document.getElementById('email-address-entered').value;
document.getElementById('PwdMsgNew').style.display = "none";
}
else if (data.emailSent == "Failure")
{
document.getElementById('FPHiddenDivContainer').style.display = "none";
document.getElementById('entered-email-address').style.display = "block";
document.getElementById('entered-email-address-para').innerHTML = document.getElementById('email-address-entered').value;
document.getElementById('PwdMsg').style.display = "none";
document.getElementById('lblThankYou').style.display = "none";
}
}
else {
var ddlLangValue = $('#ddlLangs').val();
setCookie("culture", ddlLangValue, 31536e3);
var resources = {}; // Global variable.
(function ($) {
$.getJSON("Resource/GetResources", function (data) {
resources = data;
alert(resources.fpUnabletoProcessReq);
});
})(jQuery);
}
document.getElementById('dvSpinner').style.display = "none";
}
});
return true;
}

Resources