Develop Reference

why is my JS is working only when I debug?

I got a container with two divs, content1 with an open button and content2.
There are two tabs, content1Tab and content2Tab, which when clicked should show content1 and 2 respectively using z-index.
the open button in content1 loads container with containerOther from page.php.
All this seems to work only
only when I step through the code.
$(document).ready(function(){
$("#content1Tab, #content2Tab").click(function(event) {
var myString = $(this).attr('id');
var parts = myString.split("Tab");
var thePart = parts[0];
$("#container").load("../index.php #container> *", function() {
$('#btnOpen').click(function(){
$("#container").load("../page.php #containerOther> *");
});
});
$("#content1Tab, #content2Tab").css('z-index', 7);
$(this).css('z-index', 9);
$("#content1, #content2").css('z-index', 7);
$("#"+thePart).css('z-index',9);
});
});
When I just run the index page the code seems to stop at line 6
$("#container").load("../index.php #container> *"
As in, container shows content1 no matter which tab I click on and the open button doesn't work.

Looks like you have an error here "../index.php #container> *". The load function will try to load URL "index.php%20%23container%3E%20*" instead of index.php.
I think it should be just "../index.php".

Replace a "Click to load more" into a Scroll to load more

Currently, my client's website has a "Load more" button, linked to the Shutterstock API to load more photos everytime you click on that button.
My client asked to change this into "When the user scrolls down, it loads automatically more images".
So what I thought, since I'm not an experienced coder, is to add a function linked with window.scroll that would trigger a click on that button once you reach the top of that button, using the following code:
$(window).scroll(function() {
var top_of_element = $("#load_more_images").offset().top;
var bottom_of_element = $("#load_more_images").offset().top + $("#load_more_images").outerHeight();
var bottom_of_screen = $(window).scrollTop() + window.innerHeight;
var top_of_screen = $(window).scrollTop();
if((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
$("#load_more_images").trigger("click");
}
else {
// The element is not visible, do something else
}
});
The issue, is that once the button is in view, it triggers the click multiple time, and it loads the next 6 images multiple times back to back. I guess it's clicking multiple time since the button stays in view, not sure how to handle this.
The code for the "load more" function that works linked to that "load_more_images" button is in a "func.php" page (it's for a Wordpress site, and it's in a plugin) :
jQuery("#load_more_images").click(function() {
jQuery(this).hide();
jQuery(".load_more_wrapper .loader").show();
var ajax_url = "'.admin_url('admin-ajax.php').'";
jQuery.post(
ajax_url,
{
"action": "pd_load_more_img",
"data": {
"type": search_type,
"page":page+1,
"image_type": "'.(isset($_GET["image_type"]) ? $_GET["image_type"] : "all").'"';
if (isset($_GET['category'])){
$js.=',
"category":'.$_GET['category'];
}
if (isset($_GET['search'])){
$js.=',
"search":"'.$_GET['search'].'"';
}
$js.= '}
},
function(data){
page++;
jQuery("#images_container").append(data);
jQuery(".load_more_wrapper .loader").hide();
jQuery("#load_more_images").show();
jQuery(".category-link").dotdotdot();
}
);
});';
Any idea how I could make this work? All I need is to activate that existant function that is currently bound to a click event, but on scroll, when I reach that button, or a certain element in the page at the bottom.
Thanks a lot

You can use that function instead of your click function:-
$(window).scroll( function(e){ if($(window).scrollTop()>= jQuery('#load_more_images').position().top){ doYourFunctionHere(); } }

Why store JS slideToggle in localStorage is not working

I have several buttons including divs which they have the same name. unfortunately I can not change the names, they are generated by cms.
So for example when I click only on first button, only the first div is hidden or displayed, and that's fine.
But after refresh page it opens or closes all divs depending is the first div closed or opened, and that I do not want it.
And then i have created this code for testing, which works:
<button class="a">Button</button>
<div class="target"></div>
<button class="a">Button</button>
<div class="target"></div>
$('.a').click(function() {
$(this).next(".target").slideToggle(function() {
localStorage.setItem('visible-' + $(this).index(), $(this).is(":visible"));
});
});
$.each($('.target'), function(k, trg) {
$(trg).toggle(localStorage.getItem('visible-' + $(trg).index()) === 'true');
});
here you can see jsfiddle example: https://jsfiddle.net/pj3gs0z9/8/
and when I want to imply this method on this site: http://phpbb32.majordroid.com/index.php
for some unknown reason is not working
you need to click minus for close below, and plus to open. just try after that to refresh page, and for some reason it closes all or opens all divs below...
i have used this code:
$("ul.topiclist.collapse-btn").click(function(){
$(this).parent().parent().parent().next("ul.topiclist.working-collapse-btn").trigger('click');
$(this).toggleClass('plus');
});
$('ul.topiclist.working-collapse-btn').click(function() {
$(this).next("ul.topiclist.forums").slideToggle(function() {
localStorage.setItem('visible-' + $(this).index(), $(this).is(":visible"));
});
});
$.each($('ul.topiclist.forums'), function(k, trg) {
$(trg).toggle(localStorage.getItem('visible-' + $(trg).index()) === 'true');
});
Thank you

Create Fancybox gallery when integrated with PikaChoose [duplicate]

I'm using the Fancybox integration with Pikachoose as explained here:
http://www.pikachoose.com/how-to-fancybox/
I'm trying to get the lightbox to display next and previous arrows but not on the pikachoose stage and I'm having a bit of trouble. I tried to add the options of showNavArrows: true in the fancybox section of the script but it wouldn't work. So then I tried the nav options on pikachoose to display using this: {text: {previous: "Previous", next: "Next" }}
but I keep getting an error, possibly my syntax isn't going in the right place?
Can someone help please?
this is the code I'm using :
$(document).ready(function () {
var a = function (self) {
self.anchor.fancybox({
transitionIn: elastic,
transitionOut: elastic,
speedIn: 600,
speedOut: 200,
overlayShow: false
});
};
$("#pikame").PikaChoose({
showCaption: false,
buildFinished: a,
autoPlay: false,
transition: [0],
speed: 500,
showCaption: false
});
});

The problem with the method explained in http://www.pikachoose.com/how-to-fancybox/ is that you bind fancybox to the current pikachoose element self.anchor.
With that approach, there is no way to know what group of images will belong to a fancybox gallery (you would need more than one element sharing the same rel attribute) because there is just a single pikachoose image : every image is displayed toggling dynamically its href and src attributes (<a> and <img> tags respectively) inside the .pika-stage container.
As a workaround, you would need to built the fancybox group of elements BEFORE binding your html structure to pikachoose (pikachoose will modify the DOM structure)
1). So having this html structure :
<div class="pikachoose">
<ul id="pikame">
<li>
<a title="one" href="image01.jpg" id="single_1"><img alt="" src="thumb01.jpg" /></a>
</li>
<li>
<a title="two" href="image02.jpg" id="single_2"><img alt="" src="thumb02.jpg" /></a>
</li>
<li>
<a title="three" href="image03.jpg" id="single_3"><img alt="" src="thumb03.jpg" /></a>
</li>
</ul>
</div>
2). Create the fancybox group of elements iterating through each anchor with this script :
var fancyGallery = []; // fancybox gallery group
$(document).ready(function () {
$("#pikame").find("a").each(function(i){
// buidl fancybox gallery group
fancyGallery[i] = {"href" : this.href, "title" : this.title};
});
}); // ready
3). Then bind pikachoose to the same selector #pikame. You can use the .end() method to do it over the first decelerated selector without duplicating it ;)
var fancyGallery = []; // fancybox gallery group
$(document).ready(function () {
// build fancybox group
$("#pikame").find("a").each(function(i){
// buidl fancybox gallery
fancyGallery[i] = {"href" : this.href, "title" : this.title};
}).end().PikaChoose({
autoPlay : false, // optional
// bind fancybox to big images element after pikachoose is built
buildFinished: fancy
}); // PikaChoose
}); // ready
Notice that we used the pikachoose option buildFinished: fancy, which actually will fire the fancybox gallery when we click on the big image.
4). Here is the function :
var fancy = function (self) {
// bind click event to big image
self.anchor.on("click", function(e){
// find index of corresponding thumbnail
var pikaindex = $("#pikame").find("li.active").index();
// open fancybox gallery starting from corresponding index
$.fancybox(fancyGallery,{
// fancybox options
"cyclic": true, // optional for fancybox v1.3.4 ONLY, use "loop" for v2.x
"index": pikaindex // start with the corresponding thumb index
});
return false; // prevent default and stop propagation
}); // on click
}
Notice that we bound a click event using .on() (requires jQuery v1.7+) to the pikachoose element self.anchor to fire fancybox gallery using the manual method $.fancybox([group]).
This workaround works equally fine for fancybox v1.3.4 or v2.x. See DEMO using v1.3.4 that seems to work fine even with IE7 ;)

JFK response is great, but there is something to correct :
if carousel is enabled in Pikachoose, the computed index using this method will give you an invalid one, beacause pikachoose will manipulate DOM by appending existing li in ul:
var pikaindex = $("#pikame").find("li.active").index();
Solution :
function getCurrentIndex(fancyGallery) {
var activeLi = $(""#pikame").find("li.active");
if (activeLi.length != 1) {
console.error('(getCurrentIndex) - only one image must have an active class set by Pikachoose');
return -1;
}
var activeLiHtml0 = activeLi[0];
var activeHref = $(activeLiHtml0).find('img').attr('src'); // do not look for <a> tags, PikaChoose will remove them
if (activeHref === null || activeHref.length == 0) {
console.error('(getCurrentIndex) - can not get href attribute from selected image');
return -1;
}
for (var i=0 ; i<fancyGallery.length ;i++) {
var obj = fancyGallery[i];
if (obj.href.indexOf(activeHref) >= 0){
console.debug('(getCurrentIndex) - found index: ' + i);
return i;
}
}
console.error('(getCurrentIndex) - this href: <' + activeHref + '> was not found in configured table');
return -1;
};

Html Popup With Links On Form Submit

I am trying to display a fancy html popup/frame (not windows style) to the customer when a particular form is submitted. Not sure what would be the best way of doing that!
I tried something with the code below but there are 2 issues with this. Firstly the box that comes as a popup looks like a windows popup box (browser type) which I don't want. I just want a simple square box where I can add colors, image etc. Another problem is that my links within this code are not working. For eg. I want one of the links to take me to another page on the site after closing the message box, and the other link could simple be used to close the box... or may be just 2 links that could take me to 2 different pages!
<form action="do.something" method="post" onsubmit="return action_submitted();">
<script type="text/javascript">
function action_submitted() {
HTML = '';
HTML += '<html><head><title>New Action</title></head>';
HTML += '<body bgcolor="#f5f5f5" style="margin:0px;">';
HTML += 'Congrats, your action was successful! <br/>';
HTML += 'Close Message<br/>';
HTML += 'There<br/>';
HTML += '<script>onload=function(){setTimeout("self.close()",5000);}<'+'/script>';
HTML += '</body></html>';
var w = 500;
var h = 200;
var l = (screen.availWidth - w) / 2;
var t = (screen.availHeight - h) / 2;
actionwin = open('javascript:opener.HTML','actionwin','left='+l+',top='+t+',width='+w+',height='+h+',status=0');
if (actionwin && !actionwin.closed) actionwin.focus();
return true;
}
</script>
Please help :)
Many thanks!

try using jquery modal dialog:
var modal = "<div id='modal_pop'>" +
"<div><center ><img id='imgLogo' src='../../Images/abc.PNG' alt='Value Interface'/></center></div>" +
"<p>This is a fancy modal pop up.</p>" +
"</div>";
and call the modal dialog
$(modal).dialog({
modal: true,
width: 400,
height: opts.windowHeight,
closeOnEscape: false,
draggable: false,
resizable: false,
zIndex: 99999,
bgiframe: true,
title: Sample!',
buttons: {
"OK": function () {
// your action on OK clikc
$(this).dialog('close');
},
"Cancel": function () {
$(this).dialog('close');
}
}
});
more info on this site.

I suggest you need to create popup div in HTML at bottom of body. Hide popup by default By CSS and when you want to open it, then make it visible by javascript and pass content you do want to display if you have dynamic content.
HTML
<div id="popupWrapper">
<div id="popup">
content goes here
</div>
</div>
CSS
#popupWrapper { display: none;}
jQuery
$('#button').live('click', function() {
$('#popup').text('content goes here');
$('#popupWrapper').fadeIn();
});
Because in your case you are creating poup every time you click on button. which is not good way to do it.
Also don't use any other plugin because it's not good to use third party plugin for simple stuffs like that. It's make your project more complicated and slow. Because they design for multiple situations with multiple options, and if you not need that mean it's worth to use that plugin.