Need to reset PinchZoom.js plugin after a click - jquery-plugins

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.

Related

Draggable with hover and not

$(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" });
});

Creating JQuery plugin

I've followed a tutorial to create a Website Menu, this involves JQuery to provide some transitions.
I've got it working as intended, but to prove I understand this new code and framework, and also, to follow development guidelines, I want to move to the Menu code to a plug-in.
Working (not-plug-in) version:
This appears in the .ascx, along with a UL tag, ID = MainMenu
<script type="text/javascript">
NavBarMenu();
</script>
In another file, NavBar.js, the following code is used to associate some JQuery events:
function NavBarMenu() {
$(function() {
var $menu = $('#MainMenu');
var $menu_items = $menu.children('li');
...
Not working version:
Now the plug-in code is created, the NavBarMenu function is called like this from the .ascx:
<script type="text/javascript">
$("#MainMenu").NavBarMenu();
</script>
In NavBar.js I now have:
(function($) {
$.fn.NavBarMenu = function() {
var $menu_items = this.children('li');
However, the $menu_items variable is unpopulated?
Shouldn't this (2nd example) be equivalent to $('#MainMenu') (1st example)
I followed this example, where a JQuery selector is switched for the this pointer. http://learn.jquery.com/plugins/basic-plugin-creation/
Thanks in advance :D
There must be other factor affecting my implementation, I will revisit it.
I have created 2 JSFiddle pages, as part of my investigation and it has proved that the JQuery Selector can be swapped for the this pointer in a plug-in.
Fiddle detailing 1st example: http://jsfiddle.net/rL7zpr15/1/
$('input[type=button]').click( function() {
$( "div" ).css( "background", "green" );
});
Is equivalent to
Fiddle detailing 2nd example: http://jsfiddle.net/hds7advx/
$.fn.greenify = function() {
this.css( "background", "green" );
};
$('input[type=button]').click( function() {
$( "div" ).greenify();
});

Masonry images overlapping

so I'm working on my Tumblr Theme right now. I'm using Masonry to have all my posts in a 5-column grid and the infinite scroll script to load new images into the grid when I'm scrolling down. Unfortunately, most of the time as I scroll down images are overlapping. I figured out that the problem may be Masonry triggering before the images are loaded, but right now I have no idea how to fix this. I'm already using (window).load instead of (document).ready but the pictures keep overlapping nonetheless. Here's the full code snippet:
<script type="text/javascript" src="http://static.tumblr.com/imovwvl/dJWl20ley/jqueryformasonry.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/imovwvl/rSGl20lfv/masonry.js">
</script>
<script src="http://static.tumblr.com/df28qmy/SHUlh3i7s/jquery.infinitescroll.js"></script>
<script src="http://static.tumblr.com/thpaaos/lLwkowcqm/jquery.masonry.js"></script>
<script type="text/javascript">
$(window).load(function () {
$('.posts').masonry(),
$('.masonryWrap').infinitescroll({
navSelector : "div#navigation",
// selector for the paged navigation (it will be hidden)
nextSelector : "div#navigation a#nextPage",
// selector for the NEXT link (to page 2)
itemSelector : ".entry",
// selector for all items you'll retrieve
bufferPx : 10000,
extraScrollPx: 11000,
loadingImg : "",
loadingText : "<em></em>",
},
// call masonry as a callback.
function() { $('.posts').masonry({ appendedContent: $(this) }); }
);
});
</script>
<script type="text/javascript">$(window).load(function(){$("p").remove(":contains('Source:')");});</script>
Does anyone have an idea on how to get it working? Any help would be appreciated!
Masonry is placing the items absolutely before your images have loaded and take more space.
Utilize Jquery imagesLoaded to overcome this. You may want to initially hide your elements and then show them after they have finished loading. Try something like this:
//Wire masonry onto the photolist with whatever defaults you need
$photolist.imagesLoaded(function () {
$photolist.masonry({
// options
itemSelector: '.photo',
columnWidth: 226,
isFitWidth: true,
gutterWidth: 12
});
});

Add spinner image in jQuery code

I have a jquery to show links in a div without reloading page:
jQuery Code:
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function(event) {
// Prevent default click action if javascript is enabled
event.preventDefault();
//load the content of the new page into the content of the current page
$("#content").load( $(this).attr("href") + " #content");
})
});
</script>
everything is fine and working, but this is so simple! how i can add a loading image before content loading in this code?
and second question, is there any way to show a new page link in address bar after loading?
You can use the call back function to remove the loader.
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function(event) {
// Prevent default click action if javascript is enabled
event.preventDefault();
//load the content of the new page into the content of the current page
$('#loader').show(); // Show some hidden loader on the page
$("#content").load( $(this).attr("href") + " #content", function() {
$('#loader').hide(); // Hide the loader when it completely loads the given URL.
});
})
});
</script>
For your second question this should be the answer. Change the URL in the browser without loading the new page using JavaScript

Jquery validation engine error popup comes behind div tag

I am using validation engine from http://www.position-absolute.com/ site.
The validation is applied on the div tag which is opened as popup on parent page.
Issue : when error message is shown on a control, it is appearing behind the div.
Search to similar issue suggest the usages of z-index, but how to control the z-index of error message poping from validation engine? Giving high number to div z-index:99999 did not work.
Please help
just change your script as
<script type="text/javascript">
$(function () {
$(".primary").click(function () {
$(".formError").remove();
});
$(".close").click(function () {
$(".formError").remove();
});
$("#yourformid").submit(function (ev) {
ev.preventDefault();
var validForm = $("#yourformid").validationEngine('validate');
$(".formError").css("z-index", 15000);
if (validForm) {
$("#yourformid").submit();
}
});
});
</script>
it works fine

Resources