my html is:
<html>
<body>
<button id="widthPlus">increase </button>
<div id="bod"> hai </div>
<img id="tree" src="http://www.rangde.org/newsletter/nov11/images/real_tree.png" width="350"/>
</body>
</html>
my script is:
$(document).ready(function() {
$("#widthPlus").click(function(){
var currentwidth = $('#tree').attr('width');
var currentwidthNum = parseFloat(currentwidth, 350);
var newwidth = currentwidthNum+5;
$('#tree').animate({'width', newwidth}, 5000);
return false;
});
});
i am trying to increase(5px) the image width when click a button my jsfiddle is here
$(document).ready(function() {
$("#widthPlus").click(function() {
$('#tree').animate({
'width': '+=5'
}, 5000);
return false;
});
});
jsFiddle.
You have many syntax errors, and also are not using some of the functions properly. I would highly recommend using the documentation for things like parseFloat and jQuery animate. Using Chrome's inspect tool or Firefox's firebug, you will be able to see the obvious javascript errors that are happening and be able to debug.
Here's a modified version of your code that works (so you can learn): http://jsfiddle.net/XjaD5/5/
$(document).ready(function() {
$("#widthPlus").click(function(){
var currentwidth = $('#tree').width();
var newwidth = currentwidth+5;
$('#tree').animate({'width': newwidth}, 5000);
return false;
});
});
Alex's version is a much better and elegant solution, however.
Related
In a web page I'm writing a user plays a game, once they win, text is supposed to flash. Once the user hits restart the text flashes. I would like to know how I can use Jquery(I have to use jquery as a requirement) to do this?
Thank you for your help!
Below is a snippet that I believe exhibits the requirements you're looking for.
This depends on setInterval and clearInterval to handle a a repeating callback that toggles a CSS class. You can use further css animations / transitions to spruce up the effect more.
(function() {
var flasherInterval = 0,
$flasher = $('#flasher');
$('#win').on('click', function() {
if (!flasherInterval) {
flasherInterval = setInterval(function() {
$flasher.toggleClass('hidden');
}, 250);
}
});
$('#restart').on('click', function() {
console.log(flasherInterval);
clearInterval(flasherInterval);
if (!$flasher.hasClass('hidden')) {
$flasher.toggleClass('hidden');
}
flasherInterval = 0;
});
}());
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="win">Win</button>
<button id="restart">Restart</button>
<p id="flasher" class="hidden">Flashing text!</p>
$(function(){
// loop showing and hiding for 1.5 seconds
while(blink){
setTimeout(function(){ $('#myDiv').hide() , 1500);
setTimeout(function(){ $('#myDiv').show() , 1500);
}
});
don't actually use this code - it's pretty bad , and meant to get you started ... just an idea - this shows for to set a delay , how to show and hide
You could also use the blink plugin. http://antiyes.com/2009/08/24/jquery-blink-plugin/
For example I have a function called showcontainer. When I click on a button activating it, I want a certain div element, in this case <div id="container">, to fade in. And when I click it again, fade out.
How do I achieve this?
Note: I am not accustomed with jQuery.
So you got a bunch of jQuery answers. That's fine, I tend to use jQuery for this kind of stuff too. But doing that in plain JavaScript is not hard, it's just a lot more verbose:
var container = document.getElementById('container');
var btn = document.getElementById('showcontainer');
btn.onclick = function() {
// Fade out
if(container.style.display != 'none') {
var fade = setInterval(function(){
var opacity = parseFloat(container.style.opacity);
opacity = isNaN(opacity) ? 100 : parseInt(opacity * 100, 10);
opacity -= 5;
container.style.opacity = opacity/100;
if(opacity <= 0) {
clearInterval(fade);
container.style.opacity = 0;
container.style.display = 'none';
}
}, 50);
// Fade in
} else {
container.style.display = 'block';
container.style.opacity = 0;
var fade = setInterval(function(){
var opacity = parseFloat(container.style.opacity);
opacity = isNaN(opacity) ? 100 : parseInt(opacity * 100, 10);
opacity += 5;
container.style.opacity = opacity/100;
if(opacity >= 100) {
clearInterval(fade);
container.style.opacity = 1;
}
}, 50);
}
};
Check the working demo.
Provided you're not opposed to using jQuery per se, you can achieve this easily:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#showcontainer').click(function() {
$('#container').fadeToggle();
});
});
</script>
...
<div id="container">
...
</div>
...
<input type="button" id="showcontainer" value="Show/hide"/>
...
Note the missing http: in the beginning of the source of jQuery. With this trick the browser will automatically use http: or https: based on whether the original page is secure.
The piece of code after including jQuery assigns the handler to the button.
Best thing you could do is start now and get accustomed to jQuery.
The page http://api.jquery.com/fadeIn/ has all the example code that could be written here. Basically you want to have the call to fadeIn in your showcontainer function.
function showcontainer() {
$('#container').fadeIn();
}
You can have a look at jQuery UI Toggle.
The documentation turns the use of the library very simple, and they have many code examples.
You'd be as well off learning jQuery as it makes it a lot easier to do things!
From the sounds of it, you could have the container div already in the HTML but with a style of "display:none;", and then simply show it in your click event using (jQuery):
$('#container').fadeIn('slow', function() {
//Any additional logic after it's visible can go here
});
I am not sure if Spry is just smoother than jQuery but I can never get my animations as smooth as http://labs.adobe.com/technologies/spry/samples/effects/slide_sample.html
I perform my animations as follows:
$("#button").click(function (e) {
$("#thediv").css('margin-left',$(window).width + 10 + 'px');
$("#thediv").animate({
'margin-left' : '0'
},100);
});
I have tried playing with the easing, lowering the framerate using a plugin, adjusting the ms. Does Spry do anything different? As far as Im aware it manipulates the DOM like jQuery. What are ideal animation settings to create smooth "slide from left" div transitions. The web app is for a mobile phone and the div switcing is for switching between views.
Yes you can get exact effect: Working demo :) http://jsfiddle.net/FjgjE/ or http://jsfiddle.net/YWcgw/
Use these js and css files and rest html and full js code is in demo.
Please lemme know if I missed anything!
Hope it helps your cause :) rest feel free to play around with the demo.
scripts
<link href="http://labs.adobe.com/technologies/spry/css/samples.css" rel="stylesheet" type="text/css" />
<script src="http://labs.adobe.com/technologies/spry/includes/SpryEffects.js" type="text/javascript"></script>
code
var animation_start = function(){
var button = document.getElementById('animation_button');
if (button){
button.disabled = true;
button.style.backgroundColor = '#FFF';
}
}
var animation_stop = function(){
var button = document.getElementById('animation_button');
if (button){
button.disabled = false;
button.style.backgroundColor = '';
}
}
var slide_func = new Spry.Effect.Slide('slideIt', {toggle:true, setup: animation_start, finish: animation_stop});
Determine Minheight and put it via javascript. It work successfully twice but same code is not working in third calling. This one (document.getElementById("rightadmin").style.minHeight=wrapHeight+'px';) is not working. More amazing is that if I make the 3rd one elevate to 2nd position then it works and then 3rd one not working. So basically whatever I put after 2nd one don't work.
JavaScript:
function height(){
var dheight= ($(document).height());
var wheight= ($(window).height());
if(dheight>wheight){
var wrapHeight= dheight;
}
else {
var wrapHeight=wheight;
}
document.getElementById("iframeArea").style.minHeight=wrapHeight+'px';
document.getElementById("dailySchedule").style.minHeight=wrapHeight+'px';
document.getElementById("rightadmin").style.minHeight=wrapHeight+'px';
}
html:
<body onload="height();">
<!--Start of iframeArea-->
<div class="iframeArea" id="iframeArea">
<div class="btnRight" id="rightadmin">
</div>
<!--End of btnRight-->
</div>
<!--End of iframeArea-->
Are you sure the dailySchedule id exists ? If not your function will throw an error and won't execute the last line.
Might be due to scope problems - the variable wrapHeight is local in two blocks.
Should not have any effect on the outcome, but this code is more elegant way to assign the third variable:
var dheight = $(document).height();
var wheight = $(window).height();
var wrapHeight = (dheight > wheight) ? dheight : wheight;
As all others already said, something else is the problem.
I don't see element with id=dailySchedule on the page. If no element with that id is on the page you should get an error. Check browser console for javascript error.
you say <body onload='height()'> and never check if the document is ready, and then there is perhaps no div with id rightadmin...
Try to convert to jQuery and do something like this and delete the onload attribute.
$(document).ready(function(){
//your code here
}
I am using now the following code. It works fine for everything.
$(function(){
var dheight= ($(document).height());
var wheight= ($(window).height());
var wrapHeight = (dheight > wheight) ? dheight : wheight;
$('.dailySchedule').css({ "min-height": wrapHeight + 'px' });
$('.iframeArea').css({ "min-height": wrapHeight + 'px' });
$('.btnRight').css({ "min-height": wrapHeight + 'px' });
});
Thanks for answeri
Edit: I put this snippet of code in jsbin: http://jsbin.com/eneru
I am trying to let the user resize (only vertically) a DIV element with jQuery. I read about jQuery UI, I tried it, and in some minutes, I had it working. But the library is adding a ~25KB overhead that I would like to avoid, since I only want simple vertical resizing.
So I tried to do it on my own. Here it is the HTML, I am using inline styling for clarity:
<div id="frame" style="border: 1px solid green; height: 350px">
<div style="height: 100%">Lorem ipsum blah blah</div>
<span id="frame-grip" style="display: block; width: 100%; height: 16px; background: gray"></span>
</div>
As you can see, there is a little bar under the DIV element, so the user can drag it up or down to resize the DIV. Here it is the Javascript code (using jQuery):
$(document).ready(function(){
var resizing = false;
var frame = $("#frame");
var origHeightFrame = frame.height();
var origPosYGrip = $("#frame-grip").offset().top;
var gripHeight = $("#frame-grip").height();
$("#frame-grip").mouseup(function(e) {
resizing = false;
});
$("#frame-grip").mousedown(function(e) {
resizing = true;
});
$("#frame-grip").mousemove(function(e) {
if(resizing) {
frame.height(e.pageY - origPosYGrip + origHeightFrame - gripHeight/2);
}
});
});
It works, more or less, but if you drag the bar too fast, it stops following the mouse movement and everything breaks.
It is the first time I try to do something serious (ahem) with JS and jQuery, so I may be doing something dumb. If so, please do tell me :)
You are doing something dumb: You're trying to do it yourself.
Hear me out, hear me out: Javascript across browsers is a horrible, horrible thing. There are many engines in many versions with many different operating systems, all of which have many subtleties, all of which make Javascript pretty much hell to work with. There is a perfectly good reason why librabries such as jQuery (and their extensions) have exploded in popularity: a lot of great programmers have spent a lot of hours abstracting all these horrible inconsistencies away so we don't have to worry about it.
Now, I am not sure about your user base, maybe you are catering to old housewives that still have dialup. But for the most part in this day and age the 25KB hit on the initial page load (as it will be cached afterwards) for the peace of mind that this is going to work in all browsers consistently is a small price to pay. There is no such thing as "simple" resizing when it comes to Javascript, so you're better off using UI.
I worked on a similar thing and managed to get it to work with maximum and minimum height and to me seems to work very fluid, this was my code.
$(document).ready(function()
{
var resizing = false;
var frame = $("#frame").height();
$(document).mouseup(function(event)
{
resizing = false;
frame = $("#frame").height();
});
$("#frame-grip").mousedown(function(event)
{
resizing = event.pageY;
});
$(document).mousemove(function(event)
{
if (resizing)
{
$("#frame").height(frame + resizing - event.pageY);
}
});
});
live example of how I used it, pull the red button, lacked images so i replaced with simple color. http://jsbin.com/ufuqo/23
I agree with Paolo about using UI, but here are some modifications to your code to get it working:
$(document).ready(function(){
var resizing = false;
var frame = $("#frame");
$(document).mouseup(function(e) {
resizing = false;
});
$("#frame-grip").mousedown(function(e) {
e.preventDefault();
resizing = true;
});
$(document).mousemove(function(e) {
if(resizing) {
var origHeightFrame = frame.height();
var origPosYGrip = $("#frame-grip").offset().top;
var gripHeight = $("#frame-grip").height();
frame.height(e.pageY - origPosYGrip + origHeightFrame - gripHeight/2);
}
});
});
You can save having a do-nothing handler called when you're not resizing, by only binding the mousemove function when you are actually dragging:
$(document).ready(function(){
var resizing = function(e) {
var frame = $("#frame");
var origHeightFrame = frame.height();
var origPosYGrip = $("#frame-grip").offset().top;
var gripHeight = $("#frame-grip").height();
frame.height(e.pageY - origPosYGrip + origHeightFrame - gripHeight/2);
return false;
}
var stopResizing = function(e) {
$(document).unbind("mouseover", resizing);
}
$("#frame-grip").mouseup(stopResizing);
$("#frame-grip").mousedown(function(e) {
e.preventDefault();
$(document).bind("mouseover", resizing).mouseup(stopResizing);
});
});
(sample at http://jsbin.com/ufuqo)