My code works perfectly with all browsers except IE. I tried every solution I could find on the forums with no luck. I am still learning JavaScript, so I will learn jQuery later. The issue is that in IE the slides appear vertically with no effect. Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="stylesheet...css" rel="stylesheet" type="text/css" />
<title>div test</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var slider = $('#slider1').bxSlider({
controls: false
});
$('#bx-prev').click(function () {
slider.goToPreviousSlide();
return false;
});
$('#bx-next').click(function () {
slider.goToNextSlide();
return false;
});
});
</script>
</head>
<body>
<div id="slider1">
<div>
<div id="wrapper">
<div id="head"><img alt="logo" align="left" src="logo.png"/></div>
<div id="main"> <div id="content">content</div> </div>
<div id="rash"><img alt="r" align="middle"
style="position:relative;top:-70px;"
src="image1.png"/></div>
<div style="clear:both"></div>
</div>
</div>
<div>
<div id="wrapper">
<div id="head"><img alt="logo" align="left" src="logo.png"/></div>
<div id="main"> <div id="content">content</div> </div>
<div id="rash"><img alt="r" align="middle"
style="position:relative;top:-70px;"
src="image1.png"/></div>
<div style="clear:both"></div>
</div>
</div>
<div>page3</div>
<div>page4</div>
</div>
<div id="bx-next">next</div>
<div id="bx-prev">prev</div>
</body>
</html>
And here is my style sheet:
div#head {
width:100%;
height:100px;
/*background-color:antiquewhite;*/
margin-bottom:100px;
}
div#content {
border-left: 2px solid #F0F8FF;
border-right: 2px solid #8a815d;
border-top: 2px solid #8a815d;
border-bottom: 2px solid #8a815d;
width:400px;
height:300px;
-webkit-border-radius: 0px 28px 20px 0px;
-moz-border-radius: 0px 28px 20px 0px;
border-radius: 0px 28px 20px 0px;
font-family:Arial,Helvetica,sans-serif;
color:#8a815d;
padding-left:100px;
background-color:#F0FFFF;
background-color: rgba(215,227,211,0.3);
position:relative;
top:20px;
left:0px
}
div#wrapper {
width: 100%;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0px;
}
div#main {
/* background-color:black;*/
width:50%;
height:360px;
float:left;
}
div#rash {
float:right;
/*background-color:blue;*/
height:360px;
width:50%;
}
body {
background-color: #E8F3F9;
background-image: url('squares layer.png');
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
/*next button*/
#bx-next {
position:absolute;
top:45%;
right:3px;
z-index:998;
width: 30px;
height: 30px;
text-indent: -999999px;
background: url(gray_next.png) no-repeat 0 -30px;
}
/*previous button*/
#bx-prev {
position:absolute;
top:45%;
left:4px;
z-index:998;
width: 30px;
height: 30px;
text-indent: -999999px;
background: url(gray_prev.png) no-repeat 0 -30px;
}
I am also having a similar problem, and I have not yet come to the conclusion but from what I have figured out so far is that to debug this problem you should start out by validating your code. http://validator.w3.org/ I copied your code and it said you had 5 errors so I think a start would be fixing these errors because IE is very picky and if you have any errors if could effect your formatting. Also I know that IE is picky about the Doc Type at the top of your code and if it is not correct it can also effect the formatting of the page. If I can get my similar problem fixed I will let you know because it is most likely the same problem you are having.
<div id="wrapper"> is defined twice. An ID needs to be unique for every element on your page. Same goes for <div id="head">, <div id="main">, <div id="content"> and <div id="rash">.
Also, have you tried debugging it in the IE console? Try and see if the console logs any errors at runtime. Then get back to SO and post those errors.
Cheers.
Related
This is my blog - http://quickeasycoder.blogspot.com/2018/07/code-player.html
It is not working as same as it was working in my browser. Every section up there in the blog come and merge upon each other.
This is working perfectly in my Google Chrome but it's not the case when I have uploaded it to my Blogger post. I think code is perfect but the thing may be in the layout of the blog. What should be done now?
<html>
<head>
<title>jQuery</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style type="text/css">
body {
font-family: sans-serif;
padding:0;
margin:0;
}
#header {
width:100%;
background-color: #EEEEEE;
padding:5px;
height: 30px;
}
#logo {
float:left;
font-weight: bold;
font-size: 120%;
padding: 3px 5px;
}
#buttonContainer {
width:233px;
margin: 0 auto;
}
.toggleButton {
float:left;
border: 1px solid grey;
padding: 6px;
border-right: none;
font-size: 90%;
}
#html {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#output {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-right: 1px solid grey;
}
.active {
background-color: #E8F2FF;
}
.highlightedButton {
background-color: grey;
}
textarea {
resize: none;
border-top: none;
border-color: grey;
}
.panel {
float:left;
width: 50%;
border-left: none;
}
iframe {
border:none;
}
.hidden {
display: none;
}
#intro{margin:10px;
font-weight:bold;
font-size: 20px;
}
</style>
</head>
<body>
<p id="intro"> Learn HTML| CSS| JAVASCRIPT without any text-editor by using Code-Player <br>
Built using HTML| CSS| JAVASCRIPT| jQuery</p>
<div id="header">
<div id="logo">
CodePlayer
</div>
<div id="buttonContainer">
<div class="toggleButton active" id="html">HTML</div>
<div class="toggleButton" id="css">CSS</div>
<div class="toggleButton" id="javascript">JavaScript</div>
<div class="toggleButton active" id="output">Output</div>
</div>
</div>
<div id="bodyContainer">
<textarea id="htmlPanel" class="panel"> <p id="paragraph">Hello World!</p></textarea>
<textarea id="cssPanel" class="panel hidden"> p { color: green; }</textarea>
<textarea id="javascriptPanel" class="panel hidden">document.getElementById("paragraph").innerHTML = "Hello Rob!";</textarea>
<iframe id="outputPanel" class="panel"></iframe>
</div>
<script type="text/javascript">
function updateOutput() {
$("iframe").contents().find("html").html("<html><head><style type='text/css'>" + $("#cssPanel").val() + "</style></head><body>" + $("#htmlPanel").val() + "</body></html>");
document.getElementById("outputPanel").contentWindow.eval($("#javascriptPanel").val());
}
$(".toggleButton").hover(function() {
$(this).addClass("highlightedButton");
}, function() {
$(this).removeClass("highlightedButton");
});
$(".toggleButton").click(function() {
$(this).toggleClass("active");
$(this).removeClass("highlightedButton");
var panelId = $(this).attr("id") + "Panel";
$("#" + panelId).toggleClass("hidden");
var numberOfActivePanels = 4 - $('.hidden').length;
$(".panel").width(($(window).width() / numberOfActivePanels) - 10);
})
$(".panel").height($(window).height() - $("#header").height() - 15);
$(".panel").width(($(window).width() / 2) - 10);
updateOutput();
$("textarea").on('change keyup paste', function() {
updateOutput();
});
</script>
</body>
</html>
Since a lot of blog platforms prohibit embedding code sometimes you are able to accomplish the task by using an <iframe> similar to what is here
<iframe height='265' scrolling='no' title='BPaNNq' src='//codepen.io/happymacarts/embed/BPaNNq/?height=265&theme-id=0&default-tab=html,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/happymacarts/pen/BPaNNq/'>BPaNNq</a> by Joseph L. Bradfield (<a href='https://codepen.io/happymacarts'>#happymacarts</a>) on <a href='https://codepen.io'>CodePen</a>.
or something like this one i found (looks familiar)
<iframe height='265' scrolling='no' title='Code player' src='//codepen.io/akashdevgan/embed/JGbGOQ/?height=265&theme-id=0&default-tab=css,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/akashdevgan/pen/JGbGOQ/'>Code player</a> by Akash Devgan (<a href='https://codepen.io/akashdevgan'>#akashdevgan</a>) on <a href='https://codepen.io'>CodePen</a>.
I don't think that it works to embed in the snippet here but this might work on your blogger site try it out
As I couldn't debug yours, wrote my own version of codeplayer.
You may need to refer these. Make HTML elements as contenteditable, CSS Custom Variables
$(document).ready(function(){
$(".body").get(0).style.setProperty("--contentwidth", 100/$(".active").length+"%");
$(".codetype").click(function(){
$(this).hasClass("active") ? $(this).removeClass("active") : $(this).addClass("active");
$(".codecontent").eq($(this).index()).toggle();
$(".body").get(0).style.setProperty("--contentwidth", 100/$(".active").length+"%");
});
});
.container
{
width:100%;
height:400px;
max-height:400px;
border:1px solid black;
}
.header
{
position:relative;
width:100%;
height:50px;
background: red;
box-sizing: border-box;
text-align:center;
color:white;
}
.codetype
{
border:1px solid black;
width:100px;
height:40px;
margin:0 auto;
display:inline-block;
}
.codetype > span
{
text-align:center;
line-height:40px;
}
.codetype:first-child
{
border-top-left-radius:4px;
border-bottom-left-radius:4px;
}
.codetype:last-child
{
border-top-right-radius:4px;
border-bottom-right-radius:4px;
}
.body
{
height:100%;
display:inline-block;
width:100%;
}
.codecontent
{
height:100%;
width:var(--contentwidth);
background:yellow;
border:1px solid black;
float:left;
box-sizing:border-box;
}
.active
{
background:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="header">
<div id="" class="codetype active"><span>HTML</span></div>
<div id="" class="codetype active"><span>CSS</span></div>
<div id="" class="codetype active"><span>JS</span></div>
<div id="" class="codetype active"><span>Output</span></div>
</div>
<div class="body">
<div id="" class="codecontent" contenteditable=true>HTML</div>
<div id="" class="codecontent" contenteditable=true>CSS</div>
<div id="" class="codecontent" contenteditable=true>JS</div>
<div id="" class="codecontent">Output</div>
</div>
</div>
I want fix on mouse over and mouse out so it can work for div.As you can see it cant worked,i dont know why.I want to do it when i move my mouse to change it to yellow,the other colors should be aqua.I did a lot but it didn't worked for me.How can i do single div be yellow by mouserover and how can i do it mouseout to do it aqua?thanks a lot
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>exams</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
#style
{
background-color: #00FFFF;
border-style: dotted;
}
#node2
{
background-color:#00FFFF;
border-style: dashed;
}
#node3
{
background-color: #00FFFF;
border-style: solid;
}
#node4
{
background-color: #00FFFF;
border-style: ridge;
}
#node5
{
background-color: #00FFFF;
border-style: inset;
}
#content {
margin:500px;
height: 800px;
width: 2000px;
background-color: red;
}
.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 200px;
background-color: white;
}
.feedback {
position: relative;
width: 60px;
}
#mybutton {
position: absolute;
top: 10px;
right: 10px;
}
}
#mybutton2{
position: absolute;
top:30px;
right:30px;
}
</style>
</head>
<body onload="myFunction()">
<h1 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">
<div style="width:300px; height:200px; overflow:auto; background-color:#00FFFF;">
<span id="redText" style="color:red ">Red text for scroll test.</span>
<div style="height:200px;"></div>
</h1>
<h2 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">
<div id="node2">keimeno1</div> </h2>
<h3 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">
<div id="node3">keimeno2</div></h3>
<h4 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">
<div id="node4">keimeno3</div><h4>
<h5 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">
<div id="node5">keimeno4</div>
</div>
</h5>
<script>
function myFunction() {
alert("Page is loaded");
}
function mytimeFunction() {
setInterval(function(){ alert("Hello"); }, 5000);
timetrick();
}
function timetrick() {
var elmnt = document.getElementById("content");
elmnt.scrollIntoView();
}
}
function mouseOver() {
document.getElementById("demo").style.color = "yellow";
}
function mouseOut() {
document.getElementById("demo").style.color = "aqua";
}
</script>
<div id="mybutton">
<button class="1">first button</button>
</div>
<div id="mybutton2">
<button class="2">Second button</button>
</div
</body>
</html>
The solution for your functionality to work is to update the formatting in your script. It is quite obvious it wouldn't work because the script has an abundance of syntax errors. Firstly check your script block and you will find you've added a lone brace after the timetrick func, that prevents the mouseOver func to even get defined during runtime. Also the header tags (h1, h2,...) are very messy. For example, you have an extra div endtag before the h5 endtag. Also, like many others have already stated: remove the 'demo' id's. They are unnecessary. And add document.getElementById("node2").style.color = "yellow"; instead of the demo part. duplicate those lines inside of the function for every node in your body. This should be more than enough to make the mouseover work correctly.
Something like that could be helpful?
$('.acqua').mouseover(function() {
$('.acqua' ).css('background-color','yellow');
});
$('.acqua').mouseout(function() {
$('.acqua' ).css('background-color','aqua');
});
.acqua{
background-color: aqua;
padding: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="acqua">Some text here</div>
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/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I got a fiddle http://jsfiddle.net/HEue6/1/ that looks good for a start and now I want it to look and feel more like Office 365. I think the font in Office 365 is Segoe UI Semilight but I'm not sure. In the meantime we've used the Google font Raleway but another font that was mentioned is also called Futura. Now I would like to add the effect that also Office 365 has, that a grey rectangular box marks the selected area.
Can you help me? Do you think that the correct font is chosen or can it get more similar to Office 365? How should I add the grey rectangle for a chosen element?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>-Register</title>
<script src="/scripts/jquery/jquery-1.9.1.js" type="text/javascript"></script>
<script src="/scripts/application.js" type="text/javascript"></script>
<link href="/css/style.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Raleway:400,200" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">
<div id="header-title">Account Administration</div>
</div>
<hr />
<div id="navigation-bar">
<div id="navigation-content">
<!-- SINGLE BUTTON MODULE --> <a href="/admin/adduser">
<div class="navigation-button">
<div class="navigation-header">Add new account</div>
<div class="navigation-desc">Add new user account</div>
</div></a>
<!-- SINGLE BUTTON MODULE -->
<a href="/admin/search"><div class="navigation-button">
<div class="navigation-header">Search account</div>
<div class="navigation-desc">Search and manage accounts</div>
</div></a>
<!-- SINGLE BUTTON MODULE -->
<a href="/admin/export"><div class="navigation-button">
<div class="navigation-header">Export</div>
<div class="navigation-desc">Export to Excel and other formats</div>
</div></a>
<!-- SINGLE BUTTON MODULE -->
<form id="inputForm" role="form" class="marg-left" action="/admin/import" method="post" enctype="multipart/form-data">
<input id="upload" name="file" type="file" onchange="this.form.submit();"/><a href="" id="upload_link"><div class="navigation-button">
<div class="navigation-header">Import</div>
<div class="navigation-desc">Import from tab-separated files on disk</div>
</div> </a>
</form>
<!-- SINGLE BUTTON MODULE -->
<a href="/admin/setup"> <div class="navigation-button">
<div class="navigation-header">Setup</div>
<div class="navigation-desc">Setup global parameters</div>
</div></a>
<!-- SINGLE BUTTON MODULE -->
<a href="j_spring_security_logout"><div class="navigation-button" id="logga">
<div class="navigation-header">Logout</div>
<div class="navigation-desc">Exit account administration</div>
</div></a>
</div>
</div>
</div>
</body>
</html>
Its a very quick and dirty implementation, but change your CSS to:
FIDDLE
body {
font-family:'Raleway', sans-serif;
}
#header {
width: 100%;
position: fixed;
height: 45px;
border-bottom: solid 2px #0072c9;
background-color: #FFFFFF;
z-index: 30;
}
#header-title {
left: 250px;
font-size: 22px;
bottom: 7px;
color: #0072c9;
font-weight: 400;
position: absolute;
}
#navigation-bar {
width: 230px;
height: 100%;
box-shadow: 0 0 8px 6px rgba(0, 0, 0, 0.2);
z-index: 20;
position: absolute;
}
#navigation-content {
width: 100%;
height: auto;
position: absolute;
top: 47px;
}
.navigation-button {
position: relative;
width: 100%;
height: 80px;
margin: 15px 0px;
}
.navigation-header {
position: absolute;
top: 15px;
left: 10px;
color: #0072c9;
font-size: 25px;
}
.navigation-desc {
position: absolute;
bottom: 15px;
left: 10px;
font-size: 12px;
color: #0072c9;
}
#logout {
border-top: solid 2px #0072c9;
}
#navigation-content a:hover div.navigation-button {
background:lightgrey;
}
#navigation-content a:hover div.navigation-button:before {
content:' ';
display:block;
position:absolute;
right:-20px;
top:15px;
height:30px;
width:30px;
background:white;
-webkit-transform-origin: 5px 25px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
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