Show two jQuery overlays - javascript

i'm trying to use jQuery to open two overlays on page load. But only the second one shows up. I'm relatively new to javascript, so this maybe a very simple question for you guys.
Javascript:
<script type="text/javascript">
$(document).ready(function () {
$("#overlay-left").overlay({ top: 200, closeOnClick: false, load: true });
$("#overlay-right").overlay({ top: 500, closeOnClick: false, load: true });
});
The two Overlays:
<div class="overlay" id="overlay-left">
<ul>
[...]
</ul>
<div class="overlay" id="overlay-right">
<ul>
[...]
</ul>
I could really use some guidance here. Any help or suggestions would be deeply appreciated.

in the docs of the jquery overlay plugin, the plugin you obviously use,
there is an option
oneInstance : true
By default, there can be only one overlay on the
page at once. Setting this property to false allows you to have
multiple overlay instances.
check this link http://jquerytools.org/demos/overlay/multiple.html

Related

SlideTabs for Wordpress autoheight

IF anyone is familiar with slidetbas for wordpress can you please help me out.
It there a way to autoheight the content viewer based on the active tab?
I tried to add something like this:
jQuery(document).ready(function () {
jQuery("#slidetabs_983").setContentHeight();
});
to the javascript for my particular slidetab (ID 983) but that didn't work.
http://www.slidetabs.com/ is their website and you can see a demo on there.
thanks
use autoHeight: true to slider tab setting
jQuery(document).ready(function () {
jQuery("#slidetabs_983").slidetabs({
// Define any options below
autoHeight: true
});
});

Multiple instances of jQuery plugin (Magnific popup)

I've hit a bit of a wall with this one. My jQuery knowledge outside of just implementation is pretty poor.
I'm building the Magnific Popup (http://dimsemenov.com/plugins/magnific-popup/) jQuery plugin into my WordPress theme as a popup gallery. I've got it all wired up and working. It grabs images dynamically from the backend using custom fields. I can also get multiple instances working on the same page. HOWEVER, when scrolling through images in one popup gallery, it wont end at the end of the first gallery but rather, it will move on into the images in the second gallery. See example: http://www.oftenvisual.com/reset/galleries/.
Unfortunately I can't post the code here as it's too long, but hopefully the demo page helps. Because the galleries are generated dynamically and the client using the backend wont have the knowledge to add container with different classes, I need some way to also dynamically separate out the galleries. Any idea GREATLY appreciated!
Script calling the plugin
// Magnific
$(document).ready(function() {
$('.popup-gallery').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: 'The image #%curr% could not be loaded.',
titleSrc: function(item) {
return item.el.attr('title');
}
}
});
});
try to set different id_s on your .popup-gallery div's and then do
$('#popup-gallery1').magnificPopup....
$('#popup-gallery2').magnificPopup....
You may use jQuery contains selector to point "a" tag with specific class name - a[class*='popup-gallery-']. If you have different IDs for you pop-ups it just work as a charm. It just search for all "a" where class contains "popup-gallery-".
And if it matches, it fires up the Magnific Pop Up etc.
jQuery:
$(document).ready(function(){
$("a[class*='popup-gallery-']").magnificPopup({
//your settings goes here
});
});
HTML:
# first div
<a class="popup-gallery-1" href="#popup-1">First popup</a>
<div id="popup-1"> Your content here </div>
# second div
<a class="popup-gallery-2" href="#popup-2">Second popup</a>
<div id="popup-2"> Your content here </div>
You can simply use jquery's each with the same class, for example:
$('.popup-gallery').each(function() {
$(this).magnificPopup({
delegate: 'a', // child items selector, by clicking on it popup will open
type: 'image', // override with class 'mfp-iframe' on delegate or any other supported type
gallery: {enabled:true },
});
});
And now if you have multiple .popup-gallery divs, they all work separately.

jQuery Accordion breaks after first click when active: false is set

I've had a jQuery accordion on my site for a bit now, and it seemed to be working fine until I checked on it today and it is broken. I haven't touched the HTML in weeks. I've gone through the accordion documentation all over again, and it doesn't seem anything has changed, so I have no clue what is going on.
I had the accordion "active" property set to "false", so that the accordion would not display an active section on document load. I also had "collapsible" set to "true", like the documentation specified. Just to be sure it wasn't another element on the page, I created a whole new page with just the most basic accordion elements on it, and it still won't work.
The problem is that, after clicking on the first accordion section, clicking on any of the other ones doesn't work- you're stuck with that section open. I noticed that removing the "active" property altogether fixed this problem, but then of course there is an active section open on document load, which I don't want.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#accordion").accordion({active: false, alwaysOpen: true, autoHeight: false, collapsible: true});
});
</script>
</head>
<body>
<div id="accordion">
<p>1</p>
<div>this</div>
<p>2</p>
<div>isn't</div>
<p>3</p>
<div>working</div>
<p>4</p>
<div>correctly</div>
</div>
</body>
</html>
I also noticed that if I remove active: false, and leave collapsible: true, I am only able to "collapse" a section twice, and then the same thing happens- the sections lock up and stop collapsing/opening.
Well, I immediatly saw the following problem:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
By not specifying the revision (last third digit in the version) you will automatically get served the latest version of both jQuery and jQuery UI. So why it suddenly stopped working for you was because jQuery UI got updated, and changes were made to the UI Accordion.
Best way to solve this is to specify the revision. Walk down from the current version (1.8.7) and downwards until it's working for you. For example, the alwaysOpen open have been removed or changed. You should check the docs and see which options are available.
Also, you can try this which I've got working on jsFiddle:
$(function(){
$("#accordion").accordion({
active: false,
autoHeight: false,
collapsible: true
});
});
heightStyleType
Controls the height of the accordion and each panel. Possible values:
"auto": All panels will be set to the height of the tallest panel.
"fill": Expand to the available height based on the accordion's parent height.
"content": Each panel will be only as tall as its content.
Code example:
$(function(){
$("#accordion").accordion({
active: false,
heightStyle: "content",
collapsible: true
});
});

ColorBox centers in the middle of the page and not in the middle of pageview

I am using colorbox for quite a while and its working perfectly in all kind of websites.
I have encountered a website that is really really long, and when i open the colorbox, it will open in the middle of it and not in the middle of my page view.
What can affect this???
thank you!!!!
It is most likely conflicting css on the site - not the length of the page.
Problem solved. This site didn't have any DOCTYPE.
you can also try this.
$.colorbox({
width: "600px", height: "500px", inline: false, overlayClose: false, escKey: true, iframe: true,
onComplete: function () {
$('#colorbox').removeAttr('top');//test
$('#colorbox').css('top', '100px');//test
$('#colorbox').removeAttr('display');//test
$('#colorbox').css('display', 'block');//test
},
onLoad: function () {
$('#colorbox').removeAttr('display');//test
$('#colorbox').css('display', 'none');//test
},
});

jQuery Accordion - open specific section on pageload

I have a rather basic implementation of a jQuery Accordion on a page (using 1.3.2, jQuery UI Core 1.72 and jQuery UI Accordion 1.7.2), and I wish to open the 2nd section when the page loads. i've tried numerous methods but nothing seems to work...
HEAD SCRIPT:
<script type="text/javascript"> $(function() {
$("#accordion").accordion({
event: "mouseover"
});
});
BODY ACCORDION:
<div id="accordion">
<h3>Headline 001</h3>
<div>
<ul>
<li>Link 001</li>
<li>Link 002</li>
</ul>
</div>
<h3>Headline 002</h3>
<div>
<ul>
<li>Link 003</li>
<li>Link 004</li>
</ul>
</div>
Any help would be greatly appreciated!
$("#accordion").accordion({ active: 2, event: "mouseover" });
Should do the trick!
UPDATE
if that doesn't work, try
$("#accordion").accordion({ event: "mouseover" }).activate(2);
(N.B. this is updated to be a bit faster, thanks for the comments. To be honest, it should work with the 'active: 2' parameter, don't know why it didn't.)
proper way to open a specific tab:
$("#accordion").accordion({
collapsible : true,
active : false,
heightStyle : "content",
navigation : true
});
Set the option:
//$("#accordion").accordion('option', 'active' , "INSERT YOUR TAB INDEX HERE");
$("#accordion").accordion('option', 'active' , 1);
or you could work with a hash like this:
if(location.hash){
var tabIndex = parseInt(window.location.hash.substring(1));
$("#accordion").accordion('option', 'active' , tabIndex);
}
Vote if you use ;)
Thanks
Does the following work?
$(function() {
$("#accordion").accordion({
event: "mouseover",
collapsible: true,
active: 2
});
});
Try
$("#accordion").activate(index);
I have resolved this question a little different since I had to create a menu.php which we include I have included every single page. In our project there was 1 accordion (a menu element with 2 submenus). So when the visitor is on the submenus, the accordion is open and the selected link (which are highlighted using CSS, not jQuery) active. But when the visitor is on a different page, the accordion works normally.
Here's the javascript:
var containsParams = /teacher|student/i.test(window.location.href), //regexp with string params
accordion = $("li.accordion"); // the accordion as a global
accordion.accordion({ //accordion setup on every page
animated : !containsParams,
active : containsParams,
collapsible : true,
event : "click",
header : "h2"
});
//I like to use "self calling methods" since many times I need a main onload event and this way it's clear for every page and my main function still remains
(function () {
if (containsParams) accordion.accordion("activate", 0);
})();
Hope you like it. =]
Best regards! =]
You should write active: 1 instead of 2, because Accordion indexes sections from 0, not from one. Working code will look like that:
$("#accordion").accordion({ active: 1, event: "mouseover" });
Hope it will help a bit.
As others have mentioned, the following will make it active on opening:
$("#accordion").accordion({ active: 1 });
It is active:1 since it is the 2nd of the accordion's index {0,1,2,...}; There seems to be some confusion in other answers as the element's contents contain the character "2"...

Categories

Resources