Seeking assistance or guidance in the right direction.
I have a desire to showcase a grid of images with hover-over functionality for additional information, similar to what can be seen here.
Could someone advise if this task is manageable with pure CSS alone, or would jQuery be necessary? Any pointers in the correct direction would be greatly appreciated.
It appears that the link provided initiates a hover state for the background image followed by displaying a tooltip using a timeOut function. I am currently creating a fiddle to demonstrate this process clearly.
So, without further ado, here is the Fiddle!
The key aspect lies in the jQuery script which incorporates both a delay function and defines the hover state of the image within the CSS code. As a user hovers over the image, an alternate image is displayed initially, achieved through simple CSS hover techniques and the use of CSS sprites.
.item {
background-color: white;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center top;
}
.item:hover {
background-repeat: no-repeat;
background-position: center bottom;
}
#flower {
background-image: url('http://bramvanroy.be/files/images/tooltipOverlay.jpg');
}
Upon hovering over the image at the outset, a jQuery function is activated with a set delay:
var tooltip = $(".item-tooltip");
tooltip.hide();
$(".item-wrapper").hover(
function() {
$(this).children(tooltip).delay(550).fadeIn("slow");
$(this).children(".item").fadeOut("slow");
},
...
Exiting the tooltip area triggers its concealment and reveals the original .item image again:
...
function(){
$(this).children(tooltip).fadeOut("fast");
$(this).children(".item").fadeIn("fast");
}
);
ENHANCED RESPONSE:
Presenting a Demo, showcasing the interactive tool, along with another demonstrating the static nature of the image (as requested).
To augment user experience, I implemented the jQuery plugin hoverIntent making sure tooltips are not triggered for unintended quick hovers. This evaluates the user's intent before executing the function after a brief delay. More details about this plugin can be found here. While the standard jQuery hover() method could have been used, it is not recommended.
In addition, adjustments were made to the z-index to prevent overlap issues between the image and the tooltip from different items.
If you have any further inquiries, feel free to ask in the comments section.
To enhance user experience, I recommend utilizing jQuery to achieve the desired effect. Begin by creating two div elements – one visible and one hidden. The hidden div will display information when you hover over the visible div. You can then manipulate the visibility of these divs using jQuery and CSS.
$(".info-class").hover(function(){
$(this).css('display', 'none');
$(".other-clas").css('display', 'block');
});
You can implement a similar approach as demonstrated above for a seamless transition.
After reviewing the website, it appears to be overly complex in its design.
If I were to approach this, I would add:
<div class="comtainer">
<div id="g11" class="square large" data-show-tooltip-in="#g12, #g12">
<div class="normal-view"><img ... ></div>
<div class="large-view"><img ... ></div>
<div class="tooltip">blah blah</div>
</div>
<div id="g12" class="square small" data-show-tooltip-in="#g13">
...
</div>
...
</div>
In terms of style, you can see:
div.large-view { display : none; }
div.tooltip { display : none; }
The JavaScript component (using JQuery for efficiency) could look something like:
$( '.square' ).on( 'mouseover', function*(e){
//hides the normal image
$( this ).find( '.normal-view' ).hide();
//shows the zoomed image
$(this).find('.large-view').show();
//stores a reference to where the tooltip will be displayed
var $tooltip = $( $( this ).attr( 'data-show-tooltip-in' ) );
//hides the original content of the tooltip square
$tooltip.find( 'div' ).hide();
//clones and displays the tooltip in the designated area
$( this ).find( '.tooltip' ).clone().qppendTo( $tooltip ).show();
})
This is just a starting point for the implementation process.
UPDATE explanation provided
The HTML structure consists of multiple div elements with a class of square, each containing necessary data such as normal images, zoomed images, and tooltip HTML. The additional data attribute (data-show-tooltip-in) specifies where the tooltips should appear.
The JavaScript portion takes care of the rest - refer to the comments for guidance.
I have been attempting to create a tree structure similar to the image provided. However, I am encountering difficulty in getting the background stripes to align properly for a specific row. When resizing the browser window, the stripes do not remain fixed ...
My attempt at creating a loading page using CSS and HTML has hit a roadblock. I'm trying to show a loading bar that ranges from 0% to 100%. Despite my use of justify-content: space-between, I can't seem to get it right. I've searched through ...
Oh no!! Yes, that's exactly what I desire! I've been facing obstacles in trying to understand how to display the "Email Confirm" input text-box ONLY when the old email has been updated. Can someone point out where I might have gone wrong? :( ...
I'm looking to implement AJAX form submission in Rails using a button. Here's my current code: Controller: def list @events = ExternalEvent.all if !params[:city_id].nil? @events = @events.where(city_id: params[:city_id]) end respond ...
I have successfully implemented a CSS filter to blur an element, however, I am looking for a way to make the blur ease in smoothly. I'm not sure which css property controls this easing effect? Initially, I tried using transition: 1s; but that ended u ...
Last week, I was handed a Python-based monitoring and notification tool to work on. My task is to develop a proof of concept dashboard using the data collected by this tool over the years. The catch is that I'm fairly new to Python and have never dabb ...
Currently, I've been in the process of converting a jQuery script into vanilla JavaScript to completely eliminate the need for jQuery. The main functionality of the code includes: Upon clicking a button on the front end, an ajax request is sent, upda ...
#popBox{ width:100%; height:100%; position:fixed; left:0; top:0; border-collapse:collapse; background:black; opacity:0.8; display:none; } <table id="popBox"> <tr> <td></td> <td></td> ...
I'm working on a jQuery function that involves dynamically loading images and checking their width. I have two JavaScript functions, func1() and func2(), that I want to call from within the jQuery function in order to check the width of each image. T ...
I have a link on a page that toggles the search form on and off. Let's say you search for Spring term classes, then you want to search for a new term and click "Start a new Search." The link works great and toggles just fine...BUT the toggle automatic ...
In the code below, I am retrieving some data to use for a counter. The problem is that after the initial page load and one interval, things start to go haywire. The calls are made without any delay and the counter cannot react before the next call is made. ...
I am struggling to make the $.mobile.changePage() function work correctly. The issue is that when I navigate from a page called "report outage" to another page named "new outage" and then return to the "report outage" page, clicking the add button always t ...
Below is the jquery code I am using: $.post('action/edit_breakdown.php', {id: id,program: program,st_name: st_name,p_name: p_name,fob_name: fob_name,track_no: track_no,date: date,currency: currency,image_name: image_name}, function(data){ ...
Currently, I am working on developing a webpage where I need to use jQuery to register a click using the items class and then extract the ID of that particular object. For example: HTML: <div class="exampleclass" id="exampleid1"></div> <d ...
I'm having some trouble with my website's display in IE8. It looks great in IE9, Firefox, and Chrome, but in IE8 it appears all jacked up. I'm using WordPress with Thesis Themes and editing custom.css for my changes. You can view my site he ...
I am working on a loop that generates multiple boxes with masonry layout containing post excerpts. <div class="box"> <div class="image"> <img src="" /> </div> <div class="info"> <h3>//title output with ...
In my current CSS file, I have defined two id selectors: #TableHead { font-family: Arial, Helvetica, sans-serif; font-size:11px; font-weight: bold; color: #000000; border-top-width: thin; border-top-style: solid; border-top-color: #A9AAAA; border-bottom-w ...
Currently, I am facing an issue on my website where I need to hide the last two out of six user photos when viewed on mobile or smaller screens. I believe using an @media code is the solution, but I'm unsure about the specific code needed to achieve t ...
The webpage features a user details table with a functionality to delete users. To remove a user, I must select the row based on the username and then click the "Delete" button. The structure of the HTML table is as follows: <table id="tblUsersGrid" ce ...
Looking to enhance my webpage with a backstretch image slideshow effect using the body background, but encountering issues. The code I have included before the </head> tag is: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery ...