I've create a link on number 1, which has it's own width and height, so it covers all A,B,D,E letters (all li's are linkable).
Sample image: http://i.imgur.com/anuoGnJ.jpg
What i cannot do is to put a background hover effect on A,B,D,E letters, because the link on number 1 covers with it's height and width all of them.
Is there a way i can achieve this? I must stay limited to use only one link.
Thanks a lot in advance.
My code is:
HTML:
<span class="one">1</span> <span class="two">2</span>
<ul>
<li>
<span class="letter">A</span> <span class="letter">B</span>
</li>
<li>
<span class="letter">D</span> <span class="letter">E</span>
</li>
</ul>
CSS:
.one {float:left;}
.one a {float:left;position:relative;width:100px;height:60px;display:block;}
.letter {float:left;color:#000;}
.letter:hover {background:#ff0000;}
Ok.That's it.
http://jsfiddle.net/HECKM/3/
jQuery will get the .ONE href attribute value and apply to LI inside UL.
$(document).ready(function(){
var url = $('.one a').attr('href');
$('ul.test li').click(function(){
window.location = url;
});
});
Just prepare for your use.
Cya.
Related
I'm sure this is really freaking simple, but I must be overlooking some aspect. I have a static image that is displayed on a webpage when it is loaded. I have an unordered list with a few list items. I would like to change the displayed webpage image when the mouse hovers over one/each list item. I tried using the onmouseover HTML event, but could not figure that out and I would like to use CSS anyways so I tried using the :hover CSS selector but I can't seem to figure it out
<div class="responsive_right_side_block"><img class="responsive_image" height="214" src="images/axis.gif" width="145"></div>
<p class="p_not_1st">The three commonly referred to axis of rotation are:
<ul class="ul_first">
<li id="frontal">Frontal axis</li>
<li>Sagittal axis</li>
<li>Vertical axis</li>
</ul>
</p>
Here is the CSS block that I currently have
<style>
#frontal:hover .responsive_image {
display: "images/sagittal.gif";
}
</style>
since ".responsive image" is not apart of your unordered list, you don't need to mention it in CSS. and instead of using the display value, use background. For your CSS code I would just type.
<style>
#frontal:hover {
background: url("images/sagittal.gif") no-repeat;
}
</style>
You can use javascript to do what you want as follow :
<script>
window.onload = WinLoad;
function WinLoad() {
document.getElementById("frontal").addEventListener("mouseover", changeImage);
function changeImage() {
document.getElementById("responsive_image").src = "images/sagittal.gif";
}
}
</script>
Well .. your style says that
"on the hover of the li item ... select the image inside this item".
That's because #frontal:hover .responsive_image is Descendant combinator. I suggest you to have a look on those topics CSS selectors from MDN & CSS Selector Reference from W3schools.
In your HTML structure, I don't think there is a way to do what you want using CSS only because till now there is no supported selectors for parents and grand parents in CSS.
Second thing I want to add is: there's no way to use the display property to change the image itself. Because display property specifies the display behavior of an element itself ... so, more again I suggest you to have a look on this topic CSS display Property.
Now, For your code, I've 2 suggestions:
(1): By make changes to HTML / CSS code
.responsive_right_side_block {
width: 145px;
height: 214px;
background-image: url("https://via.placeholder.com/300/0000FF/808080");
background-repeat: no-repeat;
background-size: contain;
}
#frontal:hover ~ .responsive_right_side_block {
background-image: url("https://via.placeholder.com/300/000000/FFFFFF");
}
<p class="p_not_1st">The three commonly referred to axis of rotation are:
<ul class="ul_first">
<li id="frontal">Frontal axis</li>
<li>Sagittal axis</li>
<li>Vertical axis</li>
<div class="responsive_right_side_block"></div>
</ul>
</p>
And then, you can use css to style it as you want.
(2): Using JavaScript mouseover
// select the image using it's class --> it's html collection so we need to specify the first index
let img = document.getElementsByClassName('responsive_image')[0];
// on mouse over of the li element --> the image src will change
document.getElementById('frontal').onmouseover = function () {
img.setAttribute('src', 'https://via.placeholder.com/300/000000/FFFFFF');
}
// on mouse out of the li element --> the image src will return back to what is in html document
document.getElementById('frontal').onmouseout = function () {
img.setAttribute('src', 'https://via.placeholder.com/300/0000FF/808080');
}
<div class="responsive_right_side_block"><img class="responsive_image" height="214"
src="https://via.placeholder.com/300/0000FF/808080" width="145"></div>
<p class="p_not_1st">The three commonly referred to axis of rotation are:
<ul class="ul_first">
<li id="frontal">Frontal axis</li>
<li>Sagittal axis</li>
<li>Vertical axis</li>
</ul>
</p>
I am currently trying to get a height of an element which I click on in a sidebar I am working on in order to show sub menus. I have currently got this code...
<li (click)="newsExpanded = !newsExpanded; getMargin($event)" style="margin-bottom: 50px;">
<a>
<i class="fa fa-newspaper"></i>
<span>News</span>
<i class="fa fa-angle-left sidebar__sub_menu_icon"></i>
<ul class="sidebar__sub_menu" [class.expanded]="newsExpanded">
<li>
<a>Create New Post</a>
</li>
<li>
<a>View All Posts</a>
</li>
</ul>
</a>
</li>
So when the news is expanded it adds the class of expanded which just displays block on the sub menu, that is working fine but I want to add a margin bottom to the inner ul on the click of the outer li. This would have to be the height of the inner ul. You can see that I've done a class of getMargin however, this doesn't do anything currently and it's what I'm trying to figure out.
Any help would be appreciated and if their is a better way to this then please tell me, I am new to Angular so any feedback I am grateful for.
To get the height of the clicked element using the $event you should do the following:
onClick($event): void {
let clientHeight = $event.target.clientHeight; //Height + padding without borders
let offsetHeight = $event.target.offsetHeight; //Height + padding with borders
//if you need the element plus margin-top/bottom
let compStyle = window.getComputedStyle($event.target)
clientHeight += parseInt(compStyle.getPropertyValue('margin-top'));
clientHeight += parseInt(compStyle.getPropertyValue('margin-bottom'));
}
DEMO: https://stackblitz.com/edit/angular-1apnhb
Here you are MDN docs of clientHeight and offsetHeight. Also you can take a look of scrollHeight.
I have a requirement where in the user can create new list items inspite of having default list items. So The user will be allowed to attach two icon images for the list items to show on hover of list item and on non hover of list item. So, now I want to change the background image to the given URL's in the property of the object that is iterated in ng-repeat. I have been trying using jquery to get the property and its value but couldn't replace with the hover_image URL from the object on hover.
<ul id="user_events_list" class="listing_categories" ng-repeat="event in privateEventItems">
<li class="eventListItem" style="background-image :url('{{event.eventIconUrl}}'); background-position:10px; background-repeat : no-repeat; padding-left:30px;">{{event.eventName}}
</li>
</ul>
I want to change the {{event.eventIconUrl}} to {{event.eventHoverIconUrl}} on mouse hover on the list item. Can anyone help me out with this?
You may use ng-mouseenter and ng-mouseleave events.
<ul id="user_events_list" class="listing_categories" ng-repeat="event in privateEventItems">
<li class="eventListItem" ng-init="anyChosenVariableNameForUrls=event.eventIconUrl"
style="background-image :url('{{anyChosenVariableNameForUrls}}'); background-position:10px; background-repeat : no-repeat; padding-left:30px;"
ng-mouseenter="anyChosenVariableNameForUrls=event.eventHoverIconUrl"
ng-mouseleave="anyChosenVariableNameForUrls=event.eventIconUrl"
>{{event.eventName}}
</li>
</ul>
Try this:
$('#name img').hover(function() {
$(this).attr('src', 'https://developers.google.com/maps/images/lhimages/api/icon_placesapi.svg');
}, function() {
$(this).attr('src', 'http://icons.iconarchive.com/icons/fasticon/web-2/256/Google-icon.png');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="name">
<img title="Hello" src="http://icons.iconarchive.com/icons/fasticon/web-2/256/Google-icon.png" />
</a>
To do it in angular way see this Fiddle
use ng-mouseover and ng-mouseleave directives to detect mouse hover and leave.
I've got a contenteditable span placed inside an <a> tag. I'd like to be able to edit the text inside the span so it is important to:
place the cursor on mouseclick somewhere inside the span
select part of the text inside the span using the mouse
Both does not work in Firefox as soon as there is a href attribute in the hyperlink (which is also needed in my case). There is no problem without this attribute and there are no problems in Chrome.
Please try my example on JSFiddle.
<ul>
<li>
<a href="#">
<span contenteditable="true">PlacingCursorOrTextSelectionInFirefoxImpossible</span>
</a>
</li>
<li>
<a>
<span contenteditable="true">noProblemsHereSoFar</span>
</a>
</li>
</ul>
What you can do to improve the click behaviour is to prevent its propagation like this:
<a href="#">
<span contenteditable="true" onclick="event.stopPropagation();">
PlacingCursorOrTextSelectionInFirefoxImpossible
</span>
</a>
Unfortunately, this only allows to put the cursor inside the span, but it is somewhy put to its beginning, not where one have clicked.
To enable selecting, you need to prevent the dragging behaviour, but it is to be changed for the a element:
<a href="#" draggable="false">
<span contenteditable="true" onclick="event.stopPropagation();">
PlacingCursorOrTextSelectionInFirefoxImpossible
</span>
</a>
But wow, draggable="false" actually fixed the "cursor to beginning" bug! Here's the working example (tested in FF 47): https://jsfiddle.net/8v1ebkfd/4/
This works for me:
prevent click-default inside contenteditables
and for firefox, remove and add href-attribute to prevent placing the cursor at the start of the contenteditable-element
http://jsfiddle.net/uy4q0zcm/1/
// if contenteditable inside a link
document.addEventListener('click', e=>{
if (e.button !== 0) return;
if (e.target.isContentEditable) {
e.preventDefault();
}
if (e.explicitOriginalTarget && e.explicitOriginalTarget.isContentEditable) { // keyboard click firefox
e.preventDefault();
}
});
// prevent (Firefox) placing cursor incorrectly
document.addEventListener('mousedown', e=>{
if (!e.target.isContentEditable) return;
var link = e.target.closest('a');
if (link) {
const href = link.getAttribute('href')
link.removeAttribute('href');
setTimeout(()=>link.setAttribute('href', href))
}
});
I have a structure like this:
<ul id="container">
<li>
<div tabindex="1" class="selectThis">
<div>
<div>
<span class="textToEdit" contenteditable="true"></span>
</div>
</div>
</div>
</li>
<ul>
Where it works to bind an event to the contenteditable span:
$("#container").on("keydown", ".textToEdit", function (e) {
alert("yes");
});
But the div itself doesn't react:
$("#container").on("keydown", ".selectThis", function () {
alert("no");
});
Using .on because the whole thing is dynamically generated, besides the container. I'm using jquery UI's sortable on said container. What is wrong with the binding? I've tried giving the ul and li a tabindex too, but the div still won't give me an alert.
The problem was that the div wasn't being focused after sortable is called on the ul--manually calling $(".selectThis").focus() makes it work. Thanks to Pilgerstorfer Franz for making me aware of this!