On the site I use a pop-up modal window. In all sections on the site it is used and works fine, but in one of the sections it does not work, why is that? Global section:
<!-- Sidebar -->
<nav id="sidebar">
<div id="dismiss">
</div>
<div class="sidebar-header">
<h3>Menu</h3>
</div>
this is menu
</ul>
</nav>
My button:
<button type="button" id="sidebarCollapse" class="btn-yellow" data-ng-if="user.accessToken">Open sidebar</button>
And in JS file at first line:
$(document).ready(function () {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#dismiss, .overlay').on('click', function () {
$('#sidebar').removeClass('active');
$('.overlay').removeClass('active');
});
$('#sidebarCollapse').on('click', function () {
$('#sidebar').addClass('active');
$('.overlay').addClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
Why does it work in all sections, but does not work in one? What could be the problem?
Related
I adjust a bougth onepage-template for my wishes, but unfortunately I'm not good in JS.
So, I have a side menu, which stays in desktop version. But on mobile/tablet-version I have a toggle menu icon. On click the menu opens, but when I click on a navigation-point the menu stays open. I would like to have it closed after clicking.
Thanks for your help
<aside class="nav_sidebar">
<div class="menu_wrapper">
<div class="header_top">
<div class="head_img_wrap">
<img src="images/logo.svg" alt="Images">
</div>
</div>
<div class="main_menu">
<ul>
<li class="active"><p>Home</p></li>
<li><p>Über mich</p></li>
<li><p>services</p></li>
<li><p>portfolio</p></li>
<li><p>blog</p></li>
<li><p>kontakt</p></li>
</ul>
</div>
</div>
</aside><!-- end header -->
<!-- menu toggler -->
<div class="menu_toggler">
<span class="fa fa-bars" aria-hidden="true"></span>
</div>
<!-- menu toggler -->
// Mobile menu css
var $menu_toggler = $('.menu_toggler'),
$menuSidebar = $('aside.nav_sidebar');
$menu_toggler.on('click',function () {
$(this).toggleClass('open');
$menuSidebar.toggleClass('open');
});
if(windowWidth < 768){$menuSidebar.toggleClass('shrinked');}
// collapsible menu css
$('.toggle_icon span').on('click', function () {
$menuSidebar.toggleClass('collapse');
});
Have you tried something like this?
$menuSidebar.on("mouseup", function() {
$menuSidebar.removeClass('open');
});
When something is clicked in the sidebar, it will trigger the mouseup event
Ok I tried this:
// Mobile menu css
var $menu_toggler = $('.menu_toggler'),
$menuSidebar = $('aside.nav_sidebar');
$menu_toggler.on('click',function () {
$(this).toggleClass('open');
$menuSidebar.toggleClass('open');
});
if(windowWidth < 768){$menuSidebar.toggleClass('shrinked');}
// collapsible menu css
$menuSidebar.on("mouseup", function() {
$menuSidebar.removeClass('open');
});
and it works but the toggle icon stays in the middle after closing. It should go back on the left side. Someone help for this problem?
You are using the open class on both the menu and the button, so:
$menuSidebar.on("mouseup", function() {
$menuSidebar.removeClass("open");
$menu_toggler.removeClass("open");
});
I have a page with two div panels, a left and a right. Both panels are tabbed using jquery-2.1.4.min.js and jquery-ui.js. One panel has three tabs, and it works.
The js in the head of my page looks like this:
$(function(){
// Doesn't matter if following two lines are reversed. Same output.
$( "#property-card" ).show().tabs(); // this one doesn't work
$( "#tabs" ).show().tabs(); // this one works
});
The html looks like this:
//This tabbed content works:
<div id="tabs">
<ul>
<li>Tasks</li>
<li>Notes</li>
<li>Photos</li>
</ul>
<div id="tabs-1">
<!-- Tasks -->
</div>
<div id="tabs-2">
<!-- Notes -->
</div>
<div id="tabs-3">
<!-- Other -->
</div>
The other div panel looks something like this:
//This one shows hyperlinked text within the content area, instead of showing tabs
<div id="property-card" class="eight columns light-manilla curved10 border-dark border-2 border-ridge padding-1-percent">
<ul>
<li>Property</li>
<li>Help</li>
<li>List Price</li>
<li>Taxes</li>
<li>HOA</li>
<li>Showing Instructions</li>
<li>BPO Values</li>
<li>Buyer Leads</li>
</ul>
<div id="property">
</div>
<div id="property-help">
</div>
<div id="property-list-price">
</div>
<div id="property-taxes">
</div>
<div id="property-hoa">
</div>
<div id="property-showing-instructions">
</div>
<div id="property-bpo-values">
</div>
<div id="property-buyer-leads">
</div>
</div>
(not sure if this is related) Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/jquery-2.1.4.min.js:4:14346
ReferenceError: data is not defined
(I think this one is related) jquery-2.1.4.min.js%20line%202%20%3E%20eval:35:1
See inline screen shot sample for example of what's going on.
Hate answering my own questions, but in another file at the bottom of my html, there is another javascript block, which "activated" the working tabbed div, but because I didn't add the new tabbed div (because I didn't realize that second javascript block was there) the second tabbed div didn't work. Here is what made it work:
$(function () {
$('#property-card').tabs({
activate: function (event, ui) {
var $activeTab1 = $('#property-card').tabs('option', 'active');
}
});
$('#tabs').tabs({
activate: function (event, ui) {
var $activeTab2 = $('#tabs').tabs('option', 'active');
if ($activeTab2 == 2) {
// HERE YOU CAN ADD CODE TO RUN WHEN THE SECOND TAB HAS BEEN CLICKED
$("#mls-images-carousel").css("display","block");
retrieveAssetImages('<?php echo $as_id; ?>');
}
else{
$("#mls-images-carousel").css("display","hidden");
}
}
});
});
I have three links on top, Logos (#logos), Business cards (#businesscards), Flyers (#flyers)
By default, "Logos" link is highlighted with content (#logos-container) showing.
When clicking "Business cards", Business cards content (#businesscards-container) will show with other content hidden.
When clicking "Flyers", Flyers (#flyers-container) content will show with others hidden.
This is my code:
[Javascript]
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$("#businesscards-container").hide();
$("#flyers-container").hide();
$("#logos").click(function () {
$("#businesscards-container").hide();
$("#flyers-container").hide();
$("#logos-container").show();
});
$("#businesscards").click(function () {
$("#logos-container").hide();
$("#flyers-container").hide();
$("#businesscards-container").show();
});
$("#flyers").click(function () {
$("#logos-container").hide();
$("#businesscards-container").hide();
$("#flyers-container").show();
});
});
</script>
[html]
<div id="front-nav">
<ul>
<li id="#logos">Logos</li>
<li id="#businesscards">Business cards</li>
<li id="#flyers" style="padding-right:60px; border-right:none;">Flyers</li>
</ul>
</div>
<div id="logos-container">
</div>
<div id="businesscards-container">
</div>
<div id="flyers-container">
</div>
The default is working, but not when I click on other links. I tried adding e.preventDefault but no results. How should I go about this?
Thanks for any help.
EDIT: Resolved! Thank you.
Here is the fixed solution - JSFiddle
#flyers-container {
display: none;
}
#businesscards-container {
display: none;
}
Initially just add display none to divs you wanna hide.. and waa laaa
you should set the default display on the php page for all the containers. I assume logos is the default display.
<div id="logos" style="display:block;">
<!-- some code -->
</div>
<div id="businesscards" style="display:none;">
<!-- some code -->
</div>
<div id="flyers" style="display:none;">
<!-- some code -->
</div>
then the JavaScript will handle the show and hide of the elements
As you have mentioned that they are links, you need to prevent default behaviour,try do try this:
$("#logos").click(function (e) {
e.preventDefault();
$("#businesscards-container").hide();
$("#flyers-container").hide();
$("#logos-container").show();
});
$("#businesscards").click(function (e) {
e.preventDefault();
$("#logos-container").hide();
$("#flyers-container").hide();
$("#businesscards-container").show();
});
$("#flyers").click(function (e) {
e.preventDefault();
$("#logos-container").hide();
$("#businesscards-container").hide();
$("#flyers-container").show();
});
i got problem with firing event when one of the tab click... i am using jQuery Easy Tab plugin.... all i want is to display alert when tab with id "#sp_tab2" is clicked... at the movement it fires with all tab and if do like this $("#sp_tab2").click(function(){..}
it doesn't work either... http://os.alfajango.com/easytabs/#advanced-demo
many thanks in advance ...
<div id="selectPropertyTab" class="tab-container">
<ul class="etabs">
<li class="tab tab_description"><img id="tab_description_icon" src="../Icons/property_info_G.png"/>Description</li>
<li class="tab tab_map"><img id="tab_map_icon" src="../Icons/property_map_icon_G.png" />Map</li>
<li class="tab tab_area_kn"><img id="tab_area_kn_icon" src="../Icons/property_direction_icon_G.png" />Area Knowledge</li>
</ul>
<div id="tab_data">
<div id="sp_tab1">
display the property details
</div>
<div id="sp_tab2">
<div id="map_canvas" style="width:61.4em; height:400px;"></div>
</div>
<div id="sp_tab3">
display property area knowledge
</div>
</div> <!--end tab_data-->
</div> <!--end selectPropertyTab-->
jQuery....
$(function () {
$("#selectPropertyTab").easytabs();
});
$("#selectPropertyTab").bind('easytabs:after', function () {
alert("tab no 2 is clicked......");
});
$(function () {
$("#selectPropertyTab").easytabs();
});
$(".tab_map").on("click",function () {
alert("tab no 2 is clicked......");
});
I Hope this will work ! Check this Fiddle
you can have conflict issue if you using .tab_map class somewhere. add id to your li tag
html
<li id="map_canvas_tab" class="tab tab_map"><img id="tab_map_icon" src="../Icons/property_map_icon_G.png" />Map</li>
jquery
$("#map_canvas_tab").on("click", function () {
alert("tab no 2 is clicked....");
});
I am working with bootstrap and attempting to create a button in tab 1 which "activates" (switches to) tab 2.
Here's my code:
HTML navigation tabs:
<ul id="pageSwitcher" class="nav nav-tabs" style="width:100%;">
<li>Page One</li>
<li>Page Two</li>
</ul>
HTML tab content:
<div class="tab-content" style="width:100%;">
<div class="tab-pane active" id="page1">
<button type="button" onclick="showPageTwo();">Proceed to page 2</button>
</div>
<div class="tab-pane" id="page2">
<p>Page 2 content here!</p>
</div>
</div>
JavaScript:
<script type="text/javascript">
$(document).ready(function() {
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
}
});
function showPageTwo() {
$('#pageSwitcher li:eq(1) a').tab('show');
}
</script>
Anyone willing to provide some insight as to where exactly I'm going wrong? I've copied several examples almost exactly... clicking on the tabs themselves works fine, I just can't seem to make a button at the bottom of page 1 that activates page 2.
One: bad form, inline onclick call... you don't need it, get rid of it:
<button type="button">Proceed to page 2</button>
Two: you have two JS errors. You didn't close your .click() function, and you're trying to trigger the first tab with the specifier of li:eq(0)...
$(document).ready(function() {
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
// ALSO, you were missing a closing paren, here!
});
//two issues ... onclick inside your button is trying to access
// your function before it's available... inline js like that, bad idea anyhow
// so hook into it inside your DOM ready code here anyhow.
var showPageTwo = function() {
// secondly, you're looking at the wrong item!
// li:eq(0) means "look at the first li in the array of li"
$('#pageSwitcher li:eq(1) a').tab('show');
};
$(".tab-content").on("click","#page1 button", showPageTwo);
});
See this jsFiddle for a working example: http://jsfiddle.net/mori57/Xr9eT/
Give your button an ID :
<div class="tab-content" style="width:100%;">
<div class="tab-pane active" id="page1">
<button type="button" id="myButton">Proceed to page 2</button>
</div>
<div class="tab-pane" id="page2">
<p>Page 2 content here!</p>
</div>
</div>
and just trigger a click on the right anchor, bootstrap does the rest :
$(document).ready(function() {
$('#myTab a').on('click', function(e) {
e.preventDefault();
$(this).tab('show');
});
$('#myButton').on('click', function() {
$('.nav-tabs li:eq(1) a').trigger('click');
});
});
You should not use specific code for your button, but generic event-driven process:
- you should add an attribute to your button to specify towards which page it will redirect
- then attach a click event
- attach click event to tabs to do the same
HTML:
<button type="button" id="btn" gotoPage="#page2">Proceed to page 2</button>
JS to process tab switching:
function showPage(pageId){
$('.tab-pane').each(function(){
$(this).removeClass('active');
$(this).hide();
});
$(pageId).show();
$(pageId).addClass('active');
}
(Not sure you need to use show or hide functions if you CSS manages thats thanks to active class)
Then for your button:
$('#btn').click(function(){
var destPage = $(this).attr('gotoPage');
showPage(destPage);
});
For tabs:
$('#pageSwitcher a').each(function(){
$(this).click(function(e){
showPage($(this).attr('href'));
});
});
And you can load page one at startup, if needed:
$(document).ready(function(){
showPage("#page1"); // default: load page 1
});
Example: http://jsfiddle.net/DSbrj/1/
showPageTwo() should be declared outside of the document.ready() call.