Creating DIV on Button Click with input DATA and IMAGE like facebook - javascript

I'm doing a project that consists of posting updates with photos, like facebook timeline. so i created this
So i need the code for the following:
When the POST button is clicked, make a new DIV on the top of last post on the timeline that is similar to facebook. and the DIV must consist of Input text and the image that i uploaded. when I browsed this topic I found similar thread jQuery create and remove <div> by click , but it creates divs one after another. I need just the opposite of that.
Any help will much appreciated.

Use prepend instead of append to put a new div on the beginning of a container:
http://api.jquery.com/prepend/

I suggest you to create a empty div were you want them to appear (id: #start) and everytime you whant to post something, you can use jQuerys after (eg:$("#start").after('<div>text and formating</div>');).You can see some more examples here: http://api.jquery.com/after/

Related

Adding DIV's inside modal dialog HTML5

I tried to google but didnt find exactly I am looking for.
I need a sample example code or a resource link to create a modal dialog box and I want to have two boxes(div's) inside the dialog box.
I have to insert different content inside both the boxes(inside the dialog box) when the user clicks.
I know how to create a dialog box but, I would like to particularly know how to insert divs inside it.
I hope my question is clear. Please help.
If you just want to look at the code have a look at the work section of http://www.pixelvalet.com (ok! its my website but then it would help you right?).
The way i approached the issue is:
first i added the template (all the empty divs i needed which i would be populating later on) in the main html file itself
next i gave it a hidden css style to the parent which contained all the divs.
then i added a logic which would tell the browser the which link was clicked and then it would populate the divs in the template appropriately using ajax
it would then slowly fade in using jQuery
but then this isnt the only way you might do this. There are tons of plugins out there which help you create a modal box. but i opted for this route because i wanted it completely customised.
hope it helps.
I have used bootstrap modal for dialog box it works great you check it here:
http://getbootstrap.com/javascript/#modals
The basic idea is just put your dialog box code at bottom of you page,
<div id="my_dialog">
content
</div>
And you detach it in your jquery or other framework you are using or just pure js.
In jquery you can do this:
var my_dialog = $( "#my_dialog" ).detach();
now when ever you need to show it you just attach it to where you want to show it.
and before you attach it you can insert any content you want.
But I would suggest you to use bootstrap's modal much easier.

Ajax load to only load one of multiple classes on page

So on my page i have many blog posts that are all editable on the page.
When you click edit a text editor is displayed and then on clicking save the editor goes away and the original text comes back.
However, i want the text of the original post to reload to show the new information.
This:
$targetForm.find('.divid').load('page.php .divid');
Works fine if there is only one div on the page, but if there is more than one all of the posts get loaded into the currently editing div.
How can i do the same sort of thing as $targetForm.find but for the div to update?
So like:
$targetForm.find('.divid').load('page.php $targetForm.find('.divid')')
That sort of thing.
Thanks.
try to handle the click event first before updating the div :
$targetForm.find('.divid').on('click', function(){
$(this).load('page.php .divid');
});

Display Image on mouse-on hover

I am having this application where I need to have something like, when we bring the mouse over an employee's name, which is an actionlink , it is suppose to show the employee's image.
I am trying to do so using MVC, but am till far unable to do so.
Please can anyone help me out in this..
Thanks in advance for help.
This is a JavaScript thing, not an ASP.NET MVC thing. You'll take one of two approaches:
Put the image on page at load, but give it a class or otherwise style it to be hidden initially. Then you'll just need to add an JS event handler for the mouseover event of your links that will cause the image to display.
Again, you'll use a JS event handler tied to the mouseover event of your links, but you send an AJAX request for the image URL and then dynamically insert the image into the page based on the response. This is kind of overkill for something this simple though.
#1 is really the best way to go for this use case, and there's probably around 10 million articles, blog posts, tutorials, etc. online regarding hiding and showing content based on a JS event. Google your heart out.

Do not show photo twice in Prettyphoto

i have a tricky problem I'm not able to solve. I'm using jquery.prettyphoto.js to display a set of images in a "lightbox".
The first photo in that set is the "AvatarPhoto" and it's rendered twice on the page. First on top, standing alone and also in a slider with all the other photos. Both are linking to the same picture in the same gallery.
Take a look at this: http://jsfiddle.net/wtZLY/
okay I solved that based on halfer´s answer, simply gave the first link of "allFotos" an id :
$('#profilePicture').click(function() {
$('#foto_0').click();
});
but I wonder if I can´t use the prettyphoto API
$.prettyPhoto.open()
but looks like I there is no possibility to simply open the prettyPhoto[gallery1] down on the page. I would have to pass all images and titles as an Array and in my case this would be heavy repeating myself.
Your selector works on this attribute:
data-rel="prettyPhoto[gallery1]"
If it is not your intention to add the first picture to the gallery, remove the data-rel attribute from that image, and it will work.
Personally, I'd use standard tags/ids/classes for this. In your JS you could alternatively use this:
$("#allpictures a").prettyPhoto();
That will select all links that are a descendent of the allpictures element.
Addendum: if you want to open the gallery using your profile picture, then I suggest you use the above for the gallery items, but have a special click handler for the profile. Set up an id for each image, such that the profile picture can be used to determine the gallery copy. For example you could use profile_123 and gallery_123.
This will permit you to add a click handler on the profile image, derive the id of the gallery copy, and to raise the click event on that element.

How to choose a specific thumbnail photo on like button

I have a webpage i keep adding a like button app to but whenever i click like i get some random member phot of a lady on facebook representing my page. this is frustrating.
I find all this html script and i cant seem to put it together properly so will you just please give me a simple paste ready like button formula with a set specific thumbnail photo that I can choose to represent my own page?
Use the open graph properties for your webpage defined here:
http://developers.facebook.com/docs/opengraph/

Categories

Resources