jquery not working with more than 1 function - javascript

I have created a click function on an ASPX page which worked fine, when I moved the code to my site.master which has a existing J query function it doesn't seem to work.
this is my J query function I created:
var scrolled = 0;
$(document).ready(function () {
try {
$("#downClick").on("click", function () {
scrolled = scrolled + 235;
$(".cover").stop().animate({
scrollTop: scrolled
});
});
$("#upClick").on("click", function () {
scrolled = scrolled - 235;
$(".cover").stop().animate({
scrollTop: scrolled
});
});
$(".clearValue").on("click", function () {
scrolled = 0;
});
} catch (e) { }
});
However, when I tried adding this to my main site, in the site.master, it just refreshes the page when I click more booklets.
Clearly the code works but something in the site.master making the page refresh.
I have another J query function in the site.master which I think may be causing this:
$(document).ready(function () {
try {
$('.slider1').bxSlider({
slideWidth: 960,
captions: true,
auto: true,
autoControls: true
});
} catch (e) { }
});
This is a slider on the page, but with the previous code added it doesn't work.
Any ideas why the first code doesn't work in my main page, am assuming its because threes other Jquery functions but still not sure why it refreshes. any help would be much appreciated.

You're using buttons inside a form; the button is causing a postback. Perfectly normal.
Instead, use an input of type button. Rewrite:
<button id="downClick">More Booklets</button>
So that it reads:
<input id="downClick" type="button" value="More Booklets" />
Your jQuery selectors are based on the id, so it'll still handle the click events as you'd expect.

Related

Keep scrolled position of page on reload or change page discarding previous

I've a problem when I try to switch between pages.
$(window).scroll(function () {
sessionStorage.scrollTop = $(this).scrollTop();
});
$(document).ready(function () {
if (sessionStorage.scrollTop != "undefined") {
$(window).scrollTop(sessionStorage.scrollTop);
}
});
I use this script to keep the scrolled position on reload but the problem is that
when I go to another page, it takes the scroled position on the previuos one.
Is there a solution instead of storing the position not in the session but to use the url too?
It's not beautiful, but it will work:
$(window).scroll(function () {
sessionStorage.setItem('scroll-for-'+window.location,(this).scrollTop());
});
$(document).ready(function () {
if (sessionStorage.getItem('scroll-for-'+window.location) != "undefined") {
$(window).scrollTop(sessionStorage.getItem('scroll-for-'+window.location));
}
});
I've come to a solution.
thanks to this question How do I detect a page refresh using jquery? and the answer of Uzair
I've wrote this script
$(function () {
if (sessionStorage.tempScrollTop) {
$(window).scrollTop(sessionStorage.tempScrollTop);
}
});
$(window).on("scroll", function () {
sessionStorage.setItem("tempScrollTop", $(window).scrollTop());
});
$(window).on('beforeunload', function () {
sessionStorage.removeItem("tempScrollTop", $(window).scrollTop());
});
On same page the scrolled position is kept but once i change page it goes to the top.
you are looking for localStorage which persists until explicitly deleted

Mobile navigation bar won't pull out?

I'm trying to create a mobile navigation menu, but for some odd reason, the code won't work. I feel like it's something with the css, but I'm not sure. I created a JS Fiddle to play with it. I want the menu to open when you click the little button. The JavaScript must not be reading the request...
Java Script
jQuery(document).ready(function () {
jQuery("#hamburger").click(function () {
jQuery('#content').css('min-height', jQuery(window).height());
jQuery('nav').css('opacity', 1);
var contentWidth = jQuery('#content').width();
jQuery('#content').css('width', contentWidth);
jQuery('#contentLayer').css('display', 'block');
jQuery('#container').bind('touchmove', function (e) {
e.preventDefault();
});
jQuery("#container").animate({"marginLeft": ["70%", 'easeOutExpo']}, {
duration: 700
});
});
jQuery("#contentLayer").click(function () {
jQuery('#container').unbind('touchmove');
jQuery("#container").animate({"marginLeft": ["-1", 'easeOutExpo']}, {
duration: 700,
complete: function () {
jQuery('#content').css('width', 'auto');
jQuery('#contentLayer').css('display', 'none');
jQuery('nav').css('opacity', 0);
jQuery('#content').css('min-height', 'auto');
}
});
});
});
It looks like you don't have jquery loaded in your jfiddle. When I loaded jQuery it worked for me.
Click on Javascript and then "FRAMEWORKS & EXTENSIONS" and add jQuery 1.12 at least.

Fancybox2 With Additional Ajax Loaded Content

Im using fancybox2 to display images in a lightbox. This works fine for images that are present initially. However the images that are loaded via ajax (an infinite scroll) do not display in fancybox.
The dark grey overlay appears, but there is no image.
From researching i understand i need to reinitialize fancybox - i have tried various ways of doing this after the additional content has loaded but its just not working.
My Fancybox script
<script type="text/javascript">
$(document).ready(function () {
$(".fancybox").fancybox({
"closeClick": "true",
"closeBtn": "true",
"overlay": "true",
"type": "image",
"nextClick": "false",
"scrolling": 'no',
helpers: {
overlay: {
locked: false,
css: {
'background': 'rgba(0, 0, 0, 0.50)'
}
},
keys: {
next: {
},
prev: {
}
},
}
});
});
</script>
Infinate Scroll Script
<script type="text/javascript">
var BlockNumber = 2; //Infinate Scroll starts from second block
var NoMoreData = false;
var inProgress = false;
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height() && !NoMoreData && !inProgress) {
inProgress = true;
$("#loadingDiv").show();
$.post("#Url.Action("InfinatePopularScroll", "Wall")", { "BlockNumber": BlockNumber, "AlreadyShown": alreadyDone },
function (data) {
BlockNumber = BlockNumber + 1;
NoMoreData = data.NoMoreData;
$("#bookListDiv").append(data.HTMLString);
$("#loadingDiv").hide();
inProgress = false;
});
}
jQuery("abbr.timeago").timeago
//here is where i have tried to reinitialize
// i have tried copying the entire script posted in the code block above
// i have tried $(".fancybox").fancybox();
});
</script>
As you may be able to tell i suck at javascript - so any help or ideas would be appreciated.
Thanks in advance.
In the tips blog of fancybox exists an ajax example (#see http://fancybox.net/blog#tip5). In my opinion it should work with
$.fancybox.resize();
If not, maybe you can try to reinitialize the fancybox with a combination of the current data and the new content (like it is done in the example after the successful ajax call):
$.fancybox(data);

Slider doesn't load when hidden div appears / shows

I'm working with Joomla 2.5 and am using this here:
http://www.code7.co.uk/joomla-responsive-slider
My theme is a single-pager. If I click on a navigation item javascript simple fades out one div and fades in the other div. The problem now is that if I toggle the divs, the slider isn't enabled anymore. Only when I reload the page.
The Slider is loaded like this:
<script type="text/javascript" charset="utf-8">
jQuery(window).load(function() {
jQuery('.flexslider').flexslider({
animation: "slide",
directionNav: false,
controlNav:false,
keyboardNav:false,
direction: "horizontal",
slideshowSpeed:3000,
animationSpeed:600,
randomize: false
});
});
</script>
It is loaded each time below the slider div container. I already tried to remove the code from the modules and only load the slider once. It worked, but not if I toggled the divs.
Question: How can I "reload" the slider, when I toggle the div? I tried with .reload() the window, but then the whole fadein and out animation is worth nothing and I want to keep it!
This is how I change:
function changeSection(section) {
if(activeSection != section) {
$('#'+activeSection).fadeToggle("slow");
$('#'+section).delay(500).fadeToggle("slow");
$('#menu-'+activeSection).removeClass('active');
$('#menu-'+section).addClass('active');
document.title = activeSectionTitle;
history.pushState({}, '', section);
activeSection = section;
}
}
Try (updated)
$(document).ready(function () {
$("div:not(:first)").hide(0);
var toggletwo = function (i) {
$("div:not(:nth-of-type(" + i + "))").fadeOut(125, function () {
$(this).siblings("div").fadeIn(250)
})
};
$("li a").on("click", function (e) {
return ($(e.target).is("a:first") ? toggletwo(1) : toggletwo(2))
});
});
jsfiddle http://jsfiddle.net/guest271314/68k7F/

Jquery thumbnail gallery changing all images

I've tried to create a jQuery effect using fancy box to contain my content and within that is a large image with thumbnails below. What I was trying to make happen was when the thumbnails are clicked then the large image updates (see RACE Twelve image as an example). This works fine but the problem is when I go to another fancy box on my website (SEE RACE ONE box) then that image has been updated to be whatever thumbnail was clicked last.
I thought this might be event bubbling but preventing default hasn't helped.
I'm very new to jQuery and know that this is something stupid that I'm doing.
Any advice would be greatly appreciated? Thank you :)
Live version of page: http://www.goodwood.co.uk/members-meeting/the-races.aspx
jsfiddle for jQuery: http://jsfiddle.net/greenhulk01/JXqzL/
(function ($) {
$(document).ready(function () {
$('.races-thumbnail').live("click", function (e) {
$('.races-main-image').hide();
$('.races-image-wrap').css('background-image', "url('http://www.goodwood.co.uk/siteelements/images/structural/loaders/ajax-loader.gif')");
var i = $('<img />').attr('src', this.href).load(function () {
$('.races-main-image').attr('src', i.attr('src'));
$('.races-image-wrap').css('background-image', 'none');
$('.races-main-image').fadeIn();
});
return false;
e.preventDefault();
});
$(".races-image-wrap img").toggle(function () { //fired the first time
$(".races-pop-info").show();
$(this).animate({
width: "259px",
height: "349px"
});
}, function () { // fired the second time
$(".races-pop-info").hide();
$('.races-main-image').animate({
width: "720px",
height: "970px"
});
});
$('#fancybox-overlay, #fancybox-close').live("click", function () {
$(".races-pop-info").show();
$(".races-main-image").animate({
width: "259px",
height: "349px"
});
});
});
})(jQuery);
$('.races-main-image') will select all elements with that class, even the ones which aren't currently visible.
You can select the closest '.races-main-image' to the clicked element as per the code below (when placed inside the click event handler)
$('.races-main-image', $(e.target).closest('.races-fancy-box'))
So your new code should look like:
$('.races-thumbnail').live("click", function (e) {
var racesmainimage = $('.races-main-image', $(e.target).closest('.races-fancy-box'));
var racesimagewrap = $('.races-image-wrap', $(e.target).closest('.races-fancy-box'));
racesmainimage.hide();
racesimagewrap.css('background-image', "url('http://www.goodwood.co.uk/siteelements/images/structural/loaders/ajax-loader.gif')");
var i = $('<img />').attr('src', this.href).load(function () {
racesmainimage.attr('src', i.attr('src'));
racesimagewrap.css('background-image', 'none');
racesmainimage.fadeIn();
});
return false;
});
I've also removed your 'e.preventDefault();' return false; includes that, and was preventing e.preventDefault() from being executed in any case.

Categories

Resources