hello I would like to know how I can add text and image inside a UI widget I also want it to be without a background please help I want to be able to write my own text and display while I'm writing it.
CSS
.thumbs img{
margin:3px;
width:50px;
float:left;
}
.bottlesWrapper img{
margin:3px;
width:400px;
float:left;
}
#main { border:1px solid #eee; margin:20px; width:410px; height:220px;}
HTML
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>UI widget</title><link rel="stylesheet"
href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
</head>
<body>
<form method="post" action="<?php echo $PHP_SELF;?>">
<textarea rows="5" cols="20" name="quote" wrap="physical">Enter your favorite quote!</textarea><br />
<input type="submit" value="submit" name="submit">
</form>
<div id='main'>
<div class="bottlesWrapper">
<div id="dialog" class="ui-widget-content">
<?
echo "<i>".$quote."</i><br />";
?>
</div>
<img src="http://placehold.it/300x160/f1f" />
</div>
<div class="thumbs">
<img src="http://placehold.it/300x180/444" />
<img src="http://placehold.it/300x160/f1f" />
</div></div>
</body>
</html>
Script
$('.thumbs img').click(function() {
var thmb = this;
var src = this.src;
$(thmb).parent('.thumbs').prev('.bottlesWrapper').find('img').fadeout (400,function(){
thmb.src = this.src;
$(this).fadeIn(400)[0].src = src;
});
});
</script> <script>
$("#dialog").dialog({
open: function(event, ui) {
var vDlg = $(event.target).parent();
var vCont = $('#main');
vDlg.draggable("option", "containment", vCont).appendTo(vCont);
$(this).dialog("option", "position", "center");
}
});
