I can get the drag to work, but the resizing is not cooperating. (The behavior is evident using either the text box or the text area.) I'm using jQuery 1.3.2 and jQuery UI 1.7.2.
Here's my attempt:
<HTML>
<HEAD>
<TITLE>Drag/Resize TextBox Workbench</TITLE>
<script src="js/jquery.js" type="text/javascript" ></script>
<script src="js/ui/ui.core.js" type="text/javascript"></script>
<script src="js/ui/ui.draggable.js" type="text/javascript"></script>
<script src="js/ui/ui.resizable.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$( "#ta1" ).resizable( { cancel: '' } );
$( "#ta1" ).draggable( { cancel: '' } );
});
</script>
</HEAD>
<BODY>
<form>
<input type='text' class='property' id='tb1' />
<textarea id='ta1' class='property'>Hello</textarea>
</form>
</BODY>
</HTML>
Have you tried wrapping the <textarea> in a <div> or another block-level tag and making that draggable instead?
Related
I am very new to jquery and have been working on some snippets I found online. I have reached a problem where I think because I have 2 different jquery libraries called to the page and 2 functions both using $(function) are causing the page not to work. I've tried using the no.conflict option but not sure I used this properly or missed something out elsewhere. Would appreciate if someone can explain or tell me what the solution would be? Thanks in advance.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.revolution.js"></script>
</head>
<body>
<div id="overlay"></div>
<div id="container">
<div id="jstwitter"></div>
<script type="text/javascript" >
$(function() {
$('#container').revolution();
});
</script>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="nested.jstwitter.js"></script>
<script type="text/javascript" src="automate.js"></script>
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript">
$(function () {
// start jqtweet!
JQTWEET.loadTweets();
});
</script>
</html>
Don't know why do you need two versions, but you can try something like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var jQuery_1_10_2 = $.noConflict(true);
</script>
<script type="text/javascript" >
(function( $ ) {
$('#container').revolution();
})( jQuery_1_10_2 );
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var jQuery_1_8_2 = $.noConflict(true);
</script>
<script type="text/javascript" >
(function( $ ) {
JQTWEET.loadTweets();
})( jQuery_1_8_2 );
</script>
Could you not just combine them?
<script type="text/javascript">
$(function () {
// Container Revolution
$('#container').revolution();
// start jqtweet!
JQTWEET.loadTweets();
});
</script>
I downloaded jQuery UI 1.10.3.
And it comes with an older version of jQuery which is 1.9.1.
And I have a later version of jQuery: 1.10.2.
But jQuery UI seems does not like to work with 1.10.2...
Is there anyway to make it works?
Or I should just live with it..
<script src="js/jquery-1.9.1.js"></script>
<!--
<script src="jquery-1.10.2.min.js">
-->
<script src="js/jquery-ui-1.10.3.custom.js"></script>
</script>
<script src = song_Selector.js>
</script>
<script>
$(function() {
$( "#progressbar" ).progressbar({
value: 50
});
});
</script>
<body>
<p id="demo">Click the button to do something.</p>
<button onclick="draw_Progress_Bar ()">Try it</button>
<h2 class="demoHeaders">Progress Bar</h2>
<div id="progressbar"></div>
</body>
Codes are above, without the <html> tag.
When you are loading the script, you've forgotten the end tags, and you've also forgotten your <head> tags if this is the whole document:
<!-- <script src="js/jquery-1.9.1.js"></script> -->
<script src="jquery-1.10.2.min.js"></script>
<script src="js/jquery-ui-1.10.3.custom.js"></script>
<script src = song_Selector.js></script>
<script>
$(function() {
$( "#progressbar" ).progressbar({
value: 50
});
});
</script>
<body>
<p id="demo">Click the button to do something.</p>
<button onclick="draw_Progress_Bar ()">Try it</button>
<h2 class="demoHeaders">Progress Bar</h2>
<div id="progressbar"></div>
</body>
What happened was actually the following when you uncommented jQuery 1.10.2:
<script src="jquery-1.10.2.min.js">
<script src="js/jquery-ui-1.10.3.custom.js"></script>
</script>
As any text inside a <script> tag is ignored with an src attribute set and will not be parsed, this will not be loaded.
Before, it would have worked fine as it would have simply been the following:
<script src="js/jquery-ui-1.10.3.custom.js">
</script>
</script>
... with the text inside the tag being ignored, as there is a src attribute (with this having no effect).
you can this by function load script
function loadscript(url){
var doc = document.getelementbytagname("head");
var script = document.createlement("script") ;
script.url = script
}
How can I reload Reddit buttons with jquery? I have load more ajax function and Reddit buttons don't appear when loaded via jquery. I tried to use:
$.ajax({ url: 'http://www.reddit.com/static/button/button2.js', dataType: 'script',
cache:true});
This is the actual button attached to each post:
<script type="text/javascript">
reddit_url = "http://domain.com/post-num";
</script>
<script type="text/javascript" src="http://www.reddit.com/static/button/button2.js">
</script>
Thanks
You can accomplish this by updating the Reddit iframe's "src".
$('some-surrounding-div-here').find('iframe').attr('src','http://www.reddit.com/static/button/button2.html?width=51&url=http%3A%2F%2Fdomain.com%2Fpost-num');
Here it is in a full working example:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#refresh_reddit_button').click(function(){
$('#reddit_button_container').find('iframe').attr('src','http://www.reddit.com/static/button/button2.html?width=51&url=http%3A%2F%2Fdomain.com%2Fpost-num');
});
});
</script>
</head>
<body>
<input id="refresh_reddit_button" type="button" value="Refresh Reddit">
<div id="reddit_button_container">
<script type="text/javascript">
reddit_url = "http://domain.com/post-num";
</script>
<script type="text/javascript" src="http://www.reddit.com/static/button/button2.js">
</script>
</div>
</body>
</html>
cannot run this code ... php textarea is showed but only one click and everything is disappear
Note:the page is positioning by anchors and words in "{}" are tags.
On оne page I am trying to put more than one ACEtextarea
(jQuery function is just a thought)
<div id="{id_area}" style="width:100%;height:165px; position:relative; background:#fff;" class="">
{text}
</div>
<input type="hidden" name="{name}" id="{id_area}-textarea"/>
<script src="{dir}/src/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="{dir}/src/theme-crimson_editor.js" type="text/javascript" charset="utf-8"></script>
<script src="{dir}/src/mode-php.js" type="text/javascript" charset="utf-8"></script>
<script>
window.onload = function() {
var editor_{id_area} = ace.edit("{id_area}");
editor_{id_area}.setTheme("ace/theme/crimson_editor");
var {id_area}_Mode = require("ace/mode/php").Mode;
editor_{id_area}.getSession().setMode(new {id_area}_Mode());
jQuery("#{id_area}-textarea").val(editor_{id_area}.getSession().getValue());
};
</script>
Is it possible to change the text inside a separate div from a mouseover over a separate link? Would anyone know where to direct me or show me an example?
It takes a simple javascript to do this
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function changeContent()
{
document.getElementById("myDiv").innerHTML='New Content';
}
</SCRIPT>
</HEAD>
<BODY>
<div id="myDiv">
Old Content
</div>
Change Div Content
</BODY>
</HTML>
Here an small example with jquery:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".pass").hover(
function () {
$(".change").text("MOUSE HOVER");
},
function () {
$(".change").text("DIV TO CHANGE");
}
);
});
</script>
</head>
<body>
<div class="pass">PASS YOUR MOUSE OVER HERE</div>
<div class="change">DIV TO CHANGE</div>
</body>
</html>
You could use a Javascript library like JQuery
for example:
$('#youranchorid').mouseover(function() {
$('#yourdivid').html("Your new text");
});
check the API