I have a chat fontawesome icon currently coded as:
<li class="hidden-xs"><a href="#" class="right-bar-toggle waves-effect">
<i class="fa fa-comments "></i>
</a></li>
I want a red badge with counter to display when new chat message arrives as follows:
<li class="hidden-xs"><a href="#" class="right-bar-toggle waves-effect"><i class="fa fa-comments "></i>
<span class="badge badge-xs badge-danger">3</span>
</a></li>
3 is an example of unread chat message counter.
Selected portions of my javascript code are as follows:
var msgHistory = document.querySelector('#history');
var msg = document.createElement('p');
msg.innerHTML = name + ': ' + event.data;
msg.className = event.from.connectionId === session.connection.connectionId ? 'mine' : 'theirs';
The chat is displayed in:
<p id="history"></p>
and css are as follows:
#history {
width: 100%;
height: calc(100% - 40px);
overflow: auto;
}
#history .mine {
color: #07715b;
text-align: left;
margin-left: 10px;
}
#history .theirs {
color: #4398db;
text-align: left;
margin-left: 10px;
}
The chat html will display as:
<p id="history">
<p class="mine">Me: Hi</p>
<p class="theirs">User-1: Hello</p>
<p class="mine">Me: I am testing</p>
<p class="theirs">User-1: Okay</p>
</p>
I want to enable the span class= badge and count of <p class="theirs"> being displayed on badge, when another user enters a message.
The span class= badge needs to be disabled and counter reset when <p class="mine"> is set. That is once i enter a message.
The span class= badge and counter needs to display again when new message arrives on <p class="theirs">
How is it possible with jQuery? Thanks in advance.
Related
My question is simple; why don't my class styles apply to dynamically created elements?
I am creating a search bar here where I generate an li per matching result, and append it to my ul. When I inspect the page, I see the classes are applied to the li's correctly, but the styles from the class itself aren't present. I hard coded a test li and it had the expected styles. What am I missing here in order to have my styles applied to these dynamically generated elements? Surely I don't have to assign every style for the li's in my typescript? Any explanation would be lovely, thank you all! (:
My HTML:
<div class="section">
<h2>Step 1: Choose an Identity Provider (IDP)</h2>
<div class="search">
<input
class="focusable"
(focusout)="handleFocusOut()"
(input)="debounce(search, 300, $event)"
placeholder="Select Identity Provider"
autocomplete="off"
/>
<i class="icon fas fa-search"></i>
<ul id="search-options">
<li class="focusable testing">IMG Salesforce</li>
</ul>
</div>
<!-- <i class="fa fa-plus"></i>-->
</div>
My scss:
.section {
...
.search {
position: relative;
width: 300px;
.icon {
position: absolute;
right: 5px;
top: 3px;
}
input {
width: 300px;
}
ul {
color: red;
li {
cursor: pointer;
&:hover {
background-color: grey;
color: red;
}
.testing {
cursor: pointer;
&:hover {
background-color: grey;
color: red;
}
}
}
}
}
}
My TS:
let ul = document.getElementById('search-options');
this.displayServices.forEach((service) => {
let li = document.createElement('li');
li.classList.add('focusable', 'testing');
li.addEventListener('focusout', this.handleFocusOut);
const img = document.createElement('img');
img.src = this.getImgUrl(service);
img.width = 20;
img.height = 20;
img.style.margin = '0 10px';
li.innerHTML = `${service.name}`;
li.style.display = 'flex';
li.style.alignItems = 'center';
li.style.border = '.5px solid black';
li.style.padding = '8px 0';
li.prepend(img);
ul.appendChild(li);
});
It's hard to be precise without seeing the whole tamale, but generally you should be getting your data in the .TS file and sending that data directly to the view. Your view should be creating those elements on the fly. Not shown in the answer here is the inline styles you were adding to the image and the LI tag - just do those in CSS.
Something like this:
TS:
this.someService.getData.subscribe(displayServices => {
this.displayServices = displayServices;
})
HTML:
<div class="section">
<h2>Step 1: Choose an Identity Provider (IDP)</h2>
<div class="search">
<input
class="focusable"
(focusout)="handleFocusOut($event)"
(input)="debounce(search, 300, $event)"
placeholder="Select Identity Provider"
autocomplete="off" />
<i class="icon fas fa-search"></i>
<ul id="search-options">
<li *ngFor="service in displayServices"
class="focusable testing"
(focusout)="handleFocusOut($event)">
<img [src]="getImgUrl(service)" />
{{service.name}}</li>
</ul>
</div>
<!-- <i class="fa fa-plus"></i>-->
</div>
the classes are applied to the li's correctly, but the styles from the class itself aren't present
If you mean the focusable and testing classes, I don't see them in your SCSS.
Hey am a new web developer and I am writing a html, css and javascript. I have created a "copy" button to copy the text inside the <p> element and a alert that the text is copied.
buttons.forEach((copystatus) => {
copystatus.addEventListener('click', (e) => {
const copylatest = e.target.closest(".latestatus").querySelector("p").innerText;
const copyText = document.createElement('textarea');
copyText.style.width = "0";
copyText.style.height = "0";
copyText.style.outline = "none";
copyText.style.border = "none";
copyText.value = copylatest;
document.body.appendChild(copyText);
copyText.select();
document.execCommand('copy');
document.body.removeChild(copyText);
copyalert.style.visibility = "visible"
e.target.closest(".latestatus").querySelector("p").appendChild(copyalert);
setTimeout(function() {
copyalert.style.visibility = "hidden"
}, 700);
})
})
.randomStatusCopyAlert {
position: relative;
background-color: #18b495;
color: #ffffff;
padding: 10px 10px;
border-radius: 5px;
z-index: 2;
visibility: hidden;
height: 45px;
float: right;
bottom: 2px;
left: 4%;
}
.randomStatusCopyAlert:before {
content: "";
position: absolute;
height: 10px;
width: 10px;
background-color: #18b495;
left: -5px;
z-index: 1;
transform: rotate(45deg);
top: 39%;
}
<div class="mainStatus">
<h2 class="statusHeading">Latest English Status</h2>
<div class="allStatus">
<div class="block">
<div class="latestatus">
<p>Life is good when you have books</p>
<div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert show">Copied!</span></div>
</div>
<div class="latestatus">
<p>Google is a open source library by Larry Page and Sergey Brin!</p>
<div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
</div>
</div>
<div class="block">
<div class="latestatus">
<p>Cats are better than dogs.</p>
<div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
</div>
<div class="latestatus">
<p>Ferrets are better than rats</p>
<div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
</div>
</div>
</div>
</div>
My main intention is to make visible the respective <span class="randomStatusCopyAlert">Copied!</span> when respective <button class="copystatus btn">Copy</button> is clicked. Although the code is working correctly but the javascript creats itself span and display it.
See I will share some pics so that if I make ". randomStatusCopyAlert" myself visible.
[![See Now the the span is place correctly][1]][1]
Now the span is placed correctly.
When it is done by the above javascript
[![the span change its position and goes into elements when I used html code inspection tool][2]][2]
The span position is changed.
[1]: https://i.stack.imgur.com/aNevS.png
[2]: https://i.stack.imgur.com/b0az4.png
I tried to replicate your code into a simpler structure just for demonstration purpose
Here is the HTML
<div class="statuses-container">
<h2 class="statuses-heading">Latest English Status</h2>
<div class="statuses">
<div class="status">
<p class="status-text">Life is good when you have books</p>
<div class="status-copy-btn-container">
<button class="status-copy-btn btn">Copy</button>
</div>
</div>
<div class="status">
<p class="status-text">Google is an open source library by Larry Page and Sergey Brin!</p>
<div class="status-copy-btn-container">
<button class="status-copy-btn btn">Copy</button>
</div>
</div>
<div class="status">
<p class="status-text">Cats are better than dogs.</p>
<div class="status-copy-btn-container">
<button class="status-copy-btn btn">Copy</button>
</div>
</div>
</div>
</div>
Feel free to change the class names as you wish, I've changed them because I find it easier to read like this. Some of the divs were removed, because I think they were not really necessary in achieving this result.
Please notice that I've removed the span which indicated that the text was copied to clipboard. It is not necessary, because maybe at some point you will decide to change the message, and you will have to change it everywhere. Now, that label saying that the text was copied will be inserted using JS.
Here is the CSS:
status-copy-alert {
position: relative;
background-color: #18b495;
color: #ffffff;
padding: 10px 10px;
border-radius: 5px;
left: 8px;
}
.status-copy-alert:before{
content:"";
position: absolute;
height: 10px;
width: 10px;
background-color: #18b495;
left: -5px;
transform: rotate(45deg);
top: 39%;
}
Some of the properties here were removed as well, because they were not necessary. Since we are adding the span dynamically using the JS, there is no need for the span to be hidden in the beginning.
Here is the JS:
var buttons = document.getElementsByClassName('status-copy-btn');
for (let button of buttons) {
button.addEventListener('click', function() {
let statusElement = this.closest('.status');
let textToCopy = statusElement.getElementsByClassName('status-text')[0].innerHTML;
copyTextToClipboard(textToCopy);
addCopyStatusAlert(this.parentNode);
});
}
function copyTextToClipboard(text) {
const copyText = document.createElement('textarea');
copyText.style.position="absolute";
copyText.style.display="none";
copyText.value = text;
document.body.appendChild(copyText);
copyText.select();
document.execCommand('copy');
document.body.removeChild(copyText);
}
function addCopyStatusAlert(element) {
if (!element.getElementsByClassName('status-copy-alert').length) {
let copyAlertElement = document.createElement('span');
copyAlertElement.classList.add('status-copy-alert')
let copyMessage = document.createTextNode('Copied!');
copyAlertElement.appendChild(copyMessage);
element.appendChild(copyAlertElement);
setTimeout(function() {
element.removeChild(copyAlertElement);
}, 700);
}
}
I've taken all of the buttons and added a click listener on them. When it gets clicked, we take the entire status element and get the p element inside it. We pass the text of the p element to copyTextToClipboard function. Here is only the logic needed for copying the text to clipboard and nothing else.
The addCopyStatusAlert function is used just to append a newly created span as a sibling to the button. And after a short timeout, it gets completely deleted from the DOM.
Here is the link to the pen i've created on CodePen for this. Feel free to experiment with it there.
I am trying to do an optimum level feature which, when a value is higher in an optimum range, a arrow-up glyphicon will be displayed and when the value is lower, it changes to arrow-down glyphicon.
<div class="card-body" ng-repeat="item in resTemperature" ng-if="$last">
<p>
Temperature <span class="text" style="font-weight: bold; font-size:150%" ng-repeat="i in item">{{i}} °C </span>
<span class="glyphicon" style="font-size: 200%; float: right;"></span>
</p>
</div>
Sample result with hardcoded value:
I would approach it the following way.
Add an additional class to your div indicating if your value is higher/lower/optimal.
Then get rid of your glyphicon span, replacing it with a css pseudo-element.
i.e.,
<style>
.card-body .text::after {
font-size: 200%;
float: right;
}
.card-body.optimal .text::after {
content: "O"; /* replacing these with the glyphs you want */
}
.card-body.lower .text::after {
content: "L";
}
.card-body.higher .text::after {
content: "H";
}
</style>
<div class="card-body optimal" ng-repeat="item in resTemperature" ng-if="$last">
<p>Temperature
<span class="text" style="font-weight: bold; font-size:150%" ng-repeat="i in item">{{i}} °C </span>
</p>
</div>
I have a simple bit of JS used to show / hide DIVs:
function HideShow(e, itm_id) {
var tbl = document.getElementById(itm_id);
if (tbl.style.display == ""){
e.innerHTML = "<i class='fa fa-plus' aria-hidden='true'></i>";
tbl.style.display = "none"; }
else {
e.innerHTML = "<i class='fa fa-minus' aria-hidden='true'></i>";
tbl.style.display = ""; }
}
This is a working example of the code on Codepen: Show Hide Divs without jQuery
This is an example of one section:
<div id="activities" style="margin-bottom:50px;">
<div style="color: #000; background: #eee; border-bottom:1px solid #ccc; padding:5px;">
<h1 class="heading"><i class='fa fa-minus' aria-hidden='true'></i> Activities <span style="color:#ccc;"></span></h1>
</div>
<div id="parent_activities" style="background: #fff; padding:20px;">
<div id="activities__award-medal" style="background: #fff; padding-left:10px; background:#f1f1f1; border-top:1px solid #fff; font-size:30px;"><i class='fa fa-minus' aria-hidden='true'></i> award-medal <span style="color:#ccc;"></span></div>
<div id="child_award-medal" style="background: #fff; padding:20px;">
<ul class="gallery grid">
<li>
<a href="#">
<img title="military medal - 🎖️" src="https://cdn.jsdelivr.net/emojione/assets/svg/1f396.svg" style="width:64x; height:64px" role="presentation">
</a>
</li>
</ul>
</div>
<div id="activities__event" style="background: #fff; padding-left:10px; background:#f1f1f1; border-top:1px solid #fff; font-size:30px;"><i class='fa fa-minus' aria-hidden='true'></i> event <span style="color:#ccc;"></span></div>
<div id="child_event" style="background: #fff; padding:20px;">
<ul class="gallery grid">
<li>
<a href="#">
<img title="jack-o-lantern - 🎃" src="https://cdn.jsdelivr.net/emojione/assets/svg/1f383.svg" style="width:64x; height:64px" role="presentation">
</a>
</li>
</ul>
</div>
</div>
</div>
The top level example has an id of parent_activities and then there are two child values:
child_award-medal
child_event
I'd like to work out how to add two links:
A link to toggle the HideShow function for the parents so that all divs with an ID starting with parent_ are shown / hidden
A link to toggle the HideShow function for the children so that all divs with an ID starting with child_ are shown / hidden
I'm not sure how I'd go about that though.
Any advice much appreciated. Thanks
Note: this isn't a fully complete solution. The intention is to assist you in the parts that are giving you pause.
Try not to embed JavaScript in your HTML body; it's unnecessary markup and makes it difficult to track down and debug errors. I did not change your existing calls, but demonstrate how it can be done by using addEventListener with the newer code
You can target your elements using document.querySelectorAll and looking for the prefix you're interested in (e.g., parent_, child_). Which prefixes to use have been added to the links in the data-selector attributes
because the toggling action is not going to another page, these should be buttons or spans
to hide elements, you can use the Bootstrap display classes, as I have used d-none which stands for display none. The Bootstrap library provides these to make it especially easier for responsive layouts
many of your inline-CSS should be in classes, this is to both reduce your markup and make it more organized
// So forEach can be used on 'querySelectorAll' and 'getElementsByClassName' collections
HTMLCollection.prototype.forEach = NodeList.prototype.forEach = Array.prototype.forEach;
function HideShow(e, itm_id) {
var tbl = document.getElementById(itm_id);
if (tbl.style.display == "") {
e.innerHTML = "<i class='fa fa-plus' aria-hidden='true'></i>";
tbl.style.display = "none";
} else {
e.innerHTML = "<i class='fa fa-minus' aria-hidden='true'></i>";
tbl.style.display = "";
}
}
// -----------------------------------------------------------
// NEW Code
// New toggle links
let toggles = document.getElementsByClassName('toggler');
// Attach click event
toggles.forEach(link => link.addEventListener('click', fnToggleElement))
// Event handler definition
function fnToggleElement() {
let elements = document.querySelectorAll(`[id^="${this.dataset.selector}"]`)
let className = 'd-none'
elements.forEach(el => {
let fas = el.parentElement.closest('.item,.sub-container,.menu-container').querySelectorAll('.fa')
if (el.classList.contains(className)) {
el.classList.remove(className)
fas.forEach(fa => {
fa.classList.remove('fa-plus')
fa.classList.add('fa-minus')
})
} else {
el.classList.add(className)
fas.forEach(fa => {
fa.classList.remove('fa-minus')
fa.classList.add('fa-plus')
})
}
})
}
.menu-container {
margin-bottom: 50px;
}
.sub-container {
padding: 20px;
}
.heading {
color: #000;
background: #eee;
border-bottom: 1px solid #ccc;
padding: 5px;
}
.indent {
background: #fff;
padding: 20px;
}
.icon {
width: 64px;
height: 64px;
}
.item {
background: #fff;
padding-left: 10px;
background: #f1f1f1;
border-top: 1px solid #fff;
font-size: 30px;
}
.toggler {
cursor: pointer;
display: inline-block;
}
.gallery {
width: 100%;
*width: 99.94877049180327%;
margin: 0;
padding: 0;
}
.gallery.grid li {
margin: 2px 5px;
}
.gallery.grid li {
margin: 2px 5px;
display: block;
}
.gallery.grid li:hover {
background: #ccc;
}
.gallery.grid li {
display: inline-block;
border-top: 1px solid #eee;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #eee;
padding: 6px;
position: relative;
-moz-box-sizing: border-box;
border-radius: 3px 3px 3px 3px;
background: #fff;
}
.gallery a {
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-sm"><span class="toggler btn-link" data-selector="parent_">Toggle Parents</span></div>
<div class="col-sm"><span class="toggler btn-link" data-selector="child_">Toggle Children</span></div>
</div>
</div>
<div class="container-fluid">
<div id="activities" class="menu-container">
<h1 class="heading">
<a href="javascript:;" onclick="HideShow(this,'parent_activities')">
<i class='fa fa-minus' aria-hidden='true'></i>
</a> Activities
<span style="color:#ccc;"></span>
</h1>
<div id="parent_activities" class="sub-container">
<div id="activities__award-medal" class="item">
<a href="javascript:;" onclick="HideShow(this,'child_award-medal')">
<i class='fa fa-minus' aria-hidden='true'></i>
</a> award-medal
<span style="color:#ccc;"></span>
</div>
<div id="child_award-medal" class="indent">
<ul class="gallery grid">
<li>
<a href="# ">
<img title="military medal - 🎖️" src="https://cdn.jsdelivr.net/emojione/assets/svg/1f396.svg " class="icon" role="presentation">
</a>
</li>
</ul>
</div>
<div id="activities__event " class="item">
<a href="javascript:; " onclick="HideShow(this, 'child_event') ">
<i class='fa fa-minus' aria-hidden='true'></i>
</a> event
<span style="color:#ccc; "></span>
</div>
<div id="child_event " class="indent">
<ul class="gallery grid ">
<li>
<a href="# ">
<img title="jack-o-lantern - 🎃" src="https://cdn.jsdelivr.net/emojione/assets/svg/1f383.svg" class="icon" role="presentation">
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="animals-nature" class="menu-container">
<h1 class="heading"><i class='fa fa-minus' aria-hidden='true'></i> Animals & Nature <span style="color:#ccc;"></span></h1>
<div id="parent_animals-nature" class="sub-container">
<div id="animals-nature__animal-amphibian " class="item ">
<a href="javascript:;" onclick="HideShow(this, 'child_animal-amphibian')">
<i class='fa fa-minus' aria-hidden='true'></i>
</a> animal-amphibian
<span style="color:#ccc;"></span>
</div>
<div id="child_animal-amphibian" class="indent">
<ul class="gallery grid">
<li>
<a href="# ">
<img title="frog face - 🐸 " src="https://cdn.jsdelivr.net/emojione/assets/svg/1f438.svg " style="width:64x; height:64px " role="presentation ">
</a>
</li>
</ul>
</div>
<div id="animals-nature__animal-bird " class="item">
<a href="javascript:;" onclick="HideShow(this, 'child_animal-bird')">
<i class='fa fa-minus' aria-hidden='true'></i>
</a> animal-bird
<span style="color:#ccc;"></span>
</div>
<div id="child_animal-bird" class="indent">
<ul class="gallery grid">
<li>
<a href="# ">
<img title="turkey - 🦃 " src="https://cdn.jsdelivr.net/emojione/assets/svg/1f983.svg " style="width:64x; height:64px " role="presentation ">
</a>
</li>
</ul>
</div>
</div>
</div>
Try the following selector and apply:
document.querySelectorAll('[id^="child_"]')
See the below snippet for an example:
function toggleIdStartingWith( prefix = 'parent_' ){
// Select all IDs starting with prefix and turn this NodeList into an array
// so we can loop through it easily later.
var all = [...document.querySelectorAll(`[id^="${prefix}"]`)];
// Determine whether we want to turn them on or off by
// checking the first element. You might want to also check
// if any elements are found at all before doing this.
var hidden = all[ 0 ].style.display === 'none';
// Apply the display style to all.
all.forEach(element => {
element.style.display = hidden ? '' : 'none';
});
// Return the inverted hidden value, which is what we applied.
// Useful if you want to toggle stuff, and then see what the result
// was in the code that called the function.
return !hidden;
}
// For testing purposes I am hooking two buttons up for testing this.
document.getElementById('hideshow_parents').addEventListener( 'click', event => {
event.preventDefault()
event.target.textContent = toggleIdStartingWith( 'parent_' )
? 'Show all Parents'
: 'Hide all Parents'
})
document.getElementById('hideshow_children').addEventListener( 'click', event => {
event.preventDefault()
event.target.textContent = toggleIdStartingWith( 'child_' )
? 'Show all Children'
: 'Hide all Children'
})
<div id="parent_1">Parent</div>
<div id="child_1">Child</div>
<div id="parent_2">Parent</div>
<div id="child_2">Child</div>
<div id="parent_3">Parent</div>
<div id="child_3">Child</div>
<div id="parent_4">Parent</div>
<div id="child_4">Child</div>
<div id="parent_5">Parent</div>
<div id="child_5">Child</div>
<button id="hideshow_parents">Hide/Show Parents</button>
<button id="hideshow_children">Hide/Show Children</button>
As you asked in the comment, switching the classes depending on the toggle state is easy too. I personally think you shouldn't mix html and interactivity, so I am going to use addEventListener in my example:
function toggleIdStartingWith( prefix = 'parent_' ){
var all = [...document.querySelectorAll(`[id^="${prefix}"]`)];
var hidden = all[ 0 ].style.display === 'none';
all.forEach(element => {
element.style.display = hidden ? '' : 'none';
});
return !hidden;
}
document.querySelector('h1').addEventListener( 'click', event => {
event.preventDefault()
if( toggleIdStartingWith( 'parent_' ) ){
event.target.textContent = 'Show';
event.target.classList.remove( 'fa-minus' )
event.target.classList.add( 'fa-plus' )
} else {
event.target.textContent = 'Hide';
event.target.classList.add( 'fa-minus' )
event.target.classList.remove( 'fa-plus' )
}
})
.fa-minus:before { content: '-'; }
.fa-plus:before { content: '+'; }
<div id="parent_1">Parent</div>
<div id="parent_2">Parent</div>
<div id="parent_3">Parent</div>
<div id="parent_4">Parent</div>
<div id="parent_5">Parent</div>
<h1 class="fa-minus">Hide</h1>
If you are insistent on getting it as an onclick in your html, just wrap it in a function:
function toggle( target, prefix ){
if( toggleIdStartingWith( prefix ) ){
target.textContent = 'Show';
target.classList.remove( 'fa-minus' )
target.classList.add( 'fa-plus' )
} else {
target.textContent = 'Hide';
target.classList.add( 'fa-minus' )
target.classList.remove( 'fa-plus' )
}
}
And call it as such:
<h1 onclick="toggle( this, 'parent_); return false;'"></h1>
Also, just so you know, it might be good to return false if you are going to use onclick handlers in HTML to prevent the default events from occuring. Then you can just leave your link set to # instead of the ugly javascript:;.
You should use querySelectorAll() to select "IDs starting with...". This can be done like document.querySelectorAll('[id^="start_"]') and then you iterate through the elements applying the style to hide or show.
Check out this fiddle: https://jsfiddle.net/1c38dezk/
You should use querySelectorAll() to select "IDs starting with...".
Have a nice day
I got a banner at the top of my website that contains some contact information. When a user clicks on the bar, the bar expands and shows it's contents. But the expanded div is displayed over the website, is it possible for the site to scale with the div? So that the top of the site begins under the expanded div.
I tried by giving the div I use position: relative, but this didn't do anything.
My code:
HTML:
<div class="bannertop">
<div id="cont">
<i class="fa fa-chevron-down telefoontje" aria-hidden="true"></i>
<ul class="bannertopcontact">
<li class="banneritem">
<a style="color:#fff;" href="tel:+2523532523532"><i class="fa fa-phone" aria-hidden="true"></i>352353252</a>
</li>
<li class="banneritem">
<a style="color:#fff;" href="mailto:info#website.nl"><i class="fa fa-envelope" aria-hidden="true"></i> info#website.nl</a>
</li>
<li class="banneritem">
<a style="color:#fff;" href="contact.php"><i class="fa fa-external-link" aria-hidden="true"></i> Contactpagina</a>
</li>
</ul>
</div>
</div>
Jquery:
<script>
$(document).ready(function()
{
$.fn.animateRotate = function(angle, duration, easing, complete) {
var args = $.speed(duration, easing, complete);
var step = args.step;
return this.each(function(i, e) {
args.step = function(now) {
$.style(e, 'transform', 'rotate(' + now + 'deg)');
if (step) return step.apply(this, arguments);
};
$({deg: 0}).animate({deg: angle}, args);
});
};
$("#buttonphone").click(function(){
if (!$(this).hasClass("expanded")){
$("#cont").animate({height: '160px',},340);
$('.telefoontje').animate({ marginTop: "140px" }, 300)
$(".telefoontje").animateRotate(180, 400, "linear", function(){
});
$(this).addClass("expanded");
}
else {
$("#cont").animate({height: '35px',},300);
$('.telefoontje').animate({ marginTop: "10px" }, 300)
$(".telefoontje").animateRotate(-180, 400, "linear", function(){
});
$(this).removeClass("expanded");
}
});
});
</script>
And finally some CSS:
.bannertop{
font-size: 15px;
height:40px;
text-align:center;
display: none;
position:relative;
z-index:999999999999999999!important;
}
.telefoontje{
color: #fff;
display:inline-block;
margin-top:10px;
position:absolute;
font-size: 16px!important;
z-index:999999999999999999;
}
.bannertopcontact{
list-style: none;
color: #fff;
margin-top:30px;
z-index:999999999999999999!important;
}
.banneritem{
margin-top:13px;
}
#cont{
background-color:#85BD3E;
height: 35px;
overflow:hidden;
z-index:999999999999999999!important;
position:relative;
}
I've simplified the code to only keep a slideToggle() animation instead. Then I removed the high values of z-index that were useless in the code and try to keep it as simple as it could be.
$("#buttonphone").click(function(){
$('.bannertopcontact').slideToggle();
});
.bannertop{
font-size: 15px;
text-align:center;
}
.telefoontje{
color: #fff;
display:inline-block;
margin-top:10px;
font-size: 16px;
}
.bannertopcontact{
list-style: none;
color: #fff;
padding-left: 0;
margin: 0;
display: none;
padding-bottom: 30px;
}
.banneritem{
margin-top:13px;
}
#cont{
background-color:#85BD3E;
}
#buttonphone {
padding: 15px 0; display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="bannertop">
<div id="cont">
button
<ul class="bannertopcontact">
<li class="banneritem">
<a style="color:#fff;" href="tel:+2523532523532"><i class="fa fa-phone" aria-hidden="true"></i>352353252</a>
</li>
<li class="banneritem">
<a style="color:#fff;" href="mailto:info#website.nl"><i class="fa fa-envelope" aria-hidden="true"></i> info#website.nl</a>
</li>
<li class="banneritem">
<a style="color:#fff;" href="contact.php"><i class="fa fa-external-link" aria-hidden="true"></i> Contactpagina</a>
</li>
</ul>
</div>
</div>
<p id="content">website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content </p>