I am using the below css for my menu items. I need to highlight the active page in the menu bar. Can anyone correct the css. Or can I achieve using javascript or some type script?
#menu ul {
margin: 0;
padding: 7px 6px 0;
background: #b6b6b6 url('/Images/Overlay.png') repeat-x 0 -110px;
line-height: 100%;
border-radius: 1em;
font: normal 0.5333333333333333em Arial, Helvetica, sans-serif;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
width 100%;
}
#menu li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
#menu a,
#menu a:link {
font-weight: bold;
font-size: 16px;
color: #444444;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
#menu a:hover {
background: #000;
color: #fff;
}
#menu .active a,
#menu li:hover > a {
background: #bdbdbd url('/Images/Overlay.png') repeat-x 0 -40px;
background: #666666 url('/Images/Overlay.png') repeat-x 0 -40px;
color: #444;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 0 #ffffff;
}
#menu ul ul li:hover a,
#menu li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#menu ul ul a:hover {
background: #7d7d7d url('/Images/Overlay.png') repeat-x 0 -100px !important;
color: #fff !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
#menu li:hover > ul {
display: block;
}
#menu ul ul {
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 40px;
left: 0;
background: url('/Images/Overlay.png') repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
#menu ul ul li {
float: none;
margin: 0;
padding: 3px;
}
#menu ul ul a,
#menu ul ul a:link {
font-weight: normal;
font-size: 12px;
}
#menu ul:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
* html #menu ul {
height: 1%;
}
<div id="menu">
<ul>
<li><span>Home</span></li>
<li><span>Save</span></li>
<li><span>User</span></li>
</ul>
</div>
This can't be done only via css you need to use some jQuery or PHP to add an active class to the current page link and then style it via css
Check these
Stackoveflow question with same problem
Solution from css tricks
Why all the tricky JavaScript or jQuery? This can be done so easily with some simple CSS and HTML.
Create a CSS class for the active page, for example:
.active{
background-color:white;
color:red;
}
Then on each of your pages, add the class .active in your navbar to whichever menu item is the current page, for example:
** On the Update page:**
<div id="menu">
<ul>
<li><span>Home</span></li>
<li><span>Save</span></li>
<li><span>User</span></li>
</ul>
</div>
So on each page whichever <li> in your navbar is the current page just simply add class="active" as shown above.
Two basic things must happen:
Function to be triggered.
Then the function must somehow affect the styling.
There are probably many ways to do this. But what's the best way? Let's look at some various options
Function to be triggered
onclick manually embedded into each of the menu elements
Dynamically inject onclick event into each menu item when the document loads
Event listener for a certain type of element
Event listener for a class
Multiple event listeners for a specific id for each menu item
In any case, you either need an onclick event, or an event listener. The onclick is more direct.
<a onclick="myFunction()">Home</a>
This way, you look at the HTML, and you immediately know that an onclick event is tied to it. Whether the trigger for the function is embedded in the HTML element, or and event listener in a <script> tag, either way, there must be a way to identify the element in order to change the style. So, the element needs an id.
<a id="menuHome" onclick="myFunction()">Home</a>
Even if you use the this key word, you still need an id. this.id
<body>
<a id="myId" onclick="runIt(this.id)">Home</a>
</body>
<script type="text/javascript">
function runIt(argInput) {
alert("This is what was passed in: " + argInput);
};
</script>
If you use the this keyword alone, in the tag, it returns nothing.
<a id="myId" onclick="runIt(this)">Home</a>
The above line of code won't give you anything for a reference to what element was clicked.
So, again, even if the this keyword is used, there needs to be a way to identify what element was clicked.
Change the Styling
To change the style of a menu item, this code can be used:
<body>
<a id="myId" onclick="runIt(this.id)">Home</a>
</body>
<script type="text/javascript">
function runIt(argInput) {
//alert("This is what was passed in: " + argInput);
var whatMenuItem = argInput;
var objectElement = document.getElementById(whatMenuItem);
objectElement.style.color = "green";
};
</script>
The above code changes the color of the menu item to green.
Or maybe you want to dynamically inject onclick events into every menu item when the document loads. This jsFiddle shows how to do that.
jsFiddle Inject onclick events into menu anchor tags
In the jsFiddle example, not only an id is used, but also a class. Why? In order to loop through every <a> tag in the menu, that information needs to somehow be retrieved. It is retrieved by:
document.getElementsByClassName("className")
Now you have yet one more thing added to your HTML.
<div id="menu">
<ul>
<li><a class="myMenu" id="xyz1" href="#" title="Update"><span>Home</span></a></li>
<li><a class="myMenu" id="abc2" href="#" title="Save"><span>Save</span></a></li>
<li><a class="myMenu" id="hij9" href="#" title="User"><span>User</span></a></li>
</ul>
</div>
This jsFiddle shows changing the menu style with an event listener:
jsFiddle Event Listener - Change Style
Determining what menu element was clicked and changing the style of that menu element is only part of what is needed. There needs to be a way to put the menu item back to its original style if the user navigates to another menu.
This jsFiddle shows a complete working example of highlighting the current menu item, recording which menu item is current, setting the old menu item back to it's default, and checking if the user clicked the active menu item twice.
jsFiddle Highlight Active Menu Item on Menu Bar
Related
I have:
<ul id="list">
<li>Some text <span class="removeParent">X</span></li>
</ul>
And when the span.removeParent is clicked, li have to be deleted.
It's very simple but the only (unfortunately working) solution I came up with was:
span.addEventListener("click", this.parentElement.parentElement.removeChild(this.parentElement);
It may be out of context so here's the link to the full to-do app:
https://jsfiddle.net/w246hn3b/3/
I'm not sure if
this.parentElement.parentElement.removeChild(this.parentElement);
is the best, most efficient solution
This is a great use case for event delegation. Since the click event will bubble up the DOM to the parent node, you can listen for the click event on the root ancestor, and then check to see if the clicked element matches your target type.
var todolist = document.getElementById('todolist');
todolist.addEventListener('click', function(e){
if(e.target.matches('.remove')){
todolist.removeChild(e.target.parentNode);
}
});
.remove {
color: #821818;
display: inline-block;
padding: 3px 10px;
border: 1px solid #d84c4c;
border-radius: 2px;
cursor: pointer;
position: absolute;
right: 0px;
top: 0px;
height: 100%;
box-sizing: border-box;
background: #f1bbc0;
font-weight: 700;
font-size: 25px;
}
#todolist{
list-style:none;
}
#todolist li{
display:block;
position:relative;
padding:8px 6px;
width:300px;
margin:5px 0px;
border-radius:2px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12), 0 3px 3px -2px rgba(0, 0, 0, 0.4);
}
<ul id='todolist'>
<li>1<span class='remove'>×</span></li>
<li>2<span class='remove'>×</span></li>
<li>3<span class='remove'>×</span></li>
<li>4<span class='remove'>×</span></li>
<li>5<span class='remove'>×</span></li>
<li>6<span class='remove'>×</span></li>
<li>7<span class='remove'>×</span></li>
<li>8<span class='remove'>×</span></li>
</ul>
some resources on event delegation:
https://gomakethings.com/why-event-delegation-is-a-better-way-to-listen-for-events-in-vanilla-js/
https://davidwalsh.name/event-delegate
I use scroll spy from bootstrap and I would like to call just once the function which activate the navigation with a button.
I explain, I don't want to use entirely the scroll spy, just when I click on a button for example. And the rest of the time I don't want to use it.
I don't know which function is called by the event "onscroll" from Bootstrap.
EDIT: This is a plunker : http://plnkr.co/edit/xfsAWsLADkW6F98exC4P?p=preview
$(function() {
function spy() {
$('#myScrollspy').addClass('scrollspy');
$('body').scrollspy({ target: '.scrollspy' });
$('#myScrollspy').removeClass('scrollspy');
}
button_spy.onclick = spy;
});
In this, I activate scroll spy and disable with the button but it worked just once. So, I asked myself which is the function called by the bootstrap scroll spy to call it juste once but I didn't find it.
If you want show active section
Add this css
ul.nav-tabs {
width: 140px;
margin-top: 20px;
border-radius: 4px;
border: 1px solid #ddd;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
}
ul.nav-tabs li {
margin: 0;
border-top: 1px solid #ddd;
}
ul.nav-tabs li:first-child {
border-top: none;
}
ul.nav-tabs li a {
margin: 0;
padding: 8px 16px;
border-radius: 0;
}
ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover {
color: #fff;
background: #0088cc;
border: 1px solid #0088cc;
}
ul.nav-tabs li:first-child a {
border-radius: 4px 4px 0 0;
}
ul.nav-tabs li:last-child a {
border-radius: 0 0 4px 4px;
}
ul.nav-tabs.affix {
top: 30px; /* Set the top position of pinned element */
}
DEMO
I have a div followed by a fieldset. I have it such you click the div anywhere and it makes the otherwise display:none fieldset appear. However, I'd like it to disappear on second click, as well. Basically the onclick event would toggle between display:none and display:block.
Here's the fiddle I'm working with: http://jsfiddle.net/zk1j23m5/
function showexpando(id) {
document.getElementById(id).style.display = "block";
}
.greyex {
padding: 15px;
padding-left: 30px;
padding-right: 30px;
border: solid black 3px;
border-top: 0px;
border-radius: 0px 0px 7px 7px;
background-color: #DDDDDD;
display: none;
}
.expando {
background-color: #A971A9;
font-weight: bold;
padding: 5px;
text-align: center;
border: 3px solid black;
border-radius: 7px 7px 0px 0px;
border-bottom: 0px;
cursor: pointer;
}
.expando a {
text-decoration: none;
}
<div class="expando" onclick="showexpando('excred');">
<a>▼ lorem ▼</a>
</div>
<fieldset class="greyex" id="excred">ipsum</fieldset>
Additionally, there's some problem with the border. I'd like the expando div to have border-radius: 7px when the fieldset is hidden, but have border-radius:7px 7px 0px 0px; border-bottom: 0px when the fieldset is visible. Lastly, the border doesn't look right when fieldset is visible: there's like a 1px difference in positioning despite the code being congruent.
How can I accomplish these?
edit; I guess I could query the document if fieldset is display:none and fiddle with the CSS accordingly using JS, but it seems unwieldy and I'm sure there's an easier solution.
You should use unobtrusive JavaScript instead.
I'd suggest toggling a class. For instance:
Updated Example
var expand = document.querySelector('.expando');
expand.addEventListener('click', function () {
this.nextElementSibling.classList.toggle('visible');
});
.greyex {
display: none;
}
.greyex.visible {
display: block;
}
References:
.nextElementSibling (IE9+)
.classList (IE10+)
Noticed no one answered your second part.
If you're looking to get the borders to line-up, just change the fieldset to a div.
Here's the fiddle.
Or, alternatively you can set the margin to the fieldset element to:
margin: 0px 2px 0px 2px;
To match the div.
I want slide number on each navigation bar bullet points
HTML code
<div id="slideshow">
<div class="container">
<div class="flexslider showOnMouseover ">
<ul class="slides">
<li> <img src="sliders/images/1.png" alt="" /> <div class="flex-caption"><img src="sliders/images/1-1.png" alt=""></div></li>
<li> <img src="sliders/images/2.png" alt="" /> <div class="flex-caption"><img src="sliders/images/1-2.png" alt=""></div></li>
</ul>
</div>
you can do that by removing a class name
use the below code to do it as soon as the slider starts.
$('.flexslider').flexslider({
start : function(){
$('.flex-control-paging').removeClass('flex-control-paging');
}
});
NOTE: You may need to change some more css to make it look pretty
Anyone still looking for the solution to this as I was, it can be solved simply by modifying the style sheet 'flexslider.css'.
The script already gives each nav link a number, but hides the number from view using a text-indent of -9999px. To get the numbers back, modify the class '.flex-control-paging li a'. As an example, here's the original:
.flex-control-paging li a {
width: 11px;
height: 11px;
display: block;
background: #666;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
text-indent: -9999px;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
Modify it to:
.flex-control-paging li a {
width: 20px;
height: 20px;
font-size: 20px;
display: block;
background: #ddd;
cursor: pointer;
}
And...
.flex-control-paging li a:hover {
background: #333;
color:#eee;
}
.flex-control-paging li a.flex-active {
background: #333;
color:#FFF;
cursor: default;
}
Should give you a good starting point to add your own style to.
I have a page called project, in that page there are two grids, one called "imagesGrid" and the other one called "detailsBox", they are floating next to each other using (i.e. both has a width like 50% and display inline-block). I am trying to make the "detailsBox" to start scrolling with the page when the header reaches its top, and stop from scrolling when its bottom reaches the top of the footer. I am also trying to stop the function completely from working and set the "detailsBox" to be positioned as relative when the screen size is below 700px.
I have tried and experimented dozens of tutorials, like:
make div stick to the top of the screen and stop before hitting the footer and http://jsfiddle.net/FDv2J/3/ with no hope.
What is the best path to take to solve my problem? Here is a link to a live preview of the page: http://www.loaidesign.co.uk/portfolio ?project=Test_Project
And here is the HTML and the CSS, I don't have a working JavaScript script, and I tired the ones provided in the links above as well as many others from here, google and codepen, but can't seem to be able to make them work for me.
HTML:
<div class="wrapperB">
<div id="portfolio-projectPage" class="content">
<div class="imagesGrid">
<p>Website</p>
<img alt="Adonis Cars Rental website design" src="images/adonis-cars-website.jpg">
</div>
<div class="detailsBox">
<h3>Adonis Cars</h3>
<p>It's a luxuries cars rental agency based in Qatar</p>
<p>www.adoniscars.com
</p>
<p><strong>Skills:</strong> Web Design</p>
<p><strong>Date:</strong> 2012</p>
<p class="share icons"><strong>Share This Project On:</strong>
<br> <span>Facebook</span> <span>Twitter</span>
<!--Twitter Popup Script-->
<script type="text/javascript">
function popitup(url) {
newwindow = window.open(url, 'name', 'height=440,width=700');
if (window.focus) {
newwindow.focus();
}
return false;
}
</script>
</p>
<div> Go Back
<a class="scrollup">Scroll Up</a>
</div>
</div>
</div>
</div>
CSS:
.imagesGrid, .detailsBox {
display: inline-block;
vertical-align: top;
}
.imagesGrid {
width: 65%;
}
.imagesGrid img {
border: 1px solid #EAEAEA;
margin-bottom: 10px;
display: block;
}
.imagesGrid img:last-of-type {
margin-bottom: 0;
}
.imagesGrid p {
border-top: 1px solid #EAEAEA;
padding-top: 8px;
margin: 10px 0;
}
.imagesGrid p:first-of-type {
border-top: none;
padding: 0 0 10px 0;
margin: 0;
}
.detailsBox {
position: fixed;
top: 0;
width: 347px;
margin-top: 28px;
padding-left: 30px;
}
.detailsBox p {
border-bottom: 1px solid #EAEAEA;
padding-bottom: 10px;
margin: 10px 0;
}
.detailsBox p:first-of-type {
border-bottom: 3px solid #EAEAEA;
margin: 0;
}
.detailsBox p:last-of-type {
border-bottom: 3px solid #EAEAEA;
margin: 0;
}
.detailsBox a:hover {
color: #5575A6;
}
.detailsBox div {
background-color: #F5F5F5;
padding: 15px 0;
text-align: center;
border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
}
.detailsBox div a {
background-color: #EAEAEA;
padding: 10px 14px;
cursor: pointer;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.detailsBox div a:hover, .detailsBox div a:active {
color: #FFFFFF;
background-color: #5575A6;
}
.share.icons {
cursor: default;
}
.share.icons a {
vertical-align: middle;
background-color: #F5F5F5;
}
.share strong {
margin-right: 10px;
}
.share br {
display: none;
}
.scrollup {
display: none;
}
You might want to check out StickyFloat
It uses JS to achieve what you want. The problem you have is that you're trying to use CSS to conditionally do something, when really that's not what CSS is for
CSS "Float" VS Javascript
If you want the floated div to remain at a certain position all the time, that's okay. But CSS cannot differentiate between elements on the page. Here's the official spec:
fixed The element is positioned relative to the browser window
The problem is fixed is related to the browser window only, not other elements. JS, on the other hand, uses the DOM to create an array of elements on the page, which you can create conditions for. It'd highly recommend looking at StickyFloat, or the other "sticky" JS plugins :)