could someone please write me some javaScript to show how I can mouse over an "a href" element to display a "p" element paragraph on the page.
I have the paragraph displayed:none with css; I want to associate the mouse over of a link to display the paragraph.
cheers
You dont need to use JS for this. You can do this using css also.
<a href="#link" class="hoverOn">
<p class="hoverContent">This is hover content</p>
</a>
<style>
p.hoverContent{
display:none;
}
a.hoverOn:hover p.hoverContent{
display:block !important;
}
</style>
You can use the jQuery .hover() method.
HTML
Link Hover
<p id="para">Hidden text goes here</p>
JS
$("#mousehoverhere").hover(
function() {
/* Effect during hover */
$("#para").slideDown(500);
}, function() {
/* Effect after un-hover */
$("#para").slideUp(500);
}
);
CSS
#para {
display: none;
}
Check the JSFiddle demo
I'm assuming you are not using jQuery, so you can use this piece of code to show the element when you hover the link.
document.getElementById("link").addEventListener("mouseover", function(){
document.getElementById("paragraph").style.display = "block";
});
You need to replace link and paragraph with the ID of your link and paragraph.
To also hide the paragraph again when your mouse leaves the link, add this code too:
document.getElementById("link").addEventListener("mouseout", function(){
document.getElementById("paragraph").style.display = "none";
});
I have made an example for you:
$(document).ready(function () {
var link = $('#myLink');
link.on('mouseover', function () {
$('.lorem').show();
})
})
.lorem {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
my link
<p class="lorem">
lorem ipsum
</p>
Related
Given a basic structure how can I turn a series of divs into links without turning every div into a link? Here's an example:
<div class="boxes">
<div class="box"><p>Some text with a link</p></div>
<div class="box"><p>Some text without a link</p></div>
<div class="box"><p>Some text with a link</p></div>
<div class="box"><p>Some text without a link</p></div>
</div>
And the associated jQuery I'm using to make the divs clickable:
$(document).ready(function() {
if($('.boxes p a').length){
$(".boxes .box").click(function() {
window.open($(this).find("a").attr("href"));
return false;
});
}
});
The problem I'm running into is the click function gets applied to all divs instead of only those with links.
The desired behavior is to only create a fully clickable div only when an anchor element is found.
For the purposes of this use case, the div (.box) is generated dynamically and wrapping the element in an anchor tag (<div> </div>) is not possible.
Fiddle: https://jsfiddle.net/fu8xLg0d/
Because you add event listeners on all the .boxes .box classes, which are all your divs.
Just add something like :
$(".boxes .box").has('a')...
to narrow it to those only containing an a element
JSFiddle
use .parent to solve your purpose:
$(document).ready(function() {
if($('.boxes p a').length){
$("a").parent().parent().click(function() {
window.open($(this).find("a").attr("href"));
return false;
});
}
});
But yes, it can even create a problem so i will say to give a class to your link and then call its parent... :)
Plotisateur just beat me by a minute or two! :P
if($('.boxes p a').length){
$(".boxes .box").has('a').click(function() {
window.open($(this).find("a").attr("href"));
return false;
});
Here's the code anyway: https://jsfiddle.net/fu8xLg0d/1/
You can try this.
$(document).ready(function() {
var anchorbox =$(".boxes p a");
if(anchorbox.length>0){
$(anchorbox).parent().click(function() {
window.open($(this).find("a").attr("href"));
return false;
});
}
});
div (.box) is generated dynamically.
Delegate the click event from the body to the target div and on click on the element check if it has anchor tag. For adding the pointer icon create a separate function which will add the icon to the div only if it has an anchor tag as child
$(document).ready(function() {
// separate function to add pointer only if a is present
addClassToElem();
$("body").on('click', '.box', function() {
if ($(this).find('a').length) {
window.open($(this).find("a").attr("href"));
return false;
}
})
});
function addClassToElem() {
$('.box a').each(function(a, b) {
$(this).parent().addClass('linkIcon')
})
}
.linkIcon {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxes">
<div class="box">
<p>Some text with a link</p>
</div>
<div class="box">
<p>Some text without a link</p>
</div>
<div class="box">
<p>Some text with a link</p>
</div>
<div class="box">
<p>Some text without a link</p>
</div>
</div>
This little change, helps you to resolve the issue.
$(document).ready(function() {
if($('.boxes p a').length){
$(".boxes .box").click(function() {
if ($(this).children('p').children('a').length) {
window.open($(this).find("a").attr("href"));
return false;
}
});
}
});
the difference from your code is, additionally add a checking
if ($(this).children('p').children('a').length) {
window.open($(this).find("a").attr("href"));
return false;
}
I have a series of text links that toggle visibility of a div element. The text links are styled to look like buttons and the text is being changed when the div is visible or invisible.
The problem is that when the first link is pressed, it toggles the visibility of it's own div plus all the other hidden divs and what is needed is that each link toggles the visibility of it's own div.
My question is what is the best way to solve this problem using only one function. Below is my code. Thanks!
The code can be also tested here:
http://jsfiddle.net/Bradg/eBfxB/
HTML:
<div>
See all
</div>
<div class="slidingDiv" style="display: block;">
<h2>Content One</h2>
</div>
<div>
See all
</div>
<div class="slidingDiv" style="display: block;">
<h2>Content Two</h2>
</div>
JS:
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').toggle(function(){
$(".slidingDiv").slideDown(
function(){
$("#plus").text("Hide all")
}
);
},function(){
$(".slidingDiv").slideUp(
function(){
$("#plus").text("See all")
}
);
});
});
CSS:
.show_hide {
display: none;
}
The version of toggle() that accepts two callbacks have been deprecated and removed, so you'll have to use click instead and do something like this
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').on('click', function(e){
e.preventDefault();
var self = this,
sliding = $(this).closest('div').next('.slidingDiv').slideToggle(function(){
$(self).text(function(_,txt) {
return txt == "Hide all" ? "See all" : "Hide all";
});
});
});
});
FIDDLE
Note the use of the classes only (ID's must be unique) and the this keyword
I have troubling with showing a div while hovering a <a> tag , I could not solve the problem, my code is here in JSFIDDLE.
The <a> tag will be visible, while I click or hover on <a> tag the div below it should be visible.
Part of my code is like this :
<a class="search dropbox_btn" title="Ara" href="#drop-search" id="tour-search">Ara</a>
How can I do it with CSS, JavaScript or jQuery?
UPDATE: I want to show the div below:
<div id="pill_identifier_fmt">
Pure CSS solution:
JSFIDDLE
#pill_identifier_fmt{
display:none;
}
#tour-search:hover + div#pill_identifier_fmt{
display:block;
}
#pill_identifier_fmt:hover{
display:block;
}
Check this, DEMO Fiddle. If you wish you perform action on the form, this is the solution.
a#tour-search finds an <a> tag with id 'tour-search'. If you have multiple <a> tags use this. Else just $('a') would be fine.
$("a#tour-search").hover(function(){
$("#pill_identifier_fmt").css("display","block");
});
OR
$("a#tour-search").hover(function(){
$("#pill_identifier_fmt").show();
});
If you have multiple <a> tags
$("a").hover(function(){
$(this).closest('div').show();
});
Try this to hide and show div on hover of anchor tag.
$('.search').hover(
function() {
$('#pill_identifier_fmt').show(1000)},
function(){
$('#pill_identifier_fmt').hide(1000)}
);
Update:
If you just want to show the div after hovering not hide it,then you can do this
$('.search').hover(
function() {
$('#pill_identifier_fmt').show(1000)}
);
Using jQuery, you can add the code below. The advantage is that the form won't disappear the moment you hover away from the <a> tag.
JSFiddle
CSS:
.showAlways {
display: block;
}
.showHover {
display: none;
}
.showHover:hover {
display: block;
}
JavaScript:
$(document).ready(function() {
$('#pill_identifier_fmt').addClass('showHover');
$('#tour-search').hover(function() {
$('#pill_identifier_fmt').addClass('showAlways');
$('#pill_identifier_fmt').removeClass('showHover');
}, function() {
setTimeout(function() {
$('#pill_identifier_fmt').addClass('showHover');
$('#pill_identifier_fmt').removeClass('showAlways')
}, 1000);
});
});
I am creating a website where i want to display a div on hover of a button. Currently i am able to do this but it's not the desired effect. I have created a DEMO in jsfiddle to show what i have achieved and i will paste my HTML, jQuery and only the CSS which is pertaining to this question.
HTML
<div class="cart-btn" >CART
</div>
<div class="minicart" >
Items : 5
Total : $250
VIEW CART
</div>
jQuery
$(document).ready(function () {
$(".cart-btn").hover(
function () {
$(".minicart").show(100);
}, function () {
$(".minicart").hide(2000);
});
});
CSS
.minicart {
width:164px;
display: none;
background-color:#0A3151;
opacity:0.8;
position:absolute;
z-index:9999;
margin-left:450px;
margin-top:30px;
}
ISSUE: The desired effect i want is, "The div should slide from under the button" and dissapear in the same manner".
However my main concern is that the div should remain focused even when i hover over it. Currently it disappears as soon as i take my mouse away from the button. The div once displayed should remain displayed unless the user takes the mouse away either from the div or button.
A few things to note, when using absolute positioning use top instead of margin-top and so on.
Second to avoid the popup folding up when you leave the button use the following selector:
$(".cart-btn, .minicart").hover(
function () {
$(".minicart").slideDown(100);
}, function () {
$(".minicart").slideUp(2000);
});
Use slideDown and slideUp as BeNdErR sugested, here's an updated version of his fiddle
Wrap both button and div in another div. The use this div for hover-event.
<div id="cbutt">
<div class="cart-btn" >CART
</div>
<div class="minicart">Items : 5 Total : $250 VIEW CART
</div>
</div>
$(document).ready(function () {
$("#cbutt").hover(
function () {
$(".minicart").show(100);
}, function () {
$(".minicart").hide(2000);
});
})
Here is a fiddle:
http://jsfiddle.net/Ncj2E/
Hope this is what you wanted.
This question already has answers here:
jQuery click() event catch-all?
(2 answers)
Closed 9 years ago.
I have a button, when it's clicked, shows a div with images(like an emoticon panel of a chat) if I click it again the div hides, but what I want to do is:
If the div is already showed up and then I click any other thing of the page, I want to hide it. I tried this:
$("myBtn").click(function(){
// show div
});
$(document).click(function(){
// hide div
});
When "myBtn" is clicked, the div shows up and hide automatically. How could I fix it ?
Thank you for your time.
You could try the following:
$(document).on('click', function(evt) {
if(!$(evt.target).is('#my-id')) {
//Hide
}
});
UPDATE
Just so you can have a full working set:
$('#mybutton').on('click', function(evt) {
$('#mydiv').show();
return false;//Returning false prevents the event from continuing up the chain
});
At the same time you show your original <div>, add a new <div> to your page that has a style/css set like this:
.ui-widget-overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 100;
}
Make sure the original <div> -- the one you want to be able to click on without closing it -- has a higher z-index, but everything else on the page has a lower z-index.
When you add the new div to your page, give it the .ui-widget-overlay class, and add a click handler to intercept clicks on that <div>. Adding the overlay div with the click handler looks like this:
$('<div class="ui-widget-overlay">')
.click(function() {
$('.ui-widget-overlay').remove();
$('selector-for-original-div').hide();
})
.appendTo('body');
The upshot of all this: You have two divs. The first is what you want to display and allow users to click in without closing it, the second is an invisible div underneath the first taking up the entire browser window so that if the user clicks anywhere but the upper div, it intercepts the click event. Inside that click event, you remove the hidden div and hide the original.
updated
Assuming that you have a class 'active' to the element when it shows, it would be:
$('html').click(function(e){
if(!$(e.target).attr("id") == "my-id") {
}
});
<script type="text/javascript">
$('body').click(function() {
if($("div").is(':visible')){
$("div").hide();
}
});
</script>
the $("div") selector here should be your div that is either has id or class for example: if the <div class="class" id="id"> then $("div") will be changed to $("div.class") or $("div#id")
<div class="slControlWrapper">
<div class="slControlLabel">
<asp:Label ID="lblSL" CssClass="lblSL" runat="server">Clickable Label</asp:Label>
</div>
<div class="slControlSeparator">
</div>
<div class="slControlDropDown">
</div>
<div id="wndSL">
This is the hidden content of my DIV Window
</div>
<div id="test">
I am for test click on me
</div>
</div>
$('.slControlLabel, .slControlDropDown').bind('click',function(event){
$('#wndSL').show();
event.stopPropagation();
});
$('html').click(function() {
$('#wndSL').hide();
});
#wndSL {
display:none; background-color: blue; height:500px; width:590px;
}
Have a gander here:
http://jsfiddle.net/nCZmz/26/