I am trying to make a button appear on hover and disappear when the mouse moves away from the object. There are lots of posts, like you might find on the Twitter feed but I only want the button to appear on the post you're hovering over, not all of them. Here is my code:
$(".posts").hover(function() {
$(this).find("article .report-post").css('visibility', 'visible');
$(this).find("article .report-post .report-btn").css('visibility', 'visible');
}, function () {
$(this).find("article .report-post").css('visibility', 'hidden');
$(this).find("article .report-post .report-btn").css('visibility', 'hidden');
});
What am I doing wrong? If I do this, nothing happens:
$("article").hover(function() {
$(this).find(".report-post").css('visibility', 'visible');
$(this).find(".report-post .report-btn").css('visibility', 'visible');
}, function () {
$(this).find(".report-post").css('visibility', 'hidden');
$(this).find(".report-post .report-btn").css('visibility', 'hidden');
});
Is that perhaps because there are lots of <article>s on the webpage?
EDIT: Here is the HTML of one of the <article>s:
<article class="single-post">
<div class="profile-pic">
<a href="tg">
<div style="background-image:url(example.jpg);background-size:cover;width:70px;height:70px;"></div></a>
</div><!-- profile-pic -->
<div class="text">
<h5 class="tg" id="CMfQ34erT6-author">Tristram Gale</h5><a class="report-post" href="#" id="CMfQ34erT6" style="visibility: hidden;">
<div class="report-btn" style="visibility: hidden;"></div></a>
<p class="post-text">LALALALALALALALALALALA</p>
<div class="details">
<ul>
<li style="text-overflow: ellipsis;width: 170px;white-space: nowrap;overflow: hidden;">
Devonport High School for Boys
</li>
<li style="list-style: none; display: inline">
<a href="post.php?id=CMfQ34erT6">
<ul>
<li title="2013-07-02 21:16:57">about 15 hours ago</li>
</ul>
<ul class="comments" id="CMfQ34erT6">
<li>
0 comments
</li>
</ul></a>
</li>
</ul>
</div>
<div class="comments-box" id="CMfQ34erT6-box" style="display: none;">
<div id="CMfQ34erT6-comment-box">
<ul>
<li class="CMfQ34erT6-new-comment">
<form class="CMfQ34erT6-form" id="CMfQ34erT6" name="CMfQ34erT6">
<input autocomplete="off" id="newCommentText" placeholder="Write a comment..." type="text"><input id="addcomment" onclick="return postComment(this.form.id, this.form.newCommentText.value)" type="button" value="Post">
</form>
</li>
</ul>
</div>
</div>
</div><!-- text -->
<div class="clear"></div><!-- clear -->
</article>
Thanks
If you are not planning to use the hover() functions for something else in Javascript you can do it completely in CSS.
Remove the style="visibility: hidden;" attributes from the button and link and add this to your CSS:
article .report-post {
visibility: hidden;
}
article:hover .report-post {
visibility: visible;
}
The button will only be visible as long as the cursor is over the article.
jsfiddle is online again: http://jsfiddle.net/GeraldS/6MQv7/
Okay, I've tested this on jsfiddle but their server is down now - see http://www.isitdownrightnow.com/jsfiddle.net.html
In HTML change the style attribute from visibility:hidden to display:none for div and a as well.
And then the following code works:
$(".posts .single-post").hover(function() {
$(this).find(".report-post").show();
$(this).find(".report-btn").show();
}, function () {
$(this).find(".report-post").hide();
$(this).find(".report-btn").hide();
});
Try these things:
Make sure you've put the hover() function inside document.ready()
There was no text inside the class .report-btn. Make sure you can see the button, when everything is set to visible.
There is no need of the .find, make it simple...
for eg, try this code:
$(function() {
$('article').hover(function() {
$(".report-post").css('visibility', 'visible');
$(".report-post .report-btn").css('visibility', 'visible');
}, function () {
$(".report-post").css('visibility', 'hidden');
$(".report-post .report-btn").css('visibility', 'hidden');
});
});
If it still doesn't work, try the "display:none" and the "display:block" instead of the "visibility"
Related
I have two containers, one is a page of link blocks and a have another container hidden. In the hidden container there is articles that link to the main pages link blocks. So user "clicks" LINK ONE in the main container which then hides the main container, shows the originally hidden container and ONLY displays the id article it is linked to. There is then a "back to library" button which will take you back to the main container and set everything back to square one. I have it working at the moment but I'm not sure if it is the right way to achieve this? I know there is no right or wrong and if it works, it works but just wondering for peace of mind. Thanks :)
CODEPEN: https://codepen.io/mDDDD/pen/ZEObRdR
HTML:
<div class="container--article-blocks" id="articleBlocks">
<div class="article-block">
<a class="show-article" href="#articleOne">LINK ONE</a>
</div>
<div class="article-block">
<a class="show-article" href="#articleTwo">LINK TWO</a>
</div>
<div class="article-block">
<a class="show-article" href="#articleThree">LINK THREE</a>
</div>
</div>
<!-- articles -->
<div class="container--articles" id="articles" style="display: none;">
back to Library
<div id="articleOne" class="article-block-articles">One</div>
<div id="articleTwo" class="article-block-articles">Two</div>
<div id="articleThree" class="article-block-articles">Three</div>
</div>
jQuery:
$('.show-article').on('click', function (e) {
e.preventDefault();
var id = $(this).attr('href');
$(id).show().siblings('div').hide();
$('#articleBlocks').fadeOut();
setTimeout(function () {
$('#articles').fadeIn();
}, 500);
});
$('.back-to-library').on('click', function (e) {
e.preventDefault();
$('#articles').fadeOut();
setTimeout(function () {
$('#articleBlocks').fadeIn();
}, 500);
});
Consider using the callback for .fadeOut() to then call .fadeIn(). Nothing wrong with that you did, this will just ensure the item is faded out before executing further code.
$(function() {
$('.show-article').on('click', function(e) {
e.preventDefault();
var id = $(this).attr('href');
$(id).show().siblings('div').hide();
$('#articleBlocks').fadeOut(500, function() {
$('#articles').fadeIn();
});
});
$('.back-to-library').on('click', function(e) {
e.preventDefault();
$('#articles').fadeOut(500, function() {
$('#articleBlocks').fadeIn();
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container--article-blocks" id="articleBlocks">
<div class="article-block">
<a class="show-article" href="#articleOne">LINK ONE</a>
</div>
<div class="article-block">
<a class="show-article" href="#articleTwo">LINK TWO</a>
</div>
<div class="article-block">
<a class="show-article" href="#articleThree">LINK THREE</a>
</div>
</div>
<!-- articles -->
<div class="container--articles" id="articles" style="display: none;">
back to Library
<div id="articleOne" class="article-block-articles">One</div>
<div id="articleTwo" class="article-block-articles">Two</div>
<div id="articleThree" class="article-block-articles">Three</div>
</div>
You can make the visibility: hidden; after an event!
Actual example
document.getElementById("XXX").style.visibility = "hidden";
But actually, your project is just fine!
For more info, go here https://www.w3schools.com/jsref/prop_style_visibility.asp
This explains the HTML DOM visibility property!
I have five buttons on one image. Every time you hover over each button, I would like the background image to change according to each button you hover. I tried doing this using CSS, but this doesn't seem to be very effective when applying the "hover" effect. It only works if you hover over the background itself and it will change, but not when you hover over a button.
And if I tried applying the CSS "hover" effect by adding a class in the li section and a sort of image sprite just under the primary background image, the image would only appear within the li itself and not as a background cover.
I figured jQuery/javascript would be better. But, I'm not sure how to apply what I would like. I tried to do a hover action with javascript, but I'm not sure why it isn't working. The following code is snippet from the main code on JSFiddle. Does anyone have suggestions?
$(document).ready(function() {
//Preload
$('<img/>').hide().attr('src', 'http://s3.amazonaws.com/nxs-kxantv-media-us-east-1/photo/2016/03/21/image-jpeg237_35345271_ver1.0_640_360.jpg').load(function() {
$('#primary').append($(this));
});
$('#screenprinting').hover(function() {
$('#primary').css('background-image', 'url("http://s3.amazonaws.com/nxs-kxantv-media-us-east-1/photo/2016/03/21/image-jpeg237_35345271_ver1.0_640_360.jpg")');
}, function() {
$('#primary').css('background', '');
});
});
#mma #primary.hp {
background-image: url(https://static.wixstatic.com/media/75ac83_423a4fd973804ba7b9f918a46481616b~mv2.jpg/v1/fill/w_1567,h_611,al_c,q_85,usm_0.66_1.00_0.01/75ac83_423a4fd973804ba7b9f918a46481616b~mv2.jpg);
background-position: 43% top
}
<div id="mma" data-trackingposition="mma">
<div id="primary" class="hp clearfix" data-speed="6" data-type="background">
<div class="bucket">
<p style="color:white;">Insure the things you love most...</p>
<p class="title" style="color:white">Select a policy to get a quote</p>
<span id="productheader" role="heading">asdf</span>
<ul class="iconlist">
<li class="attached check" data-prod="au">
<span><a id="screenprinting" href="#" aria-expanded="false" aria-label="Auto insurance" style="color:white;"><small><img src="https://static.wixstatic.com/media/75ac83_a3a5ee1aa8d6493abf7e20d1088719d7~mv2_d_1208_1208_s_2.png/v1/fill/w_600,h_600,al_c,usm_0.66_1.00_0.01/75ac83_a3a5ee1aa8d6493abf7e20d1088719d7~mv2_d_1208_1208_s_2.png" class="insurance-img"></small>Auto</a></span>
</li>
<li class="attached property" data-prod="ho">
<span><small><img src="https://static.wixstatic.com/media/75ac83_141f12dd5fc848b08fe41f79eded1260~mv2_d_1208_1208_s_2.png/v1/fill/w_600,h_600,al_c,usm_0.66_1.00_0.01/75ac83_141f12dd5fc848b08fe41f79eded1260~mv2_d_1208_1208_s_2.png" class="insurance-img"></small>Home </span>
<span class="icon close"></span>
</li>
</ul>
</div>
</div>
</div>
You need to import jQuery library to make things work in jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$(document).ready(function() {
//Preload
$('<img/>').hide().attr('src', 'http://s3.amazonaws.com/nxs-kxantv-media-us-east-1/photo/2016/03/21/image-jpeg237_35345271_ver1.0_640_360.jpg').load(function() {
$('#primary').append($(this));
});
$('#screenprinting').hover(function() {
$('#primary').css('background-image', 'url("http://s3.amazonaws.com/nxs-kxantv-media-us-east-1/photo/2016/03/21/image-jpeg237_35345271_ver1.0_640_360.jpg")');
}, function() {
$('#primary').css('background', '');
});
});
#mma #primary.hp {
background-image: url(https://static.wixstatic.com/media/75ac83_423a4fd973804ba7b9f918a46481616b~mv2.jpg/v1/fill/w_1567,h_611,al_c,q_85,usm_0.66_1.00_0.01/75ac83_423a4fd973804ba7b9f918a46481616b~mv2.jpg);
background-position: 43% top
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mma" data-trackingposition="mma">
<div id="primary" class="hp clearfix" data-speed="6" data-type="background">
<div class="bucket">
<p style="color:white;">Insure the things you love most...</p>
<p class="title" style="color:white">Select a policy to get a quote</p>
<span id="productheader" role="heading">asdf</span>
<ul class="iconlist">
<li class="attached check" data-prod="au">
<span><a id="screenprinting" href="#" aria-expanded="false" aria-label="Auto insurance" style="color:white;"><small><img src="https://static.wixstatic.com/media/75ac83_a3a5ee1aa8d6493abf7e20d1088719d7~mv2_d_1208_1208_s_2.png/v1/fill/w_600,h_600,al_c,usm_0.66_1.00_0.01/75ac83_a3a5ee1aa8d6493abf7e20d1088719d7~mv2_d_1208_1208_s_2.png" class="insurance-img"></small>Auto</a></span>
</li>
<li class="attached property" data-prod="ho">
<span><small><img src="https://static.wixstatic.com/media/75ac83_141f12dd5fc848b08fe41f79eded1260~mv2_d_1208_1208_s_2.png/v1/fill/w_600,h_600,al_c,usm_0.66_1.00_0.01/75ac83_141f12dd5fc848b08fe41f79eded1260~mv2_d_1208_1208_s_2.png" class="insurance-img"></small>Home </span>
<span class="icon close"></span>
</li>
</ul>
</div>
</div>
</div>
I have made a search bar that I want to show when user will click on search image that is list item as
<li class="item" onclick="showSearch()"><img id="search" src="images/search.png" ></li>
I set the visibility to hidden in HTML as
<div id="bar_search" style="visibility:hidden;">
have a function as
function showSearch () {
document.getElementById("bar_search").style.visibility = "visible";
}
but when i click on list item it does not show however hidden property working fine.
where I'm making mistake please tell me, thanks
Update:
content in the div
<div id="bar_search" style="visibility:hidden;">
<img id="searchbar" src="images/searchBar.png">
<div id="searchDec">
<input type="text">
<button ><b>Search</b></button>
</div>
</div>
Try setting the property through your style sheet and see if you can't get it to change with the event-handler.
<node class="hidden" onclick=toggleVisibilty()"></node>
Or if your not opposed to using jQuery, then you could always use the toggle method, so as to toggle the class that way.
http://api.jquery.com/toggle/
your code is fine maybe you have syntax error in the same page
function showSearch() {
document.getElementById("bar_search").style.visibility = "visible";
}
<li class="item" onclick="showSearch()">
<img id="search" src="https://wiki.ubuntu.com/IconsPage?action=AttachFile&do=get&target=search.png">
</li>
<div id="bar_search" style="visibility: hidden;">
<img id="search" src="http://i.stack.imgur.com/X6BXa.png">
</div>
This is the first time I've ever using stackoverflow, so here I go.
I'm creating a website and currently, I have created buttons for the navigation. By default (the homepage) shows a slideshow using JavaScript and this is all contained within a div.
When I click, let's say the 'About Me' page, I want that div to fade out and another div to fade in which will contain an image and text.
Here's my code:
<body>
<div id="top_wrapper">
<a class="button navigation" id="homeBtn">Home</a>
<a class="button navigation" id="aboutBtn">About Me</a>
<a class="button navigation" id="coachBtn">Peronsal, Business and Professional Coaching</a>
<a class="button navigation" id="successBtn">Success Stories</a>
<a class="button navigation" id="workBtn">Community Work</a>
<a class="button navigation" id="charityBtn">Charity</a>
<a class="button navigation" id="contactBtn">Contact Me</a>
</div>
<div id="home">
<div id="sliderFrame">
<div id="slider">
<img src="_images/_image01.jpg" />
<img src="_images/_image02.jpg" />
<img src="_images/_image03.jpg" />
<img src="_images/_image04.jpg" />
<img src="_images/_image05.jpg" />
</div>
</div>
<div id="border">
<img src="_images/_border.png" />
</div>
</div>
<div id="aboutme">
<div id="text">
<p>This is the text</p>
</div>
</div>
</body>
In my example, I want that when the user clicks on the 'About Me' button, the div 'home' fades out and the div 'aboutme' fades in.
I've tried nearly all of the examples on stackoverflow as well as whatever the jQuery/JavaScript websites and Google could throw at me and no luck.
One way could be to do it like so:
$('#aboutBtn').click(function(){
$('#home').fadeOut(300);
$('#aboutme').delay(400).fadeIn(300);
});
Edit: the solution above was more of a quick fix for an individual case, the solution below is the kind of thing you should do instead, especially when you have multiple anchors/divs.
Here's a working jsFiddle example.
HTML:
<a class="buttonNav" target="1">Home</a>
<a class="buttonNav" target="2">About</a>
<a class="buttonNav" target="3">Success</a>
<div id="div1" class="targetDiv">Home Div</div>
<div id="div2" class="targetDiv">About Div</div>
<div id="div3" class="targetDiv">Success Div</div>
CSS:
.targetDiv {
display:none;
color:red;
}
.targetDiv:nth-of-type(1) {
display:block;
}
jQuery:
$(function(){
$('.buttonNav').click(function(){
$('.targetDiv').fadeOut();
$('#div'+ $(this).prop('target')).delay(400).fadeIn();
});
});
This approach would be much cleaner for scaling usage of options, like in your case.
You can fadeout the home div and in callback of this fadeout you can fadein the about me div. Somthing like this:
$('#aboutBtn').click(function(){
$('#home').fadeOut('slow', function(){
$('#aboutme').fadeIn('slow');
});
});
Here is the FIDDLE
Here is an improved example: jsfiddle
This example will allow you using the same div as a container for all links...
Note that you should add a href for your link tags.
Have fun.
jquery:
$('#aboutme').hide();
$('#aboutBtn').click(function(){
$('#home').fadeOut('slow', function(){
$('#aboutme').text('about me text!!!').fadeIn('slow', function(){ });
});
});
$('#homeBtn').click(function(){
$('#home').fadeOut('slow', function(){
$('#aboutme').text('home text button text!!!').fadeIn('slow', function(){ });
});
});
//add other click events for each link.
EDIT: Tune up - and save time
See this jsfiddle
Now you should set only an array key as the same id of the relevant link and type in his text!
have fun
Thank you in advance for your help! It's my first post, wasn't sure about the formatting so I hope I've done it correctly.
I'd like to know if I can show/hide hidden Nested divs using the following script taken from http://www.huntingground.freeserve.co.uk/main/mainfram.htm?../style/lyr_swap.htm:
<script type="text/javascript">
function swapLyr(num) {
idCount=0
while(document.getElementById("mydiv"+idCount)){
el=document.getElementById("mydiv"+idCount)
if(idCount != num){
el.style.display="none"
}
else{
el.style.display="block"
}
idCount++
}
}
</script>
<ul>
<li onclick="swapLyr(0)">Show Green</li>
<li onclick="swapLyr(1)">Show Yellow</li>
<li onclick="swapLyr(2)">Show Red</li>
<li onclick="swapLyr(3)">Show Blue</li>
</ul>
<div id="mydiv0" style="display:none;background-color:#00AA00;width:350px; height:260px">Green</div>
<div id="mydiv1" style="display:none;background-color:#AAAA00;width:350px; height:260px">Yellow</div>
<div id="mydiv2" style="display:none;background-color:#AA0000;width:350px; height:260px">Red</div>
<div id="mydiv3" style="display:none;background-color:#0000AA;width:350px; height:260px">Blue</div>
I would like to use something like:
<div id="mydiv3" style="display:none;background-color:#0000AA;width:350px; height:260px">Blue<br /><br />
<a href="#null" onclick="swapLyr(5)">Show Hidden Div within this Div</li>
<div id="mydiv5" style="display:none;background-color:#FFF;width:300px; height:210px">Hidden Div Within "Blue" div</div>
</div>
i see it know. use this:
<div id="mydiv3" style="background-color:#0000AA;width:350px; height:260px">Blue<br /><br />
Show Hidden Div within this Div
<div id="mydiv5" style="display:none;background-color:#FFF;width:300px; height:210px">Hidden Div Within "Blue" div</div>
</div>
<script>
function swapLyr(num) {
el=document.getElementById("mydiv"+num);
if(el.style.display=="none"){
el.style.display="block";
}else{
el.style.display="none";
}
}
</script>