I can't get the Resize aspect of jQuery UI to work, everything else works just fine.
I've look at several solutions listed on this site, and I've tried them all. It seems like the re-sizeable classes, and all the required elements are being added. I never see a handle or have the actual ability to resize.
Please take a look and let me know what I'm missing... if anything.
<link rel="stylesheet" href="canvas.css">
<link rel="stylesheet" href="jquery-ui.css">
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script>
$(document).ready(function() {
var activeFrame = "#frame1";
$(function() {
$( "#assets" ).accordion();
});
$(".preview").click(function(event) {
console.log("Frame backdrop set to " + event.target.id);
$(activeFrame).removeClass();
$(activeFrame).addClass(event.target.id);
});
$(".prop").click(function(event) {
console.log("User added " + event.target.id + "_full");
$(activeFrame).append('<div id="' + event.target.id + '_full" class="drag "></div>');
propPrep();
});
function propPrep(event) {
$( ".drag" ).draggable({ containment: "parent" });
$( "#" + event.target.id + "_full").resizable({ aspectRatio: 16 / 9});
}
});
</script>
</head>
<body>
<div id="assets">
<h3>Backdrops</h3>
<div id="backdrops">
<div id="bd1" class="preview"></div>
<div id="bd2" class="preview"></div>
<div id="bd3" class="preview"></div>
</div>
<h3>Props</h3>
<div id="props">
<div id="garfield1" class="prop"></div>
</div>
<h3>Characters</h3>
<div id="characters">test</div>
</div>
<div id="strip">
<div id="frame1"></div>
<div id="frame2"></div>
<div id="frame3"></div>
</div>
</body>
Pass the argument event to the prop function
Change
$(".prop").click(function(event) {
..
propPrep();
});
to
$(".prop").click(function(event) {
....
propPrep(event);
});
Related
How to apply the .toggle() only the clicked DIV.
My current code applies to all toggle div.
The code switch between the content from <div class="toggled">
I need to do it in version 1.4
Anyone can help me?
This my code:
<html>
<head>
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="card.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#toggle').click("click", function() {
$('.toggled').toggle();
return false;
});
});
</script>
</head>
<body>
<div class="card">
<div class="toggled">
<h3>FRONT 1</h3>
</div>
<div class="toggled" style="display:none;">
<h3>BACK 1</h3>
</div>
Switch Text Toggle<br/>
</div>
<div class="card">
<div class="toggled">
<h3>FRONT 2</h3>
</div>
<div class="toggled" style="display:none;">
<h3>BACK 2</h3>
</div>
Switch Text Toggle<br/>
</div>
</body>
</html>
Thanks in advance!
You'll need to change the ID of the anchors to a class, as ID's are unique.
Then you'd do:
$(function() {
$('.toggle').on("click", function() {
$(this).siblings('.toggled').toggle();
return false;
});
});
Where you find the siblings of the clicked anchor with the class .toggled, and toggle those. You also need a document.ready function, and the event handler has some typos.
And use a newer version of jQuery, 1.4 is outdated.
FIDDLE
Replace $('.toggled').toggle(); with $(this).toggle();. You're currently requesting all .toggle containers be toggled, not the one that is the focus of the event.
Try this:
$('.card #toggle').click(function() {
$('.toggled').toggle();
return false;
});
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#slider { margin: 10px; }
</style>
<input type="text" value="" id="rateToPost"/>
<script type="text/javascript">
var my = document.getElementById("rateToPost").onchange();
alert(my);
</script>
<div style="width:75px;height:48px;">
<div style="width: 5px;margin-left: 10px;">1</div>
<div style="width: 5px;margin-left: 38px;margin-top: -10px;">2</div>
<div style="width: 5px;margin-left: 70px;margin-top: -13px;">3</div>
<div style="width: 5px;margin-left: 98px;margin-top: -12px;">4</div>
<div style="width: 5px;margin-left: 124px;margin-top: -12px;">5</div>
</div>
<script>
$(document).ready(function() {
$("#slider").slider({
range: "min",
value: 2,
min: 1,
max: 5,
//this gets a live reading of the value and prints it on the page
slide: function( event, ui ) {
$( "#ratingResult" ).text( ui.value );
},
//this updates the value of your hidden field when user stops dragging
change: function(event, ui) {
$('#rateToPost').attr('value', ui.value);
}});
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="slider"></div>
</body>
</html>
In the above script I used a slider for rating. But what is the problem here is I have to fetch the text box value onchange and highlight the corresponding rating number background. But I cant fetch the value. Anyone can help to solve thisproblem. Thanks in advance
Try this using jQuery:
$('#rateToPost').on("change", function () {
alert($(this).val());
});
Since $('#rateToPost') is a form element: Use the val() method.
assign value: $('#rateToPost').val(ui.value);
read value: var res = $('#rateToPost').val();
$('#rateToPost').keyup(function(){
$('#slider').slider({value: this.value});
});
Demo http://jsbin.com/azosab/2/edit
I need to reload the page after I've selected all images. I know that I have a mistake in the code, but I don't know where.
The variable is Num.
I use more than one jquery library, HTML, CSS and JS.
Files:
<link rel="stylesheet" type="text/css" href="layout.css"/>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.event.drag-2.0.min.js"></script>
<script type="text/javascript" src="jquery.event.drop-2.0.min.js"></script>
<script type="text/javascript" src="colors.js"></script>
Script:
$(document).ready(function($)
{
var num=0;
$('.move')
.click(function(){
$( this ).toggleClass("selected");
})
.drag("init",function(){
if ( $( this ).is('.selected') ){
if (num == 5){
alert ("Warning.");
window.location.reload();
}
num++;
return $('.selected');
}
})
.drag(function( ev, dd ){
$( this ).css({
top: dd.offsetY,
left: dd.offsetX
});
});
});
HTML:
<h1>Hi</h1>
<div class="move" style="left:300px;"></div>
<div class="move" style="left:450px;"></div>
<div class="move" style="left:600px;"></div>
<div class="move" style="left:750px;"></div>
<div class="move" style="left:900px;"></div>
Here is the view of the page:
enter link description here
I think this is what you want:
$('.posun').click(function(){
$( this ).toggleClass("vybrate");
if($('.vybrate').length === 5){
window.location.reload()
}
})
$('.vybrate').length === 5 is simply checking to see if there are 5 elements with the class .vybrate. If there are, then we know every one has been selected, so we refresh the page.
To those jQuery experts out there. I have the following markup and code:
<html>
<head>
<title>Test Framework</title>
<script src="js/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.nav').click(function(e) {
e.PreventDefault();
var id = $(this).attr('id');
var path = "views/" + id + ".html";
$("#main").load(path);
});
});
</script>
</head>
<body>
<div id="links">
<a class="nav" id="test" href="javascript:void(0);">Test Page</a>
</div>
<div id="main">
</div>
</body>
</html>
My nav class fires when I click the link, but fails to get past the PreventDefault method. The class fires, but nothing loads into my div. The page is definately there. Any ideas why this wouldn't be working?
The problem may be with your call to preventDefault:
$(document).ready(function(){
$('.nav').click(function(e) {
e.preventDefault();
var id = $(this).attr('id');
var path = "views/" + id + ".html";
$("#main").load(path);
});
});
$('div.box').html("hello")
puts the word hello inside all my div's of class 'box'. They all have an assigned id.
I'm trying to figure out how to put each div's id instead of 'hello' inside the div. Maybe this is really easy, but I can't figure it out. I'm also new to jQuery. Any ideas? I've tried:
$("div.box").html("id: " + $(this).attr("id"));
Try this:
$("div.box").each(function() {
$(this).html("Id: " + this.id);
});
Full example:
<html>
<head>
<title>Layout</title>
</head>
<body>
<div id="id1" class="box">Box One</div>
<div id="id2" class="box">Box Two</div>
<div id="id3">Box Three</div>
<div id="id4" class="box">Box Four</div>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.3.1");
google.setOnLoadCallback(function() {
$(function() {
$("div.box").each(function() {
$(this).html("ID: " + this.id);
});
});
});
</script>
</body>
</html>
You'll want to loop through each item.
$("div.box").each(function()
{
$(this).html("id: " + this.id);
});