We Keep Coding

Refresh parent window after iframe fancybox closes

I have a site that when I click on a link it pops open a fancybox window for a user to enter some details in to the form.
Once the user has finished with the form and closes it I want the parent window to refresh so the new data shows.
I am using fancybox version 2.1.5 and would prefer if I can make the change to jquery.fancybox.js to implement this change and not on the individual boxes as this is something that needs to work on all fancy boxes.
Any suggestions?
This is how I am running the fancybox at the moment:
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox();
$("#fancybox-manual-b").click(function() {
$.fancybox.open({
href : 'device-info.php',
type : 'iframe',
padding : 5
});
});
});
</script>
This is referenced from the href like this:
<a class="fancybox fancybox.iframe" href="edit-device.php"><img src="img/edit.png"</a>

You could use a general config object and just modify the needed attribute per call. Something like this:
// This is the basic config, common to all calls
var fancybox_general_config = {
type : 'iframe',
padding : 5,
afterClose: function() {
location.reload();
}
}
// modifies just the href attribute, keeping other values
fancybox_general_config.href = 'device-info.php';
$("#fancybox-manual-b").fancybox(fancybox_general_config);
// modifies just the href attribute again, keeping other values
fancybox_general_config.href = 'device-info-2.php';
$("#fancybox-manual-c").fancybox(fancybox_general_config);
Hope it helps!

Show toggling div based on URL

I'm trying to have an anchor link, once clicked, show a div. I have a click toggle working on the page, but in addition to that functionality, if a user clicks a sidebar link, I don't want the div to toggle, I just want it to be shown, if hidden. I've tried several if thens, etc - I think this is the closest, but still not working.
Functions (first toggles the h4, the second is my attempt to have the same div shown if a URL is loaded...or the anchor link is clicked):
<script>
$(document).ready(function(){
//Hide (Collapse) the toggle containers on load
$(".toggle_container3").hide();
//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
$(".trigger3").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
return false; //Prevent the browser jump to the link anchor
}).first().click()
});
</script>
<script>
$(function() {
if ( document.location.href.indexOf('#papers') > -1 ) {
$("#papertoggle").show();
$("h4#papers").addClass("active");
})
});
</script>
Also tried this version, with the keyword either "papers" or "climate_change_test#papers" :
<script type="text/javascript">
// Get URL
var url = window.location.href;
// Get DIV
var msg = document.getElementById('papertoggle');
// Check if URL contains the keyword
if( url.search( 'climate_change_test#papers' ) > 0 ) {
// Display the message
msg.style.display = "block";
}
</script>
HTML of the link:
<li>Papers and Publications</li>
HTML of the h4 and div:
<h4 class="trigger3 dark_grey" id="papers">
Papers and Publications</h4>
<div class="toggle_container3" id="papertoggle"> content </div>
Entire test page:
http://www.sea.edu/sea_research/climate_change_test

This should work:
$("#over_left a").click(function(){
var id = $(this).attr("href");
$(id).toggleClass("active").next().slideToggle("slow");
});
However I would suggest to narrow down the $("#over_left a") selector so it only works on those specific submenu links.
Also tried this version, with the keyword either "papers" or "climate_change_test#papers" :
<script type="text/javascript">
// Get URL
var url = window.location.href;
// Get DIV
var msg = document.getElementById('papertoggle');
// Check if URL contains the keyword
if( url.search( 'climate_change_test#papers' ) > 0 ) {
// Display the message
msg.style.display = "block";
}
</script>
The reason why the above code didn't work, is because it is executed on page load. However, when you click an anchor tag url, the page doesn't reload (it only jumps to the relevant anchor div), so this code is never executed.
Please also be aware that you don't need a complicated search to look for the "#papers" part in your url. You can simply use:
window.location.hash
To find the anchor part at the end of your url.
So combining all of the info from above, you can also create a function that deals with the following example: What if someone shares a link with an anchor url? It should automatically expand already then, right?
// On page load
var anchor = window.location.hash;
// If there is an anchor in the URL, expand the relevant div
if (anchor) {
$(anchor).toggleClass("active").next().slideToggle("slow");
}

clicking to a specific slide on another page bootstrap carousel

So I'm trying to get this going on a bootstrap build, where on one page there are clickable states, however, these will go to a specific slide on another page.
I'm still having a tough time understanding this. My buddy, who's a Javascript developer wrote out some code, but I can't make sense of it.
<script>
function goToSlide(x) {
console.log('going to slide '+x)
$("#myCarousel").carousel(x);
}
</script>
so from page 1, click, goes to specific slide on page 2

If it's only one link going to another slide on the other page I would try something like this:
function goToSlide() {
document.location.href = page2.html;
var div = document.getElementById("slide2");
div.className = "item active";
var otherDiv = document.getElementById("slide1");
otherDiv.className = "item";
}

Take a peek at the carousel methods:
http://getbootstrap.com/javascript/#carousel-usage
You would probably want to use .carousel(number), in conjunction with URL parameters or hash tags as #Lukas mentioned above. Just watch for the hash/parameter in the URL, and have the carousel load with that slide active.

Add watermark to fancybox only for gallery items and not for non gallery items

I have a page that contains a FancyBox image gallery and some single FancyBox elements like div's.
I need to have a watermark on my gallery items so I used the example from FancyBox page http://jsfiddle.net/w5gQS/
beforeShow: function () { $('<div class="watermark"></div>').prependTo( $.fancybox.inner );
But that prepended the watermark div to all FancyBox elements including the single ones.
My question:
is it possible to add watermark only to the gallery items and if it is how can it be done (the cleaner the method the better)?
P.S. using FancyBox v2.1.5
best regards

You can achieve that easily evaluating how many elements are in the group so if there are more than one then is gallery, otherwise is a single element.
Using the code on the jsfiddle of reference, tweak it this way :
$(".fancybox").fancybox({
beforeShow: function () {
/* Add watermark to gallery elements only */
if ( this.group.length > 1 ) {
$('<div class="watermark"></div>')
.bind("contextmenu", function (e) {
return false; /* Disables right click */
}).prependTo($.fancybox.inner);
}
}
});
See forked JSFIDDLE

Collapsible Menu Not Staying Open

Hello ive followed the instructions from this webspage Add a Blogger-like collapsible archive block to your Drupal 7 site and suprised myself that everything seems to be 'sort of' working. As you can see from my 'collapsible block' on the right of THIS PAGE that the block doesnt seem to want to stay open when viewing other months. I dont think this was the intended behaviour.
jQuery(document).ready(function($) {
// init: collapse all groups except for the first one
$(".view-collapsible-archive ul").each(function(i) {
if (i==0) {
$(this).siblings("h3").children(".collapse-icon").text("▼");
} else {
$(this).hide();
}
});
// click event: toggle visibility of group clicked (and update icon)
$(".view-collapsible-archive h3").click(function() {
var icon = $(this).children(".collapse-icon");
$(this).siblings("ul").slideToggle(function() {
(icon.text()=="▼") ? icon.text("►") : icon.text("▼");
});
});
});
Could anyone suggest anything to me to make the menu block open on a month when clicked and to close the other 'months'?
thanks

The problem is that the code you have is already added inside the file http://netmagpie.com/sites/all/themes/feverultra/js/feverultra.js and by adding your file after that, you're binding twice to the event and the function toggles twice, so the elements open and close
If you want to only have one month open then you need to close any open months before opening the one that was clicked, something like:
jQuery(document).ready(function($) {
// init: collapse all groups except for the first one
$(".view-collapsible-archive ul").each(function(i) {
if (i==0) {
$(this).siblings("h3").find(".collapse-icon").text("▼");
} else {
$(this).hide();
}
});
// click event: toggle visibility of group clicked (and update icon)
$(".view-collapsible-archive h3").click(function() {
$('.view-collapsible-archive ul:visible').not($(this).next('ul')).slideUp();
var icon = $(this).find(".collapse-icon");
$(this).siblings("ul").slideToggle(function() {
(icon.text()=="▼") ? icon.text("►") : icon.text("▼");
});
});
});

It's because of this line:
$(this).siblings("ul").slideToggle
It says: "toggle the state of all the ul elements using a slide animation"
You will want to change this to slideDown when it's hidden in order to show it and slideUp when it's visible in order to hide it.
I would provide a code sample but I'm typing with one thumb on an iPhone at the moment.