I have a page with tabs I don't want the div to show when page is loaded only when it is clicked
<div data-role="tabs" id="tabs" >
<div data-role="navbar">
<ul>
<li><a id="1" href="#one" data-ajax="false">1</a></li>
<li><a id="2" href="#two" data-ajax="false">2</a></li>
</ul>
</div>
I used this to hide the tab:
<script>
$( document ).ready(function() {
$("div#one").hide();
});
</script>
The problem is if I try to open the first tab, nothing happens. I think its already opened. (first tab works fine after click on #two)
Is there a way to set the tabs to don't show on load?
edit:
http://jsfiddle.net/b9bafuu4/6/
tab 1 show as page load id like non of them to show up when the page load
Is this what you're trying to achieve? see here -> JSFIDDLE
JS
$(function(){
$('[href="#one"]').click(function(){
$('#one > ul').css('display','block');
});
});
CSS
#one > ul{
display: none;
}
Related
I'm making a page where you can open and close descriptions.
The page works perfectly on firefox, but on other browser like Chrome, the page seems to go up as you open and close the other divs.
EDIT : the page goes up when I close a menu under another one. But not the other way.
here is a link so you can see what is happening with chrome :
https://imgur.com/a/4zgrzc0
I suppose the problem is $(this).parent('.sub-menu').siblings().find('ul').slideUp('fast');
How can I avoid that?
Thanks a lot.
$(document).ready(function(){
$(".exposition").on('click',function(){
var hello = $(this).attr('data-id');
$('.photos-evenements').hide();
$('[id='+ hello + ']').show();
});
});
$( document ).ready(function(open) {
$('.sub-menu ul').hide();
$('.sub-menu a').click(function () {
$(this).parent('.sub-menu').siblings().find('ul').slideUp('fast'); // to hide all ul expect this one
$(this).parent('.sub-menu').children('ul').slideToggle(200);
});
$('.sub-menu a').click(function(open) {
open.preventDefault();
});
});
.photos-evenements{
display:none;
max-width: 100%;
max-height: 90vh;
}
.exemple {
height:100vh;
background-color:lavender;
}
<div class="exemple">hi</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
<li class='sub-menu'> 1
<ul>
<li> When opened, i'm a description, I'm not supposed to move the page when opened or closed.
</li>
</ul>
</li>
<li class='sub-menu'> 2
<ul>
<li> I'm supposed to close 1 and don't move the page up
</li>
</ul>
</li>
</ul>
<div class="exposition">
<div class="photos-ind"><img id="divId1" class="photos-evenements" src="http://follebeton.com/img/Performances%20OK.jpg" data-id="divId1"/></div>
<div class="photos-ind"><img id="divId1" class="photos-evenements" src="http://follebeton.com/img/333_3.png" data-id="divId1"/></div>
<div class="photos-ind"><img id="divId1" class="photos-evenements" src="http://follebeton.com/img/333_1.png" data-id="divId1"/></div>
</div>
<div class="exposition">
<div class="photos-ind"><img id="divId2" class="photos-evenements" src="http://follebeton.com/img/Performances%20OK.jpg" data-id="divId2"/></div>
<div class="photos-ind"><img id="divId2" class="photos-evenements" src="http://follebeton.com/img/333_3.png" data-id="divId1"/></div>
<div class="photos-ind"><img id="divId2" class="photos-evenements" src="http://follebeton.com/img/333_1.png" data-id="divId1"/></div>
</div>
</div>
I believe that what you are witnessing is aggressive scroll anchoring from Chrome. For some reason Chrome is anchoring the scroll on the link you clicked, while Firefox is anchoring it on some other element, possibly the container or preceding div.
It's not clear, to me at least, why there's a difference in behaviour or which is 'correct'. In any case you should be able to resolve your issue by simply disabling scroll anchoring within the menu container. To do this we can use the overflow-anchor property on the element where we want to disable scroll anchoring.
In the example you have given we would simply add the following code to the CSS
.sub-menu{
overflow-anchor:none
}
This should fix the issue.
I have edited your example in the snippet below to include this (I also tidied the code up slightly to make it clearer). I have tested this in both Firefox and Chrome and the jumping of the page seems to be gone.
Obviously you will have to change what you set the overflow-anchor:none property on for different scripts with different class names. One approach would be to just disable scroll anchoring for the entire document by setting it on the body.
body{
overflow-anchor:none
}
Be warned however, that scroll anchoring was introduced to counteract the very disruptive experience of what the user is currently looking at being moved unexpectedly by changes elsewhere on the document. It would be best to only disable it in select areas if possible.
$(document).ready(function(){
$(".exposition").on('click',function(){
var hello = $(this).attr('data-id');
$('.photos-evenements').hide();
$('[id='+ hello + ']').show();
});
});
$( document ).ready(function(open) {
$('.sub-menu ul').hide();
$('.sub-menu a').click(function () {
$(this).parent('.sub-menu').siblings().find('ul').slideUp('fast'); // to hide all ul expect this one
$(this).parent('.sub-menu').children('ul').slideToggle(200);
});
$('.sub-menu a').click(function(open) {
open.preventDefault();
});
});
.example {
height:100vh;
background-color:lavender;
}
.sub-menu {
overflow-anchor:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="example">Space above</div>
<ul class="menu">
<li class='sub-menu'> 1
<ul>
<li> When opened, i'm a description, I'm not supposed to move the page when opened or closed.
</li>
</ul>
</li>
<li class='sub-menu'> 2
<ul>
<li> I'm supposed to close 1 and don't move the page up
</li>
</ul>
</li>
</ul>
<div class="example">Space below</div>
Revised answer
I think this might be a simple minimum height issue for that page. By reserving the space for the hidden content, you can avoid the jump
I made a codesandbox to demonstrate the issue and the height on the list can be tweaked - remove the border when you are happy.
https://codesandbox.io/s/sleepy-currying-6vtsy?file=/index.html:467-489
Not exactly sure what you're trying to do, but you might try the following:
$(document).on('click', '.sub-menu a', function (e) {
e.preventDefault()
e.stopPropagation()
$(this).parents('.sub-menu').siblings().find('ul').slideUp('fast');
$(this).parents('.sub-menu').children('ul').slideToggle(200);
});
It's good practice to bind events to the document instead of a specific element in case you might end up loading data through AJAX in the future.
Anyhow, I usually achieve the thing you're looking for by defining the CSS for the element, in your case .sub-menu ul, to:
.sub-menu ul{
max-height:0vh; // To hide sub-menu <ul> contents
overflow:hidden;
transition:500ms ease; // For fancy smooth opening and closing [1/2]
transition:max-height 500ms ease; // Alternative, more specific [2/2]
}
.sub-menu.active ul{
max-height:100vh; // or any height you expect it to never exceed.
}
Then - with jQuery - you can do the following:
$(document).on('click', '.sub-menu a', function(e){
e.preventDefault();
$(this).parents('.sub-menu').addClass('active')
$(this).parents('.sub-menu').siblings().removeClass('active')
})
For a project i must include an HTML file into a div. This HTML file contains a menu that will be displayed on each page of the website. (To make it easier to edit the menu if we need to add something in it)
I include this file in my div with jQuery (.load). It works correctly on Firefox and IE. The menu displays well and I can click on the "parents" to show children.
But with Chrome, when I click the parent, the page refresh. It doesn't do anything else that refreshing the page without showing the children. (Sometimes when we spam click the menu, it opens, I don't know why and how)
But when I paste the code for the menu directly in my main HTML file, the menu works fine on all browsers.
Did you have any idea of why my menu doesn't want to work when it's included and used with Chrome ?
The include in my main html :
<div id="menuLeftLoad"></div>
<script>
$("#menuLeftLoad").load("Menuleft.html");
</script>
Here is the MenuLeft.html file :
<ul class="nav nav-pills nav-stacked">
<li class="parent"><i class="fa fa-bars"></i> <span>Tables</span>
<ul class="children">
<li id="basic-tables">Basic Tables</li>
<li id="data-tables">Data Tables</li>
</ul>
</li>
</ul>
Here is a link to see this problem in real: http://allanresin2.tk/testui/index.html
EDIT (Solution) :
The solution has been founded by #CarstenLøvboAndersen .
I had a JS file (custom.js) that acted on my menu before everything else, so it caused problems when i wanted to click in the menu.
So, i replaced this :
jQuery('.leftpanel .nav .parent > a').click(function()
With this :
jQuery(document).on('click','.leftpanel .nav .parent > a',function()
So now, we have this function that wait for my click to execute. Before, the function was executed while the menu had not even finished loading.
Thanks to all people that tried to help me
As far as I can see in your code, there is no click event for the a tags.
So what you need is a click handler, that prevents the default behaviour of the a tag and loads the html file instead.
Here you have some dummy code:
main.html:
<main>
<h1>Hi i am main</h1>
<a class="clicker" href="new.html">New</a>
<div id="foo"></div>
</main>
<script>
$('.clicker').on('click', function (evt) {
$("#foo").load("new.html");
return false;
});
</script>
new.html:
<div class="new">
<p>I am new!</p>
</div>
I've 3 tabs that use javascript to show content when they are clicked:
<ul class="tab">
<li>12 Weeks</li>
<li>4 Weeks</li>
<li>1 Week</li>
</ul>
Divs are placed in my html code as follows:
<div id="12_Weeks" class="tabcontent"> <!-- Tab 1 starts here -->
<h1>Example Text</h1>
</div>
I'd like the first tab to be open when the page is loaded and have tried the following code:
$( document ).ready(function() {
// Handler for .ready() called.
$("#12_Weeks").trigger('click');
});
however this doesn't seem to do the trick, anyone know what I'm doing wrong here, am sure it's super simple!?
Are you sure there is an element with ID #12_weeks on your page?
It is not present in your sample code.
Your trigger click has tab content but it will be in tab title. See flowing code.
$( document ).ready(function() {
// Handler for .ready() called.
$('ul#tab li:first > a.tablinks').trigger('click');
});
Or
you can user this under your hide execute code. $("#12_Weeks").show('');
Seems I needed to add openCity("12_Weeks") in my javascript function, they seem to have left this bit out at W3schools, thanks all for helping!
You could use style="display: block;" directly in your default <div></div> tag, like this:
<div id="12_Weeks" class="tabcontent" style="display: block;"> <!-- Tab 1 starts here -->
<h1>Example Text</h1>
</div>
When a different Tab is clicked, the style="display: none;" and the current clicked Tab is given style="display: block;"
This should do the trick.
I'm trying to do a show / hide menu button using jQuery.
The menu is contained in a div, and I am trying to setup a button to show and hide it. Here's my code:
<div class="menu">
<div id="items">
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
<p class="dismiss-btn" id="btn-hide"><i class="fa fa-bars"></i></p>
</div>
JS:
<script>
//DOM loaded
$(document).ready(function() {
// Hide the top info bar
$('#btn-hide').click(function(){
$("#items").toggle("slow");
});
});
</script>
The problem is when I click the button, it hides the content, and then it shows it again... Any idea where I'm wrong?
This works fine for me but one thing you could try:
$('#btn-hide').click(function(e){
e.stopImmediatePropagation();
$("#items").toggle("slow");
});
This will stop any other "clicks" on that element or parent elements.
http://api.jquery.com/event.stopimmediatepropagation/
I'm using Bootstrap's nav-tabs with the following setup:
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Profile</li>
</ul>
<div id="tabContent" class="tab-content">
<div class="tab-pane active in" id="home">
<form id="tab">
<label>Name:</label>
<input type="text" value="fooBar" class="input-xlarge">
</form>
</div>
<div class="tab-pane fade" id="profile">
<form id="tab2">
Home
</form>
</div>
</div>
As you can see, I have a link in my profile tab, which links to the first tab. Clicking on the anchor does change the URL in the URL bar, however it doesn't jump to the specific tab.
I then noticed that it is generally not possible to link to a tab directly, so I added the following code from Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink:
// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
}
// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
window.location.hash = e.target.hash;
})
Now I can link to a specific tab from somewhere else, but not, if I'm on the same page where the nav-bar is. Reloading the page would then jump to the wanted tab, so I thought I could just forcefully reload the page, with the solution from Javascript: How to truly reload a site with an anchor tag?:
window.location.reload(true);
This however ended up in a reload every time I clicked on a tab, in addition it still didn't load the home tab, when clicked on the anchor.
Thus, how would I jump to a given id from another tab?
You might have been put on the the wrong foot by the other answers you mention ... it is fairly trivial to change tabs from within the same page (regardless if you're in another tab or not): you can use the basic bootstrap tab navigation Javascript for this.
First change your html a bit: add an id to your <ul class="nav nav-tabs" id="myTab">.. then add a link to your second tab:
<div class="tab-pane fade" id="profile">
<form id="tab2">
Jump to home tab (this works)
...
and add the following in your document ready:
$('#gotohome').click(function() {
$('#myTab a[href="#home"]').tab('show');
});
Working example at jsFiddle.
The given answer
$('#myTab a[href="#home"]').tab('show');
can also be used to make a JavaScript software jump to a specific tab.
Assume you want to jump to a specific tab on start by using the url:
http://myDomain/myApp#tabSomewhere
You can imagine that will work (you need to make some additional coding).
Suppose your First page is on the tabHome (you make that active with the 'active' class. When you try to go back to that page using javascript you have to remove the active class from the tabHome using:
$('li').removeClass('active');