How can I show text on top of my images when a mouse moves over them.
For example you see on youtube you have an add to playlist button on the thumbnails. How can I setup something similar but for a like button.
I am not looking for a tooltip. I want the text to shown on the image when the mouse is hovered over it.
Put each of your images inside a seperate "container" div. These divs should have the position: relative attribute. Give all the images the class name 'singleImage' Put another div inside of this each of the "container" divs with position: absolute and display none. Set the class name for these divs to 'toolTip'. This div will be the tooltip. Put a title attribute on your images. You will need jQuery to rig up the hovering or plain javascript if your feeling adventurous
In jQuery you would do something like:
$('.singleImage').mouseover(function(){
var tt = $(this).parent().find('.toolTip');
tt.html($(this).attr('title'));
tt.show();
});
$('.singleImage').mouseout(function(){
var tt = $(this).parent().find('.toolTip');
tt.hide();
});
you are looking for tipsy I think
The functionality you are referring to is called a "tooltip". There are plenty of different plugins ciruclating out there that you may be able to utilize. Without having specific code, it will be hard for anyone to present a tailor-made solution.
Related
I am looking to change the background of one class of div's called "grid-light" when I hover over a link on the page. I feel my JS is correct but I am not getting the result I am looking for. Here is my code:
grid-light
JS
an element to hover over
class to change "grid-light" to
https://gyazo.com/f36d9970fa6100e2ac9af41a1d2d7a59
This link shows you what i think you're going for, you declare your variables,
on mouse over of your link1, it will change div1 items to red
on mouse out of your link1, it will change div1 back to black
Please let me know if i can clarify more!
It looks like you're trying to use the elements like jquery, and className is a React thing.
div1.className = "div1hovered";
Instead with javascript you can access the classList:
div1.classList.add("div1hovered");
Also recommended to do this with CSS:
div1:hover {
background-color: red;
}
I want to create an Image when the users hovers over a certain thing. I want some data on the image which I am creating dynamically through javascript. Attaching the image of what I need to do here,...
I want the Target Image to be dispayed on hover. Any idea how can I proceed with?
I guess you are looking for tooltip with image. Try these examples.
http://craigsworks.com/projects/qtip2/
http://calebjacob.com/tooltipster/
http://plugins.learningjquery.com/cluetip/
http://cssglobe.com/easiest-tooltip-and-image-preview-using-jquery/
http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/
http://vandelaydesign.com/blog/tools/jquery-tooltip-scripts/
You can try using jQuery's "hover" method and capture the mouse position from the callback function's event parameter. Then append a new absolutely positioned div and style it with the top and left parameter positions you acquired from the mouse position. Add any info that you need to display on the popup and append it to the newly created div.
Do you have any existing code?
Also you can try the
:hover
http://www.w3schools.com/cssref/sel_hover.asp and
:after
http://www.w3schools.com/cssref/sel_after.asp
and the content attribute
function goes in javascript:
function showIt(imgsrc)
{
document.getElementById('imageshow').src=imgsrc;
document.getElementById('imageshow').style.display='block';
}
function hideIt()
{
document.getElementById('imageshow').style.display='none';
}
For an example, as in twitter we click Expand on individual tweets and then it just expands giving links to the individual tweet or showing the image or video and also the time stamp.
And then on next click it just hides the expanded data.
Also how to show the show the mouse hand on hovering over the div rather than the mouse arrow.
Exactly like in twitter.
I hope using jQuery its possible. Can someone give me a sample code for implementing this.
??
you'll want:
$('.button').click(function(){
$('div').slideToggle();
});
Make sure you hide the $('div') selector
For expanding an extra section, you are going to want to have two divs. One will have the default information you want to show. The second will contain what you want to expand and show. Then you use something like:
$('#expand_button').click(function(){
$('#second_div').slideToggle();
});
For the curser: http://www.w3schools.com/cssref/pr_class_cursor.asp
Use something like:
div { cursor: arrow; }
I am building a feed reader and on my first page I show a lot of post previews. A user has the option to click on the title and visit the source link.
In addition I would like to give them the option to click on a small icon, like a plus sign + to view the rest of the post preview in my page.
As you can see on http://jsfiddle.net/BLUzJ/ I have set a max-height and overflow:hidden if the content of post preview is more than this. 95% of the post previews have a lot of text hidden.
For now the max-height is set to 10.3em as below
#text {
max-height:10.3em;
overflow:hidden;
}
When an icon in the post (I guess there will be in a corner of the post preview) is clicked, the max-height changes to allow user to read the rest.
My application is written in PHP, and I get the title, image, content from RSS feeds.
I think that this is a jQuery, JavaScript solution but I do not know how to do it.
Thank you for your ideas and examples.
Using jquery, since you added that tag: http://jsfiddle.net/r4F8Q/3/
added an element with class .toggle, which could be your icon
added css rule for #text.expanded which removed max-height
jquery adds/removes class expanded from element #text
Here is a starting fiddle. It expands on clicking the text. You would obviously have to do some more work to have a trigger that expands/collapses the section.
http://jsfiddle.net/BLUzJ/10/
To show all of the content of the post, you can set the max-height of the element whose icon has been clicked to auto. Once you get a hold of the element that you wish to expand (either by using document.getElementById("id") or by traversing the DOM), you can set this property by doing the following:
x.style.maxHeight = "none";
You can set this as the onclick event for the expand icon, if you wish. Do note that this will not animate the expansion; for that you should probably use something like jQuery.
EDIT: Updated the jsFiddle with a simple example, which expands when the title is clicked. http://jsfiddle.net/BLUzJ/6/
http://desandro.com/demo/masonry/docs/
I got this to display nicely. But,
How can I modify this plugin so that when someone clicks an object, it does the nice "re-ordering" effect as seen in: http://desandro.com/demo/masonry/docs/filtering.html#demo
And it moves the object "X" positions up or down the list?
Is it easy to modify this to do that?
From the moment that all elements has float:left; when the user click the button hide the element with specific classes, for example if he clicks grey, then will hide red and black. In jquery the above example would be like this:
$(document).ready(function(){
$("#grey-button").click(function(){
$(".red, .black").hide()
});
});
This will hide all elements with classes red and black, adding the css property display and value none.
This will make the browser don't "see" them, so the rest elements will be positioned in a different place, according the floats you have set for them.