here is my jsfiddle: http://jsfiddle.net/HhBEJ/3/
Despite some of the code not looking good in jsfiddle because i have background images and such - I am having a problem with my nav menu.
What I want it to do is:
When I load the page(index.htm) I want it to have a page marker ( which i have named current) to mark that I'm currently on the home page. When I click on another page to navigate to - I want it to remove current from prev page and make curPage the new current (you can see I did this in jquery (i think i did it right)) and if i click on a sub menu. for instance i go to "web > web215 > JavaScript" when I click on javaScript I want the Web parent Web215 child AND the javaScript grandchild to highlight all with the 'current' id. but it's not doing it to any of them except for a quick second when i click - it's not saving it when the page loads. I think the culprit is somewhere in here:
function youAreHere() {
var pathName = $(location).attr('pathname');
var curPage = pathName.substring(pathName.lastIndexOf('/') + 1);
$('a').each(function () {
if ($(this).attr('href') == curPage) {
$(this).attr('id', 'current');
} else if (curPage == '') {
$('a:first').attr('id', 'current');
}
}); //END function
I know when i put an alert it's calling the page correctly and it's working as intended but the current class isn't either A: staying after it loads or B: loading up at all.
your css is wrong, you are setting the id of current to the a tag but in the css you are setting the id of current to the li tag. This is what you need:
div#menu li a#current {
font-weight: bold;
font-size: 16px;
z-index: 6;
background: transparent url('../images/menu_level1_item.png') repeat-x scroll 0pt 100%;
}
div#menu li a#current ul {
font-weight: normal;
font-size: 12px;
}
Related
I have a sidebar and I want to close it when someone clicks on a link. In my code, the sidebar just closes for a millisecond when I click on an anchor element. How can I fix this without using jQuery?
The a tags are linking to a html page
JS:
var elem = document.getElementById('slidebar').getElementsByClassName('button')[0]
element.addEventListener("click", slide);
function slide() {
document.getElementById('slidebar').classList.toggle('active');
}
var slidebar = document.getElementById('slidebar');
slidebar.addEventListener('click', handleMenuClick);
function handleMenuClick(event) {
if (event.target instanceof HTMLAnchorElement) {
document.getElementById('slidebar').classList.add('close');
}
}
CSS:
#slidebar.active {
left: 0px;
}
#slidebar.close {
display: none;
}
First, make sure you prevent the default event when clicking the anchor tag. Otherwise, it might be re-rendering the page.
But based on your code, it looks like you're adding two functions onto the slidebar. One that closes and one that opens. Since the anchor tag that closes the slidebar is inside the slidebar - when you click it you first fire off the handleMenuClick function and then it bubbles up and fires off the slide function. So it closes and opens quickly.
Instead, add a third element that is used to open the slidebar and attach the slide function there.
Also, you don't need two classes for managing the state of hidden/not hidden. You can just provide a class that sets the display to none and toggle that class list. If you want transition effects you can do that in CSS
Maybe something like this:
window.addEventListener('DOMContentLoaded', e => {
let slidebar = document.getElementById('slidebar')
let collapseButton = slidebar.getElementById('close-button')
let openButton = slidebar.getElementById('open-button')
collapseButton.on('click', toggleClassList)
openButton.on('click', toggleClassList)
const toggleClassList = e => {
e.preventDefault()
slidebar.classList.toggle('hidden')
}
})
#slide-bar.hidden {
display: none;
}
#slide-bar.hidden #close-button {
display: none;
}
#slide-bar #open-button {
display: none;
}
Obviously, it depends a bit on the code you have already written. But this is a basic example that would work. Just need to add the transitions for the sliding effect in CSS
I have a set of buttons on my page, each of which calls a javascript function when clicked; when clicked, the active link color is lit, but when I click elsewhere on the page the active link color is cleared. I want it to stay lit unless I click on another button link.
Here is an example of how a link is constructed (there are 10 links):
<div class="C1"><br><button class="button_01" onclick="HideDropdown(); ShowPage(7);">FAQs</button></div>
Here's the css for the button and C1 classes:
.button_01 {
background-color: rgb(0,2,3);
border: none;
color: rgb(100,100,100);
font-family: camphorW01-Thin,calibri,arial;
text-align: left;
text-decoration: none;
font-size: 13pt;
cursor: pointer;
transition: all 150ms ease-in;
}
.button_01:hover { color: rgb(175,222,162); }
.button_01:active { color: rgb(175,222,162); }
.button_01:focus { color: rgb(175,222,162); }
.button_01:visited { color: rgb(175,222,162); }
.C1{
color:#DBDBDB;
font-family: sans-serif;
font-size: 14pt;
text-indent: 0px;
width: auto;
margin: auto;
}
I know the default behavior is for the active link color to clear when clicking elsewhere, but I should be able to use javascript or jquery to get the value of the active link and keep it the same color (unless I click on another link); I've found only two posts that come close but one is specific to list items (li), not a button class with an onclick handler (not an anchor tag) at How to get the ID of an active link. Another post at how to Keep the color of active link constant, until i press other link showed a jquery function specific to anchor tags; I modified it like this:
<script>
var items = $("button_01");
items.removeClass("active");
$(this).toggleClass("active");
});
<script>
That doesn't work and with that script in place the links do not work.
So my question is: how do I keep the active link color lit on a button that has an onclick handler to call javascript (versus a list item or an anchor tag)?
Thanks very much for any help on this.
EDIT: I solved this problem and posted the answer below.
assuming all you buttons have class="button_01"
$('.button_01').on('click', function(){
$('.button_01').removeClass('active');
$(this).addClass('active');
});
.active {
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button_01">Button 1</button>
<button class="button_01">Button 2</button>
<button class="button_01">Button 3</button>
you could use the .css() property within jquery if the active attribute is still clicking out on your site.
$('.button_class').on('click', function() {
$('.button_class').removeAttr('style');
$(this).css('backgroundColor', 'red');
});
I just made a quick fiddle with what I think is a possible solution to your problem. I've done in pureJs.
function ShowPage(e,page){
// do a function to reset colors to default
resetColors();
// call hide here, since you do it everytime you show a page
HideDropdown();
e.classList.add("active");
//do stuff here
}
function HideDropdown(){
// do stuff here
}
function resetColors(){
// do stuff here
}
.active{
color: red !important;
}
<div class="C1">
<button class="wathever" onclick="ShowPage(this,7);">A</button>
<button class="wathever" onclick="ShowPage(this,7);">B</button>
<button class="wathever" onclick="ShowPage(this,7);">C</button>
<button class="wathever" onclick="ShowPage(this,7);">D</button>
</div>
After much research and work, here's how I solved this problem.
Remember that I have 10 links, each with a unique ID number, so I loop through them 1-10 and create the ID name (e.g., btn04). In order to keep the current active link lit, I have to change the link color to the active link color when I click anywhere on the page except for another link of the same type (button_01 class). For that, I need to store the active element in a global var on each button click, so that on any subsequent click we know what the last active element was BUT the subsequent click will change the active element to the currently-clicked element. What to do? I set up another global var, LastActiveElement, which captures the most recently set active element. Now I know where the last click was -- if it was a hyperlink and the current click is not a hyperlink, I change the last clicked hyperlink color back to its active color, which has the effect of keeping it on the same color.
Add this to the body tag:
<body onload="ShowABC(1);" onclick="changeColor(event); getLastGAE(event); getFocusElement(event);">
<script>
function changeColor(event) {
for (i = 1; i < 11; i++) {
ID_Name = "btn0" + i.toString();
if (i >= 10){ID_Name = "btn" + i.toString();}
var elem = document.getElementById(ID_Name);
TargetClass = event.target.getAttribute('class');
TargetID = event.target.getAttribute('id');
var active = document.activeElement;
var equal = (LastActiveElement == ID_Name);
tfh = TargetID == "hamburger_container";
if ((equal == "true") && (TargetClass != "button_01") && (tfh == "false")){
var newColor = "rgb(175,222,162)";
elem.style.color = newColor; }
if (TargetClass == "button_01"){ elem.style.color = "rgb(100,100,100)"; }
if (TargetID == ID_Name){ elem.style.color = "rgb(175,222,162)"; }
}
}
</script>
<script>
var LastActiveElement;
function getLastGAE(event) {
LastActiveElement = GlobalActiveElement;
}
</script>
<script>
var GlobalActiveElement;
function getFocusElement(event) {
var active = document.activeElement;
TargetID = event.target.getAttribute('id');
GlobalActiveElement = TargetID;
}
</script>
With that, if I click anywhere on the page except another hyperlink of the same class, the active link color does not change.
Now I know some advise against global vars, but this is only two data elements added to the DOM so it takes up negligible space.
Of course, there may be other solutions but this is what I came up with.
Thanks to everyone who replied to this question.
There are a bunch of div elements on the page.
I have a nested div inside of them.
I want to be able to add a class to the clicked element, and .show() the child div.
$('.container').on('click', function(){
$(this).toggleClass('red').children('.insideItem').slideToggle();
});
I can click on it, it drops down.
Click again, it goes away.
So, now I need some method to removeClass() and slideUp() all of the other ones in the event of a click anywhere except the open div. Naturally, I tried something like this:
$('html').on('click', function(){
$('.container').removeClass('red').children('div').slideUp();
});
Well, that just stops the effect from staying in the first place. I've read around on event.Propagation() but I've read that should be avoided if possible.
I'm trying to avoid using any more prebuilt plugins like accordion, as this should be a pretty straightforward thing to accomplish and I'd like to know a simple way to make it work.
Would anyone be able to show a quick example on this fiddle how to resolve this?
Show only one active div, and collapse all others if clicked off
https://jsfiddle.net/4x1Lsryp/
One way to go about it is to update your code with the following:
1) prevent the click on a square from bubbling up to the parent elements
2) make sure to reset the status of all the squares when a new click is made anywhere.
$('.container').on('click', function(){
$this = $(this);
$('.container').not($this).removeClass('red').children('div').slideUp();
$this.toggleClass('red').children('div').slideToggle();
return false;
});
See the updated JSfiddle here: https://jsfiddle.net/pdL0y0xz/
You need to combine your two approaches:
for (var i = 0; i < 10; i++) {
$('#wrap').append("<div class='container'>" + i + "<div class='insideDiv'>Inside Stuff</div></div>");
}
$('.container').on('click', function() {
var hadClassRed = $(this).hasClass('red');
$('.container').removeClass('red').children('div').slideUp();
if (!hadClassRed) {
$(this).toggleClass('red').children('div').slideToggle();
}
});
.container {
width: 200px;
height: 200px;
float: left;
background: gray;
margin: 1em;
}
.insideDiv {
display: none;
}
.red {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap"></div>
I am trying to make webpage where there is a div in the center which is being changed, instead of going to different pages.
Ultimately, I would like to have the new div, when clicking on an arrow, to flow from right or left in to the center. But first I would like to make the divs appear and disappear when clicking on the arrows but unfortunately this doesn't work.
This is my javascript:
<script>
function changeToHome() {
document.getElementById("mainmain").style.display="block";
document.getElementById("mainmain2").style.display="none";
document.getElementById("mainmain3").style.display="none";
document.getElementById("mainmain4").style.display="none";
}
function changeToStudy() {
document.getElementById("mainmain").style.display="none";
document.getElementById("mainmain2").style.display="block";
document.getElementById("mainmain3").style.display="none";
document.getElementById("mainmain4").style.display="none";
}
function changeToJob() {
document.getElementById("mainmain").style.display="none";
document.getElementById("mainmain2").style.display="none";
document.getElementById("mainmain3").style.display="block";
document.getElementById("mainmain4").style.display="none";
}
function changeToContact() {
document.getElementById("mainmain").style.display="none";
document.getElementById("mainmain2").style.display="none";
document.getElementById("mainmain3").style.display="none";
document.getElementById("mainmain4").style.display="block";
}
function changePageRight() {
var displayValue5 = document.getElementById('mainmain').style.display;
var displayValue5 = document.getElementById('mainmain2').style.display;
var displayValue6 = document.getElementById('mainmain3').style.display;
var displayValue7 = document.getElementById('mainmain4').style.display;
if (document.getElementById('mainmain').style.display == "block") {
document.getElementById("mainmain").style.display="none";
document.getElementById("mainmain2").style.display="block";
}
else if (document.getElementById('mainmain2').style.display == "block") {
document.getElementById("mainmain2").style.display="none";
document.getElementById("mainmain3").style.display="block";
}
else if (document.getElementById('mainmain3').style.display == "block") {
document.getElementById("mainmain3").style.display="none";
document.getElementById("mainmain4").style.display="block";
}
else if (displayValue8 == block) {}
}
function changePageLeft() {
var displayValue = document.getElementById('mainmain').style.display;
var displayValue2 = document.getElementById('mainmain2').style.display;
var displayValue3 = document.getElementById('mainmain3').style.display;
var displayValue4 = document.getElementById('mainmain4').style.display;
if (displayValue == "block") { }
else if (displayValue2 == "block") {
document.getElementById("mainmain").style.display="block";
document.getElementById("mainmain2").style.display="none";
}
else if (displayValue3 == "block") {
document.getElementById("mainmain2").style.display="block";
document.getElementById("mainmain3").style.display="none";
}
else if (displayValue4 === "block") {
document.getElementById("mainmain3").style.display="block";
document.getElementById("mainmain4").style.display="none";
}
}
</script>
Now I have a few divs that look like this:
<div id="mainmain4">
<img style="width:400px;height:327px;margin-left:auto;margin-right:auto;display:block;" src="Untitled-22.png" />
<h2> My name </h2>
<p>Hi,</p>
<p>Some text</p>
</div>
With these css atributes:
#mainmain {
float: left;
width: 575px;
display: block;
position: relative;
}
And all other divs with display: none; so I can change this to block and the one that was block to none.
For some reason, after when I click on one button of the menu, which activates a changeToX() function, the arrows work great. But before that, when you first go to the website, it doesn't.
Can someone explain me what I do wrong?
You don't tell the browser which divs shall be displayed on load. You can use theonloadevent for this:
<body onload="changeToHome()">
One additional hint: you maybe don't want to use inline JavaScript and CSS.
jQuery is as this simple:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
toggle!
<div id="mainmain">test text</div>
<script>
// you need this, only apply javascript when all html (dom) is loaded:
$(document).ready(function() {
$('.toggle-container').on('click', function(e) {
e.preventDefault(); // this prevents the real href to '#'
// .toggle() is like "on / off" switch for hiding and showing a container
$($(this).data('container')).toggle();
});
});
</script>
This function can be reused, because it is based on classes instead of id's.
Check this JSFiddle: http://jsfiddle.net/r8L6xg15/
Maybe this is of some use. I've tried to make a page control-like behaviour. You can select any container div and put elements in there that have the class 'page'. The JavaScript code will let you navigate those with buttons.
You can make it more fancy by adding the buttons through JavaScript. What you then have is basically a list of pages which are normally displayed as regular divs, but when the script kicks in, it changes them to a page control.
You can call this for any parent element, and in that sense it behaves a bit like a jQuery plugin. It is all native JavaScript, though. And not too much code, I hope. Like you said, I think it's good to learn JavaScript at first. It is very powerful by itself, and it's becoming increasingly powerful. jQuery adds a lot of convenience functions and provides fallbacks in case browser don't support certain features, or when implementations differ. But for many tasks, bare JavaScript will do just fine, and it certainly can't hurt to know your way around it.
Press the 'Run this snippet' button at the bottom to see it in action.
function Pages(element)
{
// Some initialization
var activePage;
// Find all pages within this element.
var pages = document.querySelectorAll('.page');
var maxPage = pages.length - 1;
// Function to toggle the active page.
var setPage = function(index)
{
activePage = index;
for (p = 0; p <= maxPage; p++)
{
if (p == activePage)
pages[p].className = 'page active';
else
pages[p].className = 'page inactive';
}
}
// Select the first page by default.
setPage(0);
// Handler for 'previous'
element.querySelector('.prev').onclick = function()
{
if (activePage == 0)
return;
setPage(activePage - 1);
}
// Handler for 'next'
element.querySelector('.next').onclick = function()
{
if (activePage == maxPage)
return;
setPage(activePage + 1);
}
// Add a class to the element itself. This way, you can already change CSS styling
// depending on whether this code is loaded or not. So in case of an error, the
// divs are just all show underneath each other, and the nav buttons are hidden.
element.className = element.className + ' js';
}
Pages(document.querySelector('.pages'));
.pages .page {
display: block;
padding: 40px;
border: 1px solid blue;
}
.pages .page.inactive {
display: none;
}
.pages .nav {
display: none;
}
.pages.js .nav {
display: inline-block;
}
<div class="pages">
<button class="nav prev">Last</button>
<button class="nav next">Next</button>
<div class="page">Page 1 - Introduction and other blah</div>
<div class="page">Page 2 - Who am I? Who are you? Who is Dr Who?</div>
<div class="page">Page 3 - Overview of our products
<ul><li>Foo</li><li>Bar</li><li>Bar Pro</li></ul>
</div>
<div class="page">Page 4 - FAQ</div>
<div class="page">Page 5 - Contact information</div>
</div>
To dos to make this a little more professional:
Add the navigation through JavaScript
Disable the buttons when first/last page has been reached
Support navigation by keys too (or even swipe!)
Some CSS transform (fade or moving) when toggling between pages
Smarter adding and removing of classes. Now I just set className, which sucks if someone would like to add classes themselves. jQuery has addClass and removeClass for this, which is helpful. there are also stand-alone libraries that help you with this.
Visible indication of pages, maybe with tabs at the top?
I have a link in my navigation that opens a specific tab on a page, the link works fine, but the page opens so the beginning of the content is hidden by the fixed navbar. Can anybody help me, I am new to bootstrap and not very good in java:
var gotoHashTab = function (customHash) {
var hash = customHash || location.hash;
var hashPieces = hash.split('?'),
activeTab = $('[href=' + hashPieces[0] + ']');
activeTab && activeTab.tab('show');
}
// onready go to the tab requested in the page hash
gotoHashTab();
// when the nav item is selected update the page hash
$('.nav a').on('shown', function (e) {
window.location.hash = e.target.hash;
})
// when a link within a tab is clicked, go to the tab requested
$('.tab-pane a').click(function (event) {
if (event.target.hash) {
gotoHashTab(event.target.hash);
}
});
or is there a better script to use external links to open a specific tab on different page for bootstrap 3 ?
Put the class .anchor on the anchor (the target).
If the navbar is only fixed on certain sizes, then where the ???px is, put the min-width of that breakpoint (992px for md and up, 1200px for large and up, and 768px for small and up).
#media (min-width: ???px) {
.anchor {
padding-top: 60px;
margin-top: -60px;
}
}
If fixed at all screen sizes:
.anchor {
padding-top: 60px;
margin-top: -60px;
}
Assumes height of 50px on the navbar. Also, this may not be necessary if your body top padding has the padding of the height of navbar as per the getbootstrap.com examples.