I am trying to do something like this.
I want to increase the height of textarea when the user clicks a button
For this I have made a button like this <a id="expandText" href="#"> Expand </a> and added the following javascript
$('#expandText').click(function () {
$('#id_text').animate({ height: "1000px" }, 500);
//$('#id_text').css( "height","+=85" );
});
I tried two things
One was to animate the height of the text box
The other was to change the css, but neither of them has worked
Edit:
I tried out all the things that have been given below, but it is still not working. Could it be possible because this textarea has a class = MCeEditor which makes this textarea an editor and not just a normal text area
You say the textarea has the class MCeEditor - so I'm guessing that's TinyMCE or something of that kind.
If so, use inspect element in whatever browser you're using (hold down CTRL to get browser context menu if TinyMCE context menu shows up), and navigate your way down through the editor till you find an iframe which is where the writing really happens. If I'm not mistaken, the selector .mceEditor iframe should do.
The reason for all thiss hazzle, is that TinyMCE hides your actual textarea, and creates an editor on its own. As you type into TinyMCE, it puts that text back into your textarea so you can retrieve it as expected from server side. So when you see the MCE editor, you aren't directly manipulating your textarea as one might expect.
It's weird, as your code should work. Do you have any error? Does it work when you run directly $('#id_text').animate({ height: "1000px" }, 500); on a JS console? One more thing is you may want to add "return false" like this
$('#expandText').click(function () {
$('#id_text').animate({ height: "1000px" }, 500);
return false;
});
to avoid the link action when you click on the link.
EDIT: you've added "this textarea has a class = MCeEditor", so I think you misunderstand something. What you see is an editable content (span or div), not a textarea (which is actually hidden). You need to resize this element (and probably you should use TinyMCE API to do that).
I've read the doc and you may just use:
$('#id_text').animate({ height: 1000 }, 500);
It's working fine. See here in JSFiddle http://jsfiddle.net/URkWu/
Let me know if you don't see the textbox animating.
Related
Point
The code I have here is from my "operating system" I'm trying to create inside a browser by putting iframes in AppWindows with PHP code as the backend or the (main program process).
Now in every GUI system you have the ability to move windows, stack one on top of each others and such, but I'm not able to do efficiently in HTML using jQuery & jQuery-UI.
I'm using draggable() and some tricks I've found on StackOverflow to be able to bring the div AppWindow on top.
The problem
The code for bringing the **AppWindow** on top works fine but the problem is the iframe inside that window gets reset, because what this code is doing is that it stacks the current div as the first div above all the others inside the parent container.
If you notice the AppWindow 1 iframe blinks when you click on that window, I don't want that.
Code (jQuery)
$(function() {
// Don't know what I'm doing with iframe here...
$('.AppWindow iframe').click(function(){
$(this).parent().child.parent().append(this);
});
$('.AppWindow').click(function(){
$(this).parent().append($(this));
});
$('.AppWindow').draggable({handle:".DragHandle"});
});
Conclusion
If there is a way of preventing this from happening feel free to write an answer below. If you have a better way such as "JavaScript OS UI Framework" or something like that you're even more free to write below.I want something like **os.js** or **windows93.net** type of thing. All I need is a working taskbar, working window and a way to easily embed a PHP page inside that window that will mimic the work of the application.
I don't think it's possible. Take a look at here.
But
why do you reorder windows by change their positions in the dom in the first place? You could simply work with z-index. A basic example where you just set an active class of the targeted frame.
$(function() {
$('.AppWindow').draggable({
handle:".DragHandle",
drag: function(event, ui){
updateActiveWindow(event.target);
}
});
$('.AppWindow').on('click', function(){
updateActiveWindow(this);
});
function updateActiveWindow(el) {
$('.AppWindow').removeClass('active');
$(el).addClass('active');
}
});
with following css changes
.AppWindow.ui-draggable-dragging,
.AppWindow.active {
z-index: 1;
}
Edit: optimized the js a bit so that the window turns active once you start dragging.
I've seen the new website of megaupload (mega) and we've got this:
Ok, if I press on left-menu contacts, it only reloads the white part on the image, if I press messages, the same, it only reloads white part. But if I go from contacts to messages and I press browser's back button, it goes from messages to contact and only reloads white part as always.
In my website, I do the same using jquery hide and show, but obviously, if I press browser's back button it doesn't hide the div and shows the other one.
My web site is only one html file and there are 4 div that get shown or hidden depending on the button you press, this is an example:
$("#btn_contact").click(function () {
$("#content_contact").show();
$("#content_home").hide();
$("#content_products").hide();
$("#body_aux").hide() ;
$(this).addClass('visited');
$('#btn_products').removeClass('visited');
$('#btn_home').removeClass('visited');
});
Can anybody tell me how to find this with jquery or whatever I have to use.
I don't know if I've explained myself well, if not, ask me to do it better.
I would appreciate any help. Thanxs a lot.
Maybe it'd be easier for you and more appropiate to make "content_contact.html", "content_home.html", and so on and use .load() function as Ozan Deniz said. You wouldn't have to change margins, positions, etc. and back button would work withouth programming. I think is not appropiate to make the whole website using just one html file, showing and hiding div's, ofcourse you can do this but maybe is not the right way. I'm newbie at this, but that's what an expert told me beacuse I was doing something similar to that.
Hope to help you.
You can use jquery load function to load white part
For example;
$('#result').load('ajax/test.html');
And in back button event you can load the white part
jquery hide and show
window.onbeforeunload = function() { $('#result').hide(); }; or
window.onbeforeunload = function() { $('#result').show(); };
jquery load function
window.onbeforeunload = function() { $('#result').load('ajax/test.html'); };
I'm looking for javascript that will allow more HTML to appear on a website when a user clicks on an icon. I'm working on my first ever mobile design, and am building a prototype with html,css and javascript. Here is what I have so far: http://www.patthorntonfiles.com/snk_mobile
What I want to happen is when users click on the search icon at the top, a search box appears. I don't want the jquery accordion effect or something similar. I just want some HTML to appear and then disappear when a user clicks on the icon again or hits search.
Any recommendations for code or libraries for me to look at what be great. I don't need you to give me the code, but my Google searches aren't turning up exactly what I'm looking for.
Here's a non-jQuery solution:
document.getElementById("identifier").style.setProperty("visibility", "hidden");
and
document.getElementById("identifier").style.setProperty("visibility", "visible");
I know you said you don't want to use the jQuery accordion effect, but using jQuery to animate the opacity?. Please see below.
$("#idClicked").click(function() {
$("#searchBox").fadeTo("fast", 1);
});
jQuery's hide() and show() will do exactly that (they don't have any accordion effect, they just appear and dissapear with no ornaments).
$('#HtmlId').hide();
$('#HtmlId').show();
Additionally you get toggle(), to hide if shown and show if hidden:
$('#HtmlId').toggle();
---- Edit ----
After reading your comment, imagine you have the html:
<li><img id='hideShowIcon' src="patthorntonfiles.com/snk_mobile/search.gif"; width="50px'"/></li>
And the div to hide/show is:
<div id="search"> <gcse:search></gcse:search> </div>
Then you bind the click event to the image with the callback function performing the toggle:
$("#hideShowIcon").click(function() {
$('#search').toggle();
});
----- Edit 2-----
I saw your site and you don't have a document ready function. Basically it should look like this:
$(document).ready(function() {
$("#hideShowIcon").click(function() {
$('#search').toggle();
});
});
If you don't add this, jQuery tries to bind the action to an element that doesn't exist yet.
I've tried PopBox to have a textarea pop up, but the functionality of PopBox seems to be incompatible with the game system. (For example, I know for a fact that alert(); and prompt(); works in the html page testing, but does not happen at all in the actual game)
Currently the game has this confirm box system implemented. Is there a way to add a textarea to this?
If not, is there any other Jquery/JS tricks/plugins that will allow a textarea box to pop up when a button is clicked?
I'm no expert but I think this is possible:
<div id="textAreaDiv" style="visibility:hidden;"><textarea></textarea></div>
<input type="button" onClick="showTextArea()">
<input type="button" onClick="hideTextArea()">
<script>
function showTextArea() {
document.getElementById('textAreaDiv').style.visibility="visible";
}
function hideTextArea() {
document.getElementById('textAreaDiv').style.visibility="hidden";
}
</script>
OR...
To toggle the DIV with one button, you could do this:
<script>
function showHideTextarea() {
if (document.getElementById('textAreaDiv').style.visibility="hidden")
{
document.getElementById('textAreaDiv').style.visibility="visible";
}
else
{
document.getElementById('textAreaDiv').style.visibility="hidden";
}
}
</script>
And this doesn't need the JQuery library to use.
Hope it helps...
check this plugin
jAlert
very easy and clean to use, you can do whatever you want.
its easy to change the input by a textarea
in jquery.alerts.js file, search for 'prompt' case, and change the input by textarea.
i made this for me and have been working so far.
You can have a on the page, which inserts a textarea box when the button is clicked, something like this...
In original HTML page, stick a blank area, maybe reserving space like so
<div id="Input_Area">
<br>
<br>
</div>
Then, put an onClick event on your button which replaces the innerHTML with your textarea (or create a function that does it, and call it with your onClick event).
you can try jquery dialog http://jqueryui.it/demos/dialog.
This pops open an overlay and a dialog. You can customize this display and interaction to your hearts desire.
I have alert boxes all around my site, that have been working up until now, ( I have done a few updates to my blog recently before this started happening ) the problem I am experienceing is that when I click on a link ( in my case a image link ) and the alert box appears, I submitt the ok button and suddenly im rediercted to a white page with 'true' in the top corner. My alert box scripts are inside my blog template.
I tested this alert box script out in a blog post:
<"a href="javascript:onClick=alert("Not an active link");">CLICK<"/a>
withouth the extra "
and then went to preview the post, however the same error occured. This is not a browser problem as it only happens on my site, when i got to someone elses with alert boxes, it works. Please help with this I have been asking about it for about a week now and would appreciate someone who can help
here is a screenshot of what I get redirected to:
http://img813.imageshack.us/img813/2674/true.png
Thanks for all help.
Use this
CLICK
Demo here: http://jsfiddle.net/e2fkT/embedded/result/
I think you have some typos... It would be:
click
Use simple quotes inside or escape double quotes.
I don't understand the use of onclick there too... Just the alert will open an alert box when you click.
click
Also it would be better to separate javascript from html... You could include with the following content (jquery example, i forgot almost everything about old javascript... just get the idea) into a non-active-links.js file or in a block:
$(document).ready(function () {
$('a.non-active-link').click(function () {
window.alert('Not an active link');
return false;
});
});
That way all links in the page with a class attribute of "non-active-link" will fire up the alert box.
I think you messed up with javascript inside href and the onclick attribute. Your snippet is actually assigning the result of the alert function call to the variable onCLick. The display of true might be the return value of the alert method. Still an odd behavior.
CLICK
CLICK
Those two cause no problems to me.