This is what i am trying to do,
<div id="table">
<div id="user"></div>
<div id="user1"></div>
</div>
When i click a button,this happens
$("#body").append("<div id=\"user-wrap\"></div>");
$('#user').appendTo($('#user-wrap'));
$('#user1').appendTo($('#user-wrap'));
$('#user-wrap').appendTo($('#table'));
Then I apply moz-transform on user-wrap. Before I apply another transform, I have to remove this userwrap div. when I append the children of user-wrap to body again and remove the user-wrap. My transforms are not preserved. I solved this problem by storing the value in a separate variable and applying it again after removing. But the problem is when I applied the scale transforms with user-wrap on the two divs actually looked more closer. Now since I removed the user-wrap the individual user divs are apart even though I applied the transforms again. The inter-distance between children are lost.How do I solve this problem?
I am rephrasing the entire thing again, I want to apply transforms to a group of children in div and then remove the div while preserving the scale/rotate and inter-distance value between the children?
I know it is a complex question, help will be appreciated. I am hoping all the javascript samurai's and CSS ninjas could help me out here ;)
Against all odds:
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type='text/javascript' src='jquery-1.5.1.min.js'></script>
<script type='text/javascript'>
function screwItUp() {
//EDIT: or if ($('#table div:first-child').attr('id') == 'user')
if ($('#table div:first-child').html() == 'USER') {
$('body').append('<div id=\'userWrap\'>USER-WRAP</div>');
$('#user').css('font-size',Math.floor(Math.random()*42)+'px').appendTo($('#userWrap'));
$('#user1').css('font-size',Math.floor(Math.random()*42)+'px').appendTo($('#userWrap'));
$('#userWrap').appendTo($('#table'));
} else {
$('#user').appendTo($('#table'));
$('#user1').appendTo($('#table'));
$('#userWrap').remove();
}
}
</script>
</head>
<body>
<div id="table">
TABLE
<div id="user">USER</div>
<div id="user1">USER1</div>
</div>
<button onClick='screwItUp(); ' >TOGGLE</button>
</body>
</html>
Sample: http://zequinha-bsb.int-domains.com/togglewrap.html
Related
I am very confused.
I created the following script which is located at http://tapmeister.com/test/dom.html. For some unknown reason, tinymce.editors.ta1 and tinymce.editors[0] show up as undefined, and attempting to use a method under them results in an error. But when I inspect tinymce or tinymce.editors using FireBug, I see them in the DOM.
So, I create a jsfiddle http://jsfiddle.net/JWyWM/ to show the people on stackoverflow. But when I test it out, tinymce.editors.ta1 and tinymce.editors[0] are no longer undefined, and the methods work without error.
What is going on??? Maybe something to do with public/protected/private properties? How do I access methods such as tinymce.editors.ta1.hide()? Thank you!!!
<!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 http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Testing</title>
<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({selector: "textarea#ta1"});
tinymce.init({selector: "textarea#ta2"});
console.log(tinymce);
console.log(tinymce.editors);
console.log(tinymce.editors.ta1);
console.log(tinymce.editors[0]);
//tinymce.editors.ta1.hide();
//alert('pause');
//tinymce.editors.ta1.show();
</script>
</head>
<body>
<form>
<textarea id="ta1"></textarea>
<textarea id="ta2"></textarea>
</form>
</body>
</html>
TinyMCE doesn't do all of the setup work immediately when you call init. It provides a callback, setup, to tell you when the work is done.
So if you provide a setup callback, you can interact with the editor instance then.
Here's an example (I've also moved your scripts to the end, which is best practice regardless):
Live Example | Live Source
<!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 http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Testing</title>
</head>
<body>
<form>
<textarea id="ta1"></textarea>
<textarea id="ta2"></textarea>
</form>
<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "#ta1, #ta2",
setup: function(e) {
console.log("Editor " + e.id + " is ready");
}
});
</script>
</body>
</html>
Now, if you want to actually access the editor instance, bizarrely TinyMCE doesn't add it to tinymce.editors until after calling the setup function. But if you throw in a brief yield, you're all set. Here's the above with a changed setup function:
Live Copy | Live Source
setup: function(e) {
// Bizarrely, TinyMCE calls `setup` *before* adding
// the relevant editor to `tinymce.editors`,
// so we have to yield briefly
console.log("Editor " + e.id + " is ready");
if (e.id === "ta2") {
console.log("It's ta2, I'll hide it in a moment.");
setTimeout(function() {
tinymce.editors[e.id].hide();
}, 0);
}
}
So why did it work on jsFiddle? Well, jsFiddle has a truly brain dead surprising default setting, which is to put all of your script in a window#load callback function. window#load happens very late in the load process, after all external resources have been loaded. (You can see that in the jsFiddle UI, it's the second drop-down list on the left.) So apparently TinyMCE was completely ready at that point, where it isn't earlier in the cycle.
Side note: 99.9% of the time, there is absolutely no point in supplying a tag name with an id selector, e.g. textarea#ta1. id values are unique, so you don't have to qualify them unless you explicitly want to avoid matching an element that may sometimes have one tag name, or other times have another, which is a pretty unusual use case.
There's a large chance that your script is running before tinyMCE has actually loaded. It might be the case that it loads faster from your test site so that is why it works.
Use as a quick check.
I wanted to animate a div on mouseover.
I just don't know how to make it fade in/appear slowly (I think we have to use the .animate function or something like that)
$("#logo").mouseover(function() { $("#nav").css('visibility','visible'); });
Will appreciate any help :)
$("#logo").mouseover(function() { $("#nav").fadeIn("slow"); });
Make sure your css has style for #nav as display:none;
Reference http://api.jquery.com/fadeIn/
SAMPLE DEMO
Try this:
$("#logo").mouseover(function() {
$("#nav").fadeIn('slow');
});
Refer Site http://api.jquery.com/fadeIn/
You can use the fadeIn/fadeOut methods or the fadeToggle method which automatically fades in or out. Every method allows a duration parameter to set the animation time, but there also many more parameters to modify the fading.
Look at the API for fadeToggle to see the whole functionality (and how to use) :) . (fadeIn API, fadeOut API).
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample</title>
<script src="js/jquery-1.7.1.js"></script>
<script>
$(document).ready(function(){
$("#logo").mouseover(function() { $('div:hidden:first').fadeIn('slow', function() {
// Animation complete
alert("complete")
}); });
});
</script>
<style>
#nav{display:none}
</style>
</head>
<body>
<div id="logo">Click Me</div>
<div id="nav" style="background:#CCC">sample</div>
</body>
</html>
USe fadeIn()... try this.
$("#nav").hide();
$("#logo").mouseover(function() { $("#nav").fadeIn(600));
When I try to make <div id="test">this should go down</div> go down with:
<div onclick="(".test").slideDown(800);">close it</div>
I get this error everytime i click 'close it'
SyntaxError: Unexpected token }
Please let me know, what I'm doing wrong. Thanks :)
Try like this:
<div onclick="$('.test').slideDown(800);">close it</div>
or even better as it seems that you are using jquery:
<div id="close">close it</div>
and in a separate javascript file:
$('#close').click(function() {
$('.test').slideDown(800);
});
See how cleaner this is? You no longer need to mix markup with javascript and have problems as the one you are encountering currently.
Change on of the uses of double quotes (and I'm guessing you're using jQuery so you'll also need to add the $ shortcut (or full jQuery call):
onclick="$('.test').slideDown(800);"
// or
onclick='$(".test").slideDown(800);'
You are using an ID selector for the <div id="test"> but trying to use a class selector to animate the <div> with $(.test) which will never match. However your code is also has bad quotes which is causing the SyntaxError, so to fix everything one of the following should help :-)
HTML:
<div id="closeIt">close it</div>
JavaScript:
$('#closeIt').click(function() {
$('#test').slideDown(800);
});
or Complete example (with separate bound function):
<!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" xml:lang="en" lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#closeIt').click(function() {
$('#test').slideDown(800);
});
});
</script>
<style type="text/css">
#test {
display:none;
}
</style>
</head>
<body>
<div>
<div id="closeIt">close it</div>
<div id="test">this should go down</div>
</div>
</body>
</html>
or inline onclick (not recommended as this doesn't separate markup from behaviour but it still works)
<div onclick="$('#test').slideDown(800);">close it</div>
The Goal:
On mouseover (or :hover), enlarge the preview image by about 400% and display it in the center of the page
Remove the preview when the mouse leaves
The Problem:
Solutions like FancyBox are too bloated
in FancyBox's case it ignores width and height for image elements, which makes it useless
Most of these "lightboxes" steal focus when they're called
Really, I'm just looking for a simple, efficient solution.
try something like this. the trick is position you can put the div wherever you want.
read something here. and you can read about hover here
here is an html example. (copy this to a text file and open it withyour browser)
<!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test</title>
<script text="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js">
</script>
</head>
<body>
<ul>
<li class="">Lynx</li>
<li>Jaguar</li>
</ul>
<div id="picture" style="position:absolute; top:0px; right:0px;">
</div>
<script type="text/javascript">
var animal = {
"Lynx":
"http://wnbaoutsiders.files.wordpress.com/2009/06/lynx21.jpg",
"Jaguar" :
"http://www.tropical-rainforest-animals.com/image-files/jaguar.jpg"
}
var hovered = function(e) {
//you can get what to show from the elemnt, instead of the content
// you could use an id.
var name = $(e.target).html()
$('#picture').append("<img src='" + animal[name] +"'/>")
}
var unhovered = function() {
$('#picture').empty();
}
//here you bind mouseenter and mouseleave
$('li').hover(hovered, unhovered);
</script>
</body>
Perhaps you're looking for a tooltip? You can use any html (including images) inside the tooltip.
http://flowplayer.org/tools/tooltip/index.html
Hi in case of full page submit a trasparent div id coming and changing the cursor to 'wait' . Now when the page is getting submitted and new page is coming up cursor still remains to 'wait' not changing to default until mouse is moved in Firefox
Here is simple html click on show button div is coming when user move mouse over the div cursor is changing as wait cursor. Now when this page is loaded again pressing F5 cursor remain as wait cursor in firefox its working fine in IE is there any way to make the cursor as default on pageload in Firefox
<!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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
body {
cursor:default;
}
</style>
<script src="js/jquery.js"> </script>
<script>
var test = true;
$(document).ready(function() {
$('#maindiv').css('display','none')
});
function showDiv() {
$('#maindiv').css('display','block')
}
</script>
</head>
<body>
<div id="divBody" style="background-color:red;width:500px;height:500px" >aa
<div id="maindiv" style="background-color:#999999;height:100$;width:400px;height:400px;cursor:wait">
sss
</div>aa
</div>
<input type="button" value="show" onclick="showDiv()"/>
</body>
</html>
Could you use an animated image to give the user feedback instead of changing the cursor?
ajaxload.info has some great examples.
thats some messy code...
why not use an image or, css to display a div on top of everything else with transparent background and cursor: wait; on your css or style tag then show that div when ever you wish...
HTML
<div id="modal"> </div>
<input id="test" type="text" />
JQuery
$('#modal').css({cursor: 'wait'}).width($(document).width()).height($(document).height());
$('#test').bind('click',function (){$('#modal').show()})
I have not tested this so ... in theory it should work ... if not try and change body width and height to "100%"
take care