Been made aware you cant swap classes unless its a sibling. so instead of putting the class in a new div im trying to put it into the same list but give it a class to hide, then be visible when another li is hovered.
http://jsfiddle.net/e79g4p1p/13/
<div class="bodyfooter_block bbshadowb">
<p class="typotitle_sml"><?php echo $var_furtherinfotitle; ?></p>
<p class="typosubtitle_sml"><?php echo $var_furtherinfoheading; ?></p>
<p class="typotext" style="padding-top:16px;">
<ul class="blocklist">
<li>text hidden</li>
<li>text</li>
<li>yugiugugu</li>
<li>ugiugguiug</li>
<li>ygguiguig</li>
<li>uihoihoihoih</li>
<li>uhgiuhiuhuh</li>
<p>po</p>
<li class="bodyfooter_text1" id="bodyfooter_text1">hidden</li>
</ul>
</p>
</div>
css
.hover_text1 {
}
.bodyfooter_text1 {
list-style-type: none;
visibility: hidden;
}
.hover_text1:hover > #bodyfooter_text1 {
list-style-type: none;
width:260px;
height:102px;
background: #222222;
color: #CCCCCC;
padding:12px;
padding-top:6px;
border-radius: 6px;
visibility: visible;
}
Tried with js but doesnt work:
$("#hover_text1").hover(function() {
$(".bodyfooter_text1").addClass("bodyfooter_text1_hover");
});
http://jsfiddle.net/e79g4p1p/23/
I strongly suggest you go over the basics of CSS once again.
The problem you face can be overcome using pure CSS - we need a selector called the General Sibling Combinator:
CSS
.hover_text1:hover ~ #bodyfooter_text1 {
display: block;
}
This, however, requires you to restructure your markup by a marginal amount, so the "preceded by element" rule works correctly - the selector we use requires both the preceding and the targeted element to share the same parent:
HTML
<ul class="blocklist">
<li class="hover_text1">text hidden</li>
<li>text</li>
<!-- ... -->
<li class="bodyfooter_text1" id="bodyfooter_text1">hidden</li>
</ul>
Working example on JSFiddle.
The fiddle I've linked is a very simplified version of your code, modified only to highlight the selectors working and nothing else.
Related
I'm trying to get the closest DIV inside a li item, to apply a new class:
<ul id="menu">
<li class="here">
<img src="image">
<div class="border selected"></div>
</li>
<li class="here">
<img src="image">
<div class="border"></div>
</li>
.....
I wanted to be able to click inside the li tag and apply the class 'selected' to the div that already has class border.
I was trying to use .closest and .find but I couldn't get the good result.
Is there any recommendation? Thanks!
EDIT: https://jsfiddle.net/a8pm1aj7/
Please look at this jsfiddle.
The relevant code is:
$("#menu li").on("click", function(){
$("#menu li div.border").removeClass("selected");
$(this).find("div.border").addClass("selected");
});
This code removes the .selected class from all previously selected elements.
If I understand your question correctly, this should work for you.
.children() seems to work fine.... You may have more of an issue with CSS hierarchy. Make certain the selected class is defined after the border class in the CSS.
$(document).ready(function() {
$( '.here' ).on('click', function() {
var theDiv = $(this).children('.border');
$('.border').not(theDiv).removeClass('selected');
$( theDiv ).toggleClass('selected');
});
});
li { display: block; margin: 10px; width: 80%; }
.border { height: 20px; background: #eee; }
.selected { background: #fee; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
<li class="here">
Text/image
<div class="border"></div>
</li>
<li class="here">
Text/image
<div class="border"></div>
</li>
</ul>
Updated your fiddle and fixed issues with it.
- You had the div positioned absolute and set at 100% width and 100% height. S0 basically, it was the size of the window. Actually linked the jQuery library to the fiddle.
I have a program that automatically generates a tree. It looks like
<li class="linamesystem">Alternator</li>
<ul class="boxfornamegroupsparts">
<li class="linamegroup">Alternator2</li>
<li class="linamegroup">Krmilnik alternatorja (regler)</li>
</ul>
Alternator -> Alternator2
->Krmilnik
What would be the css code for hovering Alternator parent and showing linamegroup childs?
Or should I do it with javascript?
This could be CSS rules to use:
.boxfornamegroupsparts {
display: none;
}
.linamesystem:hover + .boxfornamegroupsparts {
display: block;
}
EDIT: as pointed by Paulie_D, this is invalid HTML markup, ul cannot/shouldn't be direct child of other ul element.
Probably this is just a piece of code that you have. The real one should be something like this:
<ul>
<li></li>
<li>
<ul>
<li></li>
</ul>
</li>
</ul>
Anyway to achieve what you wanna do, just use this css:
.linamesystem:hover .boxfornamegroupsparts {
display:block;
}
I have created a similar jsfiddle for you, illustrating a horizontal menu with submenus. The trick is to initially hide linamegroup and display it when linamesystem is hovered.
.linamegroup { display: none;}
.linamesystem:hover .linamegroup { display: block; }
I'm currently trying to alternate the colors of my bullet notes using some images.
However, I encountered several problems:
If I press backspace to delete one of the bullets, there's a blue line from contenteditable that appears - try backspacing everything in the fiddle link I gave and you'll see what I mean. There's probably an easy fix for this by making the border 0px, but I'm not sure of the correct syntax
The main problem is that I want it written in a way so that when the user presses enter, the next color bullet, or image in this case, will show up. I don't want it to show up all at once, but I'm not sure how to implement it. I'm assuming either CSS classes or Javascript is involved - I'm kind of new to these languages.
This is a snippet from the whole code that needs fixing:
<body>
<div contenteditable>
<div id = "notes"
<ul>
<li style = "list-style-image: url('http://i61.tinypic.com/2nb9jxs.png')">Click here to edit</li>
<li style = "list-style-image: url('http://i58.tinypic.com/2m5xb1f.png')"> Click here </li>
<li style = "list-style-image: url('http://i60.tinypic.com/2qb5342.png')"> Click here </li>
</ul>
<style>
#notes {
position: absolute;
</style>
</div>
</div
</body
And here's the fiddle.js link: http://jsfiddle.net/95Wvv/
It would be nice if you gave a solution in fiddle as well. Thank you!
edited to fit OP requirements
Move your contenteditable on <ul>
Add outline: 0 to your <li>
HTML :
<div>
<div id="notes">
<ul contenteditable>
<li style="list-style-image: url('http://i61.tinypic.com/2nb9jxs.png')">Click here to edit</li>
<li style="list-style-image: url('http://i58.tinypic.com/2m5xb1f.png')"> Click here </li>
<li style="list-style-image: url('http://i60.tinypic.com/2qb5342.png')"> Click here </li>
</ul>
</div>
</div>
CSS :
#notes {
position: absolute;
}
[contenteditable] {
outline: none;
}
Updated JSFiddle
EDIT
To alternate colors, use this code :
HTML
<div>
<div id="notes">
<ul contenteditable>
<li>Click here to edit</li>
<li>Click here </li>
<li>Click here </li>
</ul>
</div>
</div>
CSS
#notes {
position: absolute;
}
[contenteditable] {
outline: none;
}
li {
list-style-image: url('http://i61.tinypic.com/2nb9jxs.png');
}
li:nth-child(3n+1) {
list-style-image: url('http://i61.tinypic.com/2m5xb1f.png');
}
li:nth-child(3n+2) {
list-style-image: url('http://i61.tinypic.com/2qb5342.png');
}
Another JSFiddle !
To fix part one, add outline: 0; to the Element that has contenteditable on it (http://jsfiddle.net/95Wvv/)
I got this show all thing succesfully done, but now when I click Show all and then click the text or image that opens, it puts the text below to right side of the screen.
JSFiddle
Gyazo
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(function () {
$('.toggle-all').click(function() {
$('.printer').each(function () {
$(this).siblings('.gwinfo').slideToggle('slow');
});
});
});
</script>
<style>
.gwinfo {
display: none;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
.left{
display: block;
float:left;
width:10%;
}
</style>
General: Rest of code in JSFiddle, feel free to fix some of my code, I would appreciate that a lot. Also if you manage to fix my code, please post a JSFiddle link with fixed code. Thank you a ton, guys!
Instead of using the break tag to clear your floats, use a div. I also fixed some tags that were not properly nested.
<div style="clear: both;"></div>
http://jsfiddle.net/z2tSd/5/
Guess the tags are mis-matched.. Can you change your HTML to the one as below:
<div class="gwshowhide">
<li><a class="printer">Money Printer</a>
<div class="gwinfo">Level Requirement: 1
<br>Price: $1000
<br>Production:
<br>
<img src="images/shop/Amber Money Printer.png">
</div>
</li>
</div>
The existing one's are like where <li> tags are mismatching:
<div class="left">
<div class="gwshowhide">
<li><a class="printer">Money Silo</a>
<div class="gwinfo">Level Requirement: 85
<br>Price: $10,000
<br>Production:
<br>
<img src="images/shop/Diamond Money Silo.png">
</div>
</div>
</li>
</div>
Not sure if this will fix your issue though.. but you can give a try..
Also make sure you are suppressing the bullet list items using the style below:
.gwshowhide {
list-style:none;
}
I need to make linkable an entire <li> or <tr> element, someone suggest me to use javascript, with an onclick action.
function doNav(url)
{
document.location.href = url;
}
This do the job, the problem is that, in this way is impossible for the user, understand what url is going to. How to realize my need (completly clickable elements) without changing browser behaviour?
You don't need javascript for this. Add this css
ul li a {
display: block;
padding: 10px 20px;//more or less, to suit your needs
text-decoration: none;
}
This will make the entire <li> containing an anchor clickable
<li class="block">Text</li>
That lets you see the target. And then:
.block{
display:block;
text-decoration:none; //just so it isn't underlined
}
in the CSS will take care of the "whole thing needs to be clickable" problem.
HTML
<ul class="menu">
<li class="anchors" title="click me I am a link" > link 1 </li>
<li class="anchors" title="click me I am a link" > link 1 </li>
<li class="anchors" title="click me I am a link" > link 1 </li>
<li class="anchors" title="click me I am a link" > link 1 </li>
</ul>
CSS:
ul li.anchors{
text-decoration:underline;
color:blue;
list-style-type:none;
display: inline-block;
margin:2px 4px;
padding: 2px 4px;
}
ul li.anchors:hover{
color:navy;
cursor:pointer;
}
better way may be like this: http://jsfiddle.net/iamanubhavsaini/Cv2FM/1/
here, use content property and data- attribute to tell user before hand as what they are going to click on.