I have following links
<ul class="dropdown dropdown-horizontal">
<li>Wall</li>
<li>Introduction</li>
<li>Activities</li>
<li>Reviews</li>
<li>Recommendation</li>
<li>Photos</li>
<li>Discussion</li>
</ul>
and if I click on any link then it must be high lighted.
I think you want the a:active CSS psuedo-selector.
You don't need javascript to do this. Some CSS rules are enough.
Depending on which behaviour you need you could use one or all of this HTML pseudo-selectors (:link, :visited, :hover, :active).
The link selector specifies the behavior of the link when It's not clicked nor activated for any reason, in other words in its normal state.
The :active pseudo-class adds a style to an element that is activated.
If you need to be more specific and for example want to highlight what you mouseover (in other word only when the link is under your mouse) put this in the head section of your HTML:
<style type="text/css" media="screen">
a:hover { background: #fbdbe8; color: #F55B99;}
</style>
If you want to highlight what you already visited vs what not put this in the head section of your HTML:
<style type="text/css" media="screen">
a:visited { background: #fbdbe8; color: #F55B99;}
</style>
Then every clicked link would be highlighted when you come back to the page.
You can, of course add the style rules I said in an external .css file instead of having them in the head.
Hmm:
<a href="#" id='photos'
onclick="var photos=document.getElementById('photos');photos.style.background='chartreuse';false;">
Photos</a>
The easiest way would be to use jquery
You would have somthing like:
$('.menuItem').click(function() {
$('.current').removeClass("curret"); // To remove the highlight from the previous selection
$(this).addClass("current")
});
Then in your css you would declare current with the styles you want. One advantage of this vs the css pseudo selector is that you can do something like $(this).parent() to access the parent element of the link, in case your menu is a ul.
Related
I have an anchor tag in which I removed the href attribute through JavaScript.
I had also used setAttribute to add style="cursor:default;"
But still the hand pointer is being displayed on hovering over the text.
What is that I am doing wrong here.
HTML
<li>
<a class="menu-item" href="www.google.com" >
<span>Link Text</span>
</a>
</li>
JS
window.onload=function removeLink()
{
menuItem.removeAttribute("href");
menuItem.setAttribute("style","cursor:default;");
}
After page load html becomes like this
<li>
<a class="menu-item" style="cursor:default;" >
<span>Link Text</span>
</a>
</li>
When the page is rendered these changes are visible in the code, But still i get the Hand pointer on hovering over the link
I have already tried using menuItem.style.cursor="default";
And also tried to set it through css
CSS
.class a:hover{
cursor:default;}
Read here: Mouse Coursor 1, Mouse Coursor 2
Try this:
document.getElementById("anchor").style.cursor="default";
Google
You can make a link unclickable like this, using the simple css. This works in mobile devices and desktop also.
a {
pointer-events: none;
cursor: default;
}
Unclickable link
Using setAttribute is unreliable if you want the change to be reflected in the document. Use Element.style instead:
menuItem.style.cursor='default';
I have some colors that when clicked I want to change the value of some css.
I want to change the color css value of this css :
article .teleprompter p
{
padding-bottom: 15px;
margin-bottom: 15px;
color:white;
}
The html:
<div class="swatch concrete" onClick="javascript:changeBTC('#95a5a6')"></div>
This is the java script I use for a similar function . This one changes the background color:
<script>
function changeBGC(color)
{
document.getElementById("teleprompter").style.backgroundColor = color;
}
</script>
Would it make a difference in JavaScript code if the css was in a separate style sheet?
don't add javascript: in onclick code - the borwser already knows it is javascript! You only need to add javascript: to an <a href> to tell the browser it is script rather than a URL:
So you just need this:
<div class="swatch concrete" onClick="changeBTC('#95a5a6')"></div>
or you could do this if you wanted to use a link:
<a class="swatch concrete" href="javascript:changeBTC('#95a5a6')"></a>
Your function is changeBGC, but you're executing changeBTC. Replace changeBTC('#95a5a6') with changeBGC('#95a5a6')
It will not make a difference if the css was in a seperate file as long as you are refering the css file in your html page.
Moreover in css you are refering the object as class in css (.teleprompter) and in javascript you are refering the object with id (getElementById). So either use id in both the places or class in both the places
I've been reading around and people recommending only CSS to change the current page navbar link background color but I don't get how that's possible since CSS is static and I won't be able to add/remove the .currentlink class on the links? So right now I'm using JS / jquery to try to add / remove class based on click, but the site refreshes and nothing is saved when I click, so that the class that I added/removed doesn't do anything. May someone guide me the right direction? Example: I click on the last link of the HTML I gave you, but it would just go to that site and since everything refreshes to a new site, the background doesn't change.
HTML
<nav class="clearfix">
home
about us
tour
flickr search
<div class="rightnav">
Sign Up
Log In
</div>
</nav>
CSS
.greybackground {
background: #E6E6E6;
}
JS
$('nav a').on('click', function(){
$('nav a').removeClass('greybackground');
$(this).addClass('greybackground');
});
If you are creating multi page website and want to change link color on each page, simply create a class with specific css properties and add this class to respective navbar link on each page. Make sure that on any page, class must be added to only respective page link.
Any if you are looking solution for single page website following code will work just fine
Here is html css code for simple navigation bar
<h1>navbar</h1>
<li>Home</li>
<li>Products</li>
<li>About us</li>
<li>Contact</li>
<button>Log in</button>
</ul>
a{
background-color:black;
padding:10px;
text-decoration:none;
color:white;
}
li{
margin:30px;
display:inline;
}
ul{
list-style-type: none;
}
.transform{
background-color:red;
}
button{
background-color:green;
padding:10px;
color:white;
}
This is javascript to change bg color of active link
$("a.link").click(function(){
$("a.link").css("background-color", "black");
$(this).css("background-color", "red");
});
Simply add class '.link' for every navbar link and when user clicks on any navbar link css property ad applied to that link and all other links will change their bg color to none. I hope it helps
https://codepen.io/pranjalkoshti/pen/GMarvj
The easiest way to achieve this is identify an element that
Is present on every page
You can add markup to
For example, a div for your overall content.
If you add the following to the div :
<div id="content" data-currentpage="about">
This will identify the page uniquely.
and for each menu item add a class that matches:
<li>Home</li>
<li>Products</li>
<li>About us</li>
<li>Contact</li>
So, on page ready ( jQuery(document).ready(function(){...) run the following code:
// -- Find the pages 'data' tag --
var currentPage = jQuery('#content').data('currentPage');
// -- Add a dot to turn it into a class identifier --
currentPage = '.' + currentPage;
// -- Add a background class to to the menu item with that class --
jQuery(currentPage).addClass('greybackground');
This will 'match' each page (via the data-currentpage tag) to the corresponding menu item and add your background class to that menu item.
Solution in vanilla JS (HTML, CSS).
Navbar items need to be in class .navlinks
Add styling under the class current-link.
<html>
<nav>
<ul>
<li class="navlinks"></li>
<li class="navlinks"></li>
</ul>
</nav>
</html>
<style>
.current-link {
background-color: red;
}
</style>
<script>
let links = document.getElementsByClassName("navlinks");
for(let i = 0;i < links.length;i++){
if (links[i].href.replace(/\/$/, '') == ocument.URL.replace(/\/$/, '')){
links[i].classList.add("current-link");
}
}
</script>
Can anyone think of a reason why a click event would work on an a tag, but not on a span? I am making a rich text editor and have a bold button that when clicked is supposed to make the text bold. It only works when I use an anchor element. I tried using a span and nothing happens. The html is the only thing that I am changing so I don't think it is a JavaScript problem.
$(document).ready(function(){
//creates the toolbar~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
$('#rte').focus()
var tools = [];
tools.push('underline');
tools.push('italic');
tools.push('bold');
tools.push('justifyCenter');
tools.push('justifyLeft');
tools.push('justifyRight');
var simple_toolbar = function(){
//iterates through each tool and adds its functionality to the editor
$.each(tools, function(index,value){
$('#'+value).click(function(event){
document.execCommand( value, false, null);
$('#rte').focus();
return false;
});
//end of click function
});
//end of each iterator
};
//end of simple toolbar function
//invokes the simple toolbar.
simple_toolbar();
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
});
//end of the DOM loader
<!doctype html>
<html>
<head>
<title>An HTML5 page</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="wrapper">
<div id="controls">
<!-- The only button working here is the bold because it is an <a> -->
<span id="italic"></span>
<span id="underline"></span>
<span id="justifyLeft"></span>
<span id="justifyCenter"></span>
<span id="justifyRight"></span>
</div><!--end of controlls div-->
<div contenteditable="true" id="rte"></div>
<textarea id="my_form" rows="8" cols="58" ></textarea>
</div><!--end of the wrapper div-->
</body>
</html>
#bold{
display:block;
width:30px;
height:30px;
background-image:url('http://dl.dropbox.com/u/25006518/bold.png');
}
#italic{
display:block;
width:30px;
height:30px;
background-image:url('http://dl.dropbox.com/u/25006518/italic.png');
}
#underline{
display:block;
width:30px;
height:30px;
background-image:url('http://dl.dropbox.com/u/25006518/underline.png');
}
#justifyCenter{
display:block;
width:30px;
height:30px;
background-image:url('http://dl.dropbox.com/u/25006518/underline.png');
}
#justifyRight{
display:block;
width:30px;
height:30px;
background-image:url('http://dl.dropbox.com/u/25006518/underline.png');
}
#justifyRight{
display:block;
width:30px;
height:30px;
background-image:url('http://dl.dropbox.com/u/25006518/underline.png');
}
if you update your jQuery to v1.7.1 you can use the .on() function. This will then allow you to bind the click method to the span using an id.
$(document).ready(function(){
$("#yourContainer").on("click", "#yourSpanID", function(){
// The code to make everything bold
});
});
Any DOM element can listen for a "click" event, and in fact the code as you presented it is working in that sense. If you precede your call to document.execCommand with an alert statement you'll find that the alert occurs anytime you click on any of the buttons and not just the "bold" button.
You are using your span tags the wrong way; span tags are for coloring and styling one word in a sentence.
The best thing to do is use the <ul> tag; you do have to end it. Like this:
<html>
<body>
<ul>
<li>"put your text here"</li>
<li>"put your text here"</li>
<li>"put your text here"</li>
</ul>
</body>
</html>
Now assuming you have a style sheet you can style the or user list in CSS
like this:
html{ }
body{ }
ul{ }
ul li{ float:left; this will define how the tags are displayed }
ul li a{ "from here down define how links act." }
ul li a:visited{ color:put a color here like light blue or something;}
ul li a:hover{ color:same with this; }
ul li a:active{color:same with this; }
Also check your hierarchy it will help you in the long run. Hope I helped.
I think the variable 'value' gets destroyed when the iteration is done. You could make a global function that takes care of the actual click handle and assign this function to the buttons in an iteration.
You could grab the ID of the button clicked in the global function and use that to parse as an argument in the execCommand method.
So it's a scope issue, to be clear.
Try setting the spans to display: inline-block.
This is not the best solution, but the only reason I wanted to use spans is so that the page would not jump to the top when you clicked an anchor tag with an href="#". I decided to just use the anchor tags, but instead of using href="#" I am using href="#bold". apparently when you use an id selector as an href attribute the page will jump to the spot on the page where that element is. Still not sure why it won't work with other elements. I tried just getting rid of the iterator and writing out a separate click event for each button, but it still only worked with an anchor tag.
Still trying to research the 'onclick' event more deeply, but one of two things present:
1) onclick is reserved for 'a' and 'input' tags, only (will set out to verify this); or,
2) a more complex method is required on the event handler. See, W3C: http://www.w3.org/TR/html5/webappapis.html#event-handler-content-attributes
Side Note: Having settled on 'a', one could reduce the style sheet to just background URL on the 'id', and add a descendent selector on the controls:
#controls a {
display: block;
width: 30px;
height: 30px;
}
When you attach a mousedown event to the span, which you cancel, then span also works. Don't know which (if at all) spec defines different behavior on spans and anchors, but it works now.
See the jsFiddle. Changed the following part:
$('#'+value).click(function(event){
document.execCommand( value, false, null);
$('#rte').focus();
return false;
}).mousedown(function(e){
e.preventDefault();
});
Instead of click event you should use either live or on
This will bind the click event to all elements even though they are dynamically created.
First of all, use the Doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
and then, for the CSS of a span, use:
span{
display: block;
display: inline-block;
}
This site is overriding my CSS with its own and I cannot get around it! It has style.css with "text-align: center" in the body.
I have <div id="mydiv"> appended to the body and it's normally got "text-align: left". There are <ul>s and <li>s underneath #mydiv and they are inheriting the body's 'center' for some reason. I tried this and it's still not working.
$('#mydiv').children().css('text-align', 'auto');
How the heck do I reclaim my CSS!?
#Grillz, the HTML looks like this:
<div id="mydiv">
<ul class="container">
<li rel="folder" class="category">category1
<ul><li rel="file" class="subcategory">subcategory1</li></ul>
<ul><li rel="file" class="subcategory">subcategory2</li></ul>
</li>
<li rel="folder" class="category">category2
<ul><li rel="file" class="subcategory">subcategory3</li></ul>
<ul><li rel="file" class="subcategory">subcategory4</li></ul>
</li>
</ul>
If you want to do it via jQuery, your .children() is only selecting the <ul>, not the <li>... You need to do something like this:
$('#mydiv').children().children().each(function() {
$(this).css('text-align', 'left');
});
Firstly, its drilling down two levels, down to the <li>. Secondly its using the .each() function to apply the css styling to each child...
EDIT: after seeing your html above, below is probably more appropriate:
$('#mydiv').find("li").each(function() {
$(this).css('text-align', 'left');
});
This uses the .find() function to find every <li> element inside #myDiv.
Working jsFiddle (with color instead of text-align) here: http://jsfiddle.net/Damien_at_SF/Vabvu/
Hope that helps :)
All you need is a more specific css rule. Something like this will set text alignment to left for all the children of #mydiv.
body #mydiv * {
text-align: left;
}
Try without children() function
$(document).ready(function(){
$('body').css('text-align', 'left !important');
});
and I'm guessing you trued to insert <UL/> and <LI/> in your example. you need to define them as code for them to show up