Fancybox is not working with specific selector - javascript

I use this code but it is not working...
$(document).ready(function () {
$('#welcomePopup').fancybox();
});
but another code is working fine like
$.fancybox({
'padding': 5,
'width': 625,
'height': 450,
'content': $("#welcomePopup").html()
});
I would like to use first approach because the second one duplicate HTML.
Any clue?

This
$(document).ready(function () {
$('#welcomePopup').fancybox();
});
only binds the selector #welcomePopup to fancybox but it doesn't open it. You still need to click on that selector to open fancybox.
A normal scenario for the code above is
<a id="welcomePopup" href="{your target content}">open fancybox</a>
where #welcomePopup is the fancybox trigger
On the other hand, if the contents of #welcomePopup is what you want to show as fancybox content (#welcomePopup is the fancybox target), then you need another selector to act as the trigger.
The normal approach for this second scenario would be :
html
<a class="fancybox" href="#welcomePopup">open welcome pop up in fancybox</a>
<div style="display: none;" id="welcomePopup">
<h1>fancybox content</h1>
<p>lorem ipsum</p>
</div>
jQuery
$(document).ready(function () {
$('.fancybox').fancybox();
});
Last, if you want to open fancybox without a trigger AND on page load, then either of these will do the trick
$.fancybox({
'padding': 5,
'width': 625,
'height': 450,
'href': "#welcomePopup"
});
or
$.fancybox("#welcomePopup",{
'padding': 5,
'width': 625,
'height': 450
});

Related

changing slimscroll position

Is there a way to move scrollbar position on initialisation when using slimscroll? I found it's possible to do this using jQuery on native scrollbar with "scrollTop", but don't see how would I be able to do it using slimscroll. Here is a fiddle. http://jsfiddle.net/c8d3ohue/
Basically I want the first div to be scrolled down on init, like in this picture.
My code:
<div class="slimScroll" style="overflow-y:auto;height:200px;width:250px">
<div class="child-height-1" style="height:50%;overflow:hidden;position:relative">
<div class="child-content" style="height:300px;background-color:lightgreen">asd</div>
</div>
<div class="child-height-2" style="height:50%;overflow:hidden;position:relative">
<div class="child-content" style="height:300px;background-color:lightyellow">asd</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slim-scroll/1.3.2/slimscroll.min.js"></script>
<script>
$(function () {
new slimScroll($('.child-height-1')[0]);
new slimScroll($('.child-height-2')[0]);
});
</script>
If you use jquery.slimscroll.min.js instead of slimscroll.min.js, you can do this like this.
For your same HTML above, in the document ready you can do like this,
var itemContainer1 = $(".child-height-1");
itemContainer1.slimScroll({
height: '200px',
start: 'bottom',
alwaysVisible: true
});
var itemContainer2 = $(".child-height-2");
itemContainer2.slimScroll({
height: '200px',
start: 'top',
alwaysVisible: true
});
See a fiddle,
http://jsfiddle.net/anjanasilva/uypabr6o/
How it looks,
Hope this helps.

How can we pass the parameter from jQuery Dialog and change the content of the html?

I am looking to dynamically change the image shown in the jQuery Dialog. I am trying to pass the ‘image path’ as parameter which will be used to change the image shown in the jQuery dialog. Please! Check my code below.
By default, it will show ‘images/firstImage.jpg’ in the jQuery Dialog. Now, I am trying to change it to ‘images/secondImage.jpg’ through jQuery Dialog parameter.
<link href="jquery/jquery-ui.css" rel="stylesheet" />
<script src="jquery/jquery-1.10.2.js"></script>
<script src="jquery/jquery-ui.js"></script>
<script>
$(function () {
// this initializes the dialog (and uses some common options that I do)
$("#dialog").dialog(
{
autoOpen: false,
modal: true,
show: "blind",
hide: "blind",
width: "50%",
height: "auto",
resizable: false,
position: 'center',
overflow: "hidden",
});
});
function OpenGallary(photoSrc) {
$("#dialog").dialog("open").data("param", photoSrc);
}
</script>
<body>
<a onclick="OpenGallary('images/secondImage.jpg')">Click ME</a>
<div id="dialog" title="Photo Gallary">
<div id="aa" style="width: 800px;">
hello this is my world.
</div>
<p>
<img src="images/firstImage.jpg" />
</p>
</div>
</body>
Your function OpenGallary (I think you mean Gallery, but I digress) is just setting the data attribute on the dialog div, which is not going to affect the image tag.
The OpenGallary function can be changed to something like:
function OpenGallary(photoSrc) {
// Change the src attribute directly on the img in the dialog:
$("#dialog img").attr("src", photoSrc);
// Now that the dialog html is updated, open the dialog:
$("#dialog").dialog("open");
}
Depending on what you're trying to do, you may want to select the img directly with an id on the tag - the selector used above is just for working with the existing html.

more than one tagging form on a single page

I am using a script from http://codecanyon.net/item/dynamic-tag-form/482498?sso?WT.ac=search_item&WT.seg_1=search_item&WT.z_author=RikdeVos . My work requires to have more than one tagging form in a single page. I want to display, say, three tagging forms with different ids: tags1 , tags2 and tag3.
<div id="tags1"></div>
<div id="tags2"></div>
<div id="tags3"></div>
and calling the script from:
<script>
$(document).ready(function(){
$("#tags1").tag({
width: 400,
height: 90,
inputName: 'tags1'
});
});
</script>
now how can I call tags2 and tags3 if I copy/paste the script portion and replace tags1 to tags2 I am getting the form but there must be a better way like passing name as variables in script.
Go through all the tagging forms by looping through each element in their container.
HTML:
<div class="tags-container">
<div id="tags1"></div>
<div id="tags2"></div>
<div id="tags3"></div>
</div>
Javascript:
$(document).ready(function(){
$(".tags-container div").each(function (index, element) {
$(this).tag({
width: 400,
height: 90,
inputName: $(this).attr('id')
});
});
});

jQuery UI dialog boxes won't close

I am using the following code to open a dialog box:
<li>
<input type="button" value="Preview" onclick="showPreview('EmailPreview');" />
</li>
<div id="dialog">
</div>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
$('#dialog').dialog({
autoOpen: false,
modal: true,
height: 525,
resizable: false,
width: 600,
dialogClass: 'timer'
});
});
//]]>
</script>
</div>
In my .js file:
function showPreview(action, id) {
$.get("/Manage/Account/" + action + "/" + id, function (data) {
$("#dialog").html(data);
$('#dialog').dialog('open');
$('#Area, #Exchange, #Number').autotab_magic().autotab_filter('numeric');
$("#dialog input[type='button'], #dialog select,#dialog input:checkbox,#dialog input:radio,#dialog input:file").uniform();
});
I use this exact code in 3 locations. In one location everything is perfectly functional. In the other 2 locations, done exactly they same, just in different views, the dialog box will open but not close. Is there something obvious that I am missing?
This is in the dialogbox-view:
<div class="top"><a onclick="$('#dialog').dialog('close'); return false"><img src="/public/images/admin/btn-close.png" /></a></div>
I don't see any dialog closing anywhere, you can close your dialog with this function:
$('#dialog').dialog('close');
More about it: jQueryUI dialog
Also any element has to have unique ID, so it should be something like #dialog-a, #dialog-b, otherwise there will be errors with id selectors etc.
Your dialog element IDs need to be unique, or jQuery won't find the right one.

Show this div and hide that div

Hello i want to know how can i modify my following js function to hide the content of one div and shows the content of the following div in the opened popup of fancybox the following div to show
<LI><A class="demo" id="example4" href="#demoView">Demo</A></LI> //linkfunctionality i want to show
<a id="various2" href="#divVideo" class="fl ml20"><img src="images/sites/img2.png" alt="" class="fl mr10" /></a> //Link functionality i want to hidde
<div style="display:none;">
<div id="demoView">
<div class="fl w900 pa20 bg2 tac">
<h3 class="ff2 fwb fs30 mb10 cf3">Please contact us for a quick demo.</h3>
<h4 class="ff2 fwb fs26 mb40 cf3">Email: <span class="cf2 pr25"><a style="text-decoration:none; color:#2a98e2;" href="mailto:info#caremerge.com">info#caremerge.com</a></span> Call: <span class="cf2">(888) 996 6993</span></h4>
<img src="images/sites/demo1.png" alt="" class="dpib mb20"/>
</div>
</div>
</div>
The function below is successfully hiding the video but its not displaying the div mentioned above in it...
function onPause() {
froogaloop.addEvent('pause', function(data) {
//$('a[href="#various2"]').fadeOut();
$('#divVideo').fadeOut(500);
// $('#various2').fadeOut(500);
//$(' #demoView').fadeIn(500);
$('#demoView').fadeIn();
alert('ST-UCK');
});
}
Some part of FANCY BOX JQUERY OF MY CODE
jQuery(document).ready(function() {
$("a#example4").fancybox({
'opacity' : true,
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'none'
});
$("#various2").fancybox({
'opacity' : true,
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'none',
'onClosed' : function() {
document.getElementById('iframe-video');
},
'onStart' : function() {
//alert("hi");
//$('#banner-rotator').royalSlider({slideshowEnabled:false,slideshowDelay:20000 });
}
});
When you open inline content in fancybox (either #demoView or #divVideo as in your example) the content is literally moved from its place in the html flow into the fancybox and a temporary div is left instead.
So when you opened #divVideo in fancybox, only that content is actually inside fancybox so this is why you can fade it out. You cannot fade #demoView in because it doesn't exist inside fancybox.
Maybe you just need to trigger the second fancybox inside your (pause) event callback like
function onPause() {
froogaloop.addEvent('pause', function(data) {
$('#example4').trigger("click"); //linkfunctionality you want to show
});
}
... that will bring the second content (#demoView) inside fancybox and the current (#divVideo) will just fade out.
Is it now because the enclosing div for demoView is hidden? So something like...
$("#demoview").parent().css({'display','inherit'});
May work?
Why is the parent even there? Perhaps you should do away with it and put the style attribute on your demoView div.

Categories

Resources