$(function() {
$(".header-dialogue").hover(function() {
$(".console").draggable();
});
});
The thing is to make block draggable only when the header is hovered. Now the whole block stays draggable even when the element is not hovered. How to perfom else function?
Example http://codepen.io/NeedHate/pen/LExPqR
Change your jQuery code to :
$(function() {
$(".console").draggable({ handle: ".header-dialogue" });
});
Related
creating a mobile website using PinchZoom.js plugin to zoom in and zoom out on a map. It also has a search feature that highlights areas on the map.
When the map is zoomed in, and someone searches, I want pinchzoom.js to reset back to the zoomed out view. I can achieve this by removing the style on the Zoom Container through jquery. but when I tap back on the map, it starts zooming from the original zoomed in location, before the search.
How would I go about resetting the pinchzoom.js plugin back to its original onload scale from a jQuery click function?
<script type="text/javascript">
jQuery(function ($) {
$(function reset() {
$('div.pinch-zoom').each(function () {
new RTP.PinchZoom($(this), {
maxZoom: 10
});
});
})
});
</script>
<script>
jQuery(function ($) {
$(document).ready(function() {
$('#contactlink').click(function(){
$('#formbox').slideToggle('fast');
$('.pinch-zoom .activeLocation').removeClass('activeLocation');
});
});
$(document).ready(function() {
$('#formbox').click(function(){
$('#formbox').slideToggle('fast');
});
});
})
</script>
<script type="text/javascript">
jQuery(document).ready(function (){
jQuery('#E1').click(function() {
jQuery('.pinch-zoom').empty();
jQuery('.E1').addClass("activeLocation");
});
});
</script>
In my case I need to reset zoom image.So save old image src of zoom image in one variable and create new html element i.e. image with same id and set old image src which we saved in temporary variable.With orientation change we can use same solution.
In your case save your value of zoom element and delete it and recreate html element and assign old value.
May be it is not proper solution.But it works for me.
I have a button which when clicked the first time it will load another html page.
When it is clicked the second time it will empty a div of the loaded page.
However, for some reason the loaded content keeps reappearing after the second click....
CSS:
#boatdiv {
width: 100%;
}
.clicked {}
HTML
<button id="load"></button>
<div id="boatdiv"></div>
jQuery
$(document).ready(function() {
$.ajaxSetup ({
cache: false
});
var loadURL = "AjaxLoad_injection.html";
$("#load").on("click", function() {
if(!($(this).hasClass("clicked"))){ //checks if button has NOT been clicked
$("#boatdiv").html("<p>loading...</p>").load(loadURL);
}
else {
$("#boatdiv").empty();
}
$("#boatdiv").toggleClass("clicked");
}
);
}); // end ready
What's going on?
You test $(#load) but toggle $("boatdiv").
Try :
$("#load").on("click", function() {
if(!($(this).hasClass("clicked"))){ //checks if button has NOT been clicked
$("#boatdiv").html("<p>loading...</p>").load(loadURL);
}
else {
$("#boatdiv").empty();
}
$(this).toggleClass("clicked");
});
You are toggling class on wrong element. You want it to toggle on the element being clicked. Same as code I gave you in last post.
Simple to walk through it, you are testing this... so need to toglle the class on this
Use
$(this).togglClass('clicked')
Remember that ajax calls are asynchronous. You may be clicking the button a second time before the ajax call has returned.
You could disable the button during the ajax call, like this:
$('#load').on('click', function() {
if (!$(this).hasClass("clicked")) {
$('#load').attr('disabled', true);
$("#boatdiv").html("<p>loading...</p>").load(loadURL, function() {
$('#load').attr('disabled', false);
});
} else {
$('#boatdiv').empty();
}
//$('#boatdiv').toggleClass("clicked");
$('#load').toggleClass("clicked");
});
The button is disabled before the ajax call. A callback function is passed as a second parameter to the "load()" function. It will be called when the ajax call returns. It will re-enable the button.
EDIT: I missed that the wrong element was getting the class toggled, but I still think you want to disable the button during the ajax call or things can get messed up.
How to check if a button is clicked or not in prototype JavaScript?
$('activateButton').observe('click', function(event) {
alert(hi);
});
The code above is not working.
With this button:
<button id="mybutton">Click Me</button>
Use this:
$('mybutton').observe('click', function () {
alert('Hi');
});
Tested and works, here.
You might want to encase it in a document.observe('dom:loaded', function () { }) thingy, to prevent it executing before your page loads.
Also, just an explanation:
The single dollar sign in Prototype selects an element by its id. The .observe function is very similar to jQuery's .on function, in that it is for binding an event handler to an element.
Also, if you need it to be a permanent 'button already clicked' thingy, try this:
$('mybutton').observe('click', function () {
var clicked = true;
window.clicked = clicked;
});
And then, if you want to test if the button has been clicked, then you can do this:
if (clicked) {
// Button clicked
} else {
// Button not clicked
}
This may help if you are trying to make a form, in which you don't want the user clicking multiple times.
How one may do it in jQuery, just for a reference:
$('#mybutton').on('click', function () {
alert('Hi');
});
Note that, the jQuery code mentioned above could also be shortened to:
$('#mybutton').click(function () {
alert('Hi');
});
jQuery is better in Prototype, in that it combines the usage of Prototype's $ and $$ functions into a single function, $. That is not just able to select elements via their id, but also by other possible css selection methods.
How one may do it with plain JavaScript:
document.getElementById('mybutton').onclick = function () {
alert('Hi');
}
Just for a complete reference, in case you need it.
$('body').delegate('.activateButton', 'click', function(e){
alert('HI');
});
I want to hide a button until other button is getting submitted.
ex. button1 is hidden.
button 2 visible
if(button2 submitted)
button 1 get visible.
can you tell a method to do that??
I'm rather new to jQuery, but I believe this may work:
HTML:
<form id="someform">
...
</form>
JS:
$(function() {
$('#button1').hide();
}
$('#someform').submit(function() {
$('#button2').show();
}
Try this:
$('#button1').bind('click', function() {
$(this).hide();
$('#button2).show();
});
$('#button2').bind('click, function() {
$(this).hide();
$('#button1).show()
});
As you may know, if you chain jQuery animations together using the "complete" parameter, each animation happens in succession only after the previous is complete.
I have a chain, like this:
$('#foobar').load(url, function(){
$(this).fadeIn(time, function(){
$(this).scrollTop(position, time, function() {
$(this).css({'color':'#58e'})
});
});
});
This chain will execute something like this: first load content, then fade in, then scroll to the top, then finally change the css color.
What I want is this: first load the content, then fade in and scroll to the top at the same time, then finally change the color after fadeIn and scrollTop are both done.
Let's say the scrollTop animation takes twice as long than the fadeIn animation. What simple piece of code would I add to my code so that the scrollTop callback in fadeIn DOESN'T wait for the fadeIn animation to complete. The css() animation will wait for the scrollTop animation to complete, like normal.
So the only change (whatever it might be) would affect the callback within fadeIn where scrollTop is called. I'm guessing it might have to do with manipulating the queue?
Thanks for the help!
EDIT: Here's the solution as hinted by Andrew:
First, my original code which loads each custom function in order:
show_loader(0, function() {
close_box($target_close, '/', '#' + $target_close.attr('id') + ' .post_wrap', function() {
open_box($target_open, event.value, '.wide-col', function() {
hide_loader(function() {
scroll_to_content($target_open);
});
$target_close = $target_open;
});
});
});
Now I want close_box and open_box to execute asynchronously (at the same time), so I changed it to this:
show_loader(0, function() {
close_box($target_close, '/', '#' + $target_close.attr('id') + ' .post_wrap');
open_box($target_open, event.value, '.wide-col', function() {
hide_loader(function() {
scroll_to_content($target_open);
});
$target_close = $target_open;
});
});
Now close_box and open_box animations happen at the "same time".
Move the code that animates scrollTop outside of the callback to the fadeIn function:
$('#foobar').load(url, function() {
$(this).fadeIn(time);
$(this).scrollTop(position, time, function() {
$(this).css({'color':'#58e'});
});
});