head no background and color black ,on mouseover its color will be white and background black ,its working fine but
onmouse over on content i want to change the color of head?
how?
Is it possible only using css?
<ul id="meg">
<li>head
<div>
<h2>su head</h2>
<p>content</p>
<p>content</p>
</div>
</li>
<li>head
<div>
<h2>su head</h2>
<p>content</p>
<p>content</p>
</div>
</li>
</ul>
You can do it with JavaScript. Though I'm not entirely clear on what you wanted, I gave it a shot:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function stuff(){
var k = document.getElementsByTagName('li');
for (var i = 0; i < k.length; i++) {
var s = k[i];
s.firstChild.style.color = 'white';
s.firstChild.style.backgroundColor= 'black';
}
}
</script>
</head>
<body>
<ul id="meg">
<li>
head
<div>
<h2>su head</h2>
<p>content</p>
</div>
</li>
</ul>
</body>
</html>
this might work. i've knows css to be able to affect elemnts after the closing tag not before,so this is areverse of the "+" used to do that.
<style type="text/css">
#content:hover - #head { background-color: black; color: white; }
</style>
<ul id="meg">
<div id="head">
<li>head
</div>
<div id="content">
<h2>su head</h2>
<p>content</p>
<p>content</p>
</div>
</li>
</ul>
Have you tried #meg li a:hover { background-color:#000;color:#FFF; }
Related
I am trying to display additional content, but my code is not working. I cannot seem to find anything wrong in the code, help is greatly appreciated. Thank you.
<head>
<style>
#more { display: none; }
</style>
</head>
<body>
<p>Content</P>
<span id="more">
<p>Content</p>
</span><span id="more">
<span id="more">
<p>Content</p>
</span><span id="more">
<span id="more">
<p>Content</p>
</span><span id="more">
...
Load More
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function(){
$("#more").slice(0, 2).show();
$("#load").click(function(e){
e.preventDefault();
$("#more:hidden").slice(0, 2).show();
if($("#more:hidden").length == 0){
alert("No more");
}
});
});
</script>
</body>
</html>
Hints for your approach:
You have different mistakes in your code:
You have more than one id="more".
You try to use an opening <span> tag but you don't use the closing part </span>.
Here is a small working example similar to your code but it is not the best solution for your problem.
I changed html id to class to query more than one <span> element
$(function(){
var nextMore = 0;
$("#load").click(function(e){
e.preventDefault();
$(".more").slice(nextMore, nextMore + 1 ).show();
nextMore += 1;
if($(".more").length - nextMore == 0){
alert("No more");
}
});
});
.more { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<p>Content</p>
<span class="more">
<p>Content</p>
</span>
<span class="more">
<p>Content</p>
</span>
<span class="more">
<p>Content</p>
</span>
Load More
(More) appropriate Approach:
As mentioned by other commentators, I guess you try to do something like this to add/ append more html elements (e.g. buttons) to your html document:
$(document).ready(function(){
$("#btn").click(function(){
$("ol").append("<li>Content</li>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<ol>
<li>Content</li>
</ol>
<button id="btn">Append Content items</button>
I've taken this jquery snippet from a post made years ago, but i've been unable to adapt it for what I want, simply highlighting in some way the text in the navigation on the left hand side based on which div is within view, It's most likely something really stupid going wrong, but I would just like a little help in getting the answer. Apologies for the dispicable formatting, I'm new!
html:
<div class="navwrap">
<nav>
<ul>
<li>PotD </li>
<li>Description </li>
<li>Extra </li>
</ul>
</nav>
</div>
<div class="container" id="two">
<div class="container-2-content" id="PotD">
<h2> Aquilegia vulgaris </h2>
<h3> "common columbine" </h3>
</div>
</div>
<div class="container" id="three">
<div class="container-3-content" id="Description">
<h2> Description </h2>
</div>
</div>
<div class="container" id="four" >
<div class="container-4-content" id="Extra">
<h2> Extra </h2>
</div>
</div>
css:
li a:hover, li.a.active{
cursor:pointer;
font-size:30px;
font-weight: 600;
color: rgb(255, 253, 234);
border-top: 3px solid rgb(255, 253, 234);
border-bottom: 3px solid rgb(255, 253, 234);
}
jquery:
$(document).ready(function(){
var $sections = $('.container');
$(window).scroll(function(){
var currentScroll = $(this).scrollTop();
var $currentSection
$sections.each(function(){
var divPosition = $(this).offset().top;
if( divPosition - 1 < currentScroll ){
$currentSection = $(this);
}
var id = $currentSection.attr('id');
$('').removeClass('active');
$("[href=#"+id+"]").addClass('active');
})
});
});
It's possible you are looking for something called ScrollSpy. The bootstrap framework has it ready to go.
I'm new here, but I alreadyy searched a while for a solution not only on this site.
Ok, here's the problem:
I built a static page, with multiple sections. Each section can be shown up through an anchorlink in the navbar, which is static on the left side of the page. How can I achieve, that the link to the section, which is just shown on the screen, is active?
It should be pretty easy, if the sections would be in external html-files. But I can't find a way to make this happen in my case...
<div id="navbar">
<ul>
<li><h5>SERVICE </br> </br></h5></li>
<li><h5>LEISTUNGEN </br> </br></h5></li>
<li><h5>ÜBER UNS </br> </br></h5></li>
<li><h5>PARTNER </br> </br></h5></li>
<li><h5>KONTAKT </br></h5></li>
</ul>
I think of a JavaScript that changes the classes of the links onclick, but I can't get this to work...
Please help me, tell me what I should do!
Last but not least, please excuse my poor english and coding knowledge ;)
For further explanation of the page I want to create!
This is my Navigation Menu, which has the fixed position on the left!
<div id="navbar">
<ul>
<li><h5>SERVICE </br> </br></h5></li>
<li><h5>LEISTUNGEN </br> </br></h5></li>
<li><h5>ÜBER UNS </br> </br></h5></li>
<li><h5>PARTNER </br> </br></h5></li>
<li><h5>KONTAKT </br></h5></li>
</ul>
</div>
It continues with one big section, which's contents are 4 small sections. These sections look like this:
<div id="weiss">
<div id="1" class="content section" data-id="1">
<div class="page page-1">
<div class="topic">
<img class="mwlogo" src="media/logo.png"/>
</div>
<div class="text">
<h2>...</h2>
</div>
<div class="vorteile">
<div class="first">
<ol>
<li><p>...</li>
<li><p>...</p></li>
<li><p>...</p></li>
<li><p>...</p></li>
<li><p>...</p></li>
</ol>
</div>
<div class="last">
<ol>
<li><p>...</p></li>
<li><p>...</p></li>
<li><p>...</p></li>
<li><p>...</p></li>
<li><p>...</p></li>
<li><p>...</p></li>
<li><p>...</p></li>
</ol>
</div>
</div>
</div>
</div>
<div>
I linked to the activemenuitem in the index.html:
<script type="text/javascript" src="functions/js/activemenuitem.js"></script>
It looks like this:
function checkActiveSection ()
{
var fromTop = jQuery(window).scrollTop() ;
jquery('#weiss .section'.each(function() {
var sectionOffset = jQuery(this).offset() ;
if ( sectionOffset.top <= fromTop )
{
jQuery('#navbar li').removeClass('active') ;
jQuery('#navbar li[data-id="'+jQuery(this).data('id')+'"]').addClass('active') ;
}
}) ;
}
jQuery(window).scroll(checkActiveSection) ;
jQuery(document).ready(checkActiveSection) ;
jQuery('#navbar li a').click(function(e){
var idSectionGoto = jQuery(this).closest('li').data('id') ;
$('html, body').stop().animate({
scrollTop: jQuery('#weiss .section[data-id="'+idSectionGoto+'"]').offset().top
}, 300,function(){
checkActiveSection() ;
});
e.preventDefault() ;
}) ;
But the problem is still, that there seems to be no way for me, to get this to work! The script loads when loading the site, but no class is being added or removed from the menu classes. What do I have to do?!
Please help me!
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(e){
var topMargin = jQuery(window).scrollTop() ;
if(topMargin < 100)
{
$("#navbar li a").removeClass('active');
$("#navbar li a.chap1").addClass('active');
}
else if(topMargin > 100 && topMargin <200)
{
$("#navbar li a").removeClass('active');
$("#navbar li a.chap2").addClass('active');
} else
{
$("#navbar li a").removeClass('active');
$("#navbar li a.chap3").addClass('active');
}
});
});
</script>
<div id="navbar">
<ul>
<li><h5>SERVICE </br> </br></h5></li>
<li><h5>LEISTUNGEN </br> </br></h5></li>
<li><h5>ÜBER UNS </br> </br></h5></li>
</ul>
</div>
Here is a solution adapted from Change Active Menu Item on Page Scroll? to your case :
http://jsfiddle.net/sX5Kq/1/
It's much more simple even if it's not completly optimised.
<div id="navbar">
<ul>
<li><h5>SERVICE</h5></li>
<li><h5>LEISTUNGEN</h5></li>
<li><h5>ÜBER UNS</h5></li>
<li><h5>PARTNER</h5></li>
<li><h5>KONTAKT</h5></li>
</ul>
</div>
<div id="sections">
<div class="section" data-id="1">
<h2>Services</h2>
<p></p>
</div>
<div class="section" data-id="2">
<h2>LEISTUNGEN</h2>
<p></p>
</div>
<div class="section" data-id="3">
<h2>Section 3</h2>
<p></p>
</div>
<div class="section" data-id="4">
<h2>Section 4</h2>
<p></p>
</div>
<div class="section" data-id="5">
<h2>Section 5</h2>
<p></p>
</div>
</div>
CSS
body {
font-family: Helvetica, Arial;
}
#navbar {
position: fixed;
z-index: 1;
left: 0;
right: 0;
top: 0;
width:100px ;
}
#navbar li.active a {
color:red ;
font-weight:bold ;
}
#sections {
margin-left:110px ;
}
JS
function checkActiveSection()
{
var fromTop = jQuery(window).scrollTop() ;
jQuery('#sections .section').each(function(){
var sectionOffset = jQuery(this).offset() ;
if ( sectionOffset.top <= fromTop )
{
jQuery('#navbar li').removeClass('active') ;
jQuery('#navbar li[data-id="'+jQuery(this).data('id')+'"]').addClass('active') ;
}
}) ;
}
jQuery(window).scroll(checkActiveSection) ;
jQuery(document).ready(checkActiveSection) ;
jQuery('#navbar li a').click(function(e){
var idSectionGoto = jQuery(this).closest('li').data('id') ;
$('html, body').stop().animate({
scrollTop: jQuery('#sections .section[data-id="'+idSectionGoto+'"]').offset().top
}, 300,function(){
checkActiveSection() ;
});
e.preventDefault() ;
}) ;
Here i am trying to open and get the contents of one div to target div on-click on a href.
Here i have table where i have hrefs which has the link to div ids, and i have an target div which is empty.
when i click the href links, the linked div contents should open in the target div.
for ex:
for link fea1 i have linked id #m1, when i click the fea1, the #m1 contents should appear in target div.
How can i do this???
here is my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>
Example
</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<table border="0">
<tr>
<td>
<hr>
<a href="#m1">
fea1
</a>
<br>
<hr>
<a href="#m2">
fea2
</a>
<br>
<hr>
<a href="#m3">
fea3
</a>
<br>
<hr>
<a href="#m4">
fea4
</a>
<br>
<hr>
<a href="#m5">
fea5
</a>
<br>
<hr>
<a href="#m6">
fea6
</a>
<br>
<hr>
<a href="#m7">
fea7
</a>
<br>
<hr>
<a href="#m8">
fea8
</a>
<br>
<hr>
<a href="#m9">
fea9
</a>
<hr>
</td>
</tr>
</table>
<div class="target">
</div>
<div id="m1">
dasdasdasd
</div>
<div id="m2">
dadasdasdasd
</div>
<div id="m3">
sdasdasds
</div>
<div id="m4">
dasdasdsad
</div>
<div id="m5">
dasdasd
</div>
<div id="m6">
asdasdad
</div>
<div id="m7">
asdasda
</div>
<div id="m8">
dasdasd
</div>
<div id="m9">
dasdasdsgaswa
</div>
</body>
</html>
css:
a{
text-decoration:none;
color:black;
}
.target{
width:50%;
height:200px;
border:solid black 1px;
}
#m1, #m2, #m3, #m4, #m5, #m6, #m7, #m8, #m9{
display:none;
}
You can put all your #m1...#m9 divs into .target and display them based on fragment identifier (hash) using :target pseudo-class. It doesn't move the contents between divs, but I think the effect is close to what you wanted to achieve.
Fiddle
HTML
<div class="target">
<div id="m1">
dasdasdasd m1
</div>
<!-- etc... -->
<div id="m9">
dasdasdsgaswa m9
</div>
</div>
CSS
.target {
width:50%;
height:200px;
border:solid black 1px;
}
.target > div {
display:none;
}
.target > div:target{
display:block;
}
From what I know this will not be possible only with css. Heres a solution how you could make it work with jQuery which is a javascript Library. More about jquery here: http://jquery.com/
Here is a working example : http://jsfiddle.net/uyDbL/
$(document).ready(function(){
$('a').on('click',function(){
var aID = $(this).attr('href');
var elem = $(''+aID).html();
$('.target').html(elem);
});
});
Update 2018 (as this still gets upvoted) here is a plain javascript solution without jQuery
var target = document.querySelector('.target');
[...document.querySelectorAll('table a')].forEach(function(element){
element.addEventListener('click', function(){
target.innerHTML = document.querySelector(element.getAttribute('href')).innerHTML;
});
});
a{
text-decoration:none;
color:black;
}
.target{
width:50%;
height:200px;
border:solid black 1px;
}
#m1, #m2, #m3, #m4, #m5, #m6, #m7, #m8, #m9{
display:none;
}
<table border="0">
<tr>
<td>
<hr>
fea1<br><hr>
fea2<br><hr>
fea3<br><hr>
fea4<br><hr>
fea5<br><hr>
fea6<br><hr>
fea7<br><hr>
fea8<br><hr>
fea9
<hr>
</td>
</tr>
</table>
<div class="target">
</div>
<div id="m1">dasdasdasd</div>
<div id="m2">dadasdasdasd</div>
<div id="m3">sdasdasds</div>
<div id="m4">dasdasdsad</div>
<div id="m5">dasdasd</div>
<div id="m6">asdasdad</div>
<div id="m7">asdasda</div>
<div id="m8">dasdasd</div>
<div id="m9">dasdasdsgaswa</div>
Put for div same name as in href target.
ex: <div name="link"> and <a href="#link">
easy way to do that is like
Demo
havent tried but this might help
$(document).ready(function(){
r=0;s=-1;
$(a).click(function(){
v=$(this).html();
$(a).each(function(){
if($(this).html()==v)
return;
else ++r;
$(div).each(function(){
if(s==r)
$(div).appendTo($(".target"));
++S;
});
});
});
});
Try this code in jquery
$(document).ready(function(){
$("a").click(function(){
var id=$(this).attr('href');
var value=$(id).text();
$(".target").text(value);
});
});
if you use
angularjs
you have just to write the right css in order to frame you div
html code
<div
style="height:51px;width:111px;margin-left:203px;"
ng-click="nextDetail()">
</div>
JS Code(in your controller):
$scope.nextDetail = function()
{
....
}
I have the following HTML
<!DOCTYPE html>
<html>
<body>
<h1>My Great Web</h1>
<FONT SIZE = "5">
<ol>
<li> Foo. </li>
<li> Bar. </li>
<ol>
</FONT>
<br>
<hr style="width: 100%"/>
</body>
</html>
Which produce the following figure.
Notice that the horizontal line doesn't extend fully to the left. How can I do that?
You have to close your <ol>
<ol>
<li> Foo. </li>
<li> Bar. </li>
</ol>
The font tag is not supported in HTML5. Use CSS instead.
The font element is deprecated in HTML 4.01.
It might display poorly on some browsers
<html>
<body>
<h1>My Great Web</h1>
<div style="font-size:12px;">
<ol>
<li> Foo. </li>
<li> Bar. </li>
</ol>
</div>
<br>
<hr/>
</body>
</html>
Do this :
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0 ;
padding: 0;
font-size: 14px;
}
.container {
width: 80%;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<h1>My Great Web</h1>
<div class="list">
<ol>
<li> Foo. </li>
<li> Bar. </li>
<ol>
</div>
<br />
</div>
<hr />
</body>
</html>