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; }
Related
I am making a preview box that pops up when you click a gallery image and need to make it disappear when you click outside of it. I found many solutions but none work with my code. I think the problem is I may need a while loop but I tried several conditions and all were infinite.
This is the last solution I tried. The preview works but I can't get it to close when I click out.
DEMO
$('.portPic').click(function() {
if ($(this).attr('data-src2')) {
$('#clickedImg').attr('src', $(this).attr('data-src2'));
} else {
$('#clickedImg').attr('src', $(this).attr('src'));
}
$('#clickedImg').css('visibility', 'visible');
$('#clickedImg').blur(function() {
$('#clickedImg').css('visibility', 'hidden');
});
});
I've done a similar thing with a pop-out menu, where the user clicks "off" the menu and it closes. The same can be applied here.
I used an overlay div which spans the whole screen (with a translucent opacity - maybe 0.6 black or similar; or whatever colour you want) which gives a nice modal effect. Give it an id - let's say modal-overlay.
You can put it static in your page code, and set the display to none and make it the full-size of the page (through a CSS class).
<div id="modal-overlay" class="full-screen-overlay"></div>
Set the z-index of the overlay to higher than the rest of your page, and the z-index of your popup to higher than the overlay. Then when you show your popup, also set the visibility of the modal-overlay to visible, too.
In your script code, put an event handler for when the modal div is clicked:
$('#modal-overlay').click(function() {
$('#clickedImg').hide();
$('#modal-overlay').hide();
})
I would also use the .hide() jQuery method, which is easier than typing out the visibility.
Better still, if you have more than 1 thing going on (which you would with a modal overlay), wrap your "show/hide" of the popup in a hidePopup() or closePopup() method and call it onClick to save re-using code.
For effects when opening the popup/overlay, you can also use jQuery animations like .fadeIn() or .slideDown(). Use fadeOut and slideUp to hide.
These animations also perform the showing/hiding, so you wouldn't need to call .hide() or .show().
Check out this link to jQuery's API documentation for animations. Very useful and a good read.
Hope this helps!
You'll need to create a seperate div that is most likely fixed position that sits just one step lower (z-index) than your popped-up image. Attach a click handler to this div (overlay) and do your showing/hiding functions in there.
You can use modal photo gallery.
http://ashleydw.github.io/lightbox/
You can use this codepen code, too. SO is not letting me post the link here. So serach using thi "Bootstrap Gallery with Modal and Carousel".
Hope this helps..
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/
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.
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.
I have a table, but it is not in a list format, meaning not a column/row format. I look for specific cells to add a hover event that displays a description of the cell.
$("#TableID td").hover(function(){
//ifCellThatIWant
$(this).append("<span>Message that was brought in</span>");
},
function(){
$(this).children().remove();
});
The problem is right now is that the hover displays a span(with info. inside) that I used jquery to append the span to the cell when mouseover, which expands the cell, which is an effect that I don't like or want. I'm Trying to have an out of the table look,but still be by the cell that triggered the event; because if the span has a lot of info. in it, expanding the cell dynamically will start to look pretty nasty. Also will help if I had some type of css direction on how will I make the display for the mouseover "description" span look nice. My mind thought is that a way to accomplish what I want is giver the appended span the position of my mouse cursor when hover, but not sure if its the right approach or what the syntax would look like.
Make the span display as block and set the z-index greater than anything else on the page. Then you can absolute position it and set the left and top properties to the x and y positions of the mouse location.
EDIT:
Here's a demo of what I mean --> http://jsbin.com/odape. Instead of appending a span, I would suggest just creating a placeholder one at the bottom of your html to use for each cell and just change the text to display (not sure how you were bringing it in so I didn't add it in my example.