I have some sort of a accordion menu
<div class="grid-item-1">
<div class="title">Category title 1</div>
<a class="option1">Item 1</a>
<a class="option2">Item 2</a>
</div>
<div class="grid-item-2">
<div class="title">Category title 2</div>
<a class="option1">Item 1</a>
<a class="option2">Item 2</a>
</div>
So basically how this works is that both Category title 1 and Category title 2 are visible and Item 1 and Item 2 both have style
display: none
applied. When I click on Category title 1 js applies .active on
<div class="title">Category title 1</div>
which applies display:none on it. I also have a style
.grid-item-1.title.active a{
display: block;
}
and the problem is that on an emulator everything works fine, but on an actual Android device this options do not appear consistently, sometimes the style is applied and sometimes it don't and I can't find the source of this problem. Has anyone experienced the same problems and is there any solution to it?
Related
I hope everyone is ok!
I'm trying to achieve something simple, yet I don't know how to do it exactly.
I'm trying to do a fixed table of content, which highlights the active section.
The content:
<div class="content">
<div id="step-1">
...
</div>
<div id="step-2">
...
</div>
<div id="step-3">
...
</div>
</div>
The sidebar:
<nav>
<a href="#step-1">
<span>Step 1</span>
</a>
<a href="#step-2">
<span>Step 2</span>
</a>
<a href="#step-3">
<span>Step 3</span>
</a>
</nav>
As you can see, nothing too fancy. The problem is that I tried to do it with IntersectionObserver and intersectionRatio, and it gives the .active class to every .content > div that enters the screen.
What I would like, is a script in Javascript (or jQuery) that gives the .active class to THE current .content > div element that reach the limit of (for example) 20vh from the top of the screen.
Thanks a lot, I hope I'm clear enough.
I am working on a custom navigation bar class and this bug involves the mechanism which handles drop-down menus and such. Below is an example and explanation of the relevant test code.
HTML:
<div class="nav-bar" id="main">
<div class="menu-container" id="menu1">
<div class="menu-label"> Menu Head 1 </div>
<div class="menu-list-container">
<div class="menu-item"> Item 1 </div>
<div class="menu-item"> Item 2 </div>
<div class="menu-item"> Item 3 </div>
</div>
</div>
<div class="menu-container" id="menu2">
<div class="menu-label"> Menu Head 2 </div>
<div class="menu-list-container">
<div class="menu-item"> Item 1 </div>
<div class="menu-item"> Item 2 </div>
<div class="menu-item"> Item 3 </div>
</div>
</div>
</div>
CSS:
.nav-menu-container {
display: inline-block;
}
This is the only CSS that needed to not be default. I.e. every div except the nav-menu-container elements is set to display: block;.
From here, the one other CSS change comes from JS setting the height of the nav-bar element to whatever the height of a menu-label element (in screenshots I highlight the nav-bar element to show this).
Next, I have screenshots of the test page showing first the unaltered page, and then the page with one of the menu-list-container elements set to display: none; and shows the bug I am referring to.
So my question is why does the menu-label element drop down rather than just staying at the top? I did notice that it's just aligning its bottom edge with the bottom edge of the other menu-container, because if I set the other menu-list to display: none; each of the labels return to the top of the screen. Does anyone know what causes this? Or a clean way to make this not happen?
That's because inline-block elements are aligned along their baseline, which is the last line of visible text (if there is text in there, which is the case here).
So you just have to add vertical-align: top; to the CSS rule for .nav-menu-container and they will align as desired.
I have recently started working with dynamic tabs and I hit a wall trying to play with them and their respective divs.
My code is the following and works this way:
<ul id="modalFormUlId" class="bootstrapWizard form-wizard">
<li class="active" data-target="#step1"> <span class="step">1</span><span class="title">Datos Generales</span>
</li>
<li data-target="#step2"> <span class="step">2</span> <span class="title">Detalles Financieros</span>
</li>
<li data-target="#step3"> <span class="step">3</span> <span class="title">Archivos</span>
</li>
<li data-target="#step4"> <span class="step">4</span> <span class="title">Historial Transacciones</span>
</li>
<li data-target="#step5"> <span class="step">5</span> <span class="title">Resguardante</span>
</li>
<li data-target="#step6"> <span class="step">6</span> <span class="title">Etiqueta</span>
</li>
</ul>
<div class="clearfix"></div>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<br>
<h3><strong></strong> Datos Generales</h3>
</div><!-- End tab1 -->
<div class="tab-pane" id="tab2">
<br>
<h3><strong></strong> Detalles Financieros</h3>
</div>
<div class="tab-pane" id="tab3">
<br>
<h3><strong></strong> Lista Archivos</h3>
</div>
<div class="tab-pane" id="tab4">
<br>
<h3><strong></strong> Historial de Transacciones</h3>
</div>
<div class="tab-pane" id="tab5">
<br>
<h3><strong></strong> Resguardante</h3>
</div>
<div class="tab-pane" id="tab6">
<br>
<h3 ><strong></strong> Etiqueta del Bien</h3>
</div>
When I click a button, a small window (div) appears which has the
code written above.
Clicking on any of the li elements, brings out its respective div
Bootstrap class makes it so the li elements show as circles that
paint green when set as active (default for first one, then changes
as I click on any of them)
As you can see, the first li element has its class set as active,
since when the window its first opened, its the default choice shown.
When I close my div and re-open it by clicking the button, it appears
again having the last li element clicked as active (So, if I clicked
li for #step3 element then close my window and opened it again, #tab3
div would still be showing).
My problem comes when trying to set a different li element as active after reopening my window, since #step1 keeps showing as the active one even when any other div is the one currently being displayed, I know I would have to get the current active div and set its li element to active or something like that, but I'm still inexperienced in jQuery (need to do it with jQuery) and can't seem to do it.
Any tips would be appreciated.
You just need to add a click listener to your button which you use to open the modal and trigger a click manually on first tab.
Here is the code:
$(function(){
$('#modal-btn').click(function () {
$("#modalFormUlId a:eq(0)").click();
// or
//$('#modalFormUlId a:first').tab('show');
});
});
Here is working example http://jsfiddle.net/0mvt0qe5/3/
Onclick of any li, store the active tab in localStorage and when you hit the button you can check if active tab has any localStorage value and make them active accordingly. Hope this will help you. Please let me know if you face any issues using this.
Try doing this:
set the localStorage based on your active tab, you can give on onclick event of any tab
localStorage.setItem("activeTab", "Archivos");
Use localStorage.getItem("activeTab"), based on that add active class to the tab
I have a main menu. This main menu opens hidden divs that also contain inner menus that show and hide content.
You can see this in action here: http://shirleycollinsmovie.com/collins-html5/index.html#about
The user can select from the main menu and open up one of the hidden divs, and then explore the contents of the inner menu.
However when the user closes the hidden div and then opens a new one, then returns to the previous one again, instead of it displaying the contents from the beginning again it shows them exactly where they were when they left the hidden div previously. I want it to display the contents from the beginning again.
This is the code I have which shows the hidden divs from the main menu (I am using the same code for the inner menus as well):
$('#menu nav a').click(function() {
$('.draggable').hide();
$(this.getAttribute('href')).show()
});
<div id="menu">
<h1>main header</h1>
<nav>
<a id="about-link" href="#about">About</a>
<a id="news-link" href="#news">News</a>
<a id="foundation-link" href="#foundation">Foundation</a>
<a id="contact-link" href="#contact-info">Contact</a>
</nav></div>
<div id="foundation" class="hidden draggable-scroll">
<div id="foundation-nav" class="box-text">
<nav>
The Story so Far
What will the Foundation do?
The Manifesto
Who is the Foundation?
</nav>
</div>
<div id="foundation-opening" class="box-text foundation-info">
<h2>header </h2>
<p>
</p></div>
<div id="the-story" class="box-text foundation-info hidden">
<h2>The Story so far: </h2>
<p>
And she’s not done yet,</p>
</div>
<div id="what" class="box-text foundation-info hidden">
<p>
The Ballad of </p>
</div>
<div id="manifesto" class="box-text foundation-info hidden">
<h2>The proposed Manifesto: </h2>
<p>
The reason for the foundation to exist: </p>
</div>
<div id="who" class="box-text foundation-info hidden">
<h2>Who is the Foundation?</h2>
<p> </p>
</div>
<div class="close-box">
x</div>
</div>
Perhaps there is a way to target the starting content from the href of the main menu?
Or is there a way within the jQuery to re-hide the hidden content when the users selects from the main menu again?
A simple workaround,
The following code finds first/beginning Menu Item - a:first selector and trigger click on it.
$('#menu nav a').click(function() {
$('.draggable').hide();
$(this.getAttribute('href')).show().find('nav a:first').click();
});
This would always open first <a> of <nav>.
It works with your site link. Tried out in console.
I am working on a mockup and have created this:
http://cynthialarenas.billybluedigital.net/
I'm having a problem with my nav buttons: Play, About, How To.
If you click 'about' then 'how to' everything works fine, but if you go from 'how to' to 'about' the 'how to' disappears. How do I get all the buttons to work consistently and not disappear. Also I am noticing the slide transitions are actign a little funny, sometimes displaying a white banner.
I want the jquery to be just inside the content area but its appears to flash quickly above and over the footer.
Can anyone shed some light?
Here are some snippets of my code:
CSS:
#contentArea{
width:1024px;
height:522px;
background:#FFF;
float:left;
overflow: hidden;
}
#playSlide, #howSlide, #aboutSlide {
display: none
}
.toggleDiv p {
margin: 0 0 12px 0
}
HTML:
<div class="toggleDiv" id="aboutSlide">
<div class="navContainer">
<div class="menuItem">
<a class="show_hide" rel="#playSlide">
<img src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/play_black.png" onMouseOver=src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/play.png" onMouseOut=src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/play_black.png">
</a>
</div>
<div class="menuItem">
<a class="show_hide" rel="#aboutSlide">
<img src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/about_btn_hover.png" onMouseOver=src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/about_btn_hover.png" onMouseOut=src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/about_btn.png">
</a>
</div>
<div class="menuItem">
<a class="show_hide" rel="#howSlide">
<img src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/howtoplay_btn.png" onMouseOver=src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/howtoplay_btn_hover.png" onMouseOut=src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/howtoplay_btn.png">
</a>
</div>
</div>
Gonna have to agree with Mitchell on this one. Using images for simple navigation like this is incredibly non-SEO friendly. Not only that, it's just plain unprofessional.
While I can't cause the problem to happen when I visit your site, I can offer an alternative to the images you're using.
http://jsfiddle.net/L2MVu/1
<ul class="nav">
<li class="active">play</li>
<li>about</li>
<li>how to play</li>
</ul>
As you can see, it's all editable, but still just as clean as you wanted from the images.
While this doesn't do a whole lot to save page-load time, it's always best to try to get a desired effect with pure CSS before resorting to images.