We Keep Coding

Display dropped link in a div and the dropped div will be inner div and clickable

I am new in javascript and jquery.
I am working with a self project called Bookmark Visualization and I need to make dropable link as an inner div and it will be clickable. I make my div Content Editable.
Html
<div id="field" contenteditable="true">This is a test #hath</div>
Style
#mydiv{ width: 300px; height: 300px; border: 1px solid #000; }
Is there anyone to make me feel great.
Thanks in advance

You can make a div clickable by using an a class...
HTML
<div id="my-clickable-div"></div>
CSS
#my-clickable-div {position:relative; float:left; width:100%; height:200px; background:#000;}
a.my-clickable-div {display:block; height:100%; width:100%; text-decoration:none;}

problems while trying to make a text editor

Here i am trying to make a text editor which has two characteristics.
It will increase size with the increasing amount of text .
2.It can be pulled up or down with mouse( i haven't implemented it yet,so it is out of question now)
I have put a down side indicator image at the bottom of the editor div.
problem is:
1.When text reaches at the bottom it interacts with the indicator image.I want it in such a way so that,when text reaches a sudden point
above the indicator image it will expand downward.
2.indicator image comes after i enter a character in the editor.I want it to appear from the beginnning.
3.There is an issue with ENTER key.The text pointer comes to the image and new line is added with the second enter.
That's the overall situation.I tried my best to explain the problems.How can i fix this ? If there is any better way to do this please let me know.
#editor{
position:relative;
width:400px;
height:auto;
border:1px solid black;
word-wrap: break-word;
padding-left:4px;
padding-right:4px;
box-sizing:border-box;
overflow-y:scroll;
}
<div id='editor' contenteditable='true' ><img src='http://s22.postimg.org/rh9bx9a3h/ind.png?noCache=1437598902' style='position:absolute;bottom:0px;left:200px;cursor:n-resize;'/> </div>

Try this:
HTML:
<div id='editor' contenteditable='true' ></div>
CSS:
#editor{
position:relative;
width:400px;
height:auto;
border:1px solid black;
word-wrap: break-word;
padding-left:4px;
padding-right:4px;
padding-bottom: 1em;
box-sizing:border-box;
overflow-y:scroll;
line-height: 1em;
background: no-repeat center bottom url("http://s22.postimg.org/rh9bx9a3h/ind.png?noCache=1437598902");
}
Take a look at it in action with this jsfiddle: https://jsfiddle.net/v4nwgcot/

Make an img fullscreen when clicked on

I would like to make an image full screen when clicked on. Similar to hitting f11 in most modern browsers. I've tried screenfull.js but it is really buggy and not cross browser supported that well.
My HTML
<div id="photoFrame">
<img src="uploads/picture01.jpg" class="img" alt="PictureOne" />
<img src="uploads/picture02.jpg" class="img" alt="PictureTwo" />
<img src="uploads/picture03.jpg" class="img" alt="PictureThree" />
... and so on ...
</div>
My CSS
#photoFrame {
clear: both;
margin-left: 0;
width: 100vw;
display: block;
white-space:nowrap;
height:auto;
float:left;
overflow-x:scroll;
overflow-y: hidden;
clear:left;
background-color:#333;
padding-top:40px;
padding-bottom:40px;
}
#photoFrame img {
width:auto;
max-width:80%;
height:50vh;
overflow-x:auto;
overflow-y: hidden;
padding-right:10px;
padding-left:10px;
}
Side Notes
The img class on the elements can be used by any Javascript.
Any help would be great or even a point in the right direction.

Try something like...
$(".img").click(function(){
$(this).height($(window).height());
$(this).width($(window).width());
});
edit
For an f11 style full screen plugin you should check out https://github.com/kayahr/jquery-fullscreen-plugin. Then edit my above code to...
$(".img").click(function(){
$(this).fullScreen(true);
});

You should use a plugin like lytebox which is very simple to use and would give you a good result of what you want to achieve:
http://lytebox.com/
Just download the js from the above site and include that into your page
How to use:
http://lytebox.com/howTo.php
Its pretty simple and exactly what you want to do.

Can't align vertically a .swf file to the middle

I inserted a .swf file to my page inside a div, and I tried to make it vertically aligned to the middle of this div, but it didn't work, only horizontally but that's not what I want.
I tried to place this file in another div inside the main div and change the alignment of this div as well.
Any suggestions?

Here is a good way I use to center elements horizontally and vertically:
<div style="position:fixed; top:0; left:0; width:100%; height:100%;">
<div style="height:100%; display:table; margin:0 auto;">
<div style="vertical-align:middle; display:table-cell;">
<div><p>This is a fully-centered div!</p></div>
</div>
</div>
</div>

Hmm... its kinda hard to answer without a code snippet.
Here is an article for creating wrappers around Flash content: http://livedocs.adobe.com/flex/3/html/help.html?content=wrapper_13.html
Scroll down to the table, where they start talking about "align" or just do a page search for the word "align" to see what they have to say.
Here is also a quick idea, I have noooo idea whether or not it works, just food for thought:
div.SWFContainer object, div.SWFContainer embed {
display: inline-block;
margin: auto 0px auto 0px;
width: auto;
vertical-align: middle;
}

Have column extend to bottom of browser with an empty header

<div id="content">
<div id="header">
</div>
<div id="main-content">
</div>
</div>
html, body{height:100%;margin: 0px; padding: 0px; background-color: black;}
div#content{width:600px; margin: 0 auto; height:100%;}
div#header{width:600px; height:200px;}
div#main-content{width:600px; height:100%; background-color: white;}
As you can see, adding a header pushes everything down. I want main-content to extend to the end of the browser.
I think i worked around this issue before by creating a header with an image similar to my background in order to fake the appearance, however my background i'll be using is much too complicated.
Are there any methods to do this? possibly a working javascript fix?

You can make your main-content div positioned absolutely and then specify its top and bottom attributes. I've setup a jsfiddle here: http://jsfiddle.net/wrn8Y/1/
div#main-content{
position: absolute;
top: 200px;
width:600px;
bottom: 0px;
background-color: white;
}
Note that the top attribute is set to the bottom of your header, and the bottom is set to zero to hit the bottom of the page. If you wanted to have a footer you could change the bottom attribute to accommodate the footer.
Also you can do this with javascript, I generally use JQuery so here is some JQuery code that gets it done:
$('div#main-content').height($(document).height() - $('div#header').height());
This javascript (Jquery) will work with relatively positioned divs and the only css you would need to change is to remove the "height: 100%" on the "div#main-content" style.