Disclaimer: I'm relatively new to jQuery and JavaScript. The openStatement() function below executes whenever it is determined that the #statementTab is not already open. If the code below isn't enough information, simply check out the source below.
Basically, the UL containing the various tabs flickers and disappears whenever the user opens the #statementTab. I'd like to fix this.
Source: http://www.cameronhermens.com/dbunkr/brochure.html
// The openStatement function opens the statement tab when the user clicks
<a id="openIt"> (if the statement tab isn't already open).
function openStatement() {
$('#explore').animate({width: '70%'}, '200');
$('#statementTab').animate({width: '213px'}, '1000');
};
// Here's the DIV.
<div id="explore" class="brochure">
<ul id="brochureTab">
<li><a href="welcome.html" >welcome</a></li>
<li>our mission</li>
<li>what is dBunkr</li>
</ul>
</div>
<div id="statementTab">
<a id="openIt">
<img class="opaque left-5" src="images/rightArrow.jpg" height="10" width="6" alt="Expand the Statement tab">
<span class="statementBar">Statements</span>
</a>
</div>
The UL#brochureTab is being hidden during animation because as #explore is animating, the jQuery is applying a style of overflow: hidden to it. This style is then removed upon completion of the animation.
A quick solution (i.e. without addressing the way that you have styled the rest of your elements) would be to add the style overflow: visible !important; to #explore.
You have the ul#brochureTab outside the div#explore by using the CSS top: -45px;.
Whenever you animate the div#explore with jQuery .animate(), the ul#brochureTab gets "flashed" because the jQuery .animate() automatic switches to overflow:"hidden" while performing the animation.
The solution is to use a DIV to serve as a wrapper to the div#explore, and have it with the visual look you've got on the div#explore:
CSS
#wrapper {
background-color: #FFFFFF;
border: 3px solid #CCCCCC;
border-radius: 7px 7px 7px 7px;
box-shadow: 3px 3px 3px #CCCCCC;
float: left;
height: inherit;
padding: 5px;
}
THE MARKUP WOULD BE:
<div id="wrapper">
<div id="explorer">
<ul id="brochureTab">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
<div id="ui-tabs-3">...</div>
<div id="ui-tabs-10">...</div>
<div id="ui-tabs-12">...</div>
</div>
<div id="statementTab">...</div>
</div>
AND TO PREVENT THE FLASHING:
#brochureTab {
float: left;
left: 10px;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
/* top: -45px; remove this line */
}
.ui-tabs-panel {
background: none repeat scroll 0 0 #FFFFFF;
border: 2px solid #CCCCCC;
float: left;
left: 30px;
margin: 0 auto 30px;
min-height: 410px;
padding: 10px;
position: relative;
/* top: -20px; remove this line */
width: 90%;
z-index: 1;
}
To your current animation method, no changes need to be made.
To your new CSS for the wrapper, may require some "tunning".
Related
So I have this card that works as an entire link but inside that, I have an icon under a span tag and I don't want it to work as the card's link rather just act like an icon, Ik I can solve this if I don't make the entire card href but then I'd have to manually turn all the required elements present inside the card into href which I feel like isn't efficient and neat. So any suggestions on how do I go from here?
.card {
width: 250px;
height: 350;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
background-color: white;
margin-left: 30px;
margin-right: 30px;
margin-top: 30px;
margin-bottom: 30px;
cursor: pointer;
}
.top {
display: flex;
justify-content: space-between;
}
.year {
padding-top: 5px;
padding-left: 5px;
font-family: Circular Std Book;
}
.span-bookmark {
padding-left: 5px;
cursor: pointer;
}
{% for m in mlist %}
<div class="card">
<a href="http://www.google.com/search?q={{m.Name}}" target="_blank">
<div class="top">
<div class="year">{{m.Year}}</div>
<span class="span-bookmark"><i class="material-icons bookmark" id="bookmark-style">bookmark</i></span>
</div>
<div class="middle">
<div class="img-container"><img src="{{ m.Image.url }}"></div>
</div>
<div class="bottom">
<div class="title">{{m.Name}}</div>
<div class="target_id">{{m.targetid}}</div>
</div>
</a>
</div>
{% endfor %}
Make sure you have a position set on both the card and the icon div. Then set a z-index for the icon that is higher than the card in your css. Then if you assign the icon to be clickable, it won't click the card link when you click the icon. You can use z-index to arrange all the layers in your card.
You can stop navigation with preventDefault and stop bubbling up to the link with stopPropagation.
In the following demo, clicking on the img doesn't bubble up the DOM. Clicking on the div outside the img bubbles up to the A, as does clicking on the A text.
function showStuff(event) {
// Stop default action, e.g. following a link
event.preventDefault();
// Stop click from bubbling, e.g. to link parent
event.stopPropagation();
// Just for demonstration purposes, delete when no longer required
console.log('Click from ' + event.target.tagName +
' reached ' + event.currentTarget.tagName);
}
window.onload = function() {
// This listener is for demo only and prevents following the link
// Don't add it if you want to follow the link for clicks outside the img
let link = document.querySelector('a');
link.addEventListener('click', showStuff, false);
// This listener stops clicks from the img reaching the A and
// stops navigation from clicks on the img
let img = document.querySelector('img');
img.addEventListener('click', showStuff, false);
}
.card {
width: 250px;
height: 350;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
background-color: white;
margin: 30px;
cursor: pointer;
border: 1px solid green;
}
.middle {
margin: 20px;
border: 1px solid blue;
}
img {
height: 50px;
width: 50px;
margin: 20px;
border: 1px solid red;
cursor: default;
}
<div class="card">
<a href="http://www.google.com/search?q={{m.Name}}" target="_blank">Some link text
<div class="middle">
<div class="img-container"><img src="foo.jpg"></div>
</div>
Some more link text
</a>
</div>
I have a simple HTML, CSS website that is also making use of JavaScript for animated navigation for a mobile only site.
Current Naviation
The HTML for the button:
<div class="navigations">
<div class="left">
<div class="leftinner" id="left">
<i class="fas fa-arrow-left"></i>
<span id="lefttext">CONTACT</span>
</div>
</div>
<div class="right">
<div class="rightinner" id="right">
<i class="fas fa-arrow-right"></i>
<span id="righttext">WEBSITE</span>
</div>
</div>
</div>
When the user clicks on the contact button it triggers a JS function that runs the following:
document.getElementById('main').classList.add('slideright');
document.getElementById('left').style.display = 'none';
The issue I am having is when the user clicks the CONTACT button it triggers the WEBSITE button as well, almost as if the WEBSITE button has a hidden overlap over the CONTACT button. I have attempted using Flex Box, Float left, Float left and right, Display inline block, Display table with table-cell, column etc. The issue only persists on Chrome for Android, but works fine on iPhone and other browsers.
What would be the best way to fix this issue?
Apologies I can't share more than just the screenshot due to NDA reasons.
Edit
Here is the CSS for the navigation buttons, this uses the float left and right attempt.
.navigations .left {
width: 50%;
height: 100%;
z-index: 500;
display: block;
float: left;
}
.navigations .left .leftinner {
background-color: #ffcb05;
border-top: 6px solid #000;
border-right: 3px solid #000;
width: 100%;
height: 100%;
display: inline-block;
}
.navigations .right {
width: 50%;
height: 100%;
z-index: 500;
display: block;
float: right;
}
.navigations .right .rightinner {
background-color: #ffcb05;
border-top: 6px solid #000;
border-left: 3px solid #000;
width: 100%;
height: 100%;
display: inline-block;
}
So I managed to solve the issue with this.
Seems the float right on the text inside the right hand side button was the culprit. Changing how the right button moved its text to the right by making use of text-align: right;instead of float: right; solved the issue.
It seems that the floating right of text made the text's width 100% and overlap the button on the left.
When I click on a button in my header, it goes to the div id I specified, which is what I want, but my header, which is always on top and fixed at the top of my window, hide the informations. Is there a way to say that when I click my button, the window will go 20px above the div? My code right now:
<nav class="Nav">
<a class="Navigation" id="FirstHeader" href="#FirstTitle">Title</a>
<a class="Navigation" id="SecHeader" href="#sSecTitle">Title2</a>
</nav>
This put the div I called directly at the top and its hidden by my header. Can I make it so that the div is displayed under my header?
Please use CSS property "position" to address your requirement, as on button click place position in a way making at desired postion with "top", "left", "right", "bottom", please find below code snippet, might be usefull:
#parent {
position: relative;
width: 500px;
height: 400px;
background-color: #fafafa;
border: solid 3px #9e70ba;
font-size: 24px;
text-align: center;
}
#child {
position: absolute;
left: 0px;
width: 200px;
height: 200px;
background-color: #fafafa;
border: solid 3px #78e382;
font-size: 24px;
text-align: center;
}
<div id='parent'>
<div id='child'></div>
</div>
i have some setup... where tool tip appears on hover... so i have to put tool tip and anchor tags in same div... tool tips pointer events set to none.. but i cant set pointer events of container div to none because then Hover event is not detected... but i want the underlying element below tool tip to be clickable... please help me out (if possible) without java script... i have set up the dummy scenario below... also including code pen link.... and yeah... positions are not changeable...in my case the underlying div is partially visible as shown in this code below.. and i want it to be clickable/ fire alert function... yeah if there is other way by changing composition of UN-ordered list.. and separating it from that container please let me know... but tool tip should be visible on hover on switch...
<html>
<head>
<style>
.menudescription{
float: left;
width: 150px;
height: 30px;
text-align: center;
background-color: #A1BA94;
margin: 20px 0px 0px 12px;
font-size: 20px;
line-height: 25px;
font-family: 'Kaushan Script', cursive;
color: white;
border: solid white 2px;
opacity: 0;
pointer-events: none;
}
ul li {
list-style-type:none
}
#menulist{
clear: both;
width: 230px;
height: 342px;
position: fixed;
right: 0;
top: 5%;
z-index: 1000;
}
.menulistitem{
clear: both;
height: 60px;
width: 60px;
float: right;
position: relative;
text-align: center;
vertical-align: middle;
background-color: #A1BA94;
margin: 2px;
padding-top: 4px;
}
.menulistitem:hover + .menudescription{
opacity: 1;
}
.underlyingdiv{
height:200px;
width:50px;
background-color:red;
position:relative;
float:right;
margin:20px 40px;
display:block;
}
</style>
</head>
<body>
<div id="navbar">
<ul id="menulist">
<li><div class="menulistitem" id="menuitem_showreel"><a href="#">switch
</a></div> <div class="menudescription">tooltip</div></li>
<li><div class="menulistitem" id="menuitem_showreel"><a href="#">switch
</a></div> <div class="menudescription">tooltip</div></li>
<li><div class="menulistitem" id="menuitem_showreel"><a href="#">switch
</a></div> <div class="menudescription">tooltip</div></li></ul>
</div>
<div class="underlyingdiv" onClick="myfunction()"></div>
<script>
function myfunction(){
alert("hello");
}
</script>
</body>
</html>
below is the code pen link...
http://codepen.io/theprash/pen/MKwWoN
Check this out
The red container is clickable and the tooltip is visible on hover.
Things I do:
Added position:relative to li.
Removed floats to divs inside lis added below css to .menudescription
position: absolute;
right: 100%;
top: 0;
This will help to position the tooltip relative to li
Override the width of #menulist to 60px and remove padding-left for the same. This will make sure that the red container is clickable.
Working Code pen
I'm styling a menu that has a toggleClass in there, so far no problem, but when i have the hover function and i do hover then mouse on the menu elements the function executes on all the menu's elements, how do i manage to only affect one at the time?
The menu:
<div id="menu_segundo">
<ul>
<li class="curso av">AV</li>
<li class="curso dc">DC</li>
<li class="curso dp">DP</li>
<li class="curso pa">PA</li>
</ul>
</div>
The Css
#menu_segundo {
margin-top: 20px;
float: right;
background: #58ACFA;
}
.curso {
color: white;
font-family: DIN;
width: 25px;
height: 10px;
border-left: 2px solid white;
padding-left: 10px;
padding-right: 0px;
}
.expand_menu{
color: white;
font-family: DIN;
width: 150px;
height: 10px;
border-left: 2px solid white;
padding-left: 10px;
padding-right: 0px;
}
The JS
var segundo = $('#menu_segundo').find('ul').children();
segundo.hover(function(){
$(this).toggleClass('expand_menu');
})
Here is a DEMO of the menu
This does not need JS to function.
Simply change .expand_menu to .curso:hover in your CSS.
Alternatively, to fix your JS use:
$("#menu_segundo").on("hover", ".curso", function(){
$(this).toggleClass('expand_menu');
});
The problem with your JS is that you are toggling the class on all li elements. segundo is set to equal all li elements, not the one being hovered.
UPDATE
There is a problem beyond the initial applying of classes, the CSS/HTML structure is not rendering correctly. The problem is that extending one of the li elements increases the size of the entire ul moving all li elements in the process.
Updating the HTML to this:
<div id="menu_segundo">
<div class="curso av">AV</div>
<div class="curso dc">DC</div>
<div class="curso dp">DP</div>
<div class="curso pa">PA</div>
</div>
And updating the CSS to:
#menu_segundo {
margin-top: 20px;
float: right;
}
.curso {
color: white;
font-family: DIN;
width: 25px;
border-left: 2px solid white;
padding-left: 10px;
padding-right: 0px;
background: #58ACFA;
float: right;
clear:both;
}
.curso:hover{
width: 150px;
}
Gets the desired behavior. See this Fiddle for an example.
Note
The CSS can also be set to
.expand_menu{
width: 150px;
}
To continue with the JS solution.
Try like
var segundo = $('#menu_segundo li')
segundo.hover(function(){
$(this).toggleClass('expand_menu');
})