This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How can I create a “tooltip tail” using pure CSS?
I would like to create a Facebook/ Twitter style tooltip (that thing when you hover over people's profiles and there's a short summary of their profile). I came across a lot of tutorials but they use jQuery. Is there a way to do this is CSS and maybe javascript?
+I'd like for this to work on images as well.
Thanks
You can do it with pure css
You can use the hover pseudo class to trigger it.
Here is a general concept that should get you started
div.profile-on-hover { display: none }
a:hover + .profile-on-hover { display: block }
<a>hover me</a>
<div class="profile-on-hover">bunch of stuff</div>
http://jsfiddle.net/AsKpv/
the div will need to follow the a tag for the '+' to work with CSS
if you want to make it snazzy you could use opacity: 0 and opacity:1 with a css3 transition to make it fade in as well.
good luck
Related
This question already has answers here:
How to scale CSS sprites when used as background-image?
(2 answers)
Closed 2 years ago.
PS : For requirements for this project use Javascript or Jquery, i can't use CSS.
I need to extract images from image and display in div using javascript and html.
I try using this image :
For information this image is just for test and base in solution i will adapt in real world image project.
I want to get this 2 images and display in my div using img dom in my HTML.
For this purpose i try to adapt this work http://jsfiddle.net/yn1tworg/6/ to work for me. But without success.
Anyone have a idea how to resolve this issue, or jsfiddle.net work plz share with me and thanks.
Use CSS and just play with background-position until the image is what you need to be.
#box{
width: 120px;
height: 120px;
background-color: #ff0000;
background-image: url(https://i.stack.imgur.com/3YWPU.png);
background-position: 280px -260px;
}
<div id='box'></div>
You can use clip CSS peoperty --
<div style="padding: 300px;">
<img src="./overflow_files/3YWPU.png" style="position: absolute;clip: rect(260px,730px,380px,600px);">
</div>
This question already has answers here:
How to detect Adblock on my website?
(46 answers)
Closed 3 years ago.
With some simple javascript, how can I detect if the client user is using an Adblocker?
Adblockers detect scripts called ads.js or scripts with similar names and then block them so that they don't run. They also detect id's and classes that have suspicious names and simply remove them from the DOM. So here is one simple trick (explanation below) that can help you detect if your user is using an adblocker or not:
<div id="randomDiv">
<div class="adBanner">
</div>
</div>
This HTML simply places a random div on your page with only one child, an empty div that has a class of adBanner. Now an adblocker would think of the child div as an advertisement, and it would remove it.
Using CSS, we can give the .adBanner class a fixed height and a fixed width, so that it renders something on the screen.
.adBanner {
height: 2px;
width: 2px;
visibility: hidden;
}
This CSS simply gives our fake "adBanner" element a fixed width and height that we can check for later, and hides it from the user.
Now using jQuery, we can check for the height or the width of the element. We do this because if the adblocker were to remove this element from the DOM, then the height would not exist.
if ($("#randomDiv").height() > 1) {
console.log("No Adblocker!!");
}
else {
console.log("An adblocker was detected!!");
}
I'm sure there are other ways to do this, but this is just one of the ways.
Hope this helps!!!
Can someonehelp me to fix that dropdown menu that this site has neowin.net?
So far I have this; itbataljonen.com/test/ (Hover over "News")
What I can't figure out, is when i hover over for instance "News" -> "Apple", there should come some news with pictures, and they change if I hover over "Microsoft" and so on.
Could this be done via CSS or HTML?
To download the source files, just go to www.ITbataljonen.com/test and click Download Source in the navigation bar.
Can someone help me? :) (Sorry for my bad english..)
Working Fiddle
As you asked using css. Yes by using css it is possible to hide and show another div. You need to simply write hover event. This applies to "apple" and "microsoft" also.
Here is the css:
#a:hover + #b {
background: #ccc;
visibility: visible;
}
#b{
visibility: hidden;
}
This can be done using hover property in CSS.
Read this question to understand more.
And in your case, the images can be in a <ul id="news_images1"></ul> and you can set css hover property to animate this list of images. Remember, there are multiple ways to solve this issue. You can also checkout Jquery hover.
I have assigned an element a class which has following CSS:
.cls {
display:none !important;
}
When I try to show this element with jQuery
$(".cls").show();
It does not work.
How can I show this element?
$('.cls').attr('style','display:block !important');
DEMO
Although question has been asked long back but its still relevant for new coders/beginners. Generally this situation comes when you have already applied some class which overriding the display behavior using !important property.
Other answers are also relevant to the question and its a matter of achieving the same goal with different approach. I would recommend to achieve it using already available classes in the same library (bootstrap here), instead of writing custom class as these days when most of us are using Bootstrap classes to build the layout.
<div id='container' class="d-flex flex-row align-items-center">
.....
</div>
If you see in the above code, we are using d-flex class for setting display property of this container. Now if I am trying to show/hide this container using
$('#container').show()
or
$('#container').hide()
It will not work as per expectation because of
As d-flex is already using !important property
Jquery's show() method will add display:block not display:flex to the css property of container.
So I will recommend to use hidden class here.
To show container
$('#container').removeClass('hidden')
To hide container
$('#container').addClass('hidden')
2 ways of doing this,
1) Remove the !important from your .cls class,
.cls{
display: none;
}
But I assume, you'd have used this elsewhere so it might cause regression.
2) What you could alternatively do is, have a another class and toggle that,
.cls-show{
display: block !important;
}
And then in your javascript,
$('.cls').addClass(".cls-show");
Then when you need to hide it again, you can,
$('.cls').removeClass('.cls-show');
This will help you keep your markup clean and readable
!important; remove all rules and apply the css desfined as !important;. So in your case it is ignoring all rules and applying display:none.
So do this:
.cls {
display:none
}
See this also
If the only property in the CLS class selector is the display one, you can do this and don't need to add any extra classes or modify the inline style.
To show them:
$('.cls').removeClass("cls").addClass("_cls");
To hide them:
$('._cls').removeClass("_cls").addClass("cls");
Just had this exact issue, here's what I did
first, I added another class to the element, such as:
<div class="ui-cls cls">...</div>
Then in the javascript:
$('.ui-cls').removeClass('cls').show();
The nice thing is that you can also have this code to hide it again:
$('.ui-cls').hide();
and it doesn't matter how many times you hide/show, it'll still work
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Changing a CSS rule-set from Javascript
I know that there are no variables in CSS, but if it is possible to change body of CSS-listing on the page with JQ - it may be work around of this. Also, I know aboud addClass/removeClass, and css('blabla','blabla') JQ-methods, and it is not what I need.
You can use a body class and then use CSS to manipulate only the class of body and then style everything based on your body class.
<body class="my-skin">
<p>Lorem<p>
</body>
And in your CSS:
.my-skin p{color: red}
.my-skin img{border:2px solid #333;margin:5px}
.second-skin p{color:blue}
jQuery:
$('body').addClass('my-skin');
//or
$('body').removeClass('my-skin').addClass('second-skin');