integrate text and image inside UI widget - javascript

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");
}
});
https://jsfiddle.net/barronfidel7/c1yfj0wv/

Your working fiddle.
This is what allows you to see the HTML in the UI widget as you type:
$(document).ready(function(){
$('#dialog').html($('#quote').val());
$('#quote').on('keyup', function(){
$('#dialog').html($(this).val());
});
});
While the input has focus, it assigns the HTML of the widget to it's own value after every keyup event.

Related

add text of a tag to input tag by clicking on it

I want to show information to submit or reject.
I have a tag() include the information that should be checked.
if some of them are not correct, should be added to input tag and then by click on reject button, all input tag data pass to controller.
The following code does not work.
I dont know is there a better way to do it ?
thanks a lot for your attention.
<html lang="en">
<head>
<title>example</title>
<link href="#Url.Content("https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.css")" rel="stylesheet">
<script src="#Url.Content("https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js")"></script>
<script src="#Url.Content("https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.js")"></script>
</head>
<body>
Name
<div style="width: 500px; margin: 0px auto;">
<h2 style="font-family:cursive;">Jquery - input tags plugin example</h2>
<input name="tags" id="input-tags" style="width:500px !important" />
</div>
<script>
$("a").click(function () {
i = $(this).data("value");
$('#input-tags').tagsInput('add', i);
});
</script>
</body>
</html>
You are using jQuery TagsInput not Bootstrap TagsInput so you should use addTag not .tagsInput('add')
$('#input-tags').tagsInput();
$("a").click(function(e) {
e.preventDefault();
var i = $(this).data("value");
$('#input-tags').addTag(i);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.js"></script>
Name
<div style="width: 500px; margin: 0px auto;">
<h2 style="font-family:cursive;">Jquery - input tags plugin example</h2>
<input name="tags" id="input-tags" data_role="tagsinput" style="width:500px !important" />
</div>
Source

Show image via javascript after page load

I am trying to create an image which is initially hidden - but reveals itself once the document has loaded completely via the JavaScript file.
$(document).ready(function () {
document.getElementById("theImage").style.visibility = "visible";
});
#theImage {
visibility:hidden;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kami Nelson Bio </title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="KNelson-Styles.css" rel="stylesheet" type="text/css">
<script src="respond.min.js"></script>
<script src="KNelson_reveal.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="theImage">
<img src="images/Kami-100.jpg" alt="Kami Nelson Image"/>
</div>
<div id="div1" class="fluid">
<h1>Bio for Kami Nelson</h1>
<p>Text</p>
</div>
</div>
</body>
</html>
Why is this not working?
Thank you in advance.
You should either include jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Or use native window.onload() instead of $(document).ready()
window.onload=function () {
document.getElementById("theImage").style.visibility = "visible";
}
You are missing the jQuery library reference
You are not properly
using selecter to select image of id theImage.
theImage is supposed to be for the img tag.
JavaScript
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function () {
$("#theImage").css('display':'block');
});
</script>
CSS
#theImage {
display: none;
}
HTML
<img id= "theImage" src="images/Kami-100.jpg" alt="Kami Nelson Image"/>
why don't you just draw the image when the window loads?
give your image an id i'll use "image" for this example.
<script>
window.onload = function ()
{
$('#image').css({"display":"block";});
}
</script>

disabled input inside ajax using jquery

this is my index.php
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajax.js"></script>
<script>
$("input").attr("disabled", true);
</script>
</head>
<style>
#click{
background-color:black;
color:white;
width:200px;
}
#content{
background-color:black;
color:white;
width:200px;
}
</style>
<body>
<div id="click" style="cursor:pointer;">
<a onclick="sendRequest('content.php','','content')">click</a>
</div>
<br>
<div id="content">
this is content
</div>
</body>
this is my content.php
<input type="text" />
this is my ajax.js
http://tny.cz/cb20dc87
i want input in the content.php disabled, can someone tell me how to do it ?
Change your content.php to
<input type="text" disabled />
I don't know your sendRequest() function, but here's how you do it with standard jQuery:
$('#content').load('content.php', function() {
$("#content input").attr("disabled", true);
});
The callback function runs after the AJAX call completes. Presumably your ajax.js provides similar functionality.

JQuery Resize image plugin error

Im trying to implement a simple plugin that resize image based on a container.
The problem is , I don't understand why it's not resizing my image when I placed it inside a container
This is the simple plugin demo page i'm trying to replicate
https://dl.dropboxusercontent.com/u/6983010/wserv/imgLiquid/examples/imgLiquid.html
This is my Code
<html>
<head>
<link rel="stylesheet" href="css/float.css">
<script type = "text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type = "text/javascript" src ="https://raw.github.com/karacas/imgLiquid/master/src/js/imgLiquid-min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".imgLiquidFill").imgLiquid({fill:true, fadeInTime:500});
$(".imgLiquidNoFill").imgLiquid({fill:false});
});
</script>
</head>
<body>
<div class="container" >
<img src="Creek.jpg"/></div>
</div>
</body>
</html>
My CSS
.container {height: 440px; width: 950px; background:#FFFFFF}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Image</title>
<style>
.container{
background-color:#f7f7f7;
border:2px solid #ccc;
margin:10px;
display:inline-block;
}
.imgLiquid {
display:block;
overflow: hidden;
background:transparent url('http://www.lotienes.com/imagenes/loading.gif') no-repeat center center;
}
.imgLiquid img{
visibility:hidden;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript"
src="https://raw.github.com/karacas/imgLiquid/master/src/js/imgLiquid-min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".imgLiquidFill").imgLiquid({
fill: true,
fadeInTime:200,
horizontalAlign: "center",
verticalAlign: "top"
});
});
</script>
</head>
<body>
<div class="container">
<span class="imgLiquidFill imgLiquid" style="width:250px; height:250px;">
<a href="/media/Woody.jpg" target="_blank" title="test">
<img alt="" src="/media/Woody.jpg"/>
</a>
</span>
</div>
</body>
</html>
Your changing the codes and you forgot to define the imgLiquidFill and imgLiquid in the class which is very important to make this plugin effective. In modifying the codes make sure you didn't forgot anything. Another thing is you can rename the class but make sure you also rename it in the script to make it the same.

change alert message text color using javascript

Am using the below script to change the color of the script but showing 'font color="red">Hello world /font> like this.Is any possible way to change the alert text color..
<html>
<head>
<title>JavaScript String fontcolor() Method</title>
</head>
<body>
<script type="text/javascript">
var str = new String("Hello world");
alert(str.fontcolor( "red" ));
</script>
</body>
</html>
No. alert() accepts a string and renders it using a native widget. There is no provision to style it.
The closest you could get would be to modify the HTML document via the DOM to display the message instead of using an alert().
You can use JQuery to resolve your Problem
<html>
<head>
<meta charset="utf-8" />
<title>JavaScript String fontcolor() Method</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery- ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}});
});
</script>
</head>
<body>
<div id="dialog-message" title="My Dialog Alternative">
<p style='color:red'> Hello world </p>
</div>
</body>
</html>
Hope this help :
<!doctype html>
<html>
<head>
<title>JavaScript String fontcolor() Method</title>
<style>
#alertoverlay{display: none;
opacity: .8;
position: fixed;
top: 0px;
left: 0px;
background: #FFF;
width: 100%;}
#alertbox{display: none;
position: fixed;
background: #000;
border:7px dotted #12f200;
border-radius:10px;
font-size:20px;}
#alertbox > div > #alertboxhead{background:#222; padding:10px;color:#FFF;}
#alertbox > div > #alertboxbody{ background:#111; padding:40px;color:red; }
#alertbox > div > #alertboxfoot{ background: #111; padding:10px; text-align:right; }
</style><!-- remove padding for normal text alert -->
<script>
function CustomAlert(){
this.on = function(alert){
var winW = window.innerWidth;
var winH = window.innerHeight;
alertoverlay.style.display = "block";
alertoverlay.style.height = window.innerHeight+"px";
alertbox.style.left = (window.innerWidth/3.5)+"pt";
alertbox.style.right = (window.innerWidth/3.5)+"pt"; // remove this if you don't want to have your alertbox to have a standard size but after you remove modify this line : alertbox.style.left=(window.inner.Width/4);
alertbox.style.top = (window.innerHeight/10)+"pt";
alertbox.style.display = "block";
document.getElementById('alertboxhead').innerHTML = "JavaScript String fontcolor() Method :";
document.getElementById('alertboxbody').innerHTML = alert;
document.getElementById('alertboxfoot').innerHTML = '<button onclick="Alert.off()">OK</button>';
}
this.off = function(){
document.getElementById('alertbox').style.display = "none";
document.getElementById('alertoverlay').style.display = "none";
}
}
var Alert = new CustomAlert();
</script>
</head>
<body bgcolor="black">
<div id="alertoverlay"></div>
<div id="alertbox">
<div>
<div id="alertboxhead"></div>
<div id="alertboxbody"></div>
<div id="alertboxfoot"></div>
</div>
</div>
<script>Alert.on("Hello World!");</script>
</body>
</html>
The concept is taken from this : http://www.developphp.com/video/JavaScript/Custom-Alert-Box-Programming-Tutorial

Categories