Add caption div to image after expanding on rollover with jQuery - javascript

I'm using this jQuery to expand images on hover:
http://jsfiddle.net/bAHXJ/
Now I'd like to add a div for a caption, using the title, something like this:
$("img").hover(function() {
$(this).each(function(){
var title = this.title;
$(this).after('<div class="caption">'+ title +'</div>');
});
});
When I add that the div appears behind the image:
http://jsfiddle.net/k62NY/
I tried .append instead of .after (still fuzzy on the difference) and nothing appeared.
How do I make the caption div appear below the expanded image, after the image is finished expanding?

I modified your CSS slightly by adding a .caption class and .hover class. I also modified your jQuery a lot to make it more readable (for me, haha, so that I could fix it) :
http://jsfiddle.net/k62NY/4/
Now ... I wasn't trying to make it look AMAZING, as that's your job. Functionally though, it does as you wish.

Your images are positioned using absolute. So the div appears behind the image. If you want it to appear in front you will need to make a CSS change. Let me see if I can get a fiddle with what you want.
Your jquery is bad: change
var title = this.alt;
to
var title = $(this).alt;

Related

Changing background of a div when hovered over a link Vanilla JS

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;
}

Prepend/Append a div offscreen?

I'm trying to create a div that has two buttons: one to prepend a div of the same size to the right of the original without shifting the position of the original div and another button to append a div to the right of the original.
Appending to the left works fine, but prepending left shifts the whole container over shown here
code I'm using to add elements:
$(document).ready(function() {
$("#back").on("click", function(e) {
e.preventDefault();
$("#center").before("<div id='back' class='inside'></div>");
});
$("#next").on("click", function(e) {
e.preventDefault();
$("#center").after("<div id='next' class='inside'></div>");
});
});
How do I prepend the div left of the original so that it is "off screen" without shifting the position of the original div? Thanks in advance!
The solution to your problem is best solved using CSS.
Simply set display:none to the left DIV upon initial insertion.
Change this:
$("#center").before("<div id='back' class='inside'></div>");
To this:
$("#center").before("<div id='back' class='inside' style='display:none;'></div>");
And remove that CSS attribute when you want it visible:
$('#back').css('display', '');
However, the use of inline styling is, in most cases, bad practice. You should consider setting the display:none via a stylesheet assigned to the element ID #back. For maintainable code, you want to keep clear separation of style (CSS), structure (HTML) and UI functionality (JS).
try to set the following CSS for the containing div
div.whatever {
position:absolute;
overflow:hidden;
}

Change PAGE background (not element BG) on any element hover.

I've been trying to change my PAGE background whenever I hover over an element. Currently I've uploaded different images into my web server, I would like to change my page background from one of the images, to another image when I hover over a div. How would I go about doing this? It doesn't matter if it's javascript, jquery, or css, the more answers the better so that I could learn a new way to do this :)
My css:
body{
background: url(../html/dest/back2.png);
height: 100% ;
background-attachment: fixed;
}
I have uploaded a new image called back2a.png. I would like to load this image in place of my previous image (back2.png) whenever the user hovers over an element. (Any element)
Note: I would also like to maintain the background-attachment:fixed on the new image.
The new image is simply a change of hue/saturation done in photoshop, nothing drastic it's the same size and everything.
Here is the page I'm trying to do this on.
http://hourtimeagent.com/html/c++.php
I appreciate answers! thank you!
jQuery:
$("div").hover(function() {
$("body").css("background", "url(../html/dest/back2a.png)");
});
If you want to change it back afterwards you can use the jQuery .blur method:
$("div").blur(function() {
$("body").css("background", "url(../html/dest/back2.png)");
});
The div selector can be changed to anything you want it to be on hovering. For example, if you have a div with the id of hover, use something like this:
$("div#hover").hover(function() {
$("body").css("background", "url(../html/dest/back2a.png)");
});
Or a class of hover:
$("div.hover").hover(function() {
$("body").css("background", "url(../html/dest/back2a.png)");
});
Javascript
To use straight javascript you'd have to add events to the elements on your page that you want to change the background with. I'd stick with jQuery as it does it for you, but if you'd prefer to use just javascript on a div you'd add:
<div onhover="myFunc();"></div>
And then the javascript would look like the following:
<script type="text/javascript>
function myFunc() {
document.body.style.background = "url(../html/dest/back2a.png)";
</script>

How to show the overflow:hidden content using jQuery / JS when a user clicks on an image?

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/

Text on image mouseover like youtube

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.

Categories