Dropdown stops working after being placed in front using z-index - javascript

I've added an Opentable javascript reservation widget to my home page. The module has 3 dropdowns, a calendar, date selector and a time selector. The 2nd 2 dropdowns aren't responsive, even when I use z-index to move them forward to make visible.
I'm thinking I'm doing something wrong with css but can't seem to solve. Or maybe there is a conflict with js? Not sure. Any suggestions? Thanks -- The site is here on a dev server, http://aac.myftpupload.com/
screenshot of dropdown issue
I'm actually not even sure what code to put up here to share... the script it provided by opentable below, and it comes with a ton of css, which maybe conflicts with my site but I'm not sure:
</div><div class="wpb_column vc_column_container vc_col-sm-9"><div class="vc_column-inner wpex-clr"><div class="wpb_wrapper wpex-vc-column-wrapper wpex-clr " style="min-height:40px;">
<div class="wpb_raw_code wpb_raw_js">
<div class="wpb_wrapper">
<script src="https://secure.opentable.com/frontdoor/default.aspx?rid=82057&restref=6543&bgcolor=F6F6F3&titlecolor=0F0F0F&subtitlecolor=0F0F0F&btnbgimage=https://secure.opentable.com/frontdoor/img/ot_btn_red.png&otlink=FFFFFF&icon=dark&mode=wide&hover=1" type="text/javascript"></script>
</div>
Some of the the css for the dropwown is:
element.style {
display: block;
}
#OT_timeList, #OT_partyList {
width: 108px;
max-height: 200px;
overflow: auto;
border-left: 2px solid #b8b4ac;
border-right: 2px solid #b8b4ac;
border-bottom: 2px solid #b8b4ac;
position: absolute;
top: 34px;
left: 39px;
display: none;
}
.entry ul, .entry ol {
margin: 0 0 10px 10px;
}
.entry ul {
list-style: disc;
}
.entry ul, .entry ol {
margin: 0 0 20px 30px;
}
.OT_navList {
list-style: none;
padding: 0;
margin: 0;
float: left;
width: 142px;
position: absolute;
background-color: #fff;
z-index: 200;
top: 35px;
left: 0;
}

In the div "rev_slider_6_1_wrapper" I set position: relative; z-index: -1;. This allowed the drop downs to be visible in front of the image and text.
So the div will look like this:
<div id="rev_slider_6_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container" style="margin: 0px auto; padding: 0px; max-width: 1000px; height: 400px; overflow: visible; position: relative; z-index: -1;">
I'm not sure if this will negatively affect any of your onload effects, but if nothing else it should get you started in the right direction.

There was some strange code that I guess my template was inserting which caused the dropdowns to fall behind the slider and not function, once I removed this, it worked.
css_animation="appear"

Related

Getting the height of a DIV with jQuery does not work properly

So i tried to find a solution myself, but i couldn't find a topic with a solution that worked for me, because i have special prerequisites.
My Problem is the following:
I have a sticky DIV element on the left, put in another DIV Element with a
fixed height, because the sticky effect didn't work without fixed height.
On the right are many elements which are in a DIV Container as well. This
Container gets its height by the number of elements.
The optimal way would be, that the sticky element stops after the DIV Container with all his content elements is done. Yet because i have to set a fixed height for the Container of the sticky element, it keeps on taking its full height as white space before there can be any other content again.
I hope it wasn't explained to bad.
alert("The height is " + $("#ProductContainer").height());
#StickyContainer {
float: left;
height: 4000px;
width: auto;
}
.sidebar {
top: 0px;
float: left;
height: 400px;
width: 200px;
padding-left: 10px;
padding-top: 20px;
border: 2px solid black;
margin: 20px 10px 0px 5px;
position: -webkit-sticky;
position: sticky;
}
.content {
float: left;
width: 200px;
height: 300px;
padding: 10px;
margin-top: 20px;
margin-left: 5px;
border: 2px solid red;
}
#Test {
margin-top: 20px;
width: 100%;
height: 100px;
border: 2px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="StickyContainer">
<div class="sidebar">
This is the sticky sidebar
</div>
</div>
<div id="ProductContainer">
<div class="content">
One of many boxes
</div>
<div class="content">
Here are 2, but in reality there are more than 10
</div>
</div>
<div style="clear:both" ;></div>
<div id="Test"> Here is the next content </div>
Note: Run in fullscreen, otherwise the #ProductContainer will be under the sidebar anyway.
I took many approaches, one was to take the height of the #ProductContainer with jQuery, then set the result as the new height for the #StickyContainer.
Sadly it returns the height 0.
Didn't get much further because of the result. I tried much more of the stuff i found on StackOverflow, but nothing seemed to work. Not only with JavaScript, but also with HTML since the problem seems to be in the ProductContainer that is not embracing the content properly.
However, even if its just a simple stupid mistake of mine, i am thankful for any sort of help.
the content element hast a float and makes the ProductContainer feels nothing inside.
you have to use a clearfix class on parent.
.clearfix:after {
content: " ";
display: block;
clear: both;
}
cross platform, compatible IE6 +, Chrome, Safari, Firefox, you name it!
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
and give the class to parent
<div id="ProductContainer" class="clearfix">

Make floated element have height 100% to fill page

I am trying to get the left side bar to have a height of 100% and fill the page no matter how big the "main" div is made.
At the moment it stops at normal page height and doesn't increase height.
Is there any way I can achieve this?
JFiddle: https://jsfiddle.net/hjnheonk/
HTML:
<div class="container">
<div class="navbar-left">
<div id="top">
<h2><b>Admin</b>Panel</h2>
</div>
<div id="navigation">
<ul>
<li class="nav-header">Main Pages: </li>
<li>
Home
etc ...
</ul>
</div>
</div>
<div id="navbar-top">
<div id="user">
<?php echo'<p id="user_greeting">'.$username. '<span class="fa fa-caret-down"></span>'.'</p>'?>
</div>
<div id="icon">
<span>
<hr><hr><hr>
</span>
</div>
<div class="main">
</div>
</div>
</div>
**CSS: **
html,body {
height: 100%;
}
.container {
margin-left: 230px;
height: 100%;
position:relative;
}
.navbar-left {
background-color:rgb(26, 34, 38);
color:white;
width: 230px;
margin-left: -230px;
height: 100%;
float:left;
}
.navbar-left #top {
background-color:#367fa9;
min-height: 50px;
text-align: center;
}
.navbar-left #top h2 {
font-size: 20px;
padding: 15px 0px;
}
#navbar-top {
float:right;
width: 100%;
position:relative;
background-color:#3c8dbc;
width: 100% !important;
margin:0 auto;
border: none;
min-height: 51px;
}
#navbar-top #icon {
width: 20px;
padding: 18px 10px !important;
}
#navbar-top #icon hr {
margin:0 auto;
padding: 0px;
border: 1px solid white;
border-radius: 5px;
}
#navbar-top #icon hr:not(:first-child) {
margin-top: 5px;
}
#navbar-top > div:hover:not(#userDropdown) {
background-color:#47a0d3;
cursor: pointer;
}
#brand {
float:left;
}
#navigation .nav-header {
background-color: #272f33;
padding: 12px 30px;
text-align: left;
margin-top: 40px;
margin-bottom: 25px;
}
#navigation ul li a:hover {
background-color: #273136;
}
#navigation ul li a {
width: 100%;
display: block;
padding: 12px 0px;
background-color: #1a2226;
text-align: center;
color:white;
text-decoration: none;
}
.main {
float:left;
width: 100%;
background-color:pink;
height: 1000px; /*Used as an example to show */
}
There's no way to do this by pure CSS, they way you coded-sliced it. If you want it to make work with the current layout - calculate the height via JS, based on the contents and height of the right column.
Basically in your case there different ways to proceed:
calculate the height via JS, based on the contents and height of the right column.
to nest DIVs. So one div will stretch it's parent. Then it will be possible to use purely CSS solution. Read more here one of the possible solutions.
to "override" the standard behavior of divs with "display:table-cell;" (table, table-row, etc), or even to use modern features of CSS alike flexboxes
Which way to go, is up to you.
Does the container need to be defined as percentage? If not then you could do something like this:
$('.navbar-left').css('height', $('.container').height()+'px');
Using Farside's method and updating a little bit here is my code:
var column = $(".column_left").height() + "px";
$(".column_right").css({"height": column});
$(window).on('resize', function(){ //accounts for if the user resizes the window, column stays in place.
var column = $(".column_left").height() + "px";
$(".column_right").css({"height": column});
});
Here is a Pure CSS way to acheive the same.
JS Filddle: https://jsfiddle.net/cx6nu8sw/
Following are the classes from your code which are changed
#navbar-top {
width: 100%;
position:relative;
background-color:#3c8dbc;
margin:0 auto;
border: none;
min-height: 51px;
display:table-cell;
vertical-align:top;
}
.navbar-left {
background-color:rgb(26, 34, 38);
color:white;
display:table-cell;
vertical-align:top;
}
//newly addition
#navigation{
width:230px;
}
As mentioned by #Farside in his 3rd point, I have used "display:table-cell;" on your Div's. Its same as creating table, where the height of row is decided by the longest content in the entire row.
But, be aware that width & height of elements with "display:table-cell;" cannot be forced, it will adjust according to the content inside them. So you can set width and height of elements inside them it will automatically take the same height and width.

Fadetoggle to show and hide two divs

I have two divs that I want to show one and hide the other continuously. The code I have only shows the first one Mass_alert. What must I fix to show and hide both divs in turn.
Here is the HTML.
<div style="position: relative; top: 50px; width: 778px; margin: 0 auto;">
<div id="alerts" style="float: right; width:200px; height: 25px; background: goldenrod; border-radius: 3px 3px 3px 3px; font: 11px Arial; color: #404040; overflow: hidden;">
<div id="Mass_alert" class="alert" style="position: relative; top: 5px; margin: 0 auto; text-align: center; width:100%; height: 20px;"></div>
<div id="Devotion_alert" class="alert" style="position: relative; top: 5px; margin: 0 auto; text-align: center; width:100%; height: 20px; visibility: hidden;"></div>
</div>
</div>
The code to do the fade toggle is this one.
$(document).ready(function() {
show_next_Mass(channel_array_sort);
show_next_devotion();
setInterval("show_alerts()",10000);
var continuous = function () {
$("#Mass_alert").fadeToggle(600);
$("#Devotion_alert").fadeToggle(600);
};
setInterval(continuous,600);
});
Judging by this API doc, you need to use display: none; instead of visibility: hidden; for the hidden element.
When you watch what .fadeToggle() does you see the change to the following attributes
opacity: 0;
display: none;
(As also Alexander pointed out in his answer.)
So I've copied this to the style attribute for the second div. But it didn't work. My assumption is jQuery keeps in some way track of what it has done to the elements but not really recognise the initial CSS.
My idea is that jQuery somewhat keeps track of what it has done to the elements but not really recognise the style the HTML came already with. So I cleaned 2nd div's CSS from any hiding related attributes and put a .hide() in the "initialising function".
seems to work (#jsFiddle)

jQuery cycle plugin, customizing the pager tabbing

i am working on a mock up site with some functionality. i am working with html css and js. i am using the cycle plugin to cycle through some tabs that i have made up. ill post my code then explain what i am trying to do:
my html:
<div id="content">
<div id="image_selector" class="image_selector">
<div class ="image">
<ul>
<li><a id="Mpowered" href="">Mpowered</a></li>
<li><a id="Technology" href="">Technology</a></li>
<li><a id="Consulting" href="">Consulting</a></li>
<li><a id="Outsourcing" href="">Outsourcing</a></li>
</ul>
</div>
</div>
<div class="cell">
<div class="description">
<img id="demoimg" src="/home/***/HTML/launch_pad/images/productivity.png" alt="demo pic"/>
<h2>Who are we?</h2>
<p> a consulting company... ect</p>
</div>
<div class="description">
<img id="demoimg" src="/home/***/HTML/launch_pad/images/tech1.jpg" alt="tech"/>
<h2>We have the tech!</h2>
<p> lots of tech!!.... ect</p>
</div>
... there are two more description sections one for each of the "a" tags i have now made as tabs.
the css looks like this:
.image_selector {
border: 1px dotted green;
height: 130px;
}
.image li {
float: left;
border: 1px solid white;
height: 100px;
width: 103px;
margin-left: 86px;
overflow: hidden;
text-align: center;
}
.image li a {
padding: 74px 0px 0px 0px;
color: white;
text-shadow: 0 0 0.6em #0197E8;
font-size: 17px;
letter-spacing: 1px;
text-decoration: none;
display: block;
height: 80px;
background-repeat: no-repeat;
}
.image li a:hover {
text-shadow: 0 0 0.6em #0197E8, 0 0 0.4em #0197E8, 0 0 0.6em #0197E8;
}
.image li #Mpowered {
background-image: url('/home/ruberto/HTML/launch_pad/images/mpower.png');
background-position: center top;
}
.image li #Technology {
background-image: url('/home/ruberto/HTML/launch_pad/images/tech.png');
background-position: center top;
}
.image li #Consulting {
background-image: url('/home/ruberto/HTML/launch_pad/images/consulting.png');
background-position: center top;
}
.image li #Outsourcing {
background-image: url('/home/ruberto/HTML/launch_pad/images/outsourcing.png');
background-position: center top;
}
.cell {
border: 1px dashed green;
height: 318px;
width: 715px;
float: left;
}
#demoimg {
float: left;
position: static;
margin: 16px 8px 0px 0px;
height: 200px;
width: 200px;
}
and the javascript iam using:
$('.cell')
.before('<div class="image">')
.cycle({
fx: 'turnDown',
speed: 'fast',
timeout: 0,
pager: '.image'
});
so i have read up on line and now understand that the pager option will now create its own navigational section just above the div that has the content that i want to rotate through. i was wondering is there a way i can just reference the "image" tag i have set up as my "tabs" for the navigational function for the cell class??
if there is no way can anyone recommend something that could work in its place?
Assuming you want to reference or even map those li's to other functionality or even build another referencable pager, which what it sounds like you might need to do, you're probably going to need .index to provide a reference for those pair connections.
To start a duplicate pager, clone those elements somewhere else, then maybe simply use css to not display the original, BUT leave it in place so that cycle can use it for paging
// create secondary menu
$('#pager').find('li').clone().appendTo('#navpage ul');
Then if you want to pair your two pagers start with this functionality
http://jsfiddle.net/moneylotion/KhL3W/

Google plus trigger button file input

Does any know how Google plus trigger a button to then open a file input field?
Could they be using an iframe for legacy browsers, or is it a HTML 5 thing???
Any help would be greatly appreciated, as I am needing to make firefox 3.6 trigger an input file via a button. I have read around not possible, but some how google plus can do it.
I can only test with current firefox and chrom version. If it works in IE, you need at least IE 9 (I can't test in IE9).
HTML:
<div class="button_wrapper">
<div class="button_visible" role="button">button description</div>
<div class="button_invisible">
<input type="file" class="button_input" tabindex="-1" multiple="" />
</div>
</div>
CSS:
.button_wrapper {
display: inline-block;
position: relative;
}
.button_visible {
display: inline-block;
position: relative;
padding: 6px 6px;
background-color: #EEE;
border: 1px solid #CCC;
color: #666;
font-size: 12px;
font-weight: bold;
}
.button_invisible {
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
}
.button_input {
position: absolute;
top: -10px;
left: -445px;
opacity: 0;
font: 40px arial,sans-serif;
cursor: pointer;
}
Because I didn't want to set the width and height in all css classes, I added this JS:
$('.button_invisible').each(function() {
$(this).width($(this).parent().width());
$(this).height($(this).parent().height());
});
Also see my jsfiddle.

Categories