I'm trying to incorporate a cool effect on my website where you hover over a box and it slides up to reveal more details in another div. I've seen this feature on websites like...
In Facebook, the revealed div appears upon clicking a category, while in Google+ it pops up when hovering over a category (which is what I want for my site).
If anyone has any tips or suggestions on how to achieve this, I would greatly appreciate it. Thank you!
To achieve this effect, you can utilize jQuery's $.animate() function in combination with some CSS. Here is an example:
Check out the fiddle demonstration here: http://jsfiddle.net/6dnRy/
CSS
.container {
position: relative;
float: left;
margin: 10px;
width: 250px;
height: 250px;
overflow: hidden;
}
.inner {
position: absolute;
top: 0;
}
.itemTop {
width: 250px;
height: 250px;
background: #ccc;
}
.itemBottom {
width: 250px;
height: 250px;
background: #fff000;
}
HTML
<div class="container">
<div class="inner">
<div class="itemTop">Top</div>
<div class="itemBottom">Bottom</div>
</div>
</div>
<div class="container">
<div class="inner">
<div class="itemTop">Top</div>
<div class="itemBottom">Bottom</div>
</div>
</div>
JavaScript
/**
* $.on() is jQuery 1.7+
* use $('.container').click(function(e){... for < 1.7
*/
$(document).on('click', '.container', function(e){
e.preventDefault(); // Prevent Default Action
$('.inner').animate({top:0}, 'linear'); // Reset Other Containers
$('.inner', this).animate({top:-250}, 'linear'); // Animate Clicked Container
});
I trust this explanation will be beneficial!
Using CSS, you have the ability to stack two elements one on top of the other and with the help of JavaScript, you can create an animation effect where the top element moves out of sight. There are various methods available, so it's important to explore and find the desired effect.
For example, you can check out this jsfiddle demo showcasing how to slide one element over another: http://jsfiddle.net/PdZKP/
JavaScript:
$('#front').on('mouseenter', function () {
$(this).slideUp();
}).on('mouseleave', function () {
$(this).slideDown();
});
CSS:
#back {
position : absolute;
top : 0;
left : 0;
width : 100px;
height : 100px;
background : #000;
z-index : 1;
}
#front{
position : absolute;
top : 0;
left : 0;
width : 100px;
height : 100px;
background : #abc;
z-index : 2;
}
HTML:
<div id="back"></div>
<div id="front"></div>
If you're interested in a different animation style, I've updated the jsfiddle with a new version here: http://jsfiddle.net/PdZKP/1/ (this might be what you're searching for)
Visit this link for more information on JS Sprites
Consider using this tool to enhance your website, like in example 1b.
Is it possible to create a popup that covers the entire browser window, including the search bar and other windows besides just the webpage area, for a very large interactive element? ...
I've been trying to implement this particular example on my website, but I seem to be struggling with it. Here are the lines that I added: <script src="jQuery/jquery-2.1.1.min.js" type="text/javascript"> </script> <script src="jQuery/ ...
Each button in my list is associated with a specific person. Upon clicking a button, it directs to calendar.php?id=5 (where 5 is the personal id). I want the calendar to display the vacations scheduled for that particular id from the MySQL database. even ...
Perhaps something quite simple but I am having trouble figuring it out. Below is the command that returns a json array. var zz = fm.request({ data : {cmd : 'url', target : hash}, preventFail : true, op ...
I'm facing an issue with local storage. My portfolio includes my work, contacts, etc., and I lack buttons that can toggle between Swedish and English languages when clicked. How can I use local storage to remember the language choice even after refres ...
This snippet works perfectly on Webkit browsers, but for some reason, it's not functioning in Firefox. I have a feeling that I need to include "event" within parentheses somewhere, but I'm unsure about the correct placement. Any ideas? html < ...
I am new to CSS and currently experimenting with the Slick slider on a project: My setup involves a div container that spans 100% of the width of the page. Inside this container, there is another div (housing the slider) that takes up 80% of the width. D ...
I'm currently working on developing a random Hearthstone card generator, but I've run into some issues with extracting JSON data from the API and converting it into a JavaScript object for use in my HTML. While I've confirmed that the API re ...
I'm currently implementing a straightforward jQuery autocomplete input within my Asp.Net web application: Summary.aspx <script type="text/javascript"> $(function () { var cityList = <%= new JavaScriptSerializer().Serialize(View ...
I have been working on creating a sidebar that includes a background image with a transparent overlay. However, I encountered an issue where the overlay background does not stretch all the way to the bottom when the scroll bar becomes visible. Despite sett ...
I am struggling to align my text properly and looking for a solution similar to this example http://jsfiddle.net/xKSUH/. The issue I am facing is that my text is not centered and there seems to be an extra space on the second line... Here is my HTML code: ...
I'm currently working on implementing a helpful feature at the bottom of my webpage to assist users with navigation. I was thinking of using an accordion as a dropdown helper, but I've been facing some challenges getting it to function properly. ...
I am currently working on a Happstack-built website where I need to retrieve and display "user submitted" plain text files. The goal is to simply get the content of the file without the need for server-side storage. How can I achieve this functionality ...
Check out the code on jsFiddle .component-container { width: 800px; height: 200px; background-color: lightyellow; border: 1px solid red; padding: 10px; overflow: hidden; } .component-container .grid-container-1 { display: grid; grid-tem ...
Looking to locate all header tags within the content and verify if each tag has an id attribute. If not, then jQuery should be used to add the id attribute. Here is the code snippet: var headings = $("#edited_content").find("h1,h2,h3,h4,h5,h6"); $.each( ...
Is there a way to adjust this script to change the box-shadow color of #player1? <script type="text/javascript> $(window).ready(function(){ var sourceImage = document.getElementById("art"); var colorThief = new ColorThief(); var color = ...
I am having trouble implementing a WooCommerce categories dropdown shortcode. Although I can see the drop-down menu, selecting a category does not seem to trigger any action. Shortcode: [product_categories_dropdown orderby="title" count="0" hierarchical=" ...
Is it possible to customize the bootstrap fixed navbar-default so that the li elements align downward instead of at the top? If you have any corrections or custom solutions, I'd love to see them! Feel free to share your code on platforms like CodePen, ...
<script src="scripts/lib/angular.min.js"></script> <script src="scripts/lib/angular-route.min.js"></script> <script src="scripts/lib/angular-animate.min.js"></script> <script src="scripts/lib/jquery.min.js"></sc ...
I'm utilizing the jQuery UI library to rearrange the items on my list. Initially, everything works smoothly without any issues. However, when I navigate to another page and then return to the page with my list, I encounter difficulties. It's wor ...