I'm fairly familiar with HTML and CSS, but for the life of me i cannot get this 'back to top' button to work on my tumblr page. I would really appreciate a keen eye to help me out here. I have added a JQuery code to enable the text to fade in and out when scrolling (infinite scroll past 100).
Thanks very much for your help.
L
<html>
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<link href='http://static.tumblr.com/twte3d7/DHIm5wmgi/stylesheet.css' rel='stylesheet' type='text/css'>
<meta name="color:Background" content="#ffffff"/>
<meta name="color:Text" content="#000000"/>
<meta name="color:Video Corner Fold" content="red">
<meta name="font:Font" content="'BrownBold'">
<meta name="if:Show Captions" content="0"/>
<meta name="if:Uppercase Links" content="0">
<meta name="if:Fade On Hover" content="0">
<meta name="if:Show Tags on Index Page" content="0">
<meta name="image:header" content="0"/>
<style type="text/css">
#header {
width:100%;
height:100%;
background: url('{image:header}')no-repeat;
position:fixed;
margin: 15px 50% 0 50%;
top:0px;
left: -300px;
right: -300px;
z-index:9999;
}
body {
background-color:{color:Background};
font-family:{font:Font};
color:{color:Text};
font-size:17px;
line-height:25px;
}
a {
padding-bottom:2px;
color:{color:Text};
text-decoration:none;
border-bottom:2px solid;
}
img {
border: none;
border : 0;
outline:none;
}
a img {
outline: none;
}
iframe#tumblr_controls {
display:none;
}
#wrapper {
{block:PermalinkPage}
width:580px;
{/block:PermalinkPage}
position:relative;
margin: 50px auto;
}
#post {
padding:40px;
}
#post img {
width:100%;
}
#post img:hover {
{block:IndexPage}
{block:IfFadeOnHover}
opacity:0.5;
{/block:IfFadeOnHover}
{/block:IndexPage}
}
#post embed, #post iframe {
width:100% !important;
}
#post .photoset a:first-child {
display:block !important;
border:0 !important;
padding:0 !important;
}
#post .photoset a {
display:none;
}
.title {
width:100%;
text-align:center;
margin:auto;
position:fixed;
top:20px;
z-index:5000;
}
.follow {
position:fixed;
margin: 0px 30% 0 16.3%;
bottom:20px;
z-index:5000;
}
.archive {
position:fixed;
margin: 0px 20px 0 30%;
bottom:20px;
z-index:5000;
}
.message {
position:fixed;
bottom:20px;
left:20px;
z-index:5000;
}
.random {
position:fixed;
margin: 0px 0px 0 60%;
bottom:20px;
z-index:5000;
}
#toTop {
width:100%;
margin: 0px 0px 0 43%;
z-index:5000;
position:fixed;
display:none;
bottom:20px;
cursor:pointer;
}
.player {
background:#000;
}
ul.chat {
list-style-type:none;
padding:0;
margin:0;
}
#infscr-loading {
display:none !important;
}
.corner {
top:6px;
right:40px;
position:absolute;
padding:1em 1.5em;
margin:2em auto;
color:#fff;
overflow:hidden;
z-index:4000;
}
.corner:before {
content:"";
position:absolute;
top:0px;
right:0px;
border-width:0 25px 25px 0;
border-style:solid;
border-color:#fff #fff {color:Video Corner Fold} {color:Video Corner Fold};
background:#fff;
display:block; width:0; /* Firefox 3.0 damage limitation */
}
{CustomCSS}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://masonry.desandro.com/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/twte3d7/4Wjm5wj58/disassemble_v3.js"></script>
<script type="text/javascript">
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
$('#toTop').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});
</script>
</head>
<body>
<div id="header"></div>
{block:IfUppercaseLinks}<div style="text-transform:uppercase">{/block:IfUppercaseLinks}
<div class="title">{Title}</div>
<div class="archive">Archive</div>
<div class="message">Message</div>
<div class="follow">{block:PermalinkPage}{block:Posts}Reblog / {/block:Posts}{/block:PermalinkPage}Follow</div>
<div class="random">Random</div>
<div id="toTop">Back to top</div>
{block:IfUppercaseLinks}</div>{/block:IfUppercaseLinks}
<div id="wrapper">
{block:Posts}
<div id="post"
{block:IndexPage}
{block:Post1}style="width:380px"{/block:Post1}
{block:Post2}style="width:410px"{/block:Post2}
{block:Post3}style="width:500px"{/block:Post3}
{block:Post4}style="width:290px"{/block:Post4}
{block:Post5}style="width:320px"{/block:Post5}
{block:Post6}style="width:460px"{/block:Post6}
{block:Post7}style="width:530px"{/block:Post7}
{block:Post8}style="width:280px"{/block:Post8}
{block:Post9}style="width:340px"{/block:Post9}
{block:Post10}style="width:400px"{/block:Post10}
{block:Post11}style="width:260px"{/block:Post11}
{block:Post12}style="width:370px"{/block:Post12}
{block:Post13}style="width:520px"{/block:Post13}
{block:Post14}style="width:310px"{/block:Post14}
{block:Post15}style="width:250px"{/block:Post15}
{/block:IndexPage}
{block:PermalinkPage}style="width:500px"{/block:PermalinkPage}
>
{block:Text}
{block:Title}{Title}{/block:Title}
{Body}
{/block:Text}
{block:Link}
<a href="{URL}" class="link" {Target}>{Name}</a>
{block:Description}<div class="description">{Description}</div>{/block:Description}
{/block:Link}
{block:Quote}
<a style="border:0 !important" href="{Permalink}">"{Quote}"</a>
{block:Source}
<p>— {Source}</p>
{/block:Source}
{/block:Quote}
{block:Photo}
{block:IndexPage}<div style="border:none"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" border="0"/></div>{/block:IndexPage}{block:PermalinkPage}{LinkOpenTag}<div style="border:none"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></div>{LinkCloseTag}{/block:PermalinkPage}
{block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
{/block:Photo}
{block:Chat}
{block:Title}<h2>{Title}</h2>{/block:Title}
<ul class="chat">{block:Lines}<li class="user_{UserNumber}">{block:Label}<span class="label">{Label}</span>{/block:Label} {Line}</li>{/block:Lines}</ul>
{/block:Chat}
{block:Video}
{block:IndexPage}<div class="corner"></div>{/block:IndexPage}
<div id="video">
{Video-500}
</div>
{block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
{/block:Video}
{block:Photoset}
{block:IndexPage}<div class="photoset">{block:Photos}<img src="{PhotoURL-HighRes}">{/block:Photos}</div>{/block:IndexPage}
{block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
{block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
{/block:Photoset}
{block:Audio}
{block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}
<div class="player">{AudioPlayerBlack}</div>
{block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
{/block:Audio}
{block:IfShowTagsOnIndexPage}{block:IndexPage}{block:Date}Posted {TimeAgo} and has {NoteCountWithLabel}{block:HasTags}<br>{block:Tags}#{Tag} {/block:Tags}{/block:HasTags}{/block:Date}{/block:IndexPage}{/block:IfShowTagsOnIndexPage}{block:PermalinkPage}{block:Date}Posted {TimeAgo} and has {NoteCountWithLabel}{block:HasTags}<br>{block:Tags}#{Tag} {/block:Tags}{/block:HasTags}{/block:Date}{/block:PermalinkPage}
</div>
{/block:Posts}
{block:NextPage}<div id="page-nav">{/block:NextPage}
</div>
</body>
</html>
The #header element sits above .archive, #toTop and .random due to its higher z-index (5000 / 9999).
If you make the following change, #toTop is clickable and works as desired:
#header {
width: 100%;
height: 100%;
background: url('http://static.tumblr.com/e72d71d9df861d718427e82229f48499/yo2ke79/iMEn5bbly/tumblr_static_9kpmrzvkfosoo4o0g8k4g80oc.png')no-repeat;
position: fixed;
margin: 15px 50% 0 50%;
top: 0px;
left: -300px;
right: -300px;
z-index: 4999;
}
There is another error though. It seems two versions of jQuery are being requested:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://masonry.desandro.com/js/jquery-1.7.1.min.js"></script>
The later, http://masonry.desandro.com/js/jquery-1.7.1.min.js, fails as it can't be found. I can't see why you need two versions of jQuery or why you are hot linking.
Either use a CDN (like the first link) or upload the javascript directly to Tumblr's own CDN.
Instead of messing around with scrollTop, just use a link.
Scroll to Top
This will take you straight back to the top. Admittedly no animations but if you're just looking for basic functionality then it's perfect.
Related
I am trying to place a responsive sticky footer over a full screen slideshow. For the sticky footer I am using this solution ( a Javascript and CSS solution ) Sticky footer link. Slideshow is a Javascript slideshow. But I am not able to get the sticky footer to work with the slideshow. Once I remove the slideshow, the sticky footer works!. I am not sure what is going on here but I do think that it has to do something with the absolute positioning of the footer. Here is a live link to the problem link with the problem Is there a way I can make the sticky footer work ?
Here is my CSS and HTML...
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta charset="utf-8">
<meta content="by RT." name="author">
<meta content="Copyright © 2014 rajeevthomas.com" name="Copyright">
<link href="/root//favicon.ico" rel="icon" type="image/x-icon">
<title>Home Page title</title>
<meta content="Photographer Website" name="keywords">
<meta content="Home Page Description" name="description">
<link href="/styles.css" rel="stylesheet" type=
"text/css">
<script src="/jquery-2.1.4.min.js" type=
"text/javascript">
</script>
<script src="jquery-bgstretcher-3.3.1.min.js" type=
"text/javascript">
</script>
<style>
.bgstretcher-area {
text-align: left;
height:100%;
}
.bgstretcher-page {height:100%;}
.bgstretcher-container{height:100%;}
.bgstretcher {
background: black;
overflow: hidden;
width: 100%;
position: fixed;
z-index: 1;
height:100%;
}
.bgstretcher,
.bgstretcher ul,
.bgstretcher li {
left: 0;
top: 0;
height:100%;
}
.bgstretcher ul,
.bgstretcher li {
position: absolute;
}
.bgstretcher ul,
.bgstretcher li {
margin: 0;
padding: 0;
list-style: none;
}
/* Compatibility with old browsers */
.bgstretcher {
_position: absolute;
}
.bgs-description-pane {
display: block;
background: rgba(0, 0, 0, 0.7);
position: relative;
z-index: 10000;
padding: 15px;
color: #ffffff;
font-size: 14px;
}
.footer{
margin: 0 auto;
text-align:center;
clear:both;
position: absolute;
width: 100%;
bottom:0;
height:10%;
color:#FFF;
}
/* NAV */
header {
background-color: rgba(29, 11, 9, 0.6);
border-radius:0px;
padding-top:.5rem;
padding-bottom:.25rem;
box-shadow: 0 0 26px rgba(0, 0, 0, 0);
}
.nav {
width:100%;
text-align:center;
list-style:none;
position:relative;
z-index:10;
margin-top:0.35rem;
}
.nav li {
padding:0px 0px;
text-decoration:none;
font-size:.85rem;
text-align:left;
position:relative;
display:inline-block;
margin-left:2rem;
}
.nav > li:hover > a{
background-color : #5c331a;
}
.nav li a:hover {
color:#FFF;
}
.submenu > li:hover > a{
background-color : #5c331a;
}
.nav li a {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color:#a86b4b!important;
}
p{color:#FFF;}
</style>
</head>
<body>
<div class="container">
<header>
<nav>
<ul class="nav">
<li>
HOME
</li>
<li> MY GALLERIES
</li>
<li> SEARCH
</li>
<li> ABOUT ME
</li>
</ul>
</nav>
</header>
<article>
<section>
<div class="intro">
<p>Welcome to my gallery!</p>
<div class="underline"></div>
</div>
</section>
</article>
<script type="text/javascript">
jQuery(function($){
$("body").bgStretcher({
images: ["1-1.jpg", "2-1.jpg"],
imageWidth: 1024,
imageHeight: 768
});
});
</script>
<div class="push"></div>
<div class="footer">
<div id="seeker">
<form accept-charset="utf-8" action="/root/photos/search" id=
"PhotoCmspageForm" method="get" name="PhotoCmspageForm">
<input id="search" name="search" type="text" value=
""><input id="find" type="submit" value="Search">
</form>
</div>
<p class="footnote">Copyright © 2015 rajeevthomas.com</p>
</div>
</div>
<script>
$('a').each(function() {
if ($(this).attr('href') != '#' && $(this).attr('href') != ''&& $(this).attr('href') != '/' && $(this).attr('href').indexOf('?') < 0) {
$(this).attr('href', $(this).attr('href') + '/');
}
});
</script>
<script>
var bumpIt = function() {
$('body').css('margin-bottom', $('.footer').height());
},
didResize = false;
bumpIt();
$(window).resize(function() {
didResize = true;
});
setInterval(function() {
if(didResize) {
didResize = false;
bumpIt();
}
}, 250);
</script>
</body>
</html>
I'm confused as to how I am supposed to make my posts disappear while scrolling...I want my posts to be like this http://yukoki.tumblr.com/page/4 (so once you scroll, it disappears like his black stary header for example). This is my theme http://macaiylaedwards.tumblr.com/ I'm basically using images as my header if thats the problem but there must be a solution. Tried making another wrap around the posts but it didn't work. I'll leave my coding here as well..thanks.
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title></title>
<link rel="shortcut icon" href="{Favicon} />"
<meta name="color:Sidebar Background" content="#000000" />
<meta name="color:Background" content="#000000" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
a:link, a:active, a:visited{
color: {color:Link};
color:#000000;
}
body{
color:#000000;
background-color:{color:bg};
background-image:url({image:background});
Background-attachment: fixed;
background-repeat:no-repeat;
background-size:cover;
margin:0;
word-wrap: break-word;
}
pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}
.desc{
position:fixed;
margin-top:280px;
margin-left:860px;
width:400px;
height:300px;
font-family:0px;
letter-spacing:1px;
}
.nav{
position:fixed;
margin-top:300px;
margin-left:880px;
}
.pt{
width:500px;
margin-top:400px;
margin-left:700px;
background-color:#fff;
position:absolute;
padding:5px;
}
.pt2{
padding:10px;
background-color:#fff;
width:500px;
float:left;
margin:2px;
background-color:transparent;
}
.cutebox{
position:auto;
width:auto;
border:1px solid #292c34;
}
</style>
</head>
<body>
{block:More}READ MORE{/block:More}
<div class="desc">
{description}
</div>
<div style="position: fixed;width: 100%;z-index: 10;">
<img src="http://i1298.photobucket.com/albums/ag50/macaiyla/world_zpswu8twdm2.png" height=650 style="position:fixed;bottom:600px;left:750px;z-index:999"/>
<img src="http://i1298.photobucket.com/albums/ag50/macaiyla/888_zpsopwexxl4.png" height=210 style="position:fixed;bottom:720px;left:550px;z-index:999"/>
</div>
<select style="width: 200px; border: 0px solid; padding: 3px; color: #292c34; background-color: #f1f1f1; font-family: calibri; text-transform: uppercase; font-size: 8px; letter-spacing: 1px; position:fixed;bottom:740px;left:880px;z-index:999" onchange='location=this.options[this.selectedIndex].value;' style='width:100px;'>
<option>Explore</option>
<option value="http://www.tumblr.com/home">Home</option>
<option value="http://www.tumblr.com/about">About</option>
<option value="http://www.tumblr.com/home/photography">Photography</option>
<option value="http://www.tumblr.com/contact">Contact</option>
<option value="http://www.tumblr.com/ask">Ask me</option>
</select>
<div class="pt">
{block:posts}
<div class="pt2"
{block:Photo}
{LinkOpenTag}<img src="{PhotoURL-500}" />{LinkCloseTag}
<div class="cutebox">
{block:Caption}<center>{Caption}</center>{/block:Caption}
</div>
{/block:Photo}
</div>
{/block:posts}
</div>
</body>
</html>
Here is a basic example using some of the code from the tumblr that you linked to.
The template has a div at the top of the theme with the id of top:
<div id="top"></div>
This div has certain css properties, the important one being position:fixed (which means it is always in the viewport when scrolling.
#top {
background-image: url(http://38.media.tumblr.com/tumblr_m8nhk3w96X1r9g6hvo2_250.gif);
top: 0;
left: 0;
width: 100%;
height: 110px;
position: fixed;
z-index: 1001;
}
You have to specify the width when using fixed positioning so in this case set it to 100%. The item also has a height, so in this instance I have added the same amount of padding to the next element as the height of the top div. Otherwise the next element would be hidden beneath the fixed header.
jsfiddle: http://jsfiddle.net/lharby/6Lbtsfwx/
2 part question.
So I want to be able to click the square at the middle which should slide the top left box to the right horizontally, and the top right box will slide to the bottom vertically, etc.
Duration being 2 seconds for the slide.
$(document).ready(function(){
$("#container").click(function(){
$("#box1, #box3").switchClass("horizontal", "newVertical", 1000);
$("#box2, #box4").switchClass("vertical", "newHorizontal", 1000);
});
});
in Fiddle animation is running. Does NOT run in chrome or firefox. Am I using the correct cdn?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cie Studios | Solution</title>
<!--Stylesheet-->
<link rel="stylesheet" href="ciestyle.css">
</head>
<body>
<section id="main">
<div id="container">
<div class="horizontal" id="box1">1</div>
<div class="vertical" id="box2">2</div>
<div class="vertical" id="box3">3</div>
<div class="horizontal" id="box4">4</div>
</div>
<label>Fig 1.2</label>
</section>
<!--Google JQuery Lib -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<!--Javascript -->
<script src="ciescript.js"></script>
</body>
</html
CSS
* {
margin:0px auto;
}
#main {
height:100%;
width:100%;
margin-top:20%;
text-align:center;
}
#container {
display:block;
border:1px solid #000;
background-color:#333333;
height:151px;
width:151px;
}
.horizontal {
width:100px;
height:50px;
}
.vertical {
width:50px;
height:100px;
}
.newHorizontal {
width:100px!important;
height:50px!important;
float:left!important;
border:0px!important;
}
.newVertical {
width:50px!important;
height:100px!important;
float:right!important;
border:0px!important;
}
#box1, #box3 {
float:left;
}
#box2, #box4 {
float:right;
}
#box1 {
background-color:#ffffff;
border-bottom:1px solid #000;
}
#box2 {
background-color:#cccccc;
border-left:1px solid #000000;
}
#box3 {
background-color:#999999;
border-right:1px solid #000000;
}
#box4 {
background-color:#666666;
border-top:1px solid #000000;
}
JQUERY
$(document).ready(function(){
$("#container").click(function(){
$("#box1, #box3").switchClass("horizontal", "newVertical", 1000);
$("#box2, #box4").switchClass("vertical", "newHorizontal", 1000);
});
});
http://jsfiddle.net/pcdqz/1/
JqueryUI has a dependency on Jquery.
Add <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> or a similar cdn link prior to loading JqueryUI.
My images were centering perfectly until I decided to place an image behind another and use z-index. I was using relative positioning, but after moving to absolute, it aligns to the left.
How can I center it, even if window is resized?
Heres my code in a jsfiddle:http://jsfiddle.net/WJPhz/
HTML
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"> </script>
<center>
<div id="sign" style="z-index:1">
<img src="http://s9.postimg.org/bql0ikclb/dope.png" alt"">
</div>
<div id="numbers" style="z-index:0">
<img src="http://s9.postimg.org/z3j212sov/image.png" alt"">
</div>
</center>
CSS
#sign {
cursor: pointer;
max-width: 241px;
position:absolute;
}
#numbers {
cursor: pointer;
max-width: 241px;
position:absolute;
}
Javascript
$(document).ready(function() {
$('#sign').hide().delay(1000).fadeIn(3000);
$('#numbers').hide().delay(2000).fadeIn(3000);
$("#sign").click(function() {
$('#sign').fadeOut(3000);
});
});
A workaround would be to put your images in another div and center that div:
html
<div class="center">
<div id="sign">
<img src="http://s9.postimg.org/bql0ikclb/dope.png" alt"" />
</div>
<div id="numbers">
<img src="http://s9.postimg.org/z3j212sov/image.png" alt"" />
</div>
</div>
css
.center {
position:relative;
max-width: 241px;
margin:0 auto;
}
#sign {
cursor: pointer;
max-width: 241px;
position:absolute;
top:0;
left:0;
z-index:2;
}
#numbers {
cursor: pointer;
max-width: 241px;
position:absolute;
top:0;
left:0;
z-index:1;
}
http://jsfiddle.net/peteng/WJPhz/2/
Try this one maybe this can help http://jsfiddle.net/markipe/WJPhz/1/
CSS
left:50%;
margin-left: -120px; /*div width divide by 2*/
#sign {
cursor: pointer;
max-width: 241px;
position:absolute;
margin-left:calc(50% - 120px);
}
#numbers {
cursor: pointer;
max-width: 241px;
position:absolute;
margin-left:calc(50% - 120px);
}
This should work.
I am trying to make overlay over image while dragging but its also moving image when I move my textarea. So I want my edit area be transparent and overlay image. Please help
Here is what I have
<head>
<style>
.positionable {
width:100px; height:100px;
position:absolute;
}
.dragRegion {
background-color:#FFF; color:#000;
cursor:move;
top: -2px; left: -2px;
position: absolute;
font-size:14px; line-height:14px;
margin: -5px;
padding-left: 10px;
padding-top: 10px;
background-image:url('arrow_move.png');
background-repeat:no-repeat;
}
.editable {
width: 150px; height: 150px; padding: 0.5em;
position:relative;
}
</style>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" type="text/javascript"></script>
<div class="positionable">
<div class="dragRegion"/>
<textarea id="resizable" rows="5" cols="20"></textarea>
<img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" style="z-index: 100" />
<script type="text/javascript">
$('.positionable').draggable({handle: '.dragRegion'});
$('.editable').resizable();
</script>
</div>
Use z-index on the draggable object.
For example:
.dragRegion {
z-index:500
.... old css code
}
You set the code in your CSS