The below code achieves a slide up and down action on the selected 'element' but for some reason after slide up, the fa-chevron-down font awesome icon does not display:
function showHideChatBox(element){
var e = jQuery(element).parents(".box1").children(".box1-body");
var t = 0;
if(jQuery(element).hasClass("collapse")) {
jQuery(element).removeClass("collapse").addClass("expand");
t = jQuery(element).children(".fa-chevron-down");
t.removeClass("fa-chevron-down").addClass("fa-chevron-up");
e.slideUp(200);
}
else {
jQuery(element).removeClass("expand").addClass("collapse");
t = jQuery(element).children(".fa-chevron-up");
t.removeClass("fa-chevron-up").addClass("fa-chevron-down");
e.slideDown(200);
}
}
I don't think you are approaching this correctly, you should be referencing the toggle class to properly 'toggle' the font awesome chevron icons. Try using the jQuery toggle class like so:
JS
$(function () {
$('.dropdown_icon').click(function () {
$("#dropdown").slideToggle('fast');
$(this).children(".fa-chevron-down, .fa-chevron-up").toggleClass( 'fa-chevron-down fa-chevron-up');
});
});
Which is a simplified version of the answer to this question: Change class on inactive icon - jquery
HTML
<div id="header">
<ul class="hdr_link_icons">
<li class="dropdown_icon">
Dropdown<i class="fa fa-chevron-down"></i>
</li>
</ul>
<ul class="dropdown_area" id="dropdown">
<li>Your Account <span class="hdr_link_arrow">»</span></li>
<li>Corporate Sales <span class="hdr_link_arrow">»</span></li>
<li>Got a voucher? <span class="hdr_link_arrow">»</span></li>
</ul>
</div>
CSS
body { margin:0; padding:0; }
ul { margin:0; padding:0; }
#header { height:auto; width:100%; overflow:hidden; border-bottom:1px dashed #c1c1c1; padding:5px 0; }
#header .header_logo { height:40px; width:auto; float:left; }
#header .hdr_link_icons { height:40px; width:auto; float:right; list-style:none; background-color: yellow; }
#header .hdr_link_icons li { height:40px; width:70px; float:right; list-style:none; border-right:1px solid #ebebeb; padding:0 0 0 5px; cursor:pointer; position:relative; }
#header .hdr_link_icons li i { position:absolute; right:7px; top:15px; color:#666666; }
#header .hdr_dropdown_area { height:auto; width:100%; background:#F5F2F2; border-top:5px solid #712D55; position:absolute; top:51px; right:0; }
#header .hdr_dropdown_area li { height:auto; float:none; border-bottom:1px dotted #c1c1c1; font-family:tahoma, arial; padding:10px 0; margin:0 0 0 10px !important; text-align:left; text-transform:capitalize; }
#header .hdr_dropdown_area li:last-child { border:none; }
#header .hdr_dropdown_area li a { color:#333333; text-decoration:none; }
#header .dropdown_area { display:none; }
Related
I want to show a pop-up window on this binary tree view and when clicking on each node I need to show details on the node using ajax. I only need javascript and ajax code for how to pass data to the popup window. I already wrote some code but not sure if it's correct. I'm seeking for a solution.My popup window code is attached in here and Check the diagram for how the view should be. If any further question let me know. Thank you.
html,body,div,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,ol,ul,li,form,fieldset,legend,label,table,header,footer,nav,section,figure
{
margin:0;
padding:0;
}
html
{
overflow-y:scroll;
}
body
{
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:14px;
line-height:1.6;
color:#5A6064;
}
pre,code
{
tab-size:4;
}
p
{
margin:0 0 11px;
}
ul
{
list-style:disc;
}
ul,ol
{
padding:0;
margin:0 0 11px 25px;
}
li
{
line-height:22px;
margin:0 0 .5em;
}
h1,h2,h3,h4,h5,h6
{
margin:0;
font-weight:400;
text-rendering:optimizelegibility;
color:#282B30;
font-family:Calibri,"PT Sans","Trebuchet MS",'Helvetica Neue',Arial
}
.gc3
{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
width:50%;
float:left;
padding:1em;
overflow:hidden
}
.grid-c .gc3:nth-of-type(2n+1)
{
clear:left
}
#logo
{
height:150px;
text-align:center;
position:relative;width:100%;
-webkit-user-select:none;
-moz-user-select:none;
padding:0 3em;
margin-left:-3em;
cursor:pointer;
margin-top:50px;
margin-bottom:50px
}
#broken-glass
{
height:100%;
-webkit-tap-highlight-color:transparent;
position:absolute;
left:0;
top:0;
width:100%
}
#logo:active h1
{
top:1px
}
#logo h1
{
margin-top:27px;
font-size:63px;
line-height:1.4;
top:0
}
#logo h1
{
text-align:center;
font-weight:700;
width:100%;
color:#000;
position:absolute;
left:0;
-webkit-user-select:none;
-moz-user-select:none;
cursor:pointer;
}
h2.intro
{
font-size:22px;
line-height:1.2;
font-weight:400;
border:0;
margin-top:0;
}
#header-links
{
font-size:16px;
}
#main-wrapper
{
background:0;
max-width:800px;
width:100%;
margin:2em auto 4em;
padding:3em;
padding-top:0;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
position:relative;
}
.white-popup-block
{
background:#FFF;
padding:20px 30px;
text-align:left;
max-width:650px;
margin:40px auto;
position:relative;
}
#logo-overlay
{
width:100%;
height:75px;
}
#logo-overlay
{
opacity:1;
background:red;
position:absolute;
left:0;
top:0;
opacity:0;
}
#mfp-build-tool
{
background:#FFF;
padding:30px 40px 40px;
max-width:500px;text-align:left;
margin:10px auto;
position:relative;
}
.il
{
color:#099;
}
.mfp-bg
{
top:0;
left:0;
width:100%;
height:100%;
z-index:1042;
overflow:hidden;
position:fixed;
background:#0b0b0b;
opacity:.8;
filter:alpha(opacity=80);
}
.mfp-wrap
{
top:0;
left:0;
width:100%;
height:100%;
z-index:1043;
position:fixed;
outline:0!important;
-webkit-backface-visibility:hidden;
}
.mfp-container
{
text-align:center;
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
padding:0 8px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.mfp-container:before
{
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
.mfp-align-top .mfp-container:before
{
display:none;
}
.mfp-content
{
position:relative;
display:inline-block;
vertical-align:middle;
margin:0 auto;
text-align:left;
z-index:1045;
}
.mfp-inline-holder .mfp-content,.mfp-ajax-holder .mfp-content
{
width:100%;
cursor:auto;
}
.mfp-ajax-cur
{
cursor:progress;
}
.mfp-zoom-out-cur,.mfp-zoom-out-cur .mfp-image-holder .mfp-close
{
cursor:-moz-zoom-out;
cursor:-webkit-zoom-out;
cursor:zoom-out;
}
.mfp-zoom
{
cursor:pointer;
cursor:-webkit-zoom-in;
cursor:-moz-zoom-in;
cursor:zoom-in;
}
.mfp-auto-cursor .mfp-content
{
cursor:auto;
}
.mfp-close,.mfp-arrow,.mfp-preloader,.mfp-counter
{
-webkit-user-select:none;
-moz-user-select:none;
user-select:none;
}
.mfp-loading.mfp-figure
{
display:none;
}
.mfp-hide
{
display:none!important;
}
.mfp-preloader
{
color:#ccc;
position:absolute;
top:50%;
width:auto;
text-align:center;
margin-top:-.8em;
left:8px;
right:8px;
z-index:1044;
}
.mfp-preloader a
{
color:#ccc;
}
.mfp-preloader a:hover
{
color:#fff;
}
.mfp-s-ready .mfp-preloader
{
display:none;
}
.mfp-s-error .mfp-content
{
display:none;
}
button.mfp-close,button.mfp-arrow
{
overflow:visible;
cursor:pointer;
background:transparent;
border:0;
-webkit-appearance:none;
display:block;
outline:0;
padding:0;
z-index:1046;
-webkit-box-shadow:none;
box-shadow:none;
}
button::-moz-focus-inner
{
padding:0;
border:0;
}
.mfp-close
{
width:44px;
height:44px;
line-height:44px;
position:absolute;
right:0;
top:0;
text-decoration:none;
text-align:center;
opacity:.65;
padding:0 0 18px 10px;
color:#fff;
font-style:normal;
font-size:28px;
font-family:Arial,Baskerville,monospace;
}
.mfp-close:hover,.mfp-close:focus
{
opacity:1;
}
.mfp-close:active
{
top:1px;
}
.mfp-close-btn-in .mfp-close
{
color:#333;
}
<body>
<div class="example gc3">
<h3>Popup For Details</h3>
<div class="html-code">
<!-- link that opens popup -->
<a class="popup-with-form" href="#test-form">Click Here</a>
<!-- form itself -->
<form id="test-form" class="mfp-hide white-popup-block">
<h1>Details</h1>
<fieldset style="border:0;">
<ol>
<li>
<label for="name">Name</label>
<input id="name" name="name" type="text" placeholder="Name" required>
</li>
<li>
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="example#domain.com" required>
</li>
<li>
<label for="ID">Id No</label>
<input id="ID" name="ID" type="ID" placeholder="Eg. 0001" required>
</li>
</ol>
</fieldset>
</form>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.popup-with-form').magnificPopup({
type: 'inline',
preloader: false,
focus: '#name',
callbacks: {
beforeOpen: function() {
if($(window).width() < 700) {
this.st.focus = false;
} else {
this.st.focus = '#name';
}
}
}
});
});
$(document).ready(function() {
$('.simple-ajax-popup-align-top').magnificPopup({
type: 'ajax',
alignTop: true,
overflowY: 'scroll'
});
$('.simple-ajax-popup').magnificPopup({
type: 'ajax'
});
$.ajax({
type: "POST",
url:
data:{name:$("#name_new").val(),Email:$("#email_new").val(),ID:$("ID_new").val()},
success: function(){
$(this).hide();
$('div.success').fadeIn();
}
}
});
</script>
</body>
enter code here
Sup guys,
for a while now I have been trying to get this to work in jQuery, but I have no idea how to accomplish that.
It's about the mobile navigation of a basic website.
Basically I am trying to achieve that the mobile navigation closes if we click on the 3 dots with the adress data and the other way around. You can see it in this example:
https://www.templatemonster.com/de/demo/62436.html
Choose the mobile version to see what I mean.
Does anyone know how to do this with jQuery or javascript?
Here is what I have currently:
Adress Data
$('.js--adress-icon').click(function() {
var kont = $('.js--adress-nav');
kont.slideToggle(200);
});
Mobile Navigation
var hamburger = $('#hamburger-icon');
hamburger.click(function() {
var nav = $('.js--main-nav');
nav.slideToggle(200);
hamburger.toggleClass('active');
return false;
});
if ($(window).width() < 768){
$('.main-navigation li a').on('click', function(){
$('.js--main-nav').hide();
$('#hamburger-icon').removeClass('active');
});
};
Thx in advance!
I don't know what your html looks like but this is a simple way to achieve this using css and javascript
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<nav class="menu">
<ul class="active">
<li class="current-item">Home</li>
<li>Menu1</li>
<li>Menu2</li>
</ul>
<a class="toggle-nav" href="#">⁝</a>
</nav>
</body>
then your javascript
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
e.preventDefault();
});
});
then your css
/*----- Toggle Button -----*/
/*----- Menu -----*/
#media screen and (min-width: 860px) {
.menu {
width:100%;
padding:10px 18px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
}
}
.menu ul {
display:inline-block;
}
.menu li {
margin:0px 50px 0px 0px;
float:left;
list-style:none;
font-size:17px;
}
.menu li:last-child {
margin-right:0px;
}
.menu a {
text-shadow:0px 1px 0px rgba(0,0,0,0.5);
color:#777;
transition:color linear 0.15s;
}
.menu a:hover, .menu .current-item a {
text-decoration:none;
color:#66a992;
}
/*----- Responsive -----*/
#media screen and (max-width: 1150px) {
.wrap {
width:90%;
}
}
#media screen and (max-width: 970px) {
.search-form input {
width:120px;
}
}
#media screen and (max-width: 860px) {
.menu {
position:relative;
display:inline-block;
}
.menu ul.active {
display:none;
}
.menu ul {
width:100%;
position:absolute;
top:120%;
left:0px;
padding:10px 18px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
}
.menu ul:after {
width:0px;
height:0px;
position:absolute;
top:0%;
left:22px;
content:'';
transform:translate(0%, -100%);
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:7px solid #303030;
}
.menu li {
margin:5px 0px 5px 0px;
float:none;
display:block;
}
.menu a {
display:block;
}
.toggle-nav {
padding:20px;
float:left;
color:#777;
font-size:20px;
}
.toggle-nav:hover, .toggle-nav.active {
text-decoration:none;
color:#66a992;
}
}
check this fiddle : https://jsfiddle.net/wggs8pf8/
I have two divs for which I have two buttons. Clicking on the buttons, I want to alert the "top" style property of the divs, in the codes as below:
However, when I click on the buttons, what they return is "undefined". I'd be grateful if you kindy let me know where I am going wrong.
HTML:
<div id="container">
<div id="section_1"></div>
<div id="section_2"></div>
<button id="edit_1" onClick="edit(1);"></button>
<button id="edit_2" onClick="edit(2);"></button>
</div>
javascript:
function edit(clicked_edit) {
var tp=document.getElementById('section_'+clicked_edit).top;
alert(tp);
}
CSS:
*{
margin:0px;
padding:0px;
}
body{
width:100%;
background-color:#F4F4F2;
margin-top:15px;
font-family:verdana;
}
#container{
width:820px;
height:400px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
border: dashed 2px blue;
position:relative;
z-index:1;
}
#section_1{
width:800px;
height:198px;
border-top: solid 2px #D24726;
background-color:#ffcccc;
top:0px;
position: absolute;
z-index:2;
}
#section_2{
width:800px;
height:198px;
border-top: solid 2px #14826D;
background-color:#C1FBDE;
top:200px;
position: absolute;
z-index:2;
}
#edit_1{
width:50px;
height:15px;
position:absolute;
margin-left:740px;
margin-top:15px;
border:none;
cursor:pointer;
z-index:4;
background-color:red;
}
#edit_2{
width:50px;
height:15px;
position:absolute;
margin-left:740px;
margin-top:215px;
border:none;
cursor:pointer;
z-index:4;
background-color:green;
}
Js Fiddle
change .top to .offsetTop you will get the position
function edit(clicked_edit) {
var tp = document.getElementById('section_' + clicked_edit).offsetTop;
alert(tp);
}
Edit
made changes to set the div to same position as the offset value
function edit(clicked_edit) {
var tp = document.getElementById('section_' + clicked_edit).offsetTop;
document.getElementById('expansion').style.top = tp + 'px'; // need to add this
document.getElementById('expansion').style.display = 'block';
}
For that you would use getComputedStyle method of the window object in this way:
function edit(clicked_edit) {
var el = document.getElementById('section_'+clicked_edit);
top = window.getComputedStyle(el, null).getPropertyValue('top')
alert(top);
}
function edit(clicked_edit) {
var el = document.getElementById('section_' + clicked_edit),
top = window.getComputedStyle(el, null).getPropertyValue('top')
alert(top);
}
* {
margin:0px;
padding:0px;
}
body {
width:100%;
background-color:#F4F4F2;
margin-top:15px;
font-family:verdana;
}
#container {
width:820px;
height:400px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
border: dashed 2px blue;
position:relative;
z-index:1;
}
#section_1 {
width:800px;
height:198px;
border-top: solid 2px #D24726;
background-color:#ffcccc;
top:0px;
position: absolute;
z-index:2;
}
#section_2 {
width:800px;
height:198px;
border-top: solid 2px #14826D;
background-color:#C1FBDE;
top:200px;
position: absolute;
z-index:2;
}
#edit_1 {
width:50px;
height:15px;
position:absolute;
margin-left:740px;
margin-top:15px;
border:none;
cursor:pointer;
z-index:4;
background-color:red;
}
#edit_2 {
width:50px;
height:15px;
position:absolute;
margin-left:740px;
margin-top:215px;
border:none;
cursor:pointer;
z-index:4;
background-color:green;
}
<div id="container">
<div id="section_1"></div>
<div id="section_2"></div>
<button id="edit_1" onClick="edit(1);"></button>
<button id="edit_2" onClick="edit(2);"></button>
</div>
I have a mobile site I'm working on. I finally got the JS code to work for showing submenu on click rather than hover. Now I'm having trouble positioning the submenu directly under the main menu. I researched the best i can, found that i need to make the main menu position "relative" and submenu "absolute". I've been going in circles trying to figure apply that, but no luck. The code is a bit messy so pardon me. I'm just a noob.
HTML
<html>
<head>
<link rel="stylesheet" href="phone.css">
</head>
<body>
<img class="smlogo" alt="" src="clearlogo123.png">
<div id="menuclick" class="smenu_div">
<ul>
<li>Menu
</div>
<div id="hiddenMenu" class="smenu_div" style="display: none;">
<ul>
<li>1Submenu</li>
<li>2Submenu</li>
</ul>
</div>
</li>
</ul>
<br>
<script>
var hidden = true;
document.getElementById('menuclick').onclick = function () {
document.getElementById('hiddenMenu').style.display = (hidden) ? 'block' : 'none';
hidden = !hidden;
};
</script>
</body></html>
CSS
.smenu_div ul
{
padding:0px;
margin-top:35px;
margin-right:40px;
font-family:georgia;
font-size:60px;
color:#ffffff;
list-style:none;
text-indent:15px;
text-align:center;
width:35%;
float:right;
overflow:hidden;
position: relative;
display: block;
}
.smenu_div ul li
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background:#000000;
line-height:justified;
border-bottom:1px solid #333;
margin-top: 10px;
z-index: 50;
position:relative;
}
.smenu_div li ul
{
position:absolute;
float:right;
}
.smenu_div ul li a
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-decoration:none;
color:#ffffff;
display:block;
position:relative;
}
.smenu_div ul li a:hover
{
color:#000000;
background:#fdff30;
}
.smenu_div ul li#active
{
position:relative;
color:#000000;
background:#fdff30;
}
Try changing your HTML so that you dont have a div ending in the middle of the first li.
Then if you put an ID directly onto the hidden menu, you can use the javascript to directly hide / show the hidden menu
http://jsbin.com/fexazihe/1/edit?html,css,js,output
HTML
<body>
<img class="smlogo" alt="" src="clearlogo123.png">
<div id="menuclick" class="smenu_div">
<ul>
<li>
Menu
<ul id='hiddenMenu'>
<li>1Submenu</li>
<li>2Submenu</li>
</ul>
</li>
</ul>
</div>
</body>
CSS
.smenu_div ul
{
padding:0px;
margin-top:35px;
margin-right:40px;
font-family:georgia;
font-size:60px;
color:#ffffff;
list-style:none;
text-indent:15px;
text-align:center;
width:35%;
overflow:hidden;
position: relative;
display: block;
}
.smenu_div ul li
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: rgba(0,0,0,0);
line-height:justified;
border-bottom:1px solid #333;
margin-top: 10px;
z-index: 50;
position:relative;
}
/* Changed this so that your hidden menu is hidden by default */
.smenu_div li ul
{
display: none;
position: relative;
width: 100%;
background: transparent;
}
.smenu_div ul li a
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-decoration:none;
color:#ffffff;
background: #000000;
display:block;
position:relative;
}
.smenu_div ul li a:hover
{
color:#000000;
background:#fdff30;
}
.smenu_div ul li#active
{
position:relative;
color:#000000;
background:#fdff30;
}
JS
<script>
var hidden = true;
document.getElementById('menuclick').onclick = function () {
document.getElementById('hiddenMenu').style.display = (hidden) ? 'block' : 'none';
hidden = !hidden;
};
</script>
I am trying to put 3 images next to each other in jCarousel Lite. The 3 images need to be visible and the scroll is set to 2,5.
Here's what it looks like as of now.
jCarousel Lite
<script type="text/javascript" src="/js/jcarousel/jcarousel.min.js"></script>
<script type="text/javascript" src="/js/jcarousel/jcarousel.lite.js"></script>
<script type="text/javascript">
$(function(){
$(".slideshow").jCarouselLite({
btnNext: ".navNext",
btnPrev: ".navPrevious",
auto: 4000,
speed: 6000,
visible: 3,
scroll: 2.5,
circular: true
});
});
</script>
CSS
.fullSlider {
text-align: center;
display: block;
width: 1000px;
}
.slideshow {
height:100%;
margin:0 auto;
padding:0;
float:left;
text-align: center;
}
.slide-prev, .slide-next {
width:88px;
height:176px;
margin:0;
padding:0;
float:left;
}
.navPrevious, .navNext {
background:url("/js/jcarousel/tango/slide_btn.png") 0 0 no-repeat;
position:absolute;
width:88px;
height:176px;
margin:0;
padding:0;
float:left;
font-size:1px;
text-indent:-9999px;
z-index: 1001 !important;
}
.navPrevious:hover, .navNext:hover {
border:none;
}
.navPrevious {
left:5px;
}
.navNext {
right:5px;
}
.navNext {
background-position:-88px 0;
}
#slider {
width:800px;
height:176px;
margin:0 auto;
padding:0;
text-align: center;
}
#slider ul {
width:800px;
height:176px;
margin:0 auto;
padding:0;
list-style:none;
}
#slider ul li {
width:300px;
height:176px;
margin:0;
padding:0 1px;
float:left;
}
#slider ul li a {
width:300px;
height:176px;
margin:0;
padding:0;
float:left;
}
.slide-afb {
width:300px;
height:132px;
margin:0;
padding:0;
float:left;
overflow:hidden;
}
.slide-afb table {
width:300px;
height:132px;
margin:0;
padding:0;
float:left;
}
.slide-afb table tr td {
vertical-align:middle;
text-align:center;
}
.slide-afb img {
width:300px;
height:132px;
float:left;
}
.slide-tekst {
width:300px;
height:44px;
line-height:44px;
margin:0;
padding:0;
float:left;
font-size:10px;
font-weight:bold;
color:#fff;
text-align:center;
}
This how I would like it to be:
I would be thankful if someone could help me with this.
I don’t need the exact answer. If you could let me know what I did wrong or if you could provide some tips or direction then I’ll try to fix this myself.