I am trying to place a link inside a tooltip (qTip) that when clicked shows the content of a hidden div inside a lightbox (nyroModal). Regular anchor tag not in a tooltip links to the div opening content in a lightbox successfully.
Code: http://jsbin.com/omafe/2/
Might need to copy code to notepad, save as html and open the file. (jsbin not loading external js plugin files)
Any help would be greatly appreciated. Thanks.
It appears that qTip is storing a copy of 'div.tipcontent' in memory (a variable).
I discovered this by removing the class "hidden" from the div. When you do this, you'll see that you have two divs. One still on the page and another used by qTip from memory.
As a solution, you may have to modify qTip to apply $('a').nyroModal(); to the link nodes it renders from memory.
EDIT
To add the lightbox effect to your qtip links, modify your qtip initializer as follows:
$('div.tooltip').qtip({
content: $('div.tipcontent').html(),
position: {
corner: {
target: 'topRight',
tooltip: 'bottomRight'
}
},
style: {
width: 150,
padding: 10,
background: 'silver',
color: 'black',
tip: 'bottomMiddle',
},
hide: {
fixed: true
},
api: {
onShow: function() { $('a').nyroModal(); }
}
});
Please note the api call to onShow. This will re-apply the nyroModal to all the links on the page thus covering the dynamically generated content from qtip. There's probably a more efficient way to narrow down the jQuery selector to the specific link generated by qtip, but this should get you started at least.
Related
I have several h2 elements on a page I'm working on and I am using waypoints.js to trigger an additional class to be added to them as they scroll into view.
Targeting each instance using ids works perfectly:
$('#one').waypoint(function(direction) {
$(#one).addClass('newClass');
}, {
offset: '80%'
})
But I am trying to avoid using id on each instance as the content will likely be changed by the client on a regular basis so I would like to target only each individual h2 that scrolls into the viewport.
My thinking was:
$('h2').waypoint(function(direction) {
$(this).addClass('newClass');
}, {
offset: '80%'
})
but that hasn't worked. Can someone help point me in the right direction here?
I cannot successfully recreate this error in a fiddle. Here's a link to the site (which will never come down).
When you arrive at the site, you'll see a news ticker at the bottom of the site. As you scroll down, you'll notice as you pass 1. Main Slider, 2. Announcement Slider, and 3. Images for Military, Nursing, and Georgia... the ticker gets tucked behind all of these.
How can I keep this on top?
I've already placed this script to be called after the DOM is loaded, and before the slider script is called...
$(function() {
$('div.latest-news').jNewsbar({
position: 'bottom',
effect: 'slideup',
height: 25,
animSpeed: 600,
puaseTime: 4000,
toggleItems: 5,
theme: 's-orange'
});
});
It's using jQuery 1.9.1 (CDN).
First, you can give the CSS Class jnewsbar the attribute z-index: 99
The reason that the other elements — which are OVER the newsbar — are over the newsbar is that they are all position: relative which makes them open for the z-index. And the newsbar is position: absolute — which is also subject to z-index
Due to the fact, that all of the other elements are coming in the DOM later, they are getting a higher "priority", than the newsbar.
So either you use z-index: 99 or you move the jnewsbar DIV down in your HTML.
I tried to integrate wootheme's Flexslider on my site and it looks/works great except for when it is loading.
When you refresh the page with the slider, before flexslider loads (about 1 second) the first slide appears very big and flashes to black then dissapears and then the carousel appears.
I think the image is loading faster than the jquery? How can I hide the image unti jquery loads (like on the demo website, even if i refresh 3 billion times, the problem is never repeated on their website, it all loads gracefully! - http://flexslider.woothemes.com/carousel-min-max.html )
I loaded the flexlisder.js right after jquery and copied the same html code from the demo (to match the .css file that is also loaded. And here is the init code I am using - from the demo site also:
$(document).ready(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: 2,
maxItems: 4
});
});
You need to deal with the callback functions for the plugin you are using
hide all the images from CSS by using a class let's say flexImages
$(document).ready(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: 2,
maxItems: 4,
start: function(){
$('.flexImages').show();
},
});
});
Set the default style for "display" to "none". using show() will change this style value.
Also Found that the slides flash before loading and display stacked down the page with list item bullets.
Only for a second. Then it worked fine. I didn't realize I hadn't included the flexslider.css file because I had already turned of any navigation that would have shown broken nav img links.
Remember to Include the CSS!
… i had the same problem, tried the js solution above - it worked well but then i realized when js is disabled for some reason - that nothing will be shown up, so i decided to look for a non js solution:
i just put some thing like that for the specific slider:
.MySlider {
.flexslider .slides img {
max-height: 400px;
width: 940px;
}
}
worked well, even responsive. Hope that may help!
I experienced a similar issue when I forgot to include the flexslider.css
I just set in the CSS of the div that contains the slider: overflow:hidden ; height: the height of the images you use, then it works perfect!
update: this is not a responsive solution as the slider changes the size... what can I do??
I am using a fancybox with plugin jquery.easydrag.js. The reason for this is to be able to drag the fancybox around.
It seems to be working fine, but the problem comes when the fancybox has scrollbars. I.e. for example when clicking on submit and not entering any fields the valdidation on screen causes scrollbars. Which is fine normally but the scrollbars causes all sorts of issues with the draggable feature so that when I am trying to click the scrollbar up and down, it actually moves the entire windows. So it seems to be confused as to what content can be moved and what to do with a scrollbar.
claimLink.fancybox({
'width': 500,
'height': 590,
'autoDimensions': false,
'onCleanup': function (e) {
var modelClaimFormId = $j(e).attr("href").replace("body", "");
var modalClaimForm = $j(modelClaimFormId);
if (!($j(modalClaimForm).valid())) {
$j(claimForm).remove();
$j(e).parents("tr").remove();
}
}
});
$j("#fancybox-wrap").easydrag(true);
EDIT :
I managed to add something for input and textareas to ignore the scrolling see below...just wondering what I can do for scrollbars.
$j("#fancybox-wrap").easydrag(true);
$j("#fancybox-wrap input,textarea").click(function(){
$j("#fancybox-wrap").dragOff();
});
$j("#fancybox-wrap input,textarea").mouseover(function () {
$j("#fancybox-wrap").dragOff();
});
$j("#fancybox-wrap input,textarea").blur(function () {
$j("#fancybox-wrap").dragOn();
});
$j("#fancybox-wrap input,textarea").mouseout(function () {
$j("#fancybox-wrap").dragOn();
});
This is the link to JS for easydrag plugin
I posted the first example about how to make fancybox draggable back in 2009 for v1.2.1. Then I posted some notes to make it work with v1.3.1 as seen here but when fancybox v1.3.4 was introduced, the easyDrag plugin was not working as smooth as with the previous versions and started behaving buggy. I didn't have the time to find a workaround ... so I just drop it.
The solution was simple though: the easyDrag plugin provides a way to set a "handler" as explained here so instead of holding and dragging the whole #fancybox-wrap container, which blocks access to the scroll bars if any, you just drag the lightbox from a specific defined element. Such handler can be appended to #fancybox-wrap selector and set it within the EasyDrag plugin using the onComplete callback API option like:
'onComplete': function(){
// append the handler on the top-left corner of fancybox
$("#fancybox-wrap").append("<button id='handler'>Drag me</button>");
// set the handler using the handler's element ID
$("#fancybox-wrap").setHandler('handler');
}
Notice that you can use any element as handler, in my example I used a html button but you may use an image if preferred. The important thing is to assign the minimum important css properties to the handler so it can be appended to the #fancybox-wrap container without issue like:
width: 80px; /* or whatever needed */
height: 24px;
position: absolute; /* important to position the handler into the fancybox wrap */
top: 0; /* top-left corner of the box but can be anywhere */
left: 0;
display: block;
z-index: 1120; /* important to be over the box */
other properties can be cosmetic.
See it working here!!!
Once you complete and submit the form, the response will be a new fancybox with scroll bars that you can use independently from the easyDrag handler.
Please feel free to analyze the code and customize it to your own needs (and don't forget to grant me the bounty ;)
UPDATE: Notice that since we are appending the handler to the #fancybox-wrap container every time we fire fancybox, then we need to remove it once we close fancybox using the onClosed callback, otherwise we will duplicate the handler if we open fancybox again with unexpected results:
'onClosed' : function() {
$("#fancybox-wrap #handler").remove();
}
I updated my DEMO too.
LAST NOTE: This solution is for fancybox v1.3.4.
I haven't tested it with v2.x but I don't see why it wouldn't work. Just make sure that you bind EasyDrag and append the handler to the .fancybox-wrap selector instead
$(".fancybox-wrap").easydrag();
You may use the afterShow callback to append the handler to it and afterClose to remove it.
Using the above solution to add a handler for the #fancybox-wrap selector along with the EasyDrag plugin using the onComplete callback API, I found this works nicely with the fancybox 1.3.4 title element to create a dragable fancybox with scroll functionality. Using the title, there is no need to remove it after close.
<script type="text/javascript" src="#Url.Content("~/fancybox/jquery.mousewheel-3.0.4.pack.js")"></script>
<script type="text/javascript" src="#Url.Content("~/fancybox/jquery.fancybox-1.3.4.pack.js")"></script>
<script src="#Url.Content("~/Scripts/jquery.easydrag.handler.beta2.js")" type="text/javascript"></script>
<script>
//Fancybox
$(document).ready(function () {
$("#iframeVideoPop").fancybox({
'width': 890,
'height': 595,
'type': 'iframe',
'autoScale': 'false',
'hideOnContentClick': false,
'onComplete': function() {
//Style the title where and how you want it
$("#fancybox-title").css({'top':'-20px', 'bottom':'auto'});
//Set the fancybox-title as the handler
$("#fancybox-wrap").setHandler('fancybox-title');
}
});
$("#fancybox-wrap").easydrag();
}); //ready
<script>
In order to eliminate the scrollbar problem caused by combining Easydrag with Fancybox, you'll need to eliminate the scrollbars. By default, the Fancybox CSS stylesheet applies the overflow:auto rule to the element -- generated by Fancybox -- that wraps around the content displayed inside the Fancybox.
To override it, include your own CSS rule that supersedes the one that Fancybox applies to the wrapper. Place this style block in the <head> section of your web page:
<style>
/* id of the element generated and used by Fancybox as a wrapper around
the generated content. */
#fancy_ajax {
/* Use the important identifier to ensure the overflow:auto is suppressed */
overflow:none !important;
}
</style>
This will eliminate the scrollbars and allow the easy drag plugin to work smoothly.
After testing these solutions I ran into the problem with dragging an iframe. To resolve, I switched to the jQuery 1.9.1 UI plugin for dragging and created a transparent image while dragging. Remove the image after dragging to access the content. Works great with fancybox iframe and enables fast dragging over the iframe. See sample code below.
$("#iframePop").fancybox({
'width': 890,
'height': 430,
'type': 'iframe',
'autoScale': 'false',
'hideOnContentClick': false,
'onComplete': function() {
$("#fancybox-title").css({'top':'-2px', 'left':'15px', 'bottom':'auto', 'cursor':'move'});
$("#fancybox-wrap" ).draggable({ handle: "fancybox-title", iframeFix: true,
start: function(ev,ui){$("#fancybox-wrap").append("<img src='#Url.Content("~/Content/Images/transparent.png")' id='hidenImg' style='border: 1px solid black; width: 640px; height: 400px; top: 20px; position: absolute; z-index: 10000;' />")},
drag: function(ev,ui){},
stop: function(ev, ui){$("#fancybox-wrap #hidenDiv").remove()}
});
}
});
I am wondering if anyone knows how to toggle between full screen and normal mode in Galleria
The only way I can think of is to switch between themes : default, and Fullscreen theme (which i bought from there)
If you know an even better way, I would appreciate your help.
I’m just going to add to #Ohgodwhy’s answer:
The best way to get the Galleria instance and use the API is to use the Galleria.ready function:
Galleria.ready(function() {
var gallery = this; // galleria is ready and the gallery is assigned
$('#fullscreen').click(function() {
gallery.toggleFullscreen(); // toggles the fullscreen
});
});
Or, you can access the instance via the $.data object if you know that the gallery is initialized:
$('#fullscreen').click(function() {
$('#galleria').data('galleria').toggleFullscreen(); // toggles the fullscreen
});
I am assuming you have a link/button with the ID 'fullscreen' and the gallery is at ID 'galleria'.
I'm using:
lightbox: true,
before Galleria.run(). This allows you to display fullscreen Overlay after clicking on image in the gallery.
This should work:
JS
Galleria.loadTheme('http://aino.github.com/galleria/demos/categories/themes/classic/galleria.classic.min.js');
$('#galleria').galleria();
Galleria.ready(function() {
var gallery = this;
this.addElement('fscr');
this.appendChild('stage','fscr');
var fscr = this.$('fscr')
.click(function() {
gallery.toggleFullscreen();
});
this.addIdleState(this.get('fscr'), { opacity:0 });
});
CSS
.galleria-fscr{
width:20px;
height:20px;
position:absolute;
bottom:0px;
right:10px;
background:url('fullscreen.png');
z-index:4;
cursor: pointer;
opacity: .3;
}
.galleria-fscr:hover{
opacity:1;
}
Where fullscreen.png is an appropriate image of your choice.
The approach from Richard is working very well.
You could also do it by extending Galleria with-out the ready function:
JS
Galleria.run('.galleria', {
// configure
autoplay: true,
lightbox: true,
idleMode: true,
// extend theme
extend: function() {
var gallery = this; // "this" is the gallery instance
//fullscreen button
this.addElement('fscr');
this.appendChild('stage','fscr');
var fscr = this.$('fscr').click(function() {
gallery.toggleFullscreen();
});
// this.addIdleState(this.get('fscr'), { opacity:0 });
}
});`
And if you'd like to use a fontAwesome icon for the maximize icon you can implement it as following (other CSS styles see Richard's post):
CSS
.galleria-fscr:before {
content: "\f065"; /* char code for fa-expand */
position: absolute;
font-family: FontAwesome;
color: #fff;
}
(keep in mind to include the style sheet of fontAwesome with <link rel="stylesheet" href="css/font-awesome.min.css">)
I'm still having one problem with the maximize button. If I'm hovering over it, it doesn't get white and stays gray. Maybe something with the IDLE state is wrong, but I haven't found a solution yet. (If I remove the code line with this.addIdleState(...) the hovering works. I need to do more tests here.)
I'd also like to change the icon from maximize to the minimize icon once the screen is on fullscreen, but I don't know how to do that yet. That's also on my todo list.
Update 07.02.2014
I figured out how to solve these two issues:
For the "IDLE state" issue - I've removed the IDLE state. Because I don't care if these controls are permanently there and now hovering works as expected. Maybe I check another solution later.
To change an icon on click you can do it with CSS and jQuery:
Add an overriding CSS rule below the first before filter of the maximize icon in your CSS e.g.:
.galleria-fscr.minimize:before{
content: "\f066";
}
Add these JS line after gallery.toggleFullscreen() - that toggles the icon with every click between the normal before style and the minimize before style:
$(".galleria-fscr").toggleClass("minimize");
This works also for a play / resume button (rest of the code is the simillar to the fullscreen code):
JS
...
gallery.playToggle();
$('.galleria-pauseResumeBtn').toggleClass("resume");
From the Galleria documentation.
.enterFullscreen( [callback] )
This will set the gallery in fullscreen mode. It will temporary manipulate some document styles and blow up the gallery to cover the browser screen. Note that it will only fill the browser window, not the client screen (javascript can’t do that).
.toggleFullscreen( [callback] )
Toggles fullscreen mode.
If you need any further explanation of the use of these, please don't hesitate to ask.