Could anyone tell my what am I doing wrong? The problem is that i have links that opens in iframe, and I want this iframe to be opened with Slide effect after I click the links (and after content will load to iframe). This is my code:
JS:
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('slider').hide();
$$('.cal_titlelink').addEvent('click', function(e) {
e = new Event(e);
mySlide.slideIn();
e.stop();
});
});
HTML:
<a class="cal_titlelink" target="details" href="//address is created dynamically by php//">Link 1</a>
<a class="cal_titlelink" target="details" href="//address is created dynamically by php//">Link 2</a>
....
<div id="slider"><iframe name="details"></iframe></div>
Here you can see how it works http://wisko.pl/ It's a calendar on the left. Slide effect works but iframe is empty. When i remove slider then iframe loads but with no effect. How can i make to load iframe content with slide effect? Please help.
http://jsfiddle.net/ZJzjV/114/
var mySlide = new Fx.Slide('slider').hide(),
myFrame = $('myFrame');
$$('.cal_titlelink').addEvent('click', function(e) {
myFrame.innerHTML = '';
e = new Event(e);
mySlide.hide();
e.stop();
if (!myFrame.getProperty("src")) {
myFrame.addEvent("load", function() {
mySlide.slideIn();
console.log("loaded");
});
}
myFrame.setProperty('src',this.getProperty('href'));
});
this is updated to work by adding a load event once and will slide it in once the iframe is loaded.
Related
I've been looking through the Stackoverflow questions, trying to get help with a simple link delay; I want to put it around a div, and I can't make heads or tails of the examples I've found.
So far, I understand that I need to halt the native function of href, but I don't know how to do that. The code is still very alien to me. Help?
Set your href attribute as href="javascript:delay('URL')" and JavaScript:
function delay (URL) {
setTimeout( function() { window.location = URL }, 500 );
}
If you want to delay every link on your page, you can do it with jQuery like this
$(function(){
$("a").click(function(evt){
var link = $(this).attr("href");
setTimeout(function() {
window.location.href = link;
}, 500);
});
});
I use this to keep the function waiting before continuing:
var wait_until = new Date().getTime() + 500;
while (new Date().getTime() < wait_until) {
//Do nothing, wait
}
To delay a link with inline javascript, just
set your href attribute as href="javascript:setTimeout(()=>{window.location = 'URL' },500);".
When you replace the URL with your link, just make sure it is inside the ' '.
<li class="nav-item">
<a href="javascript:setTimeout(()=>{window.location = '#About' },500);">
About Me
</a>
</li>
If you want to open on a new tab (target="_blank"),
This would be #gurvinder372's code changed to account for the new tab:
If you want to use any other target setting, just change the "_blank" to your preferred setting.
function delay(URL) {
setTimeout(function () {
window.open(URL, "_blank"); // this is what I've changed.
}, 500);
}
$(".test").click(function(event) {
event.preventDefault();
var self = this;
$("#preloader #image").fadeIn();
$("#preloader").fadeIn();
$(".frame").load(self.href,function() {
$("#preloader #image").fadeOut();
$("#preloader").delay(111).fadeOut();
$(".content").slideToggle(185);
});
});
This should slideToggle after load content of div('.frame'), but content slide instantly, also content appear faster than preloader fadeOut. Why is this happening?
I am doing JSF primefaces project.We have primefaces file upload component in a div id="dropBox" which accepts drag and drop files.Normally if you drop a file anywhere on the page, browser opens it up.I want to disable this behavior and allow drops only in the div dropBox. following code disables file drag and drops on entire page .
$(document).bind({
dragenter: function (e) {
e.stopPropagation();
e.preventDefault();
var dt = e.originalEvent.dataTransfer;
dt.effectAllowed = dt.dropEffect = 'none';
},
dragover: function (e) {
e.stopPropagation();
e.preventDefault();
var dt = e.originalEvent.dataTransfer;
dt.effectAllowed = dt.dropEffect = 'none';
}
});
$(document).ready(function(){
$('#container').load('contents/home.html');
$('#nav ul#navigation li a').click(function(){
var page = $(this).attr('href');
$('#container').fadeOut('slow').load('contents/' + page + '.html').fadeIn('slow');
return false;
});
});
This works good when loading pages within a div container.
home.html containing nivoSlider, when the whole page is refreshing it works good but loading home.html again onto #container after loading pages using function
$('#container').load('contents/' + page + '.html') then the nivoSlider isn't not working.
I have to refresh the whole page just to refresh the div. So I need a code to refresh the div every time it load the pages onto the div #container.
Make sure to encapsulate unique knowledge in a single place in your code. If you need to refresh something, make sure to put this in a single place and then call it as required. Your code could look something like this:
$(document).ready(function() {
var container = $('#container');
function loadContent(url, callback) {
return container.load(url, {}, function () {
// Add code here to refresh nivoSlider
// Run a callback if exists
if (callback) {
callback();
}
});
}
loadContent('contents/home.html');
$('#nav ul#navigation li a').click(function (event) {
var page = $(this).attr('href');
container.fadeOut('slow').loadContent('contents/' + page + '.html').fadeIn('slow');
event.preventDefault();
});
});
I'm using the jquery-ui-map plugin and my test page (test.html) loads a Google Map correctly when I click the button. This SAME test.html don't work if a load it from another jquery mobile page. What I'm doing bad or what I'm missing? Next the significant code:
Javascript in the header (like in the example for the basic map):
var mobileDemo = { 'center': '57.7973333,12.0502107', 'zoom': 10 };
$('#basic_map').live('pageinit', function() {
demo.add('basic_map', function() {
$('#map_canvas').gmap({
'center': mobileDemo.center,
'zoom': mobileDemo.zoom,
'disableDefaultUI':true,
'callback': function() {
var self = this;
self.addMarker({'position': this.get('map').getCenter() }).click(function() {
self.openInfoWindow({ 'content': 'Hello World!' }, this);
});
}});
}).load('basic_map');
});
$('#basic_map').live('pageshow', function() {
demo.add('basic_map', function() { $('#map_canvas').gmap('refresh'); }).load('basic_map');
});
And the html (sorry, I can't post the HTML code because it's interpretatded, but the link is below):
http://www.medlifesolutions.com.mx/locations/mobile/test.html
As I said, this works perfect if I write test.html in the browser directly but if comes from another page:
http://www.medlifesolutions.com.mx/locations/mobile/main.php
it simply ignores a "click" or touching the button to show the map. Thanks in advance for your help.
One problem I see in your code is the use of live. It is recommended to replace live with on.