I have a fixed menu button that displays the menu items when is clicked. The problem is that when is clicked, it always goes to the top of the page just before the menu is open. I have tried width e.preventDefault(); and e.stopImmediatePropagation() but nothing happens. I think there should be a way to detect the scroll position to keep the menu div sticky at the same position where is open on the page. Also, note that I applied overflow:hidden to the body and HTML to keep them fixed when the menu button is clicked.
$(".nav-mobile-toggle").click(function() {
$("html,body").css("overflow", "hidden");
event.preventDefault();
});
body {
background: #fff;
font-size: 22px;
line-height: 28.6px;
color: #005153;
overflow: hidden !important;
}
html,
body {
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav-mobile-toggle pt8" data-modal-id data-notification-link="nav-slide">
<div class="btn--menu">
<span class="h6 nombre">Menu</span>
<i class="icon-Align-Right icon icon--sm"></i>
</div>
</div>
<div class="notification pos-right pos-top nav-slide col-sm-4 col-xs-12 bg--primary-1" data-notification-link="nav-slide" data-animation="from-right" id="notification">
<div class="nav-slide__content">
<div class="pt104 text-left">
<ul class="menu">
<li>
<a href="/">
<span class="h3">Inicio</span>
</a>
</li>
<li>
<a href="/el-despacho.php">
<span class="h3">El despacho</span>
</a>
</li>
<li>
<a href="/quienes-somos.php">
<span class="h3">Quiénes somos</span>
</a>
</li>
<li>
<a href="/que-nos-diferencia.php">
<span class="h3">Qué nos diferencia</span>
</a>
</li>
<li>
<a href="/lo-que-opinan.php">
<span class="h3">Qué opinan de nosotros</span>
</a>
</li>
<li>
<a href="/areas-practica.php">
<span class="h3">Áreas de práctica</span>
</a>
</li>
<li>
<a href="/blog">
<span class="h3">Blog</span>
</a>
</li>
<li>
<a href="/contacto.php">
<span class="h3">Contacta con nosotros</span>
</a>
</li>
</ul>
</div>
<div class="pos-absolute pos-bottom menu-footer text-right">
<p class="tel">
123 456 789
</p>
<p class="mail">
info#example.com
</p>
</div>
</div>
</div>
add event parameter into the function:
$(".nav-mobile-toggle").click(function(event){
event.preventDefault();
});
Related
I am trying to set a picture for the background of a homepage on my website. How can I do this if I previously had just background colors set? I want the picture to run in the first div and the navigation.
Here is what it looks like currently:
home page link
here is the code for it.
.body{
background-image: url("https://material.angular.io/assets/img/examples/shiba2.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.first-box{
grid-area: first-box;
align-content: center;
padding: 65px 300px;
background-color: transparent;
}
<div class="navigation">
<ul>
<li><a href="index.html">
<div class="icon">
<i class="fa fa-home"></i>
</div>
<div class="name" data-text="fa-home">Home</div>
</a>
</li>
<!--I have used icons with the navigations as it makes it easier for dyslexic people to navigate. -->
<li><a href="tryhelp.html">
<div class="icon">
<i class="fa fa-magic"></i>
</div>
<div class="name" data-text="fa-magic">Try our solutions </div>
</a>
</li>
<li><a href="emergency-contacts.html">
<div class="icon">
<i class="fa fa-child"></i>
</div>
<div class="name" data-text="fa-child">Emergency Contacts</div>
</a>
</li>
<li><a href="learnmore.html">
<div class="icon">
<i class="fa fa-book"></i>
<!--place it in the center in css, this is a self reminder (delete later)-->
</div>
<div class="name" data-text="fa-book">Learn More</div>
</a>
</li>
<div class="logo">
<img class="img1" src="photos/logo2.png" alt="the logo">
</div>
</div>
<!--navigation ends here-->
<div class="first-box">
<div class="intro intro1">Welcome!</div>
<div class="intro intro2">
<span class="sub-head "> We care about you</span>
<span class="sub-head inactive">becuase you matter</span>
<!-- lol dramatic effect-->
</div>
</div>
I have tried putting the image in the body of the file in CSS and making the other divs transparent for the background but it still doesn't seem to work.
You have written style for .body class not for body tag. Either you have to change as tag style or you need to add a class body in your body tag.
body{
background-image: url("https://material.angular.io/assets/img/examples/shiba2.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.first-box{
grid-area: first-box;
align-content: center;
padding: 65px 300px;
background-color: transparent;
}
<div class="navigation">
<ul>
<li><a href="index.html">
<div class="icon">
<i class="fa fa-home"></i>
</div>
<div class="name" data-text="fa-home">Home</div>
</a>
</li>
<!--I have used icons with the navigations as it makes it easier for dyslexic people to navigate. -->
<li><a href="tryhelp.html">
<div class="icon">
<i class="fa fa-magic"></i>
</div>
<div class="name" data-text="fa-magic">Try our solutions </div>
</a>
</li>
<li><a href="emergency-contacts.html">
<div class="icon">
<i class="fa fa-child"></i>
</div>
<div class="name" data-text="fa-child">Emergency Contacts</div>
</a>
</li>
<li><a href="learnmore.html">
<div class="icon">
<i class="fa fa-book"></i>
<!--place it in the center in css, this is a self reminder (delete later)-->
</div>
<div class="name" data-text="fa-book">Learn More</div>
</a>
</li>
<div class="logo">
<img class="img1" src="photos/logo2.png" alt="the logo">
</div>
</div>
<!--navigation ends here-->
<div class="first-box">
<div class="intro intro1">Welcome!</div>
<div class="intro intro2">
<span class="sub-head "> We care about you</span>
<span class="sub-head inactive">becuase you matter</span>
<!-- lol dramatic effect-->
</div>
</div>
I have two divs of the same size, and when I click a button on one of the divs, it will get larger. I want to move the smaller div into the bottom-right corner of the larger div, and when I click the button again the divs will return to their original size and position.
Before:
--- ---
| 1 | | 2 |
--- ---
After:
---------
| 2 |
| ---|
| | 1 |
---------
Here's my javascript for resizing so far:
function resizeSubscriber() {
var subscriberPanel = document.getElementById('dvOtherPerson');
var publisherPanel = document.getElementById('dvYou');
var classSetting = subscriberPanel.getAttribute('class');
if (classSetting == 'col-xl-4') {
subscriberPanel.setAttribute('class', 'col-xl-12');
}
else {
subscriberPanel.setAttribute('class', 'col-xl-4');
}
}
here is my asp code
<div id="dvOtherPerson" class="col-xl-4">
<div>
<div class="m-portlet__head">
<div class="m-portlet__head-caption">
<div class="m-portlet__head-title">
<h3 class="m-portlet__head-text">
Rachel Hawkins
</h3>
</div>
</div>
<div class="m-portlet__head-tools">
<ul class="m-portlet__nav">
<li class="m-portlet__nav-item">
<a href="" class="m-portlet__nav-link m-portlet__nav-link--icon">
<a href="" class="m-portlet__nav-link m-portlet__nav-link--icon">
<i class="fa fa-volume-up text-success"></i>
</a>
<a href="" class="m-portlet__nav-link m-portlet__nav-link--icon">
<i class="fa fa-refresh"></i>
</a>
<a onclick="resizeSubscriber();" href="#" class="m-portlet__nav-link m-portlet__nav-link--icon">
<i class="fa fa-expand"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="m-portlet__body">
<img src="./img/temp/users/video_rachel.jpg" class="img-fluid" />
</div>
</div>
<%-- <div id="videos">
<div id="subscriber"></div>
</div>--%>
</div>
<div id="dvYou" class="col-xl-4">
<div class="m-portlet m-portlet--fit">
<div class="m-portlet__head">
<div class="m-portlet__head-caption">
<div class="m-portlet__head-title">
<h3 class="m-portlet__head-text">
Me
</h3>
</div>
</div>
<div class="m-portlet__head-tools">
<ul class="m-portlet__nav">
<li class="m-portlet__nav-item">
<a href="" class="m-portlet__nav-link m-portlet__nav-link--icon">
<i class="fa fa-microphone-slash text-danger"></i>
</a>
<a href="" class="m-portlet__nav-link m-portlet__nav-link--icon">
<i class="fa fa-refresh"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="m-portlet__body">
<div id="publisher"></div>
</div>
</div>
</div>
Use appendChild, and it will move the source element to a target element, e.g.
target_element.appendChild(source_element)
As commented, to apply different CSS style, do like this and the source_element will automatically change when inside the target_element
source_element {...}
target_element source_element {...}
If you can use jQuery, you can use the method append():
$(<OUTER_SELECTOR>).append($(<INNER_SELECTOR>));
I have a bootstrap website. At first, my links were concatenating (e.g. if I were to click on the home index page three times it would show instastatus.live/index.html/index.html/index.html) every time I clicked a link.
The issue has been solved, but now the link won't go through. For example, if I click one of the nav bar items such as "Services", the URL shows the correct address: instastatus.live/services/index.html. However, it won't go to the page until I click on the URL bar and hit enter (only then will it take me to the appropriate page). Otherwise, it does nothing.
<nav class="cb-navbar">
<div class="cb-container">
<div class="cb-navbar-inner">
<div class="cb-navbar-left">
<a href="index.html" class="cb-navbar-back">
<i class="cb-icon -long-arrow-left"></i>
</a>
</div>
<div class="cb-navbar-right">
<div class="cb-navbar-nav">
<a href="/services/index.html" id="navbar-services" class="cb-navbar-nav-item">
<span class="cb-navbar-nav-item-icon">
<i class="cb-icon -cog"></i>
</span>
<span class="cb-navbar-nav-item-text">Services</span>
</a>
<a href="/projects/index.html" id="navbar-projects" class="cb-navbar-nav-item">
<span class="cb-navbar-nav-item-icon">
<i class="cb-icon -bars"></i>
</span>
<span class="cb-navbar-nav-item-text">Projects</span>
</a>
<a href="/contacts/index.html" onclick="yaCounter.reachGoal('contacts')" id="navbar-contacts" class="cb-navbar-nav-item">
<span class="cb-navbar-nav-item-icon">
<i class="cb-icon -contacts"></i>
</span>
<span class="cb-navbar-nav-item-text">Contacts</span>
</a>
</div>
</div>
</div>
</div>
</nav>
I have this Li tag which shows notification dropdown in my bootstrap theme but the problem is if there is no content inside this li tag then also it is shown with 300px height, I have tried removing that height also but still no luck. How can I resize this li tag if there is no content inside it.
Content is shown in media-body tag
<li class="dropdown navbar-notification">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell"></i>
</a>
<div class="dropdown-menu">
<div class="dropdown-header">
<span class="title">Notifications
<strong>(0)</strong>
</span>
</div>
<div class="dropdown-body niceScroll">
<div class="media-list small">
<a href="" class="media">
<div class="media-object pull-left"><i class="fa fa-ban fg-danger"></i>
</div>
<div class="media-body">
<span class="media-text">No new Notification</span>
<!-- Start meta icon -->
<span class="media-meta"></span>
<!--/ End meta icon -->
</div>
<!-- /.media-body -->
</a>
</div>
</div>
<div class="dropdown-footer">
See All
</div>
</div>
</li>
$(".navbar-notification .niceScroll").mouseover(function() {
$(".navbar-notification .niceScroll").niceScroll({
cursorwidth: '10px',
cursorborder: '0px'
}).resize();
});
You can select empty element by css :empty selector and hide it:
element:empty {
display: none;
}
How can I toggle the subnav for each item, and if one is open, hide the open one to show the current one? If there are none shown, just toggle. If you click one and show subnav then and click another hide previous and show current.
Here is my html -
<header>
<div class="content-wrapper">
<div class="user-menu-wrapper">
<div class="hsn-logo"></div>
<div class="user-greeting-wrapper">
<div class="user-greeting">Hi, Abraham</div>
</div>
<div class="user-menu">
<ul class="user-menu-items">
<li>#Html.ActionLink(" ", "Index", "Home", new { #class = "my-account" })</li>
<li>#Html.ActionLink(" ", "Index", "Home", new { #class = "my-favorites" })</li>
<li>#Html.ActionLink(" ", "Index", "Home", new { #class = "my-bag" })</li>
</ul>
</div>
</div>
<div class="hsn-nav-wrapper">
<div class="hsn-nav">
<ul class="hsn-nav-items">
<li style="width: 25%">
<a class="shop" href="#">
<span class="hsn-nav-item-wrap">
<span>SHOP</span><span class="drop-down-arrow"></span>
</span>
</a>
</li>
<li style="width: 25%">
<a class="watch" href="#">
<span class="hsn-nav-item-wrap">
<span>WATCH</span><span class="drop-down-arrow"></span>
</span>
</a>
</li>
<li style="width: 25%">
<a class="play" href="#">
<span class="hsn-nav-item-wrap">
<span>PLAY</span><span class="drop-down-arrow"></span>
</span>
</a>
</li>
<li style="width: 15%">
<a href=""><span class="hsn-search-icon"></span>
</a>
</li>
</ul>
</div>
<br class="clear" />
</div>
</div>
</header>
<subnav id="shop" class="shop-subnav">
<div class="hsn-subnav-wrapper">
<div class="hsn-subnav">
<div class="hsn-subnav-left">
<ul>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li><span class="hsn-subnav-callout">Deals</span></li>
</ul>
</div>
<div class="hsn-subnav-right">
<ul>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li>SubnavItem</li>
<li><span class="hsn-subnav-callout">Clearance</span></li>
</ul>
</div>
</div>
</div>
</subnav>
<subnav id="watch" class="watch-subnav">
<div class="hsn-subnav-wrapper">
<div class="hsn-subnav">
<div class="hsn-subnav-left">
<ul>
<li>SubnavItem2</li>
<li>SubnavItem2</li>
<li>SubnavItem2</li>
<li>SubnavItem2</li>
</ul>
</div>
<div class="hsn-subnav-right">
<ul>
<li>SubnavItem2</li>
<li>SubnavItem2</li>
<li>SubnavItem2</li>
<li>SubnavItem2</li>
</ul>
</div>
</div>
</div>
</subnav>
Here is my Jquery / JS -
$(document).ready(function () {
$('ul.hsn-nav-items li a').click(function () {
var navitem = $(this).attr('id')
, id = $(this).attr('class')
, subnav = $('subnav.' + id + '-subnav');
$('a.selected').not(this).removeClass('selected');
$(this).toggleClass('selected');
$('#'+id).toggle();
});
});
Just glancing through your html - you have duplicate IDs. Your 'a' that links to 'play' also has an ID of 'play' - that element will be selected, not the subnav!
Also, two of your links are classed watch, none shop.
The simplest way to approach this is to hide all the <subnav> on each click. All your existing code will work just fine which already takes care of toggling the relevant <subnav>.
var $subNavs = $('subnav');
$subNavs.hide();
$('ul.hsn-nav-items li a').click(function () {
$subNavs.hide();
var navitem = $(this).attr('id')
, id = $(this).attr('class')
, subnav = $('subnav.' + id + '-subnav');
$('a.selected').not(this).removeClass('selected');
$(this).toggleClass('selected');
$('#'+id).toggle();
return false;
});
I also added a return false; to stop the default click event on the <a> being executed, which could result in a page load since href="#".
That said, <subnav> is a non-standard element and you would be better off using a simpler markup to describe the data. It may also prove useful to give the each subnav a common class which makes finding them via jQuery simpler.
I have also made a small demo using the following simplified code
HTML
<a class="shop" href="#">
<span class="hsn-nav-item-wrap">
<span>SHOP</span><span class="drop-down-arrow"></span>
</span>
</a><br/>
<a class="watch" href="#">
<span class="hsn-nav-item-wrap">
<span>WATCH</span><span class="drop-down-arrow"></span>
</span>
</a><br/>
<a class="play" href="#">
<span class="hsn-nav-item-wrap">
<span>PLAY</span><span class="drop-down-arrow"></span>
</span>
</a>
<div id="shop" class="shop subnav">
shop
</div>
<div id="watch" class="watch subnav">
watch
</div>
<div id="play" class="play subnav">
play
</div>
JavaScript
var $subNavs = $('.subnav');
$subNavs.hide();
$('a').click(function () {
var $subNavToToggle = $('#' + ($(this).attr('class').split(' ')[0]));
var doToggle = $subNavToToggle.is(':not(:visible)');
$subNavs.hide();
$('a.selected').not(this).removeClass('selected');
$(this).toggleClass('selected');
$subNavToToggle.toggle(doToggle);
return false;
});