Please view the code here.. JS Fiddle. There is a peculiar problem that a blue colored underscore is appearing right after the first image. Why is this happening? Note that just removing the href makes it disappear. Very peculiar problem. What should be done?
HTML:
<body>
<div id="top-bar">
<a target="_blank" href="https://twitter.com/x">
<img class="twitter" src="images/twitter.png">
</a>
<a target="_blank">
<img class="twitter" src="images/twitter.png">
</a>
<a target="_blank" href="https://www.facebook.com/x">
<img id="fb" src="images/fb.png"
onmouseover="this.src='images/fb-hover.png'"
onmouseout="this.src='images/fb.png'">
</a>
</div>
</body>
CSS:
#top-bar {
height: 50px;
min-height: 50px;
max-height: 50px;
background-color: #166330;
}
body {
margin: 0;
padding: 0;
background-image: url(images/bg.png);
background-size: 100%;
color: white;
}
.twitter {
margin-left: 30px;
margin-top: 10px;
margin-right: 10px;
min-height: 30px;
min-width: 30px;
max-height: 30px;
max-width: 30px;
}
#fb {
min-height: 30px;
min-width: 30px;
max-height: 30px;
max-width: 30px;
}
There are two ways.
1] Remove all the white spaces between <a> <img/> and </a> tags.
2] Add text-decoration:none; to the <a> elements.
That's a blank inside your a tag.
If you write it without blanks like this, no "underscore" appears. E.g. something like:
<a target="_blank" href="https://twitter.com/x"><img class="twitter"
src="images/twitter.png"></a>
So the "underscore" is actually a link with a blank text and the browser displays links with an underscore, even if the text is just a white-space.
simple.. just use this
a{
text-decoration:none;
}
user style="text-decoration:none" in tag A
<a style="text-decoration:none" href=....
Related
I have a two part question concerning CSS styling and JQuery functionality.
(most important): In my code below, when the user clicks the round profile image, hypothetically the "profiledrop" div should appear. If I replace the tag with plain text, the code works just fine. However, with an image instead of text as the link, the code no longer works.
(less important): What is causing the "notification-tab" div to be so large? It ends up coming out to almost 100px for each div, which is massive! I want to at least half this size. What part of the CSS code do I need to modify to accomplish this?
I've been typing this code for the last 10 hours, so I'm basically braindead at this point. I'm sure both answers are simple, but I'm just not seeing the solution. Thank you in advance for your help!
Codepin: https://codepen.io/dansbyt/pen/xxgayPa?editors=1010
HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://mrdansby.com/private/style.css">
<div class="dropdown-container">
<div class="profile"><a href="#" id='launch'><img src='https://mrdansby.com/resources/pics/1.png'></a></div>
<ul class="profiledrop">
<li class="notification-group nopic">
<div class="notification-tab">
<h4>Tasks</h4>
<span class="label">1</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<p class="message"><b>Mr. Teacher</b> is requesting you complete the assignment you need to do before the deadline on Monday.</p>
<span class="date">2m ago</span>
</li>
</ul>
</li>
<li class="notification-group">
<div class="notification-tab">
<h4>Behavior</h4>
<span class="label">4</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/4.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">5s ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/23.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">15m ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">5h ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/13.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">3d ago</span>
</li>
</ul>
</li>
<li class="notification-group">
<div class="notification-tab">
<h4>Homework</h4>
<span class="label">3/3</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
<span class="date">3d ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
<span class="date">3d ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
<span class="date">3d ago</span>
</li>
</ul>
</li>
</ul>
</div>
CSS:
/* Notification Infastructure */
.profiledrop {
position: absolute;
right: 15px; top: 65px;
display: none;
width: 350px; height: auto;
max-height: 600px;
padding: 0; margin: 0;
overflow-y: hidden;
background: #eee;
border-top: 4px solid #5B7042;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
-webkit-box-shadow: 2px 2px 10px -5px rgba(0,0,0,0.75);
box-shadow: 2px 2px 10px -5px rgba(0,0,0,0.75);}
.notification-group{
border-bottom: 1px solid #e3e3e3;
overflow: hidden;}
.notification-tab {
width: 100%;
display: inline-block;
border-bottom: 1px solid #e3e3e3;}
.notification-list{
height: 0px;
max-height: 250px;
padding: 0;
overflow-y: auto;
transition: height .5s;}
.notification-list-item{
display: block;
min-height: 60px;
overflow: hidden !important;
box-sizing: border-box !important;
padding: 15px 15px 15px 10px;
font-size: 16px;
border-bottom: 1px solid #e3e3e3}
.notification-list-item:nth-child(even) {background-color: #E3E3E3}
.notification-list-item img {
clip-path: circle();
float: left;
margin-right: 10px;
width: 60px; height: 60px;
object-fit: cover}
/* Misc Settings */
.message::not(.nopic) {margin-top: 0px; margin-left: 80px} /* Style for notification groups without image */
/* Notification text styling */
.label{
float: right;
padding: 0px 7px;
margin-top: 20px;
margin-right: 10px;
border: 1px solid #5B7042;
border-radius: 15px;}
h4 {margin-left: 10px}
h4, .label{display: inline-block;}
.message {margin-top: 0px}
.date {float: right; color: darkgray}
/* Active Section */
.active .notification-list {height: 250px;}
.active .notification-tab, .notification-tab:hover {background-color: #5B7042}
.active .label, .notification-tab:hover .label {border: 1px solid white}
.notification-tab:hover {color: white}
.active .label, .active h4 {color: white}
/* Responsive design */
#media only screen and (max-width : 514px) {
body {margin: 0px}
.profiledrop{
width: 100%;
margin: 0px;
left: 0;}
}
.profile{
position: absolute;
top: 0%; right: 15px;
width: 40px;
clip-path: circle();}
.profile img{float:right; max-width: 100%; max-height: 100%; display: block;}
JQUERY:
// Tab collapser //
$('.notification-tab').click(function(e){
if($(e.currentTarget).parent().hasClass('active')){
$('.notification-group').removeClass('active');
} else{
$('.notification-group').removeClass('active');
$(e.currentTarget).parent().toggleClass('active');
}
});
// Click outside collapser //
$(document).on('click', function(e) {
if (e.target.id != "launch") {
if ($(e.target).closest(".profiledrop").length === 0) {
$(".profiledrop").hide();
}
}
});
// Menu Launcher //
$("#launch").click(function() {
$(".profiledrop").show();
});
'launch' should be on the img element, such as:
<div class="profile">
<a href="#">
<img id='launch' src='https://mrdansby.com/resources/pics/1.png'>
</a>
</div>
I'll answer your second question first. The reason the notification tab is so large is that the .profiledrop class has a fixed width of 300px. Each notification group is inheriting the width of the parent, so those are also 300px. Each notification tab has a width of 100%, so its width becomes 100% of the nearest parent, which is the notification group, which is 300px, so that also becomes 300px.
To summarize this point, either change the width: 100% on the notification tab, or change the width: 300px on the profiledrop. I can't recommend which to do because I don't know what you want it to look like.
The simplest solution to your first question is to employ display: none. Take a look at the code snippet I've provided below and let me know if this is the behavior you're looking for.
const image = document.querySelector("#myimage");
const paragraph = document.querySelector("p");
// I attach an event listener to the image to wait for a click event
image.addEventListener("click", function() {
if (paragraph.style.display === 'none') {
// If the paragraph is currently hidden, I show it
paragraph.style.display = 'block';
} else {
// If the paragraph is currently shown, I hide it
paragraph.style.display = 'none';
}
})
<img id="myimage" src="https://via.placeholder.com/350x150">
<p>Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the
image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click
on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. </p>
I'm using Slide of bootstrap jquery and css, It runs normal and no problem happens.
this is my source:
<div id="photos" class="tabcontent">
<div id="ninja-slider">
<div>
<div class="slider-inner">
<ul>
<li><a class="ns-img" href="<%=request.getContextPath()%>/resources/images/car1.jpg"></a></li>
<li><a class="ns-img" href="<%=request.getContextPath()%>/resources/images/ban-xe-honda-civic.jpg"></a></li>
<li><a class="ns-img" href="<c:out value="${product.thumbnail3}"/>"></a></li>
<li><a class="ns-img" href="<c:out value="${product.thumbnail4}"/>"></a></li>
<li><a class="ns-img" href="<c:out value="${product.thumbnail5}"/>"></a></li>
</ul>
<div class="fs-icon" title="Expand/Close"></div>
</div>
</div>
</div>
this is my css:
#ninja-slider .ns-img {
background-color: rgba(0,0,0,0.3);
background-size: contain;
border-radius: 3px;
cursor: default;
display: block;
position: absolute;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center center;
padding-top: 67%;
}
#ninja-slider .slider-inner {
width: 727px;
margin: -2px auto;
font-size: 0px;
position: relative;
box-sizing: border-box;
}
When I check and run on firebug on browsers, it seem auto generated some line at tag:
<ul style="overflow: hidden; padding-top: 50%; height: 0px;">
How Can I remove those lines auto generated or Can I change: padding-top:50% to padding-top:67%
Or any solution for me to fix the problem..
you can use !important for that.
<ul class="myul" style="overflow: hidden; padding-top: 50%; height: 0px;">
too override inline style you can do this
.myul {
padding-top: 67% !important;
}
or you can use javascript solution provide by #Renzo Calla
As #Terry said those inline styles might be added by the library, if you still want to overwrite them you can use the jquery css
$('#ninja-slider ul').removeAttr('style');
$('#ninja-slider ul').css("color","blue");
Based on this answer:
https://stackoverflow.com/a/38194916/2894798
In that case, I have to suggest you an easy and dirty way:
add in your css
#ninja-slider ul{
padding-top: 67%!important;
}
That will fix the problem.
If you will provide js in that page, i will provide an answer editing what is setting that css in ul element to padding-top:67% without overriding it.
Someone has built a carousel for our webshop, but it is not functioning correctly. When you click one of the arrow buttons, the images will move to the left or right. But as you might have noticed already, the images just disappear into the void.
Obviously it should move to the first image when the last one has been reached and someone clicks on "next", and to the last image when the first one has been reached.
Note: the reason he used "jQuery" instead of "$" is because "$" is in conflict with Magento.
This is the code that is used:
HTML
<div class="gallery">
<div id="moveleft"><</div>
<ul class="gallery-content">
<li>
<a href="http://test.prestaq.nu/media/catalog/product/cache/27/image/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_1_24.jpg" data-lightbox="roadtrip">
<img src="http://test.prestaq.nu/media/catalog/product/cache/27/image/300x/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_1_24.jpg" alt="">
</a>
</li>
<li>
<a href="http://test.prestaq.nu/media/catalog/product/cache/27/image/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_2_9.jpg" data-lightbox="roadtrip">
<img src="http://test.prestaq.nu/media/catalog/product/cache/27/image/300x/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_2_9.jpg" alt="">
</a>
</li>
<li>
<a href="http://test.prestaq.nu/media/catalog/product/cache/27/image/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_3_1_2.jpg" data-lightbox="roadtrip">
<img src="http://test.prestaq.nu/media/catalog/product/cache/27/image/300x/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_3_1_2.jpg" alt="">
</a>
</li>
<li>
<a href="http://test.prestaq.nu/media/catalog/product/cache/27/image/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_4_15.jpg" data-lightbox="roadtrip">
<img src="http://test.prestaq.nu/media/catalog/product/cache/27/image/300x/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_4_15.jpg" alt="">
</a>
</li>
<li>
<a href="http://test.prestaq.nu/media/catalog/product/cache/27/image/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_5_15.jpg" data-lightbox="roadtrip">
<img src="http://test.prestaq.nu/media/catalog/product/cache/27/image/300x/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_5_15.jpg" alt="">
</a>
</li>
</ul>
<div id="moveright">></div>
</div>
CSS
ul, li { list-style: none; }
.gallery {
min-height: 340px;
overflow:hidden;
margin-top: 40px;
}
.gallery ul.gallery-content {
margin-left: 55px;
margin-right: 55px;
max-height: 300px;
overflow:hidden;
margin-top: -300px;
}
.gallery img {
float:left;
padding: 3px;
margin: 0 10px;
}
.gallery #moveleft {
height: 300px;
width: 50px;
line-height: 300px;
border: #CCC solid 1px;
margin-left: 0px;
font-size:45px;
padding-left: 2px;
}
.gallery #moveright {
height: 300px;
width: 50px;
line-height: 300px;
font-size:45px;
float: right;
margin-top: -300px;
padding-left: 2px;
border: #CCC solid 1px;
}
JS
jQuery(document).ready(function() {
jQuery('.gallery #moveleft').click(function() {
jQuery('.gallery li').animate({
'marginLeft' : "-=300px" //moves left
});
});
jQuery('.gallery #moveright').click(function() {
jQuery('.gallery li').animate({
'marginLeft' : "+=300px" //moves right
});
});
});
I would recommend using OwlCarousel for simple jQuery Carousel on Magento. This jQuery plugin also support touch slide (work very well on mobile), which is a plus if your Magento website is responsive.
Hope this help
I wonder why jQuery doesn't allow "+" sign. Here is an example of how it works with "1" and "3" but not with "2+". Just mouse-over the text above every div.
<div id="div-2+"></div>
JSFiddle
$('a.hover').mouseover(function() {
dataI = $(this).data('i');
$('div#div-' + dataI).addClass('h');
});
$('a.hover').mouseout(function() {
dataI = $(this).data('i');
$('div#div-' + dataI).removeClass('h');
});
a {
display: inline-block;
width: 100px;
margin: 60px 20px 60px 0;
text-align: center;
}
div {
display: inline-block;
width: 100px;
height: 100px;
margin-right: 20px;
background-color: #ddd;
}
div.h {
background-color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="hover" data-i="1">DIV 1</a>
<a class="hover" data-i="2+">DIV 2+</a>
<a class="hover" data-i="3">DIV 3</a>
<br />
<div id="div-1"></div>
<div id="div-2+"></div>
<div id="div-3"></div>
Most-likely because the plus sign is the adjacent CSS selector, which causes the Sizzle selector library jQuery uses to assume you mean an adjacent selector.
One way around this would be to use an attribute selector, that selects the id attribute. Although many people would argue putting a plus sign in the id is a bad idea.
Working Example:
$('a.hover').mouseover(function() {
dataI = $(this).data('i');
$('div[id="div-' + dataI + '"]').addClass('h');
});
$('a.hover').mouseout(function() {
dataI = $(this).data('i');
$('div[id="div-' + dataI + '"]').removeClass('h');
});
a {
display: inline-block;
width: 100px;
margin: 60px 20px 60px 0;
text-align: center;
}
div {
display: inline-block;
width: 100px;
height: 100px;
margin-right: 20px;
background-color: #ddd;
}
div.h {
background-color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="hover" data-i="1">DIV 1</a>
<a class="hover" data-i="2+">DIV 2+</a>
<a class="hover" data-i="3">DIV 3</a>
<br />
<div id="div-1"></div>
<div id="div-2+"></div>
<div id="div-3"></div>
Note, "workaround"
Try utilizing css
a {
display: inline-block;
width: 100px;
margin: 60px 20px 60px 0;
text-align: center;
}
div {
display: inline-block;
width: 100px;
height: 100px;
margin-right: 20px;
background-color: #ddd;
}
a.hover[data-i="1"]:hover ~ div[id$="1"],
a.hover[data-i="2+"]:hover ~ div[id$="2+"],
a.hover[data-i="3"]:hover ~ div[id$="3"] {
background-color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<a class="hover" data-i="1">DIV 1</a>
<a class="hover" data-i="2+">DIV 2+</a>
<a class="hover" data-i="3">DIV 3</a>
<br />
<div id="div-1" class="hover"></div>
<div id="div-2+" class="hover"></div>
<div id="div-3" class="hover"></div>
#Alexander O'Mara does a nice job of explaining why it doesn't work and shows a decent work-around.
Another work-around is to escape the plus sign by preceding it with a backslash.
dataI = dataI.replace('+', '\\+');
jsfiddle
From the jQuery documentation for Selectors:
To use any of the meta-characters ( such as
!"#$%&'()*+,./:;<=>?#[]^`{|}~ ) as a literal part of a name, it must
be escaped with with two backslashes: \\. For example, an element with
id="foo.bar", can use the selector $("#foo\\.bar"). The W3C CSS
specification contains the complete set of rules regarding valid CSS
selectors. Also useful is the blog entry by Mathias Bynens on CSS
character escape sequences for identifiers.
Also note that document.querySelector() throws the following error when given the selector #div-2+:
SyntaxError: An invalid or illegal string was specified.
jsfiddle
Not sure if what i am trying to do is going to work, but i want to insert inside a li two div that will run some script for some links that are inside them. A bit confusing, i know, i cant explain it in a better way.
Take a look at my code:
Inside the body of HTML
<ul>
<li> TEST </li>
<li> TEST 2
<ul>
<li>
<div id="dock2" class="dock">
<div class="dock-container2" style="left: 760px; width: 400px;">
<ul>
<li><a class="dock-item2" href="#" style="width: 40px; left: 0px;"><span style="display: none;">Home</span><img alt="home" src="Inc/Images/dock/home.png"/></a> </li>
<li><a class="dock-item2" href="#" style="width: 40px; left: 40px;"><span style="display: none;">Contact</span><img alt="contact" src="Inc/Images/dock/email.png"/></a></li>
<li><a class="dock-item2" href="#" style="width: 40px; left: 80px;"><span style="display: none;">Portfolio</span><img alt="portfolio" src="Inc/Images/dock/portfolio.png"/></a></li>
<li><a class="dock-item2" href="#" style="width: 40px; left: 120px;"><span style="display: none;">Music</span><img alt="music" src="Inc/Images/dock/music.png"/></a></li>
<li><a class="dock-item2" href="#" style="width: 40px; left: 160px;"><span style="display: none;">Video</span><img alt="video" src="Inc/Images/dock/video.png"/></a></li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li> TEST 3 </li>
</ul>
The script that is running inside the div, also in the body of HTML
<script type="text/javascript">
$(document).ready(function(){
$('#dock2').Fisheye({
maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 40,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);
</script>
And finally the CSS
.dock {
position: relative;
height: 50px;
text-align: center;
}
.dock-container {
position: absolute;
height: 50px;
background:url(Inc/Images/dock/dock-bg2.gif);
padding-left: 20px;
}
a.dock-item {
display: block;
width: 40px;
color: #000;
position: absolute;
top: 0px;
text-align: center;
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
.dock-item span {
display: none;
padding-left: 20px;
}
/* dock2 - bottom */
#dock2 {
width: 100%;
bottom: 0px;
position: absolute;
left: 0px;
}
.dock-container2 {
position: absolute;
height: 50px;
background:url(Inc/Images/dock/dock-bg.gif);
padding-left: 20px;
}
a.dock-item2 {
display: block;
font: bold 12px Arial, Helvetica, sans-serif;
width: 40px;
color: #000;
bottom: 0px;
position: absolute;
text-align: center;
text-decoration: none;
}
.dock-item2 span {
display: none;
padding-left: 20px;
}
.dock-item2 img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
So what i am actually trying to do, is put inside a list a dock that acts like OS X, moving the mouse over the icons making them to zoom, though with the above code the zoom doesn't work.
If i move the part of the dock outside the list and put it somewhere in the body, everything works as it should, but inside the list no animation.
I am not sure at all if this is possible, having an animation running inside a li, any help is really appreciated.
P.S I also have an another CSS that is about the li style, but i thing its irrelevant to the question so i didn't include it.
Edit: Added it on jsfiddle. Link: http://jsfiddle.net/UTw84/3/
The dock i am trying to make is this one: http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.html
Note: on jsfiddle it doesn't show the icons, probably because there is no path for them.
Edit 2: The problem was/is with CSS. i made some changes and its working better now. http://jsfiddle.net/UTw84/7/
http://jsfiddle.net/UTw84/4/
Is this what you want ?
I just added something to your CSS selector :
#main-list ul li > ul {
display: none;
position: absolute;
text-align: center;
}
The last CSS selector was overriding the :hover selector.
EDIT :
I see.
http://jsfiddle.net/UTw84/5/
It works here but when you want to put a "left" property to the main-dock, it breaks everything.