I would like to load my fancybiox iframe when the page is loaded:
<script type="text/javascript">
$(document).ready(function(){
$("a.various2").fancybox({
padding: 0,
margin: 0,
width: 400,
height: 350,
autoSize : true,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
</head>
<body>
<a class="various2" data-fancybox-type="iframe" href="nlpumc.html">Iframe</a>
This script works by clicking on the link. But how does it work with document ready? I testet:
$("a.various2").fancybox.open({
That's not correct?
Thank you!
Here's the HTML...
<a class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>
<a class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>
And here's the JS...
// Activate fancyBox
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
padding : 0
});
// Launch fancyBox on first element
$(".fancybox").eq(0).trigger('click');
And now the JSFiddle...
Click here.
Works like a charm!
Related
I am using Fancy popup in a tag on click it show it working fine. Below my code
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="http://fancyapps.com//fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://fancyapps.com//fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
Click Me
<div style="display:none">
<div id="myDivID">
<input type="text" id="fname" name="fname" placeholder="First Name" required="true" class="form-text" />
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$("a#fancyBoxLink").fancybox({
// 'href' : '#myDivID',
'titleShow' : true,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'openEffect' : 'elastic',
'closeEffect' : 'elastic',
'maxWidth' : 800,
'maxHeight' : 600,
'fitToView' : false,
'width' : '70%',
'height' : '70%',
'autoSize' : false,
'closeClick' : false
}); });
</script>
Now My problem is i want to i want to call that a tag link in this html so i added below script
<script>
$(document).on('click', 'a', function(e) {
e.preventDefault();
e = $(this).attr('href');//this gets the href
//e = $(this).text();//This gets the text
$('#fname').val(e);
});
</script>
I want to pass href to that input box so I change this to Click Me
this Click Me after this it stop working how i make it as working
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Drawing Tools Sample</title>
<!-- Bing Map Control references -->
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
function GetMap() {
map = new Microsoft.Maps.Map(document.getElementById("myMap"), {
credentials: "",
zoom: 17,
center: new Microsoft.Maps.Location(47.592, -122.332)
});
var infoboxOptions = {
width: 200,
height: 100,
showCloseButton: true,
zIndex: 0,
offset: new Microsoft.Maps.Point(10, 0),
showPointer: true
};
var defaultInfobox = new Microsoft.Maps.Infobox(map.getCenter(), infoboxOptions);
map.entities.push(defaultInfobox);
defaultInfobox.setHtmlContent('<div>MY TEXT <input type="text"></div>');
}
</script>
</head>
<body onload="GetMap()">
<div style="position:relative;width:250px;height:150px;float:left;">
<div id="myMap" style="position:relative; width:600px;height:200px;"></div>
</div>
</body>
</html>
I am looking add custom Html elements such as textbox, textarea to bing map pushpin therefore it can be editable when it placed.
problem is can be place push pin with textbox or textarea but it cannot be editable.
This is a limitation of the default infobox class. You can work around this by using the custom infobox module found here: https://bingmapsv7modules.codeplex.com/wikipage?title=Custom%20Infobox%20Control
Not sure what I'm doing wrong. The Masonry works, but the Infinite Scroll doesn't.
I'm trying to make the simplest Masonry/InfiniteScroll theme to build upon. I've tried a lot of different methods but I still get stuck.
<title>{title}</title>
<meta name="description" content="{MetaDescription}" />
<link rel="shortcut icon" href="{Favicon}">
<!--[if IE]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
<script type="https://github.com/paulirish/infinite-scroll/blob/master/jquery.infinitescroll.min.js"></script>
<script type="text/javascript">
$(window).load(function () {
var $content = $('#container');
$content.masonry({itemSelector: '.item', columnWidth:300
});
$content.infinitescroll({
navSelector : 'div#pagination',
nextSelector : 'div#pagination a#nextPage',
itemSelector : '.item'
});
});
</script>
<style>
.item{width:300px;}
img{max-width:100%;}
</style>
</head>
<body>
<div id="container">
{block:Posts}
{block:Photo}
<div class="item"><img src="{PhotoUrl-500}" title="{PhotoAlt}"/></div>
{/block:Photo}
{/block:Posts}
</div><!--wall-->
{block:Pagination}
<div id="pagination">
{block:NextPage}
<a id="nextPage" href="{NextPage}"></a>
{/block:NextPage}
{block:PreviousPage}
{/block:PreviousPage}
</div>
{/block:Pagination}
{/block:IndexPage}
</div>
</body>
</html>
Perhaps you could use this code if you want, this is the best one i have found so far:
<script type="text/javascript" src="http://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>
<script type="text/javascript">
$(window).load(function(){
var $wall = $('.posts');
$wall.imagesLoaded(function(){
$wall.masonry({
itemSelector: '.entry',
isAnimated : false
});
});
$wall.infinitescroll({
navSelector : "div#navigation",
nextSelector : "div#navigation a#nextPage",
itemSelector : ".entry",
bufferPx : 2000,
debug : false,
errorCallback: function() {
$('#infscr-loading').fadeOut('normal');
}},
function( newElements ) {
var $newElems = $( newElements );
$newElems.hide();
$newElems.imagesLoaded(function(){
$wall.masonry( 'appended', $newElems,{isAnimated: false}, function(){$newElems.fadeIn('slow');} );
});
}); $('.posts').show(500);
});
</script>
<script>
$.fn.changebackgroundColor = function(msg) {
$("#perma").css("#000");
};
</script>
I have no issue with the infinite scroll with it and it's rather simple. You should just check the Selector and var names to put those that are in your theme. else than that, I think the problem could be the scripts you are using. Try to use different ones maybe. I used to have some similar to yours and I realized that they didn't even respond when i debugged my page. It could be a similar issue.
I need to load fancybox with inside php file, when I will click on textarea.
My code:
<script type="text/javascript">
$("#mypop").click(function() {
$.fancybox({
'href' : 'file.php',
'transitionIn' : 'none',
'transitionOut' : 'none',
'titleShow' : false,
'overlayColor' : '#fff',
'overlayOpacity': 0.8 }); });</script>
<textarea rows="4" cols="50" onfocus="#mypop" ></textarea>
Why this is not working ?
You need to change your textarea tag: remove onfocus="#mypop" and add id="mypop". The $("#mypop") function-call will search for an element with id="mypop", and the click(function(){...}) function will add the event-listener. This function-call also makes the onfocus=-attribute unnecessary.
<script type="text/javascript">
$("#mypop").click(function() {
$.fancybox("<iframe src='file.php' frameborder='0'></iframe>",{
maxWidth : 700,
maxHeight : 600,
fitToView : false,
width : '50%',
height : '50%',
autoSize : true,
closeClick: false
});
});
</script>
<textarea rows="4" cols="50" id="mypop" ></textarea>
By: Jose ALfredo Cocom Chan
I am not sure where to put following zingchart click event handling code in the html page.
zingchart.click = function(dataStr){
var data = eval('(' + dataStr + ')');
alert("Chart Clicked - ID: " + data["id"]);
}
If anybody knows please provide the sample HTML code.
The zingchart.click function can go anywhere after the zingchart script include.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../zingchart-1.1.min.js"></script>
</head>
<body>
<div>
<div>
<div id="zingchart"></div>
</div>
<script type="text/javascript">
var jsonConfig = '{"graphset" : [{"type" : "line","series" : [{"values" : [5, 10, 15, 5, 10, 5]}] }]}';
zingchart.render({
data : jsonConfig,
width : 600,
height : 300,
container : 'zingchart'
});
zingchart.click = function(data){
alert("Chart Clicked - ID: " + data["id"]);
}
</script>
</div>
</body>
</html>